SimpleBlock, das unterbewertete Firefox-Plugin

Allen anderen Browsern zum Trotz kann ich einfach nicht ohne Firefox leben. Am liebsten würde ich mit Opera arbeiten, aber leider kommt TYPO3 nicht mit dem norwegischen Wunderbrowser klar. Obwohl ich Firefox toll finde, stört mich im Vergleich zu anderen Browsern der gefrässige Speicherverbrauch. Bei der Arbeit komme ich teilweise auf 250 MB Speicherbelegung. Da können Chrome, Opera und Safari in Sachen Speicherauslastung und Geschwindigkeit deutlich punkten.

Auf der Suche nach einer Möglichkeit, den Speicherhunger von Firefox wenigstens etwas zu reduzieren, bin ich über SimpleBlock gestolpert. Mir ist bei Speichercheck aufgefallen, dass fast alle Lösungen zum Blockieren von Online-Werbung und Trackern echte Speicherdiebe sind. Dabei ist es egal, ob man mit Plugins wie z. B. Adblock Plus oder externen Lösungen wie z. B. Privoxy arbeitet.

SimpleBlock ist ein sehr kleines Plugin. Es blockiert Webseiten und verzichtet dabei auf jeglichen Schickschnack. Nach der Installation öffnet man den zu nutzenden Profilordner und legt eine Textdatei namens SimpleBlock.ini an. Damit ist der einfache Teil der Arbeit abgeschlossen.

Die Anpassung des Plugins ist ebenfalls einfach, allerdings etwas zeitaufwendiger. SimpleBlock liest zeilenweise alle Anweisungen in der SimpleBlock.ini ein und überprüft alle Links einer Seite auf Übereinstimmung. Bei einem Treffer wird der Link einfach nicht geladen. Die Anweisungen können aus Fragmenten einer URL bestehen. Man kann aber auch mit Regular Expressions arbeiten.

Ein gutes Beispiel für das Blockieren von Links sind die ungeliebten Google AdSense Werbungen. Diese werden auf Websites über den Link http://pagead1.googlesyndication.com/pagead/show_ads.js oder http://pagead2.googlesyndication.com/pagead/show_ads.js eingebunden.

Man kann diese Anzeigen auf unterschiedliche Weise blockieren:

//pagead
.googlesyndication.com/
/pagead/
show_ads.js

Jede dieser Anweisungen würde in der AdSense-Url gefunden und blockiert. Man kann mit wenig Aufwand sehr viel Werbung wie folgt ausfiltern:

//ad.
//ads.
//adserv
/ad/
/ads/
adclient
adfarm
adinterax
adserv
adtags
adtech

Sehr viel Werbungen haben diese Fragmente im Pfad. Wer sich nun fragt, warum ich nicht einfach ad und ads in einer Zeile gesetzt habe. Der Grund ist simple: Viele Websites nutzen Daten-Verzeichnisse namens upload oder uploads. SimpleBlock würde alle Dateien wie z.B. Bilder, Videos, Animationen und Downloads aus diesen Verzeichnissen blockieren.

Aber nicht nur Werbung kann man mit SimpleBlock löschen. Auch sogenannte Tracker - also Scripte, die ungefragt Informationen über den Nutzer und sein Verhalten weitergeben - kann man blockieren und sorgt damit für die eigene Sicherheit. Ein Bespiel für die Filterung von Trackern sieht so aus:

.google-analytics.com
.hitslink.com
.ivwbox.de
.sitemeter.com
.statcounter.com

Ebenso leicht kann man nervige MouseOver-Werbungen wie z.B. die von IntelliTXT und Kontera blockieren:

intellitxt.com
kontera.com
vibrantmedia.com

Wer bei der Blockierung mehr differenzieren möchte, kann Regular Expressions benutzen. Mit einem führenden R: wird eine RegEx eingeleitet. Eine Expression kann sehr nützlich sein, wenn die Werbung auf dem gleichen Server gehostet wird. Das nachfolgende Beispiel blockiert alle Flash-Dateien, die in einem Verzeichnis namens banner gehostet werden:

R: /banner/.+.swf

Fazit

Wer Webseiten schneller laden möchte, die Weitergaben von persönlichen Daten unterbinden möchte oder einfach kein Interesse an nerviger Werbung hat, benötigt einen guten Filtermechanismus. Ein Problem bei vielen Lösungen ist der wachsende Speicherhunger. Mit SimpleBlock habe ich ich für mich eine Lösung gefunden, die den Speicherverbrauch niedrig hält und trotzdem sehr flexibel ist.

Wer wenig Zeit zur Umsetzung eigener Regeln hat und fertige Regeln sucht: Man kann mit wenig Aufwand die Listen von AdBlock Plus oder Fanboy urlfilter.ini umarbeiten.

Schneller arbeiten durch Ersetzungen mit AutoHotKey

Unter Windows gibt es ein großartiges Tool namens AutoHotKey Website kurz AHK genannt. AHK ist im Prinzip eine kleine OpenSource Programmsprache, mit welcher man mächtige Skripte zur Automatisierung von Ein- und Ausgaben schreiben kann.

Im ersten Teil möchte ich das Ersetzen von Texten vorstellen. Die Installation ist schnell vollzogen, einfach die aktuelle Version von AHK herunterladen und das Setup ausführen.

In Web-Projekte wiederholen sich immer wieder bestimmte Code-Fragmente. Typische Beispiele sind Blindtexte, Platzhalter für Menüs, Aufzählungen aber auch Programmcode wie For-Next-Schleifen, Switch-Abfragen usw.

Mit AHK kann man sehr einfach Vorlagen gestalten, welche später beim Tippen eines Kürzels eingefügt werden. Hier ein kleines Beispiel:

:o:#bt::
clipboard=Ich bin ein Blindtext!
Send ^v
return

Sobald wir ein #bt tippen, wird #bt durch Ich bin ein Blindtext! ersetzt.Schauen wir uns den Code näher an. Normalweise wird ein Replacment mit :: eingeleitet. Im Beispiel nutze ich zusätzlich die Option o. Damit wird das Endzeichen wiedergelöscht.

Was ist ein Endzeichen? Stellen wir uns vor, wir hätten zwei Textersetzungen: #bt und #btx Ohne ein End- oder Abschlusszeichen könnten wir nie #btx eintippen, weil vor der Eingabe des x die Ersetzung von #bt aktiv würde. Die Endzeichen sind neben dem Leerzeichen: -()[]{}:;'"/\,.?!`n `t. Man kann aber auch andere Endzeichen in AHK definieren.

Ich habe festgestellt, dass abschließende Endzeichen meinen Schreibfluss stören und ausbremsen. Nehmen wir an: #w steht für Wuppertal und ich wollte Wuppertaler Schwebebahn schreiben. Würde ich das Endzeichen nicht automatisch unterdrücken, würde ich Wuppertal er Schwebebahn schreiben. Also müsste ich manuell das Leerzeichen löschen. Mit :o: unterdrückt man die Endzeichen.

Zurück zum Beispiel: Mit :o:#bt:: definiere ich das Kürzel #bt welches ohne das Endzeichen ersetzt werden soll. In AHK gibt es unterschiedliche Send-Methoden, die alle einen großen Nachteil haben: Sie sind sehr sehr langsam. Daher nutze ich in meinem Beispiel die Zwischenablage. Mit clipboard=Ich bin ein Blindtext! fülle ich die Zwischenablage mit dem Blindtext, mit Send ^v füge ich die Zwischenablage im aktuellen Dokument ein und mit return sage ich AHK, dass unsere Textersetzung beendet ist.

Nachfolgend liste ich Beispiele für Blindtext-Ersetzungen im HTML-Bereich auf:

:o:#p1::
clipboard=<p>facilisis enim ultricies condimentum, erat facilisis. tempor porttitor, placerat et enim augue, eros amet, Mauris vitae, dui Vestibulum eu sed, wisi, Aliquam est ullamcorper mi, tincidunt ornare accumsan et malesuada sit egestas. senectus eget, luctus, wisi. ac erat Donec dui. turpis feugiat non pulvinar in faucibus, lacus vitae fermentum, erat. amet, sit condimentum habitant fames sit eleifend neque egestas Vestibulum dapibus, neque libero eros semper. eu quis, felis. commodo amet pharetra. tristique tempus amet est. Pellentesque tortor cursus sagittis Ut ante. Nam magna netus vulputate id sit ipsum eu quam, metus vitae, elit tincidunt Aenean eget leo. ac orci, rutrum mi et tortor turpis egestas Quisque Praesent quam sapien Aenean volutpat. Donec morbi ultricies </p>\n
Send ^v
return

:o:#p2::
clipboard=<p>semper. libero placerat egestas. ante. et Aenean tempor habitant ac amet, Pellentesque feugiat egestas tortor ultricies mi morbi quam, est. Mauris Vestibulum quam malesuada sit vitae leo. vitae, et tristique fames eu ultricies Donec eleifend sit netus turpis senectus eget, amet </p>
Send ^v
return

:o:#p3::
clipboard=<p>habitant et Pellentesque malesuada senectus morbi netus et turpis egestas. fames ac tristique </p>
Send ^v
return

:o:#u1::
clipboard=<ul>\n<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n<li>Aliquam tincidunt mauris eu risus.</li>\n<li>Vestibulum auctor dapibus neque.</li>\n</ul>\n
Send ^v
return

:o:#u2::
clipboard=<ul>\n<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>\n<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>\n<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>\n<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>\n</ul>\n
Send ^v
return

:o:#o1::
clipboard=<ol>\n<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n<li>Aliquam tincidunt mauris eu risus.</li>\n<li>Vestibulum auctor dapibus neque.</li>\n</ol>\n
Send ^v
return

:o:#o2::
clipboard=<ol>\n<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>\n<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>\n<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>\n<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>\n</ol>\n
Send ^v
return

:o:#u3::
clipboard=<ul id="menu">\n<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>\n<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>\n<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>\n<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>\n<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>\n</ul>\n
Send ^v
return

:o:#robots::
clipboard=User-agent: *\nDisallow: /typo3\nDisallow: /typo3_src\nDisallow: /t3lib\n
Send ^v
return

Für die Programmierer unter uns ein paar kleine PHP-Goodies, die das programmieren einfacher, schneller und fehlerfreier machen:

:o:_g::$_GET['']{Left 2}
:o:_p::$_POST['']{Left 2}
:o:_r::$_REQUEST['']{Left 2}
:o:_s::$_SESSION['']{Left 2}
:o:_pr::print_r();{Left 2}
:o:_if::if(isset()) {{}{Left 4}

Wie man an den wenigen Bespielen sehen kann, kann man als Webdesigner seine Arbeit mit Hilfe von Textersetzungen in allen Bereichen optimieren. Viel Erfolg!