Responzivní design

Storybook je open-source nástroj pro vytváření a testování UI komponent izolovaně, mimo hlavní aplikaci. Vývojáři definují „stories" — různé stavy a varianty komponenty — které se vykreslují v samostatném prostředí v prohlížeči. Podporuje React, Vue, Angular a další frameworky, což z něj činí neocenitelný nástroj pro dokumentaci komponent, vizuální regresní testování a spolupráci designérů s vývojáři.

Shadow DOM je API prohlížeče, které umožňuje připojit k elementu skrytý, zapouzdřený DOM strom s izolovanými styly a značkami od zbytku stránky. CSS definované uvnitř Shadow DOM nepronikne ven a vnější styly se nedostanou dovnitř. Jde o klíčovou technologii stojící za Web Components, kterou frameworky využívají k dosažení skutečné izolace stylů bez nutnosti konvencí pojmenování CSS.

Hydratace je proces, při kterém klientský JavaScript framework připojuje event listenery a interaktivitu k serverem vyrenderovanému HTML. Poté, co server odešle předrenderované HTML pro rychlé počáteční zobrazení, framework jej „hydratuje" tak, že sladí svou virtuální reprezentaci s existujícím DOM a učiní jej interaktivním. Hydratace může být na složitých stránkách nákladná, což vedlo k inovacím jako částečná hydratace, progresivní hydratace a selektivní hydratace Reactu se Suspense.

Headless UI označuje knihovny komponent, které poskytují chování, správu stavu a logiku přístupnosti bez jakéhokoliv předdefinovaného stylování nebo markupu. Knihovny jako Radix Primitives, Headless UI od Tailwind Labs a React Aria dávají vývojářům plnou kontrolu nad vizuální prezentací a zároveň řeší složité vzory jako správu fokusu, klávesovou navigaci a ARIA atributy. Tento přístup odděluje funkcionalitu od designu, což je ideální pro vlastní designové systémy.

CSS vlastní vlastnosti (také nazývané CSS proměnné) umožňují definovat znovupoužitelné hodnoty syntaxí `--my-variable` a odkazovat na ně kdekoli pomocí `var(--my-variable)`. Na rozdíl od proměnných v preprocesorech Sass nebo Less jsou živé v prohlížeči, kaskádují přes DOM a lze je dynamicky měnit JavaScriptem. Jsou nezbytné pro systémy motivů, implementaci tmavého režimu a udržování konzistentních designových tokenů v rozsáhlých stylech.

Generování statických stránek (SSG) je strategie renderování, při které se HTML stránky předgenerují v době sestavení, místo aby se generovaly při každém požadavku. Výsledné statické soubory lze servírovat z CDN s extrémně rychlými načítacími časy a minimální serverovou infrastrukturou. Frameworky jako Next.js, Gatsby a Astro podporují SSG, často v kombinaci s Incremental Static Regeneration (ISR) pro aktualizaci konkrétních stránek na pozadí bez přestavění celého webu.