Webwork-Tools - Dem Webworker seine Werkzeugkiste

WeBuilder: leistungsfähiger XHTML- und CSS-Editor

Der WeBuilder * ist der Code-Editor, der mir schon seit fast fünf Jahren treue Dienste bei der Bearbeitung von XHTML-, CSS-, Javascript-, XML- und .htaccess-Dateien leistet. Bevor ich auf diesen Editor gestoßen bin, habe ich mehrere Wochen intensiv gesucht, getestet und recherchiert. Deswegen war ich sehr froh, als ich diesen Editor seinerzeit gefunden habe.

Auf der Website des Autors * gibt es neben dem WeBuilder auch die Geschwisterprodukte PHP Rapid *, HTMLPad * und CSS Rapid * zu kaufen. Die Produkte bauen aufeinander auf, wobei CSS Rapid das vom Funktionsumfang her kleinste Produkt ist. Es folgt der HTMLPad, dann PHP Rapid und schließlich der WeBuilder.

Letzterer bietet das Maximum an Funktionen. Die Preise sind vergleichsweise günstig und bewegen sich je nach Produkt und nach Lizenz zwischen knapp 20 und knapp 50 Euro. Auf der Vergleichstabelle * kann man schnell erfahren, welches Programm was kann und somit welche Anwendung für einen geeignet ist.

Der WeBuilder bietet eine Reihe von sehr nützlichen Funktionen und ein paar davon werde ich im Folgenden näher erklären: weiterlesen…

Verwaltung von Code-Schnipsel

Wie viele Webworker auch, pflege ich die verschiedenen Code-Fragmente, die mit der Zeit so anfallen, in meinem HTML-Editor. Aber so ganz zufrieden bin ich mit der jetzigen Lösung mittlerweile nicht. Immer zwischendurch, wenn ich ein bisschen Zeit über habe, beschäftige ich mich mit dem Thema und begebe mich auf die Suche nach einer Lösung, die meinem Bauchgefühl besser passt.

Aber so ganz gestaltet sich die Suche nicht, denn schon alleine an diversen Online-Diensten gibt es eine ganze Menge. Der Artikel bei Smashing Magazine listet mehr als 45 Dienste auf. Und das sind nicht alle. Hier braucht man viel Zeit und Geduld um zu testen.

Snipplr habe ich kurz ausprobiert und an sich war ich recht zufrieden. Allerdings ist die Website mittlerweile sehr langsam und voller Werbung. Ich persönlich habe nichts gegen Werbung, aber dort ist es ein bisschen zu viel des Guten. Evtl. sollten sich die Betreiber vielleicht überlegen auch kostenpflichtige Accounts ohne Werbung anzubieten.

Guido Mühlwitz stellt in Verwaltung von Snippets – Code-Schnipsel Deluxe vier Desktop-Anwendungen vor, die die Code-Schnipsel verwalten. Allerdings hat mir keine der Anwendungen wirklich zugesagt.

Ich habe mir sogar überlegt auf einer Subdomain DokuWiki zu installieren und dort die anfallenden Code-Fragmente zu sammeln, zu kommentieren und zu verwalten. Das ich nicht der einzige und erste bin, der auf diese Idee gekommen ist zeigt Peter Kröner in seinem Code-Wiki.

Was ich denke, dass mir momentan am meisten zusagen würde, wäre ein Online-Dienst der sich entweder durch Werbeeinnahmen oder durch kostenpflichtige Zusätze finanziert, wo man die einzelnen Code-Fragmente als öffentlich oder privat markieren kann – hier fallen Desktop-Anwendungen schon mal raus – und wo man vergleichsweise einfach exportieren kann, zum Beispiel in einem gängigen Text-Format wie xml.

Was nutzt ihr denn um die Code-Schnipsel zu verwalten?

CSS Usage: welche CSS-Regeln kommen zum Einsatz?

Ich habe gestern Firebug beschrieben: das Firefox-Addon, wenn es darum geht Fehler auf Websites zu finden und zu beheben. In dem gleichen Artikel habe ich auch erwähnt, dass Firebug auch Erweiterungen anzubieten hat. Eine davon mit dem Namen CSS Usage will ich jetzt kurz vorstellen.

Nach der Installation bindet sich die Erweiterung im Firebug-Menü ein. Wenn man dann auf einer Website den Knopf "CSS Usage" betätigt, dann listet die Erweiterung sämtliche CSS-Regeln auf.

Dabei werden eingesetzte Regeln mit hellgrüner Farbe ausgegeben. Regeln, die auf einer anderen Unterseite eingesetzt wurden, werden in dunkelgrüner Schriftfarbe ausgegeben und rot sind die Regeln, die gar nicht zum Einsatz kommen. Um ein aussagekräftiges Ergebnis zu bekommen, muss man daher mehrere Unterseiten ansteuern.

Anschließend kann man die nicht eingesetzten CSS-Regeln manuell löschen oder sich mit einem Klick auf "export cleaned css" eine automatisch bereinigte CSS-Datei ausliefern lassen.

Quelltext-Vorschau in Firefox jetzt noch übersichtlicher

Das Firefox-Add-on mit dem Namen View Source Chart trägt einer besseren Übersicht des Quelltextes bei, in dem es zusammenhängende Blöcke in farblich unterschiedliche Kästen rein packt, die zudem durch Rahmen und Einrückungen zusätzlich von einander abgegrenzt werden.

Mit Hilfe dieser Erweiterung kann man jetzt noch schneller Fehler im Quelltext finden wie zum Beispiel die fehlenden oder überschüssigen div-Tags.

