201209Apr

HTMLiveCode: HTML/CSS/JS-Prototyping im Browser

Ich hatte mich vor einigen Monaten etwas stärker mit CodeMirror beschäftigt und als die Notwendigkeit entstand, mehrere HTML-Prototypen zu erstellen, entwickelte ich einen kleinen Browser-Editor auf der Basis von CodeMirror. Mittlerweile gibt es unzählige Online-IDEs wie JS Bin, jsFiddle, Ideone oder Fiddle Salad, mit denen sich die verschiedensten Komponenten direkt im Browser entwickeln lassen. Hier dürften keine Wünsche offen bleiben, denn in den neuesten Versionen einiger Editoren werden auch erweiterte Module wie HAML, SCSS, SASS, LESS oder Stylus unterstützt.
Für meine Zwecke genügte allerdings ein einfacher HTML-Editor, der nicht mit den genannten Tools konkurrieren soll. Entstanden ist schließlich HTMLiveCode — ein Werkzeug, das in erster Linie auf lokale Prototypen ausgelegt ist und nur Gebrauch von "localStorage" macht, um den aktuellen Code zwischen zu speichern. Im Gegensatz zu den meisten Online-Editoren funktioniert HTMLiveCode auch in Internet Explorer ab Version 9.

HTMLiveCode - Browser-based editor for HTML/CSS/JS prototyping

HTMLiveCode besteht nur aus einem Editor-Bereich sowie der Echtzeit-Vorschau. Eingegebener Code wird also direkt interpretiert. Um die Fehlerkonsole etwas zu schonen und JavaScript-Code bei der Eingabe zu validieren, kommt JSLint zum Einsatz. Der Editor bietet Shortcuts sowie Anpassungsmöglichkeiten. Zudem kann ein "Image proxy path" eingestellt werden, mit dem sich CSS-Background- und IMG-URLs ("src" und "background-image") mit einem virtuellen Pfad-Präfix versehen lassen (nur bei lokaler Installation). HTMLiveCode steht bei GitHub zur Verfügung, wo sich auch die Dokumentation befindet.

Kommentare

Webmasterle schrieb am 10.04.2012 #1

Vorschlag wegen des "Security Error" in Firefox ohne Cookies:

Ein try..catch Block mit aussagekräftiger Fehlermeldung.

Webmasterle schrieb am 12.04.2012 #2

Noch besser, so klappt es auch mit FFox ohne Cookies: Ein simpler Patch für index.html, der window.localStorage einfach non-persistent anlegt, wenn es im Browser nicht verfügbar oder abgeschaltet ist. Ein nettes Tool ansonsten!

Patch: pastebin.com/0qjnj0hs

Matthias schrieb am 12.04.2012 #3

Danke für den Tipp!
..ich kam gestern nicht dazu und habe eben eine einfache try-catch-Nachricht implementiert. Aber deine Lösung ist natürlich noch besser, danke dafür! Ich werde sie am Wochenende nachlegen.

Matthias schrieb am 14.04.2012 #4

So, der Patch ist nun implementiert ;-) Ich habe noch ein paar Dinge abgeändert und jetzt funktioniert es. Danke noch einmal!

Webmasterle schrieb am 17.04.2012 #5

PS. Der Patch bei pastebin war übrigens mit Absicht an dieser Stelle in der index.html, da er da den globalen Namespace überschreibt und so keine weiteren Änderungen in Deinem Code nötig gewesen wären ;-)

Matthias schrieb am 19.04.2012 #6

Ja, das dachte ich mir schon ;) Den Patch habe ich ja auch in die HTMLiveCode.js eingebaut.