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

1. Bun - nový JavaScript runtime

Bun.js je nový JavaScript runtime podobne ako Node.js alebo Deno. Je to kompletný nástroj s ktorým môžeš pracovať na JavaScript & TypeScript projektoch bez toho, aby si musel inštalovať bundler, transpiler, TypeScript…

• Bun.js implementuje Web API napr. fetch, WebSocket, ReadableStream atď.,
• ~90% Node-API funkcií napr. fs, path, Buffer atď.,
• npm package, môžeš inštalovať tak ako si zvyknutý,
• natívna podpora pre TypeScript & JSX,
• Bun automaticky loaduje premenné prostredia z .env filov. Na require("dotenv").config() môžeš zabudnúť, že existuje,
• A veľa ďalších užitočných funkcií…

A to najlepšie na záver. Bun.js je oveľa rýchlejší ako Node alebo Deno. Podľa slov autora je Bun.js 3x rýchlejší v porovnaní s Node alebo Deno a package vieš inštalovať 20x rýchlejšie ako yarn. Bun má za cieľ nahradiť Node a Deno a tiež nástroje ako napr. Webpack. Bun beží na JavaScriptCore engine od WebKit-u na rozdiel od Node.js alebo Deno, ktoré sú postavené na V8 engine a je napísaný v jazyku Zig.

2. Defenzívne CSS

Pri vytváraní layoutu stránky musíme myslieť aj na edge casy. Layout stránky vieme pokaziť napríklad dlhým textom s ktorým sme nepočítali. Preto vznikla príručka od Ahmad Shadeed, ktorá ti pomôže písať defenzívne CSS. Vďaka tomu budeš písať CSS-ko, ktoré bude bez bugov a pripravené do budúcna aj na nečakané situácie. V príručke zatiaľ nájdeš 24 tipov, avšak postupne bude obsah pribúdať.

3. Storybook Community Showcase #2

Storybook získava neustále na popularite. Preto vznikol aj tento článok, kde nájdeš prehľad noviniek, ktoré vznikli v jeho komunite napr:

• Novinky v nedávno vydanej verzii Storybooku 6.5.
• Encyklopédia komponentov.
• Figma plugin.
• Story Explorer pre VSCode.
• Nové doplnky do Storybooku.
• Množstvo učebných zdrojov.
• atď…

4. Prehľad prístupov riadenia statu v Reacte

V Reacte nie je striktne určené ako manažovať globálny state. Preto vzniklo množstvo prístupov a knižníc, ktoré riešia tento problém. Pre nás developerov je potom náročné vybrať si správne riešenie a často si zvolíme to aktuálne najviac populárne. V článku The new wave of React state management sa hlbšie dozvieš o problémoch, ktoré riešia knižnice ako napr. Redux, Recoil, Jotai atď… Každá z týchto knižníc ma svoje výhody, ale aj nevýhody. Po prečítaní tohto článku budeš lepšie chápať, ktorá knižnica sa najlepšie hodí do tvojej aplikácie.

5. Radix UI v1

Radix UI je Reactová UI knižnica s nenaštýlovanými komponentami. Vďaka tomu si vieš veľmi jednoducho napísať vlastné štýly, bez toho aby si musel prebíjať defaultné CSS-ko. Radix UI za teba vyrieši všetku špinavú prácu s logikou (napr. otváranie/zatváranie modalov) a čo je úplne super, tak všetky komponenty sú prístupné. Focus manažment, ovládanie pomocou klávesnice alebo podporu čítačiek obrazovky (teda veci na ktoré žiaľ nikdy nie je čas), môžeš nechať na starosti tejto knižnice.

• Radix UI zatiaľ ponúka 26 komponentov.
• Podporu pre SSR v React 18.
• Jednotlivé komponenty si vieš inštalovať samostatne, vďaka čomu šetríš veľkosť bundlu.
• Podpora pre CSS-in-JS (napr. styled-components, emotion, stitches…) spolu s animačnými knižnicami.
• atď…

Osobne som si Radix UI vyskúšal aj na projekte a musím uznať, že sa mi s ním výborne pracovalo. Verím, že táto knižnica má veľký potenciál.

Témou prístupnosti sme sa zaoberali v príspevku na blogu, určite si ho nenechajte ujsť, táto téma je dôležitá pre budovanie zodpovedného a zmysluplného digitálneho sveta.

6. Vite 3

Vite je build tool, ktorý výrazne zlepšuje developerské prostredie pre frontend vývojárov. Vite môžeš použiť na setup vývojového prostredia pre frameworky ako je napr. Vue alebo React, ale aj pre natívny JavaScript.

Vite rieši problémy ako napr:

• Pomalý štart dev servera vďaka esbuild a natívnym ES modulom.
• Pomalé updaty a následný reload webu po úprave súboru.
• Natívna podpora pre transpilovanie TypeScript a JSX súborov.
• A veľa ďalších užitočných funkcií ako napr. importovanie statických súborov, JSON-ov atď. Viac si môžeš prečítať v dokumentácií.

Všetky novinky, ktoré prišli v novej verzii si môžeš prečítať na oficiálnom blogu.

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

• Technical Writing for Developers - Developeri okrem kódenia musia vedieť zdokumentovať novú funkcionalitu, písať komentáre alebo komunikovať v rámci tímu… V článku nájdeš niekoľko tipov ako sa posunúť v technickom písaní na nový level.
• How to Use Next.js Middleware - Čo sú Next.js middleware funckie a ako ich použiť aj s užitočnými príkladmi.
• Avoiding <img> layout shifts: aspect-ratio vs width & height attributes - Konečne tu máme dve jednoduché techniky ako sa vyhnúť layout shift-u.

Niekoľko článkov o prístupnosti

• <article> vs. <section>: How To Choose The Right One - V článku sa dozvieš kedy máš použiť <article> alebo <section> a tiež ako zgrupovanie obsahu ovplyvňuje prístupnosť.
• Introduction to keyboard accessibility - Pozri si prednášku kde sa od základov venujú prístupnosti pomocou klávesnice a ako ju testovať na webe.
• With :focus-visible, you can have focus styles when it makes sense - Veľa developerov resetuje štýly na :focus, pretože vytvára rámik aj na kliknutie myšou. Toto správanie vieš fixnúť pomocou :focus-visible, ktorý nastaví focus stav len keď to má zmysel.

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 júnovom Frontend Briefly.