Espresso: Der Koffein-Boost für Webentwickler

Veröffentlicht am 23. März 2009

bannericon Im offiziellen Entwicklerblog von Macrabbit, die sich auch für den ausgezeichneten CSS-Editor CSSEdit verantwortlich zeigen, wurde heute der Startschuss von Espresso 1.0 verkündet. Ganz im Stile von CSSEdit folgt auch der große Bruder den bekannten Grundregel der belgischen Entwickler:

“power editing, blazingly fast publishing, previewing and much more — all wrapped in a slick interface”

Eine wirklich hervorragende Idee ist die Möglichkeit, die Webentwicklungs-Suite durch verschiedene Plug-Ins, so genannte Sugars, erweitern zu können. Diese XML-Dateien können die zusätzliche Script- und Programmiersprachen in Espress einbinden und machen das Programm noch flexibler. Im Coffee House oder dem offiziellen Forum gibt es bereits einige Sugars zum kostenlosen Download, die Zahl wird sich hoffentlich bald um ein vielfaches steigern. Falls die gewünschte Erweiterung noch nicht verfügbar ist, kann diese einfach mit dem Sugar Development Kit selbst erstellt werden.

Im Grunde stellt Espresso eigentlich nur die Grundfunktionen zur Verfügung. Diese Aufgabe haben die Entwickler wunderbar erfüllt und bieten eine ansprechende und intuitive Oberfläche. Weitere Funktionen können mit dem ausgereiften Plug-In System nach Belieben hinzugefügt werden. Ich werde das Programm jedenfalls erst einmal 15 Tage testen und dann kann ich mir hoffentlich ein Bild darüber machen, ob es gegen Coda, dem direkten Konkurrenten, eine Chance hat.

Tragen wir den IE6 zu Grabe!

Veröffentlicht am 20. Februar 2009

internet_explorer Ein weiteres mal hat mich ein Twitter-User auf eine ganz nette Initiative aufmerksam gemacht: Peter Höflehner berichtet in seinem Tweet über die norwegische Website Finn.no, die Benutzern des veralteten Internet Explorer 6 den Kampf angesagt hat. Besucht man den Online-Anzeigenmarkt mit dem fast schon sieben Jahre alten Browser, bekommt man eine grüne Box zu sehen, die auf den verwendeten Browser hinweist und Alternativen vorschlägt.

Es gibt bereits eine Gruppe von Web-Entwicklern, die ähnliche Warnmeldungen auf ihren Webseiten platziert, um die Verbreitung des Internet Explorers zu dezimieren. Zur Besseren Kommunikation und Koordination der Aktion wurde ein Wiki eingerichtet.

Ich kann diese Aktion nur unterstützen und werde in den kommenden Tagen auch so eine Box hier einbauen. Ich denke, dass die Zeit gekommen ist, den Internet Explorer 6 schön langsam zu Grabe zu tragen und damit auch die zahlreichen Sicherheitslücken und Inkompatibilitäten ein für allemal aus dem Weg zu schaffen. Leider gibt es, vor allem im Business-Sektor, viele Anwender, die nicht von heute auf morgen den Browser wechseln können. Deswegen ist es wichtig, die Erreichbarkeit für diese Leute trotzdem noch zu gewährleisten aber trotzdem einen Hinweis für die Anwender anzuzeigen.

Wollt ihr diese Aktion unterstützen? Dazu genügt es, folgenden HTML-Code an passender Stelle in eure Seite einzubauen. Der benutzte Browser wird automatisch erkannt und Benutzer von modernen Browsern bekommen die Meldung nie zu sehen:

<!--[if lte IE 6]>
<mce :style type="text/css">< !
#ie6msg{border:3px solid #090; margin:8px 0; background:#cfc; color:#000;}
#ie6msg h4{margin:8px; padding:0;}
#ie6msg p{margin:8px; padding:0;}
#ie6msg p a.getie7{font-weight:bold; color:#006;}
#ie6msg p a.ie6expl{font-weight:normal; color:#006;}
-->
<div id="ie6msg">
<h4>Wussten Sie dass Ihr Browser (Internet Explorer) veraltet ist?</h4>
Um das beste Ergebnis und den vollen Nutzungsumfang unseres Internetauftrittes nutzen zu können, aktualisieren Sie bitte ihren Browser.
Die aktuelle Version ist der <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 7</a> und der <a href="http://www.microsoft.com/windows/Internet-explorer/beta/default.aspx">Internet Explorer 8</a> ist bereits als beta verfügbar.
Die Aktualisierung ist kostenlos. Sollten sie einen Computer am Arbeitsplatz benutzen, wenden Sie sich bitte an den Administrator/Informatiker.
 
Sie können auch andere Internet Browser probieren, wie die kostenlosen <a href="http://www.opera.com">Opera</a>, <a href="http://mozilla.com">FireFox</a> oder <a href="http://www.apple.com/safari/download/">Safari</a></div>
&lt; ![endif]--&gt;</mce>

Noch bequemer geht es natürlich mit diesem WordPress-Plugin!

Erklärung des “Don’t Click”-Clickjackings auf Twitter

