WarsawJS Meetup #59 z perspektywy Sidnet

Live coding, magiczne sztuczki z użyciem IDE, powtórka z najlepszych praktyk w tworzeniu czystego kodu, wyraźna granica między autoryzacją a uwierzytelnianiem. Przeczytaj subiektywne podsumowanie środowego WarsawJS Meetup.

„Intro to Authentication and Authorization with JWT and PassportJS”

Zgodnie z tematem, prelekcja była dobrym wprowadzeniem do autoryzacji i uwierzytelniania. Wyjaśniała różnice między tymi pojęciami – często mylonymi, szczególnie przez początkujących.

Artur Klajnerok pokazał i omówił przykład „Basic Auth” w aplikacji front-endowej typu SPA, gdzie backendem była aplikacja we frameworku Express w node.js. Do uwierzytelniania z dostępem dla wszystkich zalogowanych użył biblioteki PassportJS.

Prezentacja zakończyła się dość prostym przykładem użycia JSON Web Token (JWT). Ponieważ z autoryzacją i uwierzytelnianiem mam do czynienia od lat, nie miałbym nic przeciwko temu, gdyby dopiero w tym momencie prezentacja się rozpoczęła 😉

„The Importance of Clean Code”

Tetiana Platonova przypomniała, czym charakteryzuje się nieskazitelny kod – koncept zaczerpnięty z książki „Czysty kod. Podręcznik dobrego programisty”.

Za Wujkiem Bobem (Robertem C. Martinem), Tetiana zdążyła omówić:

  • Nazewnictwo zmiennych i metod
    Kluczowa wytyczna: Zmienne nazywaj opisowo, metody – z użyciem czasowników, a klasy – rzeczowników.
  • Strukturyzowanie kodu
    Kluczowa wytyczna: Dbaj o dobrą organizację kodu – unikaj wielu poziomów wcięć (więcej niż dwóch) i nie powtarzaj się (Don’t Repeat Yourself), tworząc osobne metody dla wspólnych fragmentów kodu.
  • Komentowanie
    Kluczowa wytyczna: Unikaj komentarzy opisujących, co robi kod. Powinien być na tyle czytelny, żeby nie trzeba było go tłumaczyć.

Temat jest obszerny – nie dziwię się, że Tetiana zdążyła jedynie go zarysować.

Prelekcja, która może otwierać oczy nowicjuszom, dla mnie i innych doświadczonych developerów była szybką powtórką z treści książki. Warto raz na jakiś czas odświeżyć sobie zalecenia Wujka Boba, sięgając do książki lub jego prelekcji dostępnych online.

„Use your IDE like the pros”

Jeden z nielicznych przykładów live codingu, który po prostu nie mógł się nie udać 😉

Poza powszechnie znanymi trickami, Wojciech Przechodzeń podzielił się pomysłem na niekonwencjonalne wykorzystanie funkcji wielu kursorów. Muszę przyznać, że zaskoczył mnie, używając ich do wyciągnięcia wszystkich adresów e-mail z dużego pliku JSON. Wiedziałem, że w moim IDE jest takie narzędzie, ale nigdy nie wpadłem na to, żeby użyć go w taki sposób.

Brawo za tę prezentację!


Pojęcia, które często błędnie utożsamiamy, klasyk programowania i zaawansowane użycie IDE. Tematyka ostatniego meetupu połączyła entuzjastów JavaScriptu, niezależnie od poziomu umiejętności.

Przyjazna rejestracja na wydarzenie. Na przykładzie Onkobiegu

Co roku przed wrześniowym Onkobiegiem aktualizujemy serwis wydarzenia. Tym razem wyzwaniem było przeprojektowanie zapisów na bieg, by cały proces stał się przyjaźniejszy – także dla użytkowników z niepełnosprawnościami. A to wszystko przy ograniczonym budżecie organizacji non-profit.

