Tři dny na DrupalCon Europe 2020: start s problémy, povedená špička a rozpačitý závěr

Jak začít? Třeba tím, že jsem se týden předtím namlsal velice povedenou konferencí SymfonyWorld Online 2020. Byly tam skvělé přednášky, bezproblémová konferenční platforma Hopin. A já čekal, že bude něco takového i na DrupalConu. Natěšený jsem byl o to více, že s Drupalem pracuji přece jenom častěji. Chyba. Člověk se nemá těšit dopředu. Pak je spíše zklamán, místo aby byl potěšen pár dobrými věcmi.

Začněme registrací. Šíleně dlouhý formulář o řadě kroků, na kterém byla podle mého názoru zbytečná nadpoloviční většina dotazů. Trvalo mi cca 15 minut, než jsem se na notebooku dopotil ke konci a zaplatil. Nikde žádné info o tom, jak budu přednášku sledovat, prý je vše pod odkazem v potvrzovacím mailu. Tam žádný takový nebyl. Po chvilce reptání se mi dostalo odpovědi, že odkaz ke sledování bude rozesílán v pondělí. Což bylo v rozporu s instrukcemi na webu.

Vysílací platforma je jedna velká bída, u které sami organizátoři doporučují odzoomovat si okno. Dopředu tedy vědí, že to není pravé ořechové. Odteď si budu dopředu zjišťovat, na čem online konference poběží a pokud to opět bude eventsair.com, dám od toho ruce pryč.

První den to až do odpoledne nefungovalo, lidi si na chatu stěžovali, že vidí jen černé okénko. To se prý dělo i na předchozí konferenci, s tím rozdílem, že nyní byla k dispozici záloha. Spustit si mimo konferenční stránku aplikaci Zoom. Tu, kterou řada lidí nemá ráda kvůli bezpečnostním problémům.

Což o to. Zoom zoomoval. Přepínat se z přednášky na přednášku bylo o nervy. Pokaždé potvrzovat schválení aplikaci a znovu vypisovat mailovou adresu. K tomu šíleně pomalý konferenční web, kde bylo možné sledovat program.

Nepostřehl jsem během těch výpadků slovo omluvy ve vstupech moderátorů ani na Twitteru. Jen konstatování, že máme kliknout na odkaz pro spuštění Zoomu pod oknem konference ve webové aplikaci.

Co se programu týče. Jeho UX zpracování je děs běs. Pokud už vytvořím několik pásem přednášek, tak je snad dám do nějaké tabulky, aby bylo jasné, co kdy začíná a s čím se překrývá. SymfonyWorld to tak měl a bylo to perfektní. DrupalCon Europe 2020 měl program jako dlouhatááánskou nudli s nadpisy, anotacemi a časem začátku. Jak by řekli mladí: #uxfail.

Všechny přednášky, které jsem viděl, byly naživo. Opět bych se inspiroval u Symfony. Tam byly přednášky dopředu natočené, streamované v daný čas na minutu přesně. Spíkři perfektně připravení a po skončení videa byli online pro zodpovídání dotazů. Předtočená videa by měla výhodu v doplněných titulcích. Někomu jsem na DrupalConu totiž jeho angličtinu při špatném zvuku nerozuměl.

Na DrupalConu tentokrát bylo dobrých přednášejících poskrovnu. Kvalita videa i zvuku otřesná. Povídání spousta lidí tahala někde z paty. Neuměli se vystavit do webkamery. Koho zajímají něčí neudržované vousy zespodu?

90 % řečníků mělo problém mluvit čtvrt hodiny bez toho, že by jim nevyschlo v puse a nedoplňovali tekutiny. Mimochodem, žasnu nad trendem, kdy se doma na pití používá zavařovačka. Není to nepohodlné?

Vrcholem byl týpek, který po prvním zvonění telefonu do přednášky jej nevypnul. Stát se přece může. Místo toho mu ale telefon zvonil opakovaně a frajer ve finále začal nadávat oh shit. Profi spíkr každým coulem.

Dost hejtů. Co se mi obecně líbilo? Nápad vyplnit pauzy online setkáváním s dalšími lidmi. Podobná setkání v reálu jsou asi u většiny lidí důvodem, proč na akce chodí. Já se také rád potkávám s ostatními Drupalisty naživo. Formát pětiminutových povídaček s protějšky, které vám systém automaticky vybere, je zjevně dosti zábavný.

Dozvěděl jsem se pár zajímavých věcí. Něco jsem neznal, něco si rozšířil a na něco se podíval novýma očima.

Stálo to za vložené investice? Poplatek za účast na konferenci nebyl malý, ale beru jej jako investici zpět do Drupal komunity. Kdybych měřil jen přínos, asi bych uměl peníze utratit za něco lepšího. Ale takto nemám žádnou hořkost. Stálo to za investovaný čas tří dnů? Myslím, že ne. Přednášky byly moc roztahané a zajímavostí pro mě nebylo tolik. Ten strávený čas mě trochu mrzí, nezastírám.

Pojďme se mrknout na jednotlivé přednášky, které jsem viděl. Někde mám poznámek více, jinde méně.

S pomocí Photobooth v konferenční aplikaci bylo možné pořídit selfíčko.

Custom Elements: An alternate Render API for decoupled Drupal

Wolfgang Ziegler

První přednáška a od začátku jsem se na ni těšil. Wolfgang začal povídat o frameworku Nuxt.js, teorii vykreslování stránky v Drupalu. A především o modulu Custom Elements. Umožní vytvořit vlastní značkovací element. Bohužel přednáška začala směřovat k výstupům do JSON a k decoupled řešení, což jsem zrovna na začátku vidět nechtěl a přednášku jsem opustil.

Gitlab deep dive for Drupal developers

Vladimir Roudakov

Po útěku z prvního povídání jsem chvíli sledoval povídání o GitLabu. Bylo to mnohem zajímavější, ale tento nástroj nepoužívám, a tak jsem šel o dům dále…

