💻 Nejdůležitější frontend novinky 24.05.-31.05.2026
Forntend vývoj novinky 💻
24.05.-31.05.2026
Autentizační tokeny do localStorage nepatří, bezpečnější je kombinace paměti a HttpOnly cookies
Ukládání přístupových tokenů do localStorage je sice jednoduché, ale při XSS útoku je útočník může snadno získat a převzít uživatelskou relaci. Bezpečnější přístup je držet krátkodobý access token jen v paměti aplikace a refresh token ukládat na serveru do HttpOnly cookie se správnými bezpečnostními atributy. Tím se zmenší prostor pro útok, citlivá data nejsou přímo dostupná z JavaScriptu a správa přihlášení je lépe škálovatelná. Článek doporučuje i krátkou životnost tokenů, rotaci refresh tokenů a důslednou ochranu proti XSS.
- Pro frontend je klíčové neukládat access token trvale do localStorage, ale držet ho jen v React stavu, Context API nebo store v paměti, takže se po obnovení stránky smaže.
- Refresh token má být uložený v HttpOnly, Secure a SameSite cookie, díky čemuž k němu nemá přístup JavaScript a výrazně se snižuje riziko zneužití při XSS.
- V praxi se osvědčí tok: přihlášení → krátkodobý access token pro API volání → tichá obnova přes refresh cookie, plus nasazení HTTPS, sanitizace vstupů a správné odhlašování.
Jak škálovat cross-document View Transitions pro desítky až stovky prvků
Článek ukazuje, jak používat cross-document View Transitions i u velkých gridů produktů, galerií nebo nekonečného scrollu bez toho, aby se CSS rozpadlo na stovky selektorů. Klíč je v rozlišení mezi view-transition-name, které identifikuje konkrétní prvek mezi stránkami, a view-transition-class, které slouží jako společný hook pro stylování animací. Autor doporučuje přiřazovat názvy až těsně před navigací přes události pageswap a pagereveal, aby se zbytečně nezpracovávaly všechny prvky na stránce. Výsledkem je škálovatelnější řešení, lepší výkon na slabších zařízeních a přirozený fallback v prohlížečích bez podpory.
- Pro praxi je zásadní kombinace unikátního
view-transition-namea sdílenéhoview-transition-class: jména mapují konkrétní prvky mezi stránkami, zatímco jedna sada CSS pravidel obslouží třeba tisíce karet. - Nejlepší výkon dává takzvaný just-in-time přístup: pojmenovat jen kliknutý prvek těsně před odchodem ze stránky a po dokončení přechodu název zase odstranit, aby nevznikaly konflikty a zbytečné snapshoty.
- Důležité je myslet na dostupnost a kompatibilitu: animace patří pod
prefers-reduced-motion, starší prohlížeče prostě načtou stránku běžně a novější Chrome, Edge i Safari už zvládají plnou podporu včetněview-transition-class.
Lepší LCP díky správnému načítání kritického CSS
Slabé LCP často způsobuje render-blocking CSS, které prohlížeči brání vykreslit stránku, dokud nenačte celý stylesheet. Řešením je oddělit kritické CSS pro první obrazovku a vložit ho přímo do , zatímco zbytek stylů se načte asynchronně. Tím se hero sekce a hlavní typografie zobrazí okamžitě bez prázdné obrazovky nebo neostylovaného obsahu. Článek doporučuje moderní, jednodušší přístup bez křehkých automatizovaných nástrojů pro extrakci stylů.
- Pro praxi se hodí jednoduchý vzor: kritické styly vložit inline a hlavní stylesheet načíst neblokovaně přes
media="print"a po načtení přepnout naall, s fallbackem v. - Nejčastější chyba je příliš mnoho inline CSS, které nafoukne HTML a zhorší TTFB; kritický blok by měl obsahovat jen minimum stylů pro obsah nad přehybem, ideálně do zhruba 14 KB po gzipu.
- Pokud je prvkem pro LCP obrázek v hero sekci, nestačí jen rozdělit CSS: pravidla pro jeho zobrazení musí být v kritickém CSS a samotný obrázek je vhodné přednačíst přes
rel="preload" as="image".
Ruse přináší do Chromu lokální mockování API odpovědí bez mock serveru
Ruse je nové rozšíření pro Chrome, které umožňuje frontend vývojářům a QA rychle zachytit skutečný požadavek z prohlížeče a přepsat jeho odpověď lokálním mockem. Díky tomu lze snadno nasimulovat stavy, které se běžně špatně reprodukují, třeba chyby 500, prázdná data, pomalé odpovědi nebo problémy s oprávněními. Nástroj nevyžaduje mock server, proxy ani zásahy do kódu aplikace. První verze je záměrně jednoduchá a soustředí se hlavně na co nejrychlejší testování konkrétního UI stavu.
- Pro praxi je největší výhodou rychlý workflow: zachytit request, vytvořit pravidlo, upravit body, status, hlavičky nebo zpoždění a hned otestovat výsledek v aplikaci.
- Hodí se hlavně při vývoji proti nedokončenému backendu, při ladění edge casů a při ověřování chování rozhraní v situacích, které na sdíleném prostředí nejdou snadno vyvolat.
- Autor zatím necílí na plnohodnotnou náhradu mock serverů, ale na lehký lokální nástroj; v dalších verzích chystá jemnější oprávnění, lepší správu pravidel a rychlejší práci s logem požadavků.
Web Workers v Reactu udrží rozhraní plynulé i při náročném zpracování dat
Článek ukazuje, jak v Reactu vyřešit zasekávání rozhraní při těžkých výpočtech přesunem práce z hlavního vlákna do Web Workeru. Typický příklad je parsování velkého CSV souboru, které by jinak zablokovalo klikání, animace i celé UI. Worker běží na pozadí, zpracuje data odděleně a s aplikací komunikuje pomocí zpráv. Výsledkem je plynulé ovládání i při práci s velkým objemem dat.
- V praxi se hodí hlavně pro parsování souborů, validace, generování PDF nebo kryptografii, tedy úlohy, které by na hlavním vlákně brzdily React i vykreslování.
- Integrace je přímočará: vytvoříte samostatný soubor workeru, z komponenty ho spustíte přes
new Worker(), pošlete mu data metodoupostMessage()a výsledek převezmete vonmessage. - Důležitý detail pro produkci je úklid zdrojů: při odmountování komponenty je vhodné worker ukončit pomocí
terminate(), aby zbytečně nedržel paměť.
Chrome přináší vestavěné AI API pro webové aplikace bez závislosti na cloudu
Google na příkladu blogové šablony ukazuje, jak mohou webové aplikace v Chromu využít AI běžící přímo v prohlížeči. Vestavěné modely zvládnou shrnování, generování nadpisů, tagů, moderaci komentářů, tvorbu alt textů, přepis textu i překlad. Hlavní výhody jsou nižší náklady, menší latence, lepší soukromí a možnost fungovat i offline po stažení modelu. Na nepodporovaných zařízeních lze navíc přepnout na cloudový režim.
- Pro frontend vývojáře je zajímavé, že Chrome nabízí specializovaná API jako Summarizer, Prompt, Writer, Rewriter a Translator, takže AI funkce lze přidat přímo do webové aplikace bez stavění vlastního backendu pro inference.
- Praktické využití je široké: automatické SEO nadpisy a popisky, návrhy kategorií, moderace obsahu, přístupnější práce s obrázky přes generování alt textů i rychlé úpravy stylu a délky textu.
- Technologie už míří do reálného provozu, využívají ji například Drupal nebo Yahoo! Japan, a k dispozici je i hotová starter šablona a TypeScript typy pro rychlejší nasazení.
Problémy s přístupností často vznikají v architektuře, ne v jedné obrazovce
Řada chyb v přístupnosti nevzniká kvůli chybějícímu aria atributu, ale kvůli špatně navrženým komponentám, obalům frameworku a dynamickému chování aplikace. Autor ukazuje, že opakované potíže se čtečkami, fókusen nebo klávesnicí se často vracejí napříč celým systémem, protože jsou zabudované v znovupoužitelných prvcích. Typické příklady jsou modální okna, vlastní dropdowny nebo tlačítka, která se vizuálně tváří správně, ale nemají spolehlivou sémantiku. Skutečná náprava proto často znamená návrat k nativnímu HTML a úpravu architektury, ne jen lokální záplatu.
- Pro frontend praxi z toho plyne, že opakující se a11y chyby je lepší řešit na úrovni komponent a design systému, ne po jednotlivých stránkách.
- Vlastní obaly nad nativními prvky a složité UI komponenty často rozbíjejí sémantiku, fokus i chování čteček; jednodušší nativní HTML bývá spolehlivější.
- Automatické nástroje jako Axe nebo Lighthouse nestačí: neodhalí kvalitu hlášení čtečky, logiku pohybu fokusu ani reálný průchod aplikací přes klávesnici.
CSS Subgrid řeší přesné zarovnání obsahu karet bez hacků a JavaScriptu
CSS Grid Subgrid konečně umožňuje, aby vnořené prvky přebíraly řádky nebo sloupce nadřazeného gridu a držely stejné zarovnání napříč kartami s různě dlouhým obsahem. Typický problém s titulkem, textem a tlačítkem v kartách tak odpadá bez pevných výšek, složitých skriptů i rozbití sémantického HTML. Stačí, aby karta používala grid-template-rows: subgrid a zároveň přesně určila, kolik řádků rodičovského gridu zabírá. Výsledkem je čistší kód, lepší responzivita a stabilnější layout.
- Pro frontend je to praktické hlavně u gridů s kartami, kde musí být nadpisy, popisy i tlačítka zarovnané ve stejných liniích bez ohledu na délku textu.
- Oproti starším postupům odpadá nastavování pevných výšek i dopočítávání rozměrů přes JavaScript, což pomáhá výkonu, přístupnosti i údržbě kódu.
- Nejčastější chyba je chybějící span na kontejneru subgridu: pokud karta neurčí třeba
grid-row: span 3, prohlížeč neví, kolik řádků má převzít, a vnitřní obsah se může rozpadnout.
Baseline za duben 2026 přináší užitečné novinky pro přístupnost, CSS i JavaScript
Dubnový přehled Baseline ukazuje, které webové funkce už dozrály pro reálné nasazení napříč prohlížeči. Nově jsou k dispozici třeba CSS funkce contrast-color() a přesné sčítání přes Math.sumPrecise(), zatímco širší podporu získaly element , nové pomůcky pro WebAuthn, práce s nevalidními řetězci a ARIA reflexe v DOM. Hlavní motiv je jasný: méně vlastních hacků, více vestavěných webových standardů a jednodušší cesta k přístupnějším aplikacím.
-
contrast-color()umí automaticky zvolit kontrastní barvu textu podle pozadí, takže usnadňuje tvorbu dynamických motivů a snižuje množství ručně udržovaného CSS kvůli čitelnosti. - Element
a ARIA reflexe pomáhají stavět přístupnější rozhraní nativněji: prohlížeč dodá správnou sémantiku a vývojář může měnit ARIA stavy přímo přes vlastnosti jakoelement.ariaExpanded. - Pro praxi jsou důležité i nové utility v JavaScriptu:
Math.sumPrecise()řeší chyby při sčítání desetinných čísel,isWellFormed()atoWellFormed()pomáhají odhalit a opravit rozbité Unicode řetězce a WebAuthn zjednodušuje bezheslové přihlašování.
CSS získává nativní vlastní funkce bez potřeby Sassu
CSS nově podporuje pravidlo @function, které umožňuje definovat znovupoužitelné funkce přímo ve stylesheetu a vracet z nich vypočtené hodnoty. Oproti preprocesorům fungují za běhu v prohlížeči, takže mohou reagovat na viewport, podporu funkcí i uživatelské preference. Podporují parametry, výchozí hodnoty i typovou kontrolu, takže jsou praktické pro návrhové tokeny, responzivní hodnoty nebo práci s barvami. Zatím jsou ale použitelné hlavně jako progressive enhancement, protože Firefox a Safari je ještě nepodporují.
- Pro frontend to znamená méně závislosti na Sassu u běžných výpočtů hodnot: funkce lze psát přímo v CSS a volat bez buildu i bez obalu
var(), jen matematiku je stále potřeba psát přescalc(). - V praxi se hodí pro responzivní typografii, práci s průhledností barev, tematické přepínání světlého a tmavého režimu nebo opakovaně používané spacing a sizing utility.
- Aktuálně je podpora v Chrome 139+, Edge a Opeře, takže pro produkci je vhodné přidat fallback přes
@supportsnebo klasické hodnoty; omezením je i nemožnost rekurze a to, že funkce pouze vrací hodnotu bez vedlejších efektů.
Ještě nemáte odběr?
Nenechte si utéct žádnou důležitou novinku. Přidejte se k nám a získejte pravidelný informační přehled čistých faktů přímo do své schránky.