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
· · ·

Kommentare

Stefan

02.02.2007 um 11:09 Uhr

Ja, da sag ich doch mal danke. Wie oft ich schon border: 1px solid red; geschrieben habe, will ich gar nicht mehr zählen…

[…]Maurice Kühlborn, besser bekannt durch infochord.de und minimalweb.de hat eine neues Projekt am Start: Tingelets. Das Projekt ist an Webentwickler und Webdesigner gerichtet und soll die tägliche Arbeit ein wenig erleichtern.[…]

Milos

02.02.2007 um 11:09 Uhr

Hey, wo du das Ganze doch auf Englisch hast… bau doch noch einen digg.com Button ein und schreib ein digg dazu…

Vielen Dank übrigens!! ;-)

Maurice

02.02.2007 um 11:09 Uhr

Danke für den Tipp. Hier gehts lang: tingelets auf digg.com

Stefan

02.02.2007 um 11:09 Uhr

Scheint mir ein nützliches Werkzeug zu sein, wenn man präzises Arbeiten liebt.
Ansonsten: Screencast, Farben, Logo…alles sehr webzwonullig :-)

Maurice

02.02.2007 um 11:09 Uhr

Danke Stefan. Die Website hab ich übrigens extra für dich in HTML 4.01 gebaut ;)

Milos

02.02.2007 um 11:09 Uhr

.. cool.. gesehen? Das digg zieht langsam an.. über 400 diggs im Moment! ;-)

Maurice

02.02.2007 um 11:09 Uhr

Ja, ist echt cool. Von den Kommentaren her scheinen aber viele das ganze missverstanden zu haben. Ich möchte keine Konkurrenz bzw. kein Ersatz für Fireburg oder ähnlichem sein. Es soll als Ergänzung dienen, wenn man mal eben schnell vergleichen will, welche Unterschiede zwischen Safari, IE und Firefox auftreten oder ganz einfach, wenn man schnell schauen will, wie ein Link innerhalb eines li-tags ausgerichtet ist oder ähnliches. Ob der Header die richtige Höhe hat, oder ob er collapsed ist, etc.. Vielleicht sollte ich das auf der Website noch klarer hervorheben.

denis

02.02.2007 um 11:09 Uhr

Liegt das an mir oder gehen die Tingelets nicht mehr? Bekomme einen Javascript Fehler sowohl unter Safari als auch in Firefox… liegts an mir oder woran könnte das liegen, der Fehler ist so lang und komisch über die ganze Webseite verteilt das ich ihn nicht wiedergeben kann, er lässt sich auch nicht markieren…
Fand das ganze eigentlich echt nützlich vielleicht hast du ja eine Lösung Maurice, danke schonmal

Maurice

02.02.2007 um 11:09 Uhr

Ich habe bisher einen Fall erlebt, bei dem es im Zusammenspiel mit prototype Probleme gab. Ich hatte bisher leider noch keine Zeit, mir das näher anzuschauen. Wäre nett, wenn du mal testen könntest, ob das Problem auch auf anderen Seiten auftritt, wenn ja bitte mal nen Screenshot schicken und ein paar Infos zu evtl. verwendeten Javascript Libraries. Vielen Dank.

Felix

02.02.2007 um 11:09 Uhr

Hmm… hier geht auch nüscht. Habs mit Firefox (alle Extensions abgedreht) und Opera probiert. Sieht aus, als ob die Hintergrundbildchen abhandengekommen wären. Als ichs im Februar mal kurz angetestet hab funktionierte alles problemlos. Vielleicht hst du ja nen Geistesblitz woran das liegen könnte, ist echt ne tolle Sache.

Maurice

02.02.2007 um 11:09 Uhr

Das Problem mit dem Prototype Framework hab ich gefixt. Das sollte zumindest die ellenlange Fehlermeldung von Denis verhindern. Felix Problem kann ich hier bei mir leider nicht nachvollziehen. Die Bilder sind ok, bei mir klappt alles. Kannst ja mal testen, ob du sie direkt im Browser aufrufen kannst:

h1 png anzeigen
p png anzeigen
form png anzeigen

Ansonsten schreib mir einfach mal ne Mail, dann können wir den Fehler vielleicht zusammen rausfinden.

Felix

02.02.2007 um 11:09 Uhr

Jetzt funktioniert auch hier alles bestens. Vielen Dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.