Rozšírené hľadanie
Pondelok 25. November 2024 |
meniny má Katarína
Jak jsem web zbavoval šmírovacích cookies

25.01.2022 19:45 Sledovací cookies jsou všude. Překvapilo mě, že i na menším webu není vlastně úplně jednoduché se jich zbavit. Nakonec se mi to povedlo a nejspíš se tedy obejdu úplně bez cookie lišty. 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. Rozhodl jsem se, že se na Vzhůru dolů pokusím odstranit všechny jiné než funkční cookies tak, abych uživatelům nemusel klást překážky v podobě cookie lišty. Ale taky proto, abych z toho webu udělal alespoň symbolický ostrůvek, kde se nešmíruje. 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 odstranit Google Analytics, u kterých je za běžných okolností nutné žádat o svolení s ukládáním cookies. 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í. Co když Google Analytics potřebuji? Na Vzhůru dolů ovšem nějakou základní analytiku potřebuji. 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: Trošku to vysvětlím: 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í. 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 troch 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íbí řešení Helgeho Kleina, který v GA vypne lokální uložiště a klienta si identifikuje na straně serveru: ga('create', 'YOUR-GA-TRACKING-CODE', { 'storage': 'none', 'clientId': clientIDHashed //

Lighthouse ve verzi 9: přepracované UI a User Flows

25.01.2022 19:45 Nástroj pro audit webu Lighthouse vyšel v deváté verzi. Musím tomu věnovat alespoň stručnou poznámku, protože přináší minimálně dvě zajímavé novinky. No a taky je to už tradice. Na Vzhůru dolů se tomuhle nástroji věnuji pravidelně. Psal jsem zápisky například k verzi 8 nebo 6. Nový Lighthouse 9 v Chrome. V devátém vydání přinesli autoři nástroje z Googlu zejména razantně předělané rozhraní výsledků testu, včetně těch na PageSpeed Insights, ale hlavně User Flows. User Flows, průchod uživatele službou Velkou nevýhodou Lighthouse byla možnost testovat jen první načtení stránky. Ano, určité výjimky existovaly – například při testování v Chrome bylo možné nastavit, zda vytvořit audit s plnou nebo prázdnou keší prohlížeče. User Flows umožňují skriptované testování. Lighthouse tak můžete pouštět v rámci jednoho testu vícekrát – ať už jde o načtení různých stránek nebo spouštění na základě interakcí na stránce. Nově tak budete moci testovat například tyto scénáře: Průchod uživatele webem – testem si nasimulujete procházení uživatele například nákupním procesem na e-shopu. Interakce uživatele se stránkou – Lighthouse nemusíte pouštět jen při úvodním načtení, ale také například po kliknutí na element nebo scrollování. Posbíráte metriky a vzniklé problémy. Fixnete to. Pustíte test znova. To se mi líbí. Dosud bylo možné skriptovat testy rychlosti například pomocí proprietárního rozhraní skriptů ve WebpageTestu. Ale přítomnost v Lighthouse je důležitá, jde o nejpoužívanější nástroj pro testování webů. Navíc to zde udělali pomocí už poměrně standardizovaného API pro ovládání Chrome zvaného Puppeteer. Autoři Chrome nyní ve verzi Canary testují možnost si uživatelský proces naklikat pomocí nástroje Recorder. I tohle vypadá zajímavě. Hlavně pro ty, kteří raději klikají než píší javascriptový kód. Nové rozhraní výsledku testu Další velkou změnou je vylepšené rozhraní výsledků testu. Ukažme si to na příkladu testu oblasti Performance pro úvodní stránku Vzhůru dolů: Lighthouse User Flows. Můžete tady vidět hned několik novinek: Celkové skóre je trochu menší a vedle je nově screenshot hotové stránky. To abyste lépe viděli. Viděli, jak vypadala stránka při dokončení testu. To se hodí, protože Lighthouse často testuje web ve stavu, v jakém jej vy nevidíte – například s cookie lištou. Jednotlivé metriky, ze kterých se skládá celkové skóre , jsou nyní větší. I to hodnotím kladně – zaměří to pozornost lidí na správné místo, tedy nikoliv LPS, ale konkrétní ukazatele, které je potřeba optimalizovat. V každém testu, včetně toho na PageSpeed Insights, je nyní lépe vidět nastavení testu - na jakém zařízení a odkud proběhl. To je důležité pro pochopení rozdílů mezi Lighthouse testy, které mohou být i dost velké. Všechny novinky se rovnou projevily také v PageSpeed Insights, asi nejpopulárnějším nástroji pro jednorázový test rychlosti webu. Nově je najdete na adrese: pagespeed.web.dev PageSpeed Insights dávají nově také větší důraz na metriky od uživatelů z Chrome UX Reportu. To je bezpochyby chvályhodné, protože to je nejlepší způsob, jak se zdarma k číslům o rychlosti dostat. Na druhou stranu – metriky posbírané od uživatelů jsou k dispozici jen pro více navštěvované weby, takže nové pojetí výsledků bude řadu lidí mást. V oblasti „web performance”, rychlosti webu, jsou laici obecně dost v pasti mezi srozumitelností podávaných informací a jejich přesností. Ale to je na jiné povídání a jiný článek. Výsledky testů z Lighthouse 9 už také uvidíte v našem testeru rychlosti na PageSpeed.cz. Všechny novinky z Lighthouse 9 si můžete přečíst v changelogu. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .

Lighthouse: audit webu od Google

25.01.2022 19:45 Lighthouse je velmi důležitý nástroj. Chcete vědět proč? Google jeho prostřednictvím totiž webařům radí jak weby technicky zlepšit. Je to nástroj pro analýzu technické kvality webu, která důležitá jak pro návštěvníky, tak pro umístění webu právě ve výsledích vyhledávání Googlu, například v oblasti Page Experience Obsah: Proč jej používat? Co umí analyzovat Jak jej používat Test rychlosti User Flows Příkazová řádka Pravidelné spouštění Používám jej hlavně pro analýzu rychlosti načítání, ale o webu umí podat daleko barevnější obrázek. Pokrývá přístupnost, SEO a další oblasti. Podívejte se na video „Lighthouse: Základní představení“. YouTube: youtu.be/2VIJU7NNKYw Velmi doporučuji pomocí Lighthouse testovat vaše weby a webové aplikace. A nejlépe to dělat pravidelně a automaticky. → Související novinka: V listopadu 2021 vyšel Lighthouse 9. Proč jej používat? Lighthouse vám pomůže najít problémy na úrovni designu a frontendového kódu, které nějakým způsobem škodí nebo mohou škodit přísunu uživatelů na web a jeho použitelnosti. Za výhody Lighthouse považuji především: Snadnou dostupnost komukoliv. Rychlé výstupy. Rozumné rady. Ale bavme se i o nevýhodách: Dává spíše základní přehled a bez pokročilejších nástrojů se v případě vážnějších auditů neobejdeme. Psal jsem například o nástrojích pro měření rychlosti. Výsledky auditu rychlosti webu jsou obvykle ovlivněné aktuálním výkonem počítače, na kterém jej spouštíme. Dělá jen syntetickou analýzu v jednom umělém uživatelském kontextu. Zdaleka nám tedy nedá obrázek o celé šíři problémů na naší uživatelské základně. Data o rychlosti od uživatelů nám částečně poskytne například jiný nástroj od Google – PageSpeed Insights. I s historií v čase pak tester PageSpeed.cz. Co Lighthouse umí analyzovat? Je toho hodně. Ukázkový report pro Vzhůru dolů. Vidíte celkové skóre a výsledky pro první oblast – performance neboli rychlost. Oblasti webařského pachtění, které Lighthouse pokrývá: Performance – rychlost načítání a výkon při vykreslování. Pro mě velmi důležité. Progressive Web App – jak se web drží doporučení pro progresivní webové aplikace. Best Practices – guláš osvědčených postupů mimo uvedené škatulky, například k bezpečnosti nebo upozornění na použití zastaralých technologií . Accessibility – přístupnost webu. SEO – technická připravenost webu na indexování vyhledavači. Jak jej používat? Ligthouse je balíček pro Node.js, proto způsobů jeho použití existuje fakt hodně: Chrome DevTools – stačí otevřít developerské nástroje Chrome a jít do záložky „Audits“. Online verze – web.dev/measure/. V dalších nástrojích – výstupy „majáku“ jsou dostupné z testů aplikací jako WebpageTest.org, SpeedCurve a dalších. K dispozici je seznam integrací. Příkazová řádka – právě jí vděčí za tolik možností použití: github.com/GoogleChrome/lighthouse. Test rychlosti Lighthouse se ve většině případu použití spouští na vašem počítači a dělá se jen jeden test, takže se výsledky testů mohou lišit podle momentálního vytížení. Hlavně v oblasti Performance. Test rychlosti Lighthouse v Google Chrome. V testech jsou na výběr dvě zařízení: Desktop – váš Chrome v aktuálním nastavení rozlišení, rychlosti připojení atd. Mobile – ve výchozím nastavení jde o „Emulated Nexus 5X“ se simulovaným zpomalením procesoru a rychlosti připojení, které odpovídá zhruba „3G fast“ z nastavení WebpageTest.org . Zajímavá možnost je v nastavení zpomalení – Throttling: Simulated – rychlejší test, navíc s lépe porovnatelnými výsledky. Znamená to, že se web otestuje na vašem aktuálním připojení i výkonu procesoru. Pak se čísla přepočítají, jak by asi vypadaly na slabším stroji. Tohle je myslím lepší používat. Applied – přesnější, ale pomalý test. Připojení a procesor se uměle zpomalí a pak teprve Lighthouse operuje. Jde o původní metodu. No a poslední možnost – Clear storage – před testy smaže obsah lokálních úložišť, aby Lighthouse dokázal zachytit prožitek úplně nového uživatele. Podívejte se na video „Lighthouse: Test rychlosti webu“. YouTube: youtu.be/zkbzYJ7xNKw User Flows, průchody uživatele službou V Lighthouse 9 autoři přidali možnost testovat nejen úvodní načtení, ale také průchod webem nebo webovou aplikací. Jmenuje se to User Flows. Lighthouse User Flows. K dispozici je to také v Chrome, koncem roku 2021 jen ve verzi Canary. Zde pod záložkou Recorder. Příkazová řádka Jak už víte, Lighthouse je možné nainstalovat na příkazovou řádku: npm install -g lighthouse Otestovat konkrétní web je pak snadné: lighthouse https://www.vzhurudolu.cz --view Tohle jen otevře Chrome nejprve pro otestování a následně pro zobrazení reportu . Další příkaz pak uloží výstupy do formátu JSON: lighthouse https://www.vzhurudolu.cz --output json --output-path vzhurudolu-report.json Související Nástroje pro analýzu rychlosti PageSpeed Insights Lighthouse Performance Score Videokurz o Lighthouse Zpracování JSONu pak je možné dělat automaticky. Toho je možné využít při pravidelném spouštění. Pravidelné spouštění Optimální varianta je samozřejmě pravidelné spouštění Ligthouse, tak abyste na auditování nemuseli myslet při nasazování nových verzí webů a aplikací. Kromě vlastního řešení postaveného na příkazové řádce tady máme několik hotových možností: Integrace do lokální automatizace – Gulpu ). Řešení pomocí CI – například pomocí Lighthouse CI. Hotové vizualizační nástroje jako SpeedCurve, Calibre, Treo a jim podobné. Shrnutí Používejte Lighthouse. Určitě! Pouštějte jej pravidelně a nejlépe automaticky. Držte se jeho doporučení, jsou velice rozumná. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .

O MicroFrontends s Břéťou Proftem

25.01.2022 19:45 Břéťa Proft z Pipedrive s námi sdílel zkušenosti s mikrofrontendy, takže jsme opět pokryli jedno téma, které na nás vyskakovalo v předchozích epizodách. Zde očekávejte úvod do microfrontends, ale také porovnání zkušenosti Břéťovy a Robinovy firmy. Bavíme se nejen o technikáliích, ale taky o způsobu organizace firem, což je u nasazování této technologie důležitý faktor. Přejeme vám příjemný poslech. Podcast MP3 ke stažení Host: Břetislav Proft Břéťa je javascriptový vývojář v Pipedrive a organizátor pražských meetupů Frontendisti.cz. Hledejte ho na viasors.com nebo LinkedIn. O čem mluvíme? Robinův tip: Atila a jeho texty o Next.js Martinův tip: State of CSS Hlavní téma: Microfrontends a Břéťa Proft Co jsou mikrofrontendy? Historie: zalando/tailor a bigpipe Microfrontends vs microservices Organizace firmy: Spotify Tribes, Launchpad/Missions v Pipedrive a uspořádání v Klarně Proč se nepoužívají různé frameworky? Společné a samostatné části Společné CSS v mikrofrontendech, component libraries Problém různých verzí frameworků Pro koho jsou mikrofrontendy vhodné a pro koho ne? Jak do microfrontends dostat nové lidi? Architektura komunikace v Pipedrive API pro komunikaci balíčků Co je to Tribe? GraphQL a microfrontends Silné a slabé stránky microfrontends a problém řízení Nalaďte nás: Spotify — iTunes — Google Podcasty — TuneIn — RSS podcastů.

Vlastnost aspect-ratio v CSS: Poměr stran snadno a elegantně

25.01.2022 19:45 Od září 2021 můžeme v prohlížečích používat vlastnost aspect-ratio, která v CSS zajistí držení poměru stran pro element ve stránce. Je to úplně jednoduché, jako hodnotu vlastnosti stačí uvést poměr stran: .box Jde o techniku, která umožňuje vytvářet kontejnery pro asynchronní obsah a zabránit tak nechtěnému překreslování obsahu stránky, který měří Kumulativní posun layoutu . Metod pro zajištění poměru stran v CSS máme vcelku hodně, přičemž zajištění plochy pro obrázky už příliš řešit nemusíme, to za nás rozlouskly prohlížeče, a my jen musíme dodat atributy width a height. Pokud jde o další typy obsahu – iframe s obsahem třetí strany, videa, vkládané SVG dokumenty, asychronně vykreslený obsah od grafů až po výsledky ajaxových dotazů – asi nejznámější stávající metodou je padding trik. No a vlastnost aspect-ratio je tady, aby nahradila právě trik s paddingem. Připravil jsem demo s obrázkem, ve kterém to snad půjde dobře vidět: V HTML je .box rodičem obrázku: Povšimněte si atributů width a height, které drží poměr stran samotného obrázku. Pro vykreslení obrázku využívám skvělou službou Satyr.dev. Díky parametru delay má obrázek nastaveno zpoždění. Když na něj čekáme, prohlížeč by za normálních okolností vykreslil bílou plochu. My tam ale chceme ponechat barevný placeholder , aby bylo vidět, že na toto místo něco dorazí. K tomu nám poslouží prvek .box, který má nastavený poměr stran stejně jako obrázek – 4:3 – aspect-ratio: 4/3. Už chápete? Toto bylo úplně základní použití. V textu na web.dev, který sepsala Una Kravets jsou vidět další možnosti – například zajištění stejné velikosti prvků uvnitř CSS gridu. Podpůrná vlastnost object-fit Pokud by byl aspect-ratio člověk, do hospody by pravidelně chodil s vlastnostmiobject-fit a object-position. Chápu je totiž jako nerozlučnou trojka. Obrázek: Hodnoty vlastnosti object-fit. Ve stránce můžeme mít obrázky nebo videa, o kterých víme, že budou mít různý poměr stran. Díky kombinaci aspect-ratio s object-fit pak můžeme držet jednotný poměr stran a vnitřní prvky následně ořezat nebo nějak napozicovat. Možnosti vlastnosti object-fit jsou následující: Hodnota Jak se chová? fill Vyplní celou plochu. Klidně zdeformuje poměr stran obsahu, ale neořízne ho. contain Nevyplní vždy celou plochu. Obsah nezdeformuje, neořízne a zobrazí celý. scale-down Stejně jako contain, ale nikdy nezvětší obrázek nad přirozenou velikost. cover Vyplní celou plochu. Nenechá volné místo, nezdeformuje obsah, ořízne ho. none Drží původní velikost a poměr stran. Někdy ořízne, někdy nechá volné místo. Triky s attr a důležitost atributů width a height Funkce attr umožňuje do CSS deklarace na místo hodnoty vepsat obsah atributu z HTML prvku. Toho využívají prohlížeče při nastavování výchozího poměru stran. Prohlížeče přidaly aspect-ratio do svých výchozích stylů pro překvapivě hodně prvků a to nejen těch, do kterých se stahuje asynchronní obsah. Toto je například z výchozího stylopisu Firefoxu, alespoň podle MDN: img, input , video, embed, iframe, marquee, object, table Tabulka? marquee? Hmmm… Tady se někdo při nastavování výchozích poměrů stran vyřádil… Podpora Vlastnost aspect-ratio podporují všechny moderní prohlížeče: Chrome od verze 88. Firefox od verze 89 Safari od verze 15 A co Explorer? Hm… jděte si dělat legraci jinam. Více je na CanIUse.com. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .

Zveme vás na únorová školení rychlosti webu

11.01.2022 22:45 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.

Rok 2021: State of CSS, rychlost a to nejlepší ze Vzhůru dolů

06.01.2022 11:45 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: .