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