Right-to-left – implementing bidirectional web apps


What is Right-to-Left?

There are over 7,000 living languages (I mean not programming ones), several alphabets, and different writing systems in the world. If you’re using English, you’re used to reading and writing from the left side of the page to the right. This is a Left-to-Right (LTR) text flow. However, several languages use Right-to-Left (RLT) scripts, including Arabic, Hebrew, Persian, Urdu, Yiddish, and others. Moreover, some languages are written in the top-to-bottom script (TTB). Some of them have LTR representation or use a mixed style (see examples below).

For UI designers and front-end developers, this means that in order to provide the RTL flow, the content of the website or app is mirrored (with some exceptions which are mentioned below). Not only is text switched, but also other elements like navigation buttons, breadcrumbs, animations, checkboxes, icons and so on.

For me, customising websites for Arabic or Hebrew language versions was a great lesson. I discovered how ethnocentric I was and how diverse the World Wide Web actually is. In this post, I’d like to share several techniques that will make the process of mirroring easier and less time-consuming.


Source: https://www.mozzaik.shop/ar/checkout/shippingPayment

Source: http://www.baroku.co.jp/

Implementing bidirectional web apps

This is our example website. The goal is to switch it to RTL. So what is the first step?


Theoretically, changing the direction of an existing website should be a piece of cake. There is a dedicated HTML attribute called dir. You simply add this code to the body element, and your whole page is mirrored.

That’s it? So what’s all the fuss about?

Let’s apply this attribute and see the outcome:

<body dir = “rtl”>
...
</body>

⚠️  Note: you may also use the value auto. It detects the type of script used on the page and adjusts it accordingly. This might be especially helpful with mixed language content and might solve truncation issues (“Hello Worl…” instead of “…ello World”). You can also apply the dir attribute to individual elements.

Take a look at the mirrored page. Are the styles appropriate? Notice the margins, paddings, icons, and some custom elements like radio buttons or progress bars. These issues are due to hardcoded values in CSS. At first glance, it may seem like a few minor changes. Nonetheless, there is a manual job to be done here, and you don’t want to make it the hard way by overwriting styles and creating even longer stylesheets.

Is there an easier way? 🤔

CSS Logical Properties

Here’s a big one: stop hardcoding paddings, margins, and borders! There is a better universal solution. Start using CSS Logical Properties!

I know that frontend developers’ first question is: „Wait, can I actually use CSS Logical Properties?”

Yes, all major browsers support them. 😉 IE, rest in peace…

Several years ago the flexbox and CSS grid were introduced. There are implemented properties like justify-content: flex-start/flex-end etc. As you can see, CSS gradually drops the concept of “left” or “right” and instead defines alignment with keywords like start, and end. Thanks to this flexbox, the CSS grid and now CSS logical properties automatically adjust to the direction of the page (LTR or RTL). This reduces the amount of code and allows you to switch between LTR and RTL effortlessly.

What does that mean in practice?

/* ❌ margin-right: 1rem; */
margin-inline-end: 1rem;

/* ❌ margin-left: 1rem; */
margin-inline-start: 1rem;

/* ❌ margin-top: 1rem; */
margin-block-top: 1rem;

/* ❌ margin-bottom: 1rem; */
margin-block-bottom: 1rem;

/* Shorthand for vertical axis */
margin-inline: 1rem;

/* Shorthand for vertical axis */
margin-block: 1rem;

/* The same applies to paddings and borders. */

It may be a bit tricky to remember these new properties, so let’s see this in a more visual way. Notice, that the inline represents the horizontal axis, and the block represents the vertical axis.

Logical Dimension

Additionally, CSS allows applying logical properties to sizing elements, so they can be applied properly in all writing modes. In the table below, you can see physical properties and their logical equivalents. Note, that new values are not interpreted yet in the media-queries syntax.

Physical propertyLogical property
widthinline-size
max-widthmax-inline-size
min-widthmin-inline-size
heightblock-size
max-heightmax-block-size
min-heightmin-block-size

Positioning

Relative or absolute positioning can also be declared as a logical property. In this table, you can see physical properties and their logical equivalent.

Physical propertyLogical property
topinset-block-start
bottominset-block-end
leftinset-inline-start
rightinset-inline-end
top and bottominset-block
left and rightinset-inline

The same principles of logical alignment are slowly introduced in text alignment, the background position or floats. Before using them, make sure your browser supports them.

Using mentioned techniques most of the page content should already be adjusted. However, there are some additional topics which should be addressed in order to create a better user and developer experience.

⚠️  Check CSS transforms declarations. There may be some elements or icons that require some manual adjustments.

Animations and sliders

Apart from mirroring the look of the components, all animations should also be handled in a proper manner. As you can see on the slider screenshot, it’s presented in the opposite direction than in LTR sliders (the next slide button indicates the left direction). When choosing, for example, a slider or any other component library, take into account the RTL support. Swiper is doing a great job of this: to see a working example, click here.

Source: https://stackblitz.com/edit/swiper-demo-34-rtl-layout?file=index.html

⚠️ Remember about exceptions: animated progress bars, including those indicating video or audio state, are not mirrored. Don’t mirror everything thoughtlessly!

Source: https://material.io/design/usability/bidirectionality.html#mirroring-elements

Calendars and numeric systems

Other interesting topics you may encounter while working with RTL websites are calendars and numeric systems. It’s good to remember that:

  • There are multiple calendars used around the world. For example, This REST API helps convert Hebrew dates, which might be useful.
  • There are no abbreviations for weekdays in Arabic. The design team also should consider this fact, especially on mobile devices.
  • There are a few writing systems for expressing numbers used around the world, for example, Eastern Arabic numerals: ٠,١,٢,٣,٤,٥,٦,٧,٨,٩