Automated advanced visual regression testing

Shweta Sharma

…a konečně jsem zakotvil. Připojil jsem se ve chvíli, kdy přednášející mluvila o výzvách a úkolech pro testování. Porovnávala nástroj Percy a Aplitools. První jmenovaný umí ignorovat 1px rozdíl ve vzhledu, funguje jenom ve Firefoxu, Chrome a viewportech, zatímco Aplitools má na to trochu chytřejší logiku a podporuje všechna zařízení a prohlížeče.

Jak testy uspořádat? Prohlížeč, vlastnost, test napříč zařízeními. Zrychlit testování souběžnou analýzou. Důležité je identifikovat vhodnou frekvenci spouštění testů. Přednášející má testy pro jednotlivé podstránky a ty pak různě seskupuje.

U zaměstnavatele mají testovací pyramidu: unit testy, service testy, acceptance testy a visual testy. Nečekejte úspěchy přes noc. Komunikujte coby tester s developery.

Další zajímavé nástroje: BacktopJS, Wraith, Applitools SIDE browser.

Drupal and Gatsby, static without limits. Compiling more than 100,000 pages in less than what it takes to make a coffee

Oier Bravo

Zajímavé, ale trochu nudně přednášené téma. Přednášející řešil situaci, kdy ve firmě měli 42 instancí AWS za 10 000 USD měsíčně a díky Gatsby stáhli náklady na 3 AWS a 500 USD měsíčně.

Drupal v takové kombinaci slouží jako repozitář obsahu, překladů a konfigurace. Gatsby řeší navigaci, rychlé buildování, přednačítání. Postaveno je na Reactu.

Taking an Axe to your Pa11y, or how to test how accessible your site is

Wouter Immerzeel, Tom Van Vliet

Opět jsem z předchozí přednášky utekl a dostal se do zajímavější. Právě končili přehledem možností testu přístupnosti ve Firefoxu. Chrome nabízí svůj Inspector a nástroje Lighthouse. Pokus o ukázku oproti konferenčnímu webu se nezdařil, blokuje roboty…

Zaujala mě aplikace Koa11y a nástroj příkazového řádku Pa11y. Ten lze naskriptovat, umí parsovat sitemapu a běžet paralelně. K dispozici je také nástěnka ukládající výsledky do MongoDB.

Líbí se mi výstupní reporty z aplikace zmiňující jak problémový CSS selektor, ale také konkrétní hodnotu pro úpravu, která pak bude mít kladný vliv na přístupnost. Spousta nástrojů vám třeba řekne, že je špatný barevný kontrast, ale už nedoporučí novou barvu, která je nejpodobnější té stávající. A Koa11y to umí.

Jen škoda, že přednáška prosvištěla hrozně rychle a nevyužili celý přidělený čas k dalším ukázkám.

Control the visibility of your content with Entity Visibility Preview

Florent Torregrosa

Jak řešíte přípravu obsahu na webu? Florent povídal o dvou úhlech pohledu. Plánovač publikace, kdy uživatelé nemají přístup k nepublikovanému obsahu a editoři mohou plánovat zveřejnění. A adaptace obsahu na základě segmentace.

Nevýhodou modulu Scheduler je skutečnost, že je pouze pro obsahové uzly, podle přednášejícího nefungoval v roce 2017 (???) s Content Moderation a neumí náhled. Alternativní modul Scheduled Updates taky nemá náhled a nejde ovlivňovat v nastavení konkrétní entity.

Co se týče segmentace, máme tu Taxonomy Access Control, který není pro Drupal 8 a Taxonomy Access Control Lite, který je jenom pro obsahové uzly.

Alternativou je třeba modul Workspace, který ale není dostatečně stabilní, je hůře použitelný pro klienty a není to náhledový nástroj.

Florent se snažil ukázat, že nastíněné problémy řeší modul Entity Visibility Preview. Podobně jako modul Metatag přidává nový typ políčka, který napojíte k entitě. Má nový typ pluginu, který řídí logiku přístupu. Umí náhledové zobrazení. Dva embed pluginy pro práci s datem a taxonomií.

Omezení tohoto modulu: nepodporuje Node Grant API, takže nehlídá například přístupy přes Views, v Entity Queries a ve vyhledávání. Ale dovede to nějak vyřešit doplňkový modul.

Následovala ukázka na francouzském webu, kdy vložený obsah mohl editor vidět v různých částech stránky, zatímco nepřihlášený uživatel jej tam neměl.

Smart Paragraphs - A Personalisation Engine for Nestlé

Ashley Hazle, Lara Fernandes

Díky této přednášce jsme měli možnost nahlédnout pod pokličku webů velké korporace, jako Nestlé bez pochyby je. Mají spoustu webů s jednou kódovou základnou. Hojně využívají modul Paragraphs. Agentury tvořící jednotlivé dílčí weby pak skládají v administraci obsah tvořený právě pomocí dopředu připravených paragraphů. Ty definují hlavní správci webu.

Reálné využití předvedli na webu Perrier spuštěním letos v květnu s 57 tisíci unikátními návštěvníky měsíčně.

Your Drupal Site Personalized Like Netflix

Prateek Jain, Akanksha Singh Lidi z Axelerantu

Zajímavá studie. 71 % zákazníků očekává, že s nimi web/prodejce bude interagovat v reálném čase. 80 % zákazníků očekává konzistenci napříč různými odděleními. 73 % očekává přizpůsobení založené na minulých interakcích.

Příkladem webu, který se tak chová, je Netflix. Vše je tam personalizované. 75 – 80 % shlédnutí na Netflixu je na základě doporučení. A jak to dělá? Sleduje akce uživatele, preference, geolokaci, sentiment.

Získaná data se projevují v obsahových blocích, menu, bannerech, výsledcích hledání, obsahu a vylepšené uživatelské zkušenosti.

