Po delší době jsem se dostal ke kódování HTML/CSS a jsem překvapen, ne, doslova šokován, jak se věci posunuly dopředu. Pro mě jako pro programátora bylo dělání webů vždycky spíš za trest – když člověk nežil kódováním každý den, bylo docela peklo vyhnout se všemožným záludnostem a doručit výsledek, který by nebyl vyloženě pro ostudu.

V roce 2014 jsou ale věci jinak. Zmíním hlavní věci, které mě zaujaly; některé evidentnější, některé méně.

Bootstrap

Sice se čas od času objevují články typu Please stop using Bootstrap nebo alternativní “frameworky” typu Semantic UI, které se vůči Bootstrapu vymezují, ale nedejte na ně. Bootstrap je pro programátora s minimem šancí udělat hezký web od nuly naprostý základ – a současně poklad. Jo, není úplně dobrý nápad pustit ven web s defaultním designem a mít HTML plné tříd typu col-lg-4, ale to jsou všechno snadno řešitelné prkotiny. Celkově vzato je přidaná hodnota Bootstrapu pro založení webu obrovská. Líbilo se mi především:

• Grid systém, samozřejmě. Jaká nádhera, že jsem jedinkrát nemusel řešit pozicování.
• HTML mám krásně sémantické (pozicování do řádků a sloupců se řeší v LESSu)
• Responzivní chování potěší
• Pro Bootstrap existuje několik marketplaců s předpřipravenými designy, např. wrapbootstrap.com
• Jsou okolo něj různé užitečné nástroje, např. bootply.com

Bootstrap mi prostě ušetřil kupu práce, a je mi jedno, že je to už dost zprofanovaný framework a dávno není cool.

LESS mixiny

V preprocesorech jsem obecně neviděl zas tak velkou přidanou hodnotu, ale konkrétně u webu s Bootstrapem je přechod od CSS k LESSu vstupenkou do zcela jiného světa. Nejen že se pomocí LESSu snadno Bootstrap nakonfiguruje (potřeboval jsem např. upravit grid systém a něco okolo fontů), ale strašně užitečná věc jsou mixiny. Nastylovat h3 tak, aby vypadal jako h4? h3 { .h4; }, hotovo. Definovat layout ve stylopisech místo v HTML? header { .make-sm-column(6) } a hotovo.

Práce s Bootstrapem při současném nezahrnutí LESSu do workflow by znamenalo ochudit se o velkou část přidané hodnoty. A to jsem ani nemusel řešit, jaký preprocesor by byl nejlepší – i LESS, mnohými považovaný za ne zrovna nejlepší možnost, je stále skvělá věc.

Browser Link

Pro mě osobně nirvána z pohledu podpory kódování v nějakém nástroji. Vždycky jsem něco takového chtěl, částečně i našel např. v knihovně live.js nebo ve WebStormu, ale Browser Link jde zdaleka nejdál a navíc nejkomfortnějším způsobem. Jedná se o plugin do Visual Studia (je součástí Web Essentials) a dělá tři zásadní věci:

• Umí web otevřít v jednom nebo více browserech a všechny nalinkované browsery refreshnout buďto automaticky (po změně CSS) nebo na jednu klávesovou zkratku (po změně HTML)
• V browseru umí aktivovat “inspect mód”, kdy myší jezdím nad stránkou a ve Visual Studiu se selektuje odpovídající část HTML
• V browseru umí aktivovat “design mód”, kdy lze přímo ve stránce dělat úpravy podobně jako v F12 nástrojích a vše se živě přenáší do zdrojáků ve Visual Studiu

Důležité přitom je, že všechno tohle umí Browser Link bez instalace jakéhokoliv pluginu do jednotlivých browserů a bez nutnosti upravovat samotný kód webu. Je možné, že nástroje konkurence už pokročily (naposledy jsem se díval cca před rokem a to např. WebStorm vyžadoval instalaci rozšíření do Chromu a fungoval jen tam, live.js zase požadoval úpravu stránky), ale Browser Link je fakt paráda.

Visual Studio + Web Essentials

Visual Studio celkově nepatří k mým nejoblíbenějším IDE, z velké části kvůli jeho ne úplně dobrému editoru textu (viz Co mi vadí na Visual Studiu), ale když jsem si na část problémů našel workaroundy, stalo se pro mě VS slušně produktivním nástrojem. Díky pluginu Web Essentials má člověk vestavěnou podporu pro LESS (ale třeba i Markdown), v CSS/LESSu jsou přijemnosti typu definování barev pomocí color pickeru a tak dále.

Ještě před rokem by byl WebStorm od JetBrains na webový vývoj stokrát lepší. Dneska si už nejsem jistý, a pro mě osobně to Visual Studio vyhrálo (ač teda jazýčkem na vahách byl Browser Link).

Browsery a F12 tools

Ohledně browserů mě překvapilo pár věcí:

• Chrome má fakt neskutečně špatný font rendering. Tenhle browser nepoužívám, tak jsem si myslel, že občasné výkřiky na Twitteru jsou přehnané, ale za těch pár týdnů koukání na text v Chromu mi málem upadly oči. Snad s tím něco udělaj (experimentální podporu Direct Write jsem zkoušel, zlepšení jsem nezaregistroval).
• Firefox má z mého pohledu pořád daleko lepší dev tools, hlavně proto, že se v nich vyznám (nejvíc mi v kombinaci funkcí a UI vyhovuje Firebug, ale i vestavěné dev tools FF jsou už docela dobré). UI Chromu je mi obecně sympatické, Dev Tools jsou bohužel výjimkou.
• V čem má ale Chrome pro webový vývoj zásadní přednost, je, že po refreshi stránky (Ctrl+F5) udrží sroll position. Firefox (i IE) vyjedou nahoru, což je v praxi bohužel otravnější než koukat na hnusné fonty a používat méně přehledné dev tools.

Jinak samozřejmě moderní browsery růlujou, to je jasné.

Stack Overflow

Čestnou zmínku na závěr má Stack Overflow. Libovolný problém s CSS se dneska už neřeší, on se googlí.

Závěrem…

Jsem ohromen, jak produktivní jsem dokázal při kódování statického webu být. V minulosti jsem už několikrát jednoduchý web po delší pauze dělal a nikdy to nebyla zkušenost, kterou bych mohl označit za příjemnou. Pěkně, světe HTML5, pěkně!