Feb 23
Letem frontendovým světem, vol. 7
S odstupem měsíce jsme připravili další sadu novinek z našich pravidelných frontendových porad. A že jich není zrovna málo. 😊
Srovnání výšek bez JavaScriptu pomocí CSS Gridu a „display: contents;“
V minulém díle jsme si ukazovali jednoduché použití a výhody používání
„display: contents;“.
Nyní si na příkladu ukážeme další vychytávku v podobě srovnání výšek bez JavaScriptu. Srovnání komponent mezi boxíky (např. název produktu) na jeden řádek? S CSS Gridem žádný problém. Dokonce ani nemusíme čekat na podporu pravidla subgrid.
Zde je náš malý experiment, jak pomocí „display: contents;“ a pár CSS proměnných nakódovat výpis z říše kodérových snů.
Jak využít HTML tag WBR a entitu ­?
<wbr> a ­ slouží k zajištění lomu řádku na specifickém místě v textu.
Tag <wbr> je zkratka z anglického “word break opportunity”. Slouží k označení místa, kde se může text přerušit a převést na další řádek, pokud dojde k zalomení. Tato vlastnost je užitečná především pro dlouhá slova, která se nemohou vejít na řádek a v případě potřeby je nutné je přerušit.
Entita ­ je nerozdělitelná pomlčka a je také určena k označení místa, kde lze přerušit slovo při zalomení řádku. Máte-li dlouhé slovo a chcete ho po určitém znaku zalomit pomlčkou, použijete právě ­
Více se o obou vlastnostech dozvíte na následující stránce.
Stimulus snippets
Povedená knihovna JavaScriptových Vanilla komponent, která využívá framework Stimulus. Hlavní výhodou této knihovny je, že umožňuje snadno a rychle vytvářet interaktivní komponenty na webových stránkách, bez nutnosti použití složitých frameworků.
Vytvoření nové komponenty pomocí této knihovny je velmi snadné a intuitivní. Komponenty jsou následně lehce přizpůsobitelné a rozšiřitelné pomocí vlastního CSS stylu a JavaScriptového kódu.
Knihovna má velmi dobrou dokumentaci a aktivní komunitu vývojářů. Více podrobností a ukázky zde.
Kouzla s SVG na počkání
Připravili jsme si pro vás ukázku naší práce s SVG, kterou jsme využili na projektu PageSpeed.
Potřebovali jsme vyřešit obarvení křivky v grafu podle definované hranice. Pro dosažení požadovaného výsledku jsme spojili <pattern> se stroke atributem. Následnou automatizaci pak vyřešilo pár řádků JavaScriptu. Podívejte se na naši názornou ukázku.
Firefox 110 má podporu Container Queries
V minulém díle jsme vás informovali o blížící se podpoře Container Queries v dalším releasu Firefoxu. A už je to tady! Container Queries má nyní podporu ve všech moderních prohlížečích.
Co jsou Container Queries a jak se používají popisuje ve výborném článku Martin Michálek.
<animateMotion> v SVG — animace bez JavaScriptu a CSS
<animateMotion> je jedna z mnoha funkcí, kterou lze využít pro animování SVG. Tato funkce umožňuje plynulé pohyby prvků SVG v rámci určité trasy. Princip fungování <animateMotion> je založen na definování cesty, po které se bude prvek SVG pohybovat.
Pro <animateMotion> můžeme definovat následující vlastnosti:
- dur: Doba trvání animace.
- repeatCount: Počet opakování animace.
- rotate: To lze považovat za orientaci na cestu. Zajistí, aby animovaný prvek vždy směřoval ve směru jízdy.
- path: Skutečná cesta, kterou bude prvek následovat.
S nástupem Chrome 110 a Firefox 110 je využívání <animateMotion> posvěceno. Více informací o celé problematice včetně ukázek, najdete například v tomto článku.
Jak na zpožděný request pomocí slowfil.es?
Službu můžete použít pro testování výkonu. Poskytuje veřejně dostupné soubory JavaScriptu, CSS, fontů či obrázků, které lze zahrnout do stránek. U souborů můžete ovládat jejich výkonnostní charakteristiky pomocí parametrů dotazu HTTP. Můžete definovat zpoždění, ukládání hlaviček do mezipaměti a kód stavu odpovědi.
GUI challenges
GUI challenges je webová stránka / video série, která se zaměřuje na vývoj uživatelského rozhraní a UX designu. Služba obsahuje video tutoriály pro vývojáře, kteří se chtějí zdokonalit v tvorbě uživatelských rozhraní a zlepšit své schopnosti UX designu.
Přinejmenším může mnohým sloužit pro návrh nejrůznějších komponent, best practices a jak postupovat u jednotlivých kroků. Zajímavá inspirace, která může být leckomu nápomocna.
