Media queries

Přístupnost (často zkráceně a11y) je praxe navrhování a tvorby webových stránek a aplikací tak, aby je mohli používat všichni, včetně lidí se zrakovým, motorickým, sluchovým nebo kognitivním postižením. Zahrnuje správné sémantické značkování, podporu navigace klávesnicí, dostatečný barevný kontrast a kompatibilitu se čtečkami obrazovky. Kromě etické odpovědnosti je přístupnost v mnoha jurisdikcích stále častěji i zákonným požadavkem.

Figma je webový kolaborativní designový nástroj používaný pro tvorbu UI designů, prototypů a designových systémů. Její real-time editace pro více uživatelů, systém komponent, auto layout a dev mode z ní udělaly průmyslový standard pro produktový design. Vývojáři používají Figmu k prohlížení designů, extrakci CSS hodnot, exportu assetů a — prostřednictvím pluginů a API — k automatizaci procesu od designu ke kódu.

JSX (JavaScript XML) je syntaktické rozšíření JavaScriptu používané především v Reactu, které umožňuje psát HTML-like značkování přímo v JavaScriptovém kódu. Nástroje jako Babel nebo SWC jej transpilují na běžná volání `React.createElement()` před odesláním do prohlížeče. JSX podporuje vkládání dynamických výrazů pomocí složených závorek, podmíněné renderování a mapování přes pole, což z něj činí mocný a intuitivní způsob deklarativního popisu UI struktur.

Drobečková navigace je sekundární navigační vzor, který ukazuje aktuální pozici uživatele v hierarchii webu jako řetězec odkazů (např. Domů > Produkty > Boty). Pomáhá uživatelům pochopit, kde se nacházejí, a rychle se vrátit na nadřazené stránky bez použití tlačítka Zpět v prohlížeči. Správná implementace využívá uspořádaný seznam v prvku `<nav>` s atributem `aria-label="Breadcrumb"` pro přístupnost.

Flutter je open-source UI toolkit od Googlu pro tvorbu nativně kompilovaných aplikací pro mobily, web a desktop z jediné kódové základny v jazyce Dart. Na rozdíl od React Native, který mapuje na platformově nativní UI komponenty, Flutter renderuje vše vlastním vysoce výkonným renderovacím enginem Skia/Impeller, čímž dává vývojářům pixelově přesnou kontrolu nad každým prvkem na obrazovce. Tento přístup zajišťuje identický vizuální výstup napříč platformami, ale znamená, že Flutter widgety automaticky nepřebírají platformově specifické designové konvence.

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.