It’s good to discuss these matters across the whole development team, especially with backend developers, to avoid unnecessary formatting and calculation problems.

Developer Experience: class names really matter

Aside from CSS techniques, I’m adding this straightforward point which might really save you and other developers a lot of confusion. As mentioned earlier, CSS gives up the right and left keywords. So you should too in HTML class names or JS variables.

Let’s consider the case of a component that has two columns. One column occupies 70% of the container width, the second one takes the remaining 30%. What’s the biggest mistake one can make in naming those columns?

❌ Don’t:
<element class=”element__column--right”></element>
<element class=”element__column--left”></element>

Can you imagine how confusing it’ll get when switching this to RTL? You don’t want to maintain code where the right becomes left, and the left is right. Trust me, I’ve been there…

What should you do instead?

For example, use the keywords main and side or start and end.

✅ Do:
<element class=”element__column--main”></element>
<element class=”element__column--side”></element>

Developer Experience: Generic class names

Another bad example is adding generic class names describing the element styling that doesn’t respect the RTL approach. For example:

❌ Don’t:
<element class=”mL0”></element>

The abbreviation .mL0 stands for margin-left zero. The situation gets even worse when this CSS style contains the !important flag. Avoid using such class names by all means. While writing your own libraries and code samples, keep in mind that they should be universal.

Conclusion

There are many more details in designing and coding universal apps suitable for both LTR and RTL. A great start is using CSS logical properties and avoiding keywords left or right in class or variable names.

Other details connected to UI design and development that are worth considering:

Educate yourself and your team, so the solutions may be applied early on. I really encourage you to get familiar with additional resources. They cover many more corner cases one may encounter on a journey to provide a great experience for users who use either LTR or RTL scripts. Lastly, share what you’ve learned with others!

Attendee Experience and Accessibility during events

Attendee experience

Attendee experience

 

There are plenty of events these days: meetups, conferences, webinars, workshops. Speakers love sharing their knowledge. Attendees are interested in technology news, want to learn a particular skill or discuss approaches to arising problems. As a Frontend Developer and also an Event Manager in a non-profit organisation, I started to think about accessibility and attendee experience. There are several issues that your attendees may encounter if you don’t think about them beforehand. In this article, I’d like to share with you some tips you may want to implement while organising your next event.

Choose accessible venue

While choosing a venue for an event, you may have several criteria in your mind, like location or cost. However, we tend to forget about other people’s needs. To choose an accessible venue, put yourself into the position of a person that may have some physical disabilities and try to foresee situations that may cause difficulties while registration, accessing the toilet or finding an accessible place to sit.

Examples: 

  • During one event, our speaker walked with crutches due to knee injury. We provided her seat in the front row and helped with getting around. Our venue was on the fifth floor, so the lift was here also essential.
  • We also hosted a girl in a wheelchair. She came with a friend who supported her. During workshops, she sat next to a table that was easy to access. We also made sure that the toilet is also accessible to her. We placed extension cables the way that they didn’t cause any troubles while getting around. We also made sure that the toilet is also accessible to her.
Girl on a wheel chair attending workshops
Photography: Filip Sobalski

Prepare legible presentations

Art of creating presentations and storytelling is intricate. As a speaker or webinar host, it’s also important to remember about accessibility. As an organiser, you may develop a set of requirements that speakers should follow to provide the best possible experience.

Remember: 

  • Use high contrast (background and text on the slides). There are special tools like this website.
  • Avoid white background on your slides; it may be too bright and quite irritating to viewers eyes. Dark modes are implemented more and more in web apps, use it in your presentations also!
  • Use readable typefaces
  • Provide a transcript of your presentation

Have you ever heard about lip reading? It’s a good idea to reserve some spots in the first row for people who need to sit close to the speaker. If you’re organising a large event, streaming the speaker’s face close up on a large screen might also help. Apart from that, make sure the acoustics is well-tuned. Without the proper sound system, there is no way to create a great presentation experience. 

contrast check website

Go vegetarian, reduce plastic

If you’re providing food during your event, think about it carefully. There are many people with different allergies and preferences. I know it isn’t easy to please everybody, but with little additional effort, it’s possible. The first step is to go vegetarian for everybody. It may be a vegetarian pizza; otherwise, try to find some vegetarian catering. Before all the workshops I organised, we asked all attendees about their food preferences. This way, it was possible also to provide gluten-free, lactose-free and vegan meals and snacks.

Additionally, during girls.js events, we care about the environment, and that’s also the reason why we choose to go vegetarian. Minimising plastic usage is also essential for us. Thanks to these actions, we also manifest our values and create a positive image of the organisation. You can do it too!

Quality over quantity

A big queue for a toilet? Lost or unsatisfied people? Not enough food for all attendees? Those are big sins of event organisers. Mass events are difficult to tackle and even more challenging to provide the best attendees experience. From my perspective, it’s better to focus on quality and make the participant feel special. As an organiser, you should be focusing on creating a friendly atmosphere and providing knowledge in an accessible way. Create quality time, and you’re responsible for this as an organiser and a speaker.

During workshops I organised we work in small teams (each team consisted of one mentor and three attendees). This way, we are sure girls who take part in the workshop get the most value out of the whole training. I believe that this personal approach helps to gain trust and reduce the fear of asking questions. It’s especially important in technical and hard skills workshops. However, this approach requires the group to be in an approximate the same level of advancement in a given topic. That’s essential from the mentor’s perspective.

Mentor and mentee
Photography: Alicja Gancarz

 

