To my, web developerzy, popsuliśmy Internet. Podsumowanie konferencji YGLF 2019

Wbrew stereotypom dotyczącym introwertycznego charakteru programistów, wyróżniającą cechą naszej grupy zawodowej jest niebotyczna liczba konferencji, hackatonów, meetupów i innych mniej lub bardziej towarzyskich spotkań poświęconych kodowaniu — od małych wydarzeń „po pracy”, najczęściej skupiających się na jednej technologii lub zagadnieniu, po kilkudniowe konferencje naładowane różnorodnymi tematami.

Po co się spotykać i wymieniać doświadczeniami? Co właściwie dają nam takie wydarzenia? Skąd przychodzimy, kim jesteśmy, dokąd zmierzamy? Postanowiliśmy poszukać odpowiedzi na te pytania podczas dwudniowej konferencji You Gotta Love Frontend 2019, na którą pojechaliśmy w maju do Wilna.

Marcin Gościcki. Front-end Developer w SYZYGY Warsaw. Dba o jakość elementów prezentowanych na platformach i aplikacjach naszych głównych klientów. Programowaniem interesuje się od najmłodszych lat, więc wybór ścieżki zawodowej był wyłącznie formalnością. Ukończył Warszawską Wyższą Szkołę Informatyki z tytułem Inżyniera, jest też absolwentem Uniwersytetu SWPS na kierunku UX Design. Pierwsze doświadczenia zawodowe zdobywał jako web application developer w trakcie praktyk studenckich w Stuttgarcie.

Ada Banaszak. Junior Front-end Developer w SYZYGY Warsaw. Zaangażowana w projekty realizowane dla Polskiego Związku Piłki Nożnej. Studiowała kulturoznawstwo na Uniwersytecie Warszawskim, a jej praca magisterska dotyczyła m.in. kultury hakerskiej, ruchu wolnego oprogramowania i cypherpunka. Zanim postanowiła zawodowo zająć się kodowaniem, była odpowiedzialna za promocję w Fundacji Bęc Zmiana. Web development widzi jako rozwijanie nowego sposobu komunikacji, dlatego wśród jej zainteresowań znajduje się nie tylko HTML, CSS i JavaScript, ale również projektowanie.

Dokąd zmierzamy?

Najbardziej interesującym i obiecującym (a w efekcie często najbardziej rozczarowującym) elementem programów konferencji są zwykle wystąpienia poświęcone przyszłości raczkujących technologii oraz nowym, niespodziewanym zastosowaniom już istniejących narzędzi. Tak było również w przypadku YGLF: dwa najbardziej oczekiwane przez nas wykłady dotyczyły praktycznego wykorzystania machine learning (pisanego w JavaScripcie) na frontendzie i testowania CSS-a (Don’t Believe The Rumours – Testing CS is Possible!).

Pierwszy z nich — wystąpienie Charlie Gerard — postawił poprzeczkę bardzo wysoko: przewinęło się w nim dużo świetnych use-case’ów (np. generowanie alternatywnych tekstów dla obrazków czy uczenie asystentów języka migowego) i ciekawych dem (m.in. aplikacja ułatwiająca recykling oraz… program umożliwiający sterowanie graczami Mortal Kombat za pomocą ruchów ciała). Charlie opowiadała również o javascriptowych bibliotekach Tensorflow.js i ML5 i, choć sama poznawała algorytmy machine learning w Pythonie, przekonywała, że znajomość tego języka nie jest niezbędna do pisania tego rodzaju programów: frontendowcy swobodnie mogą pisać aplikacje wykorzystujące ML w JavaScripcie.

W trochę mniej hurra-optymistycznym tonie przypomniała ona jednak o problemach związanych z rozwijaniem tej technologii, m.in. konieczności pozyskania bardzo dużych ilości danych treningowych, słabym doświadczeniu mobilnym ze względu na wagę programów, niemożności wzięcia pełnej odpowiedzialności za wynik pracy, jako że nie zawsze jesteśmy w 100% w stanie kontrolować, jak działają modele treningowe (black box) i oczywiście o błędach „ludzkich”, wynikających z uprzedzeń i / lub braku refleksji natury etycznej.

Niestety, wykład Gila Tayara o testowaniu CSSa nie był nawet w połowie tak ciekawy — okazał się opisem technologii do śledzenia wizualnej regresji, z których już korzystamy: Cypressa z pluginem ImageSnapshot oraz enigmatycznych „płatnych programów do testowania” (u nas jest to Ghost Inspector, pozwalający na łatwe zarządzanie screenshotami i tworzenie rozbudowanych scenariuszy).

