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 | 10. dubna 2020 03:50 |
| Návratový kód | HTTP 304 |
| RSS export naposledy zpracován | 6. dubna 2020 07:16 |
| Kontrola aktuálnosti naplánována na | 10. dubna 2020 04:00 |
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á…
Podcast: S Radkem Pavlíčkem o WCAG a zákonu o přístupnosti
Martin a Robin si do podcastu pozvali Radka Pavlíčka, odborníka na přístupnost, se kterým rozebírají normu WCAG, loňský zákon o přístupnosti, javascriptové aplikace a novou asociaci, o jejíž českou pobočku Radek usiluje. O čem mluvíme? Robinův tip: Yarn…
10 bodů kritiky AMP: které jsou oprávněné a které ne?
„AMP je pro budoucnost webu dobré asi tak jako Trump pro zeměkouli,“ napsal nám jeden z kritiků. AMP budí někdy až přehnaně emotivní reakce. Některým bodům kritiky příliš rozumět není, některé jsou ale zajímavé a s některými dokonce souhlasíme. V dnešní…
Jak v ContentKing děláme design systém za pomocí Sketche, InVision a Storybooku
Martin Pešout, frontendový vývojář z ContentKing vám v dnešním textu ukáže, jak vzniká jejich systém designu. Proč vlastně v ContentKing máme design systém? Rozhodnutí začít vytvářet dokumentaci komponent vzešlo ode mě. Potrpím si na detail a už nějakou…
Systém designu v newsletterech? Ano, i to se dá zvládnout. Případová studie Kiwi.com
Tomáš Krejčí ze SUPERKODERS vám v dnešním textu ukáže svou práci na knihovně UI komponent pro newslettery úspěšného českého startupu. Ano, čtete správně — i pro vaše newslettery či jiné HTML e-maily lze připravit systém znovupoužitelných komponent. O…
Rozhovor S Riki Fridrichem o chystaném Vue.js 3 a Composition API
Nová, třetí verze populárního frontendového frameworku tvoří v komunitě nepřehlédnutelné téma. Zeptali jsme se tedy Rikiho Fridricha, lektora našich javascriptových školení, co si o tom myslí on. Novinky ve Vue 3: Hlavně Composition API a TypeScript…
Rodina vlastností text-decoration v CSS (nejen pro podtržení odkazů)
Když se pustíte do studia dříve jednoduchých vlastností v CSS, můžete být překvapení jejich robustností (a pro někoho také přílišnou složitostí). To se stalo i mě právě teď u vlastnosti text-decoration. Pojďme to vzít ovšem čistě pragmaticky, jako…
Nově na školeních: dvoudenní balíčky s výhodnější cenou
Zbrusu nové balíčky kurzů vám umožní absolvovat jednotlivé dny najednou nebo postupně. A ještě k tomu ušetřit. Na dvoudenní školení se ptáte celou dobu, kterou se organizací kurzů zabýváme. Vícedenní kurzy někdy dávají smysl – jsou témata, u kterých se…
Podcast: Speciál o frontendových technologiích roku 2019
Po roce si opět Martin s Robinem sedli, aby probrali ty nejdůležitější změny a novinky roku 2019. Dokonce se odhodlali k několika předpovědím do riku 2020. Dotknou se konce IE11, výsledků průzkumu State of JS a nebo také nástroje Lighthouse. Povídají si…
Použití preconnect & dns-prefetch pro včasné připojení k doménám třetích stran a zvýšení rychlosti webu
Docela často se stává, že na stránce potřebujeme stahovat prvky z jiných domén než je ta hlavní, na které web běží. Prohlížeč ovšem musí pro každou novou doménu zjednodušeně řečeno navázat spojení. A je blbé, když to dělá mnohokrát během procesu…
Optimalizace rychlosti komponent třetích stran: Když se chce, všechno jde
Komponenty třetích stran (third parties nebo také 3P) nám zpomalují weby. To víme. Ale skutečně jsme jako vývojáři proti nim tak bezbranní, jak si občas myslíme? V posledních měsíci jsem měl to štěstí (s ironií i bez), že jsem u několika klientů řešil…
Nový rok, dva nové kurzy: „Výkon webu v prohlížeči“ a „Od dokumentace k systémům designu“
Dvojkový rok 2020 začínáme zostra. Dvěma zbrusu novými školeními. Už za měsíc na nich můžete získat velmi cenné znalosti i vy. Rychlost a výkon webu v prohlížeči Michal Matuška vám ukáže, jak funguje prohlížeč a jak ladit „runtime“ výkon – tedy rychlost…
Rok 2019 na Vzhůru dolů: nejpopulárnější články, odkazy, video a podcast
Připravil jsem pro vás shrnutí toho nejpopulárnějšího, s čím jste se mohli setkat na Vzhůru dolů v roce 2019. Jaké články, odkazy z newsletteru, videa a podcasty vás zaujaly? Sedm nejčtenějších článku roku Vybírám jen články, které vznikly právě loni…
Podcast: S Michalem Matuškou o konferenci performance.now(), rychlosti webů a WebAssembly
Šéf vývoje SUPERKODERS přijal naše pozvání jen pár týdnů po návratu z amsterodamské akce na téma rychlost webů. Povídáme si o kultuře rychlosti ve firmách, měření rychlosti v Google Analytics, inteligentním prefetchingu, nastavení serverů pro HTTP/2…
Cypress.js: End-to-end testy v praktickém tutoriálu
Tomáš Smetka z Pilulka.cz vám v dnešním textu představí end-to-end testování s Cypress.js. End-to-end (E2E) testy provádějí ověření kompletních procesů v aplikaci. U webových aplikací jde o test prováděný automaticky, ale očima uživatele, ověřující…
Chrome UX Report: Data o rychlosti webu přímo od uživatelů
Chrome UX Report (nebo také CrUX, v běžné mluvě klidně „krux“) je databáze dat o kvalitě uživatelského prožitku, kterou o webech sbírají všechny verze prohlížeče Chrome. Google takhle získaná data poctivě skladuje ve své olbřímí databázi BigQuery…
Checklist pro frontendisty před spuštěním webu (update 2019)
Proč dělat weby blbě, když je můžeme dělat dobře? Podle checklistu ze Vzhůru dolů. Náš kontrolní seznam je zaměřený primárně na frontendové vývojáře a vývojářky, ale zohledňuje i nejvýznamnější úkoly pro backendisty, marketéry a designéry. Zaměřujeme se…
AMP Email: Přinese dynamický e-mail revoluci v tvorbě newsletterů?
U příležitosti spuštění podpory AMP Emailu v mobilních aplikacích Gmailu publikujeme ukázku z e-booku Vzhůru do AMP. AMP Email je podmnožina frameworku AMP, která slouží ke tvorbě interaktivních e-mailů. AMP is powering a brand new way to do email with…
CSS vlastnosti object-fit a object-position: Ořez obrázků vložených v HTML
Vlastnosti object-fit a object-position slouží k upřesnění rozměru a pozice u externích médií vkládaných do HTML, takže především obrázků ve značce , ale také obsahu prvků , nebo . Vlastnosti nepodporuje Internet Explorer, proto jsou zatím použitelné…
Poměr stran v CSS: Všechny metody pro zabránění poskakování layoutu stránky při vykreslování
Poměr stran v CSSNaposledy upraveno: – Autor: Martin Michálek Jak v CSS udržet poměr stran než se vykreslí složitější komponenta nebo responzivní médium? V textu jsou popsané nejznámější metody, včetně triků s paddingem, s autorskými vlastnostmi a…
AMP Cache: Servery, které dělají zázraky s rychlostí AMP stránek
AMP Cache a URL stránkyNaposledy upraveno: – Autor: Martin Michálek Pojďme se bavit o AMP Cache. Jde o sestavu optimalizovaných serverů, které pokrývají celou zeměkouli a společnosti Google, Microsoft a Cloudflare na ně po automatických optimalizacích…
Zachování poměru stran v CSS: Metoda s pading-top nebo padding-bottom
Zachování poměru stran v CSS: Metoda s pading-top nebo padding-bottomNaposledy upraveno: – Autor: Martin Michálek Často se stává, že během načítání externích zdrojů stránky – jako jsou obrázky, video nebo obsah prvku – potřebujeme držet poměr stran. Ze…
Zděděná a výchozí hodnota v CSS, vlastnost all a klíčová slova inherit, initial, unset, revert
Zděděná a výchozí hodnota v CSS, vlastnost all a klíčová slova inherit, initial, unset, revertNaposledy upraveno: – Autor: Martin Michálek Pojďme zjistit, jak vracet nastavení vlastnosti k výchozí nebo poděděné hodnotě. V předchozím textu jsme se…
Dědičnost v CSS: Co to je a kterých vlastností se týká?
Dědičnost v CSS: Co to je a kterých vlastností se týká?Naposledy upraveno: – Autor: Martin Michálek Dědičnost je spolu s kaskádou jako dva bráchové. A my, weboví vývojáři, jejich rodiče. Občas nás děti dost zlobí, jindy se mezi sebou mlátí… prostě nám…
Podcast: S Alešem Nešetřilem o STRV, prezentaci své práce, WorkResponsibly.org a Webflow
Aleš Nešetřil vede designéry v STRV, má ohromné množství followerů a zajímavý profil na Instagramu, dělá krásné bokovky jako WorkResponsibly.org a do toho všeho je staví na webdesignérském nástroji Webflow. To je víc než dost zajímavých témat na jeden…
Webpack: Úplné základy a tutoriál k tomu
Webpack: Úplné základy a tutoriál k tomuNaposledy upraveno: – Autor: Martin Michálek Webpack je nástroj pro zpracování souborů a usnadnění práci vývojářů. Jde o kombinaci balíčkovače (module bundler jako je Browserify) se spouštěčem úloh (task runner…