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

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

Již ř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 pomocný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šší.

Pokud se i vy chcete vydat na dráhu kodéra, zde je krátký seznam aplikací a nástrojů, které by se vám mohly hodit a zpříjemnit vám pracovní život. Doporučuji si je osahat, pokud jste o nich doposud neslyšeli. Zkuste 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ě je zkuste hned využít při práci.

Já 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, jaké mám s nimi zkušenosti z praxe, jak se mi s daným nástrojem pracuje atd.

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.

Kodování bez CSS HATu by pro mě bylo určitě časově náročnější, tento nástroj š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ástroj, který by pracoval přesně jako švýcarské hodinky. Pozor byste si měli dát na chybějící fallback při zjišťování fontů pomocí HATu (fallback je vlastně takové náhrádní řešení, pokud se například font pomocí CSS nenačte, tak nadefinujeme, aby se použil Arial). Občas mi v CSS HATu 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, jeho 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. Všechny další aktualizace jsou již zahrnuty v ceně, což je velké plus, jelikož autoři tento plugin neustále vylepšují.

hat-img

Sprite Cow


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

Nástroj Sprite Cow šetří mnoho času a je naprosto skvělý, zamiloval jsem si ho. Nahrajete si 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ů, vždy pracuje svižně a bez problémů. Ušetří vám spousty času – stejně jako mně.

Jedná se o povinnou výbavu 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 ve 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 kompatibilita 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 nevytknul 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/

 

select-img

LESS


V poslední době dost populární CSS framework. Asi by se hodilo sepsat kompletní článek o CSS frameworcí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 ale nemám zkušenost) a LESS vám z toho vytvoří CSSko, které můžete například ještě minifikovat (zpotimalizovat, dělá se to kvůli rychlejšímu načítání kódu, kdy je výsledný kód skutečně minimalistický). 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ří neumís moc dobře anglicky, je k dispozici překlad originálu na https://lesscss.cz/, který vytvořil Jan Polzer).


Budu rád, pokud mi doporučíte i vy nástroje, které rádi používáte nebo tooly, jež vám šetří čas při práci! Rád se přiučím něčemu novému. Pojďme diskutovat o tom, jak vytvářet weby efektivněji!

Komentáře

Nahoru