31.03.2021 01:37 Martin a Robin si s produktovou a interakční designérkou Evou povídali o přechodu k freelancingu a rovnou do zahraničí, dále je zaujala témata jako herní design, navrhování pro rozšířenou a virtuální realitu a další. Uvidíte sami. Přejeme vám příjemný poslech. MP3 ke stažení Host: Eva Kuttichová Eva je produktová a interakční designérka na volné noze. Pracuje pro americké startupy a jako nezávislý konzultant aplikací pro globální firmy. Spolupracovala na aplikacích jako je Surge, Zoe a Dot to Dot, které mají mají dohromady přes 20 milionů stažení. Eva: Web, LinkedIn, Instagram, YouTube O čem si povídáme? Robinův tip: Placené boilerplaty: Bedrock a Remix. Martinův tip: CSS vlastnost image-set přichází do Firefoxu, jde o obdobu srcset v HTML. Představení Evy Evina práce v STRV Co je to „produktový a interační“ design Přechod z firmy na volnou nohu Jak na volné noze Eva získává klienty Toptal, Upwork a Fiverr: platformy pro freelancery Práce na dálku s americkými klienty, kteří dbají na osobní vztahy Jak funguje práce produktového designéra na dálku AR/VR/xR: Design pro virtuální, rozšířenou a míchanou realitu Jak se navrhuje pro AR/VR: herní enginy Unity 3D, Unreal Engine, Reality Composer od Apple Knížky a čtení: Sapiens, Josef Müller-Brockmann, 100 Things Every Designer Needs to Know about People Sociální sítě - kde a jak budovat svojí kariéru - LinkedIn, Instagram, YouTube Work/life balance: jak to má Eva, Martin i Robin Aktuální tip: Poku uvažujete o vstupu na mezinárodní freelance scénu, využijte akce Frontendisti.cz ve spolupráci s portálem Freelancing.eu. Partner: SUPERKODERS SUPERKODERS jsou brněnská, ale v tuto chvíli plně vzdáleně fungující vývojářská firma se silnou specializací na frontend. Mají ale přesahy i do backendového vývoje nebo třeba konzultacím k performance. SuperKodéři momentálně hledají reactisty, PHP vývojáře nebo projekťáka. Pokud s nimi chcete pracovat např. pro Český rozhlas, Masarykovu univerzitu, DronPro, mrkněte se na superkoders.com/jobs. Děkujeme za podporu!
27.03.2021 23:04 Nad výsledky anket State of CSS/JS 2020 jsme nahlas přemýšleli o aktuálním vývoji frontendových technologií. Nemohli jsme se nepozastavit u některých témat, které vidíme jinak, abychom zjistili, že to někdy vidíme velmi podobně. Probrali jsme Tailwind, nástroje pro testování JS, TypeScript a mnohé další. Ve výsledcích anket State of CSS a State of JS, které vyplnilo více než 10 tisíc vývojářů, jsme se zaměřili hlavně na tyto dva grafy, které ukazují poměr popularity a oblíbenosti frontendových technologií. State of CSS 2020: State of JS 2020: Audio MP3 ke stažení Host Riki Fridrich je JS/Vue vývojář v Mall.cz a lektor. Web – Twitter O čem mluvíme? Robinův tip: ECMAScript 2021 Martinův tip: Lighthouse 7 Představení Rikiho Ankety State of CSS a State of JS PostCSS Unikátní poměr spokojenosti a používání u Sassu Atomické CSS a framework Tailwind Pád Firefoxu a krize kolem MDN Flex a grid State of JS - co kluky zaujalo Jest „žere vše” u testovacích nástrojů Vývoj Next.js, StoryBook Propad Elmu Diskuze o TypeScriptu ESBuild, Snowpack a nové jednoduché buildovací nástroje Zveme vás na JS Days a stream Frontendisti.cz o TypeScriptu .
26.03.2021 21:32 „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 jednou, 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: .
24.03.2021 19:01 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.03.2021 14:04 Nedávný rozhovor pro portál Na volné noze pro mě byl vítanou příležitostí sesumírovat si v hlavě vlastní kariéru freelancera. S drobnými přerušeními jako volnonožec pracuji přes dvě desetiletí. Je to občas náročné, ale celkově vzato skvělé. Za nic bych to neměnil. Radit si někomu rozhodně netroufám, ale třeba z mých zkušeností něco načerpáte i vy. Je to dlouhé, ale je to upřímné. Snad vás to bude bavit. Intro Tu chvíli si přesně pamatuju. Jeden z momentů, které se vryjí do paměti, kde člověka definují. Vteřina času, která mě už nikdy neopustí. Je rok 2005 a já jedu na oběd tramvají po pražských Holešovicích. Koukám se smutně přes okno na ulici, protože klient, který dnes po urgencích zaplatit měl, nakonec zase nezaplatil. Příští týden mám poslat nájem a na účtu zbývá jen pár korun. Mám vůbec peníze na ten oběd? Spěšně vytahuju peněženku. Z oddílu pro bankovky se na mě smutně dívají jen staré účtenky. A co mince? Otevřu poloprázdnou přihrádku a první myšlenka se mi vryje do paměti: Kolik rohlíků si můžu koupit za dvanáct korun? Tahle událost někdy ukazuje tu složitější stránku živobytí na volné noze. Měl jsem ji, spolu s dalšími poznámkami, připravenou pro rozhovor pro portál Na volné noze, který jsme dělali začátkem roku. Nakonec jsme se s Robertem Vlachem bavili o zajímavějších věcech, takže jsem se rozhodl, že vám své poznámky ze dvou desetiletí na volné noze zprostředkuji alespoň pomocí článku. Nechystám se v něm nikomu radit, ale budu psát na rovinu, takže vás třeba k něčemu inspiruji. Nebo od něčeho odradím. Jedno prozradím hned – vězte, že bytí na volné noze rozhodně není o rohlících místo oběda. 1998: živnostenský list jako iPhone devadesátých let Z Fryčovic na severní Moravě je to zhruba stejně daleko do Ostravy jako do Frýdku-Místku, v té době poněkud panelákové brány do Beskyd. A taky do Příbora, rodiště Sigmunda Freuda. Mě je něco přes dvacet a živnostenský list si zařizuju, protože… no… protože rodiče podnikají už od roku 91, takže bych to mohl zkusit taky… Psychoanalytik Freud by to ale uměl vysvětlit lépe. Myslím totiž, jsem spíše doufal v přitažlivost „podnikatelů“ u žen. iPhone ještě nevyráběli, a tak statusový symbol devadesátek nese zkratku „ŽL“. Po zřízení živnostenského listu jdu rovnou do Expandia banky, první „internetové“ banky, kde dostávám modré kožené složky a „kalkulačku“, osobní elektronický klíč pro bezpečný přístup do internetového bankovnictví. Devadesátky jak vyšité! Přeloženo do dnešního jazyka: K iPhone si pořizuji ještě klíčenku na bitcoiny. Před 20 lety, 4. května 1998, zahájila své působení na českém trhu Expandia Banka. Vzpomínáte? https://t.co/VekE7K4zHv pic.twitter.com/Af5qKsbLiF— Muzeum Internetu .cz May 4, 2018 Neznáte Expandia banku? Přejmenovala se pak na eBanku a ani tu dneska nikdo nezná. Koupila ji už před lety Raiffeisen. Účet u Expandia banky je tak drahý, že poplatky musím pravidelně dotovat z kontokorentu, ale za příležitost vytahování „kalkulačky“ v hospodě to stojí. Dnes ale přece jen ze vzpomínek tahám náznak racionality. Končím vysokou školu, obor aplikovaná informatika , a vím, že to jediné, co mě tam baví je web, grafika a „programovací“ jazyk HTML. Na živnost jsem v následujících letech dokonce udělal pár webů, ale hlavně se začal učit soft-skills, které mě pomáhají dodnes. Třeba prodej. Tenkrát, milí čtenáři, totiž nestačilo vyvěsit inzerát „Umím HTML, chcete mě?“ někam na Facebook. Zpočátku jsem neměl mobil a telefon doma u rodičů ve Fryčovicích taky nebyl. Nezbylo, že chodit po ostravských IT firmách, a ptát se, jestli nechtějí dělat weby. Nechtěly. A většinou vůbec nechápaly, o čem to mluvím. Už tehdy ale pro seberozvoj dobře fungovaly „side projekty“. Na internetu byly velmi populární neoficiální prezentace různých kapel nebo obecně kulturních fenoménů. Pokud vím, i Ivo Lukačovič začínal tvorbou prezentace Divadla Járy Cimrmana. To já se tehdy specializoval na kapelu U2. Její prezentace byl první rozumně velký web, který jsem dělal a spravoval. První pořádný web. Fansite pro U2 na MusicHall.cz. Dneska už zdrojáky na disku nenajdu a ani Internet Archive to neskladuje v původní verzi. Je to trochu škoda, ale o trochu víc dobře. Při hledání reálné praxe pro tvorbu webů mě zachránil až vzdálený strýc, který do cestovky hledal někoho, kdo umí s počítačem a pomůže mu obsluhovat rezervační systém. Moje očekávání pro následnou spolupráce vypadala asi takto: „ano, budu ti zadávat ty klienty do systému, když mě necháš, abych vám udělal web“. Následující roky toho lituji, protože trávím čas převodem tabulek s termíny a cenami zájezdů z QuarkXPress do HTML. Ale s tímto prvním klientem jsem si udělal webařskou střední. S cestovkou jsem strávil zhruba 15 následujících let a dostal tam skvělou odbornou školu, kde jsem byl sám sobě učitelem – učil jsem se tam grafiku, CSS, marketing, ale i vlastně i důležitější věci než řemeslo. Jeden z mých prvních „komerčních webů“. CK Rywal, rok 2002. Tohle už je asi třetí verze webu, ty původní se na Wayback Machine nezachovaly celé. Zdroj: Internet Archive. Zjistil jsem třeba jak rychle se mění trh, na kterém se mí klienti pohybují, a jak zásadní je tohle sledovat, pokud člověk dělá i strategičtější práci jako je marketing. Takový cestovní ruch prošel na internetu úplně vším: těžkými začátky, kdy na ty weby nechodil nikdo; obrovským boomem, kdy nám fungovalo skoro všechno a prodeje se každý rok zlepšovaly; konsolidací, kdy lidé začali dávat přednost větším značkám; pádem celého trhu, který probíhá během pandemie. Dneska už to sleduju jen z povzdálí, ale je to dobrá lekce. To, že něco skvěle funguje dnes, neznamená, že to bude fungovat za rok. A opravdu to neplatí jen pro historicky výjimečné okamžiky jako je epidemie covidu. Už dlouho jsem ale tehdy věděl, že nechci být webařskou „holkou pro všechno“, protože to byla už v té době příliš široká specializace a výsledky tudíž nikdy nevybočovaly z lepšího průměru. Věděl jsem, že chci dělat grafiku a klientský kód a věděl jsem, že v Ostravě to nepůjde. Pak jsem se jednou opil s kamarádem z obchodky Michalem Bočvarovem a on řekl: „Tak to pojď zkusit do Prahy“. 2000: stěhování do Prahy a 3 roky práce v ILIKETHIS! ILIKETHIS! byla jedna z asi pěti kultovních agentur, kam tehdy chtěli jít pracovat všichni. Mimochodem, do dneška z nich přežily tuším jen Symbio a FG Forrest. Velmi dobře si pamatuju, že jsem se chodil k mámě do obchodu na vytáčené připojení k internetu koukat na jejich weby. Byly skvělé. Ta grafika! Web ILIKETHIS! mě tehdy fascinoval. Na Internet Archive se nezachoval celý, ale tamní verze alespoň ukazuje boží využití tehdy nové technologie – frejmů. Pro mě byla práce ILIKETHIS! zcela nedostižná meta. Představoval jsem si, co by se tam člověk naučil. Ty bláho, jak oni to dělají?! Absolutně jsem ale nevěřil tomu, že by kluk z Fryčovic mohl někdy v takové firmě pracovat. V Praze jsem do té doby byl jen na školním výletě během střední školy, ze kterého si pamatuju jen to, že jsme v chatce kouřili jointy a zpívali něco rusky. Ale za zkoušku ve velkém městě nic nedáš, že jo… Počítal jsem, že se do roka vrátím. Měl jsem v té době takovou životní strategii – základ je pořádně se opít. Držel jsem se jí pevně i v noci před pohovorem na práci do ILIKETHIS! a na ten pak přišel v rozverné, ale uvolněné náladě. Vlastně si jej pamatuju jen matně. Dopadlo to tak, že toho pohodového, veselého a nenáročného kluka odněkud od Ostravy prostě přijali. Následovaly tři roky pilování řemesla, ale také učení se daleko zásadnějších věcí: přímou komunikaci s klienty, první prezentace a ke konci mého jediného životního zaměstnání také vedení tříčlenného kodérského minitýmu. Dostal jsem ale také lekci z agenturního vývoje webů: jaký opruz může být práce pro některé klienty, jak málo času na pilování věcí je, jak nemožné je sladit pracovní režimy obchoďáků,designérů a vývojářů, jak velké bariéry nepochopení mohou vznikat už v dvacetičlenných týmech různě specializovaných lidí. Od té doby jsem se vždy, když jsem hodně pracoval pro různé klienty, takže „agenturně“, snažil mít alespoň jeden „vlastní“ projekt, který můžu pilovat a dlouhodobě budovat. To pro mě dlouho byla práce právě pro ostravskou cestovku Rekrea. e-Slovensko.cz: Svého času jeden z největších prodejců zájezdů na Slovensko a můj první úspěšný „vedlejší projekt“. Jednu lekci jsme tehdy dostali všichni. V roce 2001 splaskla první internetová bublina a firma rázem přišla o zakázky z USA, které ji živily. Když bylo nejhůř, celá firma dělala bannerové kampaně. Nesnášeli jsme to, ale firmu jsme měli rádi, byl to lovebrand, takže jsme si prostě mákli. Tady jsem pochopil, že skoro žádné podnikání nemůže stát na jedné noze, i když ta noha vypadá stabilně. Od té doby, když vidím, že začínám hodně stát na jedné noze, buduju usilovně nohu druhou a třetí. Od té doby to bylo v ILIKETHIS! od desíti k pěti, respektive od bannerů k webům a zpátky. S designérem Jirkou Libánským jsme si řekli, že bychom občas mohli zkusit něco menšího, ale pěkného, dělat pro vlastní klienty. Nástup CSS a první blog Po roce 2000 se začalo mocně prosazovat CSS, v ČR propagované Markem Prokopem, Petrem Staníčkem a dalšími. Tady jsem si uvědomil, že bez sdílení zkušeností starších a zkušenějších, jsou juniorní řemeslníci odkázaní na vlastní objevování slepých cest. Zdlouhavé objevování. Tohle uvědomění se o pár let později transformovalo do spolku Frontendisti.cz. Někdy v roce 2002 jsem také, chvíli po Marku Prokopovi, začal psát první blog – na machal.creativity.cz, v tehdy populární formě kombinace osobních zápisků s odbornějšími příspěvky. Pro kontext současníkům: Tehdy bylo blogování něco jako dneska Clubhouse nebo před rokem podcasty, prostě legrace pro pár zainteresovaných bláznů. Služba bloguje.cz vznikla až o rok později, blog.cz dokonce až v roce 2005. machal.creativitiy.cz: První blog. A pak už to jelo. Díky skoku na tehdy módní vlnu blogování jsem zjistil, že mě psaní baví. Nikdy bych to do sebe neřekl, ještě stále ve mě žily dost divné zážitky z psaní středoškolských referátů. Je ale rozdíl psát o něčem, co mě nezajímá a o něčem, co mě zajímá a baví. Později jsem objevil další vrstvy zábavy jménem psaní – například jak skvěle se přitom přemýšlí. Writing is thinking. 2004: studio Shortcat S Jirkou Libánským zakládáme Shortcat. Jirka je skvělý designér, mě zase už celkem dobře jde kódování. V době založení jsme navíc měli obstojné kontakty a poptávka po webových řešeních začala po bublině opět růst. To zní jako dobrý začátek dobrého failu, že ano? Faily byly, to ano. Například první větší zakázka, seznamka pro Kofolu. Kromě dne spuštění si pamatuju zejména noc předtím, kdy jsem se postupně z unaveného kodéra transformoval do člověka, který každý 15 minut budí programátora Vítka. Měli jsme toho občas dost. Fakt dost. Kdyby se nepsal rok 2004, řekl bych, že žijeme startup life. Pár online prací studia Shortcat: General Registry, Aerofilms nebo Jablonex Group. V Shortcatu jsme to táhli opravdu dlouho, dost přes deset let. A vcelku úspěšně. Dělali jsme pro skvělé klienty – Aerofilms a jejich kina Světozor, Aero a OKO, několik let jsme obhospodařovali Pražské jaro, vyvíjeli jsme interní systém pro Palác Akropolis. Dělali jsme rebranding a weby pro tehdy ještě relativně slušně fungující Jablonex Group. Jenže čím větší zakázky jsme dělali, tím více jsme naráželi na to, že systém dvou společníků a zakázkově najímaných freelancerů prostě nefunguje. Citelně nám chyběl třetí společník – odborností programátor, který by se dokázal odborně i řízením externistů postavit za firmu. Opět jsem se toho hodně naučil řemeslně, hlavně o UX , ale ty nejcennější lekce mi epizoda se studiem Shortcat poskytla v oblasti „měkkých“ znalostí: S Jirkou jsme vždy byli velcí nadšenci do našich oborů a relativně málo jsme řešili byznysovou stránku věci. Celková kultura klientů webařských firem byla navíc v té době ještě v plenkách. Za špičkový design nebyli klienti ochotní platit to, co dnes; nebylo to dobré s jejich znalostí webdesignu; a poměrně často jsme naráželi na problémy se splatností a další praktiky české cesty ke kapitalismu z devadesátek. Tehdy, v roce 2005, mi na oběd půjčil společník a klient nakonec zaplatil, ale z pohledu cash flow a „celkové pohody“ to bylo hodně náročných pár let. Pořád jsem si říkal: V nejhorším se, Michálku, můžeš nechat zaměstnat. Ale takhle špatné to nikdy nebylo. Ve studiu Shortcat s nutnými proprietami téhle epochy: razítkem, pevnou telefonní linkou a košilí. Foto: Petr Štěpánek, Stipack. Vždycky, když u mě probíhaly velké posuny na úrovni tvrdých nebo měkkých znalostí ve směru, ve kterém jsem se rozhodl jít, říkal jsem si, že to někam vede a že to má smysl. V Shortcatu jsme na tehdejší dobu odborně dělali skoro všechno dobře, ale proti nám trochu hrálo období, které jsme si pro začátek tvorby webů s důrazem na špičkový design, zvolili. Mě to ale bavilo. Kodéřina a webdesign, to byla neoddělitelná součást mého života. Starost o peníze ale občas v prioritách vyskočí na vyšší příčky, což se člověku stane zpravidla, když přestává živit jen sám sebe. 2010, vývojařina, školení, přednášení, na volné noze První syn Honzík se nám narodil v lednu 2010. Někdy koncem předchozího roku přišla má moudrá žena ze školení Google Analytics od Honzy Tichého a říká: „Heleď, tohle bys měl dělat“. Začínalo období, kdy jsem poprvé v životě, kromě vášně pro obor a radosti z něj, začal řešit i tu věc, která platí účty. V té době už jsem se považoval za vcelku zkušeného frontendového designéra, přes 10 let praxe měl v roce 2010 jen málokdo. Už pár let jsem se mimo to snažil předávat zkušenosti a sumírovat si myšlenky na první verzi Vzhůru dolů. Bylo mi ale jasné, že člověk musí vyrazit mezi lidi, že ty články mají tak nějak poloviční účinek, když vás lidi nikdy neviděli na živo. Začal jsem školit pro WebExpo Academy a po pár letech i pro Root Akademii. Z dnešního pohledu mi to vůbec nešlo, ale ohlasy na to byly docela dobré, asi u lidí zabíralo moje nadšení a zkušenosti z praxe. Lektorské dovednosti jsem začal pilovat až o pár let později. „Do háje, jak jsem se sem dostal…?“ Jako pro introverta pro mě bylo vést školení jako… no… den předtím jsem zpravidla nespal, bylo mi fyzicky špatně a vůbec jsem netušil, co mám jako před těmi lidmi dělat. „Až já jednou toho Honzu Tichého potkám…!“ říkal jsem si. Dodneška mám z „pitomých“ hodinových webinářů trému a rodina na mě nemůže mluvit. Ale rozdíl tam je. Dneska mám trému a zároveň se na to děsně těším. Časem jsem pochopil, že člověk může mít v životě různé role. Role málomluvného introverta u lektorů moc nefunguje, ale lze si říct – hele, teď jsem lektor a budu to dělat tak, jako to dělají lektoři, kteří mě osobně bavili a něco naučili. A hotovo. Po krátkou dobu může člověk klidně působit jako rozjuchaný extrovert. Školící místnost je jeviště. Doma u večeře si zase pomlčím. Je to jen role. Přednáška o AMP na WebExpo 2018 v kině Lucerna. V angličtině, kterou běžně nemluvím. Když jsem dal tohle, dám i jiné věci, ne? Postupně se nabalovaly triky, jak si s tím poradit. Silnou trému utlumila poctivá příprava a na nervózu před přednáškou nebo školením neznám nic lepšího než prostě mluvit s lidmi. Člověk může klidně s náhodným kolemjdoucím plácat o počasí a pak jde na pódium úplně klidnej. Jen nechápe, jak se tam najednou vzal a co tam má jako dělat. Školit, přednášet… Běžnému volnonožci to může znít jako zbytečný stres. Jsem ale přesvědčený, že můžete dělat nejlepší odbornou práci na světě, můžete o tom občas i něco napsat, ale — dokud neseberete odvahu a nepůjdete svou práci ukázat osobně lidem, bude to sice nejlepší odborná práce na světě, ale jen pro vás. Nikdo další to neocení. A to „neocení“ v češtině půvabně obsahuje obě roviny téhle věci. V tomhle období jsem pracoval jak pro klienty Shortcatu, tak pro vlastní kodérské klienty, stále více jsem školil, začal přednášet a stával se stále více klasickým znalostním freelancerem, jak jej dnes definujeme. Freelancerem, který prodává své řemeslo nejen tím, že jej za peníze vykonává, ale prodává i znalosti z něj získané. 2014: zakládáme spolek Frontendisti.cz Někdy kolem roku 2013 nastává další zlom. Kromě narození Jakuba jej pro mě definuje také to, že už tak nějak vím, jak dělat odbornou práci a zároveň těšit se ze stabilních příjmů. Táhne mi na čtyřicet a říkám si, že by bylo fajn, když bych mladším dokázal pomoci i jinak než psaním článků, příspěvky na Twitteru a školeními. Stále častěji se z hlavy vynořují pojmy jako komunita a setkávání. My ajťáci sice na první pohled kontakt s lidmi nevyhledáváme, ale skutečnost je jiná. Také se chceme družit, jen nám to většinou stačí méně často než řekněme obchodníkům. Ostatně – zeptejte se vývojářů zavřených v lockdownu, zda jsou spokojení, a uvidíte. A družit se se spřízněnými dušemi, to chce opravdu každý. Něco jako blížící se krize středního věku ve mně navíc říká, že by tohle celé, celá moje kariéra měla mít nějaký vyšší smysl. Že definice života „nadšený kodér“ ani „nadšený kodér, který vydělal peníze“ smysl nedává. Začínám tedy přemýšlet i nad něčím, co by se dalo nazvat životní misí a končím myšlenkou, že bych měl využít toho co umím a v co nejlepší formě to předat dalším. Nakonec – proč se omezovat jen na sebe? Pojďme vzít to, co další umějí a rozdat to mezi ostatní. Spolek Frontendisti.cz myšlenkově vznikl během natáčení jednoho podcastu Robina Pokorného, velice záhy se ale přidali brněnští SUPERKODERS, velcí nadšenci do frontendu, a my začali dělat menší a pak stále větší meetupy v Praze a Brně. Časem se přidala i Ostrava a občas Plzeň. Jeden z první meetupů Frontendistů v Ostravě. Postupně se z Frontendistů stala zásluhou práce dnes už zhruba dvacetičlenného týmu velká věc: zorganizovali jsme desítky srazů, děláme streamy, na YouTube máme přes 200 videí, hlavní diskuzní skupina na Facebooku přes 4,5 tisíce členů. Nejcennější lekce z vedení spolku? Sám toho člověk může dokázat docela hodně, ale co je to oproti výsledkům práce nadšeného týmu. A opět: Ty velké věci se dějí, když lidé od počítačů vylezou od počítačů a začnou se spolu bavit. Ve spolku Frontendisti pracujeme na dobrovolnické bázi, bez nároku na odměnu. Ano, jsme poměrně efektivní a práce se dělí mezi více lidí, ale nejdůležitějším zhruba pěti členům štábu to vezme nemálo času. Pak tady mám psaní článků na Vzhůru dolů, podcasty, videa, občas nějakou tu přednášku a další činnosti, které sice plní misi, ale bezprostředně nevydělávají… Mám bezva ženu, dva krásné kluky a rozhodně je chci vidět vyrůstat, trávit s nimi čas. Díky tomu se ale čas, který zbývá pro vydělávání peněz poměrně zredukoval, že? 2015: škálovatelné příjmové modely: e-booky, školení pod vlastní značkou V momentě, kdy mě do života vstoupilo druhé a třetí dítě , začal jsem přemýšlet, jak vymyslet příjmovou stránku tak, aby „škálovala“. Aby si člověk za méně času vydělal stejné množství peněz. Zvyšování hodinovky má u vývojáře hranice. Ještě jsou tady ale jiné možnosti. V té době se už považuji za vcelku zkušeného lektora. Zároveň vidím, že mě pár lidí díky Vzhůru dolů zná a že by tedy stálo za pokus začít školit pod vlastní značkou. Takhle vznikly školení ze Vzhůru dolů. Povedlo se je škálovat tím, že jsem časem přizval další lektory a pokryl tak větší šíři frontendových témat. Školení ze Vzhůru dolů považuji za velmi úspěšný projekt. Kdy se ale budeme moci znovu takto setkávat? V druhé polovině zhruba sedmiletého fungování se povedlo delegovat i významnou část organizační práce. Už z toho začínala být malá firmička na vývojářská školení — když přišel covid. Od loňska samozřejmě prezenční školení nedávají smysl , ale teď pokračujeme prozkoumáváním možností onlinu – jednak webináři a jednak video-kurzy, zatím v podobě záznamů z webinářů. Ze všech formátů, které dělám, je mi nejbližší psaní. A pokud jde o psaní, jeho transformace do produktu je poměrně jednoduchá. V roce 2015 jsem přišel s prvním e-bookem o CSS3, což byla ještě spíše kompilace už dříve napsaných textů, a po jeho úspěchu už s od nuly napsanou knížkou a ebookem o mém hlavním tehdejším odborném tématu – responzivním designu. Oba si pořídilo hodně přes tisícovku lidí, za což jim děkuji, protože i díky tomu mohou vznikat další texty na blog. Tištěná kniha „Vzhůru do webdesignu“. Větší projekt jsem si asi nikdy na vlastní bedra nenaložil. Stálo to za to? Určitě. Foto: Czechitas. Na třetím e-booku, o AMP, jsem si zase vyzkoušel spolupráci s dalším autorem, podcastovým parťákem Robinem Pokorným, ale je pravda, že tady jsme trochu zjistili, že existuje jen jeden hlavní argument pro prodej knihy – populární téma. A AMP je mezi vývojáři bohužel stále populární jen velmi málo. Nicméně nedělejte to, když vás to baví a ta technologie vám dává smysl… Psaní a publikace e-booků a knih je jediná oblast, u které smutně lituju, že na ni nemám více času. Beru ji za nejvyšší metu svého tvůrcovství, kde můžu jako jednotlivec zúročit skoro všechny schopnosti, které jsem během profesní dráhy získal – psaní, design, vývojařinu a marketing. I tady se divím, že se tomu nevěnuje více lidí a že e-booky, které od freelancerů na trhu potkávám, patří většinou do kategorie malých prezentačních brožur, které se směňují za e-mailovou adresu. Jaká škoda! Na organizaci kurzů jsem se naučil zásadní věc – základy zákaznické podpory. Troufám si říct, že můj přístup je hodně prozákaznický. Klienta beru jako partnera a každý feedback bedlivě zkoumám jako unikátní příležitost pro zlepšení produktu. Někdy je to opravdu boj, hlavně s vlastním egem, ale nemohl jsem si přát lepší školu pro start poradenské kariéry. 2018: od vývojáře ke konzultantovi Všechny tyhle aktivity mě ukrojily pořádný kus z koláčového grafu časového rozpočtu na „skutečnou“ práci. Některé kousky koláče času mimo vývojařinu mě už zčásti živily, některé ne, ale vzhledem k misi jsem se jich nechtěl vzdávat. Řekl jsem si, že zbývající čas musím prodávat ještě chytřeji. Vývojářská práce mě stále více přestávala dávat smysl. Za prvé proto, že jsem na ni začínal být docela starý. Tedy ne, že bych nesledoval nejnovější trendy nebo nedokázal pracovat efektivně, právě naopak! Byl pro mě stále větší problém dělat věci rychle, bez důrazu na kvalitu. Po druhém extrému – opravdu vypiplaném výstupu jsem neviděl tak velkou poptávku. Za druhé – času „na prodej“ mě zůstalo málo a jako vývojář jsem tedy přestával být flexibilní. Vývojář nemůže klientovi říct: „tuhle drobnost udělám až za týden, teď jsem zasekaný přípravou nového kolegova školení“. Tudy cesta nevede, řekl jsem si. Můj konzultantský web s fotkou se zkříženými rucemi. Jako vývojář jsem se před patnácti lety takovým webům smál. Přechod od vývojářské ke konzultační praxi mě bolel. Nepamatuju si, že bych jindy profesně tak moc bojoval sám se sebou. Obtížně se mi smiřovalo s tím, že opustím něco, co mi bylo dvacet let vlastní. Bojoval jsem se špatným pocitem, že jde o zradu řemesla. „Kdo nic neumí, ten školí a kdo neumí ani školit, ten konzultuje“ říká se. Bál jsem se, že technicky zakrním a nedůvěra vůči velké části poradenskému byznysu – „prodejcům teplé vody“, lidem, kteří se umějí prodávat, ale mají slabé oborové know-how – byla nemalá. Moje obava byla lichá. Postupem času jsem se v rámci poradenství zaměřil na rychlost webu a můžu říct, že můj pracovní postup je z určité části velmi vývojářský, blízký například code-review nebo refaktoringu. Získal jsem navíc dříve netušený přehled po různých možnostech, řešeních, frameworcích a týmových kulturách. Vlastně si myslím, že jsem i díky tomu teď daleko lepší vývojář, i když kódu reálně píšu málo , píšu ho výrazně pomaleji než dříve, protože nad ním hodně přemýšlím, a občas do Googlu zadávám překvapivě jednoduché věci, které jsem měl dříve v malíku. Prostě je v hlavě nahradily jiné, dennodenně používané znalosti a dovednost. Nakonec je to tak, jak si to člověk nastaví. Pokud má člověk rád obor a lpí na kvalitě, nestane se z něj přechodem na poradenství někdo úplně jiný. Vlastně se dost divím, že se poradenstvím neživí více vývojářů na volné noze. Říkal jsem to i Robertovi v rozhovoru, který najdete výše. Myslím, že technické konzultace kolem webařiny mají velkou budoucnost, protože pohled vývojářů pracujících na projektu jde sice hodně do hloubky, ale málo do šířky, málo v kontextu. Jinak to ani z definice nejde. Stále více firem oceňuje „třetí oči“, pohled zvenčí, který může web a celkovou práci týmu posunout o míle vpřed. 2020, covidový přelom Éru příjmů škálovatelných skrze školení ukončil čínský netopýr a epidemie koronaviru. Někdy v dubnu roku 2020 jsem měl starostí plnou hlavu. Na účtu se na mě koukaly nižší stovky tisíc korun za objednávky školení, které jsme kvůli covidu nemohli zrealizovat. Řešil jsem vztahy s dodavateli, s lektory a hlavně s klienty. Zabíralo to velké množství času a energie, hodně špatně jsem spal. K tomu jsem neměl vyřešenou náhradu příjmů. Poradenské příjmy u mě v té době figurovaly spíše jako doplněk ke školením, další e-book jsem měl sice rozepsaný, ale mám jej rozepsaný dodnes… Je to běh na dlouhou trať, ne řešení cash-flow. Zvažoval jsem dokonce, že bych přišel s nějakým částečným zpoplatněním obsahu na Vzhůru dolů. Ale bylo by to v kontrastu s misí, na kterou jsem se vydal, takže tento krok skončil na konci seznamu možností, ale ilustruje zoufalost stavu, do kterého jsem se dostal. Zachránily mě dvě věci: úspory a boom onlinu. I když i to druhé vypadalo v první polovině roku špatně. Někteří klienti na jaře dupli na brzdu. Jenže pak zjistili, že online byznys se jim kvůli pandemii rozjel jako šinkansen. Trpělivě jsem publikoval a občas přednášel o rychlosti webů, snažil se co nejlépe pomáhat klientům a začali se ozývat noví. Někdy kolem poloviny roku 2020 tato noha mého podnikání už unese skoro celou zátěž, aniž bych musel zredukovat misi podpory komunity, kterou dělám prostřednictvím Vzhůru dolů a Frontendistů. Věci také pomohl první velký výstup našeho stále hlubšího partnerství se SUPERKODERS. Spustili jsme PageSpeed.cz, značku zaštiťující naše společné aktivity v poradenství k rychlosti webů a zároveň testovací nástroj. Měření rychlosti webu na PageSpeed.cz. Se školeními to dopadlo dobře. Po několika odloženích jsme obsah nakonec dodali v online podobě. Mezitím jsme se spolu s Michalem Matuškou a Rikim Fridrichem snažili naučit řemeslo online lektora. A stále víc si uvědomovali, že podobnost mezi lektorem a online lektorem je asi tak velká jako mezi Javou a JavaScriptem, jak praví starý webařský vtip. Nepamatuju si, zda jsem se toho někdy naučil tolik jako v roce 2020: Jak moc mi pomohlo, že jsem z pohledu příjmů vše nesázel na jednu kartu. Jak rychle může padnout „starý svět“ a prakticky za měsíc jej nahradit „nový svět“. Jak zásadní je umět se odpoutat od „starého světa“ a vsadit alespoň částečně na ten nový. Naučil jsem se i jiné věci. Jako většina lektorů jsem nainvestoval do vybavení, u nás doma to v jeden čas vypadalo jako ve studiu Českého rozhlasu: Moje domácí vysílací studio, viz Facebook. Nyní už je většina přesunutá do nové kanceláře, kde neruší provoz rodiny. Hrozně moc jsem potřeboval vyrůst jako konzultant k rychlosti webů, nejen z pohledu hard-skills, které se nám daří v týmu PageSpeed.cz sdílet navzájem, ale také z pohledu klientské péče, komunikace, managementu projektu zrychlování směrem ke klientským týmům. 2021: a co bude dál? Když se podívám na svůj profesní rok 2019 a 2021, zdá se mi, že vidím dvě naprosto odlišné osoby. Ve skutečnosti je to pravda, ta druhá má méně vlasů a poměrně dost šedin. Ale asi víte, jak to myslím. Jsou věci, na které se můžu spolehnout: Konzultace k rychlosti webů je hodně specifický obor, ale i vzhledem k letošním updatům Googlu v něm pro sebe vidím velkou budoucnost. Frontendisti.cz se velmi rychle ztransformovali do „onlajnu“ díky šikovnosti lidí ve štábu jako je Martin Kolář a další. Blog na Vzhůru dolů je zavedená značka a daří se mi připravovat stále více obsahu i s externími autory. Web Performance Consultant. Aneb co takhle to zkusit za hranicemi? Co budu dělat dál? Štěstí přeje připraveným, takže zde vidím i pár příležitostí, do kterých investuji svůj čas: Z PageSpeed.cz může vyrůst buď něco jako malá agentura pro pomoc s rychlostí webů nebo nástroj, který velkou část poradenství zautomatizuje. Školení ze Vzhůru dolů se určitě vrátí, ať už v podobě hodinových webinářů nebo kratších školení. Zkusíme i videokurzy bez živého lektora, zatím jako prodej obsahu v podobě upravených záznamů z webinářů. Vzhledem k tomu, že podle výše uvedeného jednou za dva roky vydávám ebook, letos je čas na další. ;) No a… rozhodl jsem se zkusit štěstí na anglicky mluvícím trhu prostřednictvím projektu Roberta Vlacha Freelancing.eu si mě můžete najmou ze zahraničí jako web performance consultant. Tak to vidíte. Chtěl jsem si jen u příležitosti probíhající profesní transformace sepsat pár poznámek pro sebe — a nakonec jsou z toho paměti. Snad jsem vás inspiroval, motivoval, nakopl, odradil… nebo alespoň pobavil. Budu rád, když mi napíšete svůj pohled, buď do komentářů nebo na e-mail martin@vzhurudolu.cz.
09.03.2021 06: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 dotazů na vlastnosti 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: ```css @supports @supports or ) and ) Aby nedošlo k záměně mezi and a or, syntaxe vyžaduje, aby byly výslovně specifikovány oba, raději než čárky nebo mezery pro jednu z nich. Asi víte proč. Autoři specifikace se poučili s 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 uváděli v 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 řešilo více autorů, pomocí různých hacků. Zajímavý je například tento, který se ptá 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ě @supports. Výsledkem je, že máte řešení pro nejširší možnou zkupinu 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ž „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ím 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 } 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. cdpn.io/e/MWbqeMG 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. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
06.03.2021 03:30 Čtete rozšířenou verzi textu, který jsem psal pro prosincový newsletter. Rok 2020 byl samá změna. Jen měla často podobu komplikace. Nevím jak vám, ale mě se toho letos pracovně změnilo opravdu hodně. Víte, že skoro celý rok nebylo možné organizovat naše oblíbená prezenční a firemní školení, začali jsme proto dělat webináře a prodávat videa. Spolu s lektory jsme pracovali na online prezentování, navíc se někteří z nás učili stříhat, streamovat a prostě být víc online. Konec roku nás ale díky tomu nachází v situaci, kdy už vcelku dobře víme co a jak dělat v roce příštím. Máte se na co těšit a věřím, že naše onlinové produkty oceníte. Ale zpět k odborným záležitostem. Pro takové CSS to byl dle mého skvělý rok. Covid, necovid, svět CSS se krásně posunul vpřed Subjektivně viděno se adaptace nových technologií prohlížeči vyvíjí tak rychle, že se tou pomalejší částí stáváme my, vývojářky a vývojáři. CSS grid je mřížka. Dvojrozměrná mřížka. A nejčastěji nově používaná CSS technologie v roce 2020. Podle výsledků průzkumu StateOfCSS letos vývojáři nově používali hlavně tyto technologie: CSS grid object-fit CSS proměnné Díky postupnému mizení víte-kterého-prohlížeče je i v Česku možné říct: Pokud jste tyto vlastnosti ještě nezačali používat, už opravdu neváhejte. Zajímavé jsou i výsledky dotazu na nejčastěji nově používané technologie. Tailwind CSS Utility třídy CSS modules Zdá se, že rok 2020 patřil utilitám. Ostatně i autoři Bootstrapu v nové páté verzi jednoúčelové třídy velmi rozšířili. Snadnější optimalizace rychlosti, které přinesl letošní rok K výsledkům průzkumu bych osobně ještě přidal i další výborné novinky z letoška, které se týkají mého hlavního zaměření - optimalizace rychlosti webu. Nejdůležitější změna z pohledu optimalizace rychlosti webu? Rozhodně nativní líné načtení obrázků: Nativní lazyloading můžete použít jak pro prvky , tak . Pokud se to použije chytře, vylepší to rychlostní metriky opravdu slušně. A co zajímavého přišlo dále? Podpora obrázkového formátu WebP ve všech moderních prohlížečích . Vlastnost content-visibility, líné vykreslení částí DOMu. Web Vitals od Googlu jako jednoznačné a snadno naučitelné metriky posuzování rychlosti. Boom JAMstackových webů . O podstatných novinkách na poli rychlosti webu jsem mluvil na prosincovém streamu TopMonks Café: Nejčtenější články roku 2020 na Vzhůru dolů Co vás v roce 2020 zaujalo z našeho obsahu? Hlavně UX Tipy: Článek 21 tipů pro lepší uživatelské rozhraní od UX designéra od Marka Čevelíčka byl nejpopulárnějším novým textem roku 2020. Dále jste četli: Obrázky WebP – loni aktualizovaný text v příručce o formátu, který již podporují všechny moderní prohlížeče. Preload – nový text o přednačtení prvků stránky. Strukturovaná data - loni aktualizovaný text o úryvcích ve vyhledávání Googlu. Práce z domova - tipy jak na home office nezblbnout. Téma loňska, že ano… Web Vitals - příručka o nejdůležitějších metrikách rychlosti od Googlu. Nejposlouchanější podcasty Loni vás nejvíce bavila epizoda o CMS s Markem Prokopem: Dále jste ve velkém poslouchali například povídání o Next.js a o frontendu a backendu s kluky z .NET.CZ Podcast. Děkuji vám za přízeň v roce 2020. Ať se vám v roce 2021 daří a hlavně — buďte zdrávi! Otázka do komentářů na závěr: co byste z roku 2020 vyzdvihli vy? Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
03.03.2021 01:30 Nastříhali jsme pro vás tři nová videa. Jde o upravené záznamy hodinových webinářů, které vedl Riki Fridrich v loňském roce. Rok 2021 tak můžete začít investicí do svých znalostí – zde se konkrétně můžete naučit používat NPM, hlavně pro potřeby automatizace svých procesů nebo psát testovatelný JS kód s pomocí vhodné sady testovacích nástrojů. NPM a Yarn NPM a Yarn jsou vnímány hlavně jako správci balíčků, ale byla by škoda je používat jen tak málo. Podívejte se na krátkou ukázky z hodinového webináře: → Více informací — Objednat za 495 Kč s DPH Píšeme testy JS kódu Psát testy je jednoduché pokud umíte psát testovatelný kód. V tomto webináři si ukazujeme jak na to. Ukázka: → Více informací — Objednat za 594 Kč s DPH Nástroje pro testování JS kódu Jaký nástroj vybrat pro testování javascriptového kódu? Webinář vám ukáže rozdíly a lektor nasdílí zkušenosti. Ukázka: → Více informací — Objednat za 594 Kč s DPH Jako vždy dostanete přístupy na stránku s videem, repozitář s ukázkami a odkazy na další studium probíraných témat. Nezapomeňte, že také videa můžete objednávat hromadně na jednu fakturu a se slevou 10 %.
02.03.2021 00:02 Připravili jsme pro vás další video-kurzy, nastříhané z nedávných webinářů Michala Matušky a Martina Michálka. Jejich prostřednictvím získáte za příjemnou cenu slušné množství znalostí z praxe lidí, kteří se problematice věnují při práci pro klienty. K tomu dostanete podklady v podobě prezentací a odkazů. Přístup k videím je pro vás časově neomezený. Měření a optimalizace CLS Cumulative Layout Shift udává stabilitu vzhledu stránky během vykreslování a její špatné hodnoty mohou pro uživatele znamenat velmi nepříjemný prožitek při vykreslování stránky. Ukázka Obsah Co je CLS a proč je důležité? Ukázka z denikn.cz, CLS jako součást důležitých Web Vitals, CLS jako UX metrika. Problém a jeho měření Měření pomocí PageSpeed Insights, PageSpeed.cz, důležité rozšíření Web Vitals, nepostradatelná Google Search Console. Co by vás nenapadlo Jak přesně se layout shifty počítají, 500 ms hranice pro vyžádané posuny, časté problémy s animacemi. Demo Případová studie opravy CLS na webu Deníku N a Slevomatu – měříme, hledáme problémy, ověřujeme hypotézy za pomocí DevTools a dalších nástrojů. Optimalizace Držíme plochu s poměrem stran, pozor na asynchronní JS, optimalizace nechtěných posuný vyvolaných fonty, potíže s vkládanou reklamou. Otázky a diskuze Diskuze nad weby Revolgy, Autobazar Vysočina a Slevomat. Font Metrics Override Descriptor. Účastník webináře Jan Bien nám ke kurzu napsal: U všech webů mám dlouhodobě CLS v zelených číslech, a tak jsem se naivně domníval, že na CLS nic není. … Na kurzu mi Martin ukázal že to zdaleka není tak prosté. Koupit za 595 Kč Více informací Měříme a optimalizujeme LCP Largest Contentful Paint je možná tou nejdůležitější ze sady metrik rychlosti webu Web Vitals, doporučovaných Googlem. Ukázka Obsah Co je LCP Důležitost Largest Contentful Paint. LCP v kontextu dalších metrik. Co může a nemůže být „největší obsahový prvek“ a jak jej nalézt. Měříme LCP PageSpeed Insights a zmatek v číslech. Měříme lépe na PageSpeed.cz. Proč je Google Search Console nepostradatelná. Demo Ukázková pitva a optimalizace dvou obsahových webů a jednoho e-shopu za použití Chrome DevTools a nástrojů Lighthouse, tracingu v Performance tabu. Otázky Jak velké zmenšení je potřeba? Úprava designu kvůli LCP. Rozdíl mezi syntetikou a uživatelským měřením. Účastník webináře Jan Matějů nám napsal: Aktuální téma - důležitá metrika. Martin hodně ví a umí téma srozumitelně představit, vysvětlovat v kontextu. Inspirativní hodina. Koupit za 595 Kč Více informací Jak správně vkládat SVG na web Zjistěte, jak vkládat SVG do stránky, optimalizovat soubory a na co si dát pozor v podkladech. Ukázka Obsah Vektorový zdroj Optimalizace začíná nakreslením ve vektorovém editoru nebo kontrolou podkladů. Základní ověření v Adobe Illustrator. Texty ve vektorových zdrojích. Další tipy na optimalizaci zdroje. Postprocessing optimalizace dat Proč mít automatickou optimalizaci? SVGO a další nástroje. Kdy neoptimalizovat automaticky? Stupně preciznosti. Optimalizace implementace Externí soubor, URL encoding, inline SVG. Co je kdy vhodnější a co už raději nepoužívat? SVG triky Znovupoužitelnost. Jak upravovat už vložené SVG. Kaskáda v SVG. Dědičnost v SVG a další. Účastník webináře Daniel Střelec nám napsal: Obdivuji Michala za to, kolik toho dokáže nahustit do hodinového webináře. Koupit za 595 Kč Více informací Objednávka více videí se slevou 10 % Nezapomeňte, že videa můžete objednat také na jednu fakturu — hromadně se slevou 10 %. Prohlédněte si všech 18 hodinových videí o rychlosti webu a JavaScriptu, které máme aktuálně v nabídce.
02.03.2021 00:02 Loni jsme na konci roku hodnotili změny a novinky zpětně, letos se pokusíme odhadnout trendy do roku 2021. Vybrali jsme pět oblastí a diskutujeme, jak moc ovlivní webový vývoj v příštích 12 měsících. A rovnou prozradíme, že padnou i nějaké palce dolů. Co považují Martin s Robinem za největší trend? Jen v jednom bodě se jejich predikce rozcházejí, který to je? Proč Robin sní o programování pod palmou s caipirinhou v ruce? A které zkratky budou vývojáři přebírat od markeťáků? Audio MP3 ke stažení O čem mluvíme? Single Page Aplikace: trend, nebo ne? Alternativa SPA od Basecampu: Hotwire Web Vitals: trend, nebo ne? AMP: trend, nebo ne? AMP Fest 2020 Robinova přednáška o Signed Exchanges na prosincovém TopMonks Caffè Proč je AMP Bento zatím zklamání? Hlasoví asistenti a hlasové vyhledávání: trend, nebo ne? Jak umí prohlížeče pracovat s hlasem dnes: Web Speech API Programování hlasem s aplikací Serenade JAMStack a Serverless: trend, nebo ne? Podcast s Borkem o JAMStacku Děkujeme vám za každý odběr, hvězdičky nebo recenzi: iTunes, Spotify a TuneIn. Přejeme vám hezký rok 2021!
