Hledá se kodér! Co vše by měl umět?

Role kodéra v týmu bývá podceňována. Někteří se domnívají, že stylování webů není nic složitého a že by to mohl dělat každý, kdo něco ví o HTML a CSS. Opak je pravdou. Neznalý kodér může napáchat víc škody než užitku. Bezmyšlenkovitá manipulace s prvky na stránce může rázem narušit uspořádaný layout. Nevhodné či nepromyšlené interakce mohou v krajních případech snížit atraktivitu webu, ba dokonce odradit některé uživatele. Jak tomu předcházet?

Odpovědí je: mít v týmu dobrého kodéra. Nedávno jsme jednoho takového hledali. Ještě před přijímacími pohovory jsme dali hlavy dohromady a zamysleli se nad tím, na co vše se kandidáta ptát. Vycházeli jsme z toho, co sami umíme a co je pro naši práci klíčové, abychom ji dělali co nejlépe. Vznikl z toho poměrně obsáhlý seznam, který jsme se nakonec rozhodli sepsat do článku ve víře, že by mohl pomoct i ostatním. Ať už těm, kteří kodéra hledají, nebo těm, kdo se jím chtějí stát.

Ještě než se dostaneme k jádru článku, ráda bych rozlišila dva pojmy: frontend kodér a frontend developer.

Frontend kodér je osoba, jejíž náplní práce je stylování webových stránek. Její znalosti musí být postavené na HTML, CSS a přinejmenším základech JavaScriptu. Očekává se od ní estetické cítění, pokročilejší práce s grafickými editory, přehled o tvorbě uživatelského rozhraní či povědomí o UX paradigmatech. A mnoho dalšího, ale o tom až později.

Jak se ze mě stal front-end developer

Určitě znáte nejednoho developera, který přešel do vývoje z jiného oboru. V mém případě to byl design.

Frontend GardenAnita Szelesová

Frontend developer by měl mít určitě znalosti okolo HTML a CSS, ale jeho hlavním pracovním nástrojem bývá JavaScript (v kterékoli podobě). Na rozdíl od kodéra, který se snaží stránkám vdechnout jejich podobu, vývojář se stará o funkcionalitu a interakci s webem.

HTML 🔤

Sémantický web je nejčastějším kamenem úrazu. Co by si měl každý frontenďák zapsat za uši je: „Nezneužívat <div> pro všechen obsah na webu.“ Občas vídáme, že se celý web skládá jen z kombinace <div> a <p> elementů 😞. V tu chvíli ztrácí webová stránka svůj sémantický význam, na který bychom měli brát ohled i kvůli SEO nebo přístupnosti. Při sepisování struktury webu nezapomínejme, s jakým typem obsahu pracujeme ﹣ jedná-li se o záhlaví, hlavní navigaci, článek nebo obyčejný seznam. HTML elementů je celá řada a každý z nich má svůj význam, který by správný frontend kodér měl respektovat.

S tím je úzce spjata i validita HTML kódu. Vnořené elementy nebo povinné atributy taktéž ovlivňují přístupnost, vykreslení elementů nebo dohledatelnost stránky. Validní kód si můžeme hlídat už v rané implementační fázi v IDE nebo prohlížeči pomocí pluginu. Po nasazení webu mohou pomoci online HTML validátory, kterých jsou na internetu řady.

Další nedílnou součástí, kterou jsme zahrnuli do kategorie HTML, je znalost typografie. Sazečských konvencí jsou mraky a mírně se liší podle lokalizace. Je důležité umět v daných případech rozlišit často zaměňovanou pomlčku (﹣) se spojovníkem (-) nebo si nenechat utéct konec řádku s jednopísmennou spojkou či předložkou ( ).

Protože web se v dnešní době už nestaví v čistém HTML, více než vítaná je znalost šablonovacích nástrojů, kterými jsou Twig, Latte, Blade, Handlebars a další.

Kaskádové styly 🎨

Předpokládá se znalost CSS selektorů, vhodné použití jednotek (absolutních vs. relativních) a nových vlastností CSS, jako je flex, grid, transform nebo gradienty.

Každý kodér by měl vědět, co je to kaskáda, specificita a dědičnost. Na těchto třech vlastnostech kaskádové styly stojí.

