CSS

Vylepšený Polzer.cz: ITCSS, CSS Grid, Webpack, Symfony, yarn a další vychytávky pro nový web

Vylepšený Polzer.cz: ITCSS, CSS Grid, Webpack, Symfony, yarn a další vychytávky pro nový web

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é.

Jak vypadají titulky 19 českých IT webů na mobilu? Žádná sláva

Jak vypadají titulky 19 českých IT webů na mobilu? Žádná sláva

Google spustil mobile first indexaci. Podíl mobilních zařízení stále roste. Designéři, alespoň ti ukecanější, pořád mluví o mobile first návrhu webu. Stránky zrychlujeme i kvůli dobrému načítání na pomalém mobilním spojení. Napadlo mě se mrknout, jak jsou na tom české IT weby. Jde o obor, který by mohl být vzorem.

Využíváte efektivně responzivní obrázky? Rozšíření pro Chrome odpoví

Využíváte efektivně responzivní obrázky? Rozšíření pro Chrome odpoví

Řada webů má problém s tím, že do stránky posílá obrázky s rozměrem, který neodpovídá tomu, jak je pak obrázek na stránce vykreslen. Díky rozšíření pro webový prohlížeč Chrome si můžete velice rychle svůj web a obrázky na něm zkontrolovat.

Už jste začali používat CSS custom properties (variables)?

Už jste začali používat CSS custom properties (variables)?

Definovatelné vlastnosti v CSS a také proměnné už mají dostatečně širokou podporu napříč webovými prohlížeči, takže je nejvyšší čas je začít používat. Respektive ten čas nastal už loni, takže pokud jste CSS proměnnými stále nepolíbeni, je nevyšší čas to změnit. Ušetříte si totiž práci.

Finch: když chcete připomínkovat nakódovaný web a rovnou měnit jeho vzhled

Finch: když chcete připomínkovat nakódovaný web a rovnou měnit jeho vzhled

Asi každý tvůrce webu je poté, co jej pokládá za dokončený, vyveden z omylu a začne řešit připomínky zákazníka. Patříte-li spíše k těm, kdo ty připomínky vytvářejí z pozice zadavatele, mrkněte na nástroj, který vám to výrazně usnadní.

Ikonkové písmo Font Awesome 5 je venku ke stažení

Ikonkové písmo Font Awesome 5 je venku ke stažení

Delší dobu připravovaná nová verze oblíbeného ikonkového písma Font Awesome 5 je oficiálně venku. Pro své projekty si tak stáhnete bezplatnou verzi s celou řadou nových ikonek, v placeném Font Awesome 5 Pro jich pak najdete ještě více.

Praktické zkušenosti s optimalizací frontendové části Drupalu a rychlosti načítání

Praktické zkušenosti s optimalizací frontendové části Drupalu a rychlosti načítání

Na jaře jsem byl na školení u Martina Michálka o optimalizaci rychlosti načítání webových stránek. Tedy optimalizaci především z hlediska frontendu. Získané vědomosti plus několik dalších věcí, na které jsem se chystal, jsem postupně vnesl na jednom webu do praxe a průběžně hodnotil, jaký měly přínos.

Animace jednoduše? Zkuste Animate.css

Animace jednoduše? Zkuste Animate.css

Potřebujete na web přidat různé animované efekty, ale nestihli jste se ještě doučit animační zápisy v CSS? Nevadí, pro základní animace si vystačíte s připravenou sadou efektů v balíčku Animate.css.

Jak rychle zjistit, které CSS váš web nepoužívá a optimalizovat tak rychlost načítání

Jak rychle zjistit, které CSS váš web nepoužívá a optimalizovat tak rychlost načítání

Jedna z posledních verzí webového prohlížeče Chrome obsahuje funkci umožňující snadno vyhodnotit, která CSS pravidla v jednotlivých souborech se styly váš web vůbec nepoužívá. Díky tomu jste tak teoreticky schopni svoje CSS optimalizovat a ušetřit něco na velikosti webové stránky.

WhatFont: jak rychle rozpoznat použité písmo na webu

WhatFont: jak rychle rozpoznat použité písmo na webu

Při tvorbě webu je občas nutné zkontrolovat, zda použité písmo odpovídá zadání, grafickému návrhu. Jindy se zase chcete podívat, jaké písmo použil někdo jiný. Je mnoho způsobů, jak to zjistit, použití nástroje WhatFont je však velice rychlé a pohodlné.

