Událost posledních dvou let…

Uznávám, je to trochu nadsazený titulek, ale po víc jak roce a půl nedobrovolného home office to pro mě byla jednoznačně největší kulturně vzdělávací událost od roku 2019. Možná proto jsem neviděla vše, co jsem si naplánovala – networking se doháněl ve velkém. Takže WebExpo pro mě stále pokračuje – dokud nezkouknu ze záznamu, co jsem prošvihla a co jsem vidět nemohla, protože jela tři pódia zároveň.

O rozjezd konference a moderování hlavního sálu se letos postaral vždy zábavný Vitaly Friedman, a jak by ne, je to výtečný speaker. Letos nás obohacoval distanční zábavou – přivezl cca 2kg litevských sladkostí a bavil se trefováním lidí, kteří si o ně řekli. Mušku má solidní a bonbony zvládl doručit i na obě úrovně balkonů.

Po úvodní trefovací zábavě, která posloužila jako rozptýlení od lehce odsunutého startu, protože venku ještě čekala fronta lidí, přišla na podium Šárka Štrossová a Petr Burian z Livesportu zahájit první hybridní WebExpo, tedy konferenci limitovanou počtem živých účastníků a současně streamovanou účastníkům mimo. Zároveň velké množství přednášejících ze zahraničí bylo na konferenci pouze virtuálně.

From surreal to hyperreal: How sunthetic media is driving a creative revolution – Chris Umé

První rozjezdovou přednášku měl Chris Umé a přednáška byla o deep fake videích. Co je deep fake? Když vezmete záznam reálné osoby a necháte ji dělat nebo říkat něco, co se nikdy neudálo. Přednáška ukázala možnosti a omezení nových způsobu produkce deep fake videí, jak je rozpoznat, jak je vyrábět a taky o (ne)etice deep fake. Hlavní částí prezentace byla různá videa – hlavní hrdina deep fake videí od Chrise je Tom Cruise – tedy jeho mladší verze. Předloha videa je natočena s hercem, který trochu vypadá jako Tom a počítačovou manipulací je na jeho obličej naroubován obličej slavného herce.

Je několik způsobů jak dělat deep fake – můžete pouze manipulovat s ústy člověka v reálném záznamu a nechat ho tak říkat něco, co nikdy neřekl, nebo můžete na herce našroubovat obličej někoho jiného. Celou přednášku tu přepisovat nebudu, ale odkaz na pár výtvorů, ať si tu lehce mrazící zábavu užijete, sem dát můžu.

Research OPS war stories & triumphs – Kate Towsey

Kate Towsey povyprávěla pár válečných historek, jak zavést výzkum do výzkumem příliš nepolíbeného Atlassianu, jak vybudovat kulturu výzkumu a vybudovat týmy od nuly, respektive od jednoho člověka k padesáti za dva roky.

Pokud jsem si z přednášky odnesla něco zásadního, byla to rada nedělat velké sliby a že rychlé výsledky nemusí být to, co chcete nebo potřebujete.

Cooking up efective shared references – Eric Reiss

Další přednáška velkého sálu Lucerny byla více filosofická a začala úvahou o tom, jak vnímáme významy slov, ikon a gest. Co jsou tedy sdílené reference? Eric vysvětlil, že vytváření kontextu pomáhá chápání daného pojmu univerzálněji pro lidi z různých odvětví, různých znalostí, vzdělání, ale i národností. A přidal různé příklady z internetu a světa médií, kde nechápání kontextu vytváří nefunkční reklamy, prodejny a e-shopy bez zákazníků.

Tam kde je obsah králem, kontext je královnou („if content is king, the context is queen“) – kvalitní obsah webu není jen o tom, že si najmete nejlepšího copywritera, ale že vytvoříte obsah, kterému budou cíloví čtenáři rozumět. Pokud prodáváte nejlepší boty do hor, zákazníky nebude zajímat technologie výroby a obuvnický žargon – jen to, zda boty vydrží několik let, nebude do nich téct a nezničí nositeli nohy.