W dzień startu zapisów na 12. Onkobieg dowiedz się, jak niewielkim kosztem poprawić użyteczność i dostępność serwisu rejestracji.

Odświeżona strona główna Onkobiegu: czytelne wezwanie do działania i informacja o kolejnych krokach.

1. Wskaźnik progresu

Jeśli rejestracja na Twoje wydarzenie jest kilkuetapowa, to warto czytelnie przedstawić kolejne etapy. Użytkownik powinien mieć wyobrażenie o tym, ile kroków dzieli go od ukończenia procesu.

Dlatego wprowadziliśmy wskaźnik progresu, by bez ingerowania w mechanizmy zapisów, móc poinformować uczestnika Onkobiegu o postępie rejestracji.

2. Czytelność komunikatów

Podpowiedzi w formularzu powinny być na tyle czytelne, by użytkownik nie musiał domyślać się, co ma zrobić. Z kolei przyciski CTA (Call To Action) powinny konkretnie wskazywać, co stanie się po kliknięciu.

Jak zmieniły się przykładowe komunikaty na stronie Onkobiegu?

  • Wypełnij to pole → Wpisz adres e-mail
  • Wyślij → Zakładam konto
  • Proszę podać poprawny kod pocztowy → Wpisz kod pocztowy w formacie XX-XXX
  • Wydrukuj kartę startową→ Pobierz kartę startową do druku

3. Usprawnienia w formularzu

Łatwiej przejść przez formularz, gdy od razu wiadomo, które pola są wymagane. Nawet jeśli są to wszystkie pola.

Wprowadzanie danych przebiegnie jeszcze sprawniej, jeśli zrezygnujesz ze zbędnych ozdobników formularza i konieczności powtarzania raz wpisanego hasła.

Teraz nie ma wątpliwości, że wszystkie pola są wymagane. Formularz nie jest przesadnie szeroki, pola są na białym tle (wcześniej wydawały się nieaktywne), a etykiety znajdują się bezpośrednio nad polami.

Wystarczy jednorazowe wpisanie hasła, które można podejrzeć przed wysłaniem formularza.

4. Ułatwiona akceptacja zgód

Jeśli zgody zajmują zbyt wiele miejsca, a skrócenie treści nie wchodzi w grę, zawsze możesz sprawić, że optycznie będą wydawały się krótsze. Pozostaw zajawkę zgody, a jej pełną treść ukryj np. pod przyciskiem „Więcej”.

Pamiętaj, by odróżnić zgody opcjonalne od wymaganych. Dużym ułatwieniem dla użytkownika będzie możliwość zaznaczenia wszystkich zgód jednym kliknięciem.

Wystarczyło inaczej ułożyć tekst, by zgody przestały przytłaczać. Bez ingerowania w liczbę i treść zgód, zwiększyliśmy przyjazność tego etapu.

5. Wywołanie pożądanej akcji

Wskazówki wizualne nakierowują użytkowników na konkretne działania. Wyróżniaj kolorem przycisk z jedną pożądaną akcją (np. wpłatą 50 zł na cel charytatywny) spośród wszystkich dostępnych opcji.

Udział w Onkobiegu jest darmowy, ale przy rejestracji można dokonać darowizny. Wyróżniony kolorem przycisk sugeruje, jaka kwota wsparcia będzie odpowiednia.

Teraz łatwiej wybrać także numer startowy i rozmiar koszulki.

6. Dostępność dla osób z niepełnosprawnościami

Czasem niuanse decydują o tym, czy z serwisu skorzystają użytkownicy z niepełnosprawnościami. Barierą nie do przejścia może okazać się blok tekstu lub element graficzny z niskim kontrastem.

Jak zwiększyć czytelność bloków tekstu?

  • zastąp justowanie wyrównaniem do lewej strony
  • zmniejsz szerokość bloków tekstu
  • zwiększ interlinię i odstępy między akapitami
  • zastąp font szeryfowy fontem bezszeryfowym

