---
# System prepended metadata

title: "12. října ’22 | {\U0001D405}rontendisti"
tags: [frontendisti]

---

---
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

---

![](https://hackmd.io/_uploads/BJ67bhjxo.png)

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

---

![](https://pbs.twimg.com/media/Fcn5suDXgAAejX4?format=jpg&name=large "Debugging manifesto")

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)