Other little improvements

  • If it’s possible, provide a small room for mothers who breastfeed. Mothers often struggle to find a place that is suitable for such intimate moments. Baby carriages are another reason why you should provide an accessible venue.
  • I also learned that a great way of taking care of your attendees is to offer rescue baskets. These handy little items will make your participants feel you care about them.
  • Say big thank you to speakers and people that helped during the event. A little gift will certainly make them feel cherished. 

Ask your attendees

If you have a registration form for your event, include an additional field and ask if your attendees need some support during the event. In case you sell tickets for your event, you may have a small annotation in the confirmation email or directly on the ticket. That may help both sides: you may get prepared as a host and provide excellent experience and care to your attendees. Getting feedback after the event also may help you improve and learn about people’s needs. Be open to new perspectives!

Be a genuine host

Attendees experience is all about people and making them feel comfortable during your events. You may wonder, why should you care about those details? 

Here’s a quote that best answers this question:

“I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.”

― Maya Angelou

Have you ever organised an event? Do you have your secret ways to surprise your attendees and provide the best attendees experience? Or maybe you learned a lesson the hard way? Let me know in the comments what your key to organising accessible events is?

Photography: Alicja Gancarz

Mikroserwisy i Frontend?

microserwisyFrontend

microserwisyFrontend

Niedawno miałam okazję uczestniczyć w webinarze organizowanym przez GFT Polska, podczas którego Norbert Blandzi, Senior Software Engineer, opowiadał o mikroserwisach stosowanych na froncie. Postanowiłam trochę przybliżyć Wam to podejście i udało mi się zadać Norbertowi kilka nurtujących mnie pytań.

Olga: Norbert, niedawno przeprowadziłeś webinar na temat mikroserwisów na frontendzie. Powiedz mi, na jakiej podstawie stwierdzić czy w naszym projekcie warto zastosować takie rozwiązanie?

Norbert: Na początku warto zaznaczyć, że wdrożenie architektury mikroserwisów na frontendzie jest zdecydowanie łatwiejsze w początkowej fazie projektu. Jeśli aplikację, którą tworzymy, planujemy rozwijać przez dłuższy czas, a nie tylko zrobić i o niej zapomnieć to jest to już podstawa do tego, żeby pomyśleć o takim rozwiązaniu. Innym ważnym aspektem, który należy wziąć pod uwagę to wielkość naszego zespołu. Jeżeli zespół, który będzie pracował nad aplikacją, jest większy niż 5 programistów, to także może to być sygnał, aby skorzystać z dobrodziejstw, jakie dają nam frontend mikroserwisy. Z własnego doświadczenia mogę powiedzieć, że wkład na początku projektu jest tak mały, że warto je dodać, nawet, gdy nie jesteśmy pewni czy się nam przydadzą. Strat z tego tytułu nie poniesiemy, a zysk może być ogromny.

O: Podczas webinaru wspomniałeś, że w pracy wraz z zespołem zdecydowaliście na korzystanie ze Single-spa. Co było główną determinantą, która zdecydowała o właśnie takim podejściu?

N: W poprzednim projekcie z zespołem korzystaliśmy z własnej implementacji frontend mikroserwisów, z którą było kilka problemów takich jak:

  • wiele wersji tej samej biblioteki ładujących się z losową kolejnością i nadpisujących się,
  • style z jednej aplikacji nadpisywały drugą,
  • brak prostego sposobu na dodanie kolejnej aplikacji utworzonej w innym frameworku,
  • problemy z routingiem,
  • brak lazy loading.

Biorąc pod uwagę wszystkie te problemy i kilka innych, zacząłem przeszukiwać Internet w celu znalezienia najlepszego rozwiązania dla naszych potrzeb. Na początku zaczęliśmy tworzyć całość w oparciu o iframe, które można było łatwo wdrożyć. Niestety szybko okazało się, że ich stylowanie jest bardzo trudne i niewygodne, a z dostępnością dla ludzi korzystających z czytników ekranowych jest jeszcze gorzej. Ucząc się na tych błędach, zacząłem szukać dalej i trafiłem na single-spa. W Internecie nie ma dużo przykładów implementacji mikroserwisów na frontendzie. Można znaleźć dużo teorii, ale mało, kto podaje gotowe rozwiązania lub dzieli się swoimi doświadczeniami. Single-spa zaskoczyło mnie przyjazną dokumentacją z gotowymi przykładami implementacji, które łatwo mogłem przetestować w moim środowisku. Po dwóch dniach testowania uznałem, że single-spa spełnia wszystkie moje wymagania i tak zaczęła się nasza wspólna przygoda.

O: Mikrofrontend pozwala nam łączyć kilka aplikacji napisanych nawet w różnych frameworkach. Czy nie uważasz, że takie podejście może stać się problematyczne jeśli chodzi o utrzymanie projektu?

N: Jeśli chodzi o jakieś własne rozwiązania może i byłoby to problemem, ale single-spa daje nam gotowe moduły npm dla większości popularnych obecnie frameworków, co niesamowicie ułatwia tworzenie całej aplikacji. Chciałbym tutaj nadmienić, że nie jestem fanem tworzenia aplikacji z wykorzystaniem 5 różnych frameworków. Dla mnie najważniejsza jest możliwość wyboru, co ma znaczenie przy projektach trwających np. przez kilka lat. W naszej obecnej aplikacji mamy około 8 aplikacji działających razem i wszystkie są napisane z wykorzystaniem React, ale nic nie stoi na przeszkodzie, żeby za jakiś czas, gdy pojawi się nowy, super szybki framework, z niego nie skorzystać. Frameworki są tylko narzędziem, najważniejsza natomiast dla nas jest możliwość podzielenia aplikacji funkcjonalnie i przydzielenia tych części zespołom. Dzięki temu w łatwy sposób możemy utworzyć jeden zespół odpowiedzialny za rejestracje, kolejny za czat z użytkownikiem, a jeszcze inny za panel admina. W ten sposób podzielone aplikacje są zdecydowanie mniejsze i łatwiejsze w utrzymaniu.