Poza poprawą czytelności tekstów, na stronie Onkobiegu wdrożyliśmy kontrastową kolorystykę – wersję żółto-czarną.

Alternatywna wersja serwisu o wysokim kontraście kolorystycznym.

Czuć natchnienie i świeży powiew pomysłów. Piękne dzięki za kawał dobrej roboty!”

Szymon Bubiłek
Członek Zarządu Stowarzyszenia Sarcoma

Onkobieg – Razem po zdrowie! to organizowana przez Stowarzyszenie Sarcoma od 2008, najstarsza w Polsce charytatywna impreza biegowa o tematyce onkologicznej. Jej celem jest pozyskanie funduszy na pomoc osobom chorym na choroby nowotworowe i zamanifestowanie poparcia dla ich trudnej walki o zdrowie i życie.
12. edycja Onkobiegu odbędzie się 8 września 2019 w Warszawie.

Weź udział: https://onkobieg.pl/rejestracja-uzytkownika

Poznaj szczegóły budowy serwisu: https://sidnet.pl/realizacje/onkobieg-razem-po-zdrowie

From: Sebastian, Sidnet | To: Redmine + Schronisko w Korabiewicach

W Ogólnopolski Dzień Dogoterapii odwdzięczamy się czworonogom za ich dobroczynny wpływ. Jak co miesiąc wspieramy także wybrany projekt open source. Tym razem inicjatywy godne naśladowania wskazał Sebastian Stasiak. Znany ze swojego zamiłowania do memów, nasz „memedżer” projektów stacjonuje na co dzień w biurze w Rawie Mazowieckiej.

Redmine

Elastyczny system open source do zarządzania projektami. Korzystają z niego między innymi agencje rządowe w USA i Japonii oraz twórcy języka programowania Ruby (użytego zresztą do napisania aplikacji Redmine). Od 9 lat prowadzimy z jego pomocą projekty wewnętrzne i te dla klientów.

Redmine pozwala nam m.in. na:

  • tworzenie hierarchii projektów i zadań,
  • elastyczne nadawanie ról i uprawnień,
  • integrację z repozytoriami kodu,
  • monitorowanie czasu pracy,
  • dodawanie nowych, specyficznych funkcji.

„Redmine sam w sobie ma szeroki zakres funkcji. Jednak jego największym atutem jest możliwość dalszego rozszerzania. W zespole Sidnet stosujemy m.in. dodatkowe pluginy umożliwiające prowadzenie projektów zgodnie z filozofią Agile. Niektóre z tych rozszerzeń zbudowaliśmy sami od podstaw” – mówi Sebastian.

Schronisko w Korabiewicach

Schronisko dla zwierząt różnych gatunków, od 2012 roku należące do Fundacji Viva! Obecnie pod jego opieką znajduje się kilkaset zwierzaków – nie tylko psy i koty, ale także m.in. krowy, kozy czy lisy. Schronisko jest finansowane wyłącznie ze środków Fundacji i darowizn. Jego wolontariusze zajmują się karmieniem i leczeniem zwierząt. Budują dla nich bezpieczne i wygodne boksy, domki, budy oraz wybiegi. Prowadzą adopcje fizyczne i wirtualne.

„Znam to schronisko i wiem, że stale potrzebuje wsparcia. Wyprowadzałem tam psy jako wolontariusz. Jeden z nich szczególnie zapadł mi w pamięć. Ważył z 40 kilogramów i dawał mi popalić w drodze z boksu na wybieg, za to za bramą schroniska łagodniał i bawił się jak szczeniak. Później znalazł nowy dom nad morzem” – wspomina Sebastian.

WarsawJS Meetup #58 z perspektywy Sidnet

Od kilku miesięcy regularnie uczestniczę w spotkaniach WarsawJS – społeczności profesjonalistów i entuzjastów języka JavaScript. Dzisiaj podzielę się subiektywną relacją z wczorajszych prelekcji.

„Bootcampy okiem trenera i developera”

