Letem frontendovým světem, vol. 8
Pojďme se podívat na pět nejzajímavějších frontendových novinek a tipů, které jsme probírali na poslední poradě.
Time Zone bug
Před několika měsíci jsme na MůjRozhlas.cz v Reactu kódili novou podobu programu. Za cíl jsme si dali vylepšit přehlednost, přístupnost a zajistit tištěnou podobu (na konci roku 2022 zaniklo novinové vydání). Kromě toho jsme udělali i úklid devstacku, nahradili vybrané NPM balíčky a optimalizovali bundle size.
Kód jsme procházeli velmi poctivě, ale i tak jsme si nevšimli, že v něm máme doslova časovanou bombu. Ta se projevila tento víkend. A proč až tento víkend? Protože změna letního času. 🤦🏽♂ ️ A tady je očividný viník. 😬
import data from 'timezone-support/dist/data-2012-2022';Opravy jsou možné dvě. Ta jednodušší je použít větší balíček data-1970–2038 za cenu o 7kb většího bundle filu. Složitější je pak vygenerovat si vlastní sadu, viz. script . Tak dejte pozor a ujistěte se, že nemáte v kódu něco podobného.
Větší kontrola nad :nth-child pomocí „of <selector>“
Asi není potřeba detailně představovat, jak funguje selektor :nth-child. Ten umí vybrat prvky na základě jejich pozice ve skupině sourozenců. Například úplně obyčejné :nth-child(5) vybere pátý element v pořadí. Na CSS-Tricks je šikovná aplikace :nth Tester, která fungování :nth selektorů demonstruje a je možné s ní otestovat i složitější případy použití.
Určitě méně známé je ale použití tzv. „of selektoru“, které má podporu v novém Chrome 111. Třeba pomocí :nth-child(3 of .my-class) je tak možné vybrat třetí výskyt elementu pouze mezi elementy s konkrétní třídou .my-class.
Skvělé a velmi praktické použití je k vidění v CodePenu níže, kde nám selektor tr:nth-child(even of :not([hidden])) udělá správné “zebrování” řádků tabulky bez ohledu na to, zda jsou nějaké řádky skryté.
Style Queries
Teprve nedávno přišla do všech prohlížečů podpora pro Container Queries, nicméně specifikace nezahrnuje pouze dotazy na rozměry elementů. Umožňuje rovněž dotazy na hodnoty konkrétních stylů nebo CSS proměnných rodičovského prvku, tzv. Style Queries.
Následující ukázka nám demonstruje, jak můžeme stylovat komponentu .card na základě hodnoty CSS proměnné na jejím rodiči.
.cards-list {
—variant: grid;
}
@container style(—variant: grid) {
.card {
/* styly pro komponentu .card v gridu */
}
}Pro zájemce doporučuji článek od Ahmada Shadeeda, který obsahuje detailnější informace a spoustu konkrétních ukázek použití.
S podporou (https://caniuse.com/css-container-queries-style) je to zatím slabší, Style Queries si můžete zkusit použít zatím pouze v Chrome, a to až po zapnutí v rámci experimentálních funkcí. Věříme, že s aktuální rychlostí implementace novinek v ostatních prohlížečích se brzy dočkáme i jinde.
Alternativa ke GitHub Copilot v podobě Code GPT
V posledních týdnech a měsících je na vzestupu generování čehokoli pomocí AI. A tak není divu, že generování kódu rozhodně není pozadu.
GitHub Copilot je tu s námi už skoro rok. O něco novější je ale rozšíření do VS Code s názvem Code GPT využívající API od OpenAI. S jeho pomocí si tak můžete chatovat s AI a ani nemusíte opouštět editor. Code GPT umí například generovat kód z komentářů, prohledávat StackOverflow, vysvětlovat kód, či třeba samo vytvářet README soubory. Samotné rozšíření je zdarma, nicméně k používání potřebujete účet na OpenAI a vygenerovaný API klíč, jehož použití už je zpoplatněné.
State of CSS 2022 outsiders od Viléma Lipolda
V rámci posledního Frontedisti.cz meetupu, který SUPERKODERS pomáhají organizovat, si Vylda vzal na paškál průzkum State of CSS 2022. Vybral z něj 15 v prohlížečích plně podporovaných vlastností, které jsou ale málo známé a tím pádem i málo používané.
Určitě doporučujeme kouknout na jeho přednášku, která je k dispozici online na YouTube na kanále Frontendistů. Vylda ke své přednášce nachystal i naprosto skvělé interaktivní demo. Postupně probere například Cascade Layers, overscroll-behavior, accent-color, line-clamp a spoustu dalších.