O: Jakie było największe wyzwanie podczas wdrażania mikroserwisów na frontendów u Ciebie w projekcie?

N: Największym wyzwaniem było umożliwienie łatwego testowania aplikacji na dwa sposoby. Pierwszy – uruchamiając ją, jako samodzielną podczas prac programistycznych, gdy potrzebujemy np. dodać nowy przycisk. Drugi – uruchamiając naszą świeżo zmienioną aplikację w całym ekosystemie, razem z innymi aplikacjami. Problemem było tutaj np. uwierzytelnianie użytkownika, które dzieje się dla wszystkich aplikacji w „aplikacji kontenerze”, a gdy odpalamy aplikację samodzielnie, nie posiadamy np. tokena, aby wykonać żądania do części serwerowej. Tak samo główna paczka ze stylami znajduje się w jednym miejscu i nie ma do niej bezpośrednio dostępu, gdy aplikacja jest uruchomiona samodzielnie. Na szczęście większość tych problemów udało się rozwiązać przez wykorzystanie proxy do naszych środowisk deweloperskich, z których są pobierane wszystkie brakujące zależności.

O: Dostępność w sieci jest niezwykle ważnym zagadnieniem, niestety zdarza się, że jest ono pomijane. W kontekście mikroserwisów na co trzeba zwrócić szczególną uwagę?

N: Tak jak wspomniałem wcześniej, rozwiązanie z wykorzystaniem iframe, od razu odpada, ponieważ nie jesteśmy w stanie zrobić strony, która będzie dostępna w tym podejściu. Natomiast rozwiązanie oparte o single-spa niczym się nie różni, jeśli chodzi o dostępność od aplikacji monolitycznej. Nasza aplikacja bankowa złożona z 8 różnych aplikacji ostatnio przeszła audyt dostępności, w 100%, więc nie ma z tym najmniejszych problemów. Chciałbym tutaj wspomnieć o jednym z problemów, na który napotkaliśmy. Id elementów DOM muszą być unikatowe nie tylko dla danej aplikacji, ale i gdy są one wszystkie wyświetlone razem. My rozwiązaliśmy ten problem poprzez dodanie nazwy aplikacji przed każdym id np. gft-chat-header, gft-admin-header, gft-news-header.

O: Część osób jest sceptyczna do takiego podejścia, podaj mi 3 największe korzyści, które dają nam mikroserwisy w webdevie.

N: Moim zdaniem trzy główne korzyści to:

  • podział aplikacji na funkcjonalne części, które mogą być rozwijane niezależnie przez różne zespoły,
  • mniejsze aplikacje, to mniej zależności oraz łatwiejsze tworzenie testów, co pozwala nam na wykonanie aplikacji z mniejszą liczbą błędów,
  • dowolność wyboru, która daje nam możliwość korzystania z najlepszych narzędzi obecnie dostępnych dla naszych potrzeb bez narzekania, że gdybym zaczął projekt z frameworkiem Y, to teraz byłoby łatwiej, a tak muszę wszystko robić z starym framworkiem X.

O: Dzięki wielkie za podzielenie się swoim doświadczeniem! Fajnie było poznać Twój punkt widzenia oraz podejście do pracy z dużymi aplikacjami. Jeśli jesteście ciekawi tego zagadnienia, to polecam obejrzeć webinar, w którym Norbert, podczas sesji life coding, wdraża trzy metody korzystania z mikroserwisów na frontendzie. Odpal nagranie oraz edytor i do dzieła. 😉

A co ty myślisz o mikroserwisach? Używasz ich w swoim projektcie? Jakie masz obawy jeśli chodzi o takie podejście?

Niepotrzebny kod

niepotrzebny kod

niepotrzebny kod

 

Jako programiści jesteśmy odpowiedzialni za kod który piszemy.

Zgadza się?

Nie, nie do końca. Jesteśmy odpowiedzialni za kod, który zostawiamy. Chcemy, żeby nasze programy były jak najbardziej optymalne, stąd pamiętajmy również o usuwaniu zbędnego kodu.

Ciekawym narzędziem do sprawdzania tego ile kodu faktycznie jest używane na stronach internetowych jest zakładka Coverage w narzędziach developerskich Chrome.

Możemy ją znaleźć w ten sposób:

Coverage chrome dev tools

Teraz możemy zbadać ile realnie naszego kodu CSS i JS używane jest na stronie, którą załadowaliśmy.

Po rozpoczęciu audytu wyświetla nam się piękna tabelka, która pokazuje źródło, z którego pobierany jest kod, typ (plik JS lub CSS). Mamy również podane wielkości plików oraz ilość bajtów, które nie zostały użyte na danej stronie.

Coverage chrome dev tools

 

Po kliknięciu na dane źródło będziemy mogli zobaczyć, dokładnie które linie kodu są wykorzystywane. To, że jakiś kod nie jest wykorzystywany na dalej stronie nie znaczy, że definitywnie trzeba go usunąć. Warto po prostu się zastanowić do czego służy i czy jest niezbędny. Polecam eksplorację tej części narzędzi developerskich.

Masz jakieś inne sprawdzone sposoby na identyfikowanie niepotrzebnego kodu? Podziel się koniecznie w komentarzu.

