{F}rontendové nowwwinky

FrontKec #9

CSS Grid Lanes (masonry v CSS)

Základní syntaxe:

.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):

@supports (display: grid-lanes) {
  .gallery { display: grid-lanes; }
}
@supports not (display: grid-lanes) {
  .gallery { /* fallback – CSS columns nebo klasický grid */ }
}

note:

CSS Grid Lanes

Podpora v prohlížečích:

note:
Zdroje:

CSS Grid Lanes

Výhody oproti JS knihovně Masonry.js:

note:

Temporal API

note:

Temporal API

Podpora:

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:

// ❌ 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:

// ❌ 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:

// ❌ 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:

// ❌ 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:

// 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):

// 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:

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:

AI agent skill: CSS First od Lukáše Chylíka

note:

O autorovi:

CSS First

Použití

note:

Zdroje:

CSS 2025: shrnutí

1. Customizable Components

note:

Zdroje:

CSS 2025: shrnutí

2. Next-gen Interactions

CSS 2025: shrnutí

3. Optimized Ergonomics

note:

Interop 2026

Co je Interop:

Interop 2025 – výsledky:

note:
– Interop 2026: 20 oblastí (33 návrhů) + 4 oblasti výzkumu

Interop 2026

note:

Interop 2026

Layout a positioning:

View Transitions:

Dialog a Popover:

Interop 2026

JavaScript/Web API:

Web Compat (opravy existujících problémů):

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:

Zdroje: