Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Ein Webeditor für Webworker?

Adobe Brackets

Ein Webeditor für Webworker?

Mit Brackets geht Adobe neue Wege in Sachen Quellcodeeditoren fürs Web. Die Live Preview macht es unnötig, die Seite im Browser ständig neu zu laden. Per Quick Edit lässt sich CSS direkt in der HTML-Datei bearbeiten. Die neuen Ansätze könnten die tägliche Arbeit eines jeden Webworkers erleichtern.

Es ist nicht so, dass wir als Webworker nicht jetzt schon die Qual der Wahl hätten, wenn es um Editoren geht. Mit Brackets wirft Adobe eine weitere Anwendung in den Ring. Anders als die bekannten Editoren, mit denen es auch möglich ist, HTML, CSS und Javascript zu schreiben, sieht Adobe in Brackets einen Editor, der nur für das Web gemacht ist, sich speziellen Problemen bei der Entwicklung im Web-Umfeld annimmt und das Leben der Webworker einfacher machen soll.

Brackets selbst ist ausschließlich in HTML, CSS und Javascript geschrieben. Das macht es zum einen wirklich plattformunabhängig. Zum anderen kann jeder, der diese grundlegenden Webtechnologien beherrscht, Brackets erweitern und den eigenen Vorstellungen anpassen.

Der Startbildschirm von Adobe Brackets
Der Startbildschirm von Adobe Brackets

Features

Live Preview

Jeder Webworker kennt das: HTML und CSS im Editor schreiben und anschließend im Browser laden, um zu sehen, was dieser daraus macht. Dann dem Ganzen mit Firebug oder dem Web Inspector den letzten Schliff geben und abschließend werden die Änderungen händisch zurück in die eigentlichen Dateien transferiert.

Die Live Preview von Adobe Brackets verfolgt hier einen völlig anderen Ansatz, der Editor wird quasi zum Web Inspector. Änderungen am CSS schlagen sich direkt in (derzeit nur) Chrome nieder, das Markup wird beim Speichern aktualisiert. Damit ist nach dem Finetuning quasi alles fertig, die Änderungen sind ja direkt an Ort und Stelle erfolgt und müssen nur noch gespeichert werden.
Seit Version 16 ist es auch möglich, dieses Feature mit einer URL auf einem Server zu nutzen, mit dem drauffolgenden Release 17 hat Adobe darüber hinaus das Highlighting der von einer Regel betroffenen Teile im Browser eingeführt, wie man es bereits aus dem Web Inspector und Firebug kennt.

Quick Edit

Auch für das Finden der passenden Stelle im CSS geht Brackets neue Wege. Anstatt mit den verschiedenen Dateien zu hantieren, die bestenfalls in Tabs oder Split Views parallel offen sind, werden mit Quick Edit (Cmd+E unter OS X, Ctrl+E unter Windows) direkt die entsprechenden Definitionen in der CSS-Datei angezeigt und können auch sofort bearbeitet werden (inkl. Live Preview).
Ist ein Tag oder eine Klasse in mehreren Dateien definiert werden alle Stellen angezeigt und die passende Datei für die Änderung kann ausgewählt werden.

Per Quick Edit lässt sich CSS direkt in der HTML-Datei bearbeiten
Per Quick Edit lässt sich CSS direkt in der HTML-Datei bearbeiten

Ab der Version 17 hat Quick Edit jetzt auch eine Funktion in CSS-Dateien: Platziert man den Cursor auf einem Farbwert und ruft Quick Edit auf, kann man über einen Color Picker den Farbwert wählen, inklusive evtl. gewünschter Transparenz.

Seit Version 17 mit dabei: der Color Picker
Seit Version 17 mit dabei: der Color Picker

Komfortfeatures

Trotz der sehr frühen Entwicklungsphase von Brackets (die aktuelle Version ist Brackets-Sprint-17) bietet es neben den beiden oben erwähnten neuen Funktionen zahlreiche Komfortfeatures, ohne die heute ein Editor nur noch schwer vorstellbar wäre:

  • Syntax Highlighting
  • Code Completion (inkl. kontextsensitiver, sinnvoller Vorschläge für Attributwerte)
  • Direkte Anzeige von Fehlern im Markup (nicht geschlossene Tags, falsche Verschachtelung)
  • Automatisches Code-Linting von Javascript mit Hilfe von JSLint

Darüber hinaus sind rund um Brackets in den letzten Wochen bereits zahlreiche Erweiterungen entstanden, mit denen jeder Webworker den Editor noch weiter den eigenen Vorstellungen anpassen kann. Eine Liste findet ihr im Github-Repository von Brackets.

  • String Convert bietet zahlreiche Konvertierungen von Strings an, etwa zwischen Groß- und Kleinschreibung, aber auch für das Dekodieren von HTML-Entities.
  • Show Whitespace zeigt Leerzeichen und Tabs an.
  • CSS Lint bringt, analog zum Javascript-Linting, eine auf CSSLint basierende Implementation für CSS in Brackets.

Open Source

Brackets ist unter einer modifizierten MIT-Lizenz veröffentlicht. Der Code steht auf Github zum Download bereit und jeder ist aufgerufen mitzuhelfen. Pull-Requests werden einmal täglich bearbeitet und externe Contributions genießen Priorität.

Nachteil

Brackets ist ein Javascript-Editor und fühlt sich daher auf keiner Plattform wirklich nativ an. Die Menüs sind Teil des eigentlichen Editorfensters und entsprechen daher weder in Aussehen, Funktion noch in der Position auf dem Bildschirm dem, was einem vom OS bekannt vorkommt.

Downloads

Ausführbare Dateien für Windows und OS X gibt es auf Github. Darüber hinaus basiert Edge Code auf Brackets und kann mit einem kostenlosen Creative-Cloud-Zugang geladen werden.

Fazit

Derzeit ist Brackets nicht mehr als eine Preview neuer Ansätze, die unsere Arbeit vereinfachen und schneller machen können. Der Editor wurde von der Community sehr gut angenommen und könnte sich für derzeit etablierte Code-Editoren mit der Zeit zu einer ernsthaften Konkurrenz entwickeln. Auch sind die neuen Funktionen Live Preview und Quick Edit eine große Hilfe in der täglichen Arbeit, die sehr schnell zu unverzichtbaren Helferlein werden. Nur ein zweiter Monitor sollte für die Live Preview auf jeden Fall vorhanden sein.

Dieser Text wurde natürlich mit Brackets geschrieben

Kommentare

webSimon
am 02.12.2012 - 10:24

An und für sich eine gute Sache. Das Problem ist dabei wie immer die Performance: Es wird noch eine Weile dauern, bis sich die Web-Geschichten wirklich schnell anfühlen. Für mich persönlich kommt es sowieso nicht in Frage, da ich die Unterstützung für weitere Programmiersprachen brauche und mich gerade an Vim herantaste.

Permanenter Link

edik
am 02.12.2012 - 13:16

Kurze Anmerkung: Ist Brackets wirklich plattformunabhängig, wenn es nur unter Chrome läuft? :D

Permanenter Link
Matthias Slovig

Matthias Slovig (Autor)
am 02.12.2012 - 15:09

Das Feature Live Preview geht derzeit nur in Zusammenspiel mit Chrome. Brackets selbst benötigt Chrome nicht.

Permanenter Link

Christian
am 02.12.2012 - 22:22

Danke für den Beitrag.

Das Thema "Live Preview" hört sich sehr spannend an, mal sehen wie sich der Editor weiter entwickelt. Ein Test ist es auf jeden Fall wert.

Im Moment bin ich allerdings immer noch ein Fan von Coda2 (MacOS)

Permanenter Link

Die Kommentare sind geschlossen.