Za must have by měla být považována i znalost preprocesorů. U nás používáme výhradně Sass a práci bez něj si dokážeme jen horko těžko představit. Efektivní práce s preprocesory přispívá ke snížení duplicit v kódu a i k hlubšímu zamyšlení se při implementaci. S vhodnou metodikou pro organizaci CSS navíc pomáhá s udržením štábní kultury.

To, jak budeme celý web vnímat, nejvíce ovlivňují barvy a především písmo. S ohledem na jejich vykreslování na webu je důležité font zobrazit v co nejkratším čase. I zde je velmi žádané, pokud kodér ví, že existuje @font-face, font-display nebo formát WOFF(2) . Povědomí o variable fonts je dozajista výhodou.

Aby vše výše zmíněné dávalo smysl, je třeba usilovat o vhodné pojmenování tříd a architekturu stylů. Metodik je mnoho ﹣ od velmi hojně používaného Let the Lord of Chaos rule (prostor pro zavzpomínání na krušné začátky každého z nás 🙂), tak pro názvy tříd například BEM, SMACSS nebo SUITCSS. Pro organizaci stylů namátkou ACSS, OOCSS, nebo u nás preferované ITCSS. Metodika se ve většině případů odvíjí i od kýženého vizuálu. Pro jednoduchý malý web netřeba používat kanón na vrabce.

Výhodou je zkušenost s UI knihovnami, jako je například Bootstrap nebo Material UI. Díky nim je možné šetřit čas i peníze. Umožňují v krátkém čase sestavit plnohodnotnou administraci nebo použitelné MVP (Minimum Viable Product), které lze podrobit i testování použitelnosti.

Kodér se v praxi s kaskádovými styly nemusí nutně setkat jen v jejich čisté podobě nebo prostřednictvím preprocesorů. V případě javascriptových aplikací jsou dnes velmi často používané tzv. CSS modules nebo CSS-in-JS.

I mistr tesař se někdy utne. Aby těch překlepů bylo co nejméně, jsou při práci s CSS používány lintovací nástroje. Proto na žádném projektu nezapomeňte na Stylelint. V package.json u nás nikdy nechybí vlastní verze konfigurace, abychom nemuseli zbytečně používat /* stylelint-disable */.

Za jakousi třešničku 🍒 na závěr u kaskádových stylů lze považovat Custom properties (chcete-li CSS variables), které například umožňují velmi jednoduše přizpůsobit web do režimu dark mode. Tyto proměnné nemusí nijak korespondovat s již dokumentovanými CSS vlastnostmi. Na rozdíl od preprocesorových proměnných k nim lze přistupovat i z HTML nebo JavaScriptu.

JavaScript 🧙🏻‍♂️

Je-li řeč o interakci na webu či zpracování asynchronních dotazů, některým už vstávají vlasy hrůzou, když si uvědomí, že je řeč o JavaScriptu. Snad teď nebudu lhát, pokud budu tvrdit, že se kodéři dělí na dva tábory: ti, kteří mají alespoň elementární znalosti JavaScriptu a jsou schopni jej v praxi používat, a ti, kteří se mu raději vyhýbají jak čert kříži.

Správný dotaz kodéra, když tuší, že by měl něco psát v JS: „A nešlo by to vyřešit pomocí CSS?“

Kodér nemusí nutně vědět, jaké jsou rozdíly mezi jednotlivými verzemi ECMAScript nebo jak přesně funguje prototypová dědičnost. Ze začátku by měl být schopen implementovat alespoň malé funkční celky, jako je například postranní navigace, collapsible box či validace formulářových prvků, jelikož to je v jeho práci denním chlebem.

Pokud mu nebudou cizí pojmy jako transpilace kódu, scope funkce, arrow functions, ES6 moduly nebo async/await, tak gratuluji. Tyto znalosti mnohdy nemají ani kodéři s více než desetiletou praxí.

Kodér se takřka na denním pořádku setkává s asynchronním JavaScriptem, jelikož na jeho principu se dnes vykresluje většina webů, které můžeme označit pod zkratkou SPA (Single Page Applications).

S touto podkapitolou úzce souvisí webová API, kterých je opravdu nepřeberné množství. History, Local/Session Storage, Geolocation, Media Source nebo Web Notifications jsou ve své podstatě standardy, bez kterých se většina moderních webů neobejde. Rozhodně je tedy neobcházejte obloukem.