Optymalizacja SVG

svg omg cover

svg omg cover

Od kiedy poznałam narzędzie SVG OMG już zawsze dbam aby kod SVG, który dodaję do projektu zawsze był jak najlżejszy i bardziej czytelny. To genialne narzędzie stworzone przez Jakea Archibald i opisane jako:

SVGOMG is SVGO‚s Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.

Jak korzystać z SVG OMG?

Kiedy dostajemy grafikę w formacie SVG często znajduje się tam sporo kodu, który zupełnie nie jest potrzebny. Do tego pewne kształty i krzywe można znacznie uprościć. Warto zadbać o optymalizację, dzięki temu narzędziu zyskamy mniejszy rozmiar pliku oraz większą czytelność kodu.

Wchodzimy na stronę: SVG OMG i wklejamy nasz snippet lub ładujemy nasz plik SVG. W głównym panelu powinniśmy mieć podgląd naszej grafiki. Na stronie dostępne jest demo, polecam zapoznanie się z dostępnymi opcjami.

svg omg dashboard

 

Jak widać z powyższego obrazka dzięki SVG OMG plik został zmniejszony o prawie 60%. Dostępne są dwa widoki: możemy sprawdzić wygląd grafiki oraz mamy podgląd kodu. Jednym z ważniejszych parametrów jest dokładność jaka jest zachowana względem oryginalnej grafiki. Warto mieć na uwadze to, że program upraszcza krzywe i kształty, stąd mogą się pojawić drobne różnice.

SVG OMG dostarcza nam sporo opcji, które możemy dostosować do własnych potrzeb.

svg omg options

Polecam wprowadzenie używania tego narzędzia jako standard w Twoich projektach. 😉

Masz jeszcze jakieś inne metody na optymalizację SVG? Znasz jakieś inne ciekawe narzędzia? Koniecznie podziel się w komentarzu!

Style do druku

print styles

Style do druku stron internetowych

CSS media otwierają nam wiele możliwości. Dzięki nim nie tylko możemy dodawać style, które będą aplikowane o różnych rozdzielnościach urządzeń, czy orientacji urządzenia mobilnego (wertykalne/ horyzontalne). Warto pamiętać, że mamy również możliwość stylowania stron internetowych do druku.

Spotkałeś/spotkałaś się z zapisem @media screen? Aby zaaplikować dodatkowe style do druku należy dodać do pliku CSS @media print. Inną metodą dodawania stylów jest przez link do osobnego pliku.

<link rel="stylesheet"
      src="print.css"
      type="text/css"
      media="print" />

Dla ciekawskich jest jeszcze kilka innych opcji, które możemy dodać oprócz wyżej wymienionych screen i print, na przykład speech, tv a nawet  braille. Więcej przeczytasz tutaj.

Symulator w narzędziach developerskich Chrome

Narzędzia developerskie Chrome umożliwiają nam na symulowanie strony do druku. Wystarczy wejść w zakładkę Rendering. Na samym dole znajdziemy zakładkę Emulate CSS media. Najprawdopodobniej będziesz mieć wybraną opcję no emulation albo screen. Po kliknięciu pokazują nam się trzy opcje i możemy wybrać print.

print css chrome dev tools

A po jaką cholerę potrzebne mi style do druku?

W obecnych czasach raczej rzadko korzystamy z drukowania stron internetowych. Czasami jednak może to być przydatne dla naszych użytkowników.  Warto zadbać o to, aby taka strona do druku nie była w totalnej rozsypce. Flexbox i CSS grid nie będą wyglądać najlepiej po wydrukowaniu.

Przykładowe sytuacje w których faktycznie może się to przydać?

  • Strona podsumowania zamówienia w sklepie internetowym. Ważne, żeby po wydrukowaniu wyglądała czytelnie.
  • Wydruki z banku internetowego.
  • I jeszcze jeden przypadek, na który natknęłam się osobiście w pracy. Zastanów się, czy widziałeś kiedyś logotyp na stornie internetowej, który był biały? Domyślasz się zatem jak wygląda na białej kartce? Czasami małe rzeczy mają spore znaczenie 😉

Dodatkowe źródła

Poniżej znajdziesz kilka przydatnych linków, które zawierają dużo więcej informacji o stylowaniu stron o druku.

A Guide To The State Of Print Stylesheets In 2018; Rachel Andrew, Smashing Magazine

How to Create Printer-friendly Pages with CSS; Craig Buckler, Sitepoint

Masz jakieś fajne wskazówki odnośnie stylowania stron internetowych do druku? Koniecznie podziel się w komentarzu!

Dzień Kobiet z JavaScriptem – 3 edycja girls.js

dzien kobiet z javascriptem
dzien kobiet z javascriptem
fot. Sabina Psuj

Dzień pierwszy – integracja

prelekcje podczas girls.js
fot. Sabina Psuj

 

 

 

 

 

 

 

 

Dzień pierwszy warsztatów girls.js poświęcony był integracji. Podczas wieczoru obecne były zarówno uczestniczki, jak i wszyscy mentorzy i mentorki. Spotkanie odbyło się w siedzibie formy Codewise 08.03 czyli w Dzień Kobiet. Głównym punktem programu były dwie prezentacje. Pierwsza Kacpra Sokołowskiego pod tytułem: „Sprawdź jak za darmo podnosić swoje umiejętności i rozwijać sieć kontaktów”, zachęcająca dziewczyny do uczestniczenia w meetupach, hackathonach i nie tylko. Natomiast Iwona Kubowicz, druga prelegentka, z bloga programistka.com poruszyła temat syndromu oszusta. Dzieliła się swoim wieloletnim doświadczeniem, które zdobyła w pracy jako Full Stack developer. Oprócz tego, uczestniczki i mentorzy mieli czas na przełamywanie lodów i lepsze poznanie siebie nawzajem. Nie zabrakło niespodzianek. 🙂 Jedną z atrakcji był tort z okazji Dnia Kobiet.