Veröffentlicht am 12. Februar 2009

In den vergangenen Minuten waren die Timelines auf Twitter prall gefüllt mit “Don’t Click” Statusupdates, die alle auf diese Seite verweisen. Auch mich hat es natürlich erwischt und ich hab mal nachgeforscht, wie die Technik des kleinen Hacks funktioniert. Nach kurzer Analyse gibts auch schon die Erklärung: Hinter dem Scherz steht keine Sicherheitslücke oder andere bedrohliche Dinge, sondern ein geschickter Einsatz von HTML und CSS.

Betrachtet man den Quelltext der Seite genauer, so findet man gleich am Anfang einen Iframe mit der URL “http://twitter.com/home?status=Don’t Click: http://tinyurl.com/amgzs6″. Dieser ruft eine ganz normale Twitter-Startseite auf, bei der das gewünschte Statusupdate bereits in das Eingabefeld eingegeben ist. Diese Technik benützten viele Twitter-Mashups und Dienste um keine API-Zugriffe zu benötigen. Doch wie funktioniert das Absenden des Tweets?

Ganz einfach sogar! Der Iframe wurde vollständig transparent gemacht und genau soweit über den Browserrand nach links geschoben, dass sich der “update”-Button der Twitterseite über dem “Don’t click”-Button der eigentlichen Seite befindet. Man klickt also nicht wirklich auf den sichtbaren Button sondern bestätigt unwissentlich den unsichtbaren Button der Twitterseite. Über diese Weise wird das Statusupdate dann auf Twitter gepostet.

Ich hab den Code nochmal ein wenig verändert, um das Ganze deutlicher zu machen:

Iframe mit reduzierter Transparenz:

Iframe komplett im Bild mit reduzierter Transparenz:

UPDATE: Twitter hat mitlerweile das Clickjacking-Lücke gefixt. Probleme dieser Art sollten in Zukunft nicht mehr auftreten. Falls ihr noch Interesse an dem Sourcecode habt, diesen findet ihr auf Pastie.

WordPress 2.7.1 veröffentlicht

Veröffentlicht am 11. Februar 2009

bild-1 Alle Blogger unter uns dürfte das neue Maintenance-Release der bekannten Blogging-Plattform WordPress interessieren. Die Versionsnummer wurde nur auf 2.7.1 aktualisiert, dementsprechend kann man keine großen Änderungen in der Featureliste erwarten. Beim Code hat sich jedoch einiges getan: 68 Support-Tickets wurden durch die Veröffentlichung gelöst und es sind zahlreiche Änderungen in die Aktualisierung eingeflossen.

Die neue Version bekommt ihr über die Download-Seite oder das automatische Update-Funktion direkt im Admin-Panel. Auch eine deutsche Version ist bereits erhältlich. Template- oder Plugin-Inkompatibilitäten sind durch das Update nicht zu erwarten.

Googles Content Distribution Network für Javascript-Libraries

Veröffentlicht am 31. Januar 2009

1076569_city_street_lights Kaum eine moderne Seite kommt in der heutigen Zeit ohne eine vernünftige Javascript bzw. AJAX Library aus. Diese helfen bei der schnellen Entwicklung von Webanwendungen und zaubern all die tollen Effekte auf unsere Bildschirme, die man in der Web 2.0 Generation lieben gelernt hat. Der einzige Nachteil dabei ist, dass die Dateigröße der Libraries über die Zeit ziemlich angestiegen ist. Script-Dateien von 100kb und mehr sind keine Seltenheit und beschäftigen sowohl Seitenbetreiber als auch Besucher mit hohem Traffic.

Durch den Blog von David Walsh bin ich auf die AJAX Libraries API von Google aufmerksam geworden, die sich um dieses Problem annimmt. Sowohl die alten, als auch neuen Javascript-Libraries werden dabei von Google gehostet und kostenlos zur Verfügung gestellt. Google betreibt eines der größten Content Distribution Network (kurz CDN) der Welt und hat dementsprechend ausreichende Kapazitäten um diese Last abzunehmen. Als Webentwickler braucht man diese nur noch einbauen. Dies halt ein paar sehr große Vorteile:

Google betreibt umfangreiche Data-Center, die auf der ganzen Welt verstreut sind. Die Dateien werden dadurch immer über die kürzeste Verbindung geladen: Europäer bekommen die Files von Europa geliefert – Amerikanische Benutzer von Amerika.
Die Google-Server sind höchstwahrscheinlich schneller und haben eine kürzere Antwortzeit als die Eigenen, weil Google diese speziell für statische Daten optimiert.
Je mehr Seiten die oben genannte Methode nutzen, umso größer ist die Wahrscheinlichkeit, dass sich die Dateien bereits im Browsercache befinden und somit kein ein Dateitransfer zu Stande kommt.
Der Datenverbrauch wird auf beiden Seiten (Betreiber und Besucher) drastisch verkleinert!

Eine genaue Auflistung der verfügbaren Libraries (jQuery, MooTools, Prototype, YUI, etc.) und eine Anleitung findet ihr bei Google.