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

1. Web Almanac - state of the web report 2022

Web Almanac je detailný report stavu webu podložený údajmi z datasetu 8 360 179 webových stránok, 43,88 TB dát a 108 expertov, ktorí pracovali na analýze dát. Report má 22 kapitol, kde nájdeš prehľadné grafy z aktuálnymi dátami o stave webu, informácie o nastupujúcich trendoch a tiež tipy na zlepšenie aktuálneho stavu.

2. Novinky v Next.js

2.1 Next.js 12.3

Nová verzia Next-u prišla so zaujímavými novinkami:

• ‍Vylepšený Fast Refresh: .env, jsconfig.json a tsconfig.json súbory sa hot reloadujú.
• ‍TypeScript Auto-Install: Po pridaní .ts sa automaticky nakonfiguruje a nainštaluje typescript.‍
• Image Component: next/future/image je odteraz stabilný.‍
• SWC Minifier: Nová minifikácia kódu je oproti pôvodnej verzii s Terser 7-krát rýchlejšia.‍
• Nový Router + Layouts Update: Nové informácie o pripravovaných funkciách v Next.js.

2.2 Next.js Layouts RFC

Detailné RFC ku najväčšiemu updatu Next.js je dostupné už niekoľko mesiacov. Dozvieš sa tu o plánovaných zmenách pre routing, layout alebo data fetching. V článku Next.js Layouts RFC in 5 minutes sa dozvieš o najdôležitejších funkciách, ktoré prídu v novej major verzii Next.js.

2.3 Next.js Conf 2022

25. októbra bude konferencia Next.js Conf 2022. Témy tohtoročnej konferencie sú

• Funkcie využívajúce Server Components, Streaming alebo Suspense
• Konvencie uľahčujúce vývojárom optimalizáciu a škálovanie aplikácií
• Open-source nástroje, ktoré urýchľujú development a buildovanie

3. Novinky vo webovej platforme

V septembri vyšli nové verzie prehliadačov Firefox 105, Chrome 106 a Safari 16, ktoré priniesli viacero zaujímavých noviniek:

• Container queries
• Grid layout
• Encoding API
• Nové Intl API
• atď…

Viac nájdeš v článku na portáli web.dev.

4. React Router 6.4

React Router 6.4 prišiel s niekoľko novými funkciami, ktoré prebral z frameworku Remix:

• Načítanie dát pomocou Route loader
• Mutácia dát pomocou Route action
• Error handling pomocou Route errorElement
• defer a Await pre menej dôležité dáta
• a veľa ďalších funkcií…

5. The Web is Good Now

Evolúcia vo webovom prostredí developerom zjednodušila veľa práce. V prednáške The Web is Good Now sa môžeš pozrieť na vylepšenia pre typografiu, animácie layout alebo manipuláciu s médiami…

6. :focus-visible dostupný vo všetkých moderných prehliadačoch

CSS pseudo class :focus, vytvára pri kliknutí nepekný rámik okolo tlačidiel alebo odkazov. Preto developeri často odstraňujú štýlovanie pre :focus stav. Tým však pokazíme prístupnosť pre ľudí používajúcich klávesnicu na navigovanie po webe. Nová CSS property :focus-visible zobrazí outline len pri navigácii pomocou klávesnice.

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

• Optimize long tasks - Ako optimalizovať long tasks a zabrániť blokovaniu hlavného vlákna prehliadača.
• Critical CSS? Not So Fast! - Critical CSS pattern znie ako správna voľba pre optimalizáciu webu, avšak často nenaplní očakávania developerov.‍
• Default Exports in JavaScript Modules Are Terrible - Niekoľko dôvodov prečo nepoužívať default export.‍
• GIFs Without the .gif: The Most Performant Image and Video Options Right Now - Prečo už nepoužívať .gif obrázky a aké sú najlepšie alternatívy.‍
• The new wave of Javascript web frameworks - Ak si chceš prečítať o nových JavaScript frameworkoch, ale aj niečo o ich evolúcii.‍
• React I Love You, But You're Bringing Me Down - Článok, ktorý vzbudil menší rozruch medzi React developermi a reagoval na neho aj @dan_abramov.

‍

Niekoľko článkov o prístupnosti

• Making Sense Of WAI-ARIA: A Comprehensive Guide - V článku nájdeš kedy a ako správne používať WAI-ARIA.‍
• Learn Accessibility - Nový kurz o prístupnosti na portáli web.dev.‍
• What's new in WCAG 2.2? - WCAG 2.2 je kúsok od vydania. Aké novinky prinesie ?‍
• Better accessible names - Ako písať prístupné a užitočné názvy.‍
• A Designer’s Guide to Documenting Accessibility & User Interactions by Stéphanie Walter - Dobrá dokumentácia pomáha tímom implementovať požiadavky na prístupnosť.‍
• Should I Use a Button or a Link? - Do detailu vysvetlený článok o používaní odkazov a tlačidiel.

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 augustovom Frontend Briefly.