Frontend Briefly - Novinky a postrehy zo sveta frontend vývoja #2
Web
2
 min read
February 9, 2022

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

Andrej Nemeček
Andrej Nemeček
Frontend Developer
LinkedIn Logo

Pravidelné zhrnutie najdôležitejších noviniek, článkov či tweetov vo svete frontendu je tu! Za mesiac január sme pripravili 12 noviniek, ktoré by nemali ujsť žiadnemu frontend developerovi.

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.

Online nástroj na generovanie prechodov do CSS-ka

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);
Graf na ktorom vidieť ako veľkosť fontu rastie postupne podľa šírky obrazovky pomocou funkcie clamp

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.

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.