27.01.2024 00:15 Od ledna 2022 je i v Česku nutné od uživatelů žádat souhlas s ukládáním personalizačních a analytických cookies do jejich prohlížečů. Stačí když na webu máte základní analytiku, např. Google Analytics, a máte povinnost před uložením cookies žádat uživatele o souhlas pomocí takzvané cookie lišty. Pravděpodobně jste to už řešili, pravděpodobně to už máte vyřešené. Pokud spravujete velké weby, tím spíše. Pokud jste to to nechali až na nynější dobu, čtěte. Text budu spíše cílit na majitele menších webů nebo ty, kteří zatím neměli potřebu to řešit. Dole v textu odkazuji na všemožné zdroje, takže to můžete dostudovat. V textu základy řešit nebudu, spíše otevřu témata, která mě zaujala a jinde jsem je nenašel. Předem říkám, že se v téhle oblasti nepovažuji za odborníka – pokud se webařinou živíte, nasazení na weby konzultujte s advokáty , případně také experty na UX a marketing. Můj pohled je víceméně pohledem „hobbíka“, člověka, který spravuje pár webů, ale denodenní vývojařinou se neživí. Než se do toho pustíme, velmi rád bych zde nejprve ventiloval svůj celkový osobní dojem. Uživatelé platí soukromím za to, že my šetříme čas a peníze Ještě na podzim '21 jsem nechápal, proč bychom měli už i v Česku na všechny weby nasazovat cookie lištu. GDPR už máme vyřešené a od roku 2015 nějak i v Česku řešíme „EU cookies“. Vždyť přece stačí, že uživatele informujeme… Čím více jsem se do problematiky ponořoval, tím více dávám za pravdu zákonné úpravě, která platí od ledna. Jasně, forma je fakt nešťastná. Cookie lišta je zlo. Cookie lišta je zlo pro uživatele i provozovatele, takže se těším se na normu ePrivacy, která to přesune do nastavení prohlížeče. To soukromí ale fakt musíme řešit. Jenže jak? Nepoužívat a nešmírovat. Za analytické nástroje nechat platit toho, kdo data měří a nenechávat to na ceně uživatelského soukromí lidí, kteří ani nevědí co schvalují. – Honza ChemiX Černý na Twitteru Představte si situaci že přijdete do obchoďáku a u vchodu vám bez ptaní dají do kapsy krabičku, která bude ukládat vaši polohu – jaké obchody jste navštívili, co jste tam dělali. Dají vám ji s úsměvem a s tím, že příště ta data použijí pro zlepšení vašeho nákupního prožitku. A že je možné, že ta data někomu prodají. Pro vaše dobro. Líbilo by se vám to? Mně ne. Ale na webu je to úplně běžné: Přijdete, dostanete cookie od Google Analytics, která sleduje váš pohyb webem. Pokud je na webu vložené YouTube video, cookie se ukládá nejen pro úpravu obsahu a reklamy nejen na navštíveném webu, ale také na YouTube a také na jiných webech. Taková komentářová služba Disqus se s tím už vůbec nemaže. V Cookie Policy přiznává jen zlomek cookies, které reálně ukládá, a rovnou říká, že data vašich uživatelů posílá i dalším firmám. To všechno proto, že na webech mocně využíváme služby třetích stran. Zvykli jsme si na to. Šetří nám to jako webařům čas a peníze. Jenže nic jako komponenta třetí strany zdarma neexistuje. I ty placené mají daleko vyšší cenu než si myslíme. Za náš ušetřený čas a peníze platí uživatelé svým soukromím. Jejich data, informace o pohybu našim webem využíváme nejen my, ale i úplně cizí firmy. Někomu sledování nevadí. Ale vědět to předem je asi dobré, ne? Můj postoj je silně ovlivněný studiem třetích stran, které jsem dosud běžně používal zde na Vzhůru dolů a které pravděpodobně používáte taky – Google Analytics a vkládaný obsah od YouTube, Twitteru, Facebooku… Jejich přístup k soukromí je prostě o dost horší, než jsem si myslel. Takže – pojďme soukromí řešit. Pojďme jej řešit bez paniky a nadávání na zákon nebo EU. Pojďme vzít ty cookie lišty jako příležitost se něco naučit a zlepšit web jako celek. Jednou třeba lišty dáme pryč a zůstanou nám, doufám, weby, které více dbají na soukromí lidí. Neprodávají jejich duši, aniž by to jako návštěvníci věděli. Teď už se pustím do praktických rad, co s tím dělat na malém webu. Dávám sem svůj stav mysli. Nutné základy Nejprve pár textů a videí, které se vám mohou hodit při studiu základů z pohledu právního, marketingového nebo UX: Právní pohled: Lupa.cz, od Petry Dolejšové nebo Dostupného advokáta. Marketingový pohled: House of Řezáč. UX pohled: Ondřej Ilinčev. Můj pohled k rychlosti webu na PageSpeed.cz. Komplexní webinář organizovaný Pavlem Ungrem. Diskuze o cookies u Frontendistů. Které cookies jsou nově se souhlasem a jak zjistím, že je na webu mám? Tohle jste už asi četli stokrát, ale pro jistotu to opakuju. Pravděpodobně na webu používáte cookies nutné např. pro přihlášení nebo uložení nastavení jazyka . Touto kategorií se vůbec trápit nemusíte, dále je možné je bez souhlasu v podobě cookie lišty používat. Dejte si pozor na tyto typy cookies: reklamní analytické personalizační K těmto potřebujete od 1. ledna 2022 souhlas. Nástroje, které pomáhají odhalit, které cookies na webu potřebujete: CookieBot.com CookieServe.com Nejdříve dobrá zpráva – analyzovat těmito nástroje je jednoduché. A teď ta špatná. Ani na Vzhůru dolů, takže strukturou menším webu, mě to nenašlo zdaleka všechny cookies, které bych měl „řešit“. Navíc jde samozřejmě o statickou analýzu webu, takže např. komponenty načítané líně nebo na akci uživatele, to neodhalí. Prostě bez zkoumání uložených cookies ve vývojářských nástrojích prohlížečů a čtení „Cookie Policy“ dodavatelů třetích stran se asi neobejdete. Zákon praví… Z jaké změny v zákoně vlastně celý ten humbuk vychází? Každý, kdo hodlá používat nebo používá sítě elektronických komunikací k ukládání údajů nebo k získávání přístupu k údajům uloženým v koncových zařízeních účastníků nebo uživatelů, je povinen tyto účastníky nebo uživatele předem prokazatelně informovat o rozsahu a účelu jejich zpracování a je povinen nabídnout jim možnost takové zpracování odmítnout. Tato povinnost neplatí pro technické ukládání nebo přístup výhradně pro potřeby přenosu zprávy prostřednictvím sítě elektronických komunikací nebo je-li to nezbytné pro potřeby poskytování služby informační společnosti, která je výslovně vyžádána účastníkem nebo uživatelem. – Zákon o elektronických komunikacích To je vše. Složitě napsané, ale překvapivě krátké, že? Víte co, pojďme se tedy nejprve zkusit na to celé vykašlat. Není možné se na to vykašlat? Osobně vám to nedoporučuji. Cookie lišta je otrava. Ano, to je. Víte jaká je nejlepší cookie lišta? Žádná! – Z ohlasů na Twitteru U malinkých webů asi nemá smysl propadat panice, ale u větších jsou postihy za nedodržení zákona samozřejmě udělovány od úřadu ÚOOU. Advokáti říkají, že vás nejprve úředníci musejí vyzvat k nápravě, takže i kdyby na vás „vlítli“, máte čas to opravit. Pokuty by prý neměly být likvidační. Kontrolu provádí @UOOUCR, sankce dává samozřejmě podle uvážení, ale horní hranice je vždycky předpisem limitovaná, navíc nesmí být nepřiměřená a likvidační. – Petra Dolejšová na Twitteru Jen pro pořádek – je potřeba odlišit GDPR a nový odstaveček zákona týkajícího se cookie lišty. Píšu tady o tom druhém. Pokuty za porušování GDPR jsou myslím úplně jiná písnička. GDPR by už ale měli mít v pořádku všichni. A dávno. Lze nemít cookie lištu a zároveň dodržovat zákon? V prvé fázi jsem u všech svých webů přemýšlel nad tímto nejčistším řešením. U miniaturních webů je to realizovatelné například tím, že přestanete měřit analytikou, která nějak identifikuje uživatele. Nebo analytiku opustíte úplně a vystačíte si například s daty z Google Search Console. Pokud potřebujete jakékoliv běžně měření typu Google Analytics, cookie lištu musíte mít. Pokud do webu vkládáte jakoukoliv jinou komponent třetí strany , pak vysoce pravděpodobně cookie lištu musíte mít. Touto cestou se kdysi vydaly i velké weby jako Github. Když si ale ke dnešku prohlédnete cookies, které vám Github a jimi používané third-parties uloží na stránce tohoto oznámení, vůbec není jisté, zda byli schopní tu proklamovanou čistotu udržet. Takže – nezajímá vás návštěvnost a chování návštěvníků, nepotřebujete kód třetí strany? Lištu nepotřebujete. Jinak nejspíš ano. → Více popisuji v textu o zbavování webu cookies třetích stran. Lze mít Google Analytics bez ukládání cookies? Ano, Google Analytics můžeme zakázat ukládání do lokálních úložišť: 'client_storage': 'none', Ztratíte ale přehled o počtu shlédnutých stránek na jednu návštěvu a vše související. Navíc se nezbavíte povinnosti mít cookie lištu, protože je dále možné identifikovat uživatele na straně dat z analytiky. Celé řešení pro GA popisuji v textu o zbavování webu cookies. Taky je ale možné nepoužívat Google Analytics, že ano? Alternativy ke Google Analytics Popularitu teď nabírají alternativní nástroje jako je Matomo nebo Fathom a další. Z toho co jsem pochopil z komentářů analytiků, kterým věřím… Je to past. Tyhle nástroje často nepoužívají cookies, to je fajn, ale zároveň uživatele identifikují jinak, nejčastěji kombinací různých faktorů, takže fingerprintingem, což je z pohledu soukromí úplně to samé. Simple Analytics, další alternativu, údajně bez fingerprintingu, ale bez sledování uživatele napříč webem, doporučovali další lidé, jako např. Jan Smitka na Twitteru. Zdá se mi, že ani přes alternativní řešení ke GA cesta nevede. GA navíc mají velkou výhodu – jsou de facto průmyslovým standardem. Další možností je zaměřit se na server. Serverová analytika je věc, která má dle mého budoucnost, ale zatím nevidím snadné a přímočaré řešení. Co další komponenty třetích stran? Musím se přiznat, že právě tahle část analýzy, kterou jsem si dělal pro Vzhůru dolů a další menší webíky, mě přesvědčila, že soukromí na webu je fakt problém. A že dodavatelé komponent třetích stran dělají většinou vše proto, aby to problém zůstal. Pojďme si projít pár third-parties, které jsem zkoumal. Google Fonts: názory se různí. Nějakou personalizaci dělají, ale spíše na základě lokality. Ve FAQ píší, že „no cookies are sent“. Vladimír Smitka ale říká, že „Google fonty sbírají data o koncovém uživateli“ a tak je při přísném výkladu potřeba souhlas. Nebo si fonty stáhnout lokálně. Vložení obsahu z Twitteru: Ukládají cookies, personalizační i reklamní, tzn. souhlas by myslím standardně byl potřeba. Je to však možné vypnout a chránit soukromí uživatele, viz nápověda. Vložení videa z YouTube: Standardně souhlas potřebujete, ukládají reklamní cookies. Embedy lze servírovat z domény youtube-nocookie.com a cookies se neuloží dokud uživatel video nepustí. Tzn. pak není potřeba souhlas? Nevím. Vladimír Smitka píše, že ta cookieless doména je fejk. Facebook embed i Facebook pixel: Ukládají cookie jak diví a nikde jsem nenašel možnost to změnit. Komentáře Disqus: Ukládá cookies jak divý, v Cookie Policy přiznává jen část a ještě vesele prohlašuje komu všemu ty údaje cookies nepředává. A to je prosím placená služba! Zde budu muset při pročišťování webu od nepořádných služeb třetí strany začít. Můj celkový dojem? Pardon, ale asi budu blinkat… Takhle špatné jsem to nečekal. Čest výjimce, čest Twitteru. → Související: Jak jsem dělal analýzu cookies třetích stran. Hodně se mi líbí řešení, kdy si souhlas k vložení obsahu vkládaném třetími stranami vyžádáte až při najetí na tento obsah. Připravené je to např. v komponentě Iframe Manager. Iframe Manager. Chce opravdu přehrát tohle video? Počkejte… i za cenu šmírování? Celé moje vlákno k problematice third-parties je na Twitteru, pokud by vás to zajímalo doplněné o cenné názory dalších. Dobře, teď už vím, že s vysokou pravděpodobností budu i na Vzhůru dolů nějakou lištu potřebovat. Jak to ale implementovat? Řešení souhlasu s Google Tag Managerem Martin Kolář udělal o tomto jednoduchém řešení pěknou přednášku. YouTube: youtu.be/KW7lNaLfu9c Martin ukazuje řešení vhodné právě pro jednoduché weby a vlastní implementaci lišty. Veškeré komponenty třetích stran je ale nutné vložit právě přes Google Tag Managera: window.dataLayer = window.dataLayer || ; function gtag gtag ; V GTM se pak nastaví souhlas pro konkrétní kategorii v nastavení kontejneru. Více je v přednášce, ale upozorňuji, že to je opět vhodné spíše pro menší weby. Přes Google Tag Manager je pak možné i nastavit nesouhlas se vším, nechat přes nastavení GTM pak např. Google Analytics běžet v Consent Mode a uživatele netrápit cookie lištou. Řešení pro cookie lištu třetích stran Pro Vzhůru dolů jsem zvolil řešení cookie lišty pomocí Cloudflare Zaraz. Jde o komplexní řešení pro správu komponent třetích stran na vašem webu, včetně jednoduchého consent-managementu. Pokud už nyní máte web na Cloudflare, je to vcelku přímočaré. Ušetří vám to energii za řešení zobrazování samotné cookie lišty. Ale i tak potřebujete nějaké analytické znalosti, sám jsem se docela zapotil, abych to zprovoznil. Dále využiji možností získaných od kolegů: CookieConsent: Malý plugin i s ukázkovým kódem od Vladimíra Smitky. CookieConsent.com se jmenuje stejně, dělá to podobné věci, ale je to něco jiného. Complianz : Kolega Dan Střelec mi píše: „V základu je zdarma, nasazení pár hodin hodina práce . Pokud potřebujete ukládat souhlasy, je třeba placená verze . Větší řešení jsou například Cookiebot: V ČR velmi populární. Dan Střelec: „Neplacená verze je pouze do 100 stránek/web, od 500 stránek/web stojí €9/měsíc.“. Zajímavé srovnání řešení, hlavně pro weby běžící na WordPressu, připravili v eHub.cz. Větší weby využívají velmi robustní OneTrust , Didomi nebo Funding Choices od Google. Cookie lišta a rychlost webu Na blogu PageSpeed.cz jsem psal o trablech z pohledu rychlosti webu, které může nasazení cookie lišty způsobit. Svoje jsme si užili s OneTrust, Didomi i Google Funding Choices. Nicméně vždy jsme nalezli cestu k optimalizaci. Pravidlo číslo jedna? Načtěte tu lištu co nejdříve: Mezi vývojáři se rozšířil mýtus, že vykreslení obsahu typu cookie lišty se musí odložit co nejvíce to jde. Nejde přece o hlavní obsah stránky. Jde ale o jednu z velkých chyb, které můžete při implementaci lišt udělat. Co dál? Po počáteční negaci beru ale celou věc kolem cookies od roku 2022 za velkou příležitost brát oblast soukromí uživatelů našich webů daleko vážněji. Pokud potřebujete měřit uživatele i základní analytikou nebo si do webu vkládáte jakékoliv komponenty třetích stran, nezapomeňte dobře ošetřit souhlas uživatele pomocí cookie lišty. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
22.01.2024 20:30 V první části naší předvánoční živé diskuze v pražských kancelářích Productboardu jsme si povídali o rychlosti a výkonu JavaScriptu a pak o moderních způsobech vkládání CSS do JS, přičemž nemůžeme minout Tailwind. Našimi milými hosty byli Riki Fridrich, Libor Vaněk a Petr Glaser. Shodli jsme se na několika bodech, které zde míním. Ohledně performance: Problém performance je využívání klientského JavaScriptu na věci, kde není vůbec potřeba. Ačkoliv jsme si mnozí stále myslí, že SPA je cesta k lepší performance, data ukazují pravý opak. My vývojáři si musíme uvědomit, že sedíme u násobně rychlejších zařízení než lidé tam venku. Základ je začít performance rozumně měřit a řešit už během vývoje. Ohledně CSS : CSS in JS je nadužívaný koncept, vhodný zejména pro velké projekty. Problém většiny CSS in JS řešení je závislost na JavaScriptu a runtime zpracování stylů. Proto jsou zajímavé systémy, které dokáží generovat styly staticky, jako StyleX. U Tailwindu velmi zaleží na způsobu vaší práce – např. pro živý design a prototypování v prohlížeči je to skvělé. Podcast Celá epizoda na videu Hosté Riki Fridrich píše JavaScript ve firmě Outreach. Učí ostatní, jak psát Javascript. Přednáší na konferencích a setkáních. Většinou o Javascriptu. Riki je z Ládví. Web – Twitter – Github – LinkedIn Head of Front-End Development v CDN77, kde poskytují infrastrukturu pro globální internet. Fanoušek World Wide Web platformy a rozumného přístupu k web developmentu. Má rád všechny JS frameworky, ale ještě radši je podrobuje kritickému pohledu. Kdysi dělal meetupy Vue.js, dneska migruje většinu věcí z Nextu na SvelteKit. Ve volném čase dělá pro bono projekty, jako např. web a newsletter pro novináře Davida Klimeše a konzultuje architekturu a výkon webových aplikací. LinkedIn – Twitter Petr Glaser v rámci projektu Nauč mě IT pomáhá lidem získat dovednosti a znalosti vhodné pro práci v IT. Říká o sobě, že je vývojář zapálený pro technologie a vzdělávání. Zaměřuje se na performance, kterou vnímá jako součást UX a přístupnosti. I díky tomu si oblíbil framework Qwik, o kterém je řeč v podcastu. LinkedIn – Twitter O čem si povídáme? Představení hostů Navazujeme na diskuzi na FrontKonu Statistická vsuvka a všechna naše výročí První téma: performance Aktuální stav JS, SPA, zacyklení mezi serverem a klientem, MPA Jak z toho ven a nová metrika INP Velký rozdíl mezi našim zařízeními a těmi mězi lidmi tam venku Dotazy z publika Druhé téma: CSS a zápis CSS v JS Zase ten Tailwind Rikiho obhajoba sémantického webu Otázky: utility v Bootstrapu, správné přístupy u různých projektů StyleX a obecně statický export CSS Přepis celého dílu . Děkujeme za spolupráci Jiří Nečas, Productboard — Vladimír Příhoda, Productboard — Honza Michálek — Johana Kratochvílová, Signatura . Přejeme vám příjemný poslech! Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – RSS podcastů Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo kamkoliv jinam, hlavně, aby se to k nám dostalo.
14.01.2024 10:15 FrontKon 2023 byla první pořádná konference, do které jsme se v rámci komunity Frontendisti.cz pustili. Byl to mazec, bylo to velké a přes všechny nedostatky si troufám říct, že se to celé povedlo. Soudím teď podle feedbacku, který jsme dostali. Ale ještě zajímavější je pohled zevnitř, což je obsah tohto textu. Akci jsme organizovali prakticky ve čtyřech hlavních a několika dalších dobrovolných organizátorech. Tedy v malém počtu, částečně z nutnosti, částečně vlastní chybou. K tomu se ještě vrátím. Měl jsem na starosti hlavně program. Proto bych zde rád zanechal pár poznámek k tomu, jak nad problematikou programu komunitních konferencí uvažuji a co nového jsem zjistil. Abych to nějak zarámoval, dám sem pár citací z feedbacku, který přišel od účastníků, partnerů a od spolupracovníků: Velmi široké spektrum témat, věřím že si každý přišel na své. Bezva, tohle byl cíl. Bylo to hodně napresované, příště třeba nějaký volný čas pro vykonání potřeby a tak… Šmarjá, proto byly tak prázdné záchody… Lineup byl skvělej!! Oh, děkujeme a vyřídíme řečníkům. Chtělo by to alespoň 1/2 hodiny volna na oběd a na oddych. Počkat, vy na konferencích jíte…? Ale vážně – jak vidíte, různí lidé mají různé názory. Leccos bych příště udělal jinak, ale celkově vzato koncept vyšel. Teď ale pojďme na mé myšlenkové nastavení, které se nejspíš propíše i do dalších podobných akcí. Konference má mít názor Tohle je první předpoklad. Myslím si, že akce nemůže být beznázorová jak z pohledu obsah, tak z pohledu formy. Právě na tomhle selhává hodně akcí. Vezme se forma, která převládá – takže dáme každému půl hodiny, pár otázek z publika a nazdar. Program se udělá tak, že se vezmou spíkři, kteří rádi mluví, a doplní se to pár dalšími z call for papers, pokud nějaké jsou. FrontKon měl letos formální názor, že vše musí letět v tempu jako když mluví ostravak a obsahový názor, že do nějaké míry témata určujeme my. Hektické tempo a krátké přednášky Tohle určitě znáte. V týmu se přete, zda je lepší varianta riskantnější A nebo obyčejnější varianta B. Většinou to skončí u B, že? My volili mezi „narvaným programem“ a pomalejším tempem. Prosadil jsem narvaný program, pod vlivem skvělého bratislavského CodeConu. Výhoda takového konceptu je lineup nacpaný zajímavým obsahem. Program tam letí na více místech vpřed a v takovém tempu, že dopředu víte, že to všechno nemáte šanci stihnout. Na chvilku do té divoké řeky vstoupíte, vytáhnete si pár kamínků, ale víte, že je nestihnete ohmatat všechny. Vaši kolegové vám ale budou večer vyprávět o dalších kamíncích, které viděli a ohmatávali oni. Vše jste neměli stihnout ani na FrontKonu, my jsme to věděli a z výše uvedených důvodů jsme to akceptovali. Většina přednášek je už ale na YouTube, zdarma k dispozici všem, i těm, kteří nestíhali. Jsem rád, že jsme to takhle vyzkoušeli. Myslím, že to je dobrý koncept, hlavně pro situaci, kdy se v oboru děje spousta zajímavého dění a vy nemáte ambici jít úplně do hloubky. Výhoda je také v tom, že podpoříte networking, protože na místě je velká mela a lidé se zajímají o to, co se děje jinde. Příště bych záměrně zvolil pomalejší tempo, minimálně pro hlavní stage. Prodloužím některé přednášky a přidám delší diskuze ve více lidech. Prostě bych zkombinoval pomalé a rychlé tempo. To mi jako dobrý nápad vychází i z účastnického feedbacku a z mé anketky na Twitteru. Obsahový názor FrontKonu Zpátky k tématům, které jsme v přednáškách a diskuzích akcentovali. Už v call for papers jsme některé témata zvedli a řada lidí nám poslala a pak odpřednášela zajímavé příspěvky k nim. Myslím, že konference by měla zvedat určité otázky. Osobně jsem to před letošním FrontKonem viděl takhle: Taháky, které má komunita ráda. Sem letos zapadlo AI a jeho vliv na naši práci. Podívejte se na přednášky Hany Klingové nebo Honzy Sládka. Kritický pohled na aktuální stav. Jít proti srsti považuji za nutnost, jinak se oborově zacyklujeme v sebechvále a obdivu myšlenek aktuálních světových vývojářských celebrit. Letos to schytal aktuální stav JS frameworků, trošku React a Next.js, ale vzali jsme to pozitivně a to pokusem odpovědi na otázku, zda to jde jinak a zda vidíme alternativy. Podívejte se na přednášky Borka Bernarda, Libora Vaňka, diskuzi o JS frameworcích. Důležitá témata mimo hlavní proud. Je zde obsah, který není v mainstreamu zase tak moc diskutovaný, ale zaslouží si tu pozornost. Letos to bylo téma juniorů a jejich najímání, v přednáškách například Yablka, Honzy Javorka nebo v diskuzi. Důležitá součást toho, jak o tříbení diskuze nad tématy, uvažuji, je forma diskuzí. Obě letošní byly skvělé a je fakt škoda, že diskuzi o frontend frameworcích jsme museli ukončit o dost dříve než by bylo záhodno. Diskuze se nám osvědčily už na online FrontKonu 2021, takže pokud FrontKon bude pokračovat, budeme na nich více stavět. Poslední věc, která se mi zdá dobrá, i když netvoří hlavní oblast zájmu, jsou „vsuvky odjinud“. Letos to byl standup od Pavla Tomeše, u kterého jsem se fakt hodně nasmál. Holky na pódiu Nechci z toho dělat moc velké téma, ale ono to pro organizátory akcí téma je. Jak dostat holky na stage. Na FrontKonu byly ženy mezi přednášejícími zastoupeny relativně silně. Mezi 40 přednášejícími bylo 7 žen. Tenhle text píšu i pro další organizátory akcí a proto je potřeba říct, že těch 7 žen bylo výsledkem nějakého našeho postoje a naší práce. Ono to nevznikne samo. Myslím si, že ženy do IT patří. Myslím si, že je skvělé, že si cestu k webařině nacházejí stále ve větším počtu a že se snad brzy dočkáme lepšího než nejhoršího stavu v EU, nyní jich máme kolem 10 %. Myslím si taky, že na pódiu by měl být vidět minimálně takový podíl žen, jako je vidět v publiku. Z pohledu organizátorů na to existují různé pohledy. Budu parafrázovat některé z těch, co jsem zaznamenal v poslední době: Cílem by nemělo být více žen na konferencích, ale více kvalitního obsahu bez ohledu na pohlaví. Nejsem zástancem pozitivní diskriminace. Nebo zase z jiné, aktivističtější, strany: Pokud na konferenci, kam jsem zvaný, nevystupuje s přednáškou nebo workshopem ani jedna žena, rád svoje místo přenechám. Vždycky říkám – organizátoři musí něco udělat proto, aby holky na pódiu byly vidět. Už jen kvůli ženám v publiku, aby se na akci cítily trochu více „doma“. Co proto organizátoři udělají však nemusí být na úrovni pozitivní diskriminace. Mělo by to být na úrovni snahy. Měl jsem možnost vypozorovat, že holky se většinou do přednášení moc nehrnou. Uděláte call for papers a dorazí vám mrak sebevědomých chlapů, včetně těch, kteří toho zase tak moc neumí. Ehm… U holek, včetně těch, které odvádějí skvělou práci, tahle touha po sebeprezentaci často není tak silná. Ve komunitě Frontedisti.cz se dlouhodobě snažíme konkrétní holky z oboru vytipovávat, oslovovat a pak s nimi udržovat kontakt, případně odstraňovat bariéry, které u přednášení mohou mít. Začali jsme to cíleně dělat před pár lety a hned to neslo ovoce. Jakmile byly holky přednášející vidět u Frontendistů na pódiu, padaly bariéry u dalších žen, takže do call for papers pro letošní FrontKon už dorazilo docela dost nabídek k přednášení od holek. Hrálo také roli, že přispěly sesterské ReactGirls, které v transformaci žen do IT dělají spolu s Czechitas výbornou práci. Tato naše strategická snaha se netýká jen holek, ale třeba také juniorních vývojářek a vývojářů, týká se začátečníků v přednášení a tak dále. Pokud jako orgnizátoři tuto strategickou snahu nemáte a necháte to jen tak volně plout, zacyklí se vám seznam řečníků na akcích na sebevědomých zkušených mužích a začátečníci nebo ženy se vám logicky budou vyhýbat. Zúročení dlouhodobé práce Spolek Frontendisti.cz brzy oslaví desetileté výročí založení. To je mazec! Za tu dobu se toho hodně stalo, hodně se změnilo. Důležité je, že hlavní část štábu zůstává stabilní a snažíme se poučovat z chyb. Díky tomu jsme relativně dost stabilní komunita. Z pohledu vnitřní organizace spolku se FrontKon vyvedl. Pár lidí mi na místě řeklo, že to úžasně šlape a funguje. Že je z toho cítit pohoda. Pohoda na konferenci! Boží. Do FrontKonu myslím probublalo, co ve Frontendistech budujeme už téměř deset let. Tým, kde každý ví, co má dělat, co je jeho pozice a za tu dobu se to naučil dělat docela dobře. Tým, který se cíleně postupně rozšiřuje, aby se přirozeně pokrývaly ztráty, protože dobrovolnická aktivita samozřejmě není pro každého a na pořád. Ale nemyslete si, ono to hezky vypadalo, ale byl to pot a slzy… Janča, Břeťa a Tomáš řešili spoustu problémů na místě, ale problémy se nevyhnuly ani celkového nastavení organizace. Chybička se vloudí a to vždy Jakkoliv to zvenčí mohlo vypadat docela dobře, uvnitř jsme si prošli malou krizí. Někteří kritičtější kolegové odjinud nám občas říkají, že Frontendisti.cz jsou řízení jako firma, ne jako komunita. Vždy říkám, že ano, platí to v tom pozitivním směru relativně dobrého vedení vedoucího k dlouhodobé udržitelnosti. Na druhou stranu ale říkám, že některé naše chyby jsou způsobené právě tím firemním typem řízení. To, že komunitu vedeme jako firmu má občas za důsledek, že komunitní složka někdy pokulhává. FrontKon jsme plánovali v nejužším týmu tří až pěti lidí a v hektičnu s blížící se akcí jsme trošku zapomněli zapojit ostatní, a že nás už ve štábu není zase tak málo. Výsledkem byl nejen přetížený nejužší organizační štáb, ale také nezapojené a špatně informované okolí. Nejvíc to odskákali moderátoři, kteří kvůli špatné komunikaci nečekali, že na místě budou mít kromě moderování také mnoho jiných povinností a jejich den byl opravdu extrémně náročný. A co hůř – nemohli se na to příliš připravit. Píšu to i proto, že si opravdu velmi silně vážím toho, že moderátoři přes to odvedli skvělý výkon a i díky ním dokonce akce vykazovala znaky pohody, i když na pozadí trošku hektické pohody… Děkuji! Dělat FrontKon bylo pro mě osobně strašně zajímavé. Nejzajímavější projekt letoška. Vysilující taky, ale s tím se dá něco dělat. Jak říká Tomáš Hejč – takhle komunita si konferenci zaslouží. No a my máte komunitě sloužit, však jsme si to vybrali, že…? Díky Janě Nečasové, Tomášovi Hejčovi, Břetislavu Proftovi, Kateřině N. Volákové, se kterými jsme to dlouhé měsíce připravovali. Díky všem ostatním ze štábu konference, jmenovitě hlavně směrem k Tomášovi Koutovi, Adině Foxové, Karolíně Vyskočilové, Adamovi Kudrnovi, Zuzaně Šumlanské a dalším. Díky všem, kteří přispěli přednáškou. Všem, kteří přišli. Komunito, díky!
10.01.2024 04:45 Po velmi úspěšném online FrontKonu 2021 jsme rozhodli, že vyzkoušíme sílu komunity na opravdové živé konferenci. 30 přednášek, 400 frontendistek a frontendistů. V hotelu. V Brně. 12. října. To bude frontendový mazec, vážení. Na webu už je program, sledujte frontkon.cz. Na mě v rámci štábu připadl hlavně program. Ne, že by s ním nebylo dost práce, ale opět se ukázalo, že komunita výborně funguje. Přes „call for papers“ se nám sešlo opravdu hodně zajímavých přednášek. Začínalo to vypadat, že budeme muset udělat konference dvě. Vyberu alespoň některé z témat: O vlivu na AI na naši práci bude mluvit David Grudl, Hana Klingová a Honza Sládek. Moderní JS frameworky ve svých přednáškách a v diskuzích zmíní např. Borek Bernard, Riki Fridrich nebo Libor Vaněk. Novinky v CSS a jeho směřování řeší přednášky Jana Svěráka nebo Kateřiny N. Volákové. Téma juniorů na frontendu probereme s Yablkom, Martou Kirchgessner a Honzou Javorkem. Je toho ale daleko více – namátkou např. Vercel, estimace projektů, design systémy, TypeScript nebo třeba osobní rozvoj. Uvidíme se? frontkon.cz
08.01.2024 19:30 V PageSpeed.cz jsme po několika letech práce na testeru pro měření rychlosti spustili také jeho placenou variantu, tarif PLUS. Stojí kolem 5 tis. Kč bez DPH ročně na jeden web. Postavili jsme jej pro majitele webu, marketéry a vývojáře a to na základě mnohaleté zkušenosti s poradenstvím k rychlosti. V tomhle článku vám ukážu, jaké problémy tester PLUS nám a našim klientům řeší. Na jedné případové studii pak budu ilustrovat proces ladění konkrétního problému s pomocí našeho nástroje. Pokud se raději chcete podívat na video s velmi podobným obsahem, který je v článku, pak mrkněte na YouTube: Rychlost je důležitá, jenže se často kazí, aniž byste to věděli Kdo neměří, ten neřídí. V přednášce jsem si dělal legraci, že to řekl Baron von Blitzenschnell, otec moderního měření rychlosti webu. Ve skutečnosti nikdo neví, kdo to prohlásil. Ale je to moudrý výrok. Po mnohaletých zkušenostech s optimalizací rychlosti u desítek webů vím, že pokud existuje nějaký základní kámen, bez kterého to celé nefunguje, je to spolehlivý monitoring rychlosti. Bez měření rychlosti nevíte, co se na webu děje a nemůžete na to reagovat. Bez měření neznáte výsledky vašich optimalizací. Bez měření nemůžete říct, jak si vedete, kam směřujete. Bez měření neřídíte optimalizaci rychlosti, takže ji nemůžete dělat. Rychlost přitom zvyšuje konverze, ale má také další pozitivní dopady. Co tester PLUS přináší oproti verzi zdarma? Náš tester rychlosti můžete používat už zhruba dva roky. Co tedy odlišuje novou placenou verzi od té stávající? Zjednodušeně řečeno je to stabilita výsledků, možnost detailního zkoumání příčin a v neposlední řadě také Hlídač, který vám umožní na rychlost zase tak moc nemyslet. Jste zvědaví? Vše vám vysvětlím, chvíli vydržte. Nejprve je ale potřeba říct, že vám tu neprodávám nový a neodzkoušený produkt. Tester PLUS už více než půl roku používá většina našich klientů, počínaje velkými značkami jako je Dr. Max, Sazka, Livesport až po středně velké nebo menší e-shopy jako je Čisté dřevo, Goldea a další. „Plusko“ je odladěné na základě připomínek těchto a dalších více než 50 značek, kterým s rychlosti pomáháme. Pojďme teď na ty fíčury, na ty se jistě těšíte nejvíc. Stabilní infrastruktura Ve stávající bezplatné verzi testů na app.pagespeed.cz testujeme vaše URL méně často a výsledky bereme z API PageSpeed Insight od Googlu. Jak na následujícím grafu sami uvidíte, výsledky PageSpeed Insight nepatří zrovna k etalonům stability: Obrázek: Metriky FCP a LCP pro tentýž web. U verze PLUS to prostě „neskáče“. Příčinou velmi různorodých výsledků z API od Googlu je kromě jiného to, že Google testuje weby na různých serverech různě rozmístěných po světě. Pro tarif PLUS jsme připravili vlastní infrastrukturu postavenou na evropském Amazon Web Services , takže můžeme garantovat, že zkreslení způsobené měřením je zde velmi malé. Důležité je, aby byl jednoznačně patrný krátkodobý trend metrik, takže můžeme identifikovat případné problémy. Kromě toho testujeme vícekrát a častěji než ve verzi zdarma, tudíž můžeme eliminovat výrazně odlišné hodnoty, které občas testy vracejí. Shrňme si to ještě v tabulce: Vlastnost testování Verze zdarma Tarif PLUS Počet testů týdně 3 7 Počet testování jednoho URL 1 5 Infrastruktura PSI API vlastní, AWS Denní výsledky nestabilní stabilní Jste webaři-hobbíci a stačí vám vidět trend z týdne na týden a tříměsíční období? Volte verzi zdarma, v opačném případě vám doporučuji PLUS. Dále se pojďme zabývat tím, co v PageSpeed.cz PLUS potěší vývojáře, a to sice detailním technickým rozborem. Technické detaily pro pátrání po příčinách Do tarifu PLUS jsme přidali několik možností, jak se dopátrat příčině zhoršení nebo zlepšení rychlosti a najít ty správné příležitosti: Obrázek: Detailní reporty pro všechno možné. Vysvětlení čísel je níže. Co na obrázku vidíte? První dvě ilustrace pocházejí z nového reportu „Technické“, kde najdete technické ukazatele jako velikost DOMu nebo datový objem CSS či JS. Pravá část ukazuje detailní výsledky nástroje Lighthouse, kde máte k dispozici opravdu hodně informací. Zaměřme se nyní na čísla v obrázku: Tady vidíte graf s datovým objemem HTML, který se u tohoto webu po spuštění redesignu razantně snížil. Palec hore, tohle vždy pomůže! Datový objem fontů zde narostl, ale vidíte, že díky grafu jsme si toho mohli všimnout a pak pomoci s opravou tohoto problému. V detailním reportu Lighthouse máte k dispozici JSON se všemi výstupy tohoto nástroje , dále Trace a HAR . Tahle technická data vám usnadní optimalizace a hledání příčin zhoršení. Vydržte chvilku a ukážu vám to na případové studii za pár odstavců. Mimochodem, všimli jste si poznámek v grafech? I to je vlastnost tarifu PLUS, která vám usnadní dohledávání změn. Hlídač hlídá, zatímco vy můžete… třeba spát „Hlídač“ je vlastnost, ze které mám opravdu velkou radost, a se kterou jsme se piplali nejvíce. Z poradenské praxe totiž víme, že většina nástrojů člověka rychle zahltí zbytečnými notifikacemi. Vezměme příklad z následujícího obrázku: Obrázek: Některé vrcholky nestojí za to zdolávat. Na prvním kopečku je vidět, že hodnoty metriky LCP jeden den vylétly, ale hned se vrátily zpět. Šlo tedy o krátký „peak“, špičku, která představovala výjimku. Druhá šipka zase ukazuje na mírné dvoudenní překročení stanoveného limitu. Zajímá vás tohle? Zde musím říct, že jistě existují týmy, které sledují performance na hodinové nebo dokonce minutové bázi. Je jich ale jen zlomek. Ono to totiž vyžaduje, aby rychlost měla naprostou prioritu a vy jste měli kapacity ji každý den řešit. Naprostá většina našich klientů má sice rychlost ve svých prioritách vysoko, ale reálně na ni pracuje jednou za pár dní. Ti menší dokonce jednou za týdny nebo v měsíčních cyklech. Právě pro tyto případy stavíme našeho Hlídače. Ten začne „panikařit“ a posílat notifikace až po několika dnech, kdy se původní hodnota zhoršila a zůstala na nové horší úrovni. To vám ušetří vyhodnocování spousty notifikačních hlášení. Do Hlídače jsme ale přidali ještě jednu vychytávku. Jde o automatické nastavování hladin rychlosti . Však se podívejte na následující obrázek, z toho budete moudřejší: Červená linka zda ukazuje limit rychlosti, tedy maximální hladinu. V tomto případě se však metrika FCP postupně zlepšuje. V jiných nástrojích byste museli pravidelně prohlížet grafy a limity rychlosti si ručně přenastavovat podle změn v rychlosti webu. Kdo z vás to ale reálně dělá? Náš Hlídač nastavuje limity sám podle algoritmu, který jsme ladili několik měsíců. Takže pokud dojde ke zlepšení, schůdek v grafu se nastaví automaticky. Navíc vám pošleme notifikaci, protože dobrých zpráv kolem rychlosti není nikdy dost. Sečteno, podrtženo: Hlídač vám obstará automatické sledování rychlosti webu. Nebude vás zahlcovat velkým množství zpráv. Funguje automaticky, takže vy můžete dále dělat, co vás baví – rozvoj webu, programování nebo prostě flákání se. Notifikace z hlídače chodí do e-mailu, do Teams nebo do Slacku. Tester rychlosti od PageSpeed.cz vám však umožní jít dál. V momentě, kdy nastane skutečný problém, můžete se díky výše uvedeným technickým detailům dopátrat až k příčině zhoršení a tu pak opravit. Pojďme se na optimalizaci rychlosti s pomocí tarifu PLUS podívat prostřednictvím příběhu z praxe. Případovka: ladění CLS na Goldea.cz Web Goldea.cz funguje z pohledu rychlosti webu skvěle. Je radost spolupracovat s klientem, který rychlost považuje za důležitou, a vývojáři, kteří jsou velmi kompetentní. Podívejte se na čísla z Chrome UX Reportu, tedy od uživatelů Google. Jsou výborná: Ale my v PageSpeed.cz moc dobře víme, že monitoring rychlosti se vyplatí i u webů, které jsou technicky stabilní a obstaráváné schopnými lidmi. Stále se totiž nasazují nové úpravy, nejen na straně vývojářů, ale třeba i přes GTM. Problémy se prostě dějí pořád. Obrázek: Chybička se vloudí. Problém s metrikou CLS nám Hlídač nahlásil po třech dnech, když už bylo jasné, že nejde o náhodnou špičku. Navíc šlo o výrazné zhoršení hodnot. Takže jsme to šli řešit. V testeru je možné si každý graf rozkliknout do modálního okna, které vám ukáže přesné hodnoty testů pro jednotlivé typové stránky. Tohle je stav, kdy všechno bylo zelené: Obrázek: Před zhoršením jsou hodnoty CLS nulové nebo skoro nulové. Krása. Tohle je stav po zhoršení: Obrázek: Ajaj, co se nám to tady přihodilo? Snadno zde vidíme, že problém je u typové stránky BlogPost, tedy u detailu článku. Kliknutím na čas testu se pak dostanete do detailního výsledku testování s výpisem reportu nástroje Lighthouse: I zde vidíme vysokou hodnotu CLS. Nástroj Lighthouse nám občas může poradit relevantní rady, proto se podíváme, co nám říká k CLS. Ukazuje na velký posun tohoto objektu: Kódeři a specialisté na rychlost mezi námi už mohou něco začít tušit, protože podle názvu elementu a hodnoty posunu může jít o posun celé stránky. Jak zkoumat dál? Ve výsledku testu si v testeru PageSpeed.cz můžu stáhnout tzv. Trace, což je detailní záznam práce prohlížeče při stahování a renderingu stránky. Soubor z Trace můžu otevřít v nástroji Performance Insights, který mám z Chrome DevTools nejraději právě pro ladění metriky CLS. Tady vidíme to, co potřebujeme: Obrázek: Dvě místa v Performance Insights, která mi ukáží problém s CLS. Šipka nahoře ukazuje na panel, který informuje o nechtěných posunech, jež metrika CLS zaznamenává. Vidíme tam oranžový sloupec, takže vysoká hodnota shiftu a pak screenshot, co se tam přesně renderuje. Větší screenshot také ukazuje spodní šipka. Můj obrázek je statický, takže vám neukáže rozdíl mezi renderem před a pro. K tomu jsem vám udělal ještě jeden obrázek: Obrázek: Před a po. A našli jsme viníka. Už je vám to jasné? Na webu proběhne ke změna výšky horní zelené lišty. Dojde k tomu kvůli náhradě systémového písma za webfont. Co s tím? Nebojte, poradím vám. V týmu PageSpeed.cz jsou pro nás tyhle horní lišty takovým vánočním evergreenem, který pravidelně velké části webů ničí kvůli poskočení layoutu čitelnost obsahu a tím i metriku CLS. Možnosti řešení jsou například tyto: Lépe ošetřit rozdíly mezi systémovým písmem a webfontem, např. pomocí vlastnosti size-adjust. Zajistit u autora nebo autorky textu, aby jeho délka ani na mobilu nepřetekla na druhý řádek. Ošetřit „jednořádkovost“ na straně kódu, např. pomocí vlastnosti overflow a vytečkování pomocí vlastnosti text-overflow. Možné jsou i kombinace těchto postupů, kreativitě se meze nekladou. Metrika CLS je v tomto přísná, protože je citlivá i na velmi krátké posunutí celého layoutu. Tak. Už se blížíme k závěru. Teď se pojďme podívat, co za tarif PLUS zaplatíte a co přesně vám nabídne. Tarif PLUS Za cenu 5 148 Kč ročně bez DPH za jeden detailně monitorovaný web dostanete: 5 detailně sledovaných URL jednoho webu . 5 domén – kromě té hlavní ji klienti využívají na subdomény, jazykové mutace nebo konkurenci . Vlastnosti o kterých hovořím výše: hlídač rychlosti, detailní technické informace, stabilní infrastrukturu, poznámky v grafech a tak dále. Stavíme to tak, aby to bylo dostupné i pro menší, ale vydělávající weby. Obrázek: Nastavení PLUS testu může vypadat třeba takhle. Samozřejmě zde dále platí výhody stávající bezplatné verze – máte k dispozici týmový dashboard, kam si můžete pozvat libovolný počet spolupracovníků, můžete si tam přidávat testy zdarma a chodí vám pravidelné měsíční reporty. S onboardingem a nastavením testu vám navíc osobně pomůžu. Více o tarifu PLUS, včetně srovnání s verzí zdarma: app.pagespeed.cz/plus Co si zapamatovat? Tohle je to nejdůležitější, co byste si mohli z článku odnést: Měření je základ performance. V PLUS dostanete detailní a spolehlivý monitoring. Hlídač vás nebude otravovat, ale dá včas vědět, že se něco děje. V PLUS dostanete všechny technické podklady pro optimalizaci. 5 148 Kč ročně bez DPH za jeden detailně monitorovaný web. Shrnutí? Rychlost je důležitá, jenže se často kazí. My ji za vás pohlídáme, zatímco vy se soustředíte na to, co umíte nejlépe. Samozřejmě budeme rádi za každý váš feedback, buď přímo sem nebo třeba na e-mail info@pagespeed.cz.
03.01.2024 04:45 Už jistě víte, že od 1. ledna se změnily sazby DPH. Knížky se pak přesunují do nulové sazby daně. Vzal jsem to jako příležitost k celkové aktualizaci cen mých knížek. Jsem přesvědčený, že každá jednotlivá kniha může být stále pro hodně lidí užitečná, ale třeba ta první už bude slavit deváté narozeniny. Knížky prostě zestárly a tak i tohle znovu promítám do ceny. Takže si teď představte něco jako famfáry, ukřičeného Alzáka… Nebo prostě jenom relativně decentního autora knížek, který vám tímto oznamuje, že je to teď skoro všechno o hodně levnější: Kniha Cena ‘23 Cena ‘24 Vzhůru do CSS3 99 99 Vzhůru do AMP 249 99 Vzhůru do designu 249 199 CSS: moderní layout 399 299 CSS: moderní layout 699 499 CSS: moderní layout 899 649 Přeji vám vše dobré v roce 2024 a ať vám knížky dělají radost a dobře slouží! → vzhurudolu.cz/ebooky