V Drupalu se do podobných úprav pustíte s modulem Personalization (jen pro sedmičku), Smart Content, službou Acquia Lift nebo open source platformou Unomi. Následovala ukázka doprovázená otravným štěkotem psa.

Designing for chaos: The design process behind Olivero

Jen Witkowski, Jared Ponchot

Nové téma vzhledu Olivero jste již jistě zaznamenali. Tato přednáška se týkala pozadí okolo jeho návrhu, přípravy a vývoje. Byla zajímavá v tom směru, že i relativně jednoduché téma vzhledu je nutné řádně promyslet do všech detailů. A nezdá se, kolik je to práce.

Drupal má vysoké standardy týkající se přístupnosti. Nové téma mělo být moderní, ale zároveň jednoduché, zaměřené na přístupnost a flexibilní. Mělo by pokrývat potřeby začátečníků při stavbě webu na Drupalu, neplýtvat zdroji a pracovat s různými podobami obsahu.

Návrh vzhledu autoři konzultovali s Driesem Buytartem, Lauri Eskolou, Chritinou Chumillas a Gáborem Hojtsym.

Při návrhu využívali Zoom Mocks. Tedy postup, kdy vezmete kus původní stránky a ve vedlejším návrhu jej ukážete v nové podobě. Působí to velmi dobře.

Zohledňovali věci, které by bylo dobré mít, vs. prvky, které téma musí mít zcela určitě. Pro návrh použili Figmu. Co se týče písma, bylo bez diskuze, že musí jít o široce dostupné fonty.

Když už se bavíme o přístupnosti, Olivero má vyladěné stylování formulářů. Zobrazuje inline chyby, focus/hover stavy a další stavy, kterými formulář prochází. Hodně řešili umístění tabů a také vyhledávací políčko. To je nakonec rozbalovací po stisku tlačítka.

Za velmi dobrý nástroj považují dokumentaci. Pro designéry i developery, když třeba řeší, jakou má mít ten který prvek barvu. Dokumentaci mají ve Figmě ve formě ukázek komponent, prvků a jejich variací.

Co čeká téma vzhledu Olivero dál? Testování použitelnosti, beta level stability (s příchodem Drupalu 9.2 v červnu 2021), dark mód a přepínač barevného schématu.

Taking Maximum Advantage of Drupal Core's Composer Template

Michael Anello

Zajímavá přednáška ohledně použití Composeru s Drupalem. Mnoho lidí prý zatím na dvojku Composeru nepřešlo, což je škoda, protože Drupal si s ním rozumí a Composer 2 je výrazně rychlejší.

Znáte rozdíly v zápisu composer.json?

• ^ zamyká major verzi (první číslo)
• ~ umožňuje poslední číslici verze se měnit

Vyzkoušejte tento zajímavý nástroj, který vám ukáže, které verze balíčku odpovídají zvolenému zápisu s číslem verze. Nejen pro Drupal. semver.mwl.be

Kontrolní otázka? Proč není composer require vendor/name1 vendor/name2 to stejné jako dva require samostatně?

Následovaly smršť praktických ukázek práce s Composerem.

Composer pluginy v Drupalu:

• drupal/recommended-project
• composer/installers – umožňuje instalovat další věci
• drupal/core-composer-scaffold – pokaždé přepsal .htaccess znovu staženou verzí. Nový je robustnější, rychlejší a flexilnější, scaffold věci jsou v assets a jenom je kopíruje, nestahuje. My to pak můžeme konfigurovat a upravit.
• cweagans/composer-patches – přidává Composer patches dependency, umí aplikovat patche na Drupal moduly stažené přes Composer

Zaujal mě příklad, jak pomocí scaffoldu odebrat soubor readme.txt. Autor přidal file-mappings do části drupal-scaffold v composer.json, uvedl cestu k souboru [web-root]/README.txt a napsal k němu :false.

Jak řešit dependency conflict – nothing to install or update?

• composer why-not vendor/name
• composer depends vendor/name
• composer outdated --direct
• composer outdated --minor-only

Někdy pomůže řešit závislost balíčků instalace ne postupná, ale v rámci jednoho příkazu require nebo remove. Nebo prostě smazat složku vendor a pustit znovu composer install. Vyhněte se mazání composer.lock za každou cenu.

Composer 2 je o půlku rychlejší, potřebuje méně paměti, je už kompatibilní s pluginy v Drupalu. Nebo spíše ony s ním.

Drupal initiative leads keynote

Putra Bonaccorsi, Ted Bowman, Len Swaneveld, Neil Drumm, Baddy Sonja Breidert, Gábor Hojtsy

U této přednášky jsem poprvé zaznamenal konferenční znělku. Přednášející povídali o aktualitách ve vývoji tématu Olivero, iniciativě automatických aktualizací podporované EU a hlavních bodech pro jádro Drupalu: bezpečnost, aktualizace přes Composer, aktualizace formou patchů, automatické aktualizace a možnost vrátit se do stavu před aktualizací.

Postřehl jsem nějakou zmínku o projektu The Update Framework, který používá například Joomla nebo Typo 3.

S automatickou aktualizací je zatím problém. Je třeba pořešit vzájemné minoritní aktualizace, změny v databázi, spotřebu paměti Composerem (čemuž hodně pomohla jeho dvojková verze), patchované weby a různé nestandardní instalace Composeru na serverech.

Následovalo pár poznámek o iniciativě Decoupled Menus, ale o ní se více rozpovídal Dries druhý den.

Load test your Drupal website before it is too late

Janna Malikova

Moje první přednáška druhý den konference. Testujte weby dříve, než na ně spadne obří zátěž. A ne, jejich vypnutí, jak jsme viděli nedávno v Česku, aby se zabránilo přetížení, není to správné řešení.

Zvýšený zájem o web může spustit akce v e-shopu. Daňové termíny. První den školy. A řada dalších událostí.

Typy testů:

• load testy umožní sledovat, jestli třeba web reaguje do čtyřech sekund pro nula až 10 000 současných uživatelů zvyšovaných po tisícovce každou minutu.
• stress/spike testy – kontrola webu pod extrémní zátěží
• recovery testy – jak se web zmátoří po poruše, třeba do deseti minut
• scalability testy – jak se škáluje při nad a pod 70 % CPU vytížení
• endurance testy – max 4 sekundy pro 10 000 uživatelů po dobu deseti hodin
• volume testy – query/update/import pro 10K řádků v databázi, upload/download 10 GB videa uživateli a podobně

Nejprve zkontrolujte hosting providera. Pozor na omezenou přenosovou kapacitu. Pokud nejde spustit load testy na hostingu, využijte co nejvíce podobné prostředí ve virtuálu, na AWS/Azure/GCP/Digital Ocean atd. Nastavte infrastrukturu, identifikujte úzké hrdlo.

Nástroje pro testování jsou založené na protokolech (curl, JMeter, Locust, Gatling, k6) či webových prohlížečích (Selenium). Případně jde o SAAS (Flood.io, LoadRunner).

Následovala ukázka testování Drupal Umami s nástrojem Locust. 1000 uživatelů skákajících po 10 až 50 za minutu. Kontrolujte logy a sledujte, co web zvládne a kde je tedy potřeba posílit. Další ukázka předvedla Flood.io a LoadRunner.

Co s vysokou návštěvností? Multilevel cacheování, optimalizace CSS, JS a obrázků. Drupal 9.1 už má lazy loading. Použijte CDN. Vypněte nepoužívané a UI moduly. Logování do databáze nahraďte syslogem. Sledujte zátěž. U prodeje vstupenek nasaďte nějaký čekací systém.

Poslední ukázka povedené přednášky se týkala webu Pfizeru a nárůstu jeho návštěvnosti o 250 %.

Write better CSS by stopping writing any more CSS! How and why to use utility-first CSS on large-scale Drupal websites with Tailwind CSS

Phil Wolstenholme

Na tuto přednášku jsem se těšil z celého DrupalCon Europe 2020 nejvíce. Nezklamala. Perfektně připravený přednášející nasdílel své materiály.

CSS vypadá jednoduše, ale někdy skončí bolehlavem. Má jednoduchou bariéru vstupu, ale rychle roste jeho komplexita. V tomto směru jde o podceňovanou technologii a opravdových CSS expertů zase tolik není.

Čemu v CSS čelíme? Změny a mazání zápisů. Kaskáda a specificita. Překrývání vrstev. Dlouhé styly a spousta media queries. V ukázce jsme viděli CSS na 184 stránek.

Utility first CSS? Jde o způsob zápisu, kdy máte jednoduché selektory s vlastnostmi a vzhled řešíte především množstvím CSS tříd u prvků v HTML.

Citát od Adama Morse: psaní nového CSS by mělo být výjimkou, nikoli pravidlem.

Přednášející pak předvedl ukázku nastylování chatovací bubliny. Nejprve klasickým způsobem s komponentově orientovanými třídami v HTML. A pak s využitím utility tříd, jaké nabízí framework Tailwind.

87 % lidi, kteří použili Tailwind, by jej použilo znova. Nejvyšší míra důvěry z jiných podobných framework, jako Bulma, PureCSS a další.

Není to jako inline styly? Není. S jejich pomocí totiž nevyřešíte media queries, hover/focus/active pseudotřídy, ::before a ::after, postprocessing, globální změny barvy, specificitu.

Konfigurace Tailwindu má designové tokeny. Barvy, fonty. Responsive design to řeší taky.

Jak si všechny ty třídy zapamatuju? Vše je třeba se učit. Každá metodika chce svoje. Toto je založeno na CSS vlastnostech, hodnotách a jejich kombinacích. Pokud pracujete s CSS, naučíte se to rychle. PhpStorm k tomu má napovídač.

Jak se to udržuje? Stavíme systém, ne stránky. Systémy jsou složeny z komponent. Např. šablonu button.twig použijete 100x na různých místech místo toho, abyste na 100 místech zapisovali řetězce utility tříd. Pak se to udržuje velmi jednoduše.

Utility first framework tedy moc nepasuje na weby, které nejsou skládané z komponent.

Z pohledu Drupalu znamená implementace Tailwindu změnu v myšlení při práci se šablonama ve Twigu. Vše, co se opakuje na více místech musí být komponenta, aby specifické třídy frameworku byly na jednom místě. Komponentu pak embedujte třeba do šablony článku. Budete hodně pracovat s objektem Drupal Attribute.

Moduly, které by vás v té souvislosti mohly zaujmout: Components, UI Patterns, Formdazzle, Twig Template Suggester. Mrkněte na skvělý přehled aleksip/component-based-theming.

