27.05.2022 07:00 Sledovací cookies jsou všude. Překvapilo mě, že i na menším webu není vlastně úplně jednoduché se jich zbavit. Asi víte, že od letoška mají weby povinnost si před ukládáním analytických „sušenek“ vyžádat souhlas uživatele. O cookies v roce 2022 jsem psal text, který průběžně aktualizuji. Zároveň se tam můžete dočíst, jak se můj postoj k problematice soukromí uživatelů na internetu za poslední měsíce změnil. Je to díky tomu, že jsem se věci začal více věnovat sám jako uživatel, ale také například díky kauzám Facebooku. Povedlo se mi web zbavit cookies třetích stran, a to dokonce i u Google Analytics. Jenže i přes to se zdá, že přítomnost Google Analytics souhlas uživatele pomocí cookie lišty vyžaduje tak či tak. První řešení: Google Search Console U hodně malých webů jako je třeba ten kamarádčin s nabídkou ubytování v Provence, jsem se rozhodl, že úplně odstraním komponenty třetí strany. V zásadě stačilo smazat kód Google Analytics a pár dalších. Jak získávám data o návštěvnosti? Stačí mi Google Search Console, které ukazují přístupy z ekosystému Googlu, včetně vyhledávání. Tyto typy webíků mívají velmi malou návštěvnost odjinud , takže to vůbec nevadí. Na Vzhůru dolů se ovšem bez nějaké základní analytiky neobejdu. Co když Google Analytics potřebuji? Proč potřebuji GA? Jednak se mi hodí znát hrubou čtenost článků a také zde prodávám knížky a videa, takže je to takový malý e-shop podporující mou publikační snahu. Zde není od věci například moci vyhodnocovat konverze. Google Analytics ale sbírají obrovské množství další dat, které nepotřebuji. Chtěl jsem tedy najít řešení bez ukládání cookies v prohlížeči, které by zachovalo alespoň základní data. Po delším pátrání se mi povedlo najít a ověřit tento kód pro verzi Universal Analytics, který cookies ani žádné jiné lokální úložiště nepotřebuje: Pokud vás to i tak zajímá, vysvětlím to více: Konfigurace client_storage zakazuje ukládat do cookies nebo jiného lokálního úložiště. anonymize_ip zapíná anonymizaci IP. Toto není pro potřeby cookie lišty nutné. Respektive, ehm, názory se různí… Pokud kód budete někam kopírovat nezapomeňte namísto UA-XXXXX-XX doplnit svůj identifikátor pro Google Analytics. Pozor, toto řešení je vhodné jen pro verzi Universal Analytics . Novější Google Analytics 4 sice do režimu „neukládej lokálně“ přepnete taky, ale bohužel pak v rozhraní nevidíte žádná data. Prý se ukládají, ale nezobrazují. Nepotřebujete pak cookie lištu? Teď vás zklamu. Cookies sice tohle řešení nevyžaduje, ale dále je možné uživatele přes data uložená v GA identifikovat: Řešení odesílá i data o uživateli, tj. s jeho nastavení prohlížeče etc. — Marek Lecián na Facebooku Takže i s tímto řešením cookie lištu potřebujete. Marek se ale zmínil, že možná nasdílí řešení, které ponechá možnost mít na menších webech dále GA a zároveň nemít cookie lištu. Moje řešení je navíc problematické v tom, že pochopitelně přijdete o část dat. O co jsem vypnutím client storage přišel? Pokud nemá analytický nástroj k dispozici cookie , nemůže samozřejmě navázat jednoho uživatele na návštěvy různých URL. Přijdete tak o délku trvání session , bounce rate , page views na jednoho uživatele . Dále budou všichni uživatelé bráni jako noví, ve zdrojích silně naroste „direct“… Hurá, narostla mi návštěvnost. Nebo ne? Srovnání měření s cookies a bez nich v Google Analytics. Bohužel zmizelo i počítání konverzí, což se trochu divím. Jde přece jen o zasílání událostí… Tohle mi zatím hlava nebere a budu to dál řešit. Google Analytics se tak stanou jednoduchým počítadlem návštěv webu . Dobře ale vidím návštěvy jednotlivých stránek a další data. Pro potřeby menšího webu, který něco vydělává, to je tedy díky ztrátě konverzí na hraně použitelnosti. Pro cokoliv většího a profesionálnějšího toto samozřejmě nebude dobrá cesta. Alternativní řešení pro analytiku Během svého pátrání po „cookieless Google Analytics" jsem narazil na řadu zdrojů. Nejvíc se mi líbilo řešení Helgeho Kleina, který v GA vypne lokální uložiště a klienta si identifikuje na straně serveru. To je fajn, pokud nechcet cookies, ale identifikace uživatele je opět možná: …cookie se jen vyměnila za IP uživatele . Což je z mého pohledu ještě horší než ukládat cookies. — Marek Lecián na Facebooku Jaké další alternativy jsou možné? Jiné měřiče jako Plausible, Fathom, Matomo, Simple Analytics… Než se pro ně nadchnete, prosím ověřte si, zda opravdu neidentifikují uživatele, ať už pomocí cookie nebo fingerprintingem. Do budoucna bude jistě zajímavá server-side analytika nebo pokročilá analýzy serverových logů. Audit komponent třetích stran Na Vzhůru dolů jsem ale komponent třetích stran používal daleko více než jen Google Analytics. Jakýkoliv obsah tahaný z cizích domén může ukládat sledovací cookies, takže člověk musí být obezřetný. Jak jsem postupoval? V prvé řadě jsem si udělal seznam všech třetích stran. Už ten mě vlastně svou délkou překvapil: Cast Cloudinary Codepen Disqus Facebook Twitter Vimeo YouTube Dále jsem si udělal analýzu vkládaných cookies. Pro oddělení špatných od dobrých cookies jsem použil nástroje cookieserve.com a cookiebot.com, ale neobešel jsem se bez poctivého koukání do DevTools prohlížeče nebo procházení „Cookie Policy“ poskytovatelů komponent. DevTools. Hlavní pracovní nástroj sušenkového detektiva. Připomínám, že cílem bylo obejít se bez cookie lišty, takže jsem komponenty rozdělil do několika kategorií a podle toho s nimi naložil. Komponenty, které musejí pryč Zde jsou tři nejzlobivější služby, které jsem nakonec bez náhrady odstranil. Disqus Služba, která pod každý článek vkládá komentáře. Dříve poměrně užitečná, později se z toho stávalo stále větší peklo díky přibývajícím reklamám , a to i přes fakt, že jde o placený produkt. Přínos pro Vzhůru dolů nebyl malý, takže jsem komponentu nechával žít. Říká se, že patří Číňanům, ale podle všeho to pravda není. Pohled na ukládané cookies a do jejich cookie policy mě ale přesvědčil o tom, že Disqus půjde pryč. Ukládají toho hodně a předávají to spouště firem. To nechci. Komentáře jsem v tuhle chvíli odstranil úplně. Facebook Tuhle firmu vnímám jako vedoucího jezdce v pelotonu zneužívačů soukromí lidí. Kdysi jsem jim platil nějaké drobné za kampaně podporující naše kurzy a videa, ale od dob provalení Facebook Papers jsem se rozhodl, že tam sice zůstanu přítomný, ale peníze té firmě platit nebudu. Analytiku nepotřebuji a šmírovací pixel od Facebooku jsem tedy ze Vzhůru dolů odstranil. YouTube Embedy ukládají a šmírují a to i v případě „nocookie“ domény, která sice neukládá cookies, ale do local storage, což je to z pohledu zákona totéž. YouTube jsem z článků úplně odstranil spolu s dalším vkládaným obsahem ze sociálních sítí. Je možné to nahradit obrázkem s odkazem. Já si zatím vystačil s pouhým odkazem na sociální síť. Firmy v téhle kategorii mají leccos společné. Celkově špatné renomé v oblasti soukromí, podivnou cookie policy a nemožnost dohledat cokoliv kolem omezení sledování ve vývojářské dokumentaci. Komponenty nastavená jako „do not track“ Další kategorii embedů bylo možné je ponechat, protože umožňují nastavit režim bez sledování. Poskytovatelé zařazení v této kategorii projevili alespoň snahu. Vimeo Pro vkládání videí do stránek používám placený tarif, takže mě překvapilo, že do prohlížečů ukládají nemalé množství cookies. Umožňují ale zakázat analytické cookies pomocí přidání parametru dnt=1. Viz například: Trochu bolestivé je, že člověk pak přijde o všechny statistiky zobrazení videí. Je podivné, že úplně o všechny. Viz Google Analytics, které bez cookie zobrazí alespoň nějaká data o zobrazení stránek. Zatím jsem to vyhodnotil, tak že statistiky o videích nutně nepotřebuji, ale je možné, že mi to dlouho nevydrží. Twitter Sociální síť plná tweetů umožňuje zrušit sledování dvěma způsoby. První je atribut data-dnt v kódu embedu: Druhá je meta značka v HTML: Snaha byla, že ano. Zatím jsem ale neověřil, zda to funguje, protože jsem se rozhodl vkládaný obsah odstranit úplně. Pro jistotu. Ale je pravda, že Twitteru v tomto věřím výrazně více než například Facebooku. Asi tak o parník. Poskytovatelé, kteří jsou v pořádku Tohle je nejlepší skupina. Patří do ní poskytovatelé vkládaných komponent, kteří pro poskytování služby nepotřebují ukládat cookie a tedy sledovat uživatele. Cloudinary – původně mě vcelku vyděsili, protože v návaznosti na jejich doménu jsem u Vzhůru dolů viděl řadu uložených cookies, včetně analytických. Ale tyto cookies dostanou jen přihlášení uživatelé, tedy ti, kteří Cloudinary využívají na svých webech. Čtenáři webu už ale mají prohlížeč čistý jako studánku. Cast – poskytovatel přehrávače pro podcast, je v pohodě. Neukládá žádné sušenky. Codepen – poskytovatel vkládaných ukázek, se také zdá v pořádku a jiné než nutné cookies neukládá. Pojďme to shrnout V tabulce následuje katovna – seznam komponent i s mým subjektivním hodnocením. Služba Hodnocení Poznámka Cloudinary ★★★ bez cookies CodePen ★★★ jen funkční cookies Cast ★★★ bez cookies Twitter ★★☆ umožní „do not track“ Vimeo ★☆☆ umožní „do not track“, ale přijdete o měření Google Analytics ★☆☆ bez identifikace uživatele to nejde YouTube ☆☆☆ sleduje tak či tak Disqus ☆☆☆ sleduje Facebook ☆☆☆ sleduje jak divý Tuhle analýzu jsem dělal hlavně pro Vzhůru dolů, což je zčásti volnočasový projekt. Problematikou soukromí se nezabývám a nejsem na ni expert, takže si to vše ověřte u svých vývojářů a advokátů. Neberte to jako návod, jak postupovat u větších a komerčních projektů. Spíše jako pomocníka pro jiné „hobbíky“ a ty, kteří usilují o provozování webu bez ukládání sledovacích cookies. Berte ten text také jako zprávu o stavu soukromí na internetu, o tom co stojí za vlnou vášní kolem cookie lišty. Česko bylo asi jednou z posledních zemí EU, které povinnost cookie lišty zavedlo. Přesto mám pocit, že ani zahraniční poskytovatelé zatím většinou webařům příliš vstříc nevycházejí. Možnost „do not track“ je vzácná, dokumentace chybí a analytické nástroje na tuhle situaci zatím vůbec nejsou připraveny. Jsme na začátku cesty. Ale vidím to tak, že prakticky každý web může pro ochranu soukromí svých uživatelů už teď něco udělat, pokud chce. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
25.05.2022 21:45 Když si prolistujete historii Vzhůru dolů, asi nebude potřeba zdůrazňovat, že WebExpo je pro mě srdeční záležitost. Letošní ročník je pro mě však velmi speciální. Alespoň trochu jsem participoval skoro na každém ročníku, během 10. - 12. června 2022 bude ale můj rukopis znát více než obvykle. Věřím, že WebExpo 2022 bude speciální pro celou českou frontendovou komunitu. Hned vám řeknu proč. Spolupráce komunity Frontendisti.cz a WebExpo Po loňském online FrontKonu jsme letos chtěli uspořádat živou konferenci komunity frontendistek a frontendistů. Pracovali jsme ve štábu s různými variantami, ale nakonec přijali nabídku Šárky Štrossové, aby naše konference byla součástí WebExpa. Řeknu vám, proč si myslím, že to je pro české a slovenské frontendisty dobrá zpráva. V prvé řadě: konference bude, to samo o sobě není zlé. :) Za druhé: organizačně bude akce obstarána profi týmem WebExpa a to na úžasném místě, v kině Lucerna v centru Prahy. No a v neposlední řadě: cílem spolku Frontendisti.cz je nejen komunitu vzdělávat, ale také propojovat. WebExpo je pro tyto účely ideální. Jednak je prostředí konference výborné pro networking a jednak přijede řada lidí ze zahraničí, ale také řada designérů, marketérů, webových manažerů… WebExpo má letos samá frontendová lákadla V tu chvíli se prostě centrum Prahy stane místem pro popovídání s někým, kdo věci vidí jinak a uvažuje jinak. Místem pro vzájemnou inspiraci. Výsledkem naší spolupráce je sobotní část programu, která má název Collab with Frontendisti.cz. Z programu, který jsme pečlivě sestavovali ze spousty přihlášených přednášek a na základě zkušeností s FrontKonem, vybírám následující oblasti: JS frameworky: React 18 Features od Břeti Profta a Terezy Vaňkové nebo Remix Run od Martina Macháčka . JavaScript: Promises Rikiho Fridricha a Railway Oriented Typescript Robina Pokorného. CSS a HTML: Cascade Layers, které představí Ondřej Žára a HTML can do that? Tomáše Pustelníka . Rychlost webu zastupuje Michal Matuška a jeho optimalizace Web Vitals pomocí webfontů. Svět CMS: JAMstack - Ondřej Polesný a State of CMS - Honza Sládek . Nestačí to? Mrkám na účastníky FrontKontu, kteří vědí že na místě vás 11. června ještě čeká několik překvapení. Vstupné na naši část programu je výrazně nižší než na celou konferenci. Nyní stojí 125 €. Doufám, že se vám náš program bude líbit. Ale zvažte také koupi lístku na celou konferenci. Další program WebExpo Pokud jde o program mimo sekci frontendistů, asi nejvíc mě zaujala jedna přednáška a jedna diskuze: Simple Machine Learning For Web Developers: From Theory To Practice O strojovém učení bych se strašně rád dozvěděl více, ale vždycky to na mě bylo trošku „heavy“. Vyslal jsem dotaz autorovi přednášky a odpověď mě nalákala: …pro nezkušené bude k dispozici několik živých, online hostovaných ukázek, např. rozpoznávání ručně psaných písmen nebo detekce objektů na fotografii. Ty fungují bez jakéhokoli backendu, jen v prohlížeči, takže diváci mohou k těmto ukázkám přistupovat ze svých mobilních zařízení a hrát si s nimi, aby pochopili možnosti neuronových sítí na straně frontendu. Tuhle přednášku tedy nemůžu minout. Roundtable Discussion: How To Find Time For Technical Improvements Problém, který řešíme při konzultacích k rychlosti webu snad u většiny klientů. Jak na to všechno najít u vývojářů čas, když jsou tlačení do přidávání nových vlastností produktu? Jsem zvědavý, s čím přijde tato diskuze. Pavel Kalandra mi napsal tento první tip z Mews: Když připravujeme workload na nějaký čas dopředu, plánujeme produktovou roadmapu zvlášť od technické roadmapy. Takže máme garantované určité procento času, kde si pak tech lead sám určí, co je pro něho největší priorita. I tuto páteční diskuzi tedy přidávám do programu. A co další lákadla WebExpa? Když se podíváme na frontend a okolí, je toho hodně. Shrnu to do odrážek: Vitaly Friedman o designu složitých rozhraní. Prabashwara Seneviratne o vývoji her pomocí HTML. Tom Krcha o produktovém řízení, např. pro Adobe XD. Michal Sänger o GraphQL na velkých projektech. Runa Sandvik o technologiích, které podporují svobodu slova . Jan Toman a jeho Data-Informed Design Systems. Podívejte se také na workshopy – o frontendu, UX, přístupnosti, ale také například bezpečnosti. No a nemohou chybět parties a program pro děti, na který se těší i naši kluci. Jako vždy i letos můžete využít 15 % slevu na konferenční vstupenku. Kód je vzhurudolu. Ahoj 10. - 12. června na WebExpu!
20.05.2022 10:00 Pojďme už lišty nechat lištami a zamyslet se nad důvody, proč vlastně my webaři máme řešit soukromí uživatelů. Chtějí to uživatelé nebo se jen EU zbláznila? Zkusme přijít na to, jak asi bude vypadat soukromí na webu z pohledu tvůrce webů za pár let. Kdy přijde norma ePrivacy a co to vlastně je? Zakáže nám EU po pomazánkovém másle i Google Analytics? Přejeme vám příjemný poslech. Podcast MP3 ke stažení My webaři si vždycky nějak poradíme. Zvládli jsem GDPR, teď i cookie lišty. Přesto je pro nás téma soukromí uživatelů stále plné otazníků. Aktuální spory EU s americkými korporacemi ohledně používání Google Analytics nebo Google Fonts, výhružky Facebooku, že může opustit evropský trh to ukazují. Do toho vstupují různé postoje různých advokátů. Situace ohledně soukromí se prostě pro běžného webaře stále více komplikuje. V budoucnu leccos může řešit a zjednodušit norma ePrivacy, opět od EU, ale nyní je, alespoň podle Martina Kopty, řada na technologických gigantech, zejména výrobcích prohlížečů. Přes to všechno jsou zde slibné signály od českého Úřadu pro ochranu osobních údajů, který podle Petry Dolejšové sice začne s kontrolami, ale nebude řešit malé ryby a i u velkých bude podstatné, aby ukázali snahu situaci řešit. Takže nervozita je, hlavně u menších webů, možná zbytečná a situace nám dává možnost se ještě chvíli v klidu učit chápat problematiku a třeba nevyžadovat ze soukromí uživatelů něco, co nakonec nepotřebujeme. Hosté Petra Dolejšová Petra je advokátka na volné noze a zabývá se právem v marketingu, e-commerce, GDPR a médii. Říká o sobě, že boří mýty o nudných právnících a že z cookie lišt už jí krapet píská v uchu. Twitter, LinkedIn, petradolejsova.cz Martin Kopta Martin je jeden z nejzkušenějších českých UXáků. Nyní Product Manager v Tipsportu. Board member v Asociaci UX. Budoucí webaře učí na FIS VŠE v Praze. Twitter, LinkedIn O čem mluvíme? Proč potřebujeme řešit soukromí na webu? Chtějí to vlastně uživatelé? Načítání dat o provozu jako senzor v prohlížečích, který můžeme povolit. Je to o hodných a zlých firmách nebo o možnosti zakázat. Zbytečná démonizace cookies a svobodná vůle uživatele. Odkud jdeme a kam směřujeme? GDPR, cookie lišta, ePrivacy Poněkud otravná forma cookie lišty Někdy možná přehnaně opatrný přístup advokátů ePrivacy a budoucnost soukromí v EU. Kdy stav doženou tech giganti? Kauza Google Fonts a Google Analytics. O co jde v boji EU s korporáty z USA? Alternativy ke Google Analytics. Postoj Úřadu pro ochranu osobních údajů. Snaha se prý cení. Bude možné řešení bez právníků pro malé ryby? Prý stačí zdravý selský rozum. Co se budeme muset naučit my, webaři? Dále na Vzhůru dolů Jak jsem web zbavoval šmírovacích cookies Cookie lišta GDPR Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Pište nám na e-mail podcast@vzhurudolu.cz.
19.05.2022 01:00 Google na každoroční konferenci pro vývojáře mnohé oznámil a leccos ukázal. Akci jako celek nesleduji, ale během ní a po ní si ze záznamů a ohlasů na socsítích vyzobávám to, co mě nejvíc zajímá – frontend, a tedy HTML, CSS, performance a občas trochu JavaScript. Mám pocit, že letos to bylo docela velké. A hlavně se jedna podstatná věc změnila – prohlížeče si méně konkurují a více spolupracují. Alespoň z pohledu webového vývojáře. Proč na Vzhůru dolů píšu zrovna o letošním ročníku? Letos jsem se rozhodl, že se o ty novinky musím podělit i s vámi, čtenáři Vzhůru dolů. Jednak zde vnímám dluh, protože jsem se téhle konferenci zde ještě přímo nevěnoval. Ale ten bezprostřední impulz k sepsání byl jiný. Nejspíš patřím mezi nejstarší frontendisty v Česku. Nás, starochy, spojuje obvykle jedna věc – povyk kolem nových technologií a kolem nových úžasných možností prohlížečů nás nechává relativně chladnými. Už jsme to zažili mnohokrát a to také u technologií, které se prostě neujaly. Zdá se mi ovšem, že Google I/O 2022 vcelku slušně vyhajpoval i relativně klidného Michálka. Novinek, zejména kolem CSS, je strašně moc a navíc bych řekl, že mnoho z nich může být onen pověstný „game-changer“. Vezměme třeba Container Queries, selektor „rodiče“ :has nebo Cascade Layers . Už jen tato trojice pravděpodobně výrazně změní způsob, jak píšeme styly, pričemž zdaleka nejde o osamocené novinky v CSS. Když jsem pátral po příčinách implementace tolika novinek a zároveň v tolika prohlížečích najednou, musel jsem skončit u Rachel Andrew. Tolik novinek a podpora v prohlížečích k tomu. Díky Compat 2021 a Interop 2022! Vývojáři prohlížečů totiž prakticky poprvé v historii spolupracují, aby vyřešili nekompatibility v podpoře webových technologiích. Loni byla výstupem iniciativa Compat 2021, která pomohla vyřešit nepříjemné rozdíly v implementaci gridu a flexboxu – a například také přidat použitelnost vlastnosti gap ve flexboxu. Letošní iniciativa Interop 2022 má za úkol sladit priority ve vývoji a je domluveno, že prohlížeče co nejdříve naimplementují tyto vlastnosti: Color spaces & CSS color functions - pro míchání barev známé ze Sassu, color-contrast - pro automatický výběr správně kontrastní barvy) Jednotky pro viewport Scrollování Subgrid CSS Containment Už se naopak povedlo naimplementovat následující: Cascade layers accent-color bfcache Vlastnost size-adjust Je toho více a vypadá to opravdu zajímavě. Podstatné je, že skupina lidí sdružená v této iniciativě stanovuje prioritizaci vývoje technologií i na základě průzkumů mezi vývojáři , což je myslím docela silný důvod se takových dotazníkových šetření zúčastnit. Průběžný vývoj můžete sledovat na webu Interop 2022 Dashboard. Mimochodem, aktuálně tam skóring vede Safari, což je už několikátý signál o velkých změnách ve vedení vývoje tohoto zaostávajícího prohlížeče. Abych to shrnul – vývoj specifikací a jejich implementací v prohlížečích byl překotný po celou dobu zhruba poslední dekády. Změnilo se to, že výrobci prohlížečů synchronizují priority v implementaci. My vývojáři z toho budeme profitovat tak, že důležité novinky uvidíme v krátké době ve všech moderních prohlížečích. Co mě na Google I/O dále zaujalo? Tohle měl být stručný článek, takže si toho hodně budu muset nechat pro sebe. Nebo víte co? Ty další zajímavosti zde uvedu alespoň na jedné malé číslované hromádce. K rychlosti: Video, jak optimalizovat metriku LCP. Nová metrika Interaction to Next Paint , která asi jednou nahradí FID. Video o jejím vzniku. Rozšířená realita v brýlích v kombinaci s překladačem umožňuje lidem povídat si spolu. Twitter. Chrome na Androidu umožní při platbách kartou generovat jednorázové číslo. Twitter. Page Transitions umožní animovat přechody mezi stránkami, tohle je fakt cool! Video. Google pak důležité novinky shrnuje v článku. Co zaujalo vás? Napište na Twitter nebo Facebook Vzhůru dolů. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
13.05.2022 12:31 Milé čtenářky, milí čtenáři, dnes vydávám svou novou knihu pojmenovanou „CSS: moderní layout“. Pusťte se s její pomocí do moderních metod, které vám ušetří spoustu času a poskytnou nové možnosti jak tvořit design webů. Z původně zamýšleného e-booku o CSS gridu se po dvou a půl letech práce stal komplexní průvodce všemi systémy tvorby layoutu ve stylech – gridem, flexboxem, zarovnávání boxů a vícesloupcovým rozvržením. To vše představuji na 440 stranách tištěné knihy. V knize je 170 ukázek v CodePenech a 11 příkladů nakódovaných v podobě tutoriálu. Vše doplňují desítky ilustrací, které v barevném tisku vypadají výborně a mám z nich obzvlášť radost. Mou ambicí bylo vytvořit skutečně komplexní příručku, kterou doufám ocení i zkušenější mezi vámi. Knihu „CSS: moderní layout“ si můžete objednat hned teď: Kniha s e-bookem stojí 899 Kč s DPH a poštovným. Tištěnou knihu můžete mít do několika pracovních dní za 699 Kč. E-book v PDF, EPUB a MOBI lze mít hned za 399 Kč. Těším se, co na ni řeknete! Zdraví vás Martin Michálek
13.05.2022 12:31 Po čase máme znovu vypsané termíny dvou půldenních školení rychlosti webu. Proběhnou 15. a 17. února online a tímto vás na ně zvu. Na školeních vám ukážeme tipy a triky, které používáme v praxi při práci pro klienty PageSpeed.cz – od velkých jako je Livesport, po menší e-shopy jako Čisté dřevo nebo Smarty.cz. Google Page Experience bude od letoška ovlivňovat také umístění desktopových výsledků vyhledávání, takže téma rychlosti je dobré neopomíjet. První den: měření, procesy a načítání Spolu se podíváme na celý proces optimalizace. Připravil jsem jej pro vás do obrázku: Vezmeme si zkušební web a projdeme celým procesem, kdy na konci vypadnou příležitosti k úpravám, které jsou efektivní a zároveň mají velký dopad. Bavit se budeme hlavně o procesu, metrikách a rychlosti načítání. Základy se zdržovat nebudeme, ty si zájemci dostudují ve videu, které všichni účastníci dostanou v ceně školení. Tento půlden je určený vývojářům, ale zvládnutelný je také technicky vybavenějšími marketéry. → Více o školení Rychlost webu 1: načítání. Druhý den: fungován prohlížeče a rychlost v něm Michal Matuška na mě naváže a půjde do hloubky testování. Stránka se vám může načíst rychle, ale JavaScript nebo třeba CSS animace uživatelský zážitek kazí. Michal s vámi bude trávit hodně času v Chrome DevTools, konkrétně záložce Performance, ale i dalších nástrojích v DevTools, o kterých možná ani nevíte. Půlden s Michalem je určený vývojářům, od mírně pokročilých až po ty pokročilejší. Na obou školení jsme připravení zabývat se různými devstacky, od klasiky s PHP až po moderní frameworky jako je React, Next.js… → Více o školení Rychlost webu 2: prohlížeč. Obě školení v jednom balíčku Pokud vás zajímají oba půldny, neváhejte si objednat balíček Rychlost webu. Ušetříte 490 Kč. Účastníci v ceně školení dostanou záznam. Kapacita je limitovaná a zatím nemáme v plánu vyhlásit další termíny.
12.05.2022 03:31 Jako každý leden jsem i letos podlehl nutkání ohlédnout se za technickými novinkami roku 2021, zavzpomínat, uronit slzu pro Internet Explorer… mám prostě sentimentální náladu. Je to ostatně tradice, takhle jsem přemítal už nad roky 2020, 2019, 2018, 2017, 2016 a 2015. Letos se navíc chci zamyslet, co se mi na Vzhůru dolů povedlo a kam to celé má směřovat – nastavit si nějaké plány do roku 2022. Chci se totiž pořádně zasmát, až budu své plány za rok vyhodnocovat. State of CSS 2021 Ankety mají své mouchy, ale State of CSS se vyplatí sledovat. V tomto ročníku se jí zúčastnilo na 9 tisíc vývojářek a vývojářů z celého světa. Na výsledcích je toho zajímavého docela dost, ale nejstručnější je shrnutí: Nejčastěji nově používaná funkce: CSS Comparison Functions Nejvyšší spokojenost: PostCSS Nejvyšší zájem o naučení: CSS Modules Umístění CSS Modules pro mě bylo záhadou, protože v podobě komponenty pro zpracování CSS do Webpacku jde o poměrně starou věc. Vysvětlení nabídl Aleš Roubíček na Discordu Frontendisti.cz: Zájem může budit tento proposal, který nabízí nativní podporu v platformě. Jde o zmatení, kdy si lidé pod jedním názvem představují dvě různé věci. Vlnu zájmu ale nejspíš vyvolala možnost nativní podpory. „State of rychlost“ 2021 Škoda, že nemáme podobnou anketu zaměřenou na optimalizaci rychlosti webu, moje nejoblíbenější téma. Budeme se tím pádem muset spokojit s mým vysoce subjektivním výběrem. Kvalita stránky aneb Page Experience v Google Search Console. Report, který od loňska mnohým dělá vrásky. Tohle jsou novinky roku 2021, které dle mého oborem rychlosti nejvíce zahýbaly: Začátek hodnocení webů podle Google Page Experience pro mobily, od letoška i pro počítače. CSS vlastnosti size-adjust pro typografii a aspect-ratio nebo image-set pro obrázky. Lighthouse verze 9 a nové PageSpeed Insights. Podpora obrázkového formátu WebP ve všech moderních prohlížečích. Kolega Michal Matuška mě ještě upozornil na méně viditelné, ale do budoucna zásadní pohyby v technologiích – vylepšování ladění rychlosti v DevTools, containment v CSS nebo nativní lazyloading ve všech prohlížečích a úprava jeho „boundries“. Nezapomněli jsme na něco? O rychlosti jsem toho ale loni napsal více, nejen pro Vzhůru dolů, ale také na blog PageSpeed.cz. Nejčtenější články na Vzhůru dolů Jednou ročně se dívám, co vás zajímá, abych věděl o čem zhruba psát. Ať nepíšu jen tak, do větru. And the winner is… CSS grid. Ale až po flexboxu. Výsledky pro rok 2021 nejsou překvapivé. Z obsahu, který jsem nově vytvořil nebo významně aktualizoval, je to tento: Příručky pro flexbox a grid . Obrázkový formát Webp . Pozornost upoutal také významně aktualizovaný checklist nebo text o cookie liště pro rok 2022. Z těch, které jsem neaktualizoval vládnou základy CSS a HTML: CSS jednotky, Media Queries, metodika BEM a text o tlačítkách . Nejposlouchanější díly podcastu Některé díly podcastu nám vystřelily z běžných čísel poslechovosti. Diskuze o Tailwind CSS má ke dnešku kolem 5 300 stažení. Díl o výběrových řízeních s Janem Řezáčem šplhá k číslu 4 900. Z ostatních vás zaujalo hlavně povídání o microfrontends, které má zatím 2 700 stažení. Co je na Vzhůru dolů od loňska nového? Pracuji na přerodu do online světa. Udělali jsme několik online školení, dále je nabízíme firmám, ale podstatná jsou pro mě do budoucna hlavně videa. Aktuálně si můžete za rozumnou cenu koupit kolem 22 hodinových záznamů z webinářů, upravených pro potřebu sledování z pohodlí práce nebo domova. Všechny najednou dostanete s 20 % slevou. Ve zkušebním režimu je k dispozici předplatné pro firmy. Zároveň jsme nově naprogramovali uživatelské účty, které umožní další rozvoj výše uvedeného. Tohle je i pro mě nové a tak velmi vítám každou zpětnou vazbu. Plány na rok 2022 „Pokud chcete Boha rozesmát, řekněte mu o svých plánech“ říká se. Nějaké menší plány si ale vždycky dělám a není důvod, abych si je nechával pro sebe. V nejhorším se s pánem Bohem můžeme na konci roku zasmát i my, že? Kniha o CSS layoutech – aktuálně jsem ve fázi připomínek k obsahu a během několika týdnů až měsíců vám o ní řeknu víc. Sledujte moje sociální sítě. Další rozvoj videí – až dokončím knížku, mám v plánu mocně přidávat nový obsah nejen k placeným videím, ale také na YouTube kanál. Předplatné chci časem rozšířit i mimo firmy. Dále budu rozvíjet i půldenní nebo denní živá školení – pro veřejnost online, pro firmy dle domluvy i prezenčně. Mimo Vzhůru dolů budu samozřejmě rozvíjet svoj hlavní obživu – konzultace k rychlosti webu a komunitu Frontendisti.cz. Ale to už je na jiné články. Přeji vám vydařený rok 2022! Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
06.05.2022 16:15 Tímto textem v příručce doplňuji mezery, které mám na Vzhůru dolů v oblasti pokrytí základů CSS. Při rešerši jsem si všiml, že takto komplexně se selektory snad žádný český text nezabývá. Tož tady jeden máte. Jasně, cílím zde především na začátečníky, ale myslím, že osvěžit si tohle téma neuškodí ani pokročilým. Pojďme se nejprve podívat na tabulkové shrnutí toho nejdůležitějšího, co v článku najdete. Nejdůležitější selektory Selektory vybírají určitou skupinu prvků v DOMu a dovolí ji stylovat. Selektor Zápis Třída .class Prvek tag Identifikátor #id Atribut Všechno * Nejdůležitější kombinátory Kombinátory spojují jednoduché selektory do složitějších skupin a umožňují, aby stylování platilo jen za určitých podmínek. Kombinátor Zápis Potomek A B Dítě A > B Následujícího sourozence A + B Pozdějšího sourozence A ~ B V článku zcela úmyslně neuvádím pseudotřídy, které mezi selektory v CSS bezpochyby patří. Ale pořád to tady chci udržet v rozsahu článku, nikoliv knížky. Text o pseudotřídách bude následovat. Selektory prvků Tyto selektory vybírají prvky z DOMu podle názvu HTML značky. tag – selektor typu Obsahuje název prvku HTML a představuje instanci tohoto typu prvku ve stromu dokumentu. Příklady: h1 – představuje všechny elementy v dokumentu. li span – vybírá všechny prvky zanořené v prvku . * – univerzální selektor Speciální varianta selektoru typu, který reprezentuje prvek libovolného typu. Příklady: * – představuje všechny elementy v dokumentu. body * .box – představuje prvek s třídou .box, který je v zanoření druhé úrovně v prvku . Selektory atributů Selektory, které vybírají prvky podle atributů – jejich existence, shody s jejich celou hodnotou nebo s částí hodnoty. .className – selektor třídy Jeden z nejznámějších a asi rovnou nejužitečnější selektor, který vybírá prvky podle třídy. Představuje prvky patřící do třídy identifikované pomocí atributu class v HTML. Příklad: … … … Selektor .a vybere jak , tak všechny . Další příklady: .heading – všechny prvky, které mají atribut class nastavený na heading. h1.heading – všechny prvky , které mají třídu heading. h1.heading.heading-large – všechny prvky , které mají třídu heading a zároveň heading-large. Možná jste si všimli, že zápis .heading je ekvivalentní zápisu vlnovkového selektoru atributu . Na selektorech třídy je dnes postaveno skoro celé stylování webů, vzpomeňme například metodiky OOCSS, BEM, ale i novější utility CSS. #id – selektor ID Selektor ID představuje instanci prvku s identifikátorem, který odpovídá hodnotě v atributu id. Příklad: … … … Selektor .a#first vybere jen . V HTML dokumentech je možné, aby jednomu ID selektoru odpovídalo více prvků, je to tak v pořádku z pohledu CSS selektoru, nikoliv ale samozřejmě z pohledu HTML sémantiky nebo přístupnosti. – selektory přítomnosti a hodnoty atributů Vybíráme, zda na prvku HTML existuje atribut nebo detekujeme jeho hodnotu. Toto jsou selektory, které hledají existenci atributu nebo jeho konkrétní hodnotu na HTML prvku. Typy selektorů atributů: Selektor Vysvětlení h1 Prvek , který má atribut title s jakoukoliv hodnotou. h1 Atributový selektor přesného obsahu. Prvek , který má atribut title v hodnotě přesně Ahoj. h1 Vlnovkový atributový selektor shody jedné hodnoty. Prvek , u něhož atribut title alespoň v jedné hodnotě obsahuje řetězec Ahoj. Hodnoty pro potřeby selektory oddělují mezerami, takže selektor splňuje. h1 Selektor shody prefixu. Toto je zvláštní. Vybraná hodnota musí být buď přesně Ahoj, nebo začínat Ahoj bezprostředně následovaná znakem -. Dává to smysl asi jen v případě výběru jazykových kódů. Např. odpovídá řetězcům en i en-US. – selektory podřetězců atributů Zvolíme prvky podle shody s částí hodnoty atributu. Jde o selektory pro hledání podřetězců v hodnotě atributu. Typy atributových selektorů podřetězců: Selektor Vysvětlení h1 Atributový selektor se stříškou reprezentuje prvek s atributem title, jehož hodnota začíná Ahoj. h1 Atributový selektor s dolarem reprezentuje prvek s atributem title, jehož hodnota končí Ahoj. h1 Atributový selektor s hvězdičkou reprezentuje prvek s atributem title, jehož hodnota obsahuje Ahoj. Ve všech případech selektorů podřetězců platí, že pokud by hodnota byla prázdný řetězec, pak selektor nepředstavuje nic. Prostě se selektorem daný prvek nevybere. – přepínač case-sensitivity V tomto novém přepínači můžeme zapnout nebo vypnout citlivost na rozlišování malých a velkých písmen. Standardně totiž selektory pro HTML nerozlišují malá nebo velká písmena. Tímto můžeme citlivost na rozdíl mezi nimi zapnout. Identifikátor s před uzavírací závorkou značí „sensitive“, tedy citlivost na rozlišování velkých a malých písmen. Naopak identifikátor i znamená „insensitive“ tedy nerozlišování. V HTML pro vás bude užitečný jen ten první. Příklad: h1 – vybere prvky s atributem title v hodnotě Ahoj, ale nikoliv už ahoj. Mimochodem, i tenhle relativně nový přepínač podporují všechny moderní prohlížeče. Viz CanIUse.com. Kombinátory Kombinátory jsou speciální znaky, které umožňují kombinovat jednoduché selektory do složitějších a rozšiřovat platnost selektoru jen za splnění podmínek, jako je například vnoření prvku do určitého rodiče v DOMu. Kombinátor potomka Kombinátor s bílým znakem odděluje dva selektory a vybírá potomka , který je zanořený do určitého prvku A. Selektor ve tvaru A B představuje prvek B, který je libovolným potomkem nějakého předka prvku A. Příklad: … … … Selektor .box .a vybere prvek a také všechny prvky . Další příklady: .heading span – všechny prvky , které jsou potomkem prvků s třídou heading. h1 em – všechny prvky , které jsou potomkem prvku . h1 * em – všechny prvky , které jsou potomkem ve druhém a vyšším zanoření uvnitř prvku . A > B – kombinátor dítěte Kombinátor se znaménkem větší než vybírá prvek B, který je přímým potomkem prvku A. Tedy zatímco A B vybere B v jakékoliv úrovni zanoření uvnitř A, pak A > B vybírá jen ty B, které jsou přímými potomky A, tedy jeho „dětmi“. Vezměme příklad: … … … Selektor .box > .a vybere jen prvek . Další příklady: .heading > span – všechny prvky , které jsou přímým potomkem prvků s třídou heading. h1 > em – všechny prvky , které jsou přímým potomkem prvku . .box ol > li p – všechny prvky , které jsou potomkem , přičemž musí být přímým potomkem a potomkem libovolné úrovně v prvku s třídou .box. Mezera kolem kombinátoru dítěte je volitelná. h1 > em a h1>em je totožné. Pro lepší čitelnost zápisu se upřednostňuje zápis s mezerami. A + B – kombinátor vedlejšího sourozence Kombinátor s plus vybírá prvek B, který je vedlejším sourozencem A. Prvky reprezentované oběma selektory mají ve stromu dokumentu stejného rodiče a prvek reprezentovaný prvním bezprostředně předchází prvku reprezentovanému druhým . Máme zde příklad: … … … Selektor .a + p vybere jen prvek . Další příklady: h1 + p – všechny prvky , které následují po . h1.heading + h2 – všechny prvky , které následují po prvku s třídou heading. Mezery jsou opět volitelné. h1 + p je totéž jako h1+p, ale upřednostňujte tu první. A ~ B – kombinátor pozdějšího sourozence Kombinátor s vlnovkou vybírá prvek B, který je vedlejším sourozencem A, ale zároveň jej přímo nenásleduje. Oba prvky mají stejného rodiče. Rozdíl oproti A + B je u vlnovkového kombinátoru v tom, že prvky nutně nemusí být vedle sebe. Zpět k příkladu: … … … Selektor .a ~ p vybere prvky a . Další příklady: h1 ~ p – všechny prvky , které mají stejného rodiče jako . h1.heading ~ h2 – všechny prvky , které mají stejného rodiče jako s třídou heading. Mezery v selektoru jsou opět volitelné. Související „Problémy“ CSS Dědičnost Kaskáda a specificita Podpora v prohlížečích Všechny CSS selektory, které zde zmiňuji, jsou plně podporované ve všech prohlížečích, včetně MSIE. Jedinou výjimkou je přepínač citlivosti na velikost písmen , který už v tomto starém prohlížeči nerozchodíte. Je zde ale jedna skupina selektorů, zmíněná ve specifikaci Selectors Level 4, která podporu nemá. Selektory sloupců A || B – sloupcový kombinátor. Vybírá prvek A patřící ke sloupci B. Viz např. v tabulkách col.selected || td. Bylo by užitečné takový selektor mít, ale zatím to žádný prohlížeč nepodporuje, stejně jako podobně zaměřené pseudotřídy :nth-col a :nth-last-col . CanIUse.com Specifikace V pokračování tohoto textu se zaměřím na pseudotřídy v CSS, které jsou vlastně jen trošku zvláštní selektory. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
