CODA – Des (Web)Programmierers Werkzeug am Mac

Kategorien: Arbeit und Büro, Empfehlungen

Wie kam ich zu Coda?

Panic CODA

Ich habe früher eigentlich ausschließlich auf Windows gearbeitet. Warum? Ganz einfach: Ich hatte nie das Geld und schon gar keinen Grund mit einem Mac zu arbeiten; und Unix? Nein, so viel Nerd bin ich dann doch nicht. Und wer auch immer behauptet, mittlerweile sei Unix so einfach geworden, wie Windows, der soll mal bitte in einen großen ~~Discounter~~ technischen Vollsortimenter gehen und mir sagen, wie viele Geräte von Windows, OS X und eben einem der vielen Unix-Klone getrieben werden. Seit einigen Jahren nun hat sich Apple ja vom Underdog über eine Designerdroge hin zum Massenanbieter entwickelt. Gratulation an dieser Stelle an Apple, Beileid jedoch an die Mac-User. Wieso? Das erkläre ich mal in einem anderen Post. Soviel sei gesagt: Ich finde jedes System für sich hat seine Vor- und Nachteile. Windows, OS X und sicher auch Unix sind alle zusammen gut.

Mit “modernen Medien” – das Wort “modern” trifft wohl heute nicht mehr zu – habe ich mich bereits seit 1996 beschäftigt. Ich war damals schnuckelige 14 Jahre und hatte meinen ersten Pentium am Start. Relativ schnell kam ich auf das Thema “Internet” und die damit verbundene MarkUp-Sprache “HTML”. Damals habe ich meinen ersten Gehversuche im Notepad von Windows 95 gemacht. Super sage ich euch. Relativ schnell aber war das sehr umständlich und so habe ich nach etwas Recherche den HTML-Editor Phase 5 von Uli Meybohm gefunden. Dieses Tool sollte mit seinen Funktionen fortan die Messlatte für andere Tools werden.

Im Jahre 2009 entschloss ich mich, mit einem sehr guten Freund eine kleine Agentur zu gründen. Tobias aber war schon vor seiner Geburt unabänderlich mit der Obstmarke verbunden. (Wenn ich genauer darüber nachdenke, wundere ich mich, dass er sich nicht ein Stück aus dem Kopf gebissen hat… )

Da ich in meinem Agenturalltag bereits täglich mit OS X gearbeitet hatte, war mir das System also weitgehend vertraut und so hatte sich dann im März 2010 der Entschluss gefestigt, meinen ersten eigenen Apfel für die Produktion zu kaufen. MacBook Pro – willkommen daheim! Mit diesem Wechsel wurde aber auch die Notwendigkeit gegenwärtig, den guten alten, mittlerweile auch in die Jahre gekommenen HTML Editor Phase 5 zu ersetzen.

Ich habe wirklich viel getestet und am Ende blieb: Coda – ein Texteditor aus dem Hause “Panic” mit vielen nützlichen Funktionen.

Was ist Coda?

Coda ist in erster Linie ein Texteditor für Webworker. Man kann damit Texte schreiben und als Dateien speichern. Dabei kann man – mittlerweile natürlich – das Textencoding der zu speichernden Dateien selbst festlegen. Phase 5 konnte leider keine UTF-8 Dateien schreiben, weswegen der Editor über kurz oder lang sowieso ersetzt hätte werden müssen.

Coda besitzt auch ein Syntax-Highlighting für diversere Programmier- und MarkUp-Sprachen. Mit dabei AS, ASP, Ruby, Phyton und natürlich auch PHP. Dazu kommen Javascript, HTML und und XML.

Zu diesen Formaten ist es außerdem möglich, weitere Highlighter zu installieren. So habe ich noch zwei weitere in meinem Coda: TypoScript und WordPress.

Welche Funktionen besitzt Coda?

Code Navigator

Aber was kann Coda wirklich? Codas Benutzeroberfläche bietet neben dem Editor einen Browser, der auf das lokale Dateisystem zugreift. Wahlweise kann dieses Fenster auch auf den integrierten FTP-Browser umgeschaltet werden. Hier wird es spannend, wenn man einmal Dateien direkt auf dem Server bearbeiten möchte. Zudem bietet Coda einen sogenannte “Code Navigator“. Dieser Code Navigator analysiert regelmäßig den Inhalt der geöffneten Datei und zeigt mit unterschiedlichen Icons Funktionen, Klassen, Kommentare und Überschriften an. Besonders die “Bookmark”-Funktion über die Kommentare innerhalb einer Datei ist sehr sinnvoll, damit man schnell zu bestimmten Abschnitten innerhalb des Dokuments kommt. Weitere Tips zur Kommentarfunktion im Code-Navigator gibt Panic im Developers Blog.

Da Coda mit SubEthaEdit verwand ist, gibt es für Bonjour-Nutzer im gleichen Netzwerk eine schöne Möglichkeit, gleichzeitig an einem Dokument zu arbeiten – und sei es nur, dass man dem Mitarbeitenden etwas zeigen möchte, ohne Code kopieren zu müssen.

Auch die “Suchen und Ersetzen” Funktion in Coda ist sehr mächtig. So kann man in Coda per Benutzeroberfläche nach variablen Inhalten suchen, in dem man sogenannte “Wildcards” in die Suchanfrage hineinklickt. Besonder schön ist, dass man die Wildcards im Ersetzen-Muster wieder einfügen kann. Damit lassen sich kleine RegEx-Suchen bereits im Editor lösen.

Suchen und Ersetzen mit Wildcards

Über die eingebaute Preview kann man HTML-Dokumente während der Eingabe bereits in einer Safari-Instanz ansehen und so ähnlich einem WYSIWYG-Editor arbeiten.

Wie lässt sich Coda im Arbeitsalltag sinnvoll einsetzen?

Richtig spannend aber wird Coda erst mit den sogenannten “Sites”.

Sites Übersicht in CODA

Je nach Projekt kann man in Coda kleine Projekte anlegen, in denen die wichtigsten Informationen bereits hinterlegt sind: URL der Seite im Web, Pfad zur DocRoot, lokale Preview-URL (sofern ein lokaler Entwicklungsserver genutzt wird) inkl. DocRoot natürlich. In Verbindung mit einem FTP-Zugang kann man nun bereits ein nettes Feature nutzen: Publishing. Bei diesem Vorgang wird das lokale Verzeichnis mit dem Verzeichnis auf dem FTP-Server auf Knopfdruck synchron gehalten. Der Vorteil: Man arbeitet offline an einem Projekt und lädt später nach Abschluss der Arbeiten per Knopfdruck aus diversen Verzeichnissen die aktualisierten Versionen der Dateien auf den Server.

Obendrein kann man einer Site auch einen Telnet-Zugang hinterlegen und das in Coda eingebaute Terminal direkt nutzen.
Viele Agenturen arbeiten aber mit einer richtigen Versionskontrolle wie SVN. Hier kann man dann die letzte Trumph-Karte aus dem Bereich “Sites”-Nutzung auf den Tisch werfen: den integrierten SVN-Client, mit dem man die lokal gemachten Änderungen direkt in das Repository übertragen kann.

Ein kleines Leckerli der Sites-Funktion: Hat man die URL der Seite eingetragen, welche zu diesem Projekt gehört, erzeugt Coda automatisch eine kleine Vorschaugrafik und zeigt diese in der “Sites”-Übersicht an.

Na gut. Zwei hab ich noch. Coda vereint die Funktionen in der oberen Toolbar. Dort gibt es jeweils einen Button für “Sites”, “Edit”, “Preview”, “CSS”, “Terminal” und “Books”. Oha – genau, da waren die beiden.

CODA - Toolbar