wieczór integracyjny
fot. Sabina Psuj

 

 

 

 

 

 

 

 

Dzień drugi

Sobota poświęcona została nauce podstaw JavaScriptu. 30 dziewczyn oraz 10 mentorów dzielnie stawiało czoła wyzwaniom, które napotkali podczas realizowania zadania (ożywianie galerii ze zdjęciami za pomocą Vanilla JS). To były bardzo intensywne 7 godzin pracy. Dziewczyny poradziły sobie śpiewająco. To już 3 edycja warsztatów girls.js w Krakowie, którą miała okazję koordynować. Cieszę się, że tyle dziewczyn może spróbować swoich sił w programowaniu. Wielkie podziękowania dla firmy Brainly i Codewise za wsparcie naszej inicjatywy.

Co mówią uczestniczki warsztatów?

 

zespół girls.js Krakow
fot. Filip Sobalski, mentorzy i koordynatorki krakowskiej edycji girls.js

 

 

 

 

 

 

 

 

 

„Podobało mi się podejście organizatorów i mentorów. Atmosfera była luźna, przyjacielska, na warsztatach czułam się naprawdę komfortowo. Samo zadanie jakie mieliśmy do wykonania wydawało się na pozór łatwe – sprawić by galeria zdjęć zadziałała. Gdy się do tego zabraliśmy okazało się, że nie jest to wcale takie banalne dla kogoś kto z JS nie miał wcześniej do czynienia. Świetne wyzwanie, które dało mi ogrom motywacji by wziąć się do nauki JS.”

mentor i uczestniczka
fot. Filip Sobalski, mentor oraz uczestniczki

 

 

 

 

 

 

 

 

„Podobało mi się to, że grupy były 3-osobowe i każda miała swojego mentora. Pierwszy raz się z czymś takim spotkałam na warsztatach. Bardzo luksusowe warunki do nauki. Poza tym organizatorzy i mentorzy byli świetni, widać, że jesteście zgranym zespołem z dobrymi wibracjami. No i miejsce świetne, catering, tort przepyszny!”

 

tort
fot. Sabina Psuj, tort z okazji Dnia Kobiet

 

 

 

 

 

 

 

 

„Uważam, że wszystko zostało zorganizowane na najwyższym poziomie. Począwszy od zapisów na warsztaty, ich przebieg oraz zakończenie. Na warsztatach panowała bardzo przyjemna atmosfera, która sprzyjała nauce. Najbardziej podobało mi się, że odbyły się one w Dzień Kobiet. To był najlepszy prezent, jaki mogłam dostać. Szczególnie zapadła mi w pamięć prezentacja o syndromie oszusta. Myślę, że dotyczy to wielu dziewczyn.”

prelekcja Olga Stefaniuk
fot. Filip Sobalski, prelekcja podsumowująca warsztaty, Olga Stefaniuk

 

 

 

 

 

 

 

 

 

Podsumowanie

Warsztaty girls.js działają całkowicie pro publico bono. Zarówno uczestniczki nie płacą za udział w warsztatach.  Mentorzy, ani koordynatorki nie otrzymują wynagrodzenia za swój wkład w organizację eventu. Ogromną nagrodą dla nas jest, to że możemy się podzielić naszą wiedzą oraz zainspirować dziewczyny do dalszej nauki. Jestem niezwykle wdzięczna wszystkich osobom, które poświęciły swój własny czas i pomogły mi w tej inicjatywie.

To był wspaniały sposób na świętowanie Dnia Kobiet!

Muzyka wspomagająca koncentrację

muzyka koncentracja

muzyka koncentracja

 

Chyba każdy z nas lubi ten stan kiedy siadasz do pracy nad jakimś projektem i zanurzasz się bez pamięci w twórczości. Nawet nie wiesz kiedy minęły godziny pełnego skupieniu. Czasami jednak ciężko jest wejść w ten stan. Osobiście mam swoje sprawdzone albumy, które wspomagają moją koncentrację i pomagają mi osiągnąć tzw. „flow”.

Ludovico Einaudi

Mój ulubiony kompozytor, słuchając jego utworów pracuje mi się niezwykle efektywnie. Kojarzysz film „Nietykalni”? Tam właśnie między innymi możemy posłuchać jego utworów, w tym utworu Fly. Ja osobiście do pracy polecam album Una mattina:

Estas Tone

Piękne brzmienie gitary, ciekawe efekty dźwiękowe, to właśnie jest Internal Flight. Spędziłam wiele godzin w stanie „flow” dzięki temu twórcy. Zdecydowanie polecam:

Hans Zimmer

Ostatnio dwa powyższe albumy zaczęły mi nie wystarczać i niedawno trafiłam na ścieżkę dźwiękową z filmu Planeta Ziemia. Hanz Zimmer, jak zwykle, dostarcza mistrzowsko skomponowanych utworów.

Może Ty też masz sprawdzony album albo play listę, która pomaga Ci w koncentracji? Podziel się koniecznie w komentarzu!

Podsumowanie 2018

podsumowanie 2018

podsumowanie 2018

 

Nadchodzi koniec roku, czas na garść statystyk i małe podsumowanie osiągnięć.

