Webdesign z pohledu programátora, vol. 2014

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ě!

17 komentářů u “Webdesign z pohledu programátora, vol. 2014
  1. Zajimavy pristup, urcite i proto, ze oproti jinym ‘urychlovacum’ umoznuje hlidat uroven kodu a pri rozsirovani webu neklade z technickeho hlediska prekazky. :-) Ja pro staticke weby flakam usnadneni nejtezsiho kalibru: Udelam staticky web v Artisteeru, ktery ma mnoho moznosti, pekny graficky vystup a relativne ciste a pochopitelne HTML i CSS. V pripade potreby dopisu par radku v PHP a za par hodin je web s originalnim designem hotov.

  2. Pro mne osobně je největší skok Grunt/Gulp. Btw, ten Browser Link je obyčejnej Live Reload. Pár řádků JacaScriptu. Hezky to ilustruje Win versus ostatní svět. Pro Visual Studio potřebuješ plugin, a na jakoukoliv opravu čekáš roky. Ostatní mají konzoli, a fixnou si co potřebujou hned..

  3. Browser Link pro mě není těch pár řádků JavaScriptu, ale celková elegance, jak to zakomponovali do Visual Studia a jak se celkově zjednodušilo workflow. Neříkám, že se jinými postupy nelze přiblížit, ale něco tak dotaženého a současně komfortního jsem jinde neviděl. Pro mě to byl důvod, proč se sžít s jinak ne zcela oblíbeným Visual Studiem.

  4. Jo, sorry, tohle bylo zjednodušení. Firebug jsem si už tak nějak zvykl považovat za součást Firefoxu, pokud jde o webový vývoj (ačkoliv i vestavěné dev tools se rychle zlepšují).

  5. Typo nebo sem nepochopil vtip? :-)

    definování barev pomocí date pickeru

  6. Fajn pohled z jiné strany, díky.
    Kromě toho co už doplnili ostatní bych ještě jmenoval Browserstack. Skvělý nástroj z pohledu denodenního ladění webů v tom neskutečném mumraji prohlížečů.

  7. Díky za doplnění. Browserstack jsem zatím nepotřeboval (přes modern.ie mi to nějak nechtělo fungovat a placený plán u nich nemám), nicméně používám spoon.net a je paráda, že podobné služby existují.

  8. Pěkný článek. K tomu font renderingu Chrome – já tu experimentální podporu DW nedávno zkoušel taky a zlepšení je patrné – vypadá to prakticky stejně jako Firefox. Je nutné použít víc parametů zároveň (možná tam byl problém?): –enable-direct-write –no-sandbox –enable-experimental-web-platform-features

    Snad to brzo probublá do běžných buildů.

  9. Skvěle napsané. Já jsem tedy ve fázi, kdy mi plně vyhovuje i defaultní template od worpdressu :))

  10. Podla mňa bolo ešte treba v článku rozvynúť responsive dizajn. Mnoho ľudí to ešte nerieši, aj nariek tomu, že je to samozrejmosť pre google a tým pádom SEO.

  11. Díky za článek, Browser Link vypadá zajímavě. Já ale většinou tvořím na html5 blank nebo bootstrap.

  12. Zajimal by me vas pohled na Visual Studio s odstupem casu. Mam pocit, ze i ty duvody pro vam VS vadi jsou casto spojene s tim, ze o nekterych jeho moznostech jste v dobe psani clanku nevedel. Jak jste uvedl v souvisejicim clanku, vetsinu nedostatku a narocneho uzivatle uspokoji Resharper…

  13. Lukáš: ReSharper například stále nerozumí LESSu, což je podle mě dost základ. Visual Studio má z mého pohledu stále dost problémů, ale to se dá říct i o jiných nástrojích, takže si nestěžuju nějak příliš.

  14. I’m pretty pleased to reveal this site. I really appreciate your work and I can’t waiting for your further posts. Thanks!

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*

Mete pouvat Markdown: **Tun**, *kurzva*, `kd` atd.

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>