Seznam internetových zdrojů pro frontend designery, kteří se ptají, kde je možné sledovat nejnovější trendy a informace.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

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

⇧ zpět nahoru

Podcasty

⇧ zpět nahoru

Přehledy

CSS

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

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

Pokročilé techniky

Výukové hry

⇧ 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

⇧ 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.
  • 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ů.