signageOS
Brno dnes: Clubco
příště: 9. dubna, Meetup.com
note:
- před 5 lety poprvé v Lajce, akorát že vůbec
- z Brna záznamy (pokročilý TypeScript, JS Temporal API)
- představit spolek
Budujeme a vzděláváme komunitu frontendových vývojářů a designérů
- organizační náležitosti
- Vítáme nové spíkry! Máš-li zajímavé téma nebo případovku, nenechávej si ji pro sebe. Call for papers AKA náležitosti na webu Frontendisti.cz
WWW minulém díle jste viděli
Pozwwwwánky
Discord: CSS CzechoSlovakia

note:
- Lukáš Chylík z Brna
WWWebexpo
28.-29. května
FRONTENDISTI25
note:
- slevový kód: 20% slevu z konferenční vstupenky
FronKon ’25
- října, Hotel Passage Brno
note:
- střídáme, tedy Brno
- early birds vyprodáno…
- 2990 Kč
Letem swwwětem
Prohlížeče
Firefox 136
vydán 4. března 2025
Chrome 134
vydán 26. února 2025
Safari 18.3
vydáno 27. ledna 2025
Web platform status
běžně dostupné: 3/2025
:modalArray findLast(),findLastIndex()
note:
- běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF
nově dostupné: 3/2025
contenteditable="plaintext-only"Intl.DurationFormat
note:
- nově dostupné: aktuální verze CH, FF, SF podporují
Intl.DurationFormat: převede objekt trvání (duration) do lokalizovaného řetězce
omezená dostupnost: 3/2025
note:
- jen CH134
- hodnota
anyumožní zavřít dialog kliknutím na backdrop - KoutPen
- související: Co dostane :focus po otevření dialogu
Interop 2025
Interop 2025
-
anchor positioning
-
view transitions
-
backdrop-filter -
details -
@scope -
událost
scrollend -
core web vitals: LCP, INP
-
zastaralou událost
mutationnahradí Mutation observer API
note:
- backdrop-filter – stále často selhává, opravy
details: pseudoelementy k pohodlnějšímu stylování (::marker,::details-content); skrývání pomocícontent-visibilitymístodisplay(umožní animovat); rozbalí se při vyhledávání na stránce- view transitions – ve stejném dokumentu, tedy SPA
@scopečeká na FFscrollendnyní lze jen odhadnout konec scrollování (pomocísetTimeOut- core web vitals: API jednotlivých metrik se dostanou do prohlížečů => ladění; LCP, INP
Zachyceno v síti
Hexcodle
Ahmad Shadeed – Relative colours
barevná fce (from původní složka1 složka2 složka3 / průsvitnost)
hsl(from #000 h s l / 0.1)
note:
- původní barva v libovolném formátu (včetně
currentColor)
Relative colours
button {
background-color: hsl(from #9333ea h s calc(l + 10))
}
note:
- ukázka
- problém: při změně odstínu se může výrazně změnit kontrast (=> a11y)
- rozdíl mezi
hslaoklch - používejme
lch()čilab(), případně ještě lépeoklch()čioklab() - rozdíl je v
l(hslřeší zobrazení ×lch/labnaopak vnímání) - navíc nové barevné prostory zahrnují širší škálu barev (p3 vs sRGB)
- rozdíl mezi
- Evil Martians – OKLCH in CSS: why we moved from RGB and HSL
- OKLCH kapátko
Relative colours
.section {
--sep-primary-color: oklch(from #5631ea l c calc(var(--h-value)));
--secondary-color: oklch(
from var(--sep-primary-color) calc(l + 0.8) calc(c - 0.03) calc(h + 210)
);
&:after {
/* Bottom separator */
background-color: var(--secondary-color);
}
}
note:
ČíJSla
parseInt(" 123 "); // 123
parseInt("077"); // 77
parseInt("1.9"); // 1
parseInt(015); // 13
parseInt('0x14'); // 20
parseInt('7️⃣'); // 7
parseInt('9️⃣'); // 9
parseInt('6️⃣'); // 6
note:
- Stefan Judis
- JS je předchůce Reactu
parseInt()vypíše číslo až do znaku, na kterém se vybourá- ignoruje bílé místo, uvozovací nuly
- někdy vypíše číslo v jné soustavě
- proč rozumí emoji
- KoutPen
ČíJSla
Number('1️⃣'); // NaN
Number('1w'); // NaN
Number('1.5w'); // NaN
Number('a1w'); // NaN
Number('12€') // NaN
Number('1.2'); // 1.2
new Intl.NumberFormat("ru").format("x")
// "не число"
note:
Ondřej Žára – JavaScript: řešené úlohy

Floor 796
note:
- námořníci v.v. stavějí lodě v láhvi, webaři v.v. mohou třeba toto
- vzniká od roku 2018, hotovo 50 %
- megaGIF, proto 769 (pořadí písmen G, I, F v abecedě)
KoutPen
note:
note:
- Adam Argyle
- má to fungovat v CH136+, ale mě to běží ve 134?
sibling-index()pořadí potomka (počítá se od 1)sibling-count()počet potomků
Dnes wwwečer
- Riskuj

Díky, prezentace v komentáři na Meetup.com