LiveReload – The Web Developer Wonderland


Der ein oder andere hat es ja schon mitbekommen. Ich stecke mal wieder ein wenig stärker in der Webprogrammierung und versuche gerade ein eigenes Projekt aufzuziehen. D.h. man muss sich auch um die weniger schönen Sachen kümmern – bei mir betrifft das vor allem das Webdesign. Ich gebe es gerne zu, so schön CSS auch ist, es ist keines meiner dicksten Freunde – die Zeiten, als man noch Frames benutzt hat und sich niemand über Tabellen-Designte Webseiten aufgeregt hat, waren mir – trotz aller berechtigter Kritik – doch irgendwie noch am Liebsten.

Aber es ist, wie es ist, und ich kann ja auch nicht ewig auf dem Stand von vorgestern Sitzen, also wird es mal wieder Zeit, wissen aufzufrischen, meine HTML4.0 Kenntnisse zu modernem HTML5 upzugraden, und schön säuberlich mit CSS und HTML zu arbeiten. Daher CSS Datei im Editor, und von dort dann immer regelmäßig zwischen Konsole und Browserfenster gewechselt, cmd-r, für’s refreshen, einmal im Firefox, im Safari und in Chrome – es soll ja überall schick aussehen; einen Internet Explorer habe ich leider mangels Windows nicht zur Verfügung, aber nachdem ich dort schon etliche Work-arounds eingebaut habe, damit die wenigen neuen HTML5-Tags überhaupt angezeigt werden können, graust es mich eh davor, wie das dort alles aussehen wird (Stichworte sind hier Microsofts sehr eigenartigen Conditional Comments und das HTML5 Shiv).

Aber ich komme vom eigentlichen Thema ab. Regelmäßig nach einer Änderung in der Konsole drei unterschiedliche Browser in den Fokus holen und refreshen nervt. Besonders wenn man so CSS-Unerfahren wie ich bin, und viel mit den Werten herum probieren muss, bis sie das tun, was sie sollen.

Erst nachdem ich schon beinahe fertig war, bin ich auf eine Erweiterung für Guards gestolpert. Guards ist ein Tool, welches das Dateisystem beobachtet. Ändert sich im zu beobachteten Bereich eine Regel, kann Guard, je nach Konfiguration darauf reagieren. Bisher habe ich Guard immer dafür benutzt, dass meine Specs für Rspec erneut ausgeführt werden, sobald ich eine Änderung an einer Datei vornehme. Zusammen mit dem Ruby Gem für Growl (zu finden unter Github), werde ich bei jedem Durchführen von Tests mit einer kleinen Nachricht über den Stand benachrichtig, und jedes Refactoring sorgt für ein erneutes aufrufen aller Tests. TDD at it’s finest.

Mit der Erweiterung für Guards namens guard-livereload wird der Guards-Server noch um eine LiveReload-Funktionalität erweitert. LiveReload ist an für sich ein eigenständiges Programm, welches aus einem Server (für OS X in der Version 2 [Vorkompiliert über den AppStore für $9,99 USD, als Source frei im Github], für Windows in einer Alpha-Version) und zugehörigen Plugins für Browser besteht. In Live-Reload gibt man an, welche Ordner man überwacht haben möchte, und LiveReload schickt dann dem Browser, der sich über das Plugin bei LiveReload anmeldet eine Nachricht, sobald sich eine webseiten-darstellungs-relevante Datei geändert hat. Das Plugin wiederum lädt dann automatisch die Seite neu. Fein, oder?

Durch die Erweiterung spielt Guards nun auch LiveReload-Server, ich konnte alle meine Browser auf einen anderen Monitor auslagern, fein säuberlich nebeneinander, und jedes Mal wenn ich in Vim dann speichere sehe ich wie die Browser um die Wette refreshen. So macht Webprogrammierung richtig spaß 🙂

Advertisements

2 thoughts on “LiveReload – The Web Developer Wonderland

  1. Bei häufigen Änderungen am CSS zum experimentieren habe ich bisher auch gerne Firebug o.ä. genutzt, um das halt direkt im Browser zu ändern und sehen zu können.

    Heute habe ich eine Vorstellung von http://yeoman.io/ gesehen. Das ist ziemlich cool (nimmt viel Arbeit ab, die man für jedes Projekt erneut machen muss). Das bring u.a. auch LiveReload mit. Allerdings lief das in der Vorstellung ohne Browser Plugin; die Seite wurde wohl über Websockets aktualisiert.

    • Der Haken an Firebug steckt an für sich eigentlich schon im ersten Teil des Namens. Ich guck mir sowas gerne auf mehr als nur einen Browser an. Meine Freundin wird jetzt auch wieder herhalten müssen, wenn ich sehen will, wie es unterm IE aussieht 😀

Please comment. I really enjoy your thoughts!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s