Noch nicht genannt hatte ich den CSS-Editor und den “Books”-Bereich. Der CSS-Editor kann wahlweise im WYSIWYG Modus betrieben werden. Dabei sieht man dann in einer Spalte übersichtlich alle vorhandenen Definitionen mit einer kleinen Vorschau und kann diese mit einer sauber gegliederten und durchdachten Benutzeroberfläche anpassen. Wer es lieber rudimentär mag, der kann die Benutzeroberfläche durch Eingabefelder ersetzen. Vorteil gegenüber der Bearbeitung im reinen Texteditor ist die Übersicht über alle vorhanden CSS-Befehle und deren schöne Gliederung.

Zuletzt bleibt noch der von mir etwas stiefmütterlich behandelte Books-Bereich. Hier kann man sich diverse Nachschlagewerke zusammenstellen, die man im täglichen Arbeitsleben so braucht. Neben einer HTML-, CSS-, und JavaScript Referenz, welche im Auslieferungszustand schon vorhanden sind, habe ich mir hier noch eine PHP-Referenz dazu gepackt.

Und wem all diese Funktionen noch nicht reichen: Coda hat eine ausgereifte PlugIn-Schnittstelle, über welche man diverse PlugIns von Drittherstellern andocken und somit den Funktionsumfang von Coda weiter verbessern kann.

Mit welcher Software kann Coda interagieren?

Nutzer der Panic-Software “Transmit” haben den Vorteil, dass die dort angelegten Favoriten in Coda importiert werden können. Außerdem ganz nützlich für Besitzer einer Changes-Lizenz: Changes kann ebenfalls über die PlugIn-Schnittstelle mit Coda verbunden werden.

Welche Funktionen fehlen Coda?

Es gibt aber trotz allem ein paar Funktionen, die Coda noch nicht beherrscht. Oft von mir genutzt gibt es da das “Prefix’ing” und “Suffix’ing” von Zeilen. Was bedeutet, dass ich bei der von mir markierten Anzahl an Zeilen automatisch vorne und/oder hinten einen String hinzufügen lassen kann. Ein kleiner Workaround ist hier das “Blockediting”, bei dem ich mehrere Zeilen mit Alt+Markieren auswähle und dann die Eingaben am Cursor auf alle Zeilen übernommen werden. Damit lassen sich jedoch nur am Anfang der Zeilen leicht Änderungen vornehmen (Änderungen daher, weil auch das Löschen über mehrere Zeilen hinweg geht, was wiederum sehr praktisch ist). Jedoch ein <br /> oder einen beliebigen anderen String an eine Zeile anhängen, geht mit der Blockedit-Methode nur sehr unbefriedigend, da bei unterschiedlicher Zeilenlänge der Text dann nicht am Ende der Zeile sonder an der Cursor-Position hinzugefügt wird.

Auch die Integration mit Transmit ist nur mäßig sinnvoll umgesetzt. So ist es zwar möglich, Favoriten von Transmit zu importieren, das ist jedoch ein einmaliger und unidirektionaler Vorgang. Ich kann also meine Sites nicht entweder in Transmit oder Coda pflegen sondern muss immer beide Tools manuell auf dem Laufenden halten. Das soll aber in zukünftigen Versionen (#2?) verbessert werden. Hoffentlich.

Ein anderes Feature, das momentan noch fehlt aber wohl bereits in Umsetzung ist, ist das sogenannte Codefolding. Das macht nichts anderes, als zwischen bestimmten Zeichen wie zum Beispiel { geschweiften Klammern } bei einem Klick auf das heiße “Minus”-Icon den Text zwischen diesen Zeichen auszublenden. Damit kann man ganze Funktionen beispielsweise mit einem Klick auf- oder zuklappen. Wie intelligent diese Funktion sein wird, kann ich jetzt leider noch nicht sagen, aber vielleicht werden auch alternative Syntax wie if(): mit endif; unterstützt. Auch hier heißt es: Das Beste hoffen!