Frontend Briefly - Novinky a postrehy zo sveta frontend vývoja #9

1. Novinky v prehliadačoch

Tento mesiac priniesol niekoľko super noviniek do prehliadačov. Na čo sa najviac teším sú novinky v CSSku ako napr. container queries alebo nové scale, rotate, a translate properties:

1.1 Nový spôsob zápisu media queries:

Google Chrome 104 pridal podporu pre nový zápis media queries. Novinku zatiaľ podporujú len prehliadače Chrome a Firefox, avšak existuje PostCSS plugin, ktorý prepíše novú syntax do starej formy. Ďalšie novinky v Google Chrome 104 nájdeš v tomto článku.

// Before:
@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

// Now you can use:
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

1.2 Nové properties v CSS-ku:

Doteraz sme transformačné funkcie pre CSS transform property museli písať v jednom. Avšak odteraz už môžeme písať scale, rotate, a translate ako samostatné CSS properties. Táto novinka nám zjednoduší prácu hlavne s animáciami. Nový zápis je od vydania Google Chrome 104 podporovaný vo všetkých prehliadačoch! Viac o novom zápise CSS transform si môžeš prečítať v článku na portáli web.dev.

// Before
.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

// Now you can use individual properties:
.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

1.3 CSS container queries

Hlavne pri tvorbe komponentov občas potrebujeme štýlovať nie na základe celej šírky obrazovky, ale len na základe šírky komponentu. Na to slúži container queries ktoré prišli spoločne s ďalšími novinkami v Google Chrome 105 🎉 .

Ahmad Shadeed v jeho článku o container queries napísal, že je to podobne veľká zmena, ako keď prišli media queries na štýlovanie responzívnych webov. Avšak stále si musíme počkať na lepšiu podporu, keďže container queries zatiaľ podporuje len prehliadač Chrome 105 a Safari 16.

2. Niekoľko tipov pre prácu v DevTools

Ak používaš na vývoj Google Chrome, tak si určite pozri tieto tipy pre prácu v DevTools:

2.1 Prehľad o výkonnosti webu:

Na analýzu výkonnosti webu používame metriky Core Web Vitals. Ak hľadáš spôsob ako efektívne debugovať tieto metriky, tak si pozri panel Performance insights v DevTools prehliadača. V ňom si vieš pozrieť prehľad o výkonnosti webu a odhaliť prípadné problémy. Viac o paneli Performance insights nájdeš v tomto článku.

2.2 Preskúmanie a úprava animácií priamo v DevTools:

V DevTools nájdeš záložku Animácie, kde môžeš spomaliť, znova prehrať, upraviť časovanie animácií a okamžite vidieť výsledky. Na portáli web.dev nájdeš video, kde panel s animáciami rozobrali detailnejšie.

2.3 Skratky v konzole:

• Namiesto document.querySelector() vieš použiť skratku $ rovnako ako v jQuery
• Zobrazenie event listenerov cez getEventListeners()
• Namiesto console.log(object) použi table(object) a dostaneš prehľadnú tabuľku
• Viac skratiek nájdeš v článku na portáli web.dev

3. Deno čakajú veľké zmeny

Deno (alternatíva ku Node.js) je jednoduchý, moderný a bezpečný runtime pre JavaScript, TypeScript a WebAssembly, ktorý beží na V8 a je postavený v Ruste. Podľa toho čo píšu na ich blogu, tak Deno sa čoskoro výrazne posunie vpred:

• Deno bude čoskoro podporovať jednoduchý import npm packagov
• Cieľom Deno je byť najrýchlejší JavaScript runtime (bude zaujímavé sledovať súboj s Bun.js)
• Deno nedávno prekonalo 4,1 milióna stiahnutí na GitHub-e

Môžeš si pozrieť aj porovnanie Deno a Bun.js vo videu: Bun and Deno: New Runtimes for the Third Age of JavaScript.

4. CSS Day 2022

Štýlovanie layoutu v CSSku sa za posledné roky výrazne posunulo. Okrem flexbox a grid tu máme aj aspect-ratio, min, max a clamp funkcie, logical properties atď… Okrem toho čakajú na lepšiu podporu aj subgrid, container queries, :has() pseudo-class a niekoľko ďalších… Preto už v CSSku ani nie je problém, či sa to dá naštýlovať, ale ktorý spôsob si vybrať. Na konferencii CSS Day 2022 bola prednáška Creative CSS Layout práve na túto tému. Ak si chceš pozrieť záznam z iných prednášok, tak ich nájdeš na YouTube.

5. Podpora WebAssembly v Edge

Vďaka podpore WebAssembly v Edge od Vercel-u si môžeš svoj kód napísaný napr. v jazyku Rust, Go alebo C spustiť na serverless architektúre. Akýkoľvek jazyk, ktorý je možné kompilovať do Wasm, je teraz možné spustiť v Edge Functions od Vercel-u. Viac o Wasm a jeho podpore v Edge si môžeš prečítať na ich blogu.

6. Astro v1.0

Astro je all-in-one webový framework, ktorý v auguste vyšiel s verziou 1.0. Niečo málo o tomto frameworku:

1. Astro bol navrhnutý pre obsahovo bohaté webové stránky
2. Obsah sa renderuje na serveri
3. Výsledný web je veľmi rýchly
4. Ľahký na použite (zatiaľ som nemal možnosť overiť)
5. Podporuje React, Preact, Svelte, Vue, Solid, Lit a veľa ďalších

Viac o tomto frameworku nájdeš na ich novom webe.

Ďalšie články, ktoré stoja za prečítanie

• Why React Re-Renders – Veľa developerov pracuje dennodenne s Reactom bez toho, aby vedeli ako na pozadí funguje. Prečítaj si článok od Josh W. Comeau kde ti vysvetlí ako funguje re-render v Reacte.
• Understanding useMemo and useCallback – V článku sa dozvieš všetko potrebné o useMemo a useCallback hookoch, prečo sú užitočné a ako z nich vyťažiť maximum.
• Improving INP with React 18 and Suspense – Ako pomocou Suspense zlepšiť metriku Interaction to Next Paint a zrýchliť web.
• Rakuten – Rakuten 24 neustále meria, optimalizuje a monitoruje Core Web Vitals a ďalšie metriky, čo malo výrazne pozitívny vplyv na ich biznis.

Niekoľko článkov o prístupnosti

• How Our Organization Improved Web Accessibility (Case Study) – Ako sa podarilo organizácii "Understood" zlepšiť použiteľnosť ich webov.
• Designing Better Error Messages UX – Ako na chybové hlášky, aby boli užitočné a zlepšili použiteľnosť.
• Bag some AAA wins where you can – Ak je to možné, mali by sme sa snažiť implementovať aj WCAG AAA odporúčania.

Zhrnutie

Ak sa ti prehľad noviniek páčil, tak sa nezabudni prihlásiť na odber nášho newslettera. Prečítať si môžeš aj novinky za minulý mesiac, ktoré sme priniesli v júlovom Frontend Briefly.