Blog  – garść statystyk

  • 37 tysięcy odwiedzających – NIESAMOWITE 😀
  • 50 tysięcy sesji
  • 14 postów
  • 660 fanów, 708 obserwujących na Facebooku <3
  • 50% fanek i 50% fanów na Facebooku
  • 2 edycje girls.js w Krakowie
  • 5 prezentacji publicznych

     

    Cieszę się, że jesteście ze mną!

     

    Osiągnięcia 2018

  1. Zorganizowałam pierwsze warsztaty girls.js w Krakowie, udział wzięło 9 uczestniczek, ogromne zainteresowanie 15.5 osoby na jedno miejsce – relacja
  2. Zorganizowałam 2. edycję warsztatów girls.js, udział wzięło 32 uczestniczek oraz 12 mentorów – relacja
  3. Jedna z absolwentek zaczęła pracę w creativestyle jako Junior Frontend Developer – wywiad
  4. Krakowski zespół girls.js, którym koordynuję liczy 15 osób.
  5. Wystąpienia publiczne na 2 konferencjach i 3 wystąpienia na warsztatach (w tym raz po raz pierwszy po angielsku).
  6. Brałam udział w warsztatach Devstyle Speakers – relacja
  7. Po raz pierwszy raz zostałam zaproszona na Festiwal jako prelegentka (organizatorzy opłacili mi przeloty!)
  8. Założyłam swoją działalność gospodarczą
  9. Przeprowadziłam jako wolontariuszka tygodniowe warsztaty dla dzieci z programowania, robotyki i druku 3D – relacja
  10. Razem z Emilią wygrałyśmy konkurs na relację z warsztatów z programowania dla dzieci, placówka otrzyma 3000zł na sprzęt do nauki programowania – relacja
  11. Byłam na szkoleniu dla wolontariuszek w ramach projektu IT for SHE w Lublinie – relacja
  12. Uczestniczyłam w warsztatach z Angulara w Microsofcie w Warszawie
  13. Zmieniłam projekt w pracy i obecnie piszę w Vue.js. Jestem z tego bardzo zadowolona, ciąglę się rozwijam jako Frontend Developer.
  14. Uczestniczyłam w kilku konferencjach programistycznych: 4Developers Katowice, Innowacyjna Europa 2018 Kraków, Women in Tech Summit Warszawa, Meetup Programuj dziewczyno Warszawa, Meet.js Katowice
  15. Kontynuuję prowadzenie bloga SowaProgramuje – 14 postów
  16. Sama pojechałam do Maroka na 5 dni – zdjęcia
  17. Spełnione marzenie: pracowałam zdalnie z Barcelony przez 9 dni – relacja
  18. Założyłam bloga podróżniczego Travel and Change.
  19. Pracowałam nad nowym osobistym projektem i założyłam sklep internetowy.
  20. Zorganizowałam sama wyjazd na Sri Lankę, noclegi rezerwowałam z dnia na dzień i podróżowałam sama transportem publicznym. Przez tydzień przebyłam 750km. Wypuściłam 5 małych żółwi morskich do oceanu – relacja, zdjęcia
  21. Pojechałam na tygodniową wycieczkę z przyjaciółką do północnych Włoch
  22. Spełnione marzenie: koncert 2CELLOS <3
  23. Trenowałam pół roku z trenerem personalnym na siłowni.
  24. Udało mi się wyjść z niedowagi.
  25. Pomimo intensywnej rehabilitacji nie udało mi się poprawić stanu kontuzji kostki. Przeszłam operację stawu skokowego.
  26. Trenowałam jazdę na rowerze z zawodowym kolarzem górskim, który startuje w EWS (top 20 riderów enduro na świecie).
  27. Pokonałam ponad 1100 km i 19600 m przewyższenia podczas treningów rowerowych w Lesie Wolskim. Sumarycznie pewnie zebrałoby się jakieś 1500km na rowerze w ciągu tego roku. Zaliczyłam kilka upadków, na szczęście udało mi się wyjść z kontuzji.
  28. Uczestniczyłam w jubileuszowym X Balu Szkockim, organizowanym przez zespół tańca szkockiego i irlandzkiego Comhlan do którego należę.
  29. Byłam na „rajdzie kiltowym” ze swoim zespołem tańca irlandzkiego i szkockiego w Gorcach.
  30. Spełnione marzenie: podróż do Irlandii. Spędziłam święta Bożego Narodzenia w Dublinie.

A oto najpopularniejsze posty w tym roku:

 

CSS Grid kontra Flexbox

Przewodnik początkującego freelancera – Upwork

Pytania techniczne na rozmowie na stanowisko Junior Frontend Developer

Jestem bardzo wdzięczna za ten wspaniały rok. Był od dla mnie zdecydowanie najtrudniejszym rokiem, ale również najwspanialszym, bogatym w nowe doświadczenia, umiejętności i wspaniałe znajomości.  Moim motto jest „działanie, odwaga i spontaniczność”. Dziękuję bardzo wszystkim, którzy byli ze mną i wspierali mnie w 2018 roku.

podsumowanie 2018

Życzę wszystkim pomyślności i sukcesów w 2019! Oby był pełen niesamowitych wrażeń, wyzwań i siły do spełniania marzeń!

 

 

 

Devstyle Speakers relacja

devstyle speakers
devstyle speakers
fot. Nikola Król

24 – 25.11 odbyła się w Warszawie 2. edycja warsztatów Devstyle Speakers organizowana przez Maćka Aniserowicza, Monikę Malinowską oraz firmę Connectis. Czy warto było jechać?

Bezpieczne miejsce, gdzie można eksperymentować

Rok temu na pierwszej edycji Devstyle Sepakers nie odważyłam się wyjść na środek podczas części praktycznej. Te wymówki… bo przecież nie jestem przygotowana wystarczająco dobrze, bo nie znam się dobrze na temacie, nie jestem wystarczająco doświadczona.

