Blog

ICEcoder

  • Beitrags-Autor:
  • Beitrags-Kategorie:Software & Co.
  • Lesedauer:9 min Lesezeit

*{coder} – ein freier Online-HTML-Editor

Text-basierte Dateien haben den großen Vorteil, dass sie mit jedem Text-Editor (wie Notepad, vim aber auch MS Word) bearbeitet werden können. In den wenigsten Füllen ist ein solches Werkzeug ausreichend. Komfort-Funktionen wie Syntax-Highlighting, Code Snippets, Autocomplete oder Syntax-Prüfung nehmen einem Entwickler viel Arbeit ab und erlauben die Konzentration auf das Wesentliche. Es ist somit nicht wirklich verwunderlich, dass Profis spezielle Programme verwenden oder bestimmte Präferenzen haben. Solche Werkzeuge können recht teuer sein. Es gibt sie aber auch – Open Source seit Dank – gratis.

Live und online

Kein Webentwickler würde in einem lebenden System arbeiten, doch es gibt Szenarien, die einen Online-Eingriff rechtfertigen. Dies kann die Entwicklung von klickbaren Design-Vorschlägen sein, die Fehlersuche im Staging-Bereich (auf einem vergleichbar ausgestatteten Server), die Entwicklung von sonstigen Prototypen oder Anpassungen vor der Freigabe der Seite. Bei offline-Editoren – auf dem Rechner des Entwicklers heimisch – muss jede Dateiänderung automatisch auf den Server gespiegelt werden. Ist der Laptop gerade nicht verfügbar, wird die Handhabung schwierig. An dieser Stelle knüpft der Online-Editor ICEcoder von Matt Pass an. Es ist eine Webanwendung, die einige Open-Source-Bibliotheken verwendet und zu einem Projektmanagement-Tool mit einem leistungsstarken Editor verbindet. Es ist nicht so minimalistisch, wie Scripted und lässt sich wesentlich besser mit der Maus bedienen. Im Gegensatz zu XOSIDE wird es weiter entwickelt und ist am ehesten mit Brackets vergleichbar – wenn auch nicht der Zahl der Funktionen nach.

Die Voraussetzungen

Auf der Benutzerseite wird ein moderner Browser mit Javascript-Unterstützung erwartet. Es muss nicht der neueste Chrome sein, „IE >= 9“ wäre hingegen angebracht. Theoretisch ist auch die Verwendung auf dem Tablet möglich, gestaltet sich in der Praxis jedoch meist als sehr umständlich und träge.

Auf der Serverseite wird PHP 5.3+ erwartet. Wichtig sind auch die Zugriffsrechte, die – weil vom Apache her gelesen und geschrieben wird – beim Systembenutzer desselben Webservers liegen müssen: die zu bearbeitenden Ordner und Dateien sollten vom Apache als Benutzer oder von seiner Gruppe geschrieben werden können (was aus Sicherheitsgründen in einem Live-System nie der Fall sein sollte). (Weitere frei zu gebenden Ordner befinden sich im Installationsverzeichnis von ICEcoder selbst: ‚backups‘, ‚lib‘ und ‚test‘.) Notfalls sollte man an diese zwei Zeilen denken:

chmod g+rwX DateiOderVerzeichnis
chgrp www-data DateiOderVerzeichnis

… wobei www-data der Name der Apache-Gruppe aus APACHE_RUN_GROUP ist. Damit ändert der Besitzer oder der Administrator unter Unixen die Berechtigungen.

Die Installation

Die Routine beschränkt sich auf das Entpacken des heruntergeladenen ZIP-Archivs oder das Clonen des Repos per

git clone https://github.com/mattpass/ICEcoder.git