Michał Michalczuk swoją opowieść o bootcampach oparł na statystykach. Szanuję to, że choć sam organizuje bootcampy, potrafi mówić o nich krytycznie.

Michał słusznie wskazuje na to, że: nie każdy jest dobrym materiałem na programistę, nie wszystkie polskie bootcampy są sobie równe oraz że bootcamp nie zastąpi studiów. Zdaniem prelegenta, bootcamp sprawdza się jako szybkie wprowadzenie w temat i początek dalszego rozwoju. Zdecydowanie się z tym zgadzam.

„Building high performance apps with Titanium”

Rene Pot reprezentuje amerykański Appcelerator, który od 10 lat tworzy i rozwija framework Titanium. Opowiedział o jego zaletach, porównując go do podobnych, bardziej popularnych rozwiązań: React Native czy Flutter. Zrobił nawet live demo, na którym zaprezentował, jak łatwo tworzy się aplikacje mobilne z wykorzystaniem tej technologii.

Zaciekawiło mnie, jak komercyjna firma zarabia na produkcie, który jest w 100% open source. Okazuje się, że Titanium jest utrzymywany dzięki dużym firmom. Jednocześnie, zgodnie z ideą otwartości kodu, wszystkie rozwiązania są dostępne na publicznym GitHubie.

Traktuję tę prezentację jako ciekawostkę, ponieważ nie znam ani jednej aplikacji (dużej czy małej), która została napisana w tej technologii. Sam Rene mówi, że na polskim rynku nie znalazł żadnej aplikacji opartej o Titanium.

„Call me irresponsible if I ever crash on null or undefined in JavaScript or TypeScript”

Bardzo treściwa i konkretna prezentacja. Rafał Pocztarski opowiedział o dobrych praktykach, których stosowanie pozwala uniknąć przykrych niespodzianek – błędów i crashów aplikacji.

O czym powinien pamiętać każdy JS developer?

  • Walidacja danych przychodzących z API. Jeśli zakładamy, że z naszego API otrzymamy dane w takim formacie, jaki został ustalony, to narażamy się na błąd. Powinniśmy je sprawdzać i walidować.
  • Spodziewanie się niespodziewanego. Zawsze powinniśmy uwzględniać wyjątkowe przypadki (edge case’y).
  • Eliminowanie błędów już na etapie pisania kodu. Przed błędami typu type error, czy null pointer exception zabezpieczają m.in takie narzędzia jak: TypeScript, TSLint, Flow, TravisCI.

From: Wojtek, Sidnet | To: Gentoo Linux + Marcin Sztrubel (podopieczny Fundacji Avalon)

Słyszysz: programista, myślisz: geek? Cóż… w wielu przypadkach nie jesteś w błędzie. W naszym zespole jednym z największych technologicznych zapaleńców wydaje się być Wojtek Siewierski, zwany Vifonem. Za jego sprawą nasz firmowy Redmine – system do zarządzania projektami, został przemianowany na Nerdmine. Vifon ma przy sobie przybornik na każdy technologiczny wypadek, a z jego specyficznie skonfigurowanego komputera zapewne nie potrafiłby skorzystać nikt poza nim samym.

Jakie projekty open source i non-profit zyskają nasze wsparcie w maju dzięki wyborom Wojtka?

Gentoo Linux

Jedna z najbardziej elastycznych dystrybucji Linuksa. Gratka dla doświadczonych, wymagających użytkowników – takich, którzy lubią grzebać w systemie i dostosowywać każdy jego szczegół. Natura Gentoo (opartego o kod źródłowy zamiast binarnych paczek) pozwala zautomatyzować wiele działań. Dzięki temu Wojtek może zapomnieć o nakładaniu poprawek i zmian do oprogramowania dostarczanego przez system – czynnościach, które wcześniej musiał wykonywać ręcznie.

