WeBlog

Interessante Themen rund um eCommerce, Marketing und mehr

Prototyping mit Adobe Brackets

Wer HTML und CSS schreibt kennt wahrscheinlich das Problem, dass die F5-Taste leichte Gebrauchsspuren aufweist. Man hat sich schon fast damit abgefunden. Seit geraumer Zeit teste ich jedoch einen Editor, der nicht nur diesen Umstand verbessert, sondern auch dem Begriff Rapid Development gerecht wird: Brackets.

Ich bin, wie viele andere Entwickler auch, immer ausgesprochen skeptisch wenn es um die Änderung meiner Work Enviroment geht. Auch mit Brackets war dies nicht anders. Erst als ich das erste Mal produktiv damit arbeitete und mich mit dem Editor beschäftigte, schoss meine Euphorie durch die Decke.

Live HTML development

Brackets besitzt die Möglichkeit Änderungen direkt und unmittelbar an den Browser zu pushen. Adobe nennt dieses Feature Live HTML development. Selbst externer Stylesheet wird in Echtzeit angezeigt und Javascript Dank Theseus direkt debuggt. Die Einsparung der Arbeitszeit ist beträchtlich, da sämtliche Neuaufrufe im Browser entfallen. Leider funktioniert diese Methode derzeit lediglich mit Googles Chrome. Aber da Brackets ein noch sehr junger Editor ist, werden mit Sicherheit bald weitere Browser folgen.

InlineCSS

Brackets

InlineCSS bedeutet in diesem Falle nicht, dass die Styleangaben direkt in das HTML geschrieben werden. Viel mehr ist es mit Brackets möglich die CSS-Angaben direkt aus dem HTML aufzurufen… und zwar in Abhängigkeit vom selektierten Element. In einem kleinen ausklappbaren Fenster werden alle Angaben der Klasse, der ID oder des Elements allgemein angezeigt. Und das mit sämtlicher Vererbung. Neue Regeln können ebenfalls direkt angelegt werden. Das Öffnen zahlreicher CSS-Dateien gehört damit der Vergangenheit an.

Erweiterungen

Der Editor kann zusätzlich noch um zahlreiche Plugins erweitert werden. Unter der einfach zu installierenden offiziellen Liste befinden sich bereits Klassiker wie Beautifier, Emmetts oder Gitanbindung (Liste der Erweiterungen). Wer dennoch nicht fündig wird, kann auch eigene Plugins schreiben. Das ist einfacher als man denkt, da Brackets selbst vollkommen aus HTML und CSS aufgebaut ist.

Fazit und Ausblick

Da Brackets selbst noch recht jung ist, muss man noch mit einigen Kinderkrankheiten Leben. Dennoch hat mich das Konzept bereits so überzeugt, dass ich ihn zumindestens für HTML-Prototyping verwenden werde. Und der Ausblick sieht mehr als rosig aus: Innerhalb kürzester Zeit hast sich eine Community um den Editor entwickelt, die kräftig Plugins schreibt, Feedback gibt und den Editor weiterentwickelt. Auch Adobe ist nicht untätigt, wie dieses Video beweist, indem PSD’s von Photoshop direkt in Brackets geladen und interpretiert werden.

Schreibe einen Kommentar