in ein Verzeichnis Ihrer Wahl. Es sollte kein Unterverzeichnis vom DocumentRoot der zu bearbeitenden Seite sein. Ein passender Eintrag in der Konfiguration von Apache macht dieses Werkzeug für alle Domänen verfügbar. Glückliche Debian/Ubuntu-Admins legen zu diesem Zweck diese Einstellungsdatei unter /etc/apache2/conf.d/ICEcoder.conf ab:

    Alias /_coder /Pfad/zu/ICEcoder/
    <Directory /Pfad/zu/ICEcoder/>
            AuthType Basic
            AuthName "Login zum Editor"
            AuthUserFile /Pfad/zur/Passwortdatei
            Require valid-user
    </Directory>

für die Nutzer aus einer .htpasswd-Datei oder:

    Alias /_coder /Pfad/zu/ICEcoder/
    <Directory /Pfad/zu/ICEcoder/>
            AuthType Basic
            AuthName "Login zum Editor"
            AuthPAM_Enabled On
            AuthPAM_FallThrough Off
            AuthBasicAuthoritative Off
            AuthUserFile /dev/null
            Require valid-user
    </Directory>

im Falle von Authentifizierung der echten Unix-User.

Damit wird der ICEcoder (nach einem Neustart des Webservers) unter dem absoluten Pfad /_coder/ erreichbar. Es ist doppelt vor Missbrauch geschätzt:

  • Durch Apaches Basic-Authentfizierung und
  • Durch ein Passwort, dass man beim ersten Start des ICEcoders festlegen soll. (Zum Deaktivieren – s.u.)

(Natürlich sind auch andere Authentifizierungsmodi möglich. Die Passwort-basierende Authentifizierung sollte immer über eine sichere Verbindung laufen.) Wer keinen Mißbrauch durch Bugs in PHP oder ICEcoder befürchtet, setzt ein schlichtes

Alias /_coder /Pfad/zu/ICEcoder/

ein. Denn auch die IP-basierte Zugangsbeschränkungen lassen sich in der Software selbst regeln. Man kann auch ohne die Authentifizierung im ICEcoder arbeiten oder diese für den Multiuserbetrieb umschalten. Dazu Editiert man die selbsterklärende Datei

lib/config___settings.php

im Pfad des ICEcoders.

Bin ich schon drin?

Ist man einmal im Reich des ICEcoders angekommen, sieht man links die Ordnerstruktur des DocumentRoot entsprechender Domäne, rechts den Editor mit Platz für viele Reiter. Bevor man mit den Ordnern und Dateien hantiert, lohnt ein Blick in die Einstellungen. Diese befinden sich – recht unscheinbar – oben rechts, zwischen dem Fragezeichen der Hilfe und dem Vollbild-Icon. Das kleine graue Zahnrad öffnet ein modales Dialog-Fenster mit Informationen zur Installation und einigen Einstellungen. Darunter sind die Vorgaben für das Aussehen des Editors („theme“), Zeilenumbruch („line wrapping“), Einrückung („indent type“ und „indent size“) sowie die Schriftgrüße. Unter „assisting“ wählt man die Einstellungen für die kleinen Helfer wie: Sichtbarkeit der Tabulatoren oder Tastenkombination für Auto-Complete. Im „security“-Bereich lässt sich das Passwort ändern, IP-Zugriffssperre einrichten oder einzelne Verzeichnisse vom Zugriff herausnehmen.

Die Verzeichnisstruktur

Im linken Bereich findet man eine schöne hierarchische Auflistung aller Dateien und Ordner. Interessant ist die Funktionalität des Explorers: Das Umbenennen, das Löschen oder das öffnen ist per Icon oberhalb aber auch per Kontextmenü möglich, welches sich per Klick mit der rechten Maustaste auf eine Datei / einen Ordner öffnet. Ein Upload oder Download funktioniert nur per Menü. Wer sich voll und ganz auf das Coden konzentrieren will, kann den Dateiexplorer-Bereich ausblenden lassen, indem er auf das Vorhängeschloss klickt. (Eine passende Voreinstellung locked nav befindet sich in den Einstellungen.)

Editor & more

Der Editor bietet viele interessante Funktionen eines Profi-Werkzeugs. Da wären:

  • die Zeilennummerierung
  • das Syntax-Highlighting (Stil in den Einstellungen wählbar)
  • das Auf- und Zuklappen syntaktischer Einheiten (für DOM-Äste, if’s und Schleifen)
  • die Syntax-Prüfung (Vorsicht Falle! In HTML-Dateien nur HTML-Prüfung, in JS-Dateien nur Javascript, in eingen Browsern erst nach dem öffnen der Datei bzw. nach dem De- und erneuten Aktivieren von „Code assist“ per Checkbox oberhalb des Editors)
  • die Suche und das Ersetzen in allen, gerade offenen oder ausgewählten Dateien
  • die Autovervollständigung per STRG+Leerzeichen (eine Liste der zur Verfügung stehenden Ergänzungsmöglichkeiten wird im Zweifelsfall zur Auswahl angezeigt)

Einige Tastenkombinationen machen das Leben leichter. Die ESC-Taste wird z.B. ihrem Namen gerecht: sie kommentiert die ausgewählte Stelle bzw. die Zeile, in der man sich befindet passend aus. STRG+ALT+1 umhüllt den ausgewählten Text mit <h1> , STRG+ALT+i in ein <i>. Alle Kombinationen werden in der Hilfe (das weiße Fragezeichen im grauen Kreis neben dem Icon der Einstellungen) erklärt.

Darf es ein wenig mehr sein?

Richtig Spaß macht es erst, wenn einem viel Arbeit abgenommen wird. Das erreicht ICEcoder, indem er einige Plugins zur Verfügung stellt. Am (per Voreinstellung) linken Rand taucht beim Drüberfahren ein schwarzer vertikaler Balken auf. Das „+/-„-Zeichen öffnet das modale Dialogfenster mit einer noch recht überschaubaren Liste von Erweiterungen auf.

  • Adminer ist ein leichtgewichtiger phpMyAdmin-Ersatz
  • „CSS Beatify“ macht per Klick auf das Plugin-Icon in der Plugin-Leiste aus einem CSS-Spaghetti im aktuell geöffneten CSS-Dokument einen ordentlichen Satz von Regeln
  • Emmet – das ehemalige „Zen Coding“ dürfte jedem Webentwickler hinreichend bekannt sein. Es wandelt CSS-Path-ähnliche Kürzel per STRG+E in ein schön strukturiertes HTML. „lorem41“ wird dabei zum 41 Worte langen „Lorem ipsum“ Füll-Text.
  • der Farbselektor springt in CSS-Dateien dem Benutzer gerne zur Seite, in dem es kontextsensitiv die Farbe anzeigt und ein Farbauswahldialog bereitstellt
  • das „Terminal“ bietet eine TTY-Emulation an, die für kleine Aufgaben am Dateisystem ausreichend ist. (öffnet ein neues Fenster und startet im Pfad des Plugins im ICEcoder, statt im DocumentRoot.)
  • „Zip It!“ Zipt auf Wunsch einzelne (im Explorer-Bereich ausgewählte) Ordner und legt sie in den „backup“-Ordner der ICEcoder-Installation ab, wo auch die halbständlich erstellten Vollbackups des DocRoots ihren Platz finden.
  • „SVG Edit“ wirkt noch etwas unausgereift bzw. scheint Browser-abhängig zu reagieren und kann deshalb nicht ruhigen Gewissens empfohlen werden.
  • „Window keys“ hat nur für ICEcoder-Entwickler eine besondere Bedeutung
  • ICErepo erlaubt den Abgleich mit einem Github-Rpositorium

Wie kann ich mich Einbringen?

Open Source ist ein Geben und ein Nehmen. Das zunehmend inflationär verwendete englische Wort bei solchen Programmen lautet „donate“. Über ein Freibier würde sich Matt sicher freuen, doch auch Tests und Bugfixes nimmt er gerne auf Github entgegen. Für alle Entwickler stellt ICEcoder ein JavaScript-API im Browser und die PHP-Unterstützung auf dem Server bereit. Dem Forken steht also nichts im Wege!

Dieser Artikel ist lizenziert unter: CC-BY-SA 3.0

Schlagwörter: , , , , ,