Letem frontendovým světem, vol. 18

Další užitečnou funkcí v DevTools je změna formátu barvy. Často například potřebujeme zjistit hexadecimální zápis barvy ze zobrazovaného rgb. Kliknutím se shiftem na čtvereček s barvou získáme kontextovou nabídku se zápisem v dalších formátech. Už žádné kapátko ani screenshotování. 🙂

Ne, nebavíme se o žádných second-handech ani outletech s oblečením. Jedná se o nový způsob komunikace mezi controllery od verze Stimulus.js 3.2.0. Pomocí nových data atributů se můžete dostat k instanci jiného controlleru. V JavaScriptu pak můžete získat přístup k vlastnostem nebo funkcím pomocí zápisu podobného tomu, který se používá u targetů nebo values.

Pro propojení obou controllerů specifikujeme outlet na místě data-controlleru následovně:

Formát: data-[identifier]-[outlet]-outlet="[selector]"

<div data-controller="search" data-search-result-outlet="#result">…</div>
<div id="result" data-controller="result">…</div>

V Javascriptu pak definujeme a používáme outlet podobně jako targets nebo values:

export default class extends Controller {
 static outlets = [ "result" ]
 connect () {
   this.resultOutlet.method();
 }
}

Používat můžeme i this.resultOutlets, což vrací všechny instance daného outlet selektoru nebo this.hasResultOutlet s návratovým typem Boolean.

Funkce light-dark() umožňuje jednoduše nastavit dvě různé barvy pro CSS vlastnost, které se automaticky přizpůsobí podle preferencí uživatele pro světlý nebo tmavý režim. Tím se vyhnete zbytečně složitému obalování kódu do prefers-color-scheme.

Pokud má uživatel nastaven světlý režim nebo nemá žádné preference, funkce vrátí první zadanou hodnotu. Pro správné fungování light-dark() musíte v CSS nastavit hodnotu color-scheme na light dark, nejčastěji na pseudotřídě :root.

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

Kódujete PDFka? My rozhodně ano! Naše specialistka na přístupnost, Kristýna Marková, objevila skvělý nástroj, který vám pomůže zjistit, zda je vaše PDF opravdu přístupné. Pokud tedy nekódujete letenky na řecký Lesbos, které si vytisknete a přístupnost řešit nemusíte.

Tento program s názvem PAC je zdarma, ale bohužel pouze pro Windows. Naštěstí je k dispozici i online verze na check.axes4.com. Po nahrání PDF souboru vám nástroj poskytne podrobnou zprávu a přesně označí chyby, které nejsou v souladu s PDF/UA a WCAG standardy. Program je vybavený i screen readerem.

Následující tři nástroje vám pomohou zkrátit nekonečné čekání na kolegy z backendu. Pomocí nich můžete snadno vygenerovat URL pro testování, která vám vrátí buď dummy HTML (html-mock.fly.dev) nebo data ve formátu JSON přesně ve vámi požadované struktuře (jsonplaceholder.typicode.com nebo mocki.io). Tímto způsobem si můžete dopředu připravit, jak budete s daty pracovat, a až bude backend hotový, stačí jen vyměnit URL. Už žádné čekání na kolegy a návaznosti prací!

Při procházení webové stránky nebo při změně jejích částí (například při hoveru nad elementy) musí engine prohlížeče tyto části překreslovat. To může být náročné na výkon, zejména pokud jsou překreslované oblasti velké nebo se to děje často.

Pokud máte podezření, že je vaše webová stránka pomalá kvůli častému a velkému překreslování, můžete využít nástroj Paint Flashing v záložce Rendering v Chrome DevTools. Tento nástroj zvýrazňuje oblasti, které prohlížeč překresluje, což vám umožní vizuálně identifikovat problematické oblasti.

Upozornění: Používání funkce Paint Flashing není vhodné pro osoby se sklonem k fotosenzitivní epilepsii!

Na závěr nelze opomenout Apple konferenci WWDC24, která představila i novou verzi OS Sequoia. Tato aktualizace přináší i novou verzi prohlížeče Safari, což znamená implementaci nejnovějších webových technologií. Novinek je spousta a více podrobností najdete v dedikovaném článku od Webkitu. Nové funkce budou k dispozici s oficiálním spuštěním OS ve druhé polovině tohoto roku, ale pokud si chcete některé novinky vyzkoušet už teď, můžete si stáhnout a nainstalovat beta verzi Safari 18.

Hlavní novinky ve WebKitu:

• WebXR Input transient-pointer : Podpora interakcí jako je pinch nebo drag.
• CSS View Transitions: Definice animovaných přechodů.
• Style Queries: Nové možnosti pro podmíněné styly.
• Modifikace barev pomocí calc() v Color Relative Syntaxi: Například ztmavení barvy při hoveru, která je uložená v CSS3 proměnné.
• Animace vlastnosti display: Možnost animovat změny viditelnosti.
• Nový stav pro Vision Pro: Stav, kdy se uživatel dívá na element (podobně jako :hover, :active, :visited)
• justify-content: safe center : Nová možnost pro bezpečné centrování obsahu.
• Podpora content-visibility : Optimalizace vykreslování neviditelných částí stránky (to pomáha metrice INP).
• Funkce .requestFullscreen() pro zobrazení Spacial Media fotografií.
• Writing Suggestions: Návrhy při psaní textu.
• Nové typy inputů: switch, date-time, time, date.
• Safari Viewer: Nový přehrávač videí, který se automaticky přepne do režimu picture-in-picture při změně tabu, zakrytí nebo zavření okna.
• Vylepšení Passkeys: Možnost přihlašovat se na webové účty založené na heslech přes AppleID nebo TouchID.

Další zajímavosti z WWDC24:

Opomenout nelze ani to, že se Apple Intelligence stává velkým lákadlem pro majitele MacBooků a iPadů s čipem M1 a novějším, stejně jako pro iPhone 15 Pro a 15 Pro Max. Tato inovace opět posouvá hranice a přináší nové možnosti, které zvedají laťku mezi konkurencí.

Na podzim se tedy máme spolu s vypuštěním OS Sequoia a novými iPhone 16 (kdo z vás kupuje? 🙋) na co těšit.