Tento článok by som chcel venovať hlavne tým, ktorí už s programovaním začali na základnej úrovni, no potrebovali by rady, ako s ním začať a aké sú (podľa mňa) najlepšie programy na uľahčenie programovania. Ja osobne som vždy sviatky venoval sebarealizácii a zdokonaľovaniu sa. Skúsim popísať moju osobnú situáciu, ako som sa k programovaniu vôbec dostal a čo som dokázal spraviť už po relatívne krátkom čase.

Ako začať s návrhom na web

Na každý voľný čas som si dokázal nájsť nejaký projekt. Keď sa mi to nepodarilo, snažil som sa „skopírovať“ už nejaký známy web, ale po svojom. Nikdy som si však nerobil náčrty a návrhy na papier. Jednoducho som len kódil a testoval, ako to vyzerá live. Začal som s tým už na strednej škole. Prvé weby boli tvorené programom BlueVoda. Technicky nebolo ani potrebné vedieť programovať. No keď som potreboval vytvoriť registráciu alebo chat, bol nutný už server a preto som sa začal venovať programovaniu stránok oveľa viac. Asi po jednom roku malých prác s HTML, CSS a PHP sa blížila maturita a teda bolo logické, že ako maturitnú prácu si zvolím webovú stránku. A nie hocijakú, pokúsil som sa spraviť sociálnu sieť.

Moja najväčšia inšpirácia bola samozrejme Facebook. Nemohol som spraviť úplne identickú stránku, pretože som vedel, že také “skills” ešte nemám a pravdepodobne ani čas. Táto práca mi pohltila všetok môj voľný čas i sviatky. Začal som s tým, čo všetko chcem ponúknuť potenciálnym návštevníkom. Ako prvé som navrhol design. Bol jednoduchý, horné menu obsahovalo formulár na prihlásenie, odkaz na registráciu, počítadlo návštev a registrovaných používateľov. Teraz sa mi zdajú tieto veci ako jednoduchá funkcia, no vtedy som bol hrdý na ich vytvorenie.

Skôr, než som riešil registráciu, prihlásenie a počítadlá, začal som robiť layout stránky. To znamená, že prvá verzia bola len HTML a CSS. Doteraz používam túto taktiku, že nový web vytvorím na takýto štýl „skeletonu“ a prvky zo servera alebo administráciu doplním neskôr. Postupne som sa dostal k vytvoreniu registrácie a prihlásenia. Postupoval som podľa internetu na stránke W3Schools a veľa som sa priučil. Keď som sa však dostal ku kódeniu dynamického vyhľadávača a chatu, vtedy som sa po prvýkrát stretol s JavaScriptom. Keby mi môj spolužiak neukázal knižnicu jQuery, zrejme by som svoju prácu ani nestihol odovzdať. Táto knižnica mi ušetrila veľa času, keďže sa pomocou nej dajú jednoducho vytvárať aj animácie. Celkovo mi maturitná práca zabrala asi 7 mesiacov. Ale nebolo to tak, že som bol “no-lifer” a nerobil nič iné okrem sociálnej siete. Keďže na našej škole neboli webové stránky veľmi rozšírené, vedel som, že to mám vyhraté už len za návrh a tak sa aj stalo. :)

Prikladám ukážky v podobe dvoch obrázkov, ktoré ukazujú, ako moja maturitná práca vyzerala na koniec. Prvý obrázok je ukážka úvodnej stránky po prihlásení. K dispozícií bolo zopár dôležitých informácií o používateľoch a žiadostí o priateľstvo. Ak vám prišla správa keď ste neboli online, v hornom menu sa zobrazila ikonka informujúca o počte neprečítaných správ. Druhý obrázok ukazuje dynamický vyhľadávač, čo bolo pre mňa v tej dobe obtiažne.

Programy, ktoré ušetria čas

