Seznam zajímavých zdrojů pro frontend designery

Pro koho je seznam určený?

Seznam je určený pro všechny frontend designery, kteří se ptají, kde je možné sledovat nejnovější trendy a informace týkající se webových technologií. Chtěl bych v něm postupně popsat nejzajímavější internetové a knižní zdroje, které stojí za to sledovat. Jako médium jsem zvolil právě GitHub, protože umožňuje ostatním přidávat návrhy na změny a udržovat tak seznam aktuální. Pokud tedy víte o něčem zajímavém, co vám v seznamu chybí, otevřete novou issue a popište váš návrh na nový zdroj.

Obsah seznamu

Blogy

• Brad Frost - Blog written by Brad Frost — a web designer, speaker, consultant and author of Atomic Design.
• CSS-Tricks - CSS-Tricks has come to become a site about all things web design and development.
• Inclusive Components - A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.
• Je čas 🇨🇿 - Blog, který autor založil k uchování a sdílení poznámek, hotových řešení, rad a nápadů k tvorbě webových stránek.
• Smashing Magazine - Magazine for web designers and developers.
• SUPERKODERS 🇨🇿 - Blog brněnské firmy SUPERKODERS s články o jejich práci a webovém frontendu.
• Vzhůru dolů 🇨🇿 - Populární český blog o webovém frontedu. Autorem je Martin Michálek, známý specialista na CSS a responzivní design.

_{⇧ zpět nahoru}

Newslettery

• CSS Layout News - Tutorials, news and information on CSS Layout.
• CSS-Tricks - Newsletter about web design and development.
• CSS Weekly - CSS articles, tutorials, experiments and tools.
• Dev Tips - Tips mostly for Chrome DevTools in the form of a animated gif.
• Responsive Design Weekly - Responsive design articles, tools, tips, tutorials and inspirational links.
• Smashing Magazine - Useful tips, tricks and resources for frontend designers — collected, written and edited by Smashing Magazine.

_{⇧ zpět nahoru}

Knižní zdroje, ebooky

2017

• Design Systems - As designing static pages has become untenable, many have started to approach design in a modular way. Book is new practical guide to creating effective design languages for great digital products. Více v recenzi… (2017; Smashing Magazine - Alla Kholmatova)
• Vzhůru do (responzivního) webdesignu 🇨🇿 - Kompletní průvodce návrhem a implementací responzivních uživatelských rozhraní. Více v recenzi… (2017; Martin Michálek)
• Vzhůru do CSS3 🇨🇿 - Vylepšete své znalosti webové kodéřiny aktuálním přehledem nástrojů a nových CSS3 vlastností v jednom e-booku. (2017; Martin Michálek)

2016

• Inclusive Design Patterns - This book explains how we can craft accessible interfaces without extra effort — and what front-end design patterns we can use to create inclusive experiences. Více v recenzi… (2016; Smashing Magazine - Heydon Pickering)
• Atomic Design - Book covers all that goes into creating and maintaining effective design systems. (2016; Brad Frost)
• Practical SVG - From software basics to creating icon systems and implementing fallbacks, Chris Coyier shows you how to harness the power and possibilities of working with SVG. - (2016; A Book Apart - Chris Coyier)

2014

• Web ostrý jako břitva 🇨🇿 - První česká kniha o návrhu webu. Webdesign není jednoduchý, jen podceňovaný. Kniha ukáže začínajícím webdesignerům cestu, zkušeným doplní mezery a zadavatelům ušetří statisíce za špatně navržený web nebo nesmyslný tendr. (2014; Jan Řezáč)

_{⇧ zpět nahoru}

Videa

• Záznamy přednášek z konference WebExpo
• Záznamy přednášek ze srazů Frontendisti.cz 🇨🇿

_{⇧ zpět nahoru}

Podcasty

• Brus kódu 🇨🇿 - Podcast o front-endových vývojářích a technologiích. Natáčení podcastu přerušeno.
• Vzhůru dolů 🇨🇿 - Rozhovory s českými osobnostmi webdesignu.

_{⇧ zpět nahoru}

Přehledy

CSS

• CSS Flexbox Layout
  • Přehled na Vzhůru dolů 🇨🇿 - Co je to Flexbox?, Položky layoutu, Kontejner
  • A Complete Guide to Flexbox
• CSS Grid Layout
  • A Complete Guide to Grid

