28.05.2021 02:30 „Nové systémy layoutu v CSS jsou tak úžasné, že to jistě musí mít nějaký háček“, mohl by si někdo myslet. Autorovi téhle myšlenky bychom museli přiznat jistou dávku zdravého skepticismu. Nebo dokonce nemalou životní zkušenost s vývojem webů. Související CSS Flexbox CSS Grid CSS Multicol CSS Box Align Je to tak, milé čtenářky a milí čtenáři, určitá „ale“ zde jsou. Musíme ovšem s úlevou prohlásit, že oproti dřívějšímu stavu je přítomnost chyb spojených s flexboxem nebo gridem v prohlížečích minimální. Jediným větším a hůře odstranitelným problémem je slabá podpora CSS gridu ze strany Internet Exploreru 11, i to se ale dá částečně řešit Autoprefixerem. V textu vezmeme nové systémy layoutu jeden po druhém a k jejich podpoře v prohlížečích si něco povíme. Flexbox a „flexboty“ v IE11 Když jsem začal flexbox před lety používat, bylo to trochu jako procházka minovým polem. Za každým řádkem kódu mohla číhat nekompatibilita v některém prohlížeči. Člověk potřeboval detektor min a tím se stala stránka „Flexbugs“ od Philipa Waltona. Jde o seznam 17 chyb v prohlížečích, které tehdy potřeboval znát každý, kdo pokouší osud psaním flexboxového kódu. github.com/philipwalton/flexbugs Znalost některých chyb byla tak zásadní, že jsem je svého času musel učit na svých školeních. A při té příležitosti jsem jim začal říkal česky: flexboty. Boty, které zanechali výrobci prohlížečů při implementaci flexboxu. Když jsem ale u příležitosti psaní tohoto textu srovnával současný stav s tím dřívějším, došel jsem k radostnému poznání. Jak je to krásně zelené! Podpora flexboxu v moderních prohlížečích je takřka bezchybná. Zdroj: CanIUse.com. Je to tak. Takřka všechny chyby v moderních prohlížečích jsou opravené. Zůstaly jen ty navázané na Internet Explorer 11. Dnes už tedy můžete psát flexboxový kód, aniž byste se museli bát. Stačí se vyhnout určitým zápisům a bude to vše dobře fungovat i v Internet Exploreru 11. Stačí se vyhnout Když jsem se vývojářů ptal na jejich mentální zkratky, Daniel Střelec napsal jednu, se kterou se ztotožňuji: U flexboxu jsem se naučil definovat vždy kompletní zápis, tedy flex: 1 1 auto a pokud to jde, tak používat width místo flex-basis nebo obojí. Stačí málo a všechno to dobře funguje. Podpora flexboxu je prakticky plná Pojďme říct důležitou věc – fungování flexboxu napříč prohlížeči, včetně posledního Exploreru, je konzistentní a podporu považuji za takřka plnou. U chyb, které v následujícím textu uvádím, se jedná o boty menší velikosti. Ale když už si o flexboxu povídáme takto detailně, je potřeba se o nich zmínit. Flexboty v moderních prohlížečích Moderní prohlížeče, tedy všechny kromě Internet Exploreru, byly zodpovědné za 5 chyb ze seznamu Philipa Waltona. To už ale dávno neplatí, dle mých testů zůstaly jen dvě málo důležité chyby. Některé elementy nemohou být flex-kontejnerem. Dříve to platilo i pro a ve všech prohlížečích, což je naštěstí opravené. Zůstává jen málo nepříjemné omezení použití flexboxu na prvku v prohlížeči Safari. V tomto případě stačí použít vložený jako kontejner pro rozvržení flexboxem. Zalamované elementy na inline flexboxu přetékají z rodiče Jde o kombinaci použití flex-flow:column wrap a display:inline-flex, takže poměrně vzácný scénář. Vnitřní prvky pak ve všech prohlížečích „vylezou“ z velikosti rodiče, i když by neměly. Je možné to obejít například pomocí nastavení flex-direction:row a změnou směru vykreslení zápisem vlastnosti writing-mode. V CodePenu se můžete podívat na řešení druhé uvedené flexboty. A co náš dědeček mezi prohlížeči? Flexboty v IE11 Tohle je zajímavější. Internet Explorer byl sice první prohlížeč, který moderní layouty naimplementoval, ale stejně jako všechny ostatní „prvoimplementace“ šlo o pokus plný chyb. Problémem IE tedy není množství chyb, chyby dělají všichni programátoři prohlížečů, ale způsob aktualizace. Kdysi tak populární prohlížeč od Microsoftu vycházel v nových verzích z dnešního pohledu velmi pomalu, po letech, nikoliv měsících. A navíc – jedenáctá verze Exploreru je poslední a nikdo ji už aktualizovat nebude. Jenže vysvětlete to některým uživatelům. Ještě chvíli se s ním prostě budeme setkávat. Pojďme na ty chyby, ať tu nepříjemnost máme za sebou. Vlastnost flex-basis nezohledňuje box-sizing:border-box . Vlastnost flex s nulovou flex-basis neplatí . Vlastnost flex-basis neumí funkci calc . Položky flexboxu nemohou být display:inline . Položky flexboxu se špatně zarovnají, když se užívá max-width . Položky flexboxu lezou z kontejneru, který má align-items:center . Vlastnost min-height na flex kontejneru nefunguje . Pložky flexboxu neudržují poměr stran . Položky flexboxu neumí zarovnání pomocí margin:auto na příčné ose . Máte přečteno? A máte z toho depresi? Chvilku počkejte. Tyhle chyby detailně znát nemusíte. Většinu vaší práce s flexboxem neohrozí. Stačí jen vědět, že si v případě podivného chování IE11 u flexboxu musíte vzpomenout na existenci stránky Flexbugs nebo tohoto textu. Řešení chyb v IE? Zkuste vynechat flex-basis Ani se tady nebudu pokoušet chyby vysvětlovat nebo nastiňovat možná řešení. Spíše nabídnu svůj postup, který jsem si vypracoval v době, kdy pracoval na projektech, vyžadujících podporu posledního Exploreru. Během práce v hlavním prohlížeči průběžně testuji také v dalších prohlížečích, včetně IE11. Pokud jej na počítači nemáte, zvažte Browserstack nebo podobná řešení. Velká část chyb v IE11 je navázaná na vlastnost flex-basis, proto se jí snažím vyhnout a používám namísto ní width nebo height. Pokud narazím na jiný problém, zkonzultuji Flexbugs, kde pravděpodobně naleznu snadné řešení. Profit! Věřte mi. Nic komplikovaného na tom není a používat flexbox i s podporou IE11 je úplně v pohodě. A co další chyby? Pokud jste počítali, do celkového počtu 17 chyb stále tři chybí. Ano, máte pravdu a vyhráváte… pobyt v Muzeu historie webových prohlížečů. Zbývající 3 boty má na svědomí Internet Explorer 10. To je ale prohlížeč, který má i v českých luzích a pod slovenskými horami prakticky nulovou přítomnost na zařízeních našich uživatelů. Nebudeme si proto kazit den chybami historických prohlížečů a ty tři chyby prostě zamlčíme. Pokud by vás opravdu hodně zajímaly, podívejte se na tu svého času slavnou stránku Philipa Waltona. Flexbugs: github.com/philipwalton/flexbugs Více informací o podpoře je na Can I Use. caniuse.com/flexbox Grid V případě gridu se – daleko silněji než u flexboxu – musíme rozdělit na dvě skupiny vývojářek a vývojářů. Na ty, kteří nemusí Internet Explorer 11 podporovat. A pak na ty, kteří mají trochu smůlu. Podpora gridu v prohlížečích. Zelenohnědá barva u IE nevěští nic dobrého. Zdroj: CanIUse.com. Když jsem si na Twitteru dělal průzkum mezi vývojáři, vyšlo mi, že významná většina dává přednost flexboxu. Obávám se, že za to může komplikace jménem podpora gridu v IE. Je potřeba říct, že i tenhle prohlížeč grid podporuje a nepodporuje toho z něj vůbec málo: implicitní mřížku, funkci repeat , funkci minmax nebo klíčová slova min-content a max-content. Na druhou stranu – jde jen o menší podmnožinu současné šíře toho čemu říkáme CSS Grid Layout, navíc často jinak implementovanou. Máme zde sice Autoprefixer, který „současný grid“ umí překládat do podoby „IE gridu“, ale jen částečně a navíc to vyžaduje další znalosti a schopnost tento nástroj bezchybně nastavit. Prostě to s gridem v IE je složité a já se vůbec nedivím lidem, kteří říkají „skoro na všechno mě stačí flexbox“, i když pak flexbox používají pro situace, kde by byl výhodnější grid. Jo, to když Explorer podporovat nemusíte, to je jiná písnička… Odkážu vás ještě na plnohodnotný text o řešení gridu v Internet Exploreru a pojďme dál. Gridbugs, boty v mřížce Podobně jako první implementace flexboxu, také první napsané enginy pro vykreslování gridu byly v prohlížečích plné chyb. A tak se známá propagátorka moderních rozvržení v CSS, Rachel Andrew, nechala inspirovat stránkou Flexbugs a vytvořila svého času její obdobu pro mřížku. Vznikly Gridbugs. github.com/rachelandrew/gridbugs Asi jste si všimli, že o té stránce píšu v minulém čase, a to jste si všimli dobře. Ke dni psaní zde vidím poslední commit ze září 2017. Podobně jako u flexboxu, také u gridu postupně prohlížeče chyby odstranily. Během přípravy pro psaní tohoto textu jsem poctivě prošel všech 14 chyb a podle všeho zůstává aktivní jen jedna bota, gridbug #3 – chybějící podpora fragmentace. Jde o to, že prohlížeče v layoutu dělaném gridem špatně implementují vlastnosti jako break-*, kterými můžeme vynucovat konec stránky například v tiskové verzi. Všechny ostatní chyby jsou, zdá se, opravené. Takže, když nebereme v úvahu Internet Explorer , CanIUse nás zaplaví zelenou barvou jako louka na jaře. caniuse.com/css-grid Vícesloupcové rozvržení, CSS Multiple Columns Multicolumn layout v CSS, takže sada specifikovaná kolem vlastnosti column, je na tom s podporou v prohlížečích poměrně dobře. Zajímavé je, že tuto specifikaci trápí spíše nedodělky v moderních prohlížečích. Implementace v Exploreru je vlastně výborná. Podpora vícesloupcového layoutu v prohlížečích. Zelená je na místech, které byste možná nečekali. Zdroj: CanIUse.com. Chyby v Chrome a Firefoxu zde zůstávají už léta hlavně proto, že sloupcový systém rozvržení v CSS není právě často používaný a tudíž tlak na programátory prohlížečů není tak velký. Jsou to chyby spíše menšího kalibru, ale je jich poměrně dost. Pytel blech. Drobné problémy ve vícesloupcovém layoutu. Zdroj: CanIUse.com. Asi nejznámějším bugem je špatná podpora zalamování pomocí vlastností typu break-* v prohlížeči Chrome a všech, které z něj vycházejí. Pokud bychom se ale dnes mohli bavit o nějakém „zabugovaném“ systému layoutu, nebyl byl to grid ani flexbox. Černého Petra bohužel vyhrává vícesloupcové rozvržení. Více informací najdete na našem oblíbeném webu. caniuse.com/multicolumn A co zarovnávání, CSS Box Align? Čtvrtou specifikací z party systémů rozvržení v CSS je zarovnání boxů. Tenhle systém layoutu bohužel samostatný záznam na CanIUse nemá. Je to proto, že původně šlo o součást specifikace flexboxu, kde také na webu sledujícím podporu v prohlížečích vlastnosti ze specifikace CSS Box Alignment zůstaly. Najdete je zde jako jednotlivé vlastnosti, když budete hledat text align- nebo justify-. Tabulky podpory CSS Box Align v Internet Exploreru Podpora v moderních prohlížečích je zde vynikající, ale je potřeba zmínit, že i v tomto případě je Internet Explorer problematický. Opět hlavně v kombinaci s gridem. Hlavní osa Příčná osa Oba směry Zarovnání položek justify-itemsIE: flex, grid align-itemsIE: flex, grid place-itemsIE: flex, grid Zarovnání sebe sama justify-selfIE: flex, grid align-selfIE: flex, grid place-selfIE: flex, grid Distribuce obsahu justify-contentIE: flex, grid align-contentIE: flex, grid place-contentIE: flex, grid Jak je vidno, v moderních prohlížečích je to v pořádku. Nepodpora vlastností justify-items i justify-self v IE je vlastnost, nikoliv bug. Tyto vlastnosti s flexboxem bohužel nelze kombinovat v žádném prohlížeči. V případě, že podporujete IE to je u gridu celkově složitější, viz následující pojednání o tom. Explorer také nepodporuje novější hodnoty některých vlastností: baseline a stretch vlastností align-self a justify-content nebo také space-evenly u justify-content. Na layout typu masonry zatím čekáme align-tracks, justify-tracks a další části layoutu typu masonry v CSS zatím žádný prohlížeč nepodporuje. Layouty typu Masonry v CSS zatím tedy sledujte, ale pro praktické nasazení využijte jinou cestu. Shrnutí podpory Jak sami vidíte, o různých problémech systémů rozvržení v CSS v různých prohlížečích se dá popsat hodně papíru. A to jsem leccos vynechal. Nicméně, důležitý je celkový dojem. Pokusím se to shrnout takto: Flexbox je víceméně bezproblémový. Při použití ve Exploreru raději nahraďte flex-basis za width nebo height. Grid je v Exploreru problémový, musíte mít zvláštní znalosti. V moderních prohlížečích skoro úplně bez potíží. Vícesloupcový layout umí zkomplikovat život menšími chybami, ale je jich dost. Zarovnání boxů je v případě flexboxu skoro bez zádrhelů všude, v případě gridu je to s IE opět složitější. A to je vše. Děkuji vám za pozornost. Setkali jste se někdy s jinou chybou v nových systémech layoutu v CSS? Napište to do komentářů. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
25.05.2021 11:30 Od čtenářů mi občas přijde dotaz na seznam doporučených knih. Tak tady je, ať vám slouží. „Cože knihy? V dnešní době?!“ Možná, že vám stačí StackOverflow, Google a pár videí zdarma na YouTube. Pak tenhle seznam nebude pro vás. Možná, že knihy nečtete, ale vlastně „čtete“. Možná, že máte čtečku plnou e-booků, že posloucháte audioknihy, že koukáte na ucelené tutoriály. Knihy. Takhle vypadají u nás doma. Dneska by se místo „čtu knihy“ mohlo raději říkat „konzumuji ucelený obsah v různých formách“, efekt je podobný. V tomhle případě mě ale jde hlavně o ty tradičnější formy. Sám jsem fanoušek knih, ucelenějšího a soustředěnějšího pohledu na problematiku, která mě zajímá. Je ale pravda, že v průběhu času se to mění i u mě – před lety jsem se například zbláznil do e-knih, ale v poslední době od nich utíkám zpět směrem k tištěným. O některých oblastech bych si knížku nekoupil nebo koupit nemůžu a knihy samozřejmě i já používám jako doplněk k Twitteru, newsletterům a článkům a té nejdůležitější věci, které se jmenuje Google. Pojďme na ten seznam. Jako vždy platí – rád jej budu průběžně aktualizovat, takže mě neváhejte doplňovat v komentářích. CSS Když proniknete do nějakého složitého oboru a dostanete dotaz „Co bys doporučil začínajícím?“, hrozí vám vnitřní zacyklení. Máte spoustu nápadů, spoustu přečtených knížek, které vám v hlavě divoce krouží, ale nevíte, po které sáhnout jako první. Přesně tohle mám s CSS. Nevím, odkud začít. Můžete to vzít od Meyerovy tlusté referenční příručky, ale já bych vám možná doporučil se soustředit na vysvětlení vnitřních principů CSS, na kaskádu, dědičnost, poznat základy organizace CSS kódu a pak až se vrhat na jednotlivé vlastnosti. Je tu ale malý problém, takhle organizovanou knížku jsem zatím nenašel. CSS – The Definitive Guide: Visual Presentation for the Web Fakt bible, ale formou nic moc přitažlivého. Hodně akademické ukázky. Četl jsem hlavně tam CSS grid. Objemem to ale zapůsobí a bude užitečné pro ty, kteří si chtějí o CSS vlastnostech dohledávat informace v jednotné formě od dobrých autorů. Web knihy. Enduring CSS Pokud byste chtěli knihu o psaní a organizaci CSS, o principech schovaných za styly, tohle by mohl být dobrý kandidát. ECSS představuje alternativní styl organizování CSS k metodikám jako OOCSS, BEM nebo Suit CSS. Problém metodiky Bena Fraina je v tom, že se moc neujala, takže není tak široce diskutována jako další uvedené metodiky. Web knihy. CSS Secrets: Better Solutions to Everyday Web Design Problems Něco pro CSS praktiky. Lea Verou připravila sadu téměř padesáti ukázek řešených pomocí CSS3 vlastností. Pokud se tedy nejraději učíte přes prakticky použitelné ukázky, tohle je knížka pro vás. Web knihy. A co další knížky o CSS? Za mě už je to slabší, novější v ČR vydané knihy jsem spíše prolistoval a můj první e-book o CSS3 je už hodně, hodně letitý. Pokud máte doporučení, sem s ním. JavaScript Tohle téma mě už docela dlouho profesně míjí, ale přišlo mi škoda jej tady nemít, takže zde dám na doporučení komunity a budu rád, když je doplníte v komentářích. JavaScript Petr Glaser píše: „Velmi dobře učí Javascript v modernější podobě. … Jsou tam cvičení, která když se neopisují, naučí hodně. Navíc se celou dobu tvoří jedna hra, která je jednak zajímavá, protože je jednoduchá, ale také chytlavá.“ Ze zvědavosti jsem si ji koupil taky a opravdu, formou na mě zapůsobila tak, že když bych měl volný víkend, jdu si hned naprogramovat hru v JS. Eloquent JavaScript Petr Sedláček píše : „Programování pro milovníky zen-buddhismu. Psáno s filozofickým nadhledem, koncepty jsou vysvětleny pomocí příběhů. Dvě perličky: V jedné z kapitol vás učí, jak si napsat vlastní programovací jazyk. S tím, že je asi jedenáctá, tedy toho zas tolik zatím neumíte. Plus moc pěkný úvod do regexů.“ Dostupné online. You Don't Know JS Yet Doporučila Karin Strouhalová a další lidé. Petr Sedláček dodává: „Série pro mírně pokročilé a pro ty, kteří chtějí proniknout do hloubky. Jeden příklad: Měli jste někdy problém s klíčovým slovem this? Ve třetím díle je perfektně vysvětlené. Právě se pracuje na druhé edici.“ Dostupné online. Understanding ECMAScript 6 Petr Sedláček: „Čtivé povídání o ES6, tedy o verzi, která v roce 2015 JavaScript výrazně změnila.“ Dostupné online. Další tipy od komunity: JavaScript Allongé – Tomáš Arcanis Jílek: „Nejlepší knížka o JavaScriptu co jsem kdy četl. Tehdy pro mě byla wow.“ Chcete naučit programovat? Mám tu doporučení na Moderní programování – doporučil Petr Sedláček: „Učebnice, které provedou úvodem do programování v jazyce C#. Od začátečnických principů až po objektové programování a databáze. Čtivě, pochopitelně, a hlavně - česky.“ JavaScript & jQuery – doporučil Tomáš Hendrych. Přístupnost Důležité téma. Domnívám se, že o přístupnosti toho běžní weboví vývojáři tolik v online médiích nepřečtou. Technický vývoj zde neprobíhá tak překotně, spíše pomalu probublává, nejsou zde žádné nové cool frameworky… Tady se ukazuje důležitost knížek. Zrovna o přístupnosti je skvělé si jednou za čas přečíst něco hlubšího. Inclusive Design Patterns Máte rádi anglický humor? Češi nejspíš ano. A neznáte Heydona Pickeringa? Tohle určitě napravte. Heydon je dle mého nejvtipnější tvůrce obsahu pro webové vývojáře, navíc hodně chytrý člověk, který umí o přístupnosti skvěle psát a mluvit. „Inclusive Design Patterns“ je napsané s lehkostí a postavená tak, abyste mohli získané znalosti hned používat. Web knihy. Accessibility for Everyone Kniha z A Book Apart o přístupnosti? Nemůžu vám ji nedoporučit. Laura Kalbag se snaží vysvětlit tématiku přístupnosti opravdu každému, i těm nedotčeným. Pokud patříte mezi zkušenější, poskytne vám argumenty pro přesvědčování nepřesvědčených. Web knihy. Color Accessibility Workflows Opět A Book Apart. Tentokrát ještě stručněji a zaměřeno na problematiku vnímání barev, vady zraku a z toho vyplývající potřebné znalosti pro tvůrce webu jako je kontrast barev. Web knihy. Tipy na další zdroje: Radek Pavlíček, kdo jiný. Rychlost webu V mém aktuálně hlavním zaměření je to s knížkami těžké. Věci se vyvíjejí velmi rychle a vlastně neexistuje aktuální knížka, kterou bych vám mohl doporučit. Tady je opravdu lepší sledovat Twitter a newslettery. Zmíním ale alespoň dvě knihy. High Performance Browser Networking Bible oboru, je zaměřená hodně na principy fungování sítě, infrastruktury a vztahu prohlížeče k nim. Je to opravdu detailní příručka, ale pro frontendistu trochu nezáživná. Na druhou stranu – je dostupná online a i když jsem ji nikdy naráz nepřečetl, občas se k ní vracím, protože si její různé části potřebuji připomenou. Responsible Responsive Design Svého času jsem měl rád tuto knihu, která rozšiřuje responzivní design o udržitelný pohled na vývoj a ladění rychlosti, který klade velký důraz na progressive enhancement. Web knihy. Raději vám dám tipy na další zdroje: sledujte Performance Newsletter nebo náš Twitter účet z PageSpeed.cz. Design Knížky o designu nezastarávají zdaleka tak rychle jako knížky o technologiích, proto zde můžeme uvést pár opravdových klasik – dopadem i rokem vydání. Web ostrý jako břitva Jan Barášek píše, že u ní doporučuje začít. „Důležité je totiž pochopení podstaty. Je důležitější, než konkrétní technologie.“ Souhlasím. Pokud hledáte podstatu procesu webdesignu ve stručné a bohatě ilustrované podobě, pokud hledáte, kudy do oboru vstoupit, tohle bude dobrá volba. Web knihy. Nenuťte uživatele přemýšlet! Velmi čtivá a praktická příručka použitelnosti. Čtenář Miroslav Bartík dodává: „Tu knihu by si měl přečíst každý majitel webu, který chce webdesignérovi radit, jak dělat web.“ Databáze knih. UX pro začátečníky: Rychlokurz – 100 lekcí Stručná brožurka, která poskytuje intro do UX. Tuhle jsem zatím nečetl, ale Martin Kopta, zkušený UX výzkumník k ní napsal: „Měli byste jich mít pár na stole, a kdykoli se u něj objeví někdo, kdo s UX přichází do styku poprvé , měli byste mu jednu vrazit.“ On Web Typography Web je z velké části typografie. Pro mě osobně napsal Jason Santa Maria zásadní knihu tohoto tématu. A když se dívám na celý tento seznam knih, jde o jednu z mála, kterou bych si moc rád přečetl znova. Web knihy. Dobrý designér to všechno ví V recenzi jsem psal: „Z textů, které jsem dosud o webařině v češtině četl, se asi nejvíc blíží pojmu 'webdesignerská bible'. I s tím, že je, bohužel, podobně nesnadné ji číst.“ Pokud vám nevadí delší texty, rozhodně se ale poslední větou nenechte odradit. Pixy jde do hloubky, což je velmi cenné. Web knihy. Designové systémy Okrajově sleduji i tohle téma, takže začátečníkům v něm si troufnu poradit. Atomic Design To, co udělala Mobile First pro mobilní webdesign, dělá Atomic Design pro systémy designu. Je to první ucelenější příručka známého autora. Nemusíte mít v oblibě jeho „molekuly“ a „organizmy“ , ale jako vstup do oblasti design systémů je to pořád výborné. Web knihy. Design Systems: A practical guide to creating design languages for digital products Jestliže se designovými systémy už trochu více zabýváte, tahle kniha od Smashing Magazine je pro vás. Na mě, jako člověka, který už v té době systémy designu příliš nežil, už to bylo moc do hloubky. Web knihy. Responzivní design Chtělo by se napsat, že responzivní design je fáze webdesignu, kterou už máme za sebou a není tudíž nutné o ní něco číst. To by ale byl jen omyl člověka, který webdesignem žije, trendy sleduje a nevidí dlouhý ocas skupiny lidí, kteří změny v našem oboru sledují až s letitým zpožděním. Vybral jsem tři knížky. Všechny znám docela dobře a tu první až moc dobře. Vzhůru do designu Je to ještě aktuální? Pro ty, kteří o responzivním designu nic moc nečetli, určitě ano. Knihu jsem v roce 2017 psal jako „průvodce dnešním řemeslným webdesignem“. V té době bylo nutné přejít na responzivní design, naučit se navrhovat pro mobily a celé to dobře a udržitelně nakódovat. Snažím se neutíkat od kódu a spojovat technologie s designovým přístupem. Dnes už si můžete koupit jen e-book, tištěná kniha je prakticky vyprodaná. Web knihy. Going Responsive V mnoha firmách sice už běžně responzivní weby dělají, ale responzivně neuvažují. Karen McGrane píše o tom, že responzivní design není jen o technické implementaci. Je potřeba změnit pracovní postupy a často i procesy v celé firmě. Web knihy. Designing for Touch Nemáme zde jen mobily, tablety a desktop, říká autor myšlenky: „Zařízení jakéhokoliv typu může být dotykové. Proto musíme předpokládat, že dotykové bude.“. Hlavní myšlenky shrnuji v textuo lidech a zařízeních. Web knihy. Uvádím i další, dneska už většinou neaktuální kousky: Mobile First – Kniha, která změnila svět webdesignu a uvedla do něj mobily. Na základě dat a pečlivé argumentace autora. V recenzi jsem psal: „Luke je silně analytický typ, rešerše je jeho rodná sestra a tak si buďte jistí, že pro argumenty nebo trefné zkratky nebudete muset chodit jinam.“ Dostupné zdarma online. Responzivní design profesionálně – v recenzi píšu: „V originále s drobnými výhradami výborný text. V češtině výrazně zabugovaná knížka.“ Responsive Design: Patterns & Principles – v krátké recenzi píšu: „sázím svoje responzivní ponožky, že někde kolem vás je člověk, kterému tahle knížka pomůže otevřít oči. Váš klient, šéf, grafik nebo kolega programátor. Ti všichni „Patterns & Principles“ potřebují.“ AMP Nevynechám dva tipy na knihy o jednom mém – svého času velmi oblíbeném – tématu. Vzhůru do AMP Intro do AMP. S Robinem jsme e-book psali tak, abychom se pohybovali na pomezí technologie a konceptů, které jsou v případě AMP hodně důležité. Web e-booku. AMP: Building Accelerated Mobile Pages Doplnění pro ty, kteří chtějí méně konceptů a více kódu. Samozřejmě s přihlédnutím k době vydání. AMP se od té doby výrazně posunul a o „Accelerated Mobile Pages“ už rozhodně mluvit nemůžeme. Web knihy. A tak dále Uvedený seznam je samozřejmě zcela nekompletní, takže si jej dovolím ještě doplnit o vlastní tipy ze souvisejících oborů a pak také tipy čtenářů. Git for Humans. „Protože jestli pro někoho Git vymýšleli, pro lidi to určitě nebylo.“ Teaching Tech Together si přečtěte, pokud vás zajímá, jak učit. Knihovna Ondřeje Konečného – tipy od čtenáře. Na volné noze si přečtěte, pokud se chystáte nebo už chvíli jste na volné noze jako vývojáři. Nevíte? Přečtěte si cokoliv od A Book Apart. Stručné, krásně vysázené knížky nebo e-booky skoro o všem od výborných autorů. Víte? Doporučte nám v komentářích. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
18.05.2021 21:42 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.
17.05.2021 14:00 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.
12.05.2021 07: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.
11.05.2021 00:00 V CSS nebo JavaScriptu se nám občas hodí napsat kód, který rozlišuje varianty podle podpory určitých CSS vlastností. K tomu můžeme použít poměrně nové pravidlo @supports, součást specifikace „CSS Conditional Rules Module“. S pomocí @supports je možné psát „feature queries“, dotazy na vlastnosti. Vezměme například ukázky s dotazem na nativní podporu layoutu typu masonry: @supports Pokud se na ukázku podíváte v prohlížečích, které podporují vlastnost grid-template-rows a zároveň její hodnotu masonry, což je v březnu 2021 zatím jen Firefox Nightly, uvidíte zelený text. Ve všech ostatních prohlížečích bude text černý. Všimněte si důležité věci – pro detekování podpory musíme dotazovat na vlastnost i její hodnotu. Takže pokud bychom se ptali na podporu vlastnosti display, musíme se zeptat například na display:block. Logické operátory: not, and a or Specifikace „Feature Queries“ velmi správně definuje logické operátory podle zvyklostí z jiných jazyků. Operátor not Velice často se nám může hodit negace a klíčové slovo not: @supports not } Kód se aplikuje jen v těch prohlížečích, které nepodporují CSS Grid. Operátor and Logický operátor konjunkce – and: @supports and Použijeme v případech, kdy musí platit všechny podmínky. Operátor or Další operátor – or – definuje logickou disjunkci: @supports or Podmínka je platná v případě, že prohlížeč podporuje alespoň jednu z kombinací vlastnost a hodnota uvedených v závorkách. To se může hodit právě pro práci s prohlížečovými prefixy, zde -moz. Píšu o tom ještě v textu níže. Kombinování operátorů Při kombinování operátoru se vyplatí být doslovný – vždy uvádějte závorky. Tyto deklarace nejsou validní: @supports display: flex @supports or and ) Tento zápis ale validní je: @supports @supports or ) and ) Aby nedošlo k záměně mezi and a or, syntaxe je specifikována tak, aby byly výslovně psány jako and nebo or. Asi víte proč. Autoři specifikace se poučili z nejasného použití čárky namísto or v dotazech na media, Media Queries. vrdl.cz/p/css3-media-queries Prohlížečové prefixy Dalším překvapením může být nutnost používat všechny prefixové vlastnosti. Pokud máte v cílové skupiny uživatele prohlížečů, které vlastnost podporují jen s použitím prefixů, musíte je uvést všechny: @supports or or or Příklad mám ze specifikace. Dneska už byste prefixy k box-shadow nepotřebovali, takže tím kromě jiného ilustruji, že prefixy je potřeba uvádět jen tehdy, pokud byste je psali i v běžném CSS kódu. Nejlepší je ale starost o prefixy přenechat automatizaci, konkrétně nástroji Autoprefixer. github.com/postcss/autoprefixer Detekce podpory selektorů Některé moderní prohlížeče umožňují detekovat také podporu určitých CSS selektorů. Dělají to pomocí nové funkce selector : @supports selector Poněkud blbé ale je, že tuto funkci nepodporuje Safari, alespoň ne v březnu 2021. Museli bychom se tak dotazovat na podporu funkce selector , kterou bychom se dotazovali na podporu konkrétního typu selektoru. Trochu inception. Funkce selector je ale součástí až nové verze specifikace modulu „CSS Conditional Rules“, takže se budeme tvářit, že se nepodpoře ze strany Safari zatím nedivíme. Řešení pro podporu detekce už dříve hledalo více autorů, pomocí různých hacků. Zajímavý je například tento, který se dotazuje na podporu pseudotřídy :placeholder-shown: .foo :not :placeholder-shown, .foo V textu „Using Feature Detection, Conditionals, and Groups with Selectors“ světu své řešení představil „náš“ Jirka Vebr. Tož díky! vrdl.in/vebrfeature Feature Queries v JavaScriptu Metoda CSS.supports vrací booleovskou hodnotu určující, zda prohlížeč danou funkci CSS podporuje nebo ne. Toto jsou možné zápisy: result = CSS.supports ; result = CSS.supports ; result = CSS.supports "); result = CSS.supports or "); V prvním řádku vidíme verzi se dvěma parametry. V prvním je prostě hodnota a ve druhém vlastnosti. Další tři řádky ukazují variantu, kdy do textu uvedeme DOMString rovnou s hodnotou celé podmínky. Ti z vás, které jsem ještě neunavil detailním líčením, si možná všimli detekce autorské vlastnosti ve třetím řádku ). Ano, i tu je možné detekovat. → Související: CSS proměnné nebo také autorské vlastnosti CSS hacky a progressive enhancement Udělejme si teď pro zajímavost historickou výpravu. @supports totiž navazuje na silnou tradici „CSS hacků“, kterou jsme zažili zhruba v první dekádě dvacátého prvního století. Tehdy nebylo možné v CSS podporu vlastností detekovat, proto kodérky a kodéři hledali chyby v prohlížečích při implementaci CSS pravidel. Takový zápis, který funguje v určitých prohlížečích a v jiných naopak ne. Asi nejznámější byl podtržítkový hack: .box Pokud by vás tahle, dnes už nechvalně známá praxe, zajímala, píšou o ní hezky v přehledu CSS hacků na tehdy populárním Interval.cz. interval.cz/clanky/css-hacky-prehled/ Brrr, úplně mě běhá mráz po zádech, když si představím, že v té době jsem nakódoval opravdu hodně webů. Jak bych tehdy byl za @supports vděčný! CSS hacky a dnes @supports jsou důležitou částí zásadní webařské techniky – postupného vylepšování . Funguje asi takto: Vyrobíte základní řešení fungující ve všech prohlížečích. Nad tím postavíte lepší řešení fungující jen v některých prohlížečích. Mezi jednotlivými řešeními je detekce vlastností , například právě pomocí @supports. Výsledkem je, že nějaké řešení máte pro nejširší možnou skupinu zařízení. Pro web ideální. Podpora @supports a limity použitelnosti První omezené použití @supports vychází z principů fungování prohlížečů – „feature queries“ nelze použít ke kontrole, zda prohlížeč vlastnost, hodnotu nebo selektor podporuje správně a bez chyb. Pokud si totiž prohlížeč „myslí“, že vlastnost umí, vrátí na dotaz kladnou odpověď. Ale soudruzi z NDR mohli někde v implementaci vlastnosti udělat chybu. Dalším omezením je samotná podpora vlastnosti, v tomto případě ale záleží na použití: @supports nepodporuje žádný Internet Explorer. caniuse.com/css-featurequeries Funkci selector kromě IE nepodporuje žádné Safari a některé další menší mobilní prohlížeče. caniuse.com/mdn-css_at-rules_supports_selector Je ovšem otázka, jak moc vadí nepodpora v Internet Exploreru. Mě nevadí. Hned vám řeknu proč. Internet Explorer totiž je skoro vždy ve skupině prohlížečů, které vlastnost nezvládají. Proto vůbec nevadí, když nerozumí ani otázce, zda vlastnost zvládá. Ukažme si to ještě na jednom příkladu. Závěrečná ukázka s detekcí CSS gridu Vezměme, že máme HTML s jedním kontejnerem a třemi položkami: Item 1 Item 2 Item 3 Chtěli bychom položky prostě umístit vedle sebe, což s pomocí flexboxu uděláme takto: .container .item Z nějakého důvodu bychom ovšem v moderních prohlížečích chtěli použít CSS grid: .container Je to samozřejmě naprosto schůdné, použijeme detekci pomocí @supports: @supports } Na pohled to bude vypadat stejně. Takhle jednoduchý kód se samozřejmě nevyplatí psát ve flexboxu i gridu. Budu ale předpokládat, že jde o základ pro využití pokročilejších vlastností gridu, kterých má požehnaně. Dvě verze pro dvě kategorie prohlížečů. To nám snadno umožní feature queries, dotazy na vlastnosti. Tady nastává moment, po kterém jsme v demíčku šli. IE nejen že nezná display:grid a zároveň nezná @supports, takže tento blok kódu vynechá ze zpracování. A to je dobře. V CodePenu navíc uvidíte v prohlížečích, podporujících grid, zelené písmo. V ostatních je to červeně. A to je, prosím pěkně, úplně vše, co jsem vám chtěl říct. Máte-li po ruce zajímavou ukázku využití @supports, neváhejte mě ji svěřit do komentářů. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
