tingelets: Bookmarklets for Web Developers

tingelets

Färbt euer HTML ein!

Mit tingelets starte ich heute ein kleines Projekt, dass euch Webentwicklern und -designern das tägliche Leben ein wenig erleichtern soll:

Die Vorgeschichte

Bei mir kommt es recht häufig vor, dass ich zu Debug-Zwecken zusätzliche Regeln in meine CSS-Dateien einfüge. Meistens handelt es sich dabei um Hintergrundfarben, die bestimmte Elemente hervorheben sollen, damit man die Größen und Abstände parallel in mehreren Browsern vergleichen kann.


div#column {
    margin: 2em 0;
    float: left;
        background: #5ff; /* debug */
}

Da dies oft recht mühsam ist, vor allem wenn man später wieder die richtige Zeile zum Herauslöschen finden will, habe ich es mir angewöhnt, Debug-Angaben immer einen Tab weiter nach rechts einzurücken.

Dennoch hab ich mich oft gefragt, ob das nicht noch einfacher geht. Sicher gibt es tolle Tools, die diese Aufgabe mit Bravour erledigen, man schaue sich nur das großartige Firebug Plugin, den Safari Web Inspector oder Xyle scope an. Das Problem bei der Sache ist allerdings, dass diese Lösungen immer auf eine Rendering-Engine begrenzt sind – um Ergebnisse zu vergleichen, also unbrauchbar.

Die Idee

Kürzlich hatte ich eine Idee, die genau an dieser Stelle ansetzt: Warum nicht das ganz über Bookmarklets steuern? Gesagt getan hab ich mich die letzten Tage mal hingesetzt und die tingelets Bookmarklets Suite gebastelt, die als Ergänzung zu den oben genannten Tools das Leben des gemeinen Webdesigners erleichtern soll.

Einmal eingerichtet, kann man in Windeseile beliebige Tags, CSS-Klassen oder auch IDs einfärben und sich so einen schnellen, browserübergreifenden Eindruck von einer beliebigen Seite verschaffen:

bartelme.at tinged
praegnanz.de tinged
daring fireball tinged

Und so funktioniert’s

Auf dem tingelets-Server liegt zum einen die Datei tingelets.js, die alle Funktionen enthält sowie für jedes Bookmarklet ein eigenes kleines Script, dass den Funktionsaufruf erledigt. Beide werde über das Bookmarklet in die aktuelle Seite geladen und ausgeführt. Passende Hintergrundbilder werden ebenfalls vom tingelets-Server geladen und angezeigt.

medienfreunde tinged

Mehr Infos und natürlich die Bookmarklets findet ihr unter www.tingelets.com.

Über Feedback würde ich mich natürlich freuen, besonders im Hinblick auf die Weiterentwicklung: Was fehlt, was könnte man weg lassen, was könnte man noch ändern/optimieren, welche bugs gibt es?

Und weil getingete Seiten so hübsch aussehen, hab ich gleich noch eine flickr-group angelegt, auf die ihr eure Screenshots hochladen könnt. Viel Spaß.

Veröffentlicht am 02.02.2007 um 11:09 Uhr
13 Kommentare

Die besten Bookmarklets für Blogger

Vielerlei kleine Helferlein für die Bookmarkleiste.

Veröffentlicht am 28.07.2006 um 08:13 Uhr
Keine Kommentare

Layout Grid Bookmarklet

Einfacher geht’s wirklich nicht.

Veröffentlicht am 23.07.2006 um 17:28 Uhr
Keine Kommentare