Poprázdninový sraz 14. 09. 2022

{ 𝐅 }
Letem swwwětem

Prohlížeče

note:

• vhled jak se mění zastoupení verzí prohlížečů v čase

Microsoft Edge 105

vydán 1. září 2022

note:

• Nic převratného.

Firefox 104

vydán 6. září 2022

note:

• Nic zásadního. Z výpisu změn (včetně budoucích verzí) to vypadá, že se soustřední na výkon prohlížeče jako programu.

Chrome 105

vydán 30. srpna 2022

• :has()

note:

• Chrome 107 zahodí HTTP2/push
  • velmi zajímavou přednášku měl Michal Matuška na zahájení sezóny v Brně
  • o hlavičce 103 early hints (experimentální zatím, ale již od verze 94)

Safari 15.6/16

vydáno 20. července/12. září 2022

• pseudotřída :modal (vybírá dialog otevřený metodou showModal())

note:

• co jsem se dozvěděl: :fullscreen prvek otevřený pomocí requestFullscreen()

Internet Explorer

vydán 17. října 2013

Naposledy!

note:

• Opravdu už mele z posledního.
• ještě někdo podporuje (my jsme konečně zahájili vytoužené vykošťování)
• padal exponenciálně z měsíce na měsíc

Zachyceno v síti

• Manuel Matuzović: Lost in translation
• HTML hell – rozrůstající se sbírka zmrzačeného HTML

note:

• květnová přednáška na téma návratu k jádru věci, ke správnému použití HTML, jít po sémantice, ne po designu, ten by měl přijít s sebou
• důraz na přístupnost
• přinejmenším od 26 minuty krásná ukázka nakódování přístupného tlačítka
• ale stojí za zhlédnutí celé
• 33.20 close button aneb zavírátko správně
• HTML není jednoduché, jednoduchá je syntax

HTML Tags Memory Test

note:

• pokud stále trváte na tom, že HTML je jednoduché, je tu jednoduchý kvíz
• 79, ale zapomněl jsem na spoustu základních…

CodePen

Demo of :has() capabilities

note:

• již zmíněný Manuel Matuzović

article:has(p:has(a)) {} /* nefunguje */

article:has(h2):has(a) {} /* to se smí */

note:

• prvek article, v němž je odstavec, ve kterém je odkaz
• prvek article, který obsahuje jak nadpis druhé úrovně, tak odkaz

Dnes: design systémy

Knihy o design systémech

• Design Systems
• Design System in 90 Days

note:

• Design systems je od Smashing magazine, 19 ebook, 44 pevná vazba
• Design system in 90 days obsahuje i FigJams a 2 šablony ve Figmě, ač vydáno pod značkou SuperFriendly, prodává se bratru za 349

Články k dnešnímu tématu

• Design system checklist
• verze téhož ve Figmě
• Enterprise Design System: Everything You Need to Know

note:

• Design systémy pro velké projekty, představuje výhody pro velké firmy a nabízí své tipy.

Články k dnešnímu tématu

• Naming conventions for your design system
• How to measure your design system?
• Workshop: how to define and measure the success of your design system?
• Our Design System Journeys

note:

• Jedním z tipů je i další článek, či spíše návod na tvorbu názvosloví. Víme, že názvosloví patří k dvěma nejtěžším úlohám v IT (vedle zneplatnění cache a chyb o jedničku), takže se nechejte inspirovat a nevymýšlejte kolo.
• měření výkonu/úspěchu:
  • Figma v organisation plan poskytuje analytické nástroje (propojení komponent, nejčastěji využívané, jaké týmy používají co atd.)
  • lze využít GA, Hotjar
  • článek nabízí i dotazní pro členy týmu (jako vždy je důležitá komunikace – ptejte se, zda vůbec kolegové vědí od design systému, jak ho používají, co jim vadí, co jim vyhovuje atd.)
  • školení
  • data lze využít i k plánování (které komponenty si zaslouží více pozornosti a péče)
• Our Design System Journeys je případovka, která popisuje sjednocení roztříštěného designu velké společnosti. Autor v něm přináší odpovědi na počáteční otázky:
  • Nakolik design systém pomůže vývoji mého produktu?
  • Co vlastně obnáší plán, tvorba a dodržování designového systému napříč firmou?
  • Jak zapracujeme nový přístup do stávajících postupů?
  • V čem se vyplatí investice do systému designu?

Díky, prezentace za chvíli na @frontendisti