Firmy v současné době poptávají kodéry, kteří mají zkušenosti i s JS frameworky, kterými jsou například React, Vue.js nebo Angular. Pokud už se kodér ocitne v říši jednoho z těchto frameworků, měl by mít povědomí o tom, jak zhruba funguje. V případě Reactu by měl rozumět pojmům jako je state, props, Hook, měl by vědět, jak funguje virtuální DOM a proč tam něco takového vůbec je.

Na toto téma navazuje testování javascriptových aplikací. S největší pravděpodobností se kodér setká s testováním komponent. Svatým grálem pro to bývá použití trojice Karma, Mocha a Chai.

Pokud chceme v JavaScriptu předejít nekonzistentnímu kódu, i zde existují lintovací nástroje, které je vhodné používat. Jedním z nich je ESLint, jehož různých konfigurací můžete najít mnoho. Nejčastěji používaná je ta od Airbnb.

Média 🖼

Média na webu patří mezi nejkritičtější obsah, kterým lze ovlivnit nejen uživatelský prožitek, ale i performance webu. Je proto vhodné, když kodér ví, jak s nimi pracovat. Umí rozlišovat vektorovou grafiku a bitmapy. Ví, v kterých případech se hodí jaký typ. Zná moderní formáty a jejich výhody i nevýhody. Řeší kvalitu výstupů pro retina obrazovky a mnoho dalšího. Klíčové je neopomenout komprimaci (či kompresi) dat.

Uživatelům na webu servírujeme nejenom grafické podklady, ale i audiovizuální data. Je určitě vhodné znát elementy jako je <picture> a s ním úzce související <source> , srcset a sizes atributy u elementu <img>. Dále <audio> , vhodný pro zvukové záznamy, či <video> pro audiovizuální, aj.

S médii se často nepracuje pouze v jejich statické podobě, ale je potřeba provést i jejich animaci či dynamické vykreslení. K tomu můžeme používat SVG nebo <canvas>. Mezi hlavní rozdíly patří přístup k DOMu: zatímco do <svg> elementu jsme schopni přistupovat pomocí selektorů, při použití canvasu tuto možnost nemáme.

Design a UX 🧠

Co dělá z dobrého kodéra ještě lepšího? Estetické cítění, kreativita, empatie, nadhled. Žádnou z těchto vlastností nelze vypilovat téměř k dokonalosti jinak než praxí a (sebe)reflexí. Estetické cítění dodá webu požadovanou kvalitu na úrovni UX. Kreativita zvládne obyčejné věci transformovat na zajímavé, nebo komplikované na jednoduché. Díky empatii je kodér schopen varovat před špatnými návrhy, které občas působí jako klacky házené uživatelům pod nohy. A nadhled mu umožní kriticky přemýšlet nad celkem, který má implementovat.

Dobře navržený web po vizuální stránce většinou i reflektuje spolupráci kodéra a designéra. Je žádoucí, pokud jsou obě dvě tyto klíčové osoby na stejné vlně a ví, jak si mezi sebou předat veškeré materiály a stěžejní myšlenky.

Kodér často nestojí před hotovým řešením od designéra, které stačí jen nakódovat. I on musí někdy improvizovat a řešení navrhnout sám.

Pokud stojíte o nahlédnutí do problematiky uživatelského prožitku (UX), určitě doporučuji si přečíst knihu UX for Beginners od Joela Marshe. Knížka obsahuje 100 krátkých, ilustrovaných lekcí, v kterých se autor zaobírá například pojmy jako informační architektura, uživatelský výzkum nebo principy vizuálního designu. Z oblasti UI určitě nesmím zapomenout zmínit Lukáše Augustu, který ve svých lekcích na Designui radí, jak vypilovat uživatelské rozhraní.

Best Practices ⭐️

O této kapitole by se dalo sáhodlouze vyprávět, jelikož je zde řada principů a mnohdy nepsaných konvencí, které by se obecně vzato měly dodržovat na všech projektech. Často se ale liší projekt od projektu, tým od týmu.

