Hospodský sraz 12. 10. 2022

příště: 11. 3. tady v Café Lajka

note:

• letošní formát: hospoda střídá minikonferenci
• Brno/Praha
• hospoda se nenahrává

příště: 9. 11., Ataccama

note:

• nowwwinky
• Jirka Cerhan: Jak zapojit juniorní vývojáře do projektu
• přestávka
• Dan Srb: Cesta k frontendu

Letem swwwětem

Prohlížeče

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

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

note:

• právě běží
• za CZ děkujeme Kateřině Dlouhé
• 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

note:

• zeptat se naživo
• ale s možností stylovat, jinak zůstane u JS

zdroj: internet

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

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

• seriál o moderním CSS

• JS tutorial for beginners

• JavaScript visualised

• Learn the logic of
  great typography

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)

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

Demo of :has() capabilities

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ů

panoramatická galerie bez JS

note:

• mazané využití flexu a proměnných vlastností

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 ji přihlásíte prostřednictvím formuláře

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