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

1. Rýchlejšie načítavanie vďaka fetchpriority

V článku Boost Resource Loading With fetchpriority detailne popísali nový HTML atribút, ktorým vieš upraviť prioritu načítavania obsahu stránky ako napr. obrázky, javascript, iframe. Atribút zatiaľ podporujú len Chrome a Edge, avšak postupne sa budú pridávať aj ostatné prehliadače. Aktuálnu podporu atribútu si môžeš overiť na webe caniuse.com. Pomocou atribútu fetchpriority vieš vylepšiť metriku LCP alebo zrýchliť vykreslenie dôležitejšieho obsahu stránky.

2. Modálne okná pomocou<dialog> elementu

HTML element <dialog> prednedávnom získal podporu vo všetkých moderných prehliadačoch. S týmto elementom môžeš vytvoriť modálne okná, ktoré budú štýlovateľné a hlavne natívne prístupné. Nemusíš tak riešiť napr. focus alebo zatváranie pomocou ESC klávesy. Všetky dôležité informácie nájdeš v článku Building a dialog component alebo si môžeš pozrieť video.

3. Čo je nové v ECMAScript 2022

Špecifikácia pre novú verziu JavaScriptu je už dostupná aj keď oficiálne ešte nie je schválená. Ak ťa zaujímajú novinky, ktoré táto verzia prináša, tak si prečítaj článok What's new in ECMAScript 2022. Tešiť sa môžeš napr. na:

• top level await,
• privátne atribúty a metódy v class-och,
• metóda .at(),
• error.cause,
• atď.

4. Séria článkov #30DaysOfPWA

Ak sa chceš dozvedieť viac o progresívnych webových aplikáciách (PWA), tak si určite pozri "30 Days of PWA" Blog Series. Séria článkov je štruktúrovaná do 4 hlavných kategórií:

• Základné koncepty PWA.
• Pokročilejšie možnosti PWA a príklady použitia.
• Developerské nástroje pre debugovanie, testovanie atď.
• Osvedčené postupy a podpora PWA pre jednotlivé platformy.

5. Novinky v Google Chrome

Zmeny a tiež novinky, ktoré prišli s novou verziou Google Chromu si môžeš prečítať v týchto článkoch:

• Deprecations and removals in Chrome 101 - Zrejme najdôležitejšia zmena je redukovanie informácií v User-Agent string-u.
• What's New In DevTools - Najviac ma zaujal import a export nahraných krokov používateľa ako JSON súbor. Môže mať dobré využite pri reportovaní bugov.

Nezmeškaj svoju príležitosť. Do nášho Frontend tímu hľadáme nového parťáka!

‍

6. Ako aktualizovať TypeScript v React 18

Nie všetky zmeny v novej major verzii React 18 sú spätne kompatibilné. Ak aj teba čaká updatovanie projektu na React 18, ktorý používa TypeScript, tak si najskôr prečítaj návod: Upgrading to React 18 with TypeScript. Nájdeš v ňom informácie, ktoré ti ušetria veľa času pri fixovaní projektu.

7. Kniha Software Engineering at Google

Táto kniha nie je priamo o programovaní, ale o inžinierskych prístupoch, ktoré používajú v Googli. Dozvieš sa, ako udržiavať aj veľké projekty a pritom zachovať ich kvalitu. Kniha je pre teba vhodná, ak ťa zaujíma, ako majú napr. v Googli zaužívané procesy alebo ako spolupracujú ľudia na projektoch. Kniha je dostupná v PDF úplne zadarmo.

The "Software Engineering at Google" book is now free to read online: https://t.co/cqX79uZNFK. Great insights on improving code quality & scaling engineering teams. pic.twitter.com/JPbNfEewfk

— Addy Osmani (@addyosmani) May 1, 2022

Niekoľko článkov o prístupnosti

• The "inert" attribute is finally coming to the web - Nový atribút inert, ktorý umožní zablokovať určitú časť stránky. Napríklad pri otvorení modálneho okna chceme uzamknúť obsah stránky, aby nebolo možné klikať alebo focusovať ostatné elementy.
• Keyboard button clicks with Space and Enter behave differently - Na niektoré elementy, ako napríklad na tlačidlá na stránke, možno kliknúť medzerníkom alebo Enterom. Avšak v čom sa tieto kliknutia líšia?
• Web Accessibility Checklist - Naštudovať si kompletnú WCAG špecifikáciu je dosť vyčerpávajúce. Preto je vhodné začať najskôr s checklistom, kde nájdeš zhrnuté ako robiť web prístupným.

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

• 14 Linting Rules To Help You Write Asynchronous Code in JavaScript - Prečítaj si, aké ESLint pravidlá je potrebné zapnúť, aby ti kontrolovali chyby pri písaní asynchrónneho kódu. Okrem toho sa dozvieš o chybách, ktoré často robíme a prečo sú nebezpečné.
• New to the web platform in April - Prehľad funkcií, ktoré sa dostali do stabilných a beta verzií webových prehliadačov počas apríla 2022.
• Understanding Layout Algorithms - Ak chceš byť dobrý v CSSku, potrebuješ vedieť, ako CSS funguje. V tomto článku ti Joshua Comeau vysvetlí ako fungujú layout algoritmy.
• The Front-End Developer's Guide to the Terminal - Ako frontend developer musíš vedieť pracovať aj s terminálom. V tomto článku nájdeš návod, ako ho používať.

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