08.09.2021 06:00 Tento díl podcastu vznikl jako záznam diskuze o novém a zajímavém CSS frameworku, která proběhla během prvního ročníku konference Frontendisti.cz, takzvaného FrontKonu. Honza Bien do programu přispěl výbornou přednáškou, kde ukazoval jak Tailwind používá pro kódování libovolného grafického návrhu. O utility-first přístupu jsme diskutovali v kontextu component-first frameworků, jako je Bootstrap, a proto jsme pozvali i Adama Kudrnu, který komponentovým přístupem tráví svůj vývojářský čas. Přejeme vám příjemný poslech. Podcast MP3 ke stažení Video Díky vstřícnosti organizátorů FrontKonu zde máme k dispozici záznam přednášky i diskuze ještě předtím, než se koncem června zpřístupní všem. Děkujeme! Honzova přednáška o Tailwindu Záznam celé diskuze Hosté Jan Bien Seniorní full-stack webový vývojář WordPressu na volné noze. Poradce pro realizaci prezentačních a obsahových webů. Na Tailwindu staví například Seznamácký blog. Web Adam Kudrna Frontend designer na volné noze, konzultant a lektor, zaměřený na mentoring a vývoj udržitelných a škálovatelných uživatelských rozhraní. Twitter, LinkedIn, Web O čem se bavíme? Představení Tailwind vs. Bootstrap Psaní CSS v Reactu - zdroj inspirace pro Tailwind? Utility-first framework vs component-first Pro koho je Tailwind a pro koho Bootstrap Oddělení obsahu a struktury - od CSS Zen Garden k Tailwindu Hodně tříd v HTML a znovupoužitelnost Abstrakce komponent v Tailwindu - když @apply nestačí Může Tailwind svádět ke špatnému použití? Headless UI - komponenty k Tailwindu CSS frameworky a rychlost webu Tailwind: theme a Sass a preprocessing vs. postprocessing Purge CSS a Bootstrap Tailwind UI - placené komponenty a financování vývoje Těšíme se na vaše dotazy, připomínky, pochvaly i názory. Pište do komentářů nebo na podcast@vzhurudolu.cz.
08.09.2021 06:00 MSIE dělá vývojářům starosti. Používat moderní vlastnosti jako CSS grid je složitější a někdy i nemožné, pokud je na projektu nutné tento starý prohlížeč od Microsoftu podporovat. Text píšu v červnu 2021. A píšu ho proto, že pokud Internet Explorer stále ještě podporujete, myslím si, že byste od této praxe mohli začít upouštět. Velmi to záleží na cílové skupině konkrétního projektů, ale drtivá většina vývojářů si myslím ukončení podpory ke polovině roku 2021 může dovolit. Toto je mé osobní rozloučení s prohlížečem, který do webdesignu přinesl mnoho dobrého. Ne, není to ironie. Aktuální podíl MSIE mezi uživateli je v ČR mezi 1-2 %. A klesá to Podívejte se na graf. Z toho je myslím jasné, že i v České republice bude možné Internet Explorer brzy přestat podporovat. Nejmenší ze všech nejmenších. Podíl méně významných prohlížečů na trhu v ČR. Vývoj MSIE ukazuje světle modrá linka. Zdroj: rankings.gemius.com. V Česku má IE zastoupení kolem 1,5 %. Tato čísla potvrzuje i jiný statistický web, StatCounter, a moje vlastní měření na webech klientů. Daleko důležitější je ale trend vývoje. Zatímco začátkem roku 2019 dědeček prohlížeč používala ještě zhruba desetina uživatelů, zkraje roku 2020 už jej pro přístup na weby využívalo jen zhruba 5 %. No a v roce 2021 to je kolem dvou procent. Každý rok to tedy klesne na polovinu a méně. Blíží se doba, kdy IE nebude mít smysl tento prohlížeč podporovat na žádném projektu. Bratrům Slovákům zde ale můžeme jen závidět. V zemi pod Tatrami je totiž zastoupení MSIE podle čísel Gemiusu už nyní nulové. Výjimky potvrzují pravidlo. Sledujte statistiky a příjmy Jak zjistit, jestli můžu Explorer přestat podporovat? Podíl MSIE v na používání se liší web od webu, takže například na svém blogu, Vzhůru dolů, vidím v březnu 2021 pouhých 0,27 % návštěv od uživatelů s tímto prohlížečem. Na webech klientů ale Google Analytics ukazují čísla mezi 1-2 %,někde i více. Podíl prohlížečů zjistíte například právě v Google Analytics . Je samozřejmě otázka, při jakém podílu na návštěvnosti je možné podporu prohlížeče vzdát. Obvykle se má za to, že podpora prohlížečů pod 1 % se nevyplácí, ale záleží na více faktorech: Kolik času a peněz musíte do podpory investovat. Troufám si říct, že toto číslo bude u Exploreru vysoké, protože už na příkladu CSS gridu je vidět, jak moc odlišné řešení je pro Explorer nutné dělat. Jak důležití jsou uživatelé prohlížeče pro výdělečnost vašeho projektu. Ten druhý bod je přitom klíčový. Vyfiltrujte si v Google Analytics tržby uživatelů Exploreru a porovnejte to se svými náklady. Takto to pojali například vývojářky a vývojáři v Rohlík.cz. Podíl IE je na Rohlíku nízký, jenže přepočteno na tržby se to pořád vyplatí. Pro každého frontendistu je ovšem podpora takto zastaralého prohlížeče otrava. V Rohlíku tedy uživatelům Exploreru ukazují hlášku, motivující je ke změně prohlížeče. Máme vás rádi, ale nechtěli byste změnit prohlížeč? Hodně by nám to pomohlo. Zdroj: Twitter. Ve schopnost těchto hlášek snížit podíl zastoupení starých prohlížečů samy od sebe zase tak moc nevěřím, ale jako součást širšího strategického balíčku smysl mají. Exploreru končí podpora od Microsoftu Oficiální ukončení podpory mají v Microsoftu naplánované na polovinu června 2022. Oznámení o ukončení podpory MSIE zobrazené v MSIE. Hurá, stránka se nerozpadla! Termín je pro uživatele Exploreru od Microsoftu nastavený velkoryse, ale předpokládám, že uživatelé ve spolupráci s webaři ukončí podporu Internet Exploreru daleko dříve. Starší verze Exploreru Váš případný dotaz na rozšíření starších verzí MSIE než poslední, jedenácté, je samozřejmě správný. Raději jsem ve všech výše uvedených zdrojích ověřoval i přítomnost uživatelů s Explorerem 10 a staršímu. A k naší společné radosti zde můžu konstatovat, že tyto živočišné druhy už dávno vyhynuly. Nejpozději do roka je bude následovat i Internet Explorer 11, poslední svého druhu. Odpočívej v pokoji. A děkujeme za vše dobré, milý Internet Explorere Explorer byl dobrý prohlížeč. Svého času. V době kdy přišla verze 4, udělal Microsoft prohlížečovou revoluci a otočil chod dějin webu ve svůj prospěch. Nicholas C. Zakas připomíná ve svém výborném článku „The innovations of Internet Explorer“ dobré věci, které nám MSIE přinesl: Věřte tomu nebo ne, ale Internet Explorer 4-6 je do značné míry zodpovědný za webovovou vývojařinu, jak ji známe dnes. Řada proprietárních funkcí se stala de facto standardy a poté oficiálními standardy, přičemž některé z nich skončily ve specifikaci HTML5. Z jeho textu, zmiňujícího mnoho inovací Exploreru, jsem vybral pár bodů, které stojí za připomenutí: Internet Explorer 4 zlepšil práci s DOMem tím, že umožnil programový přístup ke každému prvku na stránce prostřednictvím document.all, což byl předchůdce document.getElementById . Ve stejné verzi se také poprve objevila vlastnost innerHTML. Exploreru také vděčíme za bublání událostí . Kromě toho vytvořili v Microsoftu řadu dalších událostí, které se nakonec staly součástí standardů W3C: beforeunload, mouseenter, mouseleave a další. Ve verzi 3 přidal Microsoft kromě tehdy populárních rámců také novou vlastní značku: pro vnitřní rámce, dodnes velmi populární. Často se zapomíná, že v Microsoftu nepřímo vymysleli Ajax. Zpracování XML na straně klienta bylo součástí implementace XMLHttpRequest, která byla poprvé představena jako součást rozšíření ActiveX v páté verzi Internet Exploreru. Internet Explorer 3 byl také první první prohlížeč, který vsadil na CSS. V té době totiž konkurenční společnost Netscape prosazovala alternativní návrh, JavaScript Style Sheets . Dodávám, že byť Netscape následně CSS začal implementovat, byl to začátek konce tohoto prohlížeče, protože používání CSS zde bylo velmi chybové. MSIE 4 byl první browser s rozumnou implementací základů CSS a i díky tomu se stal nejpoužívanějším prohlížečem světa. První implementace box modelu v Internet Explorer 5 interpretovala šířku a výšku tak, že prvek má mít celkovou velikost včetně vnitřních okrajů a rámečku. To byl základ pro pozdější standardizovanou vlastnost box-sizing:border-box, i když v té době to bylo od Microsoftu opravdu nepěkné a webařům značně zavařil. Mnoho nových vizuálních efektů z CSS3 má základ ve filtrech Internet Exploreru. Příkladem budiž použití vrženého stínu na prvek – filtr Alpha v CSS3 známe jako opacity a tak dále. Samozřejmě je nutné ještě přidat rok 2011, kdy Microsoft vymyslí a v Internet Exploreru poprvé implementuje CSS grid. Celý text Nicholase C. Zakase najdete na odkaze. vrdl.in/msieinn Od doby příchodu Firefoxu a pak nástupu Chrome nebo Edge od Microsoftu jsme se s Explorerem my webaři už ale jen trápili, takže odchod oslavíme. Důstojně, s respektem k nebožtíkovi, ale oslavíme. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
08.09.2021 06:00 Google před dvěma týdny vydal osmou verzi populárního nástroje pro automatické testování rychlosti, přístupnosti a dalších aspektů webů — Lighthouse. To samozřejmě stojí alespoň za krátký blogpost. Aktualizace se v této verzi týkají hlavně testování rychlosti webů. Na ty nejdůležitější se teď jdeme podívat. Změna váh jednotlivých metrik Nové váhy, kterými se jednotlivé metriky projevují v celkovém Lighthouse Performance Score reflektují aktuální update vyhledávání Googlu zaměřený na Page Experience a zohledňují tří nejdůležitější metriky Core Web Vitals: Metrika Váha v6 Váha v8 Rozdíl First Contentful Paint 15 % 10 % - 5 Speed Index 15 % 10 % - 5 Largest Contentful Paint 25 % 25 % 0 Time To Interactive 15 % 10 % - 5 Total Blocking Time 25 % 30 % + 5 Cumulative Layout Shift 5 % 15 % + 10 Všimněte si, že metrika Kumulativní posun layoutu ztrojnásobila svůj vliv. Bodejď by ne, vždyť jde o jednu z Web Vitals. Metriky Core Web Vitals teď mají 70procentní vliv na celkové skóre. Ve stejném zdroji hledejme příčinu zvýšení vlivu Total Blocking Time. TBT sice není součástí Core Web Vitals, ale pro syntetická měření „zastupuje“ metriku First Input Delay . Obě měří jinak podobnou věc – javascriptový výkon. Jaký vliv to bude mít na skóring vašich URL? Podle FAQ od autorů Lighthouse ztratí zhruba pětina stránek o pět a více bodů a téměř třetina naopak o pět a více bodů získá navíc. Přechod měření na #Lighthouse8 některým webům vylepšil Lighthouse Performance Score . Zde např. homepage @tsbohemia.Podle autorů se skóring významněji zlepší u 30 % URL. https://t.co/XXGXQC7kaB pic.twitter.com/5BnwkqH5LR— PageSpeed.cz June 14, 2021 Pokud se chcete více hrabat ve vlivu jednotlivých metrik na celkové skóre, jako ideální nástroj doporučuji kalkulačku Lighthouse skóre . Změna hodnotících křivek TBT a FCP Metriky Total Blocking Time a First Contentful Paint byl zpřísněny. Nikoliv ale změnou hranic optimálních hodnot, ale změnou výpočetní křivky. Jsou to už poměrně detailní informace, které najdete na Github Issues: TBT, FCP. Aktualizace metriky CLS Možná víte, že metrika CLS se v poslední době nemálo změnila – počítá se během celé relace prohlížení stránky, dokud se neobjeví pětisekundové okno bez zaznamenaných posunů. Vliv na syntetické měření to ale mít nemá: … adjustment will likely not have much effect for the lab measurement, but instead will have a large effect on the field CLS for long-lived pages. Nízký vliv CLS na dřívější skóring byl způsobený pravděpodobně tím, že šlo o novou metriku, jejíž algoritmus se navíc docela dost měnil. Lidé z Googlu vyloženě píší, že metrika už „dospěla“ a já doufám, že je to pravda a za půl roku se nebudeme muset učit další novou verzi. Do reportu přidali filtr metrik Jelikož Lighthouse přidává stále více bodů do sekcí Příležitosti a Diagnostika, hodí se rozdělení do jednotlivých sekcí: Vy, kteří už jste mě někde slyšeli, možná víte, že k radám Lighthouse se pro pokročilejší optimalizaci rychlosti stavím poměrně skepticky. Nicméně pro základní práci na rychlosti je to výborné a filtr pomůže v přehlednosti. Lighthouse Treemap Lighthouse Treemap vezme vaše javascriptové buildy a vizualizuje jejich vnitřní dělení na menší soubory. Stromová mapa je nyní k dispozici ve všech hlavních klientech Lighthouse, například i v PageSpeed Insights. Lighthouse Treemap pro homepage Mall.cz v PageSpeed Insights. Podmínkou je, abyste k testovaném URL přiložili také Source Maps . Pak je to velmi užitečné pro audit stránky. Co tam všechno uvidíte? Co je obsahem konkrétních souborů. Jaký je v těchto souborech podíl nevyužitého kódu. Zda nejsou některé moduly využívány duplicitně. Přítomnost Treemap v PageSpeed Insights je skvělá zpráva. Další novinky Novinek mimo oblast Performance není mnoho, přibyl jen například audit best practice pro Content Security Policies a rozšířili testování přístupnosti. Tohle vydání je prostě hodně o rychlosti, což dává vzhledem ke změnám u Googlu, zohledňujícím Page Experience, velký smysl. Další novinky najdete přímo v changelogu u vydání Lighthouse verze 8. Kde je Ligthouse 8 nasazený? Verze 8 populárního testeru je už nasazená v PageSpeed Insights, včetně API. K dispozici bude v DevTools od Chrome 93, už nyní pomocí osmičky můžete testovat v Chrome Canary. Na osmou verzi přešla také většina nástrojů, které Lighthouse využívá interně, jako náš tester na PageSpeed.cz: Přechod měření na #Lighthouse8 některým webům vylepšil Lighthouse Performance Score . Zde např. homepage @tsbohemia.Podle autorů se skóring významněji zlepší u 30 % URL. https://t.co/XXGXQC7kaB pic.twitter.com/5BnwkqH5LR— PageSpeed.cz June 14, 2021 Co na novinky v osmé verzi Lighthouse říkáte vy? Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
08.09.2021 06:00 CSS framework, který má vcelku slušnou šanci změnit mnohým z nás způsoby, jakými jsme zvyklí psát HTML a CSS kód. Propaguje zápis pomocí utilitárních tříd, tedy více HTML a méně CSS. Dělá to ve jménu zlepšení zážitku vývojáře – zjednodušení jeho práce. Ve jménu produktivity. Tailwindem se pár měsíců zabývám a v mnohém se mi tenhle přístup líbí. V tomhle článku se pokusím shrnout, o co jde a kdo z vás by Tailwindu měl věnovat pozornost. Popularita Z pohledu počtu hvězdiček na Githubu to ještě tak moc vidět není. tailwindlabs/tailwindcss jich má asi 45 tisíc, podobně jako další nový framework Bulma . Kam se hrabou na Bootstrap se 150 tisíci hvězdičkami. Zajímavější je pohled do ankety State of CSS 2021 – spokojenost uživatelů s Tailwindem je 90 %, jedna z nejvyšších vůbec. State of CSS 2020: Zatím ne tak moc používaný, ale s velkou spokojeností uživatelů. Tailwind hledejte uprostřed levého horního čtverce. Spokojenost s frameworkem Bulma je kolem 60 %. A s Bootstrapem je spokojená jen necelá polovina uživatelů. Díky dramatickému nárůstu uživatelské základy získal Tailwind v téhle anketě ocenění Most Adopted Technology. Utility? Ne, utility-first framework Mě na Tailwindu nejvíc zaujalo zaměření na utility . Jednotlivé třídy totiž reprezentují vlastnosti a jejich vybrané hodnoty: Buy now Jak asi předpokládáte, tento kód vytvoří černé tlačítko s bílým textem a středně zakulacenými rohy. Viz ukázka: play.tailwindcss.com/EgD4vOaAFv. Z mých dřívějších textů možná víte, že atomický přístup mě osobně vyhovuje, protože představuje nízkoúrovňový systém designu. Jakmile jej dostanete do hlavy, psaní kódu vám začne jít výrazně rychleji, protože nejste nucení přepínat kontexty CSS a HTML. Podmínkou pro správné využití atomických tříd je ovšem možnost abstrakce – nechci přeci každé tlačítko znovu zapisovat jako kombinaci mnoha jednotlivých tříd. A právě Tailwind dotáhl možnosti abstrakce ze všech utility frameworků nejdál. Abstrakce a komponenty stále žijí O Tailwindu nejde mluvit jako o „utility frameworku“, kam spadá třeba starší Tachyons. V případě Tailwind CSS jde o „utility first“ framework. Pomocí užitkových tříd buď přímo zapisujete CSS kód nebo je použijete k abstrahování. Nejjednodušší možností abstrakce je direktiva @apply. pomocí níž prostě jednodušší komponenty zapíšete pomocí staré dobré metodiky BEM: .btn .btn--secondary Viz ukázka: play.tailwindcss.com/61qN16fO0Y. Pro složitější komponenty ovšem @apply není dobrou cestou a tak vám spolu s autory frameworku vřele doporučuji využívat komponentová zobecnění šablonovacícho frameworku, který používáte. Zde je zjednodušený příklad ve Vue.js: // Recipes.vue: // … // Nav.vue: Další z možností abstrakce je napsání vlastního pluginu do tailwind.confing.js. Jakýkoliv design V podcastu o Tailwindu jsme s Robinem Pokorným, Honzou Bienem a Adamem Kudrnou rozebírali rozdíly mezi Bootstrapem a Tailwindem. Mimo jiné jsme došli k tomu, že Bootstrap má, přes velké možnosti úprav vzhledu pomocí nastavení v preprocesoru, určitou tendenci ovlivňovat vzhled výsledku. Na velké části webů a webových aplikací, používajících nejznámější CSS framework, je tenhle framework prostě vizuálně poznat. Bootstrap Expo: Galerie krásných a kreativních webů, které používají… layoutovou mřížku z Bootstrapu. Tailwind je v tomhle jiný – nenabídne vám hotové komponenty, ale nízkoúrovňový CSS framework nad konkrétními vlastnosti a sadou předvybraných hodnot. Toto velmi ocení typičtí „CSSkaři“ – frontendové kodérky a kodéři, jejichž běžným úkolem je kódování velmi odlišných designů webu. Jak ve své přednášce říká Honza Bien: Tailwind je první CSS framework, který mu umožnil rychle nakódovat jakýkoliv design. Má pravdu, Webmistr. Bootstrap versus Tailwind: komponenty versus utility? Možnost nakódovat jakýkoliv design je skvělá pro někoho, kdo CSSka velmi dobře zvládá a potřebuje zrychlit svou práci, ale ne pro typického uživatele Bootstrapu – vývojáře, který do detailů CSS až tak vidět nechce nebo nemůže. Zatímco Bootstrap je „component-first“ a až v posledních verzích začal hojně přidávat utility, Tailwind na to jde z druhé strany – DNA frameworku tvoří právě utility a komponenty si buď postavíte sami nebo využijete některé předpřipravené externí nástroje, jako Taiwind UI, Headless UI nebo Heroicons pro ikony. I tyto dva přístupy jsme srovnávali v květnovém vydání podcastu: Je vůbec zajímavé sledovat, jak nově vzniknuvší konkurence přinutila autory Bootstrapu reagovat. Jejich přístup k utilitám a rychlá reakce na Tailwind jsou určitě pozoruhodné. Bootstrap má však jiné DNA. Je postavený na preprocesoru Sass, takže klasika. V Tailwindu veškeré nastavování probíhá na úrovni JavaScriptu – jednak nad PostCSS, ale také ve velmi mocném konfiguračním souboru. Konfigurace: velká síla na pozadí Soubor tailwind.config.js obstarává kompletní konfiguraci Tailwindu. Díky použití JS se zde mohou vcelku silně rozšiřovat možnosti frameworku. Jako nejjednodušší úroveň si asi lze představit nastavování barev a podobných elementů designu: // tailwind.config.js module.exports = , gray: } } } Dále je například možné přidat vlastní utility: // tailwind.config.js module.exports = , } } } Vybrat z předpřipravených pluginů… // tailwind.config.js module.exports = …nebo přidat vlastní. V dokumentaci pluginů uvidíte, jak mocný nástroj je možné vytvořit, když dovolíte konfiguraci na úrovni JavaScriptu, tedy plnohodnotného programovacího jazyka. Varianty: stavy, pseudotřídy, breakpointy… I když v Tailwindu vzhled zapisujete pomocí tříd, existují jejich varianty, pro responzivní breakpointy: Buy now V této ukázce bude mít tlačítko větší vnitřní okraj na šířkách obrazovky od breakpoitu sm – viz třída sm:p-4. Na menších poloviční – p-2. Viz demo: play.tailwindcss.com/EoXdekog6A Všem těmto podmínečným zobrazením, jako jsou konkrétní body zlomu designu, stav po najetí myši, mód tmavého zobrazení… říkají autoři tohoto frameworku varianty a máte jich k dispozici téměř dvacet. Pro koho to je a co já na to? Pokud fandíte přístupu s psaním utility tříd, pak asi moc neváhejte - Tailwind je myslím v této oblasti ze všech frameworků nejdál. Tailwind je také velmi vhodný pro ty, kteří pracují agenturně, takže kódují různé designy webů a konvenční komponentové frameworky jako Bootstrap pro ně nebyly. Jakmile jej dostanete do krve, jsem přesvědčený, že vám ušetří spousty kóderského času. Já už aktivně a za peníze CSSka nepíšu, ale frameworky mě zajímají a Tailwind jsem použil na některých osobních projektech. Pokud bych na to měl čas, pravděpodobně bych jej nasadil i zde na Vzhůru dolů, kde používám kombinaci vlastního utility frameworku a BEMovských komponent. Pokud odhlédnu od své specifické situace, nebojím se říct, že Tailwind mě nadchnul. Mentální zábrany používat utility třídy jsem si vnitřně zboural už před lety a velmi oceňuji praktičnost tohoto přístupu. Co se mi na Tailwindu líbí? V oblasti utility frameworků je rozhodně nejdál. Jde aktivně naproti možnosti abstrakce utilit do komponent. Má skvělou dokumentaci, což je vždy základ úspěšnosti nástroje. Při správné práci s ním tvoří velmi malé CSS. Má výborně vymyšlenou konfiguraci, takže je možné jej od základu předělat pro vlastní potřeby. Stavy a responzivita řešená prefixy v názvech tříd . Ve verzi 2.1 autoři přidali možnost vkládat libovolné hodnoty přímo do tříd v HTML: top- nebo md:top- , což je… mindfucking. Co se mi na Tailwindu nelíbí? Kromě jediné věci, té první v následujícím seznamu, asi nic. Související CSS utility CSS utility a komponenty Utility v Bootstrapu Tachyons v NejŘemeslníci.cz Zbytek je spíše o nevýhodách pro určitou skupinu lidí, vycházejících ze zcela jiného pojetí frameworku než na jaké jsme zvyklí např. u Bootstrapu. Některé názvy utilit úplně nekorespondují s vlastnostmi v CSS a je tak nutné se učit nová pojmenování. Díky použití PostCSS a JavaScriptu bude kombinace s preprocesory jako Sass trošku skřípat. Pro úspěšnou práci s Tailwindem byste měli znát CSS, což např. u Bootstrapu tak moc neplatí. Zobecňování do komponent se neděje na úrovni CSS, takže kodérka či kodér musejí umět pracovat se šablonovacím jazykem. Kam dál? V článku jsem se pokusil o úvod pro nezasvěcené. Kam dál pokračovat? Záznam z mého webináře Atomické CSS a Tailwind, kde vše vysvětluji na živých ukázkách a vezme vám to necelou hodinu času. Pokud ještě nejste přesvědčeni o utilitách: Moje články: K čemu jsou dobré? a kombinování s komponentami. Adam Wathan: “Best practices” don’t actually work. Pokud se Tailwind chcete naučit na videích a máte dost času: kurz od Yablko nebo Tailwind from zero to production. Tailwind Play, pískoviště, kde je možné framework zkoušet a to včetně nastavení konfigurace. Zapomněl jsem na něco? Napište mi do komentářů nebo e-mailem o vašich zkušenostech s Tailwindem. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
08.09.2021 06:00 Mnozí z vás se zúčastnili historicky první konference Frontendisti.cz, která proběhla na konci května. Přináším obsah v podobě záznamů a taky přicházím s vlastním subjektivním pohledem jakožto člena organizačního štábu. Páteční organizační schůzka #FrontKon. Bude to velké. Větší než jsem předpokládal. pic.twitter.com/wvaKtIV5tw— Martin Michálek May 15, 2021 Konference se myslím povedla. Přinesla 16 přednášek pro více než 600 účastníků a zdá se, že se nám vcelku i vydařil hlavní formální záměr – i přes téměř celodenní online program udržet vaši pozornost a do konference zamíchat trochu „lidštiny” a pocitu sounáležitosti komunity. Záznamy přednášek Nyní jsou už pro všechny k dispozici kompletní záznamy přednášek i diskuzí. Z obsahu vybírám pár kousků, hodných vaší zvýšené pozornosti: Ondřej Polesný: Vite + diskuze Riki Fridrich: ESLint jako pán + diskuze Tereza Vaňková: Den juniorní frontendistky + diskuze Radek Pavlíček: Přístupnost + diskuze Borek Bernard: Pokročilá práce s Next.js + diskuze Ale víte vy co? Podívejte se na všechny. Na YouTube kanále Frontendistů najdete dva playlisty, jeden pro přednášky, druhý pro diskuzní session ke každé přednášce. Ideální program na prázdniny, co myslíte? 20 000 židů pod mořem: Herci v době pandemie Do programu se nám povedlo dostat také skeč natočenou na míru konferenci od tohoto známého divadelního spolku. Jak dopadnou herci hledající práci na pozici frontendisty? Subjektivní shrnutí spoluorganizátora Bylo to náročné, ale stálo to za to. Online podoba má své limity, ale soudě podle vašich ohlasů, ale také podle statistik sledování z platformy Hopin, vás to vydrželo bavit opravdu dlouho. Předtočené přednášky a limitovaná délka Přednášky jsme podle obsahu kvůli udržení pozornosti limitovali na maximální čas 20, 10 a 5 minut a všechny byly předtočené, abychom mohli s řečníky ladit obsah i formu. Toto se velmi osvědčilo a spolupráce se spíkry byla výborná. Lidé nás díky online formě sledovali z pohodlí domova, všemi možnými způsoby: A ako sledujete konferenciu @Frontendisti vy? #FrontKon pic.twitter.com/KXSxYD9dbH— Riki Fridrich May 29, 2021 Scénář a moderátoři Vytěžili jsme naše zkušenosti ze streamů a kolegové piplali scénář, který v kombinaci s osvědčenými moderátorskými dvojicemi doplnil vysoké tempo přednášek o lidský prvek. Podle ohlasů se moderátoři velmi líbili i vám. Diskuzní sessions Nejsilnější část programu vznikla jakoby mimochodem, opět z touhy zatraktivnit online podobu a přidat prvek interakce. Diskuzní session po každé přednášce měly velmi dobrou sledovanost, lidé se zapojovali a původní téma se rozšířilo o celou řadu nových úhlů pohledu. Až se mi zdá, že jsme tímto vytvořili hlavní formu konference. Až se budete dívat na přednášky, nezapomeňte si ke každé pustit diskuzi. Diskuzi o Tailwind CSS jsme pojali jako další díl podcastu ze Vzhůru dolů: Odbočky jinam Věděli jsme, že musíme zapojit moment překvapení. Proto jsme, kromě střídání moderátorů, přednášek s diskusemi, pozvánkám do stánku partnerů přidali ještě tři „kulturní vložky“ — 20 tisíc židů pod mořem a fpohybu do směsi přidali humor a pohyb a DJ Alessio Busta zase hudbu během předělů. Co zlepšit příště? Tak jistě. Ke zlepšování jsme toho, s přispěním vaší zpětné vazby, našli hodně. Víme, že některé přednášky neměly ideální zvuk; že odejít na diskuzi po přednášce znamenalo obětovat další přednášku v programu; že jsme pro setkávání lidí málo vytěžili funkce Hopinu jako je networking a kuchyňka… A že by bylo nejlepší se prostě potkat naživo. To otevírá téma dalšího ročníku. Ten za á udělat chceme a za bé jej chceme udělat jako běžnou nebo alespoň hybridní konferenci. To otevírá důležité téma – potřebujeme totiž vaši pomoc. Ohlasy Hezké shrnutí hned po konferenci připravil Jan Polzer na Maxiorel.cz: Celkově se akce zcela jistě podařila. Přidám ještě pochvalu za vlastní znělku a animaci s logem konference v předělech. Další ohlas je od Dawe design: Na samotný závěr bychom rádi poděkovali organizátorům akce, a to především za to, jak perfektně zvládli organizaci, sestavili celý harmonogram a také za to, že v průběhu konference nebyl jediný technický problém. Další ohlasy najdete na Twitteru pod hashtagem #FrontKon. Dnešní #frontkon na jedničku. Skvělá organizace, dobrá atmosféra a velký balík nových znalostí. Díky @Frontendisti! #react #frontendShrnutí z naší přednášky najdete brzo na https://t.co/d2183oK6jd. pic.twitter.com/xA1jYs2hDt— HeurekaDevs May 29, 2021 Co dál a jak nám můžete pomoci? FrontKon znamenal pro komunitu Frontendistů a celý organizační štáb velký skok vpřed. Vidíme spoustu dalších možností, ale potřebujeme se personálně trochu rozšířit. Aktuálně hledáme dva lidi nebo jednoho se dvěma superschopnostmi: Člověka, který by nám pomohl s organizací konference a průběžného celoročního chodu komunity. Člověka, který by nám pomohl se správou sociálních sítí. Obě role si spolek může dovolit odměňovat penězi a jde o práci na jednotky hodin měsíčně, která se v prvém případě může v měsících před konferencí zvrtnout na desítky hodin. Více informací vám rád sdělím na e-mailu martin.michalek@frontendisti.cz. Pokud se chcete zapojit do dalších streamů jako přednášející, je možné přihlásit přednášku. Poděkování Díky všem přednášejícím a organizátorům, partnerům či podporovatelům. Čas na závěrečné titulky! Na závěr jednou odkazy na záznamy: přednášky & diskuzní session.
08.09.2021 06:00 Logické porovnávací funkce jsou součástí čtvrté verze specifikace CSS Values and Units Module, podporují je všechny moderní prohlížeče a ještě k tomu jsou užitečné. Umožňují porovnat dvě a více hodnoty: Funkce Význam min Vrací nejmenší hodnotu z argumentů oddělených čárkou. Např. min . max Vrací největší hodnotu z argumentů oddělených čárkou. Např. max . clamp Vrací prostřední hodnotu, pokud není menší než první a větší než třetí. Např. clamp . Tyto nové funkce v CSS nám prakticky umožní lépe řídit velikost prvků, dodržovat správné mezery mezi prvky nebo třeba implementovat plynulou typografii. Funkce min a max U funkcí min a max to je jednoduché – zadáte seznam argumentů a prohlížeč určí, která z hodnot je nejmenší nebo největší. Související CSS funkce minmax Příklad: .box-1 Šířka .box-1 bude určena tím menším přepočtem na pixely z obou hodnot. V dostatečně širokém rodičovském prvku to bude většinou 100px, ale v opravdu malých šířkách se může použít 50%, protože vypočtená hodnota bude menší než 100px. Zkusme si představit totéž pro funkci max : .box-2 Šířka .box-1 bude určena větší pixelovou hodnotou vypočtenou z obou atributů. Jak asi sami tušíte, většinou se použije hodnota 50% a jen na opravdu malých rozlišeních. V tomto případě jde o obdobu zápisu width:50%; min-width:100px;. V ukázce to sami uvidíte. Funkce clamp Jeden z významů slova „clamp“ v angličtině je „svěrka“, což je vcelku přesné. První a poslední atribut v závorce totiž udává minimální a maximální sevření, prostřední je ideální hodnota: .box-3 Vysvětlíme to ještě detailně: Prostřední argument je ideální hodnota. .box-3 bude široký 50%, pokud nevstoupí v platnost svěrka z jedné nebo druhé strany. První argument je minimální hodnota. Prvek nesmí být méně široký než 100px. Třetí argument je maximální hodnota. .box-3 nebude nikdy širší než 300px. Je to srozumitelné? Ještě si to případně zkuste na CodePenu. Ve specifikaci se uvádí, že funkce clamp je zapsatelná pomocí min a max jako max ). Nevím, jak vám, ale mě to moc při snaze pochopit funkci clamp nepomohlo. Krása univerzálnosti Pojďme to ale rozebrat dále, protože to nakonec bude užitečné. V našem případě by zápis vypadal takto: .box-3 Následuje adekvátní zápis, který pomůže i nám, kterým zanořené matematické funkce působí pupínky. Jak už jste vy zkušenější jistě pochopili, zápis výše je stejný jako bychom napsali následující deklaraci: .box-3 Konstrukce s min-width a max-width v CSS máme a mnozí známe už od pravěkých dob. Tak proč zavádět nový zápis v podobě funkcí min , max a clamp ? Za prvé je nový zápis stručnější a možná přehlednější. Podstatnější je ale druhý důvod - je univerzální. Je použití není limitované na délkové vlastnosti width a height. K tomu se ještě musíme vrátit. Demo: vizualizace výběru funkce První ukázku jsem si vypůjčil od Uny Kravets. Je to krásná vizualizace, ve které je vidět aktuální šířka rodiče, elementu a pak také argument funkce min , který je v dané šířce obrazovky aktivní. Jen si zkuste hýbat se šířkou viewportu: Demo: ideální šířka textu V demonstraci u článku o porovnávacích funkcích na web.dev má autorka tento pěkný příklad. Ve známé knize The Elements of Typographic Style od Roberta Bringhursta se píše, že „za uspokojivou délku řádku pro jednosloupcovou stránku s patkovým písmem se obecně považuje 45 až 75 znaků“. Toto můžeme krásně definovat právě pomocí porovnávací funkce: .card Prvek .card bude zabírat 50% šířky rodiče, ale nikdy méně než 45ch a více než 75ch. Jednotka ch obsahuje šířku znaku 0, což se považuje za průměrnou šířku znaku. Demo: Plynulá typografie V další ukázce Uny Kravets konečně odbočíme mimo vlastnosti určující šířku elementu. Budeme nastavovat maximální a minimální velikost textu a tím plně využijeme nových porovnávacích funkcí. h1 Jednotkou vw nastavujeme velikost písma na pět procent šířky viewportu. Abychom se přitom vyhnuli extrémně malým a extrémně velkým hodnotám font-size, pomáháme se funkcí clamp . K tomu asi není potřeba nic dalšího dodat. Snad jen to, že autorka nás nabádá, abychom si přitom dávali pozor na přístupnost. Omezení velikosti textu pomocí funkcí max nebo clamp může být proti pravidlům přístupnosti WCAG, která doporučují, aby si uživatelé mohli písmo libovolně zvětšovat sami. Co byste ještě měli vědět o porovnávacích funkcích? Funkce min , max a clamp mají v DNA pár důležitých vlastností, které se mi jinam nevešly, ale přesto si zaslouží vaši pozornost: Funkce můžete skládat a zanořovat. Např. font-size:max ,2rem). Není ale garantováno, že vás z toho nerozbolí hlava. Stejně jako funkce calc umožňují porovnávací funkce používat matematické výrazy se sčítáním , odčítáním , násobením a dělením jako součástí hodnot. Zápis font-size:max ,2rem) je tudíž stejný jako font-size:max . Co když ve funkci clamp prohodíte minimum a maximum? Vyhraje minimum. Například zápis clamp bude vracet hodnotu 100px, čímž překročí maximum uvedené ve třetím argumentu. Podpora v prohlížečích Je to dobré, funkce min , max a clamp podporují všechny moderní prohlížeče. V Internet Exploreru vám tyto funkce neprojdou. Můžete to ověřit na CanIUse: caniuse.com/css-math-functions Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
08.09.2021 06:00 Naučte se o prázdninách něco nového. Představujeme nový cenový model pro naše hodinová vzdělávací videa. Prázdninové ceny videí Pro červenec a srpen jsme výrazně snížili ceny hodinových video-kurzů, kterých na webu máme už 21. Nově je také u jednotlivých kurzů vidět, jakou část spektra znalostí dané problematiky video pokrývá a co byste měli znát. Prohlédnout nabídku videí Nové video V prodeji je už také sestříhaný záznam z webináře o CSS gridu, o který byl velký zájem. V hodině a něco času jsem se pokusil pokrýt skoro vše, co by o gridu měli vědět ti z vás, kteří jej ještě v praxi pravidelně nevyužívají. Více o videu „CSS grid: mřížka v kostce“ Více videí výhodněji Nezapomeňte, že u našich videí vždy více znamená výhodněji. Hromadná objednávka videí se slevou 10 %. Objednávka všech videí se slevou 20 %. Časové předplatné pro firmy. Přejeme vám hezké prázdniny s novými vědomostmi.
