19.07.2021 18:45 Zakladatele rodu House of Řezáč jsme pozvali v reakci na jeho nedávný text Proč MENDELU vyhodí 5,4 milionů korun z okna. Proč jsou výběrka tak špatná a dá se s tím něco dělat? V závěru podcastu nám vyšel čas probrat ještě nástroj pro tvorbu webu Webflow. MP3 ke stažení Host: Jan Řezáč Zajišťuje, aby firmy dělaly digitální projekty smysluplně. Napsal Web ostrý jako břitva – první českou knihu o procesu návrhu webu. Vede rod designerů House of Řezáč, kde nyní například nabízí bezplatný e-mailový trénink řízení digitálních projektů. Twitter, LinkedIn O čem si povídáme? Martinův tip: Psaní kódu pomocí hlasových příkazů a sledování očí podle Josh W. Comeau Robinův tip: Proč používat Tau místo Pí a proč slavit Tau day 28. června Co teď Jan vlastně dělá? Měření pokročilosti a seniority designérů Jak se dělají online školení Proč je kurz Strategický webdesign ukončený Hlavní téma: zadávání webdesignových výběrových řízení Proč MENDELU vyhodí 5,4 milionů korun z okna Kdo píše zadání výběrových řízení Co mohou veřejné instituce dělat lépe a tipy na nezávislý dohled nad přípravou a tvorbou vašeho webu od Nehoupat plus transparentní metodu hodnocení nabídek od 4E consulting Výběrové řízení z pozice dodavatele Druhy veřejných zadavatelů Janův příspěvek na LinkedIn o soukromých zadavatelích Jak se liší soukromý a veřejný zadavatel Jak ze špatné poptávky udělat dobrý projekt Zkušenosti s Webflow a dalšími NoCode nástroji Na jak velké projekty se hodí Webflow Jaká omezení má Webflow Pod kolik nemá cenu dělat web dnes Co může a nemůže zadavatel outsourcovat Těšíme se na vaše dotazy, připomínky, pochvaly i pokárání! :-) Do komentářů na vaší oblíbené platformě s nima nebo pište na martin@vzhurudolu.cz.
13.07.2021 03:30 Tohle je velká věc, alespoň pro mě. Ve štábu spolku Frontendisti.cz organizujeme první českou frontendovou konferenci a zhmotňujeme tak něco, o čem už dlouhá léta mluvíme. Kdy? V sobotu 29. května od 10:00 do 16:30. Kde? Online na platformě Hopin. Už je dokonce známo, jaký program na vás čeká. Tohle mám totiž na starosti já. Na jaké přednášky se můžete těšit? Tohle mám na komunitách rád. Že to nestojí na jednom člověku, že je to živý organismus, který často překvapí. Přes Call for Papers jsme dostali tak velkou hromadu nabídek k přednášení, že bylo opravdu těžké vybírat. Další těžký úkol na mě čeká teď – vytáhnout z programu pár nejzajímavějších bodů. Přesto se o to pokusím. Červenou nití programu jsou „témata, která přinášejí změnu”: Jan Bien bude mluvit o frameworku Tailwind CSS. Ondřej Polesný z Kentico nám představí nástroj Vite. Ondřej Žára ze Seznamu dorazí ukázat 10 novinek v CSS. Vojtěch Dobeš z ContentKing bude mluvit o kombinaci Apollo a Typescriptu. Zuzana Šumlanská z PageSpeed.cz připravuje přednášku o častých chybách, které kazí Web Vitals. Riki Fridrich vám chce ukázat, jak na vlastní ESLint pravidlo s autofixem. Celý program, složený ze 16 dvaceti- nebo pětiminutových přednášek najdete na webu. Proč dorazit v sobotu 29. května? Záznam je v ceně a přednostně jej dostanou majitelé vstupenek, ale byla by škoda u toho nebýt. I když je to sobota a může být hezky. Nepřipravujeme totiž pasivní stream, ale pracujeme na tom, aby vás to s námi v sobotu na místě bavilo: Po každé přednášce se otevře moderovaná diskuze s řečníkem, ke které se můžete aktivně přidat. Zájemci se mohou zúčastnit networkingu a programu na partnerských stáncích. Proběhnou dvě moderované diskuze, do kterých můžete vstoupit: o Tailwindu a o headless CMS . Máme také připravené překvapení z oblastí, které byste možná nečekali a v přestávkách bude hrát DJ. Platforma Hopin je stavěná tak, aby účastníci mohli být aktivní a procházet se konferencí podobně jako je to u offline zážitku. Věřím, že vás to na místě bude bavit. Buďte u první české frontendové konference. Vstupenky Vstupné jsme nastavil velmi ekonomicky, lístek stojí 290 Kč. Máme také skupinové balíčky vstupenek pro firmy a nabídku pro ty, kteří se chtějí stát podporovateli komunity Frontendisti.cz. Těším se, že se uvidíme → https://frontendisti.cz/konference.
01.07.2021 07:03 Hotwire je „krásná nová věc“ ze světa frameworku Ruby on Rails. Jde o zastřešující název pro balíček knihoven. To podstatné je řečeno hned zkraje: Hotwire je alternativní přístup k vytváření moderních webových aplikací bez použití velkého množství JavaScriptu zasíláním HTML namísto JSON, říká text na titulce. Hotwire jde proti aktuálnímu trendu javascriptových klientských aplikací , které se naopak snaží klienta vytěžit co nejvíce. Do architektury moderních webových aplikací, ať už jde o server nebo klienta, zase tak moc nevidím, ale velmi mě to zajímá z pohledu toho, co mě živí – rychlosti, nebo chcete-li performance. Ještě jsem neviděl web, kde by tuny JavaScriptu zpracovávané na klientovi, vedly k pěknému uživatelskému zážitku, minimálně ne při prvním vstupu. Ještě dál jde Matt E. Patterson v zajímavém textu s poněkud provokativním titulkem The Future of Web Software Is HTML-over-WebSockets. Autor se pohybuje ve světě Ruby on Rails, takže titulek berte s rezervou, ale určitě je zajímavé si to přečíst. Javascriptové frameworky s příchodem Angularu a Reactu umí vyřešit problémy, které jsme dříve řešit neuměli, „reaktivita“ při interakcích s aplikací přinesla zásadní benefity z pohledu UX a na fakturách za servery viditelně šetříme: „Server“ byl odsunut výlučně k hostování datové služby API, přičemž většina business logiky a veškerého vykreslování HTML se děje na klientovi. Jenže náklady dnes netvoří ani tak infrastruktura jako platy vývojářů. U složitějších aplikací potřebujeme kromě frontendistů ještě backendisty, což komplikuje komunikaci a zvyšuje náklady. A pak je tu ten vliv JS frameworků na rychlost. Co nabízí Hotwire? Programátoři backendových aplikací ze světa Ruby on Rails s pomocí balíčku knihoven z Hotwire budou prý schopni dosáhnout podobné interaktivity jakou zajišťují javascriptové SPA. Je to založené na WebSockets, které umožňují rychlý oboustranný přenos dat. Na klientovi neparsujeme JSON, ale do stránky prostě vkládáme kousky HTML, což je samozřejmě výkonnostně pro klienta daleko méně náročné. Matt E. Peterson uvádí příklad s našeptávačem: Při každém stisknutí klávesy odešlete dotaz na server přes WebSockets, zpět do klienta dostáváme změněnou sadu značek . Silný server, tenký klient. Takže jsme tam, kde jsme byli. Tyto technologie i postupy jsou známy a používány už léta. Tak jasně, málokdo má koule, aby takové věci říkal NEW MAGIC jako David Heinemeier Hansson, že ano: Hotwire aka NEW MAGIC is finally here: An alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This includes our brand-new Turbo framework and pairs with Stimulus 2.0 https://t.co/Pa4EG8Av5E— DHH December 22, 2020 Ale znáte to – staré technologie se objevují v nových kontextech, aby další generaci vývojářek a vývojářů otevřely oči. Proč ne, když to něčemu pomůže: Progressive enhancement gets repackaged and released as “new magic” time and time again, but seriously if it gets more people doing it, it’s a good thing.— Jake Archibald December 23, 2020 A co ta rychlost? Srovnání vstupní rychlosti Gmailu a Hey.com Gmail asi znáte, ale možná nevíte, že je to klasická klientská javascriptová SPA. Klient stáhne HTML, v něm skoro nic není, jen javascriptový soubor, ten začne stahovat další JS soubory, spoustu JSONů… No a výsledek je takový, jaký byste čekali. Lighthouse test pro Gmail. Hey.com je e-mailový klient z dílny Basecamp, kde dámy a pánové implementovali právě sadu Hotwire. Výsledek je trapně dobrý, jako z nějaké korporátní případovky o rychlosti webu. Lighthouse test pro Hey.com. Vy, kteří umíte číst výsledky Lighthouse, asi od boku řeknete: Ano, ty rozdíly tady dělá JavaScript. Vy ostatní se podívejte na metriku Total Blocking Time. Tohle srovnání je dělané opravdu z voleje. První, které mě napadlo. Pravděpodobně porovnávám z pohledu performance špatně napsanou klientskou javascriptovou aplikaci , s odladěným Hey.com, který autoři používají jako případovku pro svůj devstack. Aplikaci, která umí běžet offline s aplikací, která to neumí. A tak dále. Ale i tak… z pohledu rychlosti to rozhodně zajímavé je. Jsem fakt zvědavý, jak na to budou reagovat vývojáři a další frontendové i backendové frameworky. Pokud bychom se dívali na vývoj webů jako jednolitý proud a Hotwire jako nový „trend“, pak jde o zpátečku a přesun zpět na server. Jenže takhle to není. Weboví vývojáři už jsou dneska uzavření ve světech svých platforem – máme tu frontendisty , péhápkáře, vývojáře na technologiích Microsoftu a pak vývojáře ze světa Ruby on Rails. Takže vlastně by mě nejvíc zajímalo, jestli jsou myšlenky z technologie jako je Hotwire přenositelné do jiných světů. Dodatek: Čtenář Jan Oppolzer píše, že v ekosystému péhápkovského frameworku Laravel se objevilo podobné řešení jménem Livewire. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
01.07.2021 07:03 Zápis image-set umožňuje nechat prohlížeč vybrat nejvhodnější obrázek, definovaný v rámci vlastnosti background-image, ze sady, kterou mu připravíme. Je to vhodné zejména pro posílání různých obrázků na obrazovky s vysokou hustotou pixelů: .box Od února 2021 tento zápis podporuje Firefox . Díky tomu už bude brzy možné základní varianty zápisu image-set používat ve všech moderních prohlížečích. Jak jste asi pochopili, jde o obdobu atributu srcset pro značku . Některé varianty zápisu image-set mohou přebírat také funkčnost značky , jenže ty zatím nejsou podporované. image-set je prostě takový malý srcset pro obrázky na pozadí vkládané přes CSS. Výběr obrázku podle hustoty pixelů Obrázky definované ve vlastnosti background-image občas potřebujeme prohlížečům poslat v různých variantách, protože nevíme, jakou hustotu pixelů bude mít zařízení, na kterém běží. .box Obecně vzato, v image-set vždy uvádíme adresu obrázku a podmínky za jakých se má zobrazovat. Tak je to ve specifikaci. Jenže prakticky vzato dnes máme jediný možný zápis – deskriptory 1x, 2x, 3x a podobné udávají hustotu pixelů, tedy hodnotu dppx, kterou znáte z hodnoty resolution v Media Queries. Takže například na většině počítačů s Windows se stáhne první obrázek , protože dppx má hodnotu 1. Na iPhonu 11 se stáhne druhý obrázek. Na některých moderních Androidech, které mívají vyšší hustotu pixelů, i 3 a více, pak poslední obrázek. Není to jediná varianta, kterou bychom podle specifikace mohli použít. Další teoretické možnosti použití image-set , zatím nepodporované Specifikace je jedna věc, praxe ale velí vycházet z podpory v prohlížečích. Dále uváděné možnosti zůstávají na papíře. Jediný prohlížeč, který je podporuje, je právě nový Firefox Nighly. Výběr podle typu obrázku Podobně jako u značky bychom i tady mohli prohlížeči nabídnout dva formáty pro jeden obrázek. To by bylo skvělé pro využití u nových formátů jako WebP nebo AVIF… .box …kdyby to ovšem podporovaly prohlížeče. Ke dni psaní s tímto zápisem uspějete jen Firefox Nightly. Více je možné vidět v CodePenu. Kombinace obrázků s generovaným pozadím Občas by se kódérkám a kóderům mohla hodit kombinace obrázku s generovaným pozadím, např. přechody tvořenými pomocí linear-gradient . .box Podporuje to opět jen nový Firefox ve vývojářské verzi Nightly. CodePen k hraní. Deskriptor w V atributu srcset bychom teoreticky mohli mít možnost používat deskriptor w, jenž prohlížeč informuje o šířkách nabízených obrázků. To aby si lépe vybral. .box Tady ale pouštím imaginaci na plné obrátky a troufám si jít opravdu daleko, protože i ve specifikace o tomto mluví jako o přání a úkolu pro budoucí specifikátory, nikoliv o navržené vlastnosti. Tak nic. Mrkněte se na CodePen. Na vaše objevování zápisu image-set se těší celá moje kolekce CodePenů. Podpora Použitelnost zápisu image-set díky implementaci ve Firefoxu bez pochyby v příštích měsících prudce stoupne. Jde totiž o poslední moderní prohlížeč, který jej dosud neuměl. Jenže pokud jste se, jako já, nechali namlsat všemi zde uvedenými možnostmi zápisu, budete stejně zklamaní. Ale tak už to mezi námi webaři chodí. Jsme nadšení z implementace nový vlastností, abychom byli tentýž den zklamaní, co všechno ještě prohlížeče neumí. Při implementaci nezapomeňte na Autoprefixer, protože i moderní prohlížeče pro tuto vlastnost vyžadují prefixy – např. Chrome rozumí jen zápisu -webkit-image-set . Internet Explorer je sice už téměř vymřelý druh, ale pokud byste potřebovali zajistit si fungování i v něm, musíte uvést náhradní řešení. Je to vidět v mém prvním CodePenu: .box Vše o podpoře image-set najdete klasicky na CanIUse. caniuse.com/css-image-set Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
