5 nástrojů pro příjemnější život webového vývojáře

Už řadu let se živím kódováním webů jako HTML kodér. Už dávno vím, že v dnešní době se bez kvalitních nástrojů a aplikací žádný developer neobejde. Šetří nám čas, usnadňují nám práci a obecně dělají celý proces kódování webu jednodušším.

Zde je krátký seznam aplikací a nástrojů, které mi zpříjemňují pracovní život. Mohou pomoci i vám, pokud jste o nich doposud neslyšeli. Chcete-li se posunout v kódování na další level, tyto a podobné nástroje vám pomohou. Proto vám určitě doporučuji si každou z těchto aplikací minimálně projít, pokud to myslíte s „kodéřinou“ vážně. V lepším případě začít hned aplikovat (pokud to má smysl).

Většinu těchto nástrojů pravidelně využívám. A nebo jsem s nimi minimálně párkrát přišel do styku. Proto vám ostatně vždy popíšu, o co jde. A poté, jaké mám zkušenosti z praxe, jak se mi s daným produktem pracuje.

CSS Hat

Plugin do Photoshopu (s podporou od verze CS4 do verze CS6) který vám dokáže vygenerovat kód dané vrstvy v CSS3 a vy ho můžete použít přímo na webu, aniž byste trávili spoustu času stylováním jednotlivých prvků. Velice užitečná věcička.

Vývoj bez CSS HATu by pro mně byl určitě časově náročnější, šetří mi skutečně nepředstavitelné množství času. Občas se sice stane, že vám přidělá drobnou práci, ale pořád jde o velmi efektivní nástroj a výhody převažují nad drobnými nedostatky.

Určitě to ale není násroj, který by pracoval přesně jako švýcarské hodinky. Pozor by jste si měli dát na chybějící fallback při použití fontů, zvláště u fontů, které jsou externí, HAT za ně nedefinuje žádné náhradní řešení. Občas dělají problémy i složitější přechody, případně tvary, které nelze nakreslit bez využití canvasu nebo několika tříd za pomocí CSS – což je logické. Hodně také záleží, jak je dané *PSD vytvořené.

Pokud CSS HAT ještě nemáte, určitě mrkněte na www.csshat.com, aktuální cena je 29.99$. Jedná se o jednorázový poplatek – jednou zaplatíte a můžete si s CSS Hatem hrát až do aleluja, aktualizace jsou součástí – velké plus, autoři neustále plugin vylepšují.

Sprite Cow

Sprity na webu používá dnes snad každý vývojář.

Sprite Cow šetří mnoho času a je naprosto skvělý, zamiloval jsem si ho. Nahrajete obrázek a táhnutím myši si označíte například ikonku, u které chcete znát rozměry a pozici na backgroundu. Je to velmi chytrý webový nástroj, ikonku vám automaticky sám označí od jednoho kraje až po druhý. Toto jednoduché webové udělátko jsem si moc oblíbil a využívám ho opravdu často.

Zvládá obrázky i velkých rozměrů a vždy pracuje svižně a bez problémů. Ušetří vám spousty času, stejně jako mně.

Jedná se o povinnou výbava každého kodéra, kterou najdete na adrese: https://www.spritecow.com. Nástroj je zcela zdarma.

retina.js

V dnešní době, kdy uživatelé disponují iPhony, iPady a vlastní MacBooky s retinou (které mají dvojnásobné rozlišení), je třeba myslet při vývoji webové stránky i na ně. Aby měli uživatelé těchto zařízení veškeré obrázky v 100% kvalitě, je třeba detekovat, že se jedná o zařízení s retinou. A až poté dané obrázky nahradit obrázky s dvojnásobným rozlišením .

A právě k tomu účelu slouží JavaScriptová knihovna retina.js. Pokud jde o obrázky linkované přímo v HTML, používá stejnou syntaxi jako Apple pro vývoj aplikací u svých zařízení (například obrázek pojmenovaný „obrazek.png“ bude automaticky nahrazen „obrazek@2x.png“). V případě, že obrázky linkujete skrze CSS, je potřeba to v CSS souboru nadefinovat, ale opět, jde o velmi jednoduchou implementaci a ušetří vám mnoho starostí.

Velmi povedená věc. Určitě by se v dnešní době na retinu mělo myslet. Není určitě nutné vše optimalizovat pro retinu, ale pokud můžeme a máme k tomu jednoduché prostředky, je to hračka. Výsledek potěší, zvlášť Apple fanoušky.

Plugin včetně dokumentace najdete na www.retinajs.com.

Select2

S tímto nástrojem jsem se setkal teprve nedávno. A musím uznat, že se mi dost líbí. Pomůže vám se stylováním selectů a zajistí jejich vykreslování všude stejně.

Existuje mnoho pluginů. které zajišťují podporu customizovaného selectu napříč prohlížeči, navíc s bohatým nastavením atd. Select2 se mi ale zalíbil hned. Rychle se implementuje, umí spoustu věcí, jeho kopitabilita je zajištěná a v praxi funguje skvěle. Krom toho, že se relativně špatně přestylovává do vlastního designu, bych mu nevyčetl asi nic, navíc má bohaté možnosti nastavení.

Komu by Select2 nevyhovoval, znám jeden velmi podobný plugin, který taky pracuje spolehlivě, jde o Chosen – https://harvesthq.github.io/chosen/.

Plugin Select2 najdete na adrese: https://ivaynberg.github.io/select2/

LESS

V poslední době dost populární CSS framework. Asi by se hodilo sepsat kompletní článek o CSS frameworkách, jak to vidím a jak to vídí ostatní, ale někdy jindy.

LESS je velmi jednoduchý. Začnete v něm psát defakto za pár minut, stejně jako já. když jsem se k tomu dokopal poprvé u @machala na školení. Jde o to, že pomocí CSS, si můžete definovat proměnné, psát si mixiny stylů, zanořovat a mnoho dalšího. Poté *less soubor zkompilujete pomocí aplikace (je jich mnoho, jak na Mac OS, tak na Windows) nebo na serveru (s tím nemám zkušenost) a LESS vám z toho vytvoří CSSko, které můžete například ještě minifikovat. Osobně LESS používám snad u všech osobních projektů, moc mi vyhovuje i když si uvědomuji, že CSS frameworky mají svá pro i proti.

Podrobnou dokumentaci a návod jak LESS rozjet najdete na https://lesscss.org/ (pro ty z vás, kteří raději česky, je tu překlad originálu na https://lesscss.cz/ který vytvořil Jan Polzer).

Budu rád, pokud mi doporučíte i vy, co rádi používáte, nebo nástroj, který vám šetří čas a práci! Pojďme diskutovat o tom, jak vytvářet weby efektivněji!