WordCamp Praha 2022: zajímavé přednášky z různých oborů

Přestože jsem jedním okem visel v této chmurné době na Twitteru, stíhal jsem přednášky sledovat a jak je mým zvykem, připravil jsem si k nim několik poznámek do podoby článku. Tentokrát budu úspornější než jindy, což vlastně nebude na škodu.

Na začátku nás za organizátory uvítal Honza Štětina následovaný Adinou Foxovou. Po krátkém úvodu začala první přednáška. Vše probíhalo na platformě Hopin s předtočenou přednáškou a následným živým vstupem moderátorů a přednášejících.

Karolína Kropíková – 7 tipů, jak postavit web právně správně

Nultý tip: Myslete dopředu. Prevence je totiž vždy levnější. Chraňte web i doménu. Nepodceňte smlouvu. Uzavírejte ji, i když vše dojednáváte e-mailem, kde je vše popsáno. Alespoň si to v mailu nechejte potvrdit. Ústní smlouvu neuzavírejte. E-mailová smlouva má smysl pro jednoduché jednostránkové weby. Pro složitější klasickou smlouvu.

Specifikujte účel a zadání. My jsme si to představovali červenější… Zadání je klíč. Nezapomeňte na licence. Jak na hladké předání? Ujasněte si s klientem, kdy je web předaný a bez chyb. Nechejte klientovi čas na kontrolu. Vše si potvrďte e-mailem nebo na papíře. Hlavně nenechávejte klienta dělat mrtvého brouka. Ve smlouvě zajistěte, že pokud se třeba deset dní neozve, můžete poslat fakturu.

Opatrně s cizím obsahem. Nekopírujte, raději embedujte a linkujte, ale u komerčního webu pozor i s tímto. Fotobankám nevěřte. Autor často neví, že jeho dílo je ve fotobance. Pokud budete muset uhradit licenční poplatek, na fotobance si zpět nic nevezmete. Tvořte vlastní obsah. Pokud fotobanku, tak raději placenou, např. Shutterstock.

Co dál? Cena a fakturace. Co když budete nemocní nebo nastane problém? NDA. SLA. Smlouva mezi více tvůrci.

Určitě zajímavá rekapitulace, co všechno promyslet, ale mnoho praktických odpovědí ke zmíněným problémům podle mě přednáška nenabídla.

Jiří Hradský – GDPR, jak se poprat s ochranou osobních údajů na webu

Podívejme se na různé typy webů. Pasivní web reprezentující značku. Vždy na webu uvádějte své jméno a sídlo, identifikační číslo, údaje z obchodního nebo jiného rejstříku. Jedno jak, ale musí to být snadno dostupné.

Pokud jsou tam cookies, tak o nich potřebujete informovat, odpovídající cookies lištu, interní dokumentaci o nakládání s osobními údaji, hlavně při nahrávání obrazovek a dalších podrobnostech o návštěvnících. U nástrojů třetích stran (GA, FB Pixel…) je třeba mít zkontrolované smlouvy/podmínky. Záznamy o činnostech zpracování na základě využívání cookies. Vzor na webu ÚOOÚ.

Prezentace, ale zákazníci mě mohou kontaktovat, např. formulářem nebo registrací k newsletteru. Vše výše uvedené. Navíc je třeba vyřešit GDPR. Informovat o zpracování osobních údajů a vyžádat si souhlas se zpracováním osobních údajů.

Článek 12, 13 a 14 v GDPR specifikuje, co vše musím lidem sdělit v informaci o zpracování osobních údajů. Kdo je správce, jaké údaje budou získány, proč a z jakého právního důvodu, kde budou uloženy, ke komu se údaje dostanou, jaká má subjekt práva, kde si může stěžovat. Účinnost a případné změny.

Je rozdíl mezi Souhlasím se zpracováním a Byl jsem seznámen se zpracováním? První je pro souhlas s rozsáhlejším marketingem a nesmíte jej vyžadovat, druhý pro běžný kontaktní formulář.

