signageOS 09. 04. 2025

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

• Tomáš Litera - Jak předcházet chaotické organizaci npm skriptů

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

1. ří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

• :modal
• Array 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

• atribut closedby pro dialog

note:

• jen CH134
• hodnota any umož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 mutation nahradí 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-visibility místo display (umožní animovat); rozbalí se při vyhledávání na stránce
• view transitions – ve stejném dokumentu, tedy SPA
• @scope čeká na FF
• scrollend nyní 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 hsl a oklch
  • používejme lch() či lab(), případně ještě lépe oklch() či oklab()
  • rozdíl je v l (hsl řeší zobrazení × lch/lab naopak vnímání)
  • navíc nové barevné prostory zahrnují širší škálu barev (p3 vs sRGB)
• 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:

• doplňkové barvy

Čí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:

• KoutPen

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:

• CSS day 2025 (Amsterdam)

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