Samouk amatér vs. SuperKodér

Jak moc velký je rozdíl mezi člověkem, který se učil kódovat sám a člověkem, který se kódováním živí a má mnohaletou praxi? Býval jsem samouk, ale nedávno jsem přešel na druhý břeh. Nyní mám ve svém okolí opravdové profíky, a tak skvěle dokážu porovnat hlavní rozdíly mezi samoukem a SuperKodérem.

Kdysi jsem o webu přemýšlel jako o jednotném celku. “Nakóduju html, udělám css a je hotovo. Je to přece tak primitivní.“ Takový jsem na to měl pohled. Byl však hodně zkreslený. Uvádím zde největší rozdíly mezi samoukem amatérem a superkodérem:

1. STRUKTURA CSS

Samouk – css jsem vždy nabouchal do jednoho souboru v celkové délce, baj očko, dvou tisíc řádků. Pro lepší orientaci jsem si vždy jednotlivé části webu oddělil dlouhým jednořádkovým komentářem, a tím to pro mě haslo.

SuperKodéři – strukturu css dělíme do několika složek a desítek menších souborů s průměrnou délkou cca sto řádků (záleží podle toho, co stylujete). Máme složku na layout, tiskový styl, různé boxíky, formuláře, formulářové prvky a meníčka. Výhoda je ta, že v html máme pak napsáno např. box-gallery a hned víme, kde hledat její styly. Orientace je perfektní.

2. PREPROCESSOR

Samouk – O preprocessorech jsem v té době zaslechl jen výjimečně. Byla to pro mě španělská vesnice. Vždy jsem preferoval čisté css, které jsem „uměl“, a tak jsem si říkal, že je zbytečné se učit něco, co vlastně nepotřebuji.

SuperKodéři – Píšeme hlavně ve Stylusu a je to naprostá bomba. Nejen, že umí stejné věci jako jiné preprocesory, např. psát mixiny nebo proměnné, ale jeho syntaxe je tak neuvěřitelně lehká a intuitivní, že se v něm člověk naučí psát během pár dní.

3. SÉMANTIKA

Samouk - To slovo jsem poprvé slyšel až na pohovoru u SuperKodérů a do té doby na sémantiku prděl. Např. jsem všechno obaloval divama, do nich dával další divy a do nich házel rovnou text.

SuperKodéři – Na sémantice si zakládáme a bereme ji automaticky.

4. PŘÍSTUPNOST

Samouk – Jediné, co jsem si při pojmu přístupnost vybavil, bylo dávat alty k obrázkům. To byl pro mě top level.

SuperKodéři – není to jen o altech. Je to např. o vytvoření skrytého menu pro zrakově postižené, aby se mohli dostat k hlavní nabídce, k obsahu nebo k vyhledávání. Mnohdy také tvoříme celé textové alternativy k obrázkovému obsahu. Navíc se vůbec nemusí jednat o zrakově postižené uživatele, ale například o uživatele s hendikepem na straně svého zařízení.

5. TISKOVÝ STYL

Samouk – ani ve snu by mě nenapadlo dělat speciální styly zvláště pro tisk.

SuperKodéři – tiskový styl bereme jako standard. Bez něj se sice webové stránky obejdou, ale když se můžou vytisknout čistě, přehledně a bez zbytečných blbostí, tak je to příjemné.

6. SPRITY

Samouk – sprite jsem znal maximálně jako limonádu. Ve spojitosti s tvorbou stránek jsem o tom nikdy neslyšel. Vždy jsem všechny obrázky ukládal jako samostatný soubor, a pak je linkoval přes img.

SuperKodéři – veškeré obrázky, co nemají nic společného s obsahem vkládáme do spritů a na web je umisťujeme skrze css. Jedná se o různé ikonky sociálních sítí, pomocné šipky a podobné serepetičky. Díky tomu zvyšujeme rychlost načítání webu.

7. CHECKLIST

Samouk – Mé projekty končily dopsáním posledního řádku css. Stránky byly hotovy a já je mohl nahrát na ftp.

SuperKodéři – O checklistu jsme napsali samostatný článek. Je to poslední úkon, který by měl kodér provést před tím, než projekt odevzdá klientovi.

Sdílet článek:

Marek Černák Autor: Marek Černák
marek.cernak@superkoderi.cz Twitter LinkedIn

Komentáře

  • Avatar

    1. Martin Michálek 27. 01. 2014 v 13:30

    Jak rozumět té sémantice? Je to schema.org/Open­Graph značkování nebo HTML5 tagy nebo něco jiného? Díky za článek kluci.

  • Avatar

    2. Marek Černák - SuperKodér | 27. 01. 2014 v 14:04

    Sémantikou zde myslím úplné základy, zamyšlení nad významem jednotlivých elementů. Například jsem začal používat nadpisy podle podle posloupnosti v obsahu a nikoli podle grafické velikosti. Samotný text, který má nějaký význam už neoblauju divem, nýbrž tagem

    atd. Od kluků vím, že toto jsou časté chyby kodérů, se kterými se setkali. Pokročilejší metody typu schema.org jako junior kodér zatím nepoužívám.

  • Avatar

    3. Martin Michálek 27. 01. 2014 v 15:39

    Rozumím, díky.

  • Avatar

    4. Daniel Kijkov 30. 01. 2014 v 00:13

    Jeste by mozna staly za zminku pouzivane programy a nastroje =) A jinak mohli byste nejak vic priblizit tu svoji strukturu souboru? Pripadne nejakou nazornou ukazku?

  • Avatar

    5. Tomáš Hejč - SuperKodér | 01. 02. 2014 v 10:12

    Ahoj Dane,
    co se týká používaných programů – tak je to řekl bych standardní vybavení pro kodéry – Sublime Text 2 a Adobe balík. Kolem toho samozřejmě pár programů, které jsou nutné, ale ne podstatné – každému vyhovuje něco jiného – práce s verzovacími systémy, FTP, lokální server, …

    Nástroje – grunt a vše okolo – yeoman, bower, stylus, sprite generátor, šablonovací systém, export, deploy …

    A ke struktuře souborů – Marek zde popisoval především strukturu css – v jednoduchosti se dá říci, že každá komponenta má svůj vlastní stylus soubor.

    V březnu plánujeme uspořádat praktický workshop, kde chceme účastníkům ukázat, jak lze workflow vývoje za pomocí těchto nástrojů a technik zefektivnit a usnadnit. Pokud by tě to tedy zajímalo více, rádi tě uvidíme.

  • Avatar

    6. Filip Novák 02. 07. 2015 v 12:24

    Myslím, že to je velmi hezky napsáno. Akorát ty CSS v několika složkách jsou zřejmě myšleny při použití Bootstrap, nebo něčeho podobného. Osobně se kódováním zabývám dost a vše mít v jednom CSS není žádný problém. Navíc velké množství načítaných CSS souborů, navíc v různých umístění může mít za následek zpomalení webu. Teda možná dřív tomu tak bylo, dnes už je na tom internet o mnoho lépe.






Využijte formátování Texy!