Pri kódení webov sa často stretávam s niekoľkými činnosťami, ktoré vedia byť iritujúce alebo spomaľujú prácu na projekte. Preto prinášam krátky zoznam nástrojov, ktoré mi pomáhajú kódiť weby efektívnejšie a rýchlejšie.

Font-Awesome (https://fortawesome.github.io/Font-Awesome/)

Web by nemal byť iba funkčný, ale aj pekný. K tomu nám pomáha práve font Font-Awesome. Je to v podstate font, ktorý prináša mnoho vektorových ikon. Následne im môžeme upravovať farbu, veľkosť, shadow, prípadne nastaviť v CSS vlastnosti podľa potreby.  Nájdeme tu ikony snáď zo všetkých kategórií, ktoré pomôžu zlepšiť zážitok z prezerania stránky či nahradiť obrázky a zvýšiť rýchlosť načítania.

Google Fonts (https://www.google.com/fonts)

Vybrať správny font pre web nie je žiadna sranda, o tom vedia svoje grafici. No nestačí, aby bol font dobre čitateľný a hodil sa do celkového konceptu webovej stránky, ale je dôležitá aj jeho technická použiteľnosť. Obsahuje všetky znaky jazykov, ktoré použijeme? Bude fungovať aj na tabletoch? A ako ovplyvní rýchlosť načítania stránky?

Všetky tieto otázky vyriešime použitím stránky https://www.google.com/fonts. Vyberieme vhodný font, zaškrtneme rezy, ktoré budeme potrebovať a vyberieme požadované znakové sady.

Následne uvidíme dopad na rýchlosť načítania webu a v jednoduchých dvoch krokoch nastavíme font pre náš web.

TinyPNG (https://tinypng.com/)

Nemáte po ruke photoshop či sa vám nechce spúšťať grafický editor a potrebujete skomprimovať obrázky na web? Nevadí, TinyPNG je jednoduchý online tool, ktorý ma pomerne dobrý algoritmus na komprimovanie .jpg a .png súborov a pomôže nám vylepšiť rýchlosť načítania našich webových stránok.

tiny

DummyText

(https://chrome.google.com/webstore/detail/dummytext/ahnionhaccolmddlboaklelpadaeafbj)

Náš developer Matej si nevie vynachváliť plugin pre Chrome, cez ktorý si generuje staré známe Lorem ipsum. Nemusí si tak otvárať novú stránku a zbytočne sa preklikávať, ale stačia mu iba dve kliknutia a ma skopírovaný text. Taktiež si môže nastaviť počet paragrafov či počet znakov.

ColorZilla

Šikovný a užitočný prídavný modul pre prehliadač, ktorý funguje ako color picker, no viete v ňom aj vygenerovať nejaký ten css gradient. Okrem toho dokáže spraviť analýzu použitých farieb na webovej stránke. To sa môže hodiť, ak si napríklad chcete skontrolovať, či ste korektne dodržali správnu farebnú paletu podľa grafického návrhu.

CSS3 Generator (http://css3generator.com/)

Ďalšie zaujímavé rozšírenie pre Chrome, ktoré používam, je komplexnejší CSS3 generátor. Ručné písanie css pre tiene, gradienty, animácie a ďalšie vymoženosti, ktoré nám CSS3 ponúka, zaberie zbytočne veľa času. Tak prečo nevyužiť tento generátor, ktorý nám pripraví aj úpravy pre jednotlivé webové prehliadače.

CodeKit  (http://incident57.com)

Náš kóder Adam si nevie vynachváliť program CodeKit, ktorý kompiluje množstvo súborov do zopár produkčných komprimovaných výstupov. Šetrí mu to čas a zase raz vylepšuje rýchlosť načítania stránky. Čerešničkou na torte je automatické obnovenie stránok v browseroch po tom, ako uložíte rozpracovaný súbor.codekit

 

Git/SVN/Mercual

Robíte na väčšom a zložitejšom projekte, ktorý si vyžaduje, aby viacerí developeri upravovali rovnaké súbory súčasne? S Repozitárom to nebude problém. Ak bude viac ľudí upravovať jeden súbor súčasne, tak pri uploadnutí do repozitára budú môcť porovnať, kto aké úpravy robil a jednoducho ich zlúčiť. Výhodou je možnosť sharovania kódu s developerskou komunitou.