Centralnym elementem Gentoo jest jego manager paczek zwany Portage, który pozwala w kontrolowany sposób dostosować praktycznie dowolny aspekt instalowanych lub budowanych programów i bibliotek. Przykład?
„Niektóre programy nie pozwalają np. na zmianę skrótów klawiszowych. W Gentoo kod źródłowy buduję na własnym komputerze, więc wystarczy mała zmiana w kodzie, by zmienić skróty klawiszowe jeszcze przed instalacją” – mówi nasz programista.

Marcin Sztrubel

Podopieczny fundacji Avalon, która pomaga mu zbierać środki na walkę z postępującym zanikiem mięśni. Bez specjalistycznej rehabilitacji i sprzętu ortopedycznego Marcin nie ma szans na samodzielne czerpanie radości z życia. To już druga darowizna, którą zgodnie z życzeniem Vifona, przekazujemy na rzecz Marcina.

„Marcin to znajomy mojej mamy, który wymaga regularnej i kosztownej rehabilitacji. Od dłuższego czasu porusza się na wózku, lecz się nie poddaje i dzielnie walczy z chorobą” – zapewnia Wojtek.

Fundacja Avalon, prowadzona przez osobę z niepełnosprawnością, pomaga innym niepełnosprawnym i przewlekle chorym. Od 2006 roku wspiera poprzez rehabilitację, wzmacnianie samodzielności podopiecznych oraz likwidowanie barier między niepełnosprawnymi i przewlekle chorymi a resztą społeczeństwa.

From: Leszek, Sidnet | To: Mozilla + Kawałek Nieba

W zespole Sidnet można wskazać kilka frakcji: zwolenników macOS, Linuksiarzy, Windowsiarzy – gotowych walczyć o honor ulubionego systemu operacyjnego. Ten ostatni obóz reprezentuje m.in. Leszek Kalota, do którego w tym miesiącu należał wybór projektów do wsparcia. Nawet największy zwolennik Windowsa, przyzwyczajony do pracy z komercyjnymi systemami, potrafi docenić atuty oprogramowania open source. Sprawdź, kto dzięki Leszkowi otrzyma nasze finansowe wsparcie w kwietniu.

Mozilla

Twórca internetowej przeglądarki Firefox, z której Leszek korzysta w codziennej pracy. Mozilla kładzie duży nacisk na walkę z dezinformacją w internecie, promocję umiejętności cyfrowych i dbałość o wysoki poziom internetowych dyskusji.
Obecnie Mozilla pracuje nad pierwszą przeglądarką dedykowaną programistom. Firefox Developer Edition w fazie testów to m.in.:

  • CSS Grid umożliwiający wyświetlenie siatki i powiązanych z nią nazw obszarów czy podgląd transformacji,
  • edytor graficzny do regulowania animacji, wyrównań i odstępów,
  • edytor Web Audio pozwalający na pracę z API Web Audio.

„Narzędzia tworzone przez Mozillę mają służyć użytkownikom Internetu, a nie zyskom. Szanuję to i dlatego nieprzerwanie od ponad 10 lat korzystam z ich produktów: przeglądarki Firefox i programu pocztowego Thunderbird” – mówi nasz programista.

Kawałek Nieba

Fundacja Pomocy Dzieciom i Osobom Chorym „Kawałek Nieba” pomaga w leczeniu i wspiera dzieci niedożywione, ubogie, straumatyzowane. Gdy w kraju nie ma szans na wyjście z choroby, wolontariusze odnajdują drogi leczenia w zagranicznych klinikach. Do tej pory fundacja odmieniła życie kilkunastu tysięcy osób, w tym dzieci z guzami mózgu, siatkówczakiem, neuroblastomą, wadami serca.

„W natłoku codziennych spraw łatwo zapomnieć, że dla ciężko chorych wspomnianym kawałkiem nieba są często: leki, operacje, rehabilitacja lub sprzęt medyczny. Mam nadzieję, że dzięki naszemu wsparciu czyjeś niebo będzie bezchmurne chociaż przez jeden dzień” – mówi Leszek.