Programovanie samé o sebe zaberie dosť času. Niektoré prvky, ktoré sa zdajú byť jednoduché, môžu byť v kóde veľmi zložité a naopak. K mojej práci neodmysliteľne patrí freeware Atom, ktorým sa dá programovať v rôznych programovacích jazykoch. Tento program disponuje premakanými funkciami ako pomocné dopĺňanie textu, vlastné makrá, fizzy finder (dynamické hľadanie súborov v projekte) a taktiež u mňa dosť využívaná funkcia - hľadanie textu vo viacerých súboroch. Taktiež doplnky ako mapa kódu (na pravej strane budete vidieť vlastný kód, len zmenšený), alebo pigment (ak použijete farbu v kóde, napr. #ff0000, zvírazní ju na červeno a nemusíte dekódovať, aká to je farba) sú len ďalším dôkazom toho, že tento program patrí k najlepším na programovanie.

Ak robíte zložitý design stránky alebo častokrát používate rovnakú farbu či veľkosti na stránke, určite vám liezlo na nervy prepisovanie toho istého kódu v rámci CSS. Dnes už takmer nedokážem napísať riadny CSS kód. V mojom živote ho nahradil jazyk SASS, konkrétne štýl SCSS. Keď som s ním začal prvýkrát pracovať, už som sa nikdy nechcel vrátiť späť k bežnému CSS. Pri použití SASS dostáva CSS podobnú funkcionalitu ako iné programovacie jazyky. Môžete vytvárať vlastné premenné, sčítavať, násobiť, vytvárať vlastné funkcie a veľmi veľa ďalšieho. Na nasledujúcom obrázku ukážem rozdiel medzi CSS a SASS/SCSS.

Oba kódy z obrázka majú rovnakú funkcionalitu. SCSS kód sa zdá byť na prvý pohľad väčší, no všimnite si jeho štruktúru. Ak by ste chceli v CSS zmeniť veľkosť elementu .box a zároveň ho vycentrovať, potrebovali by ste meniť 4 atribúty. Pri SCSS stačí iba 1 a prejaví sa to na všetkých. Tak isto to platí pre farbu. Teraz si predstavte, že by ste mali zmeniť farbu celého webu z červenej na zelenú. Cez CSS by vám to zabralo minimálne pol hodinu, zatiaľ čo s SCSS by to bola otázka pár sekúnd. Aby som nezabudol, do stránky sa nikdy neuvádza SCSS, prehliadač to totiž nevie spracovať (aj keď, toto by mohla byť dobrá výzva pre zdokonalenie prehliadačov). SASS/SCSS kód treba skompilovať na CSS kód, aby tomu porozumel prehliadač. Na toto slúži program ako napríklad Koala či Prepros. Pri možnosti “Output Style” zvoľte “compressed”, čím sa zmenší veľkosť CSS a stránka sa načíta o pár milisekúnd rýchlejšie.

JavaScript a využitie jeho možností

Už som raz spomenul JavaScript, ale nič som k nemu nepopísal. JavaScript v dnešnej dobe je už k neodmysliteľnou súčasťou každého webu. Aj keď názov tohto jazyka evokuje, že je nejakým rozšírením jazyka Java, sklamem vás – nemajú nič spoločné. Java-u môžete zvoliť ako jazyk back-endu a návštevník webu ho nikdy neuvidí, JavaScript je namiesto toho čisto front-endovou záležitosťou, ktorý sa dá verejne získať z každého webu. Ako som už spomenul, využívam knižnicu jQuery. Ak ste doteraz o jQuery ešte nepočuli a plánujete programovať s JavaScriptom, určite vám túto knižnicu odporúčam.

Ak plánujete svoju webovú stránku vyšperkovať a zrýchliť ju o každú možnú milisekundu, Koala či Prepros nájdu svoje využitie aj tu. Dokážu JavaScriptový súbor „uglifykovať“, teda celý kód sa skompiluje na jeden riadok, bude prakticky nemožné ho prečítať. Ale pre prehliadač to bude jedno, pretože sa všetko podstatné zachová a prečíta ho bez problémov. Keďže je kód iba na jeden riadok, podobne ako u skompilovaného CSS bude súbor zaberať menej a zvýši sa rýchlosť načítania stránky. Oba programy uložia váš súbor ako [názov súboru].min.js a teda budete mať dostupný aj pôvodný, čitateľný kód. Na stránku už nahrajte len zminifikovaný súbor .min.js.

Ak robíte komplexnejší web, kde bude JavaScript kódu veľmi veľa, existuje ďalšia skvelá knižnica – RequireJS. Využiť je ju možné aj pri malých weboch, ale pokiaľ máte kód menší, nebudete cítiť veľký rozdiel. RequireJS využíva asynchrónne načítavanie iných súborov JavaScriptu. Teda ak návštevník príde na stránku, načítajú sa mu iba 2 súbory (namiesto napríklad 50-ich) a teda zvýšenie rýchlosti stránky bude výrazné. Na začiatok sa môže zdať RequireJS trocha komplikovaný, no neskôr pri veľkých projektoch nebudete chcieť využívať nič iné.

V najbližšom článku by som sa chcel venovať programovaniu v PHP, teda tvorbe frameworkov v tomto programovacom jazyku. Keďže mám vlastný framework, popíšem ako funguje, aké sú jeho výhody, no taktiež aj aké sú jeho nevýhody.