🎨 uxowy.dev #23

Dziś będzie troszkę mniej designersko i 🎨 UXowo ...ale nie bez powodu. Ustąpiliśmy trochę miejsca bardzo ważnym rzeczom.

W dzisiejszym wydaniu newslettera:

  1. Must have każdego developera: patterns.dev
  2. #PrzemoPatterns: Radio
  3. Kogo warto obserwować 👀
  4. Ebooki od InVision, za free

Ruszamy!


Must have każdego developera: patterns.dev

Development | źródło
Patterns.dev

Pierwsze ustępstwo to development. W końcu tym się zajmujemy, co nie? 😉 Zarzucamy źródełko (chociaż... wcale nie takie małe), które pozwoli Ci mieć mega przydatną wiedzę i robić web-aplikacje na najwyższym poziomie.

Patterns.dev to m.in. zbiór patternów dotyczących projektowania web-aplikacji, który świetnie tłumaczy zagadnienia:

  • Design Patterns, m.in.: Singleton, Proxy, Provider, Prototype, Container, Observer, Middleware, Hooks, Factory Pattern i wiele, wiele więcej...
  • Rendering Patterns, m.in.: client/server-side, static rendering; incremental static generation, progressive hydration, islands architecture etc.
  • Performance Patterns, m.in.:  loading sequence, static/dynamic import, import on interaction, route based splitting, tree shaking, preload, list virtualization, compression etc.
  • Case Studies - przykłady użycia patternów w aplikacjach: Airbnb, Hey.com i ogólnie: Next.js app.

Naszym zdaniem to must-have każdego developera, który tworzy front.

To nie są nudne artykuły z toną tekstu... To samo mięsko urozmaicone filmami, interaktywnymi przykładami kodu, diagramami, tabelami, przykładami itd. Zobacz przykład:

Wizualizacja działania virtual-scrolla. Źródło

W dodatku, patterns.dev wydało ebooka Learning Patterns do pobrania za darmo, a w sekcji Resources linkuje do zewnętrznych artykułów i filmów, wow 🔥

Patterns.dev/resources

Wejdź koniecznie i czytaj regularnie 🚀
www.patterns.dev


#PrzemoPatterns: Radio

UX | źródło

🤔 Co to jest?

Radio-button to z pozoru banalna sprawa, klikamy w jakieś kółeczko, wybieramy opcję i gotowe. Niemniej jednak, jest kilka pułapek, które warto omijać. Bez zbędnych wstępów - przeczytajcie, o czym pamiętać przy okazji użycia tego elementu:

ℹ️ Wskazówki

  • Aby użycie radio-buttona miało sens, powinniśmy mieć listę co najmniej dwóch możliwych opcji
  • Użytkownik może zaznaczyć tylko jeden (!) radio-button
  • Domyślnie zaznaczmy jeden z radio-buttonów, nie zawsze musi to być pierwsza opcja, może to być ta bardziej prawdopodobna, oparta na wcześniejszych badaniach i doświadczeniach
  • Radio z krótkimi etykietami możemy wyrównać w poziomie, zwykle powinniśmy umieszczać je w pionie (jeden pod drugim)
  • Klikalność: zastanówmy się, w co można kliknąć, aby aktywować radio-button (etykieta tekstowa, cały kontener?); dla użytkownika byłoby przyjaźniej, gdyby nie musiał celować idealnie w to niewielkie kółeczko 😉
Przykład radio-buttonów z ciekawą animacją. Źródło

Więcej o radio-buttonach możesz przeczytać tutaj:
uxplanet.org/radio-buttons-ux-design


Kogo warto obserwować?

Twitter Niebezpiecznika

Niebezpiecznik

To drugie odstępstwo od naszych tematów UI/UX-owych. W aktualnym czasie bezpieczeństwo cyfrowe jest jedną z najważniejszych kwestii, więc... przypominamy Ci o tym zarzucając (pewnie dobrze Ci już znaną, ale... najlepszą) stronę, jaką możemy - niebezpiecznik.pl.

Tutaj możesz śledzić najnowsze wieści:
Twitter: @niebezpiecznik
Facebook: niebezpiecznik
LinkedIn: niebezpiecznik


Ebooki od InVision, za free

Resources | źródło
DesignBetter.co

InVision w świecie UX nikomu nie trzeba przedstawiać. To popularne narzędzie do designu i prototypowania.

Mamy dzięki nim kilka interesujących ebooków do pobrania, zupełnie za darmo, m.in.:

Oblukaj: www.designbetter.co


To wszystko na dziś.

...aaa i dziś bez memika ☹️
Za to z live-mapą tego, co się dzieje na Ukrainie i bardzo częstymi aktualizacjami ze zdjęciami/filmami (żeby być na bieżąco i nie trzeba było oglądać telewizji...):
liveuamap.com


Pomóż innym wiedzieć więcej

Znasz kogoś, kto powinien dołączyć do naszej społeczności? Jeśli tak, to wyślij do tej osoby link do skrótu z ostatnich wysyłek: uxowy.dev/lista. I niech dołączy do 🎨 uxowy.dev!