V šablonách polí máte přístup k nadřazené entitě pomocí element[‘#object’].

Má implementace Tailwindu do Drupalu cenu vzhledem k většímu objemu práce se šablonami? CSS konečně přestane narůstat. Změny budou bezpečnější beze strachu, že se něco pokazí. BEM třídy jsou náročné na zapamatování na rozdíl od utility tříd. Navíc pojmenovávání tříd v BEM znamená přemýšlet i do budoucnosti, jak bude co použito.

Jakmile umíte Tailwind, tak se vývoj neuvěřitelně zrychlí. Bude omezen jen rychlostí úderů do klávesnice.

Pracujeme s kaskádou, nikoli proti ní. Všechny utility třídy jsou jednojmenné se stejnou specificitou. A buď je přidáte nebo ne. Menší kaskádování taky znamená jednoduší ladění. Ale samozřejmě můžeme s kaskádou pracovat i nadále, například pro stylování obsahu v CKEditoru.

Vývojáři nemohou používat třeba darken() který vede k nebrandovým barvám. Utility umožnují jen nastavit hodnoty, takže vynucují konzistenci. Designéři jsou nuceni se držet měřítek a mřížky.

V praxi se ukazuje, že i dva roky po spuštění projektu a následujících úpravách je pak web v dobré formě bez narůstajícího CSS. Přednášejícímu chybí tam, kde Tailwind nepoužívá.

Configuration Management Initiative 2.0

Fabian Bircher, Moshe Weitzman

Spíše než ukázka něčeho konkrétního byla tato přednáška o stavu iniciativy za úpravy konfigurační správy v Drupalu. V osmičce máme deklarativní konfiguraci. Workflow řeší jen přechody mezi staging a deployem.

Iniciativa se nyní zaměří na konfiguraci specifickou pro dané prostředí a dokumentaci. Sdílení konfigurace napříč různými weby je zatím odloženo. Za poslední dva roky se toho moc neudálo a potřebují nějakého koordinátora.

Tip na modul: Config Filter.

Content Architecture using Design Patterns

Adam Juran

Bohužel jsem neviděl jsem od začátku. Ach ten nepřehledný program… Ukázka grafického layoutu a rozdělení na prvky, které představují jednotlivé komponenty. Praktická ukázka Twigové šablony pro úvodník obsahu s embedováním komponenty v šabloně a použitím filtru |field_value.

Následovala praktická ukázka s embedováním stejné komponenty v úplně jiné šabloně s odlišným předáním dat.

An overview of Drupal front-end component integration methods

Brian Perry

Tohle byla taková rychlá přednáška a souhrn nejrůznějších metod pro komponentově orientovaný přístup v Drupalu.

Standardní šablony (bloky, nody, paragrafy, layouty) jsou ve složce templates, integrované komponenty jsou mimo tuto složku a vyžadují další úpravy, aby se aplikovaly. Ukázali jsme si, jak na šablony komponent v samostatné složce.

Modul Component, vytváří jmenné prostory pro Twig pro přístup k šablonám v nestandardních lokacích, např. kvůli Patternlabu.

Dvě možnosti, jak předávat proměnné do embedovaných komponent. Buď se namapují ve Twigu s |field_value (modul Twig Field Value) nebo se vytvoří nové proměnné v preprocessovacích funkcích a v embedu se pak komponenta volá bez zápisu předávaných proměnných.

Tipy na řadu dalších modulů a témat vhledu: Twig Tweak, Emulsify, Gesso, Shila a Particle. UI Patterns, Layout Builder. Component (nikoli Components) pro decoupled weby. Component Blocks – vystavuje UI Patterns do Layout Builderu. PatternKit. Wingsuit – nástroj pro tvorbu Twig UI komponent se Storybookem.

Připravené komponenty - Bolt Design System, Compony project, modul Single File Components s Vue syntaxí.

Driesnote

Bezesporu vyvrcholení celého DrupalCon Europe 2020. Každý přece čeká na přednášku od autora Drupalu, ne?

Začal ale předřečník Alejandro Moreno. Chcete nějaké předměty s logem Drupalu? Nakoupíte je na drupal.org/swag. Budoucností je DXP:

• Acquia Campaign Studio (Mautic)
• Acquia Personalisation
• Customer Data Platform
• Acquia Site Studio
• Acquia Migrate
• Acquia Cloud IDE

Alejandro poděkoval komunitě.

Dries Buytaert v poklidném tempu povídal především o třech věcech: co udělal dobře, co by udělal jinak a co jej za bezmála 20letou historii Drupalu překvapilo. První prezentace Drupalu byla v roce 2004, a to s Drupalem 4.5.0.

Drupal dnes používá řada velkých mezinárodních organizací a neziskovek – Unicef, ACLU, WaterAid, Lékaři bez hranic. Má tedy potažmo i velký dopad na společnost, ve které žijeme.

Co se udělalo dobře:

Od prvního dne inovovali, modulární design, byl tam modul Public diary na blogování dříve, než se stalo blogování populárním. Drupal byl dříve než sociální sítě, YouTube, smartphony, tablety. 2006 měl jQuery jako první CMS.

Ne každá technologie za tu dobu vydržela. Proč Drupal přežil? Pracovali na věcech, které zajímaly koncové uživatele, řešili jejich problémy. Nebáli se nových technologií. Umožnili snadné přijetí těchto změn koncovými uživateli.

Statický web, dynamický, mobilní web, DXE – Digital Experience Era – integrovaná řešení, znovu použitelný obsah, různé kanály a modality.

PHP trošku klesá, popularita JS roste raketově. Takže 4. vlna webu je DXE a JavaScript. Pro mnohé možná nenápadná, ale nesmírně důležitá iniciativa s JavaScriptovým decoupled menu pro Drupal 10 bude základem pro další znovupoužitelné komponenty.

Drupal by měl být nejlepší decoupled CMS a mít mnoho integrací pro JavaScript. Trošku mi to připomíná Symfony, které se také opět trochu obrací na JavaScript a propojení s ním. Trend nezastavíš.

Další iniciativy v plném běhu jsou automatické aktualizace, nové téma vzhledu. Kde je naopak potřeba pomoci, tak v něčem, co Dries nazývá easy out of the box (téma Claro, Layout Builder + Media) a příprava na Drupal 10.

Co by Dries udělal jinak:

Dlouho se soustředil na estetiku Drupal kódu, ignoroval uživatelský pohled na věci. Trvalo mu dlouho změnit čistě vývojářsky orientovaný pohled na Drupal. V reálu je nutné totiž pracovat i na marketingu, propagaci značky, dokumentaci, jednoduchosti používání. Nebo instalaci na jedno kliknutí.

Vzhledem k tomu, že je Drupal open source a Dries z těchto kořenů hodně vycházel, odmítal formování komerčního světa okolo Drupalu. Agentur, které k němu nabízely své služby. Myslel si, že komerční zájmy Drupal zničí. Že ničí open source. Opak byl pravdou. 2/3 příspěvků do vývoje Drupalu jsou dnes sponzorované firmami. Více jak tisícovka organizací do Drupalu přispívá.

Co Driese překvapilo:

Dopad Drupalu na ostatní je stále důležitější. Stejně jako řešit tyto věci. Otevřený web. Lidi, kteří Drupal přímo nepoužívají. Koncové uživatele. Příspěvky do kódu. Sebe sama. Důvody PROČ se u každého v čase mění.

Pro mě bylo důležité zjištění, odkud se vlastně bere ten důraz na inkluzi, diverzitu a další věci, kterými je komunita okolo Drupalu prostoupena. Pořád mi to vrtalo hlavou. Asi mám totiž také ten developer first přístup k věci. Je mi jedno, co je kdo zač. Zajímá mě jeho výstup. A nemám rád povídání o diverzitě na přednáškách o vývoji.

Pokud jsem to dobře zaznamenal, Dries o tom dříve moc nepřemýšlel. Pak na nějaké keynote udělal sexistický vtip, další jeho poznámky se nelíbily lidem mimo Evropu. Bylo to pro ně nekorektní. Uvědomil si, že to může někomu ublížit. Že diverzita dává smysl. Že každý člověk je cenný. Drupal je dnes lepší díky přístupnosti.

Slovo si dále vzala Heather Rocker z Drupal Association. Povídala o humanitárním dopadu Drupalu. O tom, jak se podílí na pomoci boje proti Covidu. Jak jsou důležití partneři. Diverzita. Kultivace talentů. Děkovala partnerům.

Milníky v roce 2020: vydání Drupalu 9 v oznámený den, nové logo, 1000 merge requestů, z nichž je už mergováno 400. Služba Drupal Steward týkající se bezpečnosti. A zase diverzita. Drupal Certified Partners.

Co nás čeká v Drupalu 10? Live Deployment Previews umožňující dopředu sledovat změny ve frontendu. Drupal.org tooling v Drupalu 10. Zbavení se závislosti na jQuery a využívání nativního JavaScript uvee webovém prohlížeči. Automatické aktualizace s využitím Composeru 2. Na Drupal.org podpora pro non-PHP komponenty.

D7 & D8 go End of Life in 2021 - What does that mean, and what are my options?

Michael Meyers, Jeremy Andrews

Přednášející neponechal nic náhodě a od okolního rušivého světa se zavřel do auta, odkud vysílal. Začal informacemi okolo konce životnosti Drupalu 7. Mělo se tak stát 3. 6. 2020. Popularita mu prodloužila život do listopadu 2021, kvůli COVIDu se pak životnost Drupalu 7 prodlužuje ještě do listopadu 2022.

Proč Drupal 7 ukončit navzdory jeho popularitě? Je to 9,5 roku stará platforma. V listopadu 2022 mu bude 12 let. Nejde podporovat D7, D9 a D10. Rovněž vývojáři, kteří na jádře Drupalu pracují, se nechtějí otáčet za technologií starou více jak deset let. Je třeba inovovat, což je ostatně motorem vývoje Drupalu.

Drupal 8 má však jiná pravidla pro ukončení životnosti. Už jen proto, že přechod na Drupal 9 je velice snadný, jde v podstatě o stejný, mírně vylepšený systém. Je postaven na Symfony, Twigu, Guzzle. Tyto závislosti taky budou mít konec životnosti a přecházejí na novější řadu, stejně tak musí Drupal. Jeho číslování je sémantické, a tedy se změní major verze z 8 na 9.

Co dělat, pokud zatím běžíte na Drupalu 7? Nic je také řešení, ale tomu se nejlépe vyhněte. Migrovat na Drupal 9. Což ale bude finančně náročné. Levnou alternativou je vypnutí webu nebo předělávka na statický archiv.

K dispozici bude prodloužená podpora D7ES – D7 Extended Support. Není to nová záležitost, podobnou prodlouženou podporu nabízejí firmy i pro Drupal 6. Pokud bude poptávka, přijdou nabídky. Poskytovatelé D7ES budou muset mít testované patche pro jádro Drupalu 7 a některé contrib moduly, podpora bude muset běžet minimálně tři roky.

Logicky to nebude zadarmo. Ale nikdo vás samozřejmě u Drupalu 7 nenutí zůstat. Oficiální poskytovatelé budou na veřejném seznamu. Dostanou se tam po aktivním zapojení v Drupal Security Teamu a účasti na vývoji jádra Drupalu. Budou mít vlastní repozitář kódu a vlastní číslování oprav. Distribuce updatů bude plně v jejich režii.

Drupal 8 žádnou prodlouženou podporu mít nebude, proto přejděte na devítku.

Odhady: Přes půl milionu webů poběží na Drupalu 7 dál po skončení jeho životnosti. Vznikne silný ekosystém prodloužené podpory a Drupal 7 se bude objevovat ještě dalších pět až sedm let. Pokud to ale pro vás bude finančně únosné, migrujte.

Advanced front-end debugging techniques for back-end developers

Anna Mykhailova

Zajímavý přehled vychytávek pro ladění frontendu ve webovém prohlížeči. V aktuálním Firefoxu najdete spousty vychytávek: Grid Inspector. Flexbox Inspector. Font Inspector pro ladění typografie. Ladění přístupnosti. Po zapnutí gfx.webrender.all na hodnotu true v nastavení about:config aktivujete simulátor zobrazení s barevnou nedokonalostí zraku. Pomůže při testování přístupnosti webu.

Ikonkou s modrým puntíkem v konzoli zapnete nové okno s víceřádkovým režimem pro zadávání JavaScriptu. Ladička JavaScriptu umožňuje zapínat breakpointy. Na Firefoxu je fajn sledovat připojení událostí k jednotlivým uzlům v DOM.

Tip: Zkuste Firefox Developer Edition.

Chrome má testování přístupnosti o něco povedenější. Najdete tam kapátko pro výběr barev u analýzy barevného kontrastu. Nabízí také sbalování kódu při ladění JavaScriptu.

Na závěr jsme probrali ladění na mobilních zařízeních. Tedy ne změnu viewportu, ale skutečná zařízení. Velmi dobře to umí Safari. Dovede to i Chrome s Androidem připojeným přes USB po návštěvě adresy chrome://inspect#devices.

Centring humans and their rights in Open Source Design

Eriol

Začátek třetího dne DrupalCon Europe 2020 byl ve znamení dlouhatánské keynote, která podle mě nemá nic společného s Drupalem. A jéje. Za tento svůj názor jsem to pěkně schytal. Každý přece ví, že většina keynote na většině DrupalConů nemá nic společného s Drupalem. Nežijeme prý na ostrově a je potřeba se dotýkat všech témat okolo života vývojáře. Okamžitě na toto zdůvodnění přišly twitterové lajky.

OK. Beru to. Chápu to tak, že se svým developer first názorem asi nemám na DrupalConu co dělat a jsem s ním osamocen. Holt tedy můj poslední DrupalCon na delší dobu.

Já prostě nevím, proč by na vývojářské konferenci měla být probírána témata okolo lidských práv a podobných věcí. Je fajn, když se na konferencích nebudeme urážet kvůli čemukoli, ale snad jsme slušní lidé i bez celodenní indoktrinace.

Nechápu, proč progresivisté všech druhů otravují vývojářské konference jako mor. Pokud budu chtít rozjímat na lidskými právy, diverzitou, inkluzí a dalšími věcmi, tak si pustím třeba TEDx. A ne konferenci, kde bych čekal věci okolo webového vývoje.

Bez ohledu na téma, tato přednáška byla naprosto otřesná. Přednášející dělala za každou větou tak dlouhou pauzu, až jsem měl pocit, že brzy spadnu únavou pod stůl. Její projev byl tak nudný, až hrůza. Korunu tomu nasadila, když se musela deset sekund prodýchat.

A znovu opakuju. Toto hodnocení nemá co dělat s tématem přednášky. Viz mé následující hodnocení podobného tématu odpoledne. Potíž je v tom, že jakmile zkritizujete progresivistu ohledně formy přednášky, bere to jako útok na sebe a své vidění světa. A přidá se k němu jeho věrná suita se stejnou krevní skupinou. Já si přitom v reálném životě rád povídám s lidmi, co mají jiný názor než já. Vždy z toho vyjde minimálně nějaké zamyšlení.

Solr versus Elasticsearch, can we settle down please?

Valerie Valkenburg-Gibson

Otráven nudným úvodem posledního dne konference jsem poté přepínal mezi několika přednáškama. Zde jsem postřehl povídání o nástrojích Algolia, Eloquent ORM, Kibana, SOLR a modulu ElasticSearch Connector.

Add end to end tests to your Drupal site in one hour with CypressIO

Fran Garcia-linares

Přepínám dál. Mnohem živější přednáška se zajímavým tématem testování webu s nástrojem CypressIO. Velmi rychlá instalace a spuštění:

• npm install cypress --save-dev
• touch cypress/integration/first_test.js
• ./node_modules/.bin/cypress open a kliknout na first_test.js nebo npx cypress open

Přednáška byla doplněna řadou praktických ukázek a přesvědčila mě, abych si CypressIO taky vyzkoušel.

Understanding Automated Tests in Drupal

Ridhima Abrol a Sujeet Kumar Verma

Testování kódu (nikoli frontend věcí) je podle mě nuda sama o sobě. Takže ani přednáška nemůže být kdovíjak strhující. Ale v rámci možností zvoleného tématu bylo fajn si tohle poslechnout. Povídání o automatických testech, Simpletest, PHPUnit Test Frameworku. Konfiguraci. A použití.

How to manage 70 sites and not loose your sanity (sponsored talk by Annertech)

Anthony Lindsay

Od této přednášky jsem čekal nějaké bezva tipy a zkušenosti z praxe. Že ukážou nějaký nástroj, skript, workflow. Ve skutečnosti to ale bylo spíše nudné povídání o tom, co teoreticky dělat.

Abyste zvládli management velkého počtu webů tak automatizujte, co jde. Zjednodušujte. Opakujte. Skrývejte. Dopředu ověřte, zda hosting má nějaké API. Zálohujte. Používejte verzování. Testujte.

Jak říkám, nic objevného.

Keynote: Building Diverse, Inclusive and Equitable Communities

Siri Chilazi

Další relativně dlouhá keynote o tématech, která nesouvisí přímo s programováním a tvorbou webu. Když už na konferenci jsou, proč mají prostor větší než přednášky, které svým názvem odpovídají názvu konference? Nechápu. Proč si neuděláte něco jako DiverzityCon Online 2020?

Ovšem pozor. I zdánlivě nudné téma jde udělat tak, aby Polzera, kterého to nezajímá, drželo a nepustilo. Nepřepnul jsem (nebylo kam) a nešel dělat něco jiného. Přednášející Siri Chilazi totiž byla úžasná.

Má perfektní angličtinu, která se dobře poslouchá. Je evidentně zkušený spíkr. Ví, o čem povídá, má to hlavu i patu, ať souhlasíte nebo ne.

Poznačil jsem si tři věci. Pěkný příklad behaviorálního designu. Chcete, aby lidi šetřili energii v hotelu. Tak je jako manažer prosíte, aby při odchodu z pokoje zhasínali. Prosby nepomohou, tak jim slíbíte nějaký bonus, třeba voucher do baru. Nepomůže. Nenechají se omezovat či ovlivňovat. A pak prostě do pokojů dáte takovou tu zástrčku, kam je po příchodu nutné zasunout kartu od dveří, jinak světlo nesvítí. A hele. Najednou to všichni dodržují, protože jim nic jiného nezbude. A vlastně nemají negativní pocit z toho, že byste je k tomu nutili.

Od někoho z posluchačů padl dotaz na rozdílné platy mužů a žen. Já se přiznám, že nechápu, proč třeba u nás berou ženy na stejné pozici méně než chlap. Prostě mi to nepřijde normální. Siri odpovídala, že platby by neměly být založeny na rase, genderu, náboženství, jestli je někdo muž či žena nebo třeba nově příchozí imigrant. Plat by měl odpovídat jen a pouze výkonu a schopnostem. Absolutně s tím souhlasím.

Poslední poznámka, padl dotaz na inkluzivní jazyk. Že v některých řečech je zkrátka zakotvena maskulinita. Jmenovali nějaké jazyky, já bych řekl, že to tak máme i v češtině. A prý to mínění člověka hodně ovlivňuje. Hm, asi proto jdou všechny tyhle moderní progresivistické trendy ze zemí, kde se mluví poněkud bezpohlavní angličtinou (a pokud jsem dával pozor, tak i severskými jazyky).

Frontend performance workshop

Mike Herchel a Ben Morss

Vývoj naštěstí třetí den odpoledne také nechyběl. Ale workshop byl tuze dlouhý a ke konci už jsem mentálně nestíhal vše sledovat. Byla to nicméně pěkná rekapitulace věcí, které u nás školí třeba Martin Michálek na Vzhůru dolů.

Jeden z přednášejících, Ben, je developer advocate z Google. Podklady k prezentaci zde. Proč udělat web rychlý? Dvousekundové zpoždění zvyšuje rozladěnost lidí (to je fakt, stačilo mi čekat při načítání programu na konferenčním webu). Když po kliknutí na tlačítko čekají déle, jak 100 ms, přemýšlí, jestli to funguje. Mobilní uživatelé ztrácejí zájem po 4 až 8 sekundách čekání. Weby načtené do dvou sekund na mobilu mají větší obrat.

Od roku 2018 je rychlost webu na mobilu ranking faktor ve výsledcích hledání na Google. Letos představil Core Web Vitals, od května 2021 budou taktéž hodnotícím faktorem. Co je rychlé, se zkrátka neustále přehodnocuje.

Následovala ukázka superpomalého webu. Jeden z přednášejících si přitom stihl etudu na klavíru. Bylo to takové rýpnutí přednášejících. Ten pomalý web totiž byly stránky events.drupal.org.

Padlo, že lidi v Drupalu řeší cache, SQL dotazy a věci na backendu – o tom byl včerejší workshop. Je však potřeba řešit i frontend:

• TTFB – time to first byte
• FCB – First Contentful Paint
• TTI –Time to Interactive
• Speed index – jak rychle se stránka vizuálně jeví jako načtená
• CLS – Cumulative Layout Shift
• FID – First Input Delay

Drupal prý vychází ve statistikách rychlosti lépe, než Joomla nebo WordPress. Nevím ale zdroj.

Jak měřit rychlost webu?

Chrome Dev Tools a záložka Performance. Zaujalo mě analýza délky zpracování CSS pro každou jeho definici.

• PageSpeedInsghts - drupal.org tam měl na mobilu 10/100 !!!
• Lighthouse
• WebPageTest
• Search Console
• Chrome UX Report

Pro monitorování reálných uživatelů zkuste nástroje SpeedCurve, Catchpoint, Boomerang a New Relic.

Co se obrázků týče, Google sponzoroval implementaci nativního lazy loadingu do Drupalu 9.1. Formáty obrázků:

• GIF – nepoužívejte
• JPG – pro fotky bez průhlednosti
• PNG – vysokokvalitní s průhledností
• SVG – vektorové
• WebP – malé, umí alpha průhlednost, umí už i Safari na Big Sur, v Drupalu modul WebP
• AVIF – fakt malé, umí alpha, podporuje jenom Chrome, v Drupalu modul AVIF fungující skrze třetí stranu, PHP GD AVIF neumí. Nasadit můžete dneska v pohodě, a to díky fallbacku ve značce picture.

Vyzkoušejte zajímavý nástroj pro sledování rozdílů v obrázcích a různých formátech: squoosh.app.

Na záběr se přednášející věnovali AMP. Až na tu ubíjející délku pěkný workshop, svižné tempo a hlavně zábavní školitelé. Škoda příšerného zvuku u jednoho z nich.

Závěrem? Můj poslední DrupalCon na delší dobu

Co říci závěrem? Když jsem sledoval radost hlavních organizátorů na konci třetího dne (dneska je ještě contributors workshop), tak mě vlastně i dost mrzí, že jsem takto kritický. A říkal jsem si, zda se na článek nevykašlu. Ale zveřejnil jsem jej. Nekritizuju úplně všechno a myslím, že ta kritika je alespoň částečně objektivní a nezaujatá.

Pár nových věcí jsem se dozvěděl. Těch technických nebylo tolik. Vypíchnul bych asi hlavně povídání o testování vhledu a přístupnosti, Tailwind a embedování komponent ve Twigu. A samozřejmě Driesnote. Je zajímavé sledovat, kam se Drupal ubírá a držím iniciativně okolo JS menu palce. A taky konečně vím, jak to má Dries s progresivistickými tématy. Respektuju to. A chápu. Díky tomu pohledu osloví širší publikum.

Jak jsem už napsal výše, zjevně se tato konference svou náplní míjí s tím, co si podle názvu představuju. Nechci platit časem ani penězi za témata okolo lidských práv, dobroty a světového míru. To neznamená, že jsem a priori proti nim. Ale mám jiné priority a povinnosti, než abych tím trávil čas. Jestliže se DrupalCon ubírá tímto směrem, nemám tam co pohledávat.

Možná si příště koupím jen lístek na jeden den, kdy bude hlavní přednáška od Driese, abych byl v obraze. Druhý cvok, který by totiž psal z konference tak dlouhý zápis, jako já, v Česku asi není.

Mám pocit, že jsem už na DrupalConu kdysi byl a také se moc nebavil. Naproti tomu komornější akce DrupalCamp jsou skvělé. V Česku, na Slovensku, v Rakousku. Pronikl jsem online i na jeden americký. Vždy jen technická témata a nikoho při registraci nezajímalo, co mám mezi nohama a jestli mi nemá náhodou onikat jako císaři pánu.