Kim jesteśmy?

Dużą wartością konferencji są wykłady i dyskusje dotyczące spraw niezwiązanych ściśle z codziennymi wyzwaniami w pracy web-deva, ale dotykające tematów najważniejszych: po co, dla kogo i w jaki sposób to robimy? Umiejętność mówienia o wyzwaniach natury etycznej czy tożsamościowej bez popadania w banał czy niezbyt interesujące dygresje jest bezcenna.

Na YGLF mieliśmy okazję wysłuchać dwóch świetnych przemówień poświęconych tej tematyce. Keynote Chen Hui Jing otwierający całą konferencję poświęcony był typografii dla globalnej sieci (całe wystąpienie możecie obejrzeć na Youtube). Oprócz gigantycznej ilości stricte technicznej wiedzy dotyczącej typografii, Hui Jing zaprezentowała powalające statystyki, według których językiem 54% zawartości sieci jest angielski, podczas gdy dla jedynie 5% populacji świata jest on językiem ojczystym. Jak podkreślała, bez odpowiednich technologii i wsparcia — również naszego, jako deweloperów — języki w alfabetach niełacińskich będą coraz bardziej wypierane z sieci. Dlatego, dla zachowania tej i tak już słabej różnorodności, tworząc strony i aplikacje w różnych językach, powinniśmy bardziej starać się o dobre praktyki typograficzne.

Aby zadbać o naszych użytkowników, niezależnie od języka, jakim się posługują, nie zapominajmy o atrybucie lang — bez niego nie zadziała m.in. automatyczne łamanie tekstu — a także zaprzyjaźnijmy się z takimi CSS-owymi właściwościami jak font-language-override czy text-combine-upright.

Choć zdecydowana większość prelegentów w swoich prezentacjach mówiła o dostępności, tylko jedna miała ją w tytule: Selfish Accessibility Adriana Roselli. Wykład poświęcony był różnym rodzajom fizycznych i kognitywnych, a także permanentnych i tymczasowych niepełnosprawności. Aby przekonać klientów do odrzucania rozwiązań stojących w konflikcie z zasadami a11y („bo wśród naszych odbiorców nie ma osób niepełnosprawnych” — kto z nas tego nie słyszał?), Roselli proponuje koncepcję, którą nazywa „Selfish Persona”. Czy z aplikacji będą korzystać biznesmeni, którzy często podróżują i muszą korzystać ze słabego połączenia internetowego w pociągach i na lotniskach? Ludzie pod wpływem alkoholu robiący nieprzemyślane zakupy online? Osoby opiekujące się małymi dziećmi (to przypadek jednej z naszych aplikacji, której użytkownikami są w większości świeżo upieczeni rodzice, korzystający z urządzeń mobilnych, często jednocześnie drugą ręką trzymający niemowlę / sprzątający / prowadzący wózek)? Seniorzy, którzy większość życia spędzili bez komputera? Jeżeli choć na jedno z tych pytań klient odpowiedział tak — to znaczy, że wśród potencjalnych odbiorców znajdują się osoby nie w pełni sprawnie poruszające się po sieci.

Oferty pracy z

Choć Kyle’owi Simpsonowi zdecydowanie należy się tytuł Króla Dygresji za wykład FOUC, and The Death of Progressive Enhancement, w którym przekonywał, że to my — web developerzy — popsuliśmy internet, autor świetnej serii książek You Don’t Know JavaScript poruszył kilka tematów, o których sami często dyskutujemy i z którym mierzymy się w naszej pracy. Mówił m.in. pogłębiającej się przepaści pomiędzy JavaScript developerami i UI developerami, o której ciekawie pisał również Chris Coyer na łamach CSS Tricks. Ponadto stwierdził on, że absolutnie każda strona i aplikacja webowa powinna posiadać Service Worker i być robiona w myśl offline first. Takie myślenie o tworzeniu sieci powinno, zdaniem Simpsona, raz na zawsze wyprzeć Progressive Enhancement.

Skąd przychodzimy?

Wiadomo, że rozmowy o przyszłości i górnolotnych celach zawsze najbardziej pobudzają wyobraźnię, ale zastosowanie w codziennej pracy dużo częściej znajdują rozwiązania z wykładów poświęconych dobrym praktykom czy nauce na cudzych błędach (a.k.a. case studies).