Co považujeme za klíčové, je znalost principů pro tvorbu responzivního webu, s čímž úzce souvisí přístup mobile-first. V roce 2020 přes 50 % uživatelů přistupuje na webovou stránku z mobilního zařízení. To je pádný argument k tomu, proč je důležité, aby kodér uměl odladit webovou stránku pro různé velikosti obrazovek.

Kromě responzivity by měl web fungovat na všech podporovaných prohlížečích. Všestranným pomocníkem tu může být například Browserstack, který nabízí řadu zařízení, na nichž lze otestovat i web, který běží u vás na localhost.

Se zvyšujícím se počtem návštěvníků webu z mobilních platforem nastal čas, kdy se čím dál víc řeší otázka výkonnosti. Zelená čísla v Lighthouse auditech určitě potěší každého, ale není jednoduché se k nim dopracovat. Dopad na to má nejen konfigurace serveru, ale především vše kolem JavaScriptu, médií, stylů nebo webfontů ﹣ téměř vše, co je v režii kodéra.

Pokud je to v danou chvíli možné, určitě se nevyplácí přivírat oči nad přístupností. Mezi uživateli nejsou vždy návštěvníci, kteří umí webovou stránku ovládat hlasem nebo používat myš s klávesnicí. Ani nutně nemusí ocenit kreativní animace. Přístupný web by neměl být výjimkou, ale v mnohých případech samozřejmostí.

Webové stránky by měly být dobře dohledatelné, někdy i zobrazené hned mezi prvními výsledky při vyhledávání. Čím častěji se web objevuje ve výsledcích, tím má více návštěvníků. Ale tomu, aby byl web dobře viditelný, se musí pomoct. SEO přináší soubor metod, které pomáhají zlepšit viditelnost na webu, snížit bounce rate (míru okamžitého opuštění) a mnoho dalších výhod.

Posuňte kód na vyšší úroveň a respektujte principy DRY, KISS a YAGNI.

Půjdeme-li trochu do hloubky, tak mezi best practices se musí bezpodmínečně zařadit i software design principles. O co se jedná? Jde o sadu principů nejčastěji spjatých s OOP (Object Oriented Programming), které by měl každý vývojář dodržovat. Proč? Aby jeho kód byl čitelný, udržitelný a snadno rozšiřitelný bez duplicit. Mezi nejčastější principy spadá například DRY (Don't Repeat Yourself), KISS (Keep It Simple Stupid) nebo YAGNI (You Ain't Gonna Need It).

Nástroje ⚒️

Psaní webů v Poznámkovém bloku již dávno odzvonilo. Zdrojové kódy už nemusíme po kouskách zálohovat na diskety a kvůli zjištění návratové hodnoty jedné funkce nemusíme pročítat šestisetstránkovou papírovou dokumentaci. Doba pokročila a nástroje jakbysmet.

Vývojové prostředí je pro každého vývojáře nutnou prerekvizitou. Na trhu je spousta produktů ﹣PhpStorm nebo WebStorm od IDEA, Atom, SublimeText či VS Code, s jejichž porovnáním vás nechci zatěžovat.

Ve snaze zapouzdřit a odstínit veškeré závislosti na daném projektu, což se týká i lokálního serveru, databáze aj., může kodér používat virtualizační nástroje jako je například Docker, případně Podman.

Veškerá práce se zálohuje prostřednictvím verzovacího systému, nejčastěji Gitu. S jeho pomocí jste schopni během pár sekund nasdílet vámi napsaný kód celému týmu – nebo si smazat celodenní práci. Rozhodně nepodceňte základy Gitu. Začátky mohou být bolestivé, ale pro zkušené uživatele je jeho přínos neocenitelný.

Žádný kodér se během své práce nevyhne npm, případně Yarn. Jedná se o správce JS balíčků, které usnadňují údržbu a instalaci všech balíčků, které používáme při vývoji (Bootstrap, Stylelint, Autoprefixer, aj.).

Servírování javascriptových modulů v prohlížeči musíme trochu pomoct, a od toho tu jsou balíčkovací nástroje jako Webpack, Parcel, Browserify nebo Rollup. Nejčastěji skloňovaný bývá Webpack, který, na rozdíl od všech ostatních, umí pracovat i s různými druhy assetů, jako jsou obrázky, písma, styly a další.