Podczas tej edycji się przełamałam i wygłosiłam krótką prezentację o CSS Grid. Mogę śmiało powiedzieć, że Devstyle Speakers jest bezpieczną przestrzenią, gdzie można eksperymentować. Łączył nas wspólny cel, przezwyciężenie strachu, nauka przemawiania przed publicznością i przekonanie się, że bycie prelegentem może być wartościowym i fajnym doświadczeniem.

Kilka wniosków z części teoretycznej

  • Przed samą prezentacją wykonuj relaksacyjne ćwiczenia (masowanie mięśni żuchwy, składanie ust w dzióbek, głębokie oddychanie)
  • Jeśli my będziemy zrelaksowani, publiczność dużo lepiej odbierze nasz przekaz
  • Ludzie lubią emocje, nie jest ważna tylko treść, ale również przekaz
  • Będąc na scenie jesteś autorytetem i gwiazdą
  • Temat prezentacji = pasja + wiedza
  • Jedna myśl przewodnia, którą da się streścić w jednym zdaniu
  • Jak coś źle pójdzie to nie przepraszaj za to publiczności
  • Tą samą prezentację można wygłaszać kilka razy w innych miejscach, skoro włożyliśmy w to sporo pracy to niech jak najwięcej osób z tego skorzysta
  • Behemoth — ćwiczenie na głośne mówienie i więcej pewności siebie (tip od Maćka Aniserowicza — mów tak głośno, że nawet jeśli w pokoju będzie leciała muzyka Behemotha, ma być Cię słychać)

Dostać feedback od 30 osób

Podczas drugiej części warsztatów każdy z uczestników wygłaszał swoją krótką prezentację. W tym samym czasie słuchacze notowali swoje uwagi do wystąpienia. Mogliśmy w ten sposób pomóc innym w doskonaleniu sztuki przemówień publicznych.

Nawet nie wyobrażasz sobie jak cenne są spersonalizowane uwagi od osób, które chwilę wcześniej przeszły szkolenie z wystąpień publicznych.

30 osób, które poświęciło Ci 100% uwagi podczas Twojego wystąpienia i oddało Ci kartkę z cennymi wskazówkami.

30 osób, a każda z nich odbierająca rzeczywistość trochę odmiennie i zwraca uwagę na inne rzeczy.  

Moje 7 minut

Postanowiłam zawalczyć z syndromem oszusta, w i końcu wygłosiłam prezentację techniczną. Podniosłam sobie jeszcze poprzeczkę i postanowiłam powiedzieć ją w języku angielskim. „CSS Grid is more than a table” – właśnie taki tytuł nosiła prezentacja. Podczas wystąpienia krótko omówiłam podstawowe pojęcia, pokazałam korzyści z  korzystania z CSS Grida. Chciałam również pokazać jaki progres dokonał się przez ostatnie lata w świecie Frotnendu poprzez porównanie CSS Grida do tworzenia stron z użyciem tabel w HTML-u.

CSS Grid slajd z prezentacji

 Kilka uwag od publiczności do mojej prezentacji

Co według słuchaczy poszło dobrze?

  • „Umiesz wzbudzić ciekawość w słuchaczach”
  • „Fajny temat i rozpoczęcie z nawiązaniem interakcji”
  • „Bardzo dobry i zrozumiały angielski”
  • „Estetyczne i czytelne slajdy”
  • „Aż dziwne, że tak dużo przekazane w tak krótkim czasie” (prezentacja trwała 4.5 minuty, limitem było 7 minut)

Co według słuchaczy mogę poprawić?

  • „Za dużo patrzysz na ekran zamiast na publiczność”
  • „Słychać było lekko zdenerwowanie w głosie”
  • „Używaj wskaźnika jak chcesz coś pokazać”
  • „Dość częste użycie „and” jako spójnika”
olga prezentacja
fot. Nikola Król

Co mnie zaskoczyło?

Przed swoją prezentacją miałam wrażenie, że to, co będę mówić to przecież podstawy, przecież to tylko kilka podstawowych pojęć i nic ponadto. Jednak okazało się, że kilka osób nawet nie słyszało o CSS Gird.

„Przydatny temat, nie znałem tego i dowiedziałem się czegoś nowego”

Co uważam za swój największy sukces?

„Zaciekawiło mnie, mimo że nigdy nie pisałem Frontu”

Tego się nie spodziewałam, w 4.5 minuty udało mi się wzbudzić ciekawość, w kimś, kto nie pisze w technologii, z której ja korzystam. Bardzo rzadko dostajemy taki feedback, często nie mamy pojęcia jakie wrażenie zrobiło to, co powiedzieliśmy i często zakładamy te najgorsze scenariusze. Okazuje się, że to co mamy do powiedzenia może na prawdę zaciekawić kogoś i zachęcić do spróbowania czegoś nowego.

Na koniec

Zdecydowanie było warto uczestniczyć w tym wydarzeniu. Mogliśmy się dzielić naszym doświadczeniem, atmosfera była mega pozytywna, a feedback, który dostaliśmy jest nieocenioną pomocą w dalszym rozwoju. Cieszę się, że miałam szansę uczestniczyć w warsztatach Devstyle Speakers.

Bardzo miło było również zobaczyć aż tyle kobiet z różnych gałęzi IT w roli prelegentek. Dziewczyny naprawdę świetnie sobie poradziły. Mam nadzieję, że dzięki tej inicjatywie więcej kobiet będzie brało udział w meetupach i konferencjach w roli prelegentek.

Do zobaczenia na scenie!