---
title: 12. října ’22 | {𝐅}rontendisti
tags: frontendisti
---
{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}
# {𝐅} <br> Hospodský sraz Praha <br> 12. února '20
<small>příště: 11. 3. tady v Café Lajka</small>
note:
- letošní formát: hospoda střídá minikonferenci
- Brno/Praha
- hospoda se nenahrává
---
# {𝐅} <br> Hospodský sraz Praha <br> 12. října '22
<small>příště: 9. 11., Ataccama</small>
note:
- nowwwinky
- Jirka Cerhan: Jak zapojit juniorní vývojáře do projektu
- přestávka
- Dan Srb: Cesta k frontendu
---
## Letem swwwětem<br>
---
### Prohlížeče
note:
---
#### Microsoft Edge 106
_vydán 3. října 2022_
note:
- Nic převratného.
- Vylepšování interface.
---
#### Firefox 105
_vydán 20. září 2022_
note:
- Opravy.
---
#### Chrome 106
_vydán 27. září 2022_
note:
- okrajové vlastnosti (`hyphen-character`)
- vylešpení JS engine
---
#### Safari 16
_vydáno 13. září 2022_
- subgrid
- container queries
- [a další](https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes)
note:
- velmi rychle roste zastoupení: v 17 zemích verze 15 spadla všude pod 90 % a mnohde i pod 80 %
- verze 16 mohde ještě jednotky, ale taky už atakuje 20 %
- připravuj se 1. záplatovací verze
---
## Zachyceno v síti
---
[State of CSS 2022](https://stateofcss.com/cs-cz/)
note:
- právě běží
- za CZ děkujeme [Kateřině Dlouhé ](https://twitter.com/katadlouha)
- CSS is awesome (boxy dole s předchozími ročníky)
---
Should HTML get new controls like `<accordion>`, `<tooltip>`, `<carousel>`, `<tabs>`, or `<typeahead>` or leave that to JS frameworks?
Controls in HTML 52,3 %
Controls in JS frameworks 12 %
Can I have both? 21,1 %
Show me the results 14,7 %
zdroj: [internet](https://twitter.com/stubbornella/status/1578512416052166656)
note:
- zeptat se naživo
- ale s možností stylovat, jinak zůstane u JS
---

zdroj: [internet](https://twitter.com/DanielYuschick/status/1529828199668109315)
note:
- Ad přístupnost, to nejsou jen ti „slepci“, to může být přinejmenším dočasně každý z nás
---

zdroj: [internet](https://twitter.com/b0rk/status/1570060516839641092/photo/1)
note:
- návod jak se vypořádávat s laděním a opravmi
- jak pro zkušené borky a borce tak pro začínající
---
- [Learn HTML](https://web.dev/learn/html/)
- [seriál o moderním CSS](https://www.matuzo.at/blog/2022/100daysof-day1/)
- [JS tutorial for beginners](https://javascript.info/)
- [JavaScript visualised](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)
- [Learn the logic of
great typography](https://learnui.design/tools/typography-tutorial.html)
note:
- CSS: každý den jedna vlastnost (skupina vlastností) => na 5 min, pokud se chcete seznámit s aktuálním stavem CSS
- JS tutorial: velmi přehledně strukturovaný přehled základů JS
- JS visualised: vhled do JS v animovaných GIFech
- Typo: zábavný a interaktivní návod jak vylepšit sazbu vašeho webu
- stále zapomínáme, že typografická pravidla se ladí stovky let
- omezení daná ranými verzemi CSS už dnes neplatí (a i před tím to chtělo jen trochu práce navíc)
---
### CodePen
---
[Proměnné vlastnosti (a `@layers`)](https://codepen.io/Kout/pen/poVxmGv?editors=1100)
note:
- chytře vytěžené proměnné vlastnosti vč. výchozí hodnoty, varianty tlačítka se pak vyváří prsotým zadáním barvy
- uspořádání inspirováno článkem [Cascade Layers: use case for presenters](https://css-irl.info/a-handy-use-for-cascade-layers/)
---
[Demo of `:has()` capabilities](https://codepen.io/matuzo/pen/YzaoRLJ?editors=1100)
note:
- minule komická vložka
- demo: nic, co bychom měli používat, ale je to povedená hříčka, spíš si všímejte dílčích fíglů
---
[textury na pozadí pomocí gradientů](
https://codepen.io/Kout/pen/LYmRJaK?editors=1100)
---
[panoramatická galerie bez JS](https://codepen.io/jh3y/pen/QWQVOZV?editors=1100)
note:
- mazané využití flexu a proměnných vlastností
---
[Modern alternatives to BEM](https://daverupert.com/2022/08/modern-alternatives-to-bem/)
note:
- námět na vaše přednášky na příští srazy ;)
- Vítáme nové spíkry! Máš-li zajímavé téma nebo případovku, nenechávej si ji pro sebe. Využijte hospodský sraz jako tréninkový prostor pro novou přednášku či prezentaci.
- na [Frontendisti.cz](https://docs.google.com/forms/d/e/1FAIpQLSe4mba2CAA8eFSaCJtypDkAQzmVmuhSNAP7VwuOIqLj8xEySA/viewform) ji přihlásíte prostřednictvím formuláře
---
Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti)