CSS

Třetí ročník největšího frontendového setkání v Česku a na Slovensku proběhl v pražském O2 Universum. Původně komunitní akce, která má kořeny v pravidelným meetupech webových vývojářů zaměřených hlavně na frontend (to, co vidíte v prohlížeči), letos odmaturovala a stala se vyzrálou profesionální konferencí se vším všudy.

Při pročítání různých příspěvků ostatních vývojářů jsem narazil na zmínku o poměrně rychlém editoru Zed. Zaujalo mě, že nabízí rozšiřitelnost, integraci s AI a možnost vzájemné spolupráce více uživatelů. Dal jsem mu tedy šanci.

V Quality Hotelu Brno proběhla ve zdánlivém stínu Mezinárodního strojírenského veletrhu podobně významná akce pro jinou oborovou skupinu. Přijelo na čtyřista webařů, specialistů na frontend, JavaScript, CSS a řadu dalších technologií. Nemohl jsem chybět a zápisky samozřejmě mám.

Po pár letech jsem se rozhodl postavit novější podobu svého „firemního“ webu. Vzal jsem to od základů. Od grafiky, přes texty až k většímu důrazu na současné Core Web Vitals. Snad jedinou věc jsem nezměnil. Stále jsem věrný Symfony a nezapojil jsem do hry nic jako Jamstack.

Čtvrtá kniha od českého frontend odborníka a guru přes rychlost webu Martina Michálka se věnuje vybrané podmnožině CSS. Provede vás tvorbou layoutu s gridem, flexboxem a vůbec všemi novými metodami, jak prvky na webové stránce poskládat.

Svůj web můžete o maličko zrychlit tím, že použité fonty nebudete načítat ze vzdálených serverů Google, ale přímo z místa, kde web běží. Rovněž tím uspokojíte pravidla GDPR, protože legislativa v EU není používání Google Fonts momentálně nakloněna. Jak na to?

Pro analýzu a tipy k následné optimalizaci kaskádových stylů existuje mnoho vizuálních nástrojů a online služeb, včetně pomůcek pro CSS zabudovaných přímo v prohlížečích. Dnes se ale podíváme na nástroje pro příkazový řádek.

Svoje menší webové projekty rád využívám jako jednoduché pískoviště, kde si mohu zkoušet nejrůznější nové webové technologie. Hugo, Tailwind ani Swup sice novinky nejsou, ale třeba s Tailwindem zatím začínám. Mám několik postřehů k popsané kombinaci na malém webu. Třeba se vám budou hodit.

Zrychlujete a optimalizujete web? Kritické CSS a blokující prvky asi máte pořešené, teď se ještě zbavit problikávání obsahu při načtení stránky. Pomůže vám s tím jednoduchý online nástroj detekující posun layoutu a zobrazující problémová místa ve formě animovaného GIFu.

Jak kontrolujete vzhled svých webů na různých zařízeních? Máte je fyzicky? Škubete velikostí okna a koukáte, jak se web mění? Používáte responsivní zobrazení v nástrojích pro vývojáře? Nebo používáte něco sofistikovanějšího? Zkuste multiplatformní program Responsively App a nebudete používat nic dalšího.

Je to již půl roku, co si pravidelně platím nástroj Avocode. Tato prima pomůcka vám výrazně ulehčí život, pokud dostáváte hotové grafické podklady, které následně přetváříte do podoby reálného webu.

V posledních týdnech jsem řešil několik drobných problémů s weby pro klienty, kteří se potýkali se špatným fungováním a zobrazením v Internet Exploreru. Možná by se pár tipů mohlo hodit i někomu z vás, postřehy tedy shrnuji do článku.

Je to už delší dobu, co mi jako editor slouží Visual Studio Code. Vystřídal jsem řadu jeho rozšíření, která se nakonec ustálila na několika pluginech usnadňujících mi život tvůrce webů. Ač jsem byl ze začátku vůči VS Code skeptický, dnes jej používám každodenně.

Měl jsem nějaké zkušenosti s AMP a WordPressem. Spočívaly v zapnutí pluginu. Ale protože se zapnutím pluginu AMP nenaučím, rozhodl jsem se nakódovat nový jednoduchý webík právě rovnou v AMP. Od píky, čistě jen v editoru, bez redakčního systému.

Přes půl roku mi trvalo, než jsem dal dohromady zbrusu novou podobu svého webu. Vyzkoušel jsem si na něm hned celou řadu věcí, které bych rád zmínil: ITCSS, SASS, Webpack, Symfony, Encore, loader pro routy, yarn, čistý JS, YAML, GIT v PHPStormu, Font Awesome 5, stahování feedů ze sociálních sítí, Twig, rsync, cache zdrojů, HTTP/2 a jiné.