Letem frontendovým světem, vol. 16

Zed: Inovativní platforma pro vývoj webových aplikací

Pamatujete ještě PSPad nebo Notepad++? Mnozí z nás na těchto nástrojích začínali. Každopádně věčný boj mezi IDE editory přináší dalšího protivníka do boje a tím se zdá být ZED. Prozatím jen pro jablíčkáře.

Co je ZED?

Zjednodušeně editor zaměřený na produktivní vývoj. Nabízí komplexní sadu nástrojů, které umožňují rychlejší a efektivnější práci. Zed podporuje GitHub Copilot a GPT-4, které můžete třeba použít ke generování nebo refaktorování kódu.

Spolupráce mezi týmy

Za zmínku stojí také spojení více vývojářů nad sdíleným pracovním prostorem. Kanály pro diskuze, plánování či psaní softwaru v týmu fungují jako virtuální kancelář, což je v dnešní době nepostradatelný nástroj.

Práce s kódem

Práce s kódem z libovolného počítače je další super funkce tohoto nástroje, což jistě ocení vaši kolegové, pokud s nimi zrovna nesedíte v kanceláři. Vlastně to ocení i když sedíte, ale zrovna se vám nechce otočit. 😃

Co říct závěrem? Popsat všechny vychytávky by vydalo na vlastní článek, ale prozatím je u nás ZED v testovacím módu. Já osobně zůstávám věrný VS Code a asi se těžko nadchnu pro nový editor, každopádně ZED rozhodně stojí minimálně za zmínku.

Tipy a triky pro metriku INP

Google oznámil na 12. března změny v metrikách Core Web Vitals, a tak přinášíme pár rad na zlepšení metriky INP (Interaction to Next Paint). Ta je v CWV nová a měří rychlost reakce webu na akci uživatele.

Odložte načítání megamenu

Tímto problémem trpí některé e‑shopy, na kterých je megamenu o tolika položkách, že vám při scrollování na konec dojde baterka v myši.

Něco takového může zhoršit metriku INP. Přitom stačí málo, zkuste donačítat položky postupně AJAXem.

Intersection Observer

Další rychlá úprava spočívá ve vypnutí všech nepotřebných widgetů při načítání stránky v prvním viewportu. Slyšeli jste už o  Intersection Observer? Ten vám lehce zajistí spuštění widgetu až v okamžiku, kdy je skutečně ve viewportu.

Využití CSS místo js pluginu dotdotdot

V podstatě podobné je cyklické opakování jedné javascriptové funkce na každé stránce, typicky třeba dotdotdot plugin. Pokud jej stále používáte, nejlépe se ho co nejdříve zbavte a zkracování textu přepište pomocí CSS vlastnosti text-overflow:ellipsis či line-clamp.

Měřící kódy

Měřící kódy jsou téma samo o sobě. Zde jen ve zkratce, co můžete odložit - odložte. 😃

Optimální velikost cílové oblasti elementu

Aby uživatelé měli na webových stránkách co nejlepší zážitek, je klíčové optimalizovat velikost cílové oblasti, tedy místa, na která uživatel kliká.

Studie Ahmada Shadeeda upozorňuje na to, že příliš malé cílové oblasti mohou být frustrující pro uživatele, zejména na mobilních telefonech. Naopak, příliš velké cílové oblasti mohou způsobit náhodné kliknutí a zhoršit celkový uživatelský zážitek. Autor tedy vytvořil rozsáhlého průvodce, jak k celému problému přistupovat.

Velmi zajímavý je web i s praktickými ukázkami.

composedPath() metoda

Není to sice žádná novinka, ale metoda composedPath() není tak hojně využívaná, což je v mnoha ohledech škoda.

K čemu to je?

Tato metoda vrací pole s cestou (path) z kořene dokumentu k DOM prvkům, které byly dotčeny událostí. Cesta je tvořena všemi elementy, které událost prošla k cílovému prvku.

Zajištění správné cesty

Někdy může být obtížné zjistit, které prvky DOM byly zahrnuty v propagaci události, zejména pokud je na stránce složitá struktura DOM nebo pokud jsou některé prvky zanořeny do shadow DOMu.

Korekce chyb

Metoda composedPath() poskytuje jednoduchý způsob, jak získat kompletní cestu dané události, což pomáhá s laděním a opravou chyb.

Jak používat composedPath()?

// Funkce pro zachycení outside click události
function handleOutsideClick(event, target, callback) {
	// Získání cesty kliknutí
	const path = event.composedPath();
	// Zjištění, zda bylo kliknuto uvnitř node
	const isClickInside = path.some(node => target.contains(node));
	if (!isClickInsideModal) {
		// Volání zadaného callbacku při kliknutí mimo
		callback();
	} 
}

Ukázka subgridu pro srovnání výšek nadpisů

O subgridu se minule zmiňoval i Jozef ve Frontendových novinách a dneska vám přinášíme ukázku, jak pomocí grid-template-rows: subgrid srovnáváme výšky nadpisů. A protože kód řekne více než tisíc slov, zde to máte: