Loading...
<< zurück
12.03.2014#

Software-Tipp, Webdesign-Tipp

Neuer Open Source Code-Editor von Adobe – Ein Test hat sich schon gelohnt!

Adobe_brackets_blogimg

Ich arbeite zur Zeit an einem neuen Webprojekt und dabei zum ersten mal mit Brackets, einem neuen Open Source Editor für Webentwickler aus dem Hause Adobe.
Er hält neben der Tatsache, dass er selbst komplett in HTML, CSS und Javascript geschrieben ist, einige interessante Funktionen bereit und ist dabei komplett durch zahlreiche Plugins erweiterbar.

Was gibt es besseres, als einen Code-Editor für Webentwickler, der selbst von Webentwicklern als Webprojekt entwickelt wurde..oder so ähnlich mag wohl die Intention bei Adobe gewesen sein.

Der schlichte Editor ist dabei nicht nur schlank gehalten, er bietet vor allem einige Funktionen, die bei der Webentwicklung überaus praktisch sind. Eine davon ist die Live-Vorschau, eine andere, die Möglichkeit, direkt im HTML-Code CSS und Javascript zu bearbeiten (Quick Edit).

Theoretisch kann Brackets als eigene Webanwendung überall laufen, also z. B. auch direkt im Browser. Zunächst gibt es aber wohl nur eine Desktopanwendung. Zukünftig kann man also noch gespannt sein.

Überzeugt hat mich vor allem das absolute schlichte Erscheinungsbild und die damit einhergehende einfache und überaus praktische Bedienung, die durch zahlreiche Erweiterungen noch ausgebaut werden kann. Man findet weder Unmengen an Menüs oder Paletten, noch sonstige Infospalten oder Werkzeuge. Alle Tools zur Arbeitserleichterung sind so eingebunden, dass man an der richtigen Stelle direkt im Code, durch einfache Tastenkürzel darauf zugreifen und seine Arbeit wesentlich erleichtern kann.

Quick Edit

Adobe_brackets_quickedit   Adobe_brackets_colorpicker

Dank Quick Edit kann man durch die Tastenkombination Cmd + e bzw. Strg + e, direkt unter dem gerade bearbeiteten Code-Element, mithilfe von Inline-Frames den entsprechenden CSS-Style bearbeiten und verändern. Alle für diese Element relevanten Stiles werden automatisch angezeigt. Man muss nicht erst zur CSS-Datei wechseln und spart sich so ein lästiges hin und her springen. Das gilt auch für Javascript-Dateien. Schön ist auch der direkte Farbwähler an jeder Stelle, an der Farbwerte stehen.

Anmerk.: Leider, scheint Quick Edit im Moment noch nicht mit LESS (einer dynamischen Stylesheet Sprache) zu funktionieren. Brackets bietet zwar einen LESS-Compiler an und das funktioniert auch wunderbar! Aber da man in dem Fall nicht mehr mit der original CSS-Datei arbeitet, ist das Quick Edit hinfällig, sofern es nur diese bearbeiten lässt, wenn man Cmd + e aufruft.

Live-Vorschau

Durch eine Direktanbindung an den Browser kann man die Änderungen in Echtzeit mitverfolgen, sogar ohne das Dokument zu speichern. Zur Zeit ist das nur mit Chrome möglich. Hin und wieder hakt es noch ein wenig, aber im Wesentlichen funktioniert es. Der Browser muss bei mir allerdings immer noch refreshed werden, um die Änderungen sichtbar zu machen. Einen kleinen Button dazu gibt es als Plugin für Brackets, so dass man direkt im Programm den Refresh beim Browserfenster auslösen kann. Wenn man mit zwei Monitoren arbeitet, ist das eine praktische Erleichterung.

Tool-Tipp: Emmet

Auch dieses Toolkit steht für Brackets als Erweiterung zur Verfügung. Ich empfehle jedem der Code schreibt: Emmet, ein komfortables Toolkit für Webentwickler und Code-Schreiber. Wenn man die Syntax erst einmal beherrscht, kann man mit weniger Zeichen in kürzester Zeit, jede Menge mehr an Code produzieren.

Fazit

Klar kann Brackets noch nicht mit etablierten Editoren mithalten. Dafür ist er auch noch am Anfang seiner Entwicklung. Aber ich arbeite schon jetzt hervorragend mit Brackets und denke, der Editor hat mehr als gute Aussichten in Zukunft ein hervorragendes Standard-Tool für Webentwickler zu werden. Für kleine bis mittlere Projekte ist er, dank seiner Unterstützung eines schnellen Worklflows, sehr gut geeignet. Ich vermisse Dreamweaver eigentlich nicht und habe auch mit anderen Editoren selten die Erfahrung gemacht, so schnell überzeugt zu sein.