Kodéřina je těžká dřina, i když Sublime rozšíříte o všechny dostupné pluginy. Jaké využíváme nástroje, abychom zefektivnili svoji práci? Proč pro nás začíná být Photoshop noční můrou? Zapomeňte na jQuery a staňte se moderním kodérem!
Vždycky nás zajímalo, s jakými technologiemi pracuje konkurence a jak je s nimi spokojena. Proto jsme se rozhodli, že trochu odkryjeme karty a ukážeme, s čím pracujeme na frontendu my.
1. InVision
Vše začíná předáním grafiky, kterou máme přehledně namodelovanou pomocí aplikace InVision. Využíváme placený účet, kde máme pohromadě grafiky všech projektů a úpravy našich klientů. Výhody InVisionu jsou hlavně ve spolupráci nad grafikou. Jednotlivé pasáže lze komentovat a jednoduše sdílet. Grafika se dokonce verzuje a jde tedy dohledat jednoduše rozdíly oproti původnímu zadaní.
2. Seafile a Dropbox
Na sdílení zdrojových souborů ke grafice používáme primárně Seafile, který si provozujeme na vlastním serveru, ale nebráníme se ani Dropboxu, pokud to klientovi více vyhovuje. Osobně ale preferuji Seafile, jelikož Dropbox má jednu velkou nevýhodu. Pokud synchronizujete klientovy soubory se svým Dropboxem, zaplní místo i na vašem účtu.
Nehledě na to, když potřebujete dát přístup více lidem. Kdybychom chtěli sdílet soubory se všemi klienty přes Dropbox, museli bychom každému uživateli zbytečně pořídit účet za 10 € měsíčně. Přitom Seafile umožňuje oddělené knihovny pro klienty v různých adresářích.
3. Photoshop CC a Sketch
Photoshop je grafický editor, který byl primárně navržen na úpravu fotek a v dnešním webdesignu se využívá více, než by měl. Díky tomu přichází na scénu mnoho nových aplikací, z nichž jednou je Sketch.
Práce ve Sketchi je intuitivní, jednoduchá a určitě nejednoho grafika či kodéra nadchne natolik, že Photoshop pro něj začne být noční můrou. Jedinou nevýhodou je, že Sketch zatím existuje pouze pro macOS. To se ale dá jednoduše vyřešit!
4. Avocode
Jedná se o český projekt a funguje pouze jako zobrazovač grafiky. Nedá se v něm sice nic přímo nakreslit, zato se z něj dá vzít mnoho užitečných věcí. Zobrazí nejen design z Photoshopu, ale také ze Sketche a navíc je multiplatformní.
V čem je jeho hlavní kouzlo? Po kliknutí na element dokáže vypsat všechny CSS vlastnosti, které budou potřeba. Známé barvy dokáže nahradit proměnnou, takže z části jde jen o kopírování vlastností. Díky tomu zbývá více času na kreativní práci, místo neustálého opakování font-size apod.
5. Sublime
Ne nadarmo se říká, že frontenďák se pozná podle pluginů v Sublime. Můžeme samozřejmě používat různé IDE např. od JetBrains (PhpStorm, RubyMine), ale ruku na srdce, takové IDE pro frontend je jako kanón na holuba. Sublime zvládá díky pluginům vše, co je potřeba. Je svižný, multiplatformní a nepadá.
6. MAMP PRO
Když přijde na řadu server, lze nakonfigurovat vlastní. Pokud na to ale není čas ani nálada, je tu MAMP PRO. Jednoduché klikátko pro všechny, kteří vědí jen to, že potřebují Apache, PHP a MySQL.
7. Gulp
Gulp využíváme primárně pro kompilaci CSS stylů a JavaScriptů. Rozhodně to ale není jediná věc, kterou umí. Dokáže být užitečný i v mnoha dalších případech: například při používání spritů, SVG ikonek a dalších vychytávek.
Moc chytrá věcička je plugin browser-sync, který při každé změně automaticky zobrazí v otevřeném prohlížeči aktuální verzi. Umí dokonce synchronizovat pohyb na stránce mezi více prohlížeči či mobilem, a je proto ideální k testování před ostrou produkcí.
8. PostCSS
Máme za sebou ve světě post a pre-processingu CSS dost. Nadchl nás LESS, uchvátil Sass a Stylus nám pořádně zamotal hlavu. Když se ale začalo mluvit o PostCSS, bylo jasné, že ho zkusíme. A ejhle, přešli jsme na něj a na Sass už jen smutně vzpomínáme, když upravujeme starý projekt.
9. jQuery
Psát v JavaScriptu bez jQuery bylo ještě donedávna neuvěřitelně otravné. Díky novinkám v ES6 a ES7 je už čistý JavaScript výrazně příjemnější. My jsme si loni řekli, že s jQuery končíme a od té doby píšeme už jen v surovém JS. Dokonce jsme si spoustu již napsaných věcí z jQuery přepsali. Teď považujeme jQuery za téměř sprosté slovo. Na surový JS jsme přešli hlavně kvůli optimalizaci výkonu, kterého dosáhnete snadněji bez použití knihovny.
Co se týče optimalizace pro starší vyhledávače, které tuto verzi JS nepodporují, lze veškeré kódy jednoduše optimalizovat pomocí modulu přidaného do Gulpu. Píšete ve standardu, který si zvolíte, a Gulp se při kompilaci postará, aby napsaný kód běžel v prohlížečích z doby, kdy i sousedi slyšeli, že se připojujete na internet.
10. Favicon generator
A co nějaká mikro aplikace, která se využije jednou za projekt? Přesně takovou je Favicon generator. Jeden by řekl, že favicona je jen čtvercový obrázek napsaný někde ve zdrojáku. Tahle aplikace ukáže, že jde o mnohem propracovanější mechanismus.
