---
title: 14. září ’22 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# { 𝐅 } <br> Letem swwwětem<br>

note:

---

### 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](https://www.youtube.com/watch?v=Wno1IhEBTxc)
- [HTML hell](https://www.htmhell.dev/) – 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](https://codepen.io/plfstr/full/zYqQeRw)

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](https://codepen.io/matuzo/pen/YzaoRLJ?editors=1100)

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](https://www.smashingmagazine.com/design-systems-book/)
- [Design System in 90 Days](https://superfriendly.com/design-systems/books/design-system-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](https://www.designsystemchecklist.com/)
- [verze téhož ve Figmě](https://www.figma.com/community/file/875222888436956377)
- [Enterprise Design System: Everything You Need to Know](https://adamfard.com/blog/enterprise-design-system)

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](https://zeroheight.com/blog/naming-conventions-for-your-design-system/)
- [How to measure your design system?](https://zeroheight.com/blog/how-to-measure-your-design-system/)
- [Workshop: how to define and measure the success of your design system?](https://uxdesign.cc/workshop-how-to-measure-your-design-system-success-b9c3b988edc2)
- [Our Design System Journeys](https://medium.com/fox-tech/our-design-system-journeys-a533c206f5ca)

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](https://twitter.com/frontendisti)