Hospodský sraz 08. 03. 2023

příště: 12. dubna, minikonference (místo upřesníme)

note:

• omlouváme se za zmatky, přechytralý Meetup.com
• letošní formát: hospoda střídá minikonferenci
• Brno/Praha
• Plzeň, poslední týden v březnu
• hospoda se nenahrává
• kuřárna
• hotovost (Dan Srb založí)

Přednášky

• Petr Koláček, Etnetera Core a.s.
  Open Props
• Adam Kudrna
  TwigX: pište PHP šablony jako v Reactu

Letem swwwětem

Prohlížeče

Microsoft Edge 110

vydán 9. února 2023

note:

• 111 tento týden

Firefox 110

vydán 14. února 2023

note:

• container queries a související vlastnosti a jednotky podporovány výchoze
• 111 14. března, nic zásadního

Chrome 111

vydán 1. března 2023

• CSS Root Font Units: rex, rch, ric, rlh
• plná podpora CSS Color Module 4 a jedna funkce z modulu 5
• funkce color()
• funkce color-mix()

note:

• všemožné i nemožné zápisy barev, viz demo od Adama Argyla

• proč to chceme

  • obrazovky se zlepšovaly a vyvíjely, zatímco CSS zůstalo v 90.
  • lepší pro výkon
  • sjednocují vnímání barev
  • zápisy barev založené na míchání RGB jsou nepravidelné
  • 
  • 

• style queries style()

@container style(--theme: light) {

  a {
    background-color: lavender;
  }
}

• :nth-child(an + b of S), kde S je selektor

.intro:nth-child(2n + 3) {…}
:nth-child(2n + 3 of .intro) {…}

note:

• třída .intro, která je 3., 5., 7… potomkem
• 3., 5., 7… potomek pokud má třídu .intro
• style queries zatím
  • pouze proměnné vlastnosti
  • jediný prohlížeč
• a aby toho nebylo málo, 112 přinese zanořování (CSS nesting), byt konsorcium na specifikaci stále pracuje
  • obdoba toho, co známe z preprocesorů, ale nepůjde spojovat názvy tříd, jako se někdy zapisuje BEM
• pískoviště

Safari 16.3

vydáno 28. ledna 2023

• od 16.4
  @media (100px <= width <= 1900px)

note:

• 16.3 opravy
• 16.4 někdy(?)
• zjednodušený zápis media queries pomocí rozsahů jako poslední důležitý prohlížeč, i když s křížkem po funuse, media queries už nejsou tak důležitá (tekutý grid, min(), max() funkce, container queries)

Zachyceno v síti

Vše o nahrazování fontů

note:

• věci, co jste snad ani nechtěli vědět (např. výpočty pro vyrovnání rozdílů mezi písmy)
• spousty nástrojů, které to spočítají za vás (NPM balíčky, NextJS, online)
• nástroje, které vysosají metadata z fontů, kdybyste si to přeci jen chtěli počítat sami

OpenProps

note:

• na minulém srazu představil Petr Koláček z Etnetery
• demo základ
• demo komponenta

4× Adam Argyle

Circular gradient stroke chart
Conic gradient Android spinner
budoucnost CSS

note:

• čtvrtý odkaz na CodePen později

NodeJS v prohlížeči

• WebContainers
• NodeBox

note:

• zatím(!) dva nástroje
• dovedně pospojovaná API (aneb zatím to nespouští linux v prohlížeči)
• využití pro ukázky nebo výuku… anebo, co vás napadne (mě nic)
• není open source, část se zpracovává na serverech služby, kam není vidět

Penpot

note:

• klon Figmy vzniklý v reakci na akvizici Adobe
• funguje i offline, buď v Dockeru nebo Elestio

CodePen

View Transitions - Text Replace Custom Animation

Container queries

note:

• změna velikosti okna nemá vliv
• pouze změna velikosti elementu
• nastavit max-width: 100%

Dnes naposled

note:

• před časem Máchal vzpomínal, jak před dávnými časy kupoval doménu frontendisti.cz
• tahle je sice o rok mladší, ale odpočítává něco, co trvá už 10 let
• a dnes je konec, na zdraví!

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