Vytváření kontextu tedy je o dodání všech potřebných vjemů, aby pozorovatel pochopil, o jaké věci je řeč – kontext je text k obrázku, ale i obrázek k textu. V e-shopech je kontextem k obrázku i ukázka velikosti objektu k jiným běžným objektům, jejichž velikost známe (třeba papír A4 je všude stejný). Zajímavý postřeh – nyní víme, kolik váží Erikova bota.

Just curl it – Daniel Stenberg

Samotný autor cURL nám převyprávěl 25 let dlouhou historii tohoto CLI nástroje a nazval jej „swiss army knife of internet transport“, prostě švýcarák datového přenosu přes internet. A pochlubil se, že se používá ve všech zemích světa a na Marsu. A je stále Open Source.

cURL v číslech:

• 950 autorů a 2500 contributorů
• podporuje 26 protokolů a certifikátů
• release každých 8 týdnů a všechny verze jsou zpětně kompatibilní
• má cca 170 000 řádku kódu a 80 000 řádků má jeho dokumentace
• funguje na 86 operačních systémech a 22 architekturách CPU
• pyšní se 10ti miliardami instalací

Doporučení autora? Nejzneužívanějším flagem je -X a máte se mu vyhnout, jak to jen jde. A kromě verbose existuje i ukecanější verze –trace-ascii.

Více případně na: everything.curl.dev

Coding a 4K time-lapse camera that continuously captures for $100 with open-source tools – Steven Wright

Tak tohle byla velká vizuální paráda. Steven je kromě programátora také nadšený fotograf a nadšením se myslí ochota vylézt kamkoliv za jakéhokoliv počasí kvůli instalaci kamery. Pro svou přednášku umístil svůj časosběrný fotoaparát řízený Raspberry PI kousek od Karlova mostu a sesbíral celodenní světelné změny, lodě, kachny… do zajímavé série. Za pomocí open source nástroje v Pythonu pak upravil fotografie tak, aby se do sebe postupně vpíjely a přechody nebyly příliš ostré. Zároveň vysvětlil různé problémy časosběru a jak je řešil.

Ukázka na youtube:

Mimoto Steven po konferenci běhal s foťákem, takže kdokoliv z nás se může jednou najít někde „lapsnutej“, jak se jeho obličej táhne v čase někam jinam.

Changing from within – how to implement service design in a startup – Shani Brusilovsky

Ve zdravotnickém startupu se Shani ocitla až po několikaleté praxi v několika odvětvích. Začátky pro ni byly trochu krušné, a tak nám představila svůj návod, jak prosadit svůj názor mezi mnoha lidmi různého zaměření a najít spřízněné duše.

Design služeb podle ní potřebuje holistický pohled zahrnující chápání několika odvětví – vizuální design, UX, psychologii a doporučila bibli This is Service Design Doing.

Kam kráčí český e-government?

Podvečerní chuťovka pod taktovkou Michala Bláhy z Hlídače státu přinesla lehký náhled do IT sekcí dvou ministerstev a jednoho úřadu pod ministerstvem financí (MF). Padlo několik základních otázek: co se povedlo, co se nepovedlo, kolik lidí na práci kdo má a jaký je hrubý rozpočet, a co byste změnili, kdybyste měli neomezeně peněz a lidí k dispozici.

