To nejlepší z roku 2020 na Vzhůru dolů: populární technologie, články a podcasty

Martin Michálek – 5. 1. 2021

Č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 (o 18,6 % vyšší míra adaptace než loni)
object-fit (+ 17,8 %)
CSS proměnné (+ 15,2 %)

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 (+ 17,8 %)
Utility třídy (atomické CSS) (+ 10,8 %)
CSS modules (+ 10,1 %)

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ů:

<img src="obrazek.jpg" loading="lazy"
  alt="…" width="200" height="200">

Nativní lazyloading můžete použít jak pro prvky <img>, tak <iframe>.

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 (a slibný nový formát AVIF).
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ů (viz náš podcast).

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:

UX tip: Zobrazte rovnou všechny možnosti — Č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 (aneb Rich Snippets) - 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?