Jako poslední bych do této kategorie zahrnula grafické editory. Podklady k webu, prototypy, návrhy od designéra ﹣ to vše musí být kodér schopen rozklíčovat a umět s tím pracovat. Pro sdílení designových podkladů jsou tu nástroje jako Avocode, Figma, Sketch nebo InVision. Pro grafické úpravy dále Photopea, Affinity nebo starý dobrý Photoshop a Illustrator.

Soft skills a práce v týmu 👥

Tato kategorie je velmi subjektivní a liší se na základě firemní etikety. U nás, Netvorů, je nejdůležitější si s novým člověkem sednout lidsky. Najít fajnového kolegu, který je týmový hráč, dodržuje termíny, umí být zapálený do své práce, kterou navíc odvádí na jedničku, to je ve své podstatě hledání jehly v kupce sena. Neklesejme ale na mysli a zároveň nemějme požadavky nepřiměřeně vysoké.

Na projektu by kodér měl být ztotožněný se všemi milníky při vývoji softwaru. Analýza ﹣ návrh ﹣ implementace ﹣ testování ﹣ nasazení. Během analýzy by měl umět kriticky hodnotit funkční i nefunkční požadavky na systém. Náročnost své práce by měl být schopen odhadovat v takových jednotkách, které pak budou řádově odpovídat času strávenému implementací. Při implementaci by měl dodržovat workflow, které je na daném projektu nastaveno (code reviews, pull/merge requests, aj.). Svou práci by neměl zapomínat průběžně testovat ve všech podporovaných prohlížečích. Jakmile se schyluje k nasazení webu na produkci, určitě by měl důkladně zkontrolovat svoji práci podle release checklistu.

Vzdělávání 🧑🏻‍💻

Kodéřině se meze nekladou a zejména v malých týmech přijde vhod, pokud mají členové týmu širší pole působnosti a jejich znalosti se prolínají různými IT podobory. Vždy je vítané, pokud se člověk ve svém volném čase posouvá a vzdělává se i v oborech, které úzce nesouvisí s jeho současně vykonávanou profesí. A je jedno, jestli se jedná o analýzu dat z Google Analytics nebo sestavování databázových modelů ﹣ vše se počítá, když vás to baví.

Na sociálních sítích najdete velké množství komunit nebo významných jmen, které čtenáře pravidelně informují o tom nejdůležitějším dění ve světě informačních technologií. Na českém poli působí například spolek Frontendisti, který si klade za cíl budovat a posouvat komunitu frontendových vývojářů. Na zajímavé čtení vždy narazíte na stránkách Smashing Magazine, CSS-Tricks, web.dev nebo dev.to. Nepřeberné množství je i vzdělávacích portálů, kde můžete i zadarmo nalézt kurzy týkající se základů webových stránek až po pokročilé data science kurzy o umělé inteligenci.

Shrnutí

Letem světem jsme popsali, co vše by správný frontend kodér měl ovládat, a to jsme určitě na něco zapomněli. Úroveň znalostí z každého podoboru se odvíjí od seniority, ale i specializace vývojáře. Neočekávejte tedy, že začátečník bude vše z výše uvedeného ovládat jako když bičem mrská už po pár měsících. Kvalita kódu a znalosti vývojáře odpovídají době strávené v oboru, což je krásně znázorněno v příspěvku od Lea Verou.

Byl pro vás článek přínosný? Chybí tu podle vás něco? Připomínky, sdílení nebo komentáře jsou vítány! 🙂

Co by podle vás mělo být v režii frontend kodéra? Jak to funguje u vás ve firmě? Podělte se o svůj názor v komentářích.

Ilustrace jsou dílem autorky článku. Nepřepoužívejte je prosím bez jejího souhlasu nebo citace.

Děkuji kolegovi Honzovi Kryšpínovi za plodnou diskuzi na toto téma (je s tebou radost pracovat ❤️). Děkuji i Adamu Kudrnovi za cenné podněty a připomínky k tomuto článku (je pro mě ctí se podílet na 🍀 zahrádce).

Související odkazy

• Front-end Developer Interview Questions (h5bp)
• The Widening Responsibility for Front-End Developers (CSS-Tricks)
• Webpack – moderní Web Development (Ackee)
• Design Principles
• Test JavaScript code using Karma, Mocha, Chai and headless browsers (Meziantou's blog)
• When to Use SVG vs. When to Use Canvas (CSS-Tricks)