• Na ministerstvu spravedlnosti (MS) Přemysl Sezemský dokončil zavedení zvukotechniky a nahrávání do soudních síní a pracuje se na zavedení automatického přepisu jednání do textu.
• Na justici stále chybí elektronické spisy.
• Zadávání zakázek na digitalizaci a její implementaci na MS dělá 10 lidí a dalších 20 na odboru. Kolem rozpočtu padlo velké číslo, ale nebylo jasné, čeho přesně se týká. Raději neuvedu.
• Martin Podveský z Generálního ředitelství cel (GŘC) pod MF zavedl centrální registr pro vymáhání pokut a od 1. 10. bude zavedena plně elektronická komunikace pro celní prohlášení přes českou poštu (ano, už žádné ježdění na Smíchov) a brzy i pro DHL a jiné dopravce.
• Platby DPH lze ovšem zatím dělat jen příkazem k úhradě, protože stát nechce utrácet za transakční poplatky bankovních karet. Ale prý umí QR kódy a okamžité převody.
• Na digitalizaci na GŘC pracuje kolem 15 lidí a jejich rozpočet na údržbu a vývoj systémů je cca 80 miliónů ročně.
• Za Ministerstvo vnitra mluvil Roman Vrba a prozradil nám, jak získat více uživatelů datových schránek – zavede se jejich povinnost pro všechny živnostníky. Od nového roku se tedy čeká velké zvýšení počtu uživatelů datových schránek (velký úspěch, ehm)
• Dokonce se povedlo snížit poplatek za odeslání zprávy z datovky z 15 Kč na 5 Kč, čímž je jeho cena nyní jen asi pětisetnásobek jeho nákladu.
• Zavedli Portál občana, bankovní identitu a doklady lze nyní zřídit online.
• Bohužel se jim nepovedlo nahrát fotografie z dokladů na portál občana, ačkoliv je to kompletně připraveno.
• I když IT sekci na vnitru obsluhuje 50-60 lidí, tak podporu datových schránek (kterých je přes milion ) zajišťují pouze 3 lidé.
• Většina lidí je na pozicích hrazených z evropských fondů.
• Rozpočet na IT infrastrukturu ministerstva vnitra je kolem 1 miliardy.

Co tedy blokuje rozvoj e-governmentu u nás?

Protože jsem náhodou kdysi na jednom ministerstvu švihlé chůze pracovala a čirou náhodou v oblasti financování IT projektů, tak mě ihned napadla jedna odpověď – zákon o veřejných zakázkách. Dva ze tří oslovených odpověděli stejně. Dalším nešvarem je neochota úředníků zavádět „novoty“, protože by mohli přijít o místo a všeobecně ve státní správě chybí invenční a zkušení lidé prostě proto, že je stát nezaplatí.

Pokochejte se platy v článku Platy státních úředníků 2021 – ❤ Pracomat.cz

Pauza na networking

V průběhu dne jsem byla pozdravit Wrikery v zelených tričkách (co že dělá ten Wrike? Jiru, která není Gojira), zasoutěžila jsem si s Livesportem o elektrickou koloběžku, protože Dan Srb tvrdil, že před dvěma lety dokonce něco vyhrál a za úpis krví/e-mailem se navíc dal získat žeton na hot dog. Outreach měl kromě bonbonů i roztomilé zápisníky tak akorát na psaní haiku. Celkem často jsem se točila kolem stánku Doubleshotu, hned naproti LMC stylově kouzlili čaje do konviček… prostě dlouho nepoznané rozmazlování.

Po e-governmentu jsem se šla kouknout do Retra na večírek Productboardu si dál užívat networking a dát si pár skleniček. Jejich bingo jsem ovšem nějak nestihla.

Co se seběhlo druhý den?

Getting forms UX right: from checkboxes to dropdowns – Vitaly Friedman

Náš letošní moderátor si za cíl své přednášky dal obhajobu několika interaktivních prvků, které nás na webu dlouhodobě rozčilují – přebujelé menu vyskakující na :hover, neaktivní tlačítka a carousely. Samozřejmě v podání obsahujícím dostatek vtipných komentářů a videí.

Carousel, interaktivní obrázková galerie, rozčiluje svými puntíky a nevhodně umístěnými šipkami kdekoho. Nejhorší je, když nějaký obrázek zaujme a v tu ránu okamžitě ujede do pryč a přes puntíky hledáte a on stále ujíždí… Lepší řešení je umožnit zastavit animaci, namísto puntíků nebo čísel dát popisek, případně slider, používat náhledy obrázků. Šipky na posunutí na další obrázek je nejlepší mít pod obrázkem, protože je to nejvýhodnější pozice na mobilu.

Nekonečné scrollování na stránce je něco, co mě opravdu přesvědčí hledat zboží jinde. Ještě spíš pokud zboží nejde rozumně filtrovat. Rozdělení na stránky je nejpopulárnější, ale také nejpomalejší. Častěji se nyní používá „Načti více produktů“, které prý pomáhá dalšímu procházení stránek a větším prodejům u e-shopů.