U zasílání obchodních sdělení – pro posílání svým zákazníkům nabídku dalších služeb či produktů nemusím mít souhlas, ale měl bych dát možnost sdělení odmítnout. Pro jakékoli jiné obchodní sdělení musí být dopředu souhlas. Náležitosti: kdo posílá, označení, že jde o obchodní sdělení, možnost odmítnutí. ÚOOÚ to rád kontroluje.

E-shop. Opět výše uvedené. Vše bude výrazně rozšířené, například souhlasy, informační povinnosti, zapracování dat o uživatelských účtech atd.

Webová aplikace pro zákazníky. Výše uvedené, ale důkladněji + podmínky užívání.

Webová stránka je jen vstupní branou a na webu to vše začíná. CRM, kontraktoři, markeťáci. Vše, co pracuje s osobními údaji, je dobré zmapovat.

Pěkná srozumitelná přednáška plná užitečných tipů.

Petra Dolejšová, Adam Laita – Cookies, právní pohled, implementační WordPress pohled

Vše, co vypovídá o člověku, jsou osobní údaje. Abychom s tím mohli pracovat, musí to povolit zákon, pak stačí informovat, nebo musíte mít souhlas daného člověka.

Cookies? I beacony, fingerprinty a cokoli podobné. Funkční cookies, bez nich web nejede. Analytické a preferenční jsou pro vyhodnocování návštěv nebo přizpůsobení obsahu. Marketingové cookies jsou pro cílenou reklamu a profilování.

Nová legislativa povoluje automaticky funkční cookies. Pro jakékoli další potřebujete souhlas uživatele, typicky přes cookies lištu. Musí být dobrovolný, což není v případě agresivní a opakované, veliké lišty. Předzaškrtnuté a zamezující přístupu k webu bez souhlasu taky není dobrovolné. Ale klidně lze popup zavírací snadným odmítnutím nebo křížkem.

Ideální a právně správně je mít tlačítko Odmítnout v první vrstvě cookies. Většina trhu to má až v podrobnostech. Musí tam ale být nesouhlas a odvolání v nějaké formě.

Plánovaně od roku 2025 cookies lišty možná vůbec nebudou a bude to vycházet z nastavení webového prohlížeče. Slovensko to má od letoška stejně jako u nás.

Kdy lištu nepotřebujete? Při práci pouze s funkčními cookies, k nim stačí jen popis. Pozor, analytiku nelze dát mezi funkční cookies. Nechte si nadhled. U malého blogýsku by se Petra nechytala za hlavu. Upravte vzhled lišty marketingově a alespoň do barevných tónů barev.

Tip: nechejte odmítnutí správně v první vrstvě, ale místo Nechci cookies to nazvěte Chci jen nutné.

Cookies lišta prakticky ve WordPressu. Povídání o pluginu Complianz, podrobně popsané v jednom z předchozích WP Piv. Líbí se mi, že plugin automaticky blokuje iframy videa a map, dokud není souhlas. Generuje zásady cookies v Gutenberg bloku.

Tip: Plugin OMGF, který zjistí, jaké Google fonty šablona používá a stáhne je lokálně. Automaticky tedy vyřeší problém se zpracováním osobních dat v Google Fonts.

Na záběr ukázka, jak zkontrolovat ve vývojářské konzoli, zda se cookies bez souhlasu neukládají v Chrome.

Petra jako vždy výborná, Adam měl výrazně horší ozvučení a bylo to takové letem světem na vyplnění zbylého času. Celkově ale fajn přednáška.

Honza Malý – Cache snadno a zdarma, co udělat pro zlepšení TTFB

