Vzhůru dolů
Základní informace o zdroji
| Podtitulek | Současný webový frontend. |
|---|---|
| Domovská stránka | https://www.vzhurudolu.cz/ |
| RSS export | http://feeds.feedburner.com/vzhurudolu_clanky |
Systémové informace o zdroji
| ID | 139 |
|---|---|
| Jmenné ID | vzhurudolu |
| Články ručně přidává správce systému | NE |
| Články jsou schvalovány správcem | NE |
| Titulek zdroje stahován z RSS exportu | ANO |
| Kontrola aktuálnosti proběhla | 23. října 2020 23:10 |
| Návratový kód | HTTP 304 |
| RSS export naposledy zpracován | 22. října 2020 06:55 |
| Kontrola aktuálnosti naplánována na | 23. října 2020 23:22 |
S Borkem Bernardem o vývoji webů na JAMStacku
JAMStack se v roce 2020 vtírá do více a více týmů, projektů a – možná především – konverzací. V živém rozhovoru jsme se Borka Bernarda ptali na to, co to vlastně JAMStack je a nakolik je kompatibilní třeba s WordPressem nebo větším e-shopem. A taky…
Metrika Total Blocking Time (TBT), zaměřeno na pomalý JavaScript
TBT je metrika rychlosti webu, udávající celkový čas, ve kterém není vykreslená stránka schopná reagovat na vstupy uživatele. Přesněji vzato, TBT je celková doba mezi událostmi First Contentful Paint (FCP) a Time to Interactive (TTI), po kterou bylo…
Všechna školení proběhnou online (a přidali jsme volná místa)
Vzhledem k opatřením plánovaným od pondělka už nedává smysl pokoušet se organizovat školení prezenčně. Všechny termíny školení proběhnou online přes platformu Zoom. Je jasné, že mnozí z vás preferovali osobní setkání – stejně jako my – ale nedá se nic…
CSS vlastnost order a nebezpečí skrytá ve změně pořadí prvků
Vlastnost order nastavuje pořadí položky v kontejneru flexboxu nebo CSS Gridu. Občas se může kodérům a kodérkám hodit proto, že zajistí odlišení vizuálního pořadí položek od pořadí zdrojového vycházejícího z HTML nebo lépe ze stromu DOM. Jenže kouzlo…
S Markem Prokopem o CMS (a trochu také SEO a copywritingu)
Martin s Markem před podcastem zašli na oběd, aby sladili noty pro podcast o SEO. Dopadlo to tak, že si Martin, Marek a Robin povídají úplně o něčem jiném. CMS jsou důležitou, málo rozebíranou součástí práce na každém webu. Jak se Marek jako marketér (a…
Školení a pandemie: Aktualizace k podzimu 2020
Update: Všechna školení proběhnou online. Milí účastnící našich školení, situace kolem pandemie Covid-19 se opět zhoršila a tak je jasné, že i my musíme omezit provoz prezenčních školení chystaných na podzim. Aktuálně jsme se rozhodli pro tento krok:…
CSS vlastnost content-visibility a odložené vykreslení obsahu stránky
Už víme, že cílem CSS containmentu (a vlastnosti contain) je umožnit vylepšení výkonu prohlížeče poskytnutím předvídatelné izolace části DOMu od zbytku stránky. Vlastnost content-visibility je na tom postavená a vývojáři zjednodušuje práci a nenutí ho…
Parcel.js: Rychlý bundler s nulovou konfigurací. Seznamte se
Dnešní článek pro vás připravil Tomáš Smetka z Pobo Page Builder. Parcel.js slouží k vytváření balíčků (bundle) používaných na frontendu při vývoji webů a webových aplikací. Jde o nástroj podobné kategorie jako Webpack, Gulp nebo kdysi Grunt. Velkou…
Jak rychlé jsou AMP weby doopravdy? Záleží, kde je měříte
Text je ukázkou z e-booku Vzhůru do AMP. AMP se občas vytýká, že ve skutečnosti není tak rychlé, jak se rádo tvrdívá. V řadě konkrétních případů to může být pravda, ale při zobrazení v AMP Vieweru s přednačtením hledá tato technologie konkurenci opravdu…
Vlastnost contain v CSS: zapouzdřením k rychlejšímu vykreslení stránky
Vlastností contain označujeme části stránky, které jsou izolované od zbytku, proto, aby prohlížeč nemusel překreslovat celou stránku a ušetřil tak výkon. Prohlížeče se nějakým způsobem snaží nepřepočítávát vzhled celé stránky při každé změně samy. Kromě…
Lighthouse 6: Co přinesla nová verze zásadního testovače webů?
Google nedávno představil šestou verzi nástroje Lighthouse, který nám webařům poslední léta velmi dobře slouží k testování rychlosti, přístupnosti, technického SEO a dalších osvědčených postupů. V prohlížeči Chrome bude k dispozici už od připravované…
Metrika „Kumulativní posun layoutu“ (Cumulative Layout Shift, CLS)
Metrika, která udává stabilitu vzhledu stránky během vykreslování. Jedná se o jednu z metrik rychlosti webu, i když v tomto případě bychom mohli mluvit spíše obecněji o metrikách uživatelském zážitku (UX). CLS je velmi důležitá metrika, protože je…
Jak rychlý je váš web? Spouštíme nástroj PageSpeed.cz a nabízíme audity rychlosti
Ve spolupráci se SUPERKODERS dnes spouštíme službu PageSpeed.cz. Jde o nástroj, který měří rychlost webových stránek, přičemž klade důraz na metriky Web Vitals, které nedávno představil Google s tím, že je považuje za důležité pro každého provozovatele…
8 nových webinářů o rychlosti a JavaScriptu
Vážení čtenáři, v pátek jsme zveřejnili termíny zbrusu nových webinářů. V hodině času na nich dostanete spoustu informací k tématu od profi lektorů z praxe, možnost klást otázky a záznam k tomu. Úvodní běhy navíc otevíráme za zaváděcí cenu – 290 Kč bez…
Web Vitals: Co jsou zač ty nové metriky rychlosti webu od Googlu?
Web Vitals je sada metrik, které Google nově označuje za důležité pro sledování dobrého uživatelského zážitku na webu. Aktuálně je totiž měření rychlosti (a UX) webu poměrně složitá disciplína, ve které se stěží orientují specialisté (ke kterým se…
Preload: Přednačtení prvků stránky detailně a do hloubky
Preload je deklarace, které vyvolává dřívější stažení prvku stránky a v případě JavaScriptu odděluje stažení od spuštění. Vezměme jednoduchý příklad s webfonty. Můžeme jich v CSS mít nalinkováno více. Dva konkrétní soubory včak chceme stáhnout s vyšší…
Podcast: S Martinem Krištofem o frameworku Next.js
O frameworku Next.js píší jeho tvůrci jako o nástroji, který není třeba konfigurovat a ve kterém jedním příkazem spustíte svoji reactí aplikaci. Důraz na jednoduchost kombinovanou s flexibilitou si pochvaluje i Robinův bývalý kolega z LMC, Martin…
Novinka: Webináře o frontendových tématech, v prvním běhu zdarma
Je jasné, že i nám karanténa zkomplikovala organizaci školení. Ta dubnová a květnová jsme odložili na podzim, ale v současné situaci není nic jisté… Proto pracujeme na online produktech. A jako první jsme v newsletteru nedávno představili webináře…
Všechny e-booky i knížka jsou teď levnější
V aktuální právní a mediální vřavě kolem koronaviru trochu zapadlo snížení DPH na elektronické knížky z 21 na 10 %. Dva ze tří e-booků nabízených na Vzhůru dolů už navíc nějakou dobu neprošly aktualizací, takže ve snížení koncové ceny ještě trochu…
Strukturovaná data (aneb Rich Snippets): Kódem za atraktivnější výsledky vyhledávání pro váš web
Strukturovaná data (nebo také „strukturované úryvky“) umí zajistit vizuálně zajímavý formát zobrazení ve výsledcích vyhledávání Google – „Rich Snippets“. Zjednodušeně řečeno do stránky přidáte nějaký kus kódu ve formátu JSON-LD, jako v tomto případě…
21 tipů pro lepší uživatelské rozhraní od UX designéra
Instagram firmy Liquid Design patří odborně k těm nejužitečnějším v Česku. Jsem proto rád, že Marek Čevelíček, CEO & UX designér tohoto brněnského studia, přijal mou pozvánku k publikaci podobného formátu tipů zde, na Vzhůru dolů. „To záleží.“ Oblíbená…
Poměr stran obrázků jednoduše (pomocí atributů WIDTH a HEIGHT ve značce IMG)
Nedávno jsem na Vzhůru dolů publikoval text o nastavení poměru stran pro obrázky, video, iframy a další obsah vkládaný do HTML zvenčí. Říkejme mu média. Problém je v tom, že prohlížeče vykreslují stránku dříve než jsou tyto prvky stažené. Pokud neznají…
Značka : Vše o vkládání JavaScriptu do HTML
Tentokrát to v příručce vezmeme opravdu od základů, ale do hloubky. Pojďme se zaměřit na vkládání JavaScriptu do stránky. Obsah: Značka SCRIPT Vložení do stránky Datové bloky Značka NOSCRIPT Značka se používá pro vložení javascriptového kódu nebo…
Podcast: Se Zuzanou Šumlanskou a Honzou Králem o práci na dálku
Počet pracujích z domova před měsícem nuceně skokově narostl. A práce z domova není jednoduchá. Naštěstí se s námi Zuzka a Honza podělili o své zkušenosti. Jak se doma motivovat? Je potřeba vlastní kancelář? Jak se vrátit z pracovního režimu? A co je…
„Pixel perfect“ by měl být zakázaný výraz
Nepoužívejme prosím ve webdesignu spojení „pixel perfect“, když mluvíme o kvalitách návrhu nebo kódování webu. Je to výraz zastaralý, nesmyslný a degradující dobré designéry i kodéry. Designér Lukáš Augusta napsal skvělý článek plný tipů na oblasti,…
Vkládání JavaScriptu jako async, defer a type="module" versus rychlost webu
Existuje několik možností, jak vložit JavaScript do HTML kódu. Z pohledu rychlosti načítání je ale u statických webů jeden úplně nejhorší – vkládání do bez jakéhokoliv dalšího nastavení: (Vynechme nyní prosím pro zjednodušení, že existují situace, kdy…
ECMAScript moduly: Co je schované za ?
ES modul (občas budu název zjednodušovat jako javascriptový modul) je soubor obsahující javascriptový kód, který se vkládá do jiného souboru, obsahujícího javascriptový kód. Definici máme hotovou, jdeme domů? Ještě počkejte, slibuji, že v článku půjdu…
CSS4: Proč chceme novou verzi kaskádových stylů a proč ji dosud nemáme?
Peter-Paul Koch navrhuje zavést zkratku CSS4 pro označení určitého stavu vývoje v oblasti kaskádových stylů. CSS4 v plánech W3C není. Konsorcium totiž přestalo verze jazyka vydávat někde u CSS 2.1, tedy v roce 2011. Proč tedy prosazovat pojem CSS4?…
Práce z domova: Tipy, jak na home office nezblbnout (část první: denní režim a izolace)
Aktuální situace nás zahnala pracovat do koutů svých domovů. Tenhle, na Vzhůru dolů netypický text, proto věnuji hlavně těm, pro které je to nová situace. Z domova pracuji více než 10 let, přičemž od roku 2016 prakticky jen z domova, s občasnými…
Nová metrika „Největší vykreslení obsahu“ (Largest Contentful Paint, LCP)
Nová metrika rychlosti webu – Largest Contentful Paint (LCP) – představuje přesnější způsob měření momentu, ve kterém se vykreslí hlavní obsah stránky. LCP se „dívá“, kdy byl prohlížeč zobrazil největší prvek ve stránce. Uživatelům tak pomáhá…