Zanořené několikaúrovňové menu, které se rozklikne na „hover“ a zmizí jen co jedním pixelem vyjedete kurzorem z jeho aktivního pole je známá noční můra. Lepší řešení jsou menu s rozklikávacím podmenu a všeobecně méně položek menu je více.

Co s neaktivními tlačítky? Někdy je lepší nechat uživatele projít neúplným formulářem a validaci udělat později, případně pokud nechcete aktivovat tlačítko, řekněte uživateli proč.

Rada na závěr – pokud si náhodou kupujete letenku od Ryanairu a nechcete se od nich nechat pojistit, „nechci pojistit“ je v dropdownu mezi státy Denmark a Finland jako „Don’t insure me“.

Keep scrolling – Cassie Evans

Pokud hračky na webu, klikátka, táhlíčka a animáčky jsou vaše parketa, podívejte se na knihovnu ScrollTrigger. Tahle knihovna udělá scrollování webu zábavnější pro uživatele a ušetří dost času s programováním.

Proč si hrát se scrollem? Kromě toho, že je to nejčastější haptická interakce s mobilními přístroji a webem a zvládnou ji i děti do 3 let, nabízí stále možnosti, jak zaujmout uživatele a nabídnout mu dějovou linku na webu. Animace, které doprovází scroll by ovšem mělo být možné vypnout. Někdo spěchá, chce najít informaci a hejblátka ho rozčilují, jiným lidem se může z animovaných věcí dělat špatně. A ne každá animace je potřeba.

Vyzkoušejte sami: ScrollTrigger – Plugins – GreenSock

OH MY ROBOT: designing emotional connection between users and their robots – Hadar Maximov

Má člověk emocionální vztah ke svým zařízením? Nadáváte Siri nebo Alexe? Bude Vám líto robota, do kterého někdo kopne?

Zajímavá odpověď je, že často máme nějakou citovou vazbu, více na přístroje, které s námi nějak komunikují. A o tom, jak navrhovat interakce robota s člověkem a proč, nás informovala Hadar.

Je přípustné agresivní chování člověka k robotu, tak jak se to často stává policejním robotickým psům? Neublíží jim to a ani nebudou mít trauma jako ti živí psi. Ale ignorování a tím i schvalování takového chování může postupně vést k většímu násilí k živým zvířatům i lidem. Navíc to dává negativní vzor ostatním, například dětem, které nebudou chápat, že mlátit robotického psa a živého psa je rozdíl. Měl by tedy vzniknout etický kodex chování k robotům?

Vychovávat lidi ke kladnému vztahu k jejich robotovi má své výhody – lépe se o něj stará a robot pak má lepší životnost, lépe slouží a majitel má pak i v oblibě značku svého robota.

Jak by měl robot komunikovat, aby jej měl uživatel rád:

• v první osobě
• přístupným jazykem bez technického žargonu
• komunikovat chystané akce (jedu ti posekat trávník)
• používat gesta správně (u asistenčních robotů, roomba na vás mávat asi nemusí)
• nepožadovat všechny údaje o uživateli ihned
• fungovat více méně out of the box (proto jsou mobilní telefony přednabité)

A navíc – etickým chováním k robotům máme šanci zabránit všem robotickým apokalypsám vymýšleným od dob RUR.

Core web vitals – Martin Splitt

Google ranking je asi nejvíc spojován s SEO, ale není to jediný parametr, který vás může dostat jak nahoru, tak dolů. Core web vitals je pár parametrů výkonosti (performance) vašeho webu, které spolurozhodují o úspěchu.

Co core web vitals jsou a jak je měřit? První otázku lze zodpovědět relativně dobře a na tu druhou neměl ani expert z Google zcela přesnou odpověď. Za dob primitivního připojení bylo hodnocení jasné – když se zobrazil obsah, tudíž čas od zadání URL po zobrazení. Současné weby ovšem obsahují obrázky, skripty a interaktivní prvky, kdy stránka je připravena a co z toho uživateli stačí, aby byl spokojen, to už lze spočítat hůř.