TTFB = Time To First Byte. Doba mezi obdržením požadavku na webový server a začátkem stahování do webového prohlížeče. Na začátku je třeba se zamyslet nad hostingem a parametry serveru. Zkontrolujte strukturu pluginů a šablon. Samotný WordPress je zpravidla bezproblémový vzhledem k TTFB. Zkontrolujte nastavení wp_options, strukturu webu a jeho obsah. Nemáte zbytečně rozsáhlý web?

Srovnání hostingů Forpsi a Onebit. Typologie cache. Runtime cache. Serverová cache jako OpCode, Varnish a cache v rámci managed hostingu. Objektová cache ve WordPressu - ukládání objektů, page cache a fragment cache.

WP cache má implementovanou, ale ne, jakou byste čekali. Lze použít tabulku wp_options pro ukládání cache. Nebo rovnou WP_Object_Cache a rodinu funkcí wp_cache_. To jsou základy v jádře a čekají, že pomocí persistent pluginů se cache někam bude ukládat. Nikde ovšem není automatické ukládání stránek do cache, k tomu je potřeba doplnit pluginy.

Hodí se web cacheovat? Pro weby s malou frekvencí změn určitě. U dynamického webu, například s e-shopem, je dobré rozlišit, co de bude cacheovat a co ne, případně použít fragment cache. Zamyslete se. Nemůžete svůj web změnit na čistě statický?

Srovnání pluginů W3 Total Cache, Cache Enabler, Comet Cache, Wp Fastest Cache, WP Super Cache. Honzův favorit je Cache Enabler. Ve firmě mají dlouhodobou zkušenost s WP Super Cache, stejně jako já. Ostatně, dle měření nabídne nejlepší zrychlení. I nejhorší výsledek ale nabídl 5x rychlejší web než základ WordPressu bez cache pluginu.

Pěkná lehce technická přednáška o cacheování ve WordPressu. Zaujala mě omluva, že bude Honza mluvit vývojářsky. Ve světě WordPressu se s tímto „studem“, když někdo mluví více k vývojářům, setkávám nepochopitelně často.

Riki Fridrich – ES Build, rychlý a moderní balíčkovač JavaScriptu

Původně jsem na Rikiho nechtěl koukat, protože jsem si nepouštěl povídání o JavaScriptu. Ale začátek session o designu a UX mě přesvědčil, ať se vrátím a přepnu se zpět do režimu programátora.

Dobře jsem udělal. Představení a informace o ES Buildu využiju v dalších projektech mimo WordPress. Pracuji hlavně s Webpackem, takže pro mě bylo zajímavé sledovat něco nového.

Riki je zkušený vývojář i spíkr a nakonec jsem byl rád, že jsem přednášku stihl téměř celou.

Marek Gach – Security Headers

Všechno, co jste o nich chtěli kdy vědět, ale báli jste se zeptat. Proč je potřebujete? Obrana proti napadení webu, ošetření sběru dat o uživatelích, zlepšení rychlosti. Jak to funguje? Prohlížeč ví, co má ověřovat z bezpečnostních hlaviček. Podporuje hlaviček, např. HSTS zjistíte na caniuse.com.

HSTS k vynucení https, eliminaci man in the middle útoku. Dále konkrétní ukázky nastavení a využití X-Content-Type-Options, Referrer-Policy, X-Frame-Options, Content-Security-Policy (poměrně složitě nastavované, používá cca 4 % webů).

Jak zjistíte, které hlavičky se posílají? Například přes webovou konzoli prohlížeče. Služba securityheaders.com. Jak hlavičky nastavit? Ve virtual host webového serveru, v .htaccess u Apache nebo pluginem (HTTP Headers) či vlastním PHP.

Chybka? Na začátku se přednáška resetovala a začala znovu. Marek by měl trochu potrénovat prezentaci. Přednáška byla fajn, zajímavá, ale v mluveném projevu bych používal prodlevu mezi větami a ne v jejich půlce. Hrozně špatně se to pak poslouchá.

Daniel Mejta, Václav Greif – moderní vývoj ve WordPressu

