FrontKec #9 - HackMD

--- title: "FrontKec #9" tags: frontendisti, frontkec ---  {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}  {%hackmd TKLAeY1xQF2LHJgIuJub0A %} # FrontKec #9 <br> 26. února 2026 --- ## CSS Grid Lanes (masonry v CSS) **Základní syntaxe:** ```css .container { display: grid; display: grid-lanes; /* podporováno-li, přetíží řádek nad */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } ```  --- #### CSS Grid Lanes **Feature detection (fallback):** ```css @supports (display: grid-lanes) { .gallery { display: grid-lanes; } } @supports not (display: grid-lanes) { .gallery { /* fallback – CSS columns nebo klasický grid */ } } ```  note: - finální syntaxe je `display: grid-lanes` – ne `display: masonry`, ne `grid-template-rows: masonry` - **Debata trvala 5 let** (2020–2025). Mozilla první prototypovala v r. 2020, WebKit (Apple) přebral od 2022, Chrome experimentoval s alternativním `display: masonry` - **Rozhodnutí CSSWG** 31. ledna 2025 – shodli se na znovupoužití grid-* properties pro masonry layout - **Spec:** CSS Grid Layout Module Level 3 (publikováno 28. 3. 2025) - **Proč "grid-lanes" a ne "masonry"?** Příliš mnoho JS knihoven už název "masonry" používá – vyhnout se kolizím - jako progressive enhancement, fallback třeba do `grid-auto-flow: row dense;` --- #### CSS Grid Lanes **Podpora v prohlížečích:** - Safari Technology Preview 234+ (finální syntaxe, od 12/2025) - Chrome/Edge 140 (experimentální za flagou, od 07/2025) – Chromium tým aktualizuje implementaci - Firefox – má starší prototyp (`grid-template-*: masonry`), přechod na `grid-lanes` v přípravě (Nightly) - **Realistický produkční timeline:** polovina 2026  note: **Zdroje:** - [Jen Simmons, Elika Etemad, Brandon Stewart: *Introducing CSS Grid Lanes*](https://webkit.org/blog/17660/introducing-css-grid-lanes/) - [*When will CSS Grid Lanes arrive?*](https://webkit.org/blog/17758/when-will-css-grid-lanes-arrive-how-long-until-we-can-use-it/) - [CSS-Tricks: *Masonry Layout is Now grid-lanes*](https://css-tricks.com/masonry-layout-is-now-grid-lanes/) - [Smashing Magazine: *Masonry: Things You Won't Need A Library For Anymore*](https://www.smashingmagazine.com/2025/12/masonry-things-you-wont-need-library-anymore/) - [Nowwwinky – téma probíráno v 05/2025 (CSS Masonry) a 06/2023 (grid masonry)](https://nowwwinky.koutik.cz/) --- #### CSS Grid Lanes **Výhody oproti JS knihovně Masonry.js:** - neblokuje renderingu (Masonry.js = 24 KB, 600 ms na pomalém 4G) - nepřeskládává se při resize – CSS nativně, JS knihovna animuje položky - přístupnější – obsah se řadí přes _lanes_ (jako pruhy v dopravě), ne dolů celým sloupcem => tabulátorem projde viditelný obsah - infinite scroll bez JS – layout funguje čistě v CSS - **Plná síla CSS Gridu:** `grid-template-*` pro definici lanes, spanning přes lanes, subgrid, explicitní umístění  note: - **"Konečně!"** – 5 let debat, ale výsledek je čistý. Zajímavé pozadí: Chrome vs. Safari vs. Firefox – každý měl jinou syntaxi. Jak to, že se nakonec dohodli? - **Masonry.js je mrtvé?** Ne hned – potřeba fallback pro starší prohlížeče. Ale nové projekty mohou progresivně nasazovat `grid-lanes` s JS polyfill jako zálohou - **Performance argument** – 600 ms blokování na pomalém 4G za JS knihovnu vs. nula za nativní CSS. Co to znamená pro LCP? - **Kdo z vás to už vyzkoušel?** Safari TP je ke stažení, Chrome za flagou – lze si hrát teď --- ## Temporal API - `Temporal` je globální namespace (jako `Math` nebo `Intl`), kompletní náhrada za `Date` - **Proč?** `Date` objekt pochází z r. 1995, kopíruje špatně navržený `java.util.Date`. Mutabilní, špatný parsing, zmatené měsíce (0 = leden), žádná podpora časových zón - **TC39 Stage 3** – finalizace na Stage 4 se očekává na TC39 plenárním zasedání v březnu 2026  note: - Java (od které opisovali autoři JS) svůj `Date` zahodila už 2 r. poté… --- #### Temporal API **Podpora:** - Firefox 139 (květen 2025) – **první prohlížeč** s nativní podporou - Chrome 144 (leden 2026) – nativní podpora - Safari – v Technology Preview za flagou (`useTemporal`) - Edge – experimentální v betě - **v praxi nutný polyfill** (~20 KB gzip, stále menší než Moment.js 47 KB)  --- #### Temporal API **Klíčové typy:** | Typ | Popis | |-----|-------| | `Temporal.PlainDate` | Datum bez času a zóny | | `Temporal.PlainTime` | Čas bez data | | `Temporal.PlainDateTime` | Datum + čas, bez zóny | | `Temporal.ZonedDateTime` | Datum + čas + časová zóna | | `Temporal.Instant` | Bod v čase (UTC, nanosekundy) | | `Temporal.Duration` | Rozdíl mezi dvěma body |  --- #### Temporal API ### Příklady kódu: staré vs. nové **1. Vytvoření data – měsíce od nuly vs. od jedničky:** ```js // ❌ Starý Date – měsíc 2 = BŘEZEN (!) new Date(2026, 2, 15) // March 15 // ✅ Temporal – měsíc 3 = BŘEZEN Temporal.PlainDate.from({ year: 2026, month: 3, day: 15 }) ```  --- #### Temporal API **2. Neplatné datum – tichá chyba vs. výjimka:** ```js // ❌ Date – tiše "opraví" na 1. března new Date('2026-02-29') // 2026 není přestupný rok → March 1 // ✅ Temporal – vyhodí RangeError Temporal.PlainDate.from('2026-02-29') // RangeError: invalid date ```  --- #### Temporal API **3. Imutabilita:** ```js // ❌ Moment.js – mutuje originál const date = moment('2026-03-15'); date.add(1, 'day'); // změní původní objekt! // ✅ Temporal – vrací nový objekt const date = Temporal.PlainDate.from('2026-03-15'); const tomorrow = date.add({ days: 1 }); // nový objekt // date je stále March 15 ```  --- #### Temporal API **4. Časové zóny – konverze bez knihovny:** ```js // ❌ Starý způsob (moment-timezone) import moment from 'moment-timezone'; const ny = moment.tz('2026-03-15 14:00', 'America/New_York'); const tokyo = ny.clone().tz('Asia/Tokyo'); // ✅ Temporal – nativní const ny = Temporal.ZonedDateTime.from({ year: 2026, month: 3, day: 15, hour: 14, timeZone: 'America/New_York' }); const tokyo = ny.withTimeZone('Asia/Tokyo'); // "2026-03-16T04:00:00+09:00[Asia/Tokyo]" ```  --- #### Temporal API **5. Lokalizace – rozdíl mezi daty s různými kalendáři:** ```js // Temporal podporuje nejen Gregorian, ale i další kalendáře const date = Temporal.PlainDate.from('2026-03-15'); const islamic = date.withCalendar('islamic'); console.log(islamic.toString()); // "2447-09-15[u-ca=islamic]" // Rozdíl mezi daty s Intl formátováním const start = Temporal.PlainDate.from('2026-01-01'); const end = Temporal.PlainDate.from('2026-09-15'); const diff = start.until(end, { largestUnit: 'month' }); console.log(`${diff.months} měsíců, ${diff.days} dní`); // "8 měsíců, 14 dní" ```  --- #### Temporal API **6. Typický problém s DST (letní čas):** ```js // Temporal automaticky řeší přechod na letní čas const before = Temporal.ZonedDateTime.from({ year: 2026, month: 3, day: 29, hour: 1, minute: 30, timeZone: 'Europe/Prague' }); const after = before.add({ hours: 2 }); // Korektně přeskočí z 2:00 na 3:00 CET → CEST ```  note: - **30 let rozbitých dat v JS.** Rob Palmer (TC39 delegate) řekl, že Temporal je podle mnoha metrik „vůbec největší změna v JavaScriptu." Souhlasíte? - **Můžeme to už používat?** Firefox + Chrome = většina uživatelů. S polyfill (~20 KB) je to menší než Moment.js. Stojí za to začít migrovat? - **Performance:** Benchmarky ukazují, že Date je u jednoduchých operací o ~3% rychlejší, u složitějších cca 2× rychlejší. Ale Temporal se zlepšuje a klarita kódu to vyváží - **Migrace v praxi:** `grep -r "moment\|date-fns\|dayjs\|luxon" src/` – najdi, co nahradit - **V8 implementace používá `temporal_rs`** – Rust knihovnu z Boa JS engine. Zajímavý příklad cross-engine spolupráce --- #### Temporal API ### 3 knihovny, které se stanou obsolete: 1. **Moment.js** (~47 KB gzip) – sami autoři ho označili za legacy 2. **date-fns** (~32 KB při plném importu) – modulární, ale Temporal nabízí totéž nativně 3. **Day.js** (~2 KB) – malý, ale po Temporal zbytečný  note: **Zdroje:** - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal) - [TC39 proposal](https://github.com/tc39/proposal-temporal) - [InfoQ: *Chrome 144 Ships Temporal API*](https://www.infoq.com/news/2026/02/chrome-temporal-date-api/) - [Bryntum: *JavaScript Temporal in 2026*](https://bryntum.com/blog/javascript-temporal-is-it-finally-here/) - [socket.dev: *Temporal API Ships in Chrome 144*](https://socket.dev/blog/temporal-api-ships-in-chrome-144-major-shift-for-javascript-date-handling) - [DEV.to: *7 Date Library Patterns It Replaces*](https://dev.to/jsgurujobs/chrome-144-just-shipped-the-temporal-api-here-are-7-date-library-patterns-it-replaces-with-native-ge7) - [Nowwwinky – téma probíráno v 05/2025 a 06/2025](https://nowwwinky.koutik.cz/) --- ## AI agent skill: [CSS First](https://skills.sh/luko248/css-first-skill/css-first) od Lukáše Chylíka - skill, který poskytuje **CSS-first řešení** pro UI implementační úlohy - Integruje se s **MDN dokumentací** – hledá relevantní CSS vlastnosti, zjišťuje browser support - **Klíčové funkce:** - Analyzuje popis UI úlohy a navrhne relevantní CSS vlastnosti z MDN - Kontrola browser support pro navrhované CSS vlastnosti - Mechanismus "user consent" – ptá se, zda chceš pokračovat s danou CSS vlastností - Příklady kódu, best practices, fallback strategie  note: **O autorovi:** - Lukáš Chylík – frontend vývojář z Brna - AI frontend dev lead & VIGo Design System lead developer u AIS Servis - moderátor i přednášející brněnských srazů spolku Frontendisti - Filosofie: "JavaScript není řešení na všechno" – CSS first přístup - zakladatel discordové skupiny [CSS Czechoslovakia](https://discord.gg/ayKc3xT9) --- #### CSS First **Použití** - prompt: "Potřebuju tooltip, který se zobrazí při hoveru nad tlačítkem"  - výstup: CSS First server navrhne: `anchor positioning` + `popover` + browser support info  note: - Místo aby AI rovnou sáhlo po JS/React knihovně, **nejprve zkusí čisté CSS řešení** - **"CSS first" jako filosofie:** Kolik z nás automaticky sáhne po JS/React komponentě, i když čisté CSS řešení existuje? Dialog, popover, carousel – to vše je dnes nativní CSS - **Praktická ukázka by byla super** – live demo: zeptat se AI na UI úlohu, nechat CSS First navrhnout řešení - **MCP jako trend:** GitHub, Slack, Asana – všichni mají MCP servery. Ale CSS First je krásný příklad **komunitního** MCP serveru z ČR/SR - **Spojitost s ostatními tématy podcastu:** Grid Lanes, Temporal, Interop – CSS a webová platforma se posouvají kupředu. CSS First pomáhá AI držet krok s tím, co je nativně možné - **Lukáš je z Brna** – shoutout pro brněnské Frontendisti! **Zdroje:** - [NPM](https://www.npmjs.com/package/@depthark/css-first) - [GitHub](https://github.com/Luko248/css-first (autor: Luko248)) - [Glama listing](https://glama.ai/mcp/servers/@Luko248/css-first) - [Lukáš Chylík, LinkedIn](https://www.linkedin.com/in/lukas-chylik/ – AI frontend dev lead, VIGo Design System, host Frontendisti Brno) - [Nowwwinky – podcast únor 2026](https://nowwwinky.koutik.cz/) --- ## CSS 2025: shrnutí **1. Customizable Components** - **Customizable `<select>`** – `appearance: base-select`, `::picker(select)`, `<selectedcontent>`. Po dekádách konečně plně stylovatelný! - **Invoker Commands** – `commandfor` + `command` na buttonech → dialog, popover bez JS (Chrome 135+) - **Dialog Light Dismiss** – `closedby="any"` na `<dialog>` (Chrome 134+) - **`popover=hint`** – ephemeral UI (tooltipy) bez zavírání ostatních popoverů - **`::scroll-marker` / `::scroll-button()`** – nativní CSS karusely. Pinterest case study: 90% redukce kódu (2000 řádků JS → 200 řádků CSS) - **`scroll-target-group`** – scroll-spy navigace v čistém CSS - **Anchored Container Queries** – styl podle aktuálního anchor fallbacku - **Interest Invokers** – `interestfor` pro hover/focus popovers. **Pozor: Apple/WebKit je proti!** CSS-Tricks: "likely DOA"  note: **Zdroje:** - [Chrome.dev interactive site](https://chrome.dev/css-wrapped-2025/) - [Blog post](https://developer.chrome.com/blog/css-wrapped-2025) - [Smashing Magazine](https://www.smashingmagazine.com/2025/12/state-logic-native-power-css-wrapped-2025/) - [CSS-Tricks](https://css-tricks.com/css-wrapped-2025/) - [prezentace Zuzany Fatrdla (Šumlanské)](https://docs.google.com/presentation/d/1iR-wzeusP9ZAtvmIwI84qGehPQaHpNLRKCIYe6P7v34/edit) --- #### CSS 2025: shrnutí **2. Next-gen Interactions** - **Scroll-state Queries** – `container-type: scroll-state` + `@container scroll-state(stuck: top)` (Chrome 133+) - **`sibling-index()` / `sibling-count()`** – pozice elementu a počet sourozenců → staggered animace bez JS custom properties - **`scrollIntoView()` container option** – `container: "nearest"` zabrání nežádoucímu scrollu rodičů - **Nested View Transition Groups** – zachování 3D transformací při přechodech - **`moveBefore()` DOM API** – přesun elementu v DOM bez ztráty stavu (iframe, video, CSS animace)  --- #### CSS 2025: shrnutí **3. Optimized Ergonomics** - **CSS `if()` funkce** – první explicitní podmínkový konstrukt v CSS (ternární operátor) - **CSS Custom Functions (`@function`)** – uživatelské funkce s argumenty - **`shape()` funkce** – komplexní tvary s příkazy (line, move, curve) - **Advanced `attr()`** – typované návratové hodnoty (barvy, čísla, délky) - **`text-box`** – odstranění extra whitespace nad/pod textem - **`corner-shape`** – squircles, scooped corners, beveled corners - **`stretch` keyword** – nové klíčové slovo pro sizing - **Rozšířená range syntax** - **`ToggleEvent.source`**  note: ### (b) Diskuzní body - **CSS jako programovací jazyk:** `if()`, `@function`, `sibling-index()`, typovaný `attr()` – CSS má podmínky, funkce, počítání, typovou konverzi. Potřebujeme unit testy pro CSS? - **Pinterest: 2000 → 200 řádků** – masivní argument pro nativní CSS karusely. Kdo z nás pořád tahá Swiper.js? - **`<select>` styling – konečně!** Kolik custom dropdown knihoven to nahradí? - **Apple blokuje Interest Invokers** – nová éra Chrome-only features? Nebo se dohodnou? - **State of CSS 2025:** `:has()` je nejpoužívanější I nejoblíbenější CSS fičura. Trigonometrické funkce nejméně oblíbené - **"Co se naučit první?"** Pokud máte 2 hodiny: customizable `<select>` (univerzální potřeba), scroll-state queries (okamžitý UX benefit), nebo `@function` (architekturní budoucnost)? --- ## Interop 2026 **Co je Interop:** - Roční spolupráce výrobců prohlížečů (Apple, Google, Microsoft, Mozilla + Igalia) na konzistentní implementaci webových standardů - Měří se průchodností WPT (Web Platform Tests) – výsledky na veřejném dashboardu  **Interop 2025 – výsledky:** - Overall score: **25 → 95** (za rok!) - Safari: 43 → 99, Firefox: 46 → 99 - Nově Baseline: CSS Anchor Positioning, same-document View Transitions, CSS `@scope`, Navigation API, URLPattern API  note: – Interop 2026: 20 oblastí (33 návrhů) + 4 oblasti výzkumu --- #### Interop 2026 - **`attr()`** – rozšíření: jakákoli property může číst HTML atributy jakéhokoli typu - **Container Style Queries** – `@container` se `style()` funkcí, styly na základě computed values custom properties - **`contrast-color()`** – CSS funkce pro zaručený kontrast barvy - **Custom Highlights** – stylování libovolných textových rozsahů bez extra DOM elementů - **`shape()`** – komplexní tvary pro `clip-path` (přichází ze Safari 18.4)  note: --- #### Interop 2026 **Layout a positioning:** - **Anchor Positioning** – pokračování z 2025, edge case opravy - **Scroll Snap** – opravy konzistence chování  **View Transitions:** - **Rozšíření o cross-document view transitions** – přechody mezi stránkami bez JS  **Dialog a Popover:** - Sbírka návrhů kolem `<dialog>`, `popover`, pseudo-třídy `:open`  --- #### Interop 2026 **JavaScript/Web API:** - **`fetch()`** – ReadableStream v body, FormData, Range header - **IndexedDB** – `getAllRecords()` pro rychlé čtení velkých datasetů - **JSPI** (JavaScript Promise Integration API) – Wasm + asynchronní JS  **Web Compat (opravy existujících problémů):** - ESM module loading (cyklické moduly, multiple top-level awaits) - Timing scroll events vs. animation events - `user-select` (bez `-webkit-` prefixu) - **WebRTC** – pokračuje z 2025 (91.6% pass rate) - **CSS Zoom** – pokračování z 2025  --- #### Interop 2026 **Investigation areas (příprava pro budoucí roky):** 1. **Accessibility testing** – konzistentní accessibility trees 2. **JPEG XL** – testovatelnost formátu (Mozilla experimentuje s Rust dekodérem!) 3. **Mobile testing** – dynamické viewport changes 4. **WebVTT** – opravy testů a spec pro titulky  note: ### (b) Diskuzní body - **25 → 95 za rok!** Interop 2025 byl masivní úspěch. Pamatujete dobu, kdy každý prohlížeč dělal věci jinak? IE6 flashbacky - **Edge transparentnost:** Microsoft v blogu otevřeně říká, že výběrový proces je pro vývojáře neprůhledný a chtějí to zlepšit - **Mozilla vs. "miliardáři":** Mozilla v blogu vtipně poznamenala, že jejich engine je jediný, který nevlastní miliardáři – a přesto se zavázali k většímu scope než ostatní - **Od jednotlivých fičur se dá odrazit dál:** Container Style Queries → design tokeny v CSS; `attr()` → dynamická HTML; cross-doc View Transitions → SPA-like UX bez SPA - **JPEG XL drama:** Není focus area, ale investigation. Mozilla experimentuje s Rust dekodérem, Chrome s dekodérem od Google Research. Stojí za sledování - **Co chybí?** Grid Lanes není v Interop 2026 (ještě nedostatečně testovatelné). Může být v 2027 **Zdroje:** - [web.dev (Google)](https://web.dev/blog/interop-2026) - [Mozilla Hacks](https://hacks.mozilla.org/2026/02/launching-interop-2026/) - [WebKit (Apple)](https://webkit.org/blog/17818/announcing-interop-2026/) - [Microsoft Edge blog](https://blogs.windows.com/msedgedev/2026/02/12/microsoft-edge-and-interop-2026/) - [Igalia](https://www.igalia.com/news/interop-2026.html) - [CSS-Tricks](https://css-tricks.com/interop-2026/) - [GitHub repo](https://github.com/web-platform-tests/interop) - [Dashboard](https://wpt.fyi/interop-2026?stable) - [Nowwwinky – Interop probíráno v 03/2025](https://nowwwinky.koutik.cz/)