Shrnutí core web vitals:

1. Vizuální dokončenost
   Kdy jsem byl schopen vidět hlavní obsah?
   tzv. Largest contentfullpaint
   Largest Contentful Paint (LCP)
2. Interaktivita
   Za jak dlouho můžu na stránce něco dělat?
   First Input Delay (FID)
3. Vizuální stabilita
   Jak moc se obsah posune po načtení všech prvků
   Cumulative Layout Shift (CLS)

Měří se data na serveru z tvrdých dat a pak podle zkušenosti skutečných uživatelů. To, co podle tvrdých dat může vypadat dost špatně ale uživatel nemusí vnímat stejně.
K testování se doporučuje:

• WebPageTest – Website Performance and Optimization Test
• Lighthouse  |  Tools for Web Developers  |  Google Developers
• PageSpeed Insights

When JavaScript bytes – Tim Kadlec

V Apollu 11 byl navigační počítač s kódem, který měl méně než 1,7 MB – dokáže Váš web běžet s méně než 1,7MB JavaScriptu?

Trocha faktů o JS:

• V průměru se při načtení webu pošle 430kB JS na mobilní zařízení a z toho je zhruba 35 % neužívaných
• 15 % posílaných dat nepoužívá žádnou kompresi
• React (jako client-side) je v současné době nejdražším resourcem

Jak naše aplikace zahlcují paměť? Pokud vás tato metrika zajímá, Chrome od verze 89 má memory performance API, tedy pokud se dostanete přes jeho zabezpečení. Podle Timova zjištění weby s větším množstvím skriptů si klidně ukrojí 36 MB paměti, a pokud má jejich SPA nějaký memory leak, seberou si klidně přes 80 MB (stránka Vogue). Schválně, kolik tabů máte teď otevřených?

Jak si pohlídat, aby z vašeho webu nebyl paměťožrout?

• komprimujte tam, kde to má smysl
• nepoužívejte SPA na všechno
• tree shaking by měla být ranní rozcvička
• Webpack umí pohlídat, aby se závislosti nestahovaly víckrát, ale musíte ho pohlídat, aby to opravdu dělal
• hlídejte si performance webu – jak dlouho se stahuje bundle?
• VS Code má import cost hlídáčka
• Github má bundle size check – nastavte si laťku a bude vás držet při zemi

Get your <head> straight – Harry Roberts

Už je to docela dlouhý, ten článek, tak si trošku vyčistíme hlavu – zde je optimální <head>:

html
charset
title
preconnect
asynchronní JS skripty
CSS s @import
synchronní JS skripty
synchronní CSS
preload
script defer

Pár přátelských rad, jak nebýt na hlavu:

• pozor na nevalidní tagy – zpomalí parsování
• tagy které obsahují lib@latest jsou přesměrovány a načítají se dvakrát – dejte tam rovnou nějakou verzi
• používejte odkazy na balíčky z vlastního serveru – fonty z CDN se stahují o dost déle
• pozor na <meta> „content-security-policy“ tag – vypne preload scanner a namísto paralelního stahování závislostí je stahuje postupně
• metadata o stránce (viewport, mobile) jdou po charsetu před <title>
• SEO a sociální sítě až nakonec

Případně si nechte hlavu zkontrolovat od Harryho, má na to scanner csswizardry.com/ct, který vytvořil, když během covidu nebylo co dělat.

Už jsme na konci

Harryho přednáška byla letos poslední. Třetí den konference byl určen workshopům. Nadšenci mohli po skončení přednášek a vrácení zálohovaných kelímků vyrazit na party do Duplexu, ale o tom reportovat nemůžu, protože tam mě nikdo nedostane (mám asi něco proti Duplexu).

Byla trochu škoda, že spousta speakerů se účastnila pouze virtuálním vstupem a doufám, že další ročníky, které budou nově začátkem června namísto září, budou zase v plné kapacitě a s 3D lidmi.