Jak přiblížit oldschool WordPress k moderním frameworkům jako Laravel nebo Symfony. Začínáme s Namespaces. Prevence kolizí, autoloading, přehlednější struktura projektu.

Seznámení s nátrojem Composer. Správce knihoven umožňující stahovat do vašeho projektu cizí kousky kódu. Centrální repozitář Packagist.org. Vychytávky pomocí knihovny wpify/snippets. Problém WP a Composeru? Někdy to používají i pluginy a to často v různých verzích a dochází ke konfliktům. Využijte WPify Scoper.

Dependency Injection. Oddělení závislostí, přehlednější kód, snadná výměna konkrétní implementace rozhraní. DI Container.

@wordpress/scripts. Sestavování frontendových závilostí. Původně pro vývoj Gutenbergu, ale jde použít obecně i ve vašich projektech. Postaveno na Webpacku a umožňuje vám psát React aplikace, generuje závislosti a verze skriptů, přidává podporu pro styly v Sass. Další možnosti jsou generování SVG, začlenění Tailwind CSS, integrace Browsersync a čehokoli, co jde přidat do Webpacku.

DDEV. Lokální vývojové prostředí. XDebug. XHProf.

Tip: WPify Custom Fields coby náhrada ACF, výhodou je nativní ukládání do plain metadat ve WordPressu, takže k nim přistupujete přes standardní funkce redakčního systému.

Dlouhá, vývojářská přednáška. Dvojice spíkrů ji zvládla v pohodovém tempu bez nějakých zádrhelů. Nemůžu jinak. Coby vývojář ji hodnotím za nejlepší přednášku dnešního dne.

Live Sessions – bez záznamu a přípravy, naživo

Kromě klasických předtočených přednášek s následným odpovídáním naživo bylo součástí WordCampu Praha 2022 ještě samostatné pásmo s několika tématy. Před polední pauzou to byla témata Právo a weby a Tvorba přístupných webů.

Odpoledne byly sessions souběžně s přednáškami. Chvíli jsou koukal na povídání o builderech, ale nepřišlo mi to zajímavé, protože používám jen občas Oxygen a o tom čtveřice spíkrů nemluvila. Chvíli jsem koukal i na povídání o designu a UX, kam mě nalákalo jméno Marka Čevelíčka, ale… Ale příště se přimlouvám za nějakou jeho samostatnou přednášku.

Zajímavé postřehy z různých sessions:

Vláďa Smitka řešil s klienty tři konkrétní stížnosti na cookies z ÚOOÚ. Pokuta není hned, je tam 21 dní ke sjednání nápravy. Většinou za to, že na webu byla ještě zastaralá původní lišta ve smyslu používáme cookies, smiřte se s tím.

Co taková reCaptcha? Zaznamenává komplet dění na webu. Správně by se asi neměl vůbec zobrazit formulář, až po souhlasu by se měl dynamicky načíst a aktivovat reCaptchu. Pozor, reCaptcha 3 chce být na všech stránkách webu, aby analyzovala návštěvníka. Vláďa ji ale dává jenom na stránku s formulářem a funguje. Nebo použijte alternativy - hcaptcha, ta je sice podobná, ale data nejdou Google. Já bych přidal tip pro Drupal a modul Antibot.

Tip na bezplatnou ověřenou fotobanku: Openverse. Pozor na free a na levné placené fotobanky.

Za mě byly sessions fajn formát jako alternativa setkání naživo. Dotazy s výjimkou začátku UX sezení padaly, takže přednášející ani moderátoři na sebe jen mlčky nekoukali.

Co napsat závěrem? Letos asi moje první celodenní přednáškové pásmo o tvorbě webu. Organizátorům děkuji za přípravu, přednášky byly zajímavé a v kombinaci právních, klikacích a vývojářských věcí si určitě každý našel kousek toho svého.

Záznamy by měly být na webu do dvou týdnů. Sledujte WordCamp Praha 2022.