HTML

• HEAD - Podrobný průvodce elementy, které je možné použít v hlavičce HTML dokumentu.
• HTML5 Accessibility - Aktuální přehled podpory přístupnosti HTML5 vlastností u nejpoužívanějších prohlížečů.

Email

• CSS Support Guide for Email Clients - Podrobný přehled podpory CSS vlastností napříč mobilními, webovými a desktopovými emailovými klienty.

Výukové nástroje

Návody, tipy, ukázky

• CSS Protips - Seznam užitečných tipů, které pro efektivnější práci s CSS na webu.
• A collection of tips to help take your CSS skills pro.
• Grid by Example - Projekt Rachel Andrew, který by měl obsahovat vše potřebné pro pochopení CSS Grid Layout. Vše je obohacené o příklady a návrhové vzory.
• Learn CSS Grid - Průvodce, který pomůže porozumět možnostem CSS Grid Layout.
• The Modern JavaScript Tutorial - Kolekce JS návodů popisujících řešení základních i složitějších problémů, se kterými se setkáváme při webovém vývoji.
• You Might Not Need jQuery - jQuery je na webech hojně používané. Často však potřebujeme jen zlomek jeho funkcí. Stránka poskytuje ucelený přehled základních funkcí jQuery a jejich alternativních zápisů pomocí JavaScriptu.

Interaktivní kurzy

Začátečník

• Introduction to HTML - Interaktivní kurz pro pochopení základů HTML.
• Introduction to CSS - Intraktivní kurz pro pochopení základů CSS.
• Introduction to JavaScript - Interaktivní kurz pro pochopení základů JavaScriptu.
• Beginning HTML & CSS - Videokurzy základů HTML a CSS.
• Codeacademy - portál online výukových kurzů
  • Learn HTML - Interaktivní kurz základů HTML.
  • Learn CSS - Navazující kurz pro pochopení základů stylování webu pomocí CSS.
  • Make a Website - Kurz tvorby jednoduchých webů pomocí HTML, CSS a s využítím frameworku Bootstrap.

Pokročilé techniky

• Hello, animation! - Interaktivní kurz pro výuku CSS animací.
• Learn Flexbox for free - Výukový kurz CSS Flexbox.
• Learn CSS Grid for free - Výukový kurz CSS Grid.
• Learn CSS Variables for free - Výukový kurz vysvětlující používání CSS proměnných.

Výukové hry

• Flexbox Froggy - Hra pro výuku CSS Flexbox
• Grid Garden - Hra pro výuku CSS Grid Layout

_{⇧ zpět nahoru}

Webové služby

Diskuzní portály

• Stack Overflow - Největší diskuzní portál zaměřený na vývojáře. Díky rozsáhlé komunitě je to vhodné místo pro řešení chyb, hledání rad a sdílení svých úspěchů.

Dokumentace

• Mozilla Developer Network (MDN) - Webová dokumentace poskytuje informace o otevřených webových technologiích, včetně HTML, CSS a API rozhraní pro webové stránky a HTML5 aplikace.

Generátory

• Carbon - Generátor obrázků s náhledy kódu.
• CSS Gradient - Interaktivní generátor CSS gradientů. Výsledek je možné exportovat do CSS.
• Gradient CSS Generator - Interaktivní generátor CSS gradientů. Výsledek je možné exportovat do CSS nebo SCSS.
• CSS Grid - Interaktivni generátor pro CSS Grid layout. Výsledek je možné exportovat do CSS.
• Favicon Generator - Generátor favikony webu. Nástroj vám vytvoří HTML kód a přichystá potřebné externí soubory ve správných rozměrech (obrázky, manifesty).

Prototypování, sdílení kódu

• CodePen - Online editor pro prototypování a snadné sdílení ukázek kódu.
• JSFiddle - Online editor pro testování a sdílení vašeho JavaScriptu, CSS, HTML nebo CoffeeScriptu.
• satyr.io - Generátor prototypů obrázků. Umožňuje vytvářet fiktivní obrázky pevných i náhodných rozměrů, různých barev. Dokáže nasimulovat i pomalé internetové připojení.

Statistiky

• Can I use - Služba poskytuje přehled toho, jak jsou podporovány CSS vlastnosti, HTML5 elementy a jiné webové technologie v různých webových prohlížečích.

Testování webů

