Jako každý obor i kódování webů se neustále vyvíjí kupředu. Dříve stačilo zdát HTML/CSS a trochu JavaScriptu. Rád bych v tomto článku nastínil, co je denním chlebem kodéra. Co musíme znát a bez čeho se v dnešní době neobejdeme.
Pokusil jsem se sepsat jednoduchý seznam, takové řekněme „kodérovo desatero“, které je obecným společným základem pro většinu kodérů.
HyperText Markup Language (zkratka HTML) je název značkovacího jazyka pro tvorbu webových stránek, které mohou být propojeny odkazy. Tento jazyk umožňuje publikaci stránek na Internetu. Jedná se o základní stavební blok, který je potřeba při vývoji webu. Poslední HTML5 specifikace vyšla někdy v roce 2014.
Cascading Style Sheets (CSS) se používá pro definici vzhledu stránky, která je poskládaná z HTML. Pomocí něho lze definovat např.: rozvržení stránky, barvy, fonty, chování prvků animace apod.
Oba jazyky jsou základní stavební kameny webového vývoje. Řekl bych, že nemá smysl učit se HTML5 značky nebo CSS3 vlastnosti z paměti. Nejčastěji používané si v praxi osvojíte a zapamatujete, ty další vám buď napoví IDE/editor, ve kterém píšete kód, nebo si je jednoduše dohledáte ve specifikaci např. přes Google.
Další velice důležitý nástroj pro frontend kodéra je JavaScript (JS). Zatímco HTML a CSS jsou značkovací a deklarativní jazyk, JS je plnohodnotný, interpretovaný, objektově orientovaný programovací jazyk.
Jednodušeji řečeno jazyk, díky kterému můžete na stránky přidat funkci. Třeba spočítat cenu položek v nákupním košíku e-shopu. Umožní vám na web přidat různé interaktivní prvky — hudbu, video, hry, animace apod.
Je dobré vědět, že existuje knihovna jQuery, které obsahuje spoustu užitečných pluginů a rozšíření, které vám ušetří čas.
Framework je nástavba pro daný jazyk. Má své výhody i nevýhody. Pozor, ne vždy a ve všech případech je vhodné ho použít. Záleží na tom, co zrovna tvoříte. Pomáhá třeba při tvorbě prototypů. Rychle s ním vytvoříte koncept. Vyzkoušíte si s ním chování a rozvržení komponent v prohlížeči.
Za sebe mohu doporučit trojici:
První zmíněný pohání můj web. Používáme ho také pro většinu webů v HexaDesign. Máme s ním velmi dobrou zkušenost, zejména pro prezentační weby, administrace nebo jednoduché webové aplikace.
Přestože CSS je základ, bez kterého se neobejdete, umí být velmi limitující. Hlavním problémem je fakt, že v něm nemůžete definovat žádné proměnné, funkce ani provádět žádné aritmetické operace.
Přitom projekty rostou, kód bobtná a neustále se opakuje. Použitím CSS preprocesorů jako Sass, LESS, nebo Stylus jsme schopni psát kód v preprocesorovém jazyce a ten nám umožní překonat zmíněné limity, které CSS má. Preprocesor kompiluje (přeloží) kód do CSS, které pak jednoduše použijeme.
Představte si, že potřebujete na stránce změnit velikost nebo barvu písma. Díky CSS preprocesoru, stačí jen přepsat příslušnou proměnnou. Nemusíte procházet řádek po řádku a ručně přepisovat hodnoty.
Verzovací nástroje jsou něco jako „stroje času“, které vás mohou vzít do minulosti a ukázat vám, jak vaše projekty vypadaly. Bez nich si v současnosti nedokážu představit vývoj webu.
Git je free a open source software. Jedná se o distribuovaný systém správy verzí, navržený tak, aby zvládl malé i obří projekty. Na internetu jsou k tomuto softwaru mraky informací návodů a knih. Většinou vše zdarma jako např. kniha Pro Git (Scott Chacon).
V souvislosti s Gitem, zde musím zmínit webové služby github a bitbucket. Tyto služby vám umožní hostingovou správu Git repozitářů (tedy vašich projektů).
V HexaDesignu jsme začínali na bitbucketu a s přibývajícími projekty jsme časem přešli na vlastní vývojový server a gitlab.
Dny kdy jsme si prohlíželi webové stránky pouze na obrazovkách PC nebo notebooků jsou dávno pryč. Proto je nezbytnou součástí tvořit webové stránky, které se umí přizpůsobit zařízením s různě velkým displejem.
Pár základních doporučení:
Většina CSS frameworků dnes má podporu pro tvorbu responzivních šablon. Není responzivita jako responzivita! Doporučuji se podívat na rozdíl mezi fixním, fluidním, adaptivním a responzivním designem.
Testování funkčnosti výsledné šablony, nebo webových stránek můžete v zásadě provádět v libovolném webovém prohlížeči. Stačí vybrat si svůj oblíbený. Většina prohlížečů má browser developer tools, které umožňují prohlížet a krokovat zdrojový kód stránky přímo v prohlížeči. Obecně obsahují inspektor a javascriptovou konzoli. Inspektor dovoluje vidět HTML a CSS, které běží na dané stránce. HTML a CSS můžete editovat. Živě máte možnost vidět výsledek. Konzole zase umožní vidět chybová hlášení javascriptového kódu.
Pokud chcete testovat na reálných zařízeních nebo starších prohlížečích, existují online služby jako např. Browserstack.
V případě, že máte vícero mobilních zařízení nebo tabletů fyzicky u sebe, můžete použít nástroj BrowserSync.
Poslední tip k tomuto tématu je stránka caniuse.com. Jednoduše ověříte, zda daná CSS vlastnost, kterou hodláte použít je kompatibilní s verzí prohlížeče.
Grunt je javascriptový nástroj, sloužící webovým vývojářům. Konfigurace úkolů se provádí pomocí konfiguračního souboru (Gruntfile.js). Pomocí něj můžete automatizovat opakující se úkoly např.:
Gulp je konkurenční nástroj, který umí v zásadě to samé jako Grunt. Je v základu rychlejší a konfigurace úloh provádí pomocí javascriptového kódu. Je proto snadnější v něm věci zobecňovat, a tak je vhodnější pro programátory, větší a složitější projekty. Grunt je zase přehlednější, takže by se dalo říct, že je vhodnější pro kodéry a začátečníky.
Osobně jsem začínal s Gruntem. Díky němu jsem si osvojil základy pochopil fungování celého ekosystému. Časem, jak se projekty stávali většími a složitějšími, jsem přešel na Gulp.
Při vývoji webu asi nebudete pokaždé znovu vymýšlet kolo. Existuje velké množství již hotových řešení, pluginů a knihoven. Pokud vám žádná z již hotových nevyhovuje, nic vám nebrání v tom, si vlastní napsat.
Ale jak ji pak do svého projektu jednoduše dostanu?
Odpověď zní: „Přes správce balíčků.“
Třeba yarn je správce balíčků (package manager) pro webový vývoj. Pomocí něj můžete do svého projektu přidávat a stahovat různé externí knihovny. Klidně i tu svou, kterou jste si vypiplali.
Nebojte se jí, dříve nebo později vám zjednoduší práci. Nemusíte být žádný expert. Stačí se naučit pár příkazů a uvidíte sami, jak rychle se vám to vryje pod kůži. Chce to jen překonat počáteční obavy.
Uživatelé Mac OS a Linuxu mají velmi dobrý terminál zabudovaný nativně. Windows v tomto ohledu značně pokulhává. Nicméně nezoufejte ve verzi 10 je powershell (vylepšená příkazová řádka). Případně můžete zkusit alternativu v podobě emulátoru cmder.
Mezi měkké dovednosti patří pro představu:
Jsou to sice obecná slovní spojení, ale v praxi se na tyto věci často zapomíná.