Teamaton

Firma Teamaton tworzy aplikację pod nazwą Discoverize. Pozwala ona użytkownikowi stworzyć portal dowolnego rodzaju i dziedziny.

Firma Teamaton zaprosiła mnie do współpracy tuż po tym, jak wróciłem z misji w Nowej Zelandii. Obdarzyli mnie dużym kredytem zaufania, ponieważ nie posiadałem żadnego informatycznego dyplomu. Moje portfolio zawierało przede wszystkim skrypty i aplikacje, które stworzyłem na swój własny użytek.

Nie zawiodłem ich zaufania. Przez ostatnie trzy lata stworzyłem złożone rozwiązania i funkcjonalności takie jak panel statystyk lub nowoczesne narzędzie do przesyłania zdjęć.

Panel wraz z statystykami portalu
Pop-up umożliwiający dodanie zdjęcia użytkownikowi portalu

SASS, elastyczność i skalowalność

Kiedy otrzymałem więcej odpowiedzialności za bazę stylów, zacząłem wprowadzać nowoczesne funkcjonalności jezyka CSS. Dzięki użyciu Flexboxa i Animacji CSS interfejs użytkownika aplikacji stał się bardziej responsywny i lżejszy.

Z oprogramowania Discoverize korzysta więcej niż 60 portali. Ponieważ współdzielą wiele zależności - te muszą być tworzone w przemyślany sposób. W tym celu wykorzystałem możliwości preprocesora SASS i stworzyłem bibliotekę stylów, która dostosowuje się na podstawie wprowadzonych parametrów. To rozwiązanie nie tylko zmniełszyło rozmiar skompilowanego CSSa o dziesiątki kilobajtów, ale uprościło proces debugowania styli w narzędziach developerskich.

Jak zmieniły się rozmiary istotnych zależności w portalu

Jeżeli chcieliby Państwo zobaczyć kilka z najbardziej wymagających projektów i przekonać się o zróżnicowaniu portali opartych o Discoverize, zachęcam do odwiedzenia poniższych portali:

Wszystko, nad czym pracowałem miało być wykorzystywane przez setki właścicieli portali oraz właścicieli wpisów na tych portalach. Mnożąc liczbę ludzi razy liczbę rodzajów treści powinniśmy otrzymać ogólne pojęcie o tym, jak uniwersalne musiały być to rozwiązania.

Zgodność z dziedzictwem

Jak zapewne Państwo wiecie, wspólnota web developerów świętowała niedawno odejście do cyfrowej wieczności starej i wysłużonej przeglądarki: Internet Explorera. Jednak, kiedy współpracowałem z Teamaton, liczba użytkowników IE11 wciąż była na tyle wysoka, że wymagała ode mnie pisania kodu dostępnego dla tej wiekowej przeglądarki. Te wymagania napewno rozwinęły we mnie cierpliwość, kreatywność i dociekliwość, ale dobrze, że można już z tym skończyć.

Google Search Console Mobile Reports

W trakcie swojej pracy zajmowałem się również wszelkimi problemami zgłaszanymi przez serwis Google Search Console, które dotyczyły użyteczności mobilnej. To zadanie nauczyło mnie wielu kwesti, o których nie dowiedziałbym się w tradycyjny sposób. Starałem się reagować najszybciej jak się da, żeby uchronić klientów przed utratą punków SEO, a użytkowników przed jakimikolwiek mobilnymi niedogodnościami.

Projektowanie logotypów i motywów graficznych

Gdy klient zgłaszał się do nas bez gotowego projektu, moim pierwszym zadaniem było zazwyczaj przygotowanie projektu prostego logotypu i motywu graficznego portalu. Przykładowy proces wyglądał następująco:

  • Research branży - budowa skojarzeń
  • Dobór palety kolorów
  • Wybór fontów (max. 2)
  • Szkic logotypu, który po konsultacjach z klientem zamieniałem na projekt w krzywych (Adobe Illustrator, Affinity Designer, a jeszcze wcześniej Inkscape)
  • Zrealizowanie projektu w nowo utworzonym motywie graficznym
Szkice do nowego logo
Szkice do nowego logo
Propozycje przesłane do klienta
Projekt strony głównej portalu Corona Helden

Mini CASE STUDY: mini search

W miarę upływu czasu dokładałem starań, aby wygląd portali nie odbiegał zbyt daleko od współczesnych standardów. Jednocześnie nie wszyscy właściciele portali chcieli aktualizacji wyglądu. Doprowadziło to do sytuacji, w której tzw. mini search był dostępny w 5 różnych wzorach. Back end renderował ten element w tej samej strukturze HTML i tym samym zestawem klas CSS. Było to ograniczenie, którego mówiąc kolokwialnie developerzy nie byli w stanie przeskoczyć. Dlatego ciężar wszelkiego rodzaju modyfikacji spoczął na stylach.

Moja praca najczęściej zaczyna się poza laptopem, nad szybkim szkicami i mapami na papierze

Wymagania

  • uprościć bazę stylów
  • ułatwić testowanie front endu (ponad 60 działających portali)
  • niczego nie zepsuć
  • zapewnić łatwy dostęp do modyfikacji
  • stworzyć przejrzystą strukturę komponentów, czytelną dla innych developerów

W rezultacie chciałem otrzymać czystszy kod zarówno w plikach SCSS, jak i w skompilowanym bundle'u. Dotychczasową bolączką modyfikacji poszczególnych stylów była praktyka nadpisywania domyślnych właściwości za pomocą nowych deklaracji. Łatwość w użyciu SASSowych mixinów sprzyjała tej praktyce, jednak jej efektem był kompletny chaos w debuggerze styli dostępnym w narzędziach przeglądarki.

Rozwiązanie

Po analizie zastanej sytuacji, zdecydowałem że pierwszym krokiem będzie refaktoryzacja struktury HTMLu. Zależało mi na tym, aby blok wyszukiwania wyglądał znośnie nawet wtedy, gdy nie załadują się style. Chciałem, żeby Flexbox i CSS Grid były tzw. progressive enhancement, a nie rdzeniem układu. Niektóre elementy tych technologii nie były wówczas wspierane przez Internet Explorera 11, którego używała znaczna część naszych użytkowników.

Po uporządkowaniu HTMLa okazało się, że potrzebuję dużo mniej styli, aby nadać wyszukiwarce oczekiwane kształty. Wykorzystując wspomniane technologie, zadbałem o to, aby poszczególne części były względem siebie wyrównane, a całość dopasowywała się do różnych rozmiarów ekranów.

Podsumowując:
  • wykorzystałem naturalne właściwości komponentów HTML
  • zamieniłem nadpisywanie na parametryzację możliwą w plikach bazowych każdego z motywów
  • nadając spójne i zrozumiałe nazwy zmiennych, ułatwiłem modyfikację w kolejnych miesiącach
  • uniknąłem walki o specyficzność selektorów - nie do uniknięcia przy nadpisywaniu
  • spójność wygenerowanych styli oszczędziła nam sporo czasu na testowaniu w przyszłości

Sketchnoting

Last, but not least. Moją wielką pasją jest nauka nowych rzeczy. Najbardziej lubię uczyć się, próbując opowiedzieć o tych nowych treściach innnym. Stąd też inne moje projekty, jak blog, czy podcast. Do tego celu czasami wykorzystuję sketchnoting, nadając graficzny wymiar tekstowym treściom. Poniżej znajduje się przykład jednej z takich notatek, które sporządziłem przy okazji wewnętrznego szkolenia poświęconemu budowaniu zaangażowanego i odpowiedzialnego zespołu.