• BrowserStack - Služba, která vám umožní vyzkoušet váš projekt na jiných prohlížečích, ale i na jiných zařízeních. Nic nemusíte instalovat. Při testování se připojujete k zařízením přes váš prohlížeč.
• WebPagetest - Online služba pro pokročilou analýzu a testování webů. Umožňuje vývojáři odhalit řadu implementačních problémů např. rychlost a způsob načítání. Více na Vzhůru Dolů…

Zpracování obrázků

• Boxy SVG Editor - Webový editor SVG souborů.
• Photopea 🇨🇿 - Volně dostupný grafický editor umožňující editovat v prohlížeči soubory typu PSD (Adobe Photoshop), XCF (Gimp) nebo Sketch (Sketch App).
• SVGOMG! - Nástroj pro optimalizaci grafických SVG souborů.
• TinyPNG - Nástroj pro optimalizaci grafických PNG a JPEG souborů.

Při vyhodnocování přehledu jsem provedl FB anketu (listopad 2017), kde jsem se tázal komunity na další zajímavé online služby.

_{⇧ zpět nahoru}

Užitečné zdroje

Sady ikon

• Iconic - Sada ikon navržených pro moderní web.
• IcoMoon - Sady vektorových ikon s možností tvorby SVG sprite.

Testování webů

• Free Virtual Machines from IE8 to MS Edge - Připravené a volně stažitelné "virtuálky" umožňující spustit Internet Explorer 8 - Internet Explorer 11, popř. Microsoft Edge přes VirtualBox, Vagrant, VMware, HyperV nebo Parallels.

_{⇧ zpět nahoru}

Editory kódu

1. Sublime Text 🏆
2. Visual Studio Code
3. PhpStorm
4. Atom
5. WebStorm
6. IntelliJ IDEA

Seznam nejoblíbenějších editorů mezi českými frontendisty. Pořadí bylo sestaveno na základě FB ankety z října 2017. V anketě naleznete i další méně užívané editory.

_{⇧ zpět nahoru}

Minikonference, lokální srazy

• Praha
  • Pražské srazy Frontendisti.cz 🇨🇿
• Brno
  • Brněnské srazy Frontendisti.cz 🇨🇿
  • Be more JS 🇨🇿
• Ostrava
  • Ostravské srazy Frontedisti.cz 🇨🇿
• Plzeň
  • Plzeňské srazy Frontedisti.cz 🇨🇿

_{⇧ zpět nahoru}

Větší konference

Akce s ohlášeným konáním v 2018

• Barcamp 🇨🇿 - Otevřená konference ze světa internetu. Zaměřena je především na nové trendy v internetových aplikacích a technologiích, webdesign, marketing, internetovou reklamu, digitální média a podnikání. V následujícím seznamu uvádím pouze ty Barcamp konference, které aspoň občas mají v programu zajímavé pro frontend designery.
  • Barcamp Brno (2. 6. 2018)
  • Barcamp České Budějovice (24. 2. 2018)
  • Barcamp Hradec Králové (13. 10. 2018)
  • Barcamp Ostrava (24. 11. 2018)
  • Barcamp Plzeň (7. 4. 2018)
• Devel.cz 🇨🇿 (16. 6. 2018) - Konference zaměřená na vývojáře. Občas je zde možné najít i přednášku zajímavou pro frontend designery.
• WebExpo (21.–22. 9. 2018) - Největší a nejzajímavější webová událost roku v ČR.

_{⇧ zpět nahoru}

Kurzy

• Vzhůru dolů 🇨🇿 - Vylepšete své znalosti na kurzech autora textů blogu Vzhůru dolů. Spolu s dalšími odborníky pořádá kurzy SVG, Bootstrapu a Javascriptu.

Kde hledat pracovní nabídky?

• Frontendisti.cz práce 🇨🇿 - FB skupina určená pro nabídky a poptávky pracovních pozic kolem webovém frontendu.
• StartupJobs 🇨🇿 - StartupJobs vám pomůže najít práci, která vás bude bavit! Portál propojuje zájemce se startupy a skvělými firmami s ambicemi a velkou vizí.

_{⇧ zpět nahoru}

Autor seznamu: Martin Pešout. Dále přispěli: Tomáš Kout, Jetpack, vojtaaa9. Velké díky 🍻 také posílám celé české kodérské komunitě za pomoc s rozšiřováním zdrojů.