
Webinár: Efektívne E2E testovanie – Od CI/CD pipeline po elimináciu nestabilných testov

2. Sep 2022
FrontendPravidelné zhrnutie najdôležitejších noviniek, článkov či tweetov vo svete frontendu je tu! Za mesiac august sme pripravili top 6 noviniek, ktoré by nemali ujsť žiadnemu frontend developerovi. Okrem toho tu nájdeš odkazy na ďalšie zaujímavé články, ktoré stoja za prečítanie.
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:
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. */
}
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;
}
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.
Ak používaš na vývoj Google Chrome, tak si určite pozri tieto tipy pre prácu v DevTools:
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.
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.
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:
Môžeš si pozrieť aj porovnanie Deno a Bun.js vo videu: Bun and Deno: New Runtimes for the Third Age of JavaScript.
Š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.
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.
Astro je all-in-one webový framework, ktorý v auguste vyšiel s verziou 1.0. Niečo málo o tomto frameworku:
Viac o tomto frameworku nájdeš na ich novom webe.
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.