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

1. Ako vytvoriť krásne prechody

Ako spraviť pekné prechody bez "mŕtvych sivých zón" ? V tomto článku nájdeš návod ako využiť teóriu farieb na vytvorenie bohatých prechodov. Joshua Comeau dokonca vytvoril nástroj na generovanie prechodov, ktoré môžeš použiť vo svojom CSS-ku.

2. Remix vs. Next.js

Remix je full stack web framework, ktorý hovorí o sebe, že je lepší ako Next.js. Ak chceš zistiť viac, tak si môžeš prečítať podrobný článok o porovnaní Remix a Next.js. Po prečítaní možno nájdeš motiváciu si Remix vyskúšať alebo si o ňom viac naštudovať.

3. Lodash v5.0

Pred ES6 bol lodash nenahraditeľný pomocník, ktorý uľahčoval prácu napríklad s objektami alebo poliami. Dnes už vieme veľkú časť funkcionality spraviť jednoducho aj v natívnom JavaScript-e. Avšak stále sa nájdu prípady, kedy nám vie uľahčiť prácu, a preto ho stále používa veľa developerov. Uvidíme aké novinky nám prinesie nová verzia, ktorú môžeme očakávať koncom jari.

4. The State of JavaScript Survey

Aj tento rok sa zbierajú dáta od tisíce JavaScript developerov. Pomôž aj ty identifikovať súčasné, ale aj nadchádzajúce trendy v JS ekosystéme a zapoj sa do prieskumu The State of JavaScript.

5. Fluid Typography

Nastaviť veľkosť fontu v responzívnom dizajne bolo doteraz pomerne ťažkopádne. Zvyčajne sa používajú špecifické breakpointy pre rôzne široké obrazovky pri ktorých sa fixne nastaví veľkosť fontu. Avšak využitím fluid typography vieme vypočítať veľkosť fontu podľa veľkosti obrazovky. Tento koncept už je známy dlhšie, avšak doteraz sme museli používať rôzne workaroundy. S novou CSS funkciou clamp už vieme fluid typography implementovať jednoducho. V článku nájdeš podrobne vysvetlený celý koncept aj s ukážkami kódu.

font-size: clamp(2.25rem, 2vw + 1.5rem, 3.25rem);
 

6. Prečo vývojári neberú prístupnosť vážne?

Prečítaj si niekoľko myšlienok, ktoré ťa dúfam motivujú sa viac venovať prístupnosti (ak si sa tomu doteraz nevenoval). Preto sa snažím písať vo svojich článkoch aj o tejto téme, pretože to považujem za dôležité. Web by mal byť prístupný pre každého.

7. Ako vytvoriť prístupnú štruktúru nadpisov

Článok detailne popisuje ako pracovať s nadpismi na webe. Nájdeš tu niekoľko tipov a osvedčených postupov nie len pre lepšiu prístupnosť, ale aj pre SEO.

8. Ako detekovať memory leaky

Ďalšia často prehliadaná téma, ktorá si zaslúži väčšiu pozornosť. V článku nájdeš dôvody, prečo je dôležité detekovať memory leaky, ale aj návod ako na to. V tomto článku bol predstavený aj nástroj fuite na detekciu memory leakov v SPA aplikáciách.

9. Novinky v DevTools

Aké novinky prišli do DevTools pre rôzne prehliadače si môžeš prečítať v tomto článku. Mne sa veľmi páči Recorder, ktorý prišiel do Chromu. Vďaka nemu si vieš nahrať celú interakciu na webe a následne ju aj prehrať a popritom merať výkon. Táto novinka môže mať zaujímavé využitie.

10. 2021 JavaScript Rising Stars

Každoročný prehľad JavaScript projektov priniesol výsledky za rok 2021. Na grafoch porovnávajú počet hviezdičiek pridaných na GitHub-e za posledných 12 mesiacov. Okrem toho tu nájdeš aj zhrnutie výsledkov a dozvieš sa o nových projektoch, ktoré získavajú na popularite.

11. CSS novinky pre rok 2022

Aké novinky môžeme očakávať v roku 2022 v CSS-ku pre všetky dostupné prehliadače, nájdeš stručne popísané v tomto tweete. Ak chceš vedieť detaily, tak si rozklikni celé toto vlákno

12. CSS Cascade Layers

Určite si sa stretol pri písaní CSS-ka, že sa ti prepísali štýly napríklad po pridaní štýlov z tretích strán. Cascade Layers ti pomôžu kontrolovať špecifickosť a poradie CSS pravidiel. Už sa nemusíš obávať, že ti CSS pravidlá z inej vrstvy rozbijú dizajn na webe. Avšak na podporu v prehliadačoch si ešte chvíľu musíme počkať. Viac o vrstvách si môžeš prečítať v článku, kde nájdeš všetky detaily.

Zhrnutie

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