Online výuka webových technologií zdarma tento víkend

Online výuka webových technologií zdarma tento víkend

Tento víkend se objevily přinejmenším dvě akce, díky kterým se můžete zdarma naučit nejrůznější webové technologie, případně si rozšířit obzory o další znalosti. Bezplatný víkend doporučuji využít. Venku je stejně ošklivo…

Víkendový tip: fonty, barvy, ikonky, SVG

Víkendový tip: fonty, barvy, ikonky, SVG

Z uplynulých konferencí se mi nahromadilo několik zajímavých odkazů, o které bych se s vámi rád podělil. V článku najdete pár tipů na služby pro stažení fontů, ikonek, souborů SVG a zjištění barev.

iPad a Coda: vše, co potřebuje webař na cestách

iPad a Coda: vše, co potřebuje webař na cestách

Dlouho jsem hledal řešení, které mi umožní být dostatečně mobilní a přitom s jistým komfortem pracovat na vývoji webů i na cestách. Myslím, že prozatím jsem našel to nejlepší. Kombinaci tabletu a povedeného programátorského editoru a správce souborů Coda.

Tip pro Drupal: jak na stejný vzhled písma v editoru i na webu

Tip pro Drupal: jak na stejný vzhled písma v editoru i na webu

Jedním z mnoha příjemných rysů uživatelského rozhraní administrace Drupalu je možnost nastavení vzhledu obsahu v editoru tak, aby odpovídal tomu, co pak uživatel vidí po uložení článku. Získá tak lepší představu o výsledné vizuální podobě textu.

Malá moderní sada pro reset CSS

Malá moderní sada pro reset CSS

Resetovací sady pro nastavení vzhledu prvků ve webovém prohlížeči jsou oblíbenou pomůckou kodérů webů již řadu let. Tak, jak se mění vykreslovací jádra webových prohlížečů, mění se i tyto sady pro reset CSS. Mám pro vás tip na jednu s minimální velikostí.

Vlajky států čistě s využitím CSS a jediného DIVu

Vlajky států čistě s využitím CSS a jediného DIVu

Bez vlajek států se neobjede téměř žádný vícejazyčný web a mnohdy i běžné weby, které někam odkazují. Z toho důvodu by vás mohlo zajímat povedené řešení implementace vlajek na web, které spočítá jen a pouze v zápisu CSS k jediné HTML značce DIV.

Oblíbené pluginy pro programátorský editor Atom z pohledu tvůrce webů

Oblíbené pluginy pro programátorský editor Atom z pohledu tvůrce webů

Navzdory mnoha škarohlídům si programátorský editor od GitHubu s názvem Atom našel množství příznivců. Já jím v případě Windows nahradil už poněkud zastaralý PSPad a v případě Macu zdarma dostupný TextWrangler. Ostatně i Atom je dostupný zadarmo – jeho funkce jdou navíc rozšiřovat pomocí pluginů.

Vorlon.js: povedená pomůcka pro ladění nejen mobilních webů

Vorlon.js: povedená pomůcka pro ladění nejen mobilních webů

Ladění webů na mobilních zařízeních je vždy tak trochu problém. Jistě, máme tu spojení Safari s iOS, Chrome s Androidem, ale nic skutečně univerzálního a fungujícího na dálku. A proto přichází javascriptová knihovna a node.js aplikace Vorlon.js.

Tip: Znáte pomůcku pro ladění responsivních webů ve Firefoxu?

Tip: Znáte pomůcky pro ladění responsivních webů ve Firefoxu a Chrome?

Ladit responsivní weby je zdánlivě jednoduché. Prostě si zmenšíte okno webového prohlížeče a upravujete styly. V okamžiku, kdy potřebujete reagovat na přesné rozměry, potřebujete něco sofistikovanějšího. Nabídnou vám to  Firefox i Chrome v základní výbavě.

Novinky v online editoru Cloud9

Novinky v online editoru Cloud9

Cloud9 je online editor pro vývojáře, který nabízí v prostředí webového prohlížeče plnohodnotný programátorský editor s podporou syntaxe mnoha programovacích jazyků i webových aplikací, jako je třeba WordPress. Nedávno došlo k několika zajímavým aktualizacím, které činí Cloud9 ještě zajímavějším a doporučuji jej proto vyzkoušet.

Stránky

Subscribe to RSS - CSS