Webwork-Tools - Dem Webworker seine Werkzeugkiste

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.