Ciekawy wykład o wyzwaniach związanych z Server-Side Rendering wygłosił Dan Shappir, Performance Tech Lead w Wix, firmie, której wdrożenie SSR zajęło trzy lata. Wśród problemów, z którymi borykamy się również my, wymienił błędy wynikające z odwołań do obiektu `window` – najefektywniejszym rozwiązaniem okazała się odpowiednia konfiguracja lintera – i znaczącą różnicę pomiędzy Time To Visible & Time To Interactive – jeżeli jest ona większa niż 30%, użytkownicy rozpoczynają coś, co Shappir określił jako „rage clicking” (chyba znacie to uczucie). Tutaj rozwiązaniem jest priorytetowe ładowanie treści z pierwszego ekranu – praktyka, którą wdrażamy w naszych aplikacjach, aby uniknąć klików nienawiści.

Nie zabrakło również wykładów dotyczących performance (również w kontekście accessibility): Doug Sillars zaproponował małą powtórkę z różnych technik optymalizowania assetów, a Max Firtmanpod hasłem Hacking Performance opowiadał o efektywnych, choć niezbyt efektownych technikach dostarczania plików do przeglądarki. Oba wykłady były ciekawym uzupełnieniem prezentacji naszego kolegi Andrzeja Kłapecia, który w ramach wewnętrznego IT Speak-Up opowiadał o wyzwaniach związanych z optymalizacją Reactowej aplikacji stworzonej dla jednego z klientów. Wśród wymienionych przez Andrzeja oraz prelegentów YGLF rozwiązań znalazły się m.in. użycie `font-display: swap` dla bardziej efektywnego ładowania fontów, zastosowanie `<link rel=”preload”>` dla ładowania krytycznych (above the fold) assetów, lazy-loading obrazków oraz dynamiczne ładowanie komponentów w zależności o viewportu.

Wykład Vitaly’ego Friedmana, redaktora i dyrektora kreatywnego Smashing Magazine, był szybkim przeglądem tego, co słychać w dizajnie i receptą na to, jak, nie tracąc z oczu wygody użytkowników, tworzyć ciekawe, wyróżniające się strony, prezentujące nie tylko treść, ale również charakter biznesu, który reklamują (a przy okazji są fajną robotą dla projektanta i dewelopera). Friedman mówił również o tym, jakie wymierne korzyści przynosi odważne i szczere podejście do projektowania, m.in. na przykładzie strony najgorszego hostelu w Amsterdamie.

Co poza tym

Oprócz pracy, projektów i takich tam, ważna jest zajawka. Wspaniale było posłuchać Armagana Amcalara opowiadającego o Web MIDI API, prezentującego instrumenty muzyczne działające w przeglądarce i miksującego piosenkę Call Me Maybe (chyba nie musimy wspominać, że prześladowała nas ona przez kolejne dwa dni), oraz Nielsa Leenheera, który, wykorzystując Web Bluetooth API i mikrokontroler, dokonywał kaskaderskich wyczynów zbudowanym z LEGO samochodem – zapisane jako rzecz do wykonania we współpracy z własnym lub zaprzyjaźnionym dzieckiem.

Na pewno przyda się doświadczenie z jednego z naszych wewnętrznych hackathonów, w ramach którego stworzyliśmy aplikację wykorzystującę mikrokontroler z WIFI, który – na podstawie natężenia oświetlenia, wykorzystując fotorezystor – przesyłał status zajętości biurowej toalety.

Podsumowanie

Nawet pozornie niezbyt ciekawe prezentacje mają wartość — dzięki nim możemy zrozumieć, w jakim punkcie jesteśmy i ile udało nam się już osiągnąć. Dzięki konferencjom i podobnym inicjatywom możemy umieścić swoją pracę i przemyślenie na jej temat w szerszym kontekście, a także otworzyć głowę i spojrzeć na swoją pracę z nowej perspektywy. Warto rozmawiać z innymi deweloperami, projektantami i użytkownikami tworzonych przez nas produktów, bo to jeden z najłatwiejszych (i najprzyjemniejszych) sposobów na (nie tylko) zawodowy rozwój.

Dwa wątki, które przewijały się przez niemal wszystkie wykłady na konferencji You Gotta Love Fronted to accessibility i performance (Service Workers!) — dlatego powinniśmy zastanowić się nad tworzeniem produktów, z których może korzystać każdy.

Zdjęcie główne artykułu pochodzi z lithuania.yglfconf.com.