Snipplr: eine sehr umfangreiche Code-Sammlung

Wie sah noch einmal der CSS-Reset aus? Welche Möglichkeiten habe ich um abgerundete Ecken zu simulieren? Wie kann ich sprechende URLs generieren? Wie kann ich meine Tweets sichern?

Solche und viele weitere Fragen werden auf Snipplr.com, einer sehr umfangreichen Sammlung an Code-Schnipsel, beantwortet. Auf Snipplr.com finden sich Code-Fragmente aus 78 verschiedenen Sprachen: JavaScript, (X)HTML, PHP, CSS, Ruby, SQL u.v.m.

Viel Spaß beim Stöbern.

Bespin: der Code-Editor der Zukunft?

Ein sehr interessantes Projekt von Mozilla kann man seit gestern ansehen und schon etwas austesten: Bespin in der Version 0.1a: ein webbasierter Code-Editor.

Einige der Features bzw. Ziele sind:

• einfach zu benutzen
• integrierte Kommandozeile
• hohe Performance auch bei sehr umfangreichen Dokumenten
• Echtzeit-Zusammenarbeit an einem Dokument
• Syntaxhighlighting

Am aussagekräftigsten ist allerdings das folgende Video aus dem Mozilla-Labor:

Introducing Bespin from Dion Almaer on Vimeo.

Mein erster Eindruck: boah. Sieht sehr schick aus, scheint wirklich geeignet für umfangreiche Projekte und die Möglichkeit mit anderen an der gleichen Datei zu arbeiten wird in der Zukunft neue Möglichkeiten eröffnen. Ich bin auf jeden Fall gespannt wie die Entwicklung weiter geht.

Einen Link kopieren und formatiert wieder einfügen

Wer kennt das nicht? Man kopiert einen Link und möchte diesen dann als HTML-Link wieder einfügen oder auch in einem Forum als BB Code? Diese Arbeit erleichtert das Firefox-Addon CoLT (Copy Link Text). Hiermit kann man einfach einen Linktext inklusive Linkadresse kopieren, indem man über das Kontextmenü die Option "Link-Text und -Adresse kopieren als" auswählt. Und das abschießende Wort als führt auch schon zum nächsten schönen Punkt dieses Addons: Man kann wählen, ob und wie der Text in der Zwischenablage "ergänzt" werden soll. So wird aus dem folgenden Link Webwork-Tools beim Einfügen je nach Option folgendes:

HTML-Link
<a href="http://www.webwork-tools.de/">Webwork-Tools</a>

Unformatierter Text
Webwork-Tools - http://www.webwork-tools.de/

BB Code
[url=http://www.webwork-tools.de/]Webwork-Tools[/url]

FuseTalk
[L=Webwork-Tools]http://www.webwork-tools.de/[/L]

Wikipedia
[http://www.webwork-tools.de/ Webwork-Tools]

In den Einstellungen des Addons hat man sogar die Möglichkeit auch eigene Formatierungen einzufügen und anschließend zu nutzen.

Codepad: ein schlanker Code- bzw. Texteditor

Bei Codepad handelt sich um einen schlanken, vielseitig einsetzbaren Codeeditor. Der Editor ist Freeware und es handelt sich um ein heimisches Produkt welches für Windows (98 bis Vista) verfügbar ist.

Der Editor ist ganze 1mb groß, belegt nach der Installation nicht viel mehr als 1mb auf der Festplatte und geht auch mit dem Arbeitsspeicher recht sparsam um so das der Editor, auch beim Bearbeiten von größeren Dateien, keine Probleme auf älteren oder kleineren Rechnern (z. B. Netbooks) machen sollte.

Was kann Codepad?

• Syntaxhervorhebung (Syntaxhihglightning) für 30 Skript- und Programmiersprachen
• Bindet sich in das Kontextmenü ein
• Beherrscht UTF (utf-8 und utf-16)
• Man kann auch selber Highlighter für Sprachen erstellen in dem man im Profilordner bestehende Dateien kopiert und umbennent
• Der Editor bietet auch ein Vorlagen-System
• und einiges mehr

Auf der Website des Autors wird auch darauf hingewiesen, dass man Codepad auch auf einem USB-Stick installieren und betreiben kann und dass er Codevervollständigung beherrscht. Was man genau machen muss um es auf dem USB-Stick zu betreiben und wie man die Codevervollständigung nutzt, konnte ich bis jetzt noch nicht herausfinden.

Bin wie üblich für Hinweise und Tipps dankbar.

Nachtrag: Danke an die Kommentatoren (Matthias und Mr. Test). Um Codepad auf dem USB-Stick zu betreiben muss man es einfach dort installieren und die Codevervollständigung bekommt man in dem man strg + Leertaste drückt.

Code per E-Mail verschicken

Möchte man jemandem Code per E-Mail schicken, aber keine Datei als Anhang senden, so geht das nur mit großem Aufwand oder sehr unschön, da sämtliche Formatierungen verloren gehen und von Synthaxhighlightning wagt man nicht einmal zu träumen.

Ein schöner Dienst ist deswegen codepaste. Hier kann man seinen Code in ein Fenster eingeben, diesen Speichern und dann an eine E-Mail-Adresse senden. Der Empfänger bekommt einen Link zugeschickt, der ihn auf die Seite von codepaste bringt, wo er sich den eingefügten Code anschauen und natürlich auch kopieren kann.

Unterstützt werden die folgenden Sprachen: Actionscript, C++, CSS, HTML, Java, Javascript und PHP

Achtung: Wie lange der eingefügte Code gespeichert wird konnte ich leider nicht herausfinden.