28.07.2023 01:15 Meta značka „viewport“ se používá hlavně pro mobily v responzivním designu. Slouží k tomu, aby mobily nepoužily výchozí viewport, optimalizovaný pro ne-responzivní weby, ale své přirozené rozlišení. Stačí uvést následující kus kódu do hlavičky HTML dokumentu: Toto HTML přesně řečeno nastaví šířku layoutového viewportu na velikost rozlišení v CSS pixelech. V mobilech se tedy stane to, co vidíte na obrázku: Z desktopového rozlišení se stane mobilní. Stačilo upravit viewport. Bez použití meta značky se totiž web vykreslí do výchozího layoutového viewportu, který má většinou šířku 980 pixelů. Web bude vypadat „jako na počítači, jen zmenšený“. Tohle by vám obvykle mohlo stačit. Dále pokračujte jen pokud jste hodně zvědaví, nebo pokročilí. Parametry meta značky pro viewport Do atributu content je možné dávat různé vlastnosti a jejich hodnoty. width Vlastnost width nastaví šířku layoutového viewportu. Nejčastěji využívaná hodnota device-width, což je 100vw neboli 100 % šířky viewportu. Sjednotí se tak šířka layoutového viewportu se šířkou ideálního viewportu, viz text o viewportech. Uživatel tak nebude muset zoomovat a vaši responzivní stránku uvidí jedna ku jedné. Pokud použijete hodnotu, např. width=400, nastavíte šířku layoutového viewportu na 400 pixelů. Nenapadá mě ale moc rozumných důvodů, proč to dělat. Snad jen v případě, že se vaši designéři zbláznili a navrhují pro jedno konkrétní rozlišení. Nedoporučuji to. Existuje samozřejmě i podobný atribut height, který nastavuje výšku layoutového viewportu. initial-scale Vlastnost initial-scale nastaví výchozí zoom, ale také šířku layoutového viewportu. Ve výsledku dělá zápis initial-scale=1 totéž jako width=device-width. Pokud chcete maximální kompatibilitu, uvádějte oba dva. Bez initial-scale=1 totiž některé prohlížeče renderují stránku do rozlišení, jako by bylo otočené na výšku, i když jej používáme na šířku. user-scalable Vlastnost user-scalable určuje, zda uživatel může zoomovat. Hodnota no zakazuje uživateli jakkoliv zoomovat. Prosím, nepoužívejte ji. Zoomování je na mobilních zařízení fakt potřeba. Ať už jde o zvětšení textu v horších světelných podmínkách, nebo jen touhu vidět detaily z nějakého obrázku, přibližování obsahu prostě potřebují všichni uživatelé. Safari na iOS 10 a novějších navíc zákaz zoomování úplně ignoruje. Pokud si však přejete, aby Safari nezoomovalo v textových polích , které mají menší velikost písma než 16px, pak je možné použít vlastnost user-scalable=no. Možnost zoomování celé stránky ale uživateli zůstane. minimum-scale/maximum-scale Vlastnosti minimum-scale a maximum-scale určují minimální a maximální možný zoom. maximum-scale=1 ruší možnost přiblížení stejně jako user-scalable=no. Opět naléhám – prosím, nepoužívejte to. interactive-widget Prostřednictvím vlastnosti interactive-widget můžete prohlížeči sdělit, jaké chování si přejete při otevření widgetu, což je většinou virtuální klávesnice. Možné hodnota pro interactive-widget jsou: resizes-visual – Změní velikost pouze vizuálního viewportu, ale ne layoutového viewportu. resizes-content – Změní velikost obou viewportů. overlays-content: Nezmění velikost žádného viewportu. Platí to od Chrome 108 na Androidu. Více je v článku Prepare for viewport resize behavior changes coming to Chrome on Android. shrink-to-fit Vlastnost shrink-to-fit už není relevantní. Na starší verzích iOS bylo problematické umístění prvků částečně mimo viewport , na zařízeních s iOS se vizuální viewport přepočítá tak, aby se zobrazil i onen pozicovaný element. Dnes už je toto chování standardní a není potřeba používat shrink-to-fit. Viz v textu Scotta O'Hary: scottohara.me/blog/2018/12/11/shrink-to-fit.html viewport-fit Relativně nová vlastnost, která řeší způsob zobrazování na zařízeních s jinou než hranatou obrazovkou. Jako příklad vezměme chytré hodinky nebo iPhone X a novější. Vlastnost může mít následující hodnoty : auto – výchozí stav, který vše nechává na prohlížeči. U iPhone X a novějších to například odpovídá hodnotě contain. contain – zmenší viewport pro stránku tak, aby byla vidět celá. Jakou barvu vykreslí po stranách, záleží na prohlížeči. U nových iPhonů je to background-color z body. cover – roztáhne viewport pro stránku tak, aby nikde „nevyčuhovaly“ neobarvené části rozhraní prohlížeče. S tím rizikem, že kulaté rohy nebo výčnělky na displeji zařízení některé části stránky překryjí. Pokud má stránka různobarevné pozadí, jako je to u Vzhůru dolů, hodí se do meta značky přidat viewport-fit=cover Více o tom píšu v článku o iPhone X. Stručné řešení pro vaše weby: Pro layout s jednobarevným pozadím si jen zkontrolujte nastavení background-color na body. Pro weby s různobarevnými prvky zabírajícími celou šířku si přidejte parametr do meta značky pro viewport: Tipy, triky, zajímavosti Meta viewport raději moc nenastavujte Javascriptem Hodí se to, jen když nemáte přístup do . Teoreticky jde Javascriptem meta značka pro viewport i měnit, ale nedělejte to. Je to náročné na překreslování stránky. Vyrobte raději normální responzivní web s jedním meta tagem pro viewport. Odstranění prodlevy mezi tapnutím a akcí trvající 300 ms Když budete mít viewport nastavený správně, s hodnotou width, aktuální prohlížeče postavené na jádrech WebKit a Blink samy odstraní prodlevu mezi tapnutím a akcí. Starší prohlížeče totiž po tapnutí prstem čekaly, zda nepřidáte prst druhý a nemáte tedy v úmyslu stránku zvětšovat. Toto už dnes ale také, pokud vím, není platné. Zavináčové pravidlo @viewport v CSS Instrukce pro způsob zobrazování by se měla dávat do CSS, že ano? S logičtěji umístěným zápisem @viewport přišlo W3C, ale moderní prohlížeče jej zatím nezvládají. Výjimkou byl Internet Explorer 11 a Edge, kde je to bylo potřeba zapnout. Teď už to to tedy podle mě k ničemu není. Psal jsem o tom ve starším článku. Weby na WatchOS – pokud máte web optimalizovaný pro viewporty menší než 320px Chytré hodinky od Applu vynucují zobrazení našich webových dílek na zápěstí uživatelů ve viewportu širokém 320 CSS pixelů. Pokud bychom tomu chtěli zabránit a zobrazit je ve výchozím CSS rozlišení , musíme si dupnout následujícím kódem: Vtipné je, že WatchOS ve výchozím režimu vynucují přepočítaný viewport uvnitř přepočítaného viewportu. Ale co už – my léta víme, že viewporty na mobilních zařízeních jsou jako teorie relativity: Víme, že existují, víme že jsou složité, ale skoro nikdo jim nerozumí. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
26.07.2023 16:00 JavaScriptový framework Qwik vypadá slibně. Přináší jej tým kolem Builder.io, ve kterém byste našli i autora původního Angularu – Miška Heveryho. S Petrem Glaserem, který byl našim milým hostem, tak trošku navážeme na předchozí díl, protože Qwik slibuje pomoc s mnoha výkonnostními neduhy současné generace frameworků v čele s Reactem. Jak moc se mu to podaří a jak dokáže oslovit vývojáře? Pojďme diskutovat. Podcast Host: Petr Glaser Petr v rámci projektu Nauč mě IT pomáhá lidem získat dovednosti a znalosti vhodné pro práci v IT. Říká o sobě, že je vývojář zapálený pro technologie a vzdělávání. Zaměřuje se na performance, kterou vnímá jako součást UX a přístupnosti. I díky tomu si oblíbil framework Qwik, o kterém je řeč v podcastu. LinkedIn – Twitter O čem se bavíme? Martinův tip: Figma dev mode, video Adiny, podcast o Figmě. Robinův tip: State of CSS je tady, tentokrát velmi brzy. Petr Glaser a Nauč mě IT. Představení frameworku Qwik. Server Side a meta-framework Qwik City. Hlavní výhody: velikost bundlu, líné načtení, vliv na rychlost. Úspěchy Qwiku ve framework benchmark a ošemetnosti toho. Autoři Qwiku: Builder.io a příběh vzniku Qwiku. Dokáže Qwik oslovit vývojáře zvyklé na React a spol.? Rozdíly mezi aplikacemi a prezentacemi. Vliv ekosystému frameworku na výstupní výkon a Qwikify. Cena za menší úvodní bundle. Stavění na Service Worker, Partytown na optimalizaci třetích stran. Jednou to za nás stejně bude všechno dělat AI. Tipy na další zdroje: Discord atd., Steve z Builderu, Miško Hevery Ukázka: možné přínosy a ošemetnosti v přístupu Qwiku Děkujeme za spolupráci: Honza Michálek . Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo do komentářů.
25.07.2023 07:00 Už po osmé vás na Vzhůru dolů zvu na každoroční konferenci WebExpo, sraz lidí z oblastí webového designu, vývoje a digitálního marketingu. WebExpo 2023 proběhne netypicky už 19. a 20. dubna, ale na typickém místě, v centru Prahy. Konferenci Šárky Štrossové a jejího týmu mám rád hlavně pro skvělé možnosti potkávání s kolegy a kolegyněmi. Velmi rád si sem také chodím rozšířit obzory mimo své hlavní zaměření . Vybral jsem pro vás několik přednášek, které mě v programu zaujaly, nebo si myslím, že by je čtenáři Vzhůru dolů neměli propást. Z frontendových luhů a hájů Futuristic UI: How to make users feel like they’re in a sci-fi movie, protože Filip Hráček, kterého znáte z podcastu. Authentication UX, protože Vitaly Friedman inspiruje, i když mluví o něčem, co zrovna nepotřebujete. Extending HTML with Web Components, protože mě zajímá, kdy už budou konečně Web Components široce použitelné. You might not need css-in-js, protože si myslím, že některé důvody pro CSS-in-JS už opravdu neplatí. Tak schválně…! Why local-first software fixes everything, protože sice nevěřím, ale i tak si moc rád Dana Steigerwalda poslechnu. More than words: Designing and building voice interfaces, protože ovládání hlasem bude s nástupem AI lidem ještě blíž. Supercharge your skills with creative coding, protože ano, v současném webdesignu je kreativita na ústupu a je to škoda. How to make and share more flexible UI components, protože po letech zase trochu více přemýšlím nad UI a design systémy mě znovu více zajímají. Shape Up Development Process, protože Honzovi Korbelovi věřím, že už pak nebudu muset číst knihu, na kterou se už léta chystám. Rychlost webu Harry Roberts jezdí na WebExpo často a rád. Jeho přednášky jsou vždy plné pokročilejších tipů, proto nevynechám jeho talk Optimising Largest Contentful Paint. Velmi doporučuji i Harryho páteční workshop. Letos dorazí i hvězdný Scott Jehl z WebpageTestu a bude povídat na téma Experimenting with performance at the edge. Z oblasti rychlosti ale toho na WebExpu můžete slyšet a vidět více – například microservices, Livesport News nebo invalidaci více keší od stejné firmy. Stopa Vzhůru dolů Po loňském podílnictví na tvorbě programu a krátké keynote mám letos více času a prostoru a tak se vám v přednášce Shift happens: Dealing with Cumulative Layout Shift během 20 minut pokusím předat návod na pochopení metriky CLS a tipy na její optimalizaci. Robin Pokorný bude diskutovat v bloku How to Become a Staff+ Engineer . Riki Fridrich vás ve Write testable code naučí psát lepší kód. Soutěž o vstupenku a knížku pro juniorní vývojáře Od organizátorů jsem dostal vstupenku navíc a rád bych ji věnoval někomu, kdo ji opravdu ocení. Pojďme si proto zasoutěžit o jednu vstupenku a jednu knížku s e-bookem, jako cenu útěchy. Podmínky jsou tyto: Soutěž je určená pro juniorní vývojářky a vývojáře, kteří v oboru nepracují více než 3 roky. Do komentáře pod článkem nebo do e-mailu martin@vzhurudolu.cz pošlete odkaz na váš LinkedIn profil a odpovězte na otázku: „Co vás na webařině nejvíc baví?” Z odpovědí vylosuji dva lidi, jeden dostane knížku a druhý vstupenku na WebExpo. Uzávěrka soutěže je v neděli 26. 3. 2022 o půlnoci. Pro vás ostatní tady od WebExpa mám slevičku: Hodně štěstí a na viděnou na WebExpu!
18.07.2023 08:30 V březnovém vydání podcastu se můžete těšit na vám už velmi dobře známého Rikiho Fridricha . Zabýváme se JavaScriptem a aktuálním stavu navazujícího ekosystému. Zdrojem inspirace byla tradičně anketa State of JS 2023, ale tentokrát jsme se podívali daleko nad její rámec. Přibývají do samotného jazyka jen irelevantní věci a děje se to podstatné právě v ekosystému? Podcast V diskuzi se objevila otázka, zda se do jazyka JavaScript přidávají jen irelevantní věci, a zda by měl mít lepší standardní knihovnu. Dalším tématem bylo převládající používání TypeScriptu a jeho výhody oproti nativnímu JavaScriptu, včetně diskuse o novinkách v TypeScriptu 5 a moduleResolution Bundleru. Kenn C. Dotts začal psát ukázky kódu ve vzdělávacích materiálech v TypeScriptu, namísto čistého JavaScriptu, a vyvolalo to velké kontroverze. Diskutovali jsme také se o JS frameworcích a odklonu od SPA v rámci „renderovacích” frameworků. Zazněla i otázka, zda je vůbec budoucnost backendu v JavaScriptu. Museli jsme probrat také tooling kolem JS, jako je například balíčkovací nástroj Vite a Turbopack. Host Riki Fridrich píše JavaScript ve firmě Outreach. Učí ostatní, jak psát Javascript. Přednáší na konferencích a setkáních. Většinou o Javascriptu. Riki je z Ládví. Web – Twitter – Github – LinkedIn O čem mluvíme? Robinův tip: Kniha The Staff Engineer’s Path Martinův tip: Firefox 110 a plná podpora Container Queries Představení Rikiho Fridricha z Ládví Anketa State of CSS JavaScript jako jazyk: přidávají se tam jen irelevantní věci? Chybí v JavaScriptu lepší standardní knihovna? TypeScript vyhrál a typování v nativním JavaScriptu TypeScript 5 a moduleResolution Bundler Nejčastěji adaptované vlastnosti JS jako top level Await WebSpeech API a používaní prohlížeče k mluvení Kenn C. Dotts a všechny ukázky v TypeScriptu JS frameworky a „renderovací” frameworky, odklon od SPA Budoucnost backendu není v JS? Nástup nových JS enginů Tooling kolem JS a balíčkovací nástroj Vite, plus Turbopack Video: Diskuze o hlasovém ovládání počítače Děkujeme za spolupráci: Honza Michálek . Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Líbil se vám tento díl? Prosíme vás o zhodnocení podcastu na vaší oblíbené platformě. Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo do komentářů.
15.07.2023 14:15 Vítejte u 44. epizody podcastu ze Vzhůru dolů! Natočili jsme ji tak, aby vám byla průvodcem po záznamech přednášek z letošního WebExpa. Ano, záznamy už jsou veřejně a zdarma dostupné. Co se nám líbilo? Samozřejmě kromě networkingu, setkávání a parties… Podcast O čem se bavíme? Robin, Martin a WebExpo: historie jednoho vztahu Local First od Daniela Steigerwalda AI: „Shift Happens“ a prompty pro copywritery od Vladany Bačové Robinův nový podcast o Engineering Leadership Voice Interfaces, zvukové značky a přednáška Leonie Watson Nepřednášková část WebExpa, ta nejlepší Pozvánka na WebExpo 2024 Bonus: To nejlepší z WebExpa 2023 Top 3 přednášky Vladana Bačová: AI text generators – are they a threat or benefit for content writers? – pokud jste copík je to must, pokud vývojář, nudit se nebudete. Léonie Watson: More than words: Designing and building voice interfaces – překvapivé možnosti CSS, které ale zatím prohlížeče nepodporují. Harry Roberts: Optimising Largest Contentful Paint – vše o metrice LCP. Pokud řešíte rychlost, Harryho asi asi už stejně žerete. Co mě dále zaujalo a kde jsem byl duchem alespoň chvíli přítomen? Filip Hráček: Futuristic UI – moc pěkné a v nejlepším smyslu slova inspirativní. Dmitry Belyaev: You might not need css-in-js – Dmitrij pokryl sice jen malou část problematiky z názvu, ale velmi dobře JS vývojářům přiblížil výhody Custom Properties v CSS. Daniel Steigerwald: local-first software – aplikace Apple se výborně synchronizují nejspíš právě proto, že jsou local first. Architektura client-server je špatná z pohledu DX, i proto je local-first zajímavý směr. Ondřej Čermák: How to make sure your system doesn’t blow – škálování i performance nemusí vždy pomoci. Základ je dobře měřit. Přesně tak! Je super, že to občas řekne i někdo jiný než já. Jhey Tompkins: Supercharge your skills with creative coding – zajímavé ukázky kreativních rozhraní s HTML a CSS. Jen strašně, ale strašně malinké písmo v ukázkách kódu. Server-Side: The newest website tracking concept: Pavel Šabatka - pěkně podané argument proč zvážit serverové GTM, jak to zhruba udělat a co to stojí. Je to jednodušší než jsem si myslel. Rowdy Rabouw: Extending HTML with Web Components – výborně podaný tutoriál, jak začít namísto komponent JS frameworků používat nativní Web Components. Pořád ale nevím, proč to vývojáři nepoužívají více. Scott Jehl: Experimenting with performance at the edge – po dlouhém obecném úvodu Scott ukázal Experiments ve WebpageTestu, které vám umožňují otestovat vliv změny kódu na rychlost přímo na produkčním webu. To je velmi zajímavé. Když už v tom budete, pusťte si i moji přednášku Shift happens: Dealing with Cumulative Layout Shift . Je prý bezva, říkali lidi. Ahoj za rok na WebExpu 2024! Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo do komentářů.
03.07.2023 03:30 Sotva jsme na svět praktického CSS přivítali výborné Container Queries, přichází další novinka. CSS Style Queries umožňují ptát se v na vypočtené hodnoty CSS vlastností a podle toho změnit styl elementu. Podobně jako Container Queries, Style Queries jsou v současné době ve fázi návrhu a ještě není jasné, jak se bude jejich implementace a podpora v prohlížečích vyvíjet. Container i Style Queries vycházejí ze specifikace CSS Containment Module Level 3, která je ovšem v definici Style Queries zatím trochu skoupá. Někdy stačí jenom se zeptat. Style Queries nám snad už brzy odpoví. Jisté je, že jednu část dotazů na styl právě teď implementovali autoři Chrome. Proto o téhle novince také píšu. Příklad Zkusme si to popsat na možná ne úplně praktickém, ale o to více jednoduchém příkladu: .box @container style } Výsledkem je, že element s třídou .box bude mít šedou barvu pozadí. Ale to jen v případě, že je vlastnost font-weight nastavena na tučné, tedy bold. Co byste o Style Queries měli vědět? V úvodním odstavci jsem zmiňoval vypočtené hodnoty CSS vlastnosti. To je důležité a taky odlišné od Container nebo Media Queries: Dotazem @container se ptáte na vykreslovanou velikost. Dotazem @container style se ptáte na vypočtenou hodnotu. Není to to samé, protože do vypočtené hodnoty promítá také dědičnost nebo další vlastnosti kaskády v CSS, což činí Style Queries ještě zajímavějšími. Syntaxe a logika kombinování prvků do dotazu na styl je stejná jako u dotazů na podporu vlastností CSS, viz @supports. Dále platí, že Style Queries teoreticky vznikají při základním typu containmentu v CSS, takže nebudete muset definovat container-type, jako to děláte u Container Queries. Podpora a aktuální implementace v Chrome O možné podpoře ze strany Firefoxu a Safari se mi nic moc zjistit nepodařilo. Šance na brzkou implementaci není malá, protože prohlížeče se snaží domlouvat a tedy lze předpokládat, že i dotazy na styly patří do dohodnotých priorit. V době psaní tohoto textu lidé z Googlu oznámili, že Style Queries přistanou do Chrome 111. Dobrou zprávou je, že implementaci uvidíme rovnou v produkčním prohlížeči, nikoliv jen Canary verzi. Horší zprávou je, že implementace se zaměřuje jen na určitou část Style Queries, a to dotazy na hodnoty autorských vlastností neboli proměnných. Příklad s autorskými vlastnostmi Toto je jediná ukázka, která mi aktuálně v prohlížeči funguje. Řekněme, že se snažím o stylování boxů podle hodnoty custom property --theme. Řekněme, že to dělám tímto způsobem právě proto, že bych rád využil dědičnosti v CSS a autorskou vlastnost --theme chci měnit na různých místech kódu. HTML vypadá takto: Lorem ipsum… Lorem ipsum… Důležitá část CSS je pak tahle: @container style } Omluvte jednoduchost ukázky, snažím se tady totiž hlavně ukázat, jak to funguje. A že to funguje. Stačí si otevřít aktuální Chrome Canary nebo běžný Chrome od verze 111. K čemu to může být dobré? Nestačí pro tyhle účely prostě přidat třídu a je to? Ano, někdy by to šlo vyřešit třídou, ale znovu připomínám, že trik je v dotazu na vypočtenou hodnotu vlastnosti. A ta může být změněná v rámci CSS kaskády libovolným způsobem. Další příklady a další zdroje Tenhle text berte jako úvodní výkop. V jeho dalších iteracích to popíšu podrobněji, ale raději si počkám na další rozvoj specifikace a podpory v prohlížečích. Jsme prostě zase na začátku a asi bychom měli být spíše opatrní. Pro inspiraci přidávám asi nejzajímavější text o Style Queries od Uny Kravets. Jsou tam velmi zajímavé ukázky praktického využití dotazů na styl: Přenos nedědičných vlastností na potomka. Seskupování vlastností pro určitý stav do jednoho místa. Interaktivní změna vzhledu pomocí Style Queries. Kombinování více dotazů na styl. Myslím, že Style Queries budou dalším střípkem do mozaiky snadnějších řešení některých specifických situací. Těším se na další vývoj. Co vy? Napište mi svůj názor do komentářů. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
