Hydratace

View Transitions API je nativní způsob prohlížeče pro tvorbu animovaných přechodů mezi různými stavy DOM nebo navigacemi stránek, což bylo dříve možné pouze se složitými JavaScriptovými animačními knihovnami. Zachytí snímek aktuálního stavu, aplikuje DOM aktualizaci a poté animuje přechod mezi starým a novým snímkem pomocí CSS. Toto API funguje pro změny stavu v single-page aplikacích i navigace mezi stránkami, čímž umožňuje plynulé přechody s minimem kódu.

Barevný kontrast je měřitelný rozdíl v jasu mezi textem (nebo UI prvky) v popředí a jejich pozadím. Směrnice WCAG vyžadují minimální kontrastní poměr 4,5:1 pro běžný text a 3:1 pro velký text, aby byla zajištěna čitelnost pro uživatele se zrakovým postižením. Nástroje jako Chrome DevTools, Stark a WebAIM contrast checker pomáhají vývojářům ověřovat shodu během vývoje.

Tailwind CSS je utility-first CSS framework, který poskytuje nízkoúrovňové utility třídy jako `flex`, `pt-4`, `text-center` a `bg-blue-500` pro tvorbu designů přímo ve značkování. Místo psaní vlastního CSS skládáte předpřipravené třídy k vytvoření jakéhokoli designu, což díky automatickému odstranění nepoužitých stylů vede k menším výsledným CSS souborům. Konfigurační soubor umožňuje plné přizpůsobení designového systému včetně barev, mezer, breakpointů a typografie.

Designový systém je sbírka znovupoužitelných komponent, pravidel a standardů, které zajišťují vizuální a funkční konzistenci napříč produktem nebo skupinou produktů. Typicky zahrnuje knihovnu komponent, design tokeny, typografická pravidla, barevné palety a dokumentaci. Designové systémy propojují práci designérů a vývojářů a umožňují týmům stavět rozhraní rychleji při zachování jednotného vzhledu.

Optimistické UI je vzor, při kterém rozhraní okamžitě zobrazí očekávaný výsledek akce uživatele, ještě než ji server potvrdí. Například tlačítko „lajk" okamžitě ukáže stav po liknutí, zatímco API požadavek probíhá na pozadí. Díky tomu aplikace působí výrazně rychleji a responzivněji. Pokud požadavek na server selže, UI se vrátí do předchozího stavu a uživatele upozorní.

Komponenta vyššího řádu (HOC) je pokročilý React vzor, kde funkce přijme komponentu jako vstup a vrátí novou vylepšenou komponentu s dodatečnými props nebo chováním. Běžné použití zahrnuje přidání kontrol autentizace, sledování analytiky nebo logiky načítání dat ke stávajícím komponentám. Zatímco HOC byly hlavním vzorem znovupoužití kódu v třídovém Reactu, v moderním funkcionálním kódu je do značné míry nahradily vlastní hooky díky jednoduššímu modelu kompozice.