Blog


Google I/O 2011: HTML5 Showcase for Web Developers: The Wow and the How

So Freunde,
ich habe mir am Mittwoch Teile der Google I/O Keynote vom 2. Tag angeschaut.
Echt Wahnsinn, was die Jungs da gezeigt haben.
Nur so am Rande: Am ersten Tag haben die Jungs allen Teilnehmern ein Samsung Galaxy Tab 10.1 geschenkt.
Am zweiten Tag, haben die Google-Typen jedem Teilnehmer ein Chromebook versprochen.

Was ich aber mal richtig gut fand, war die Präsentation der
HTML5 File-API ab 16:34:

weiterlesen ...



WordPress – Frontend Performance verbessern

Egal ob Google, Yahoo oder Bing.
Suchmaschinen setzen neben Keywords und anderen SEO-Maßnahmen auch auf die Performance einer Website.
Um die Performance (der eigenen Website) zu ermitteln gibt es mittlerweile eine Menge Tools.
Sei es als Plugin für den Browser oder als Web-Applikation.
Nur um ein paar zu nennen:

Die letzten zwei Tage habe ich mich damit beschäftigt, die Performance in meinem Blog zu verbessern.
Seit ein paar Wochen habe ich meinen Blog von Serendipity auf WordPress umgestellt.
Da ich ein recht einfaches Hosting Angebot von 1&1 nutze, kann ich leider nicht alle Register ziehen, die ich ziehen wollte 😉
Hier liste ich mal einige Maßnahmen auf, die auf jeden Fall die Ladezeit meines Blogs reduziert haben.

.htaccess Einträge – ETags und Expires Headers

#Remove ETags
Header unset ETag
FileETag None

#Expire Header
ExpiresActive On
ExpiresDefault „access plus 2 months“
ExpiresByType text/html „access plus 1 day“

style.css

In meinem Theme wird die style.css verwendet.
Für die Entwicklung binde ich sie als style_dev.css ein.
Diese CSS-Datei lasse ich vom YUI Compressor minifzieren und in style.css umbenennen.
Das mache ich per Ant-Task. Ist für eine Datei etwas überkandidelt, aber so kann ich mich mehr mit
Ant als Automatisierungs-Tool beschäftigen.

CSS-Sprites

Ich bin kein Designer, von daher nutze ich ein fertiges HTML5-Theme namens Absolum.
Das Problem ist, dass einige Hintergrundbilder zusammen gefasst werden könnten, aber nicht zusammen gefasst wurden.
Daher habe ich das Bookmarklet SpriteMe von Steve Souders verwendet.
Damit habe ich schon einmal eine Menge der Hintergrundbilder in ein Hintergrundbild vereint.
Das Bookmarklet sagt mir sogar, welche Styles ich anpassen muss.
Dadurch habe ich wieder ein paar HTTP-Requests gespart.

Bild-Optimierung

Trotzdem ich Wert darauf lege, dass Bilder bereits optimiert abgelegt werden, lasse ich im Zweifel Bilder von Smush.it optimieren.
Hiermit werden noch einmal ein paar Bytes verlustfrei entfernt.

Allein durch diese Maßnahmen habe ich den Performance-Index meines Blogs von 72 auf 81 angehoben.
Könnte ich CSS und JS Dateien noch per .htaccess gzip-komprimiert ausliefern, dann würde sicher noch mehr gehen.
Eine weitere Möglichkeit, die ich die nächsten Tage noch prüfen werde, ist die, dass ich teilweise Bilder unter anderen Subdomains ausliefere.
Das hat den Vorteil, dass der Browser die Dateien parallel herunterlädt.

Weitere Performance-Maßnahmen sind noch in Planung und werden vermutlich in den nächsten Tagen umgesetzt.
Je nachdem, wie ich Zeit finde. Dazu wird es aber auch nochmal einen gesonderten Artikel geben. Stay tuned.

weiterlesen ...



Windows 7 – Samba share als Netzlaufwerk einbinden

Will man unter Windows 7 ein Samba share als Netzlaufwerkeinbinden, kann das durchaus zur Frustration führen.
Das Problem tritt wohl nur auf, wenn die Version von Samba kleiner ist als 3.3.

Um das trotzdem hin zu bekommen ohne Samba auf eine höhere Version zu heben, gibt es zwei Möglichkeiten,
die eventuell sogar kombiniert eingesetzt werden müssen.

1. Möglichkeit:

  1. regedit öffnen (mit Administratoren Rechten)
  2. [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\LanmanWorkstation\Parameters] öffnen
  3. DWORD – DomainCompatibilityMode (erstellen oder auf 1 setzen)
  4. DWORD – DNSNameResolutionRequired (erstellen oder auf 0 setzen)
  5. System neu starten und erneut versuchen das Netzlaufwerk einzubinden

2. Möglichkeit:

  1. secpol.msc öffnen (mit Administratoren Rechten)
  2. Netzwerksicherheit: LAN Manager-Authentifizierungsebene auf LM-und NTLM-Antworten senden
  3. Netzwerksicherheit: Minimale Sitzungssicherheit für HTLM-SSP-basierte Clients (einschliesslich sicherer RPC-Clients) auf 128-Bit-Verschlüsselung erfordern deaktivieren
  4. System neu starten und erneut versuchen das Netzlaufwerk einzubinden

Spätestens jetzt sollte sich das Samba share als Netzlaufwerk einbinden lassen.

weiterlesen ...



Windows 7 (64bit) Service Pack 1 – so funktioniert es

Ich muss sagen, dass ich recht zufrieden bin mit meinem Windows 7 Home Premium.
Läuft stabil, sieht schick aus und automatische Updates halten das System aktuell.

Jetzt wo der Service Pack 1 offiziell verfügbar ist, hat mir Windows natürlich gesagt,
das da etwas in der Queue liegt.

Also habe ich am Donnerstagabend zwischen Tür und Angel das Update angeschmissen.
Ungefähr 90 MB wollte der Updater ziehen. Hat er aber nicht und brach mit einer Fehlermeldung ab.

„Nun gut egal“, dachte ich mir.
Gestern dann nochmal probiert. Gleicher Fehler.
Daraufhin habe ich mal ein wenig im Netz rumgesucht und das KB947821 – System Update Readiness Tool für Windows 7 gefunden.

Installiert und nochmal das Update angeschmissen. Nee, ist nicht gleicher Fehler wie bei den anderen Versuchen.
Also ab auf die Microsoft Seite und das 900 MB große Service Pack 1 heruntergeladen.
Erfolgreiche Installation -> Fehlanzeige.

Das war dann eigentlich das erste Mal, dass ich mich über Windows 7 ein wenig geärgert habe.
Denn bis dahin hatte ich kein ernstes Problem mit dem Betriebssystem.

Also bin ich nochmal ab zur Microsoft Seite und habe die Service Pack 1 DVD gezogen (knapp 2GB groß).
Microsoft empfiehlt mindestens 8 GB freien Speicherplatz auf der C:\-Partition.
Kurzer Check. Passt.

Die ISO-Datei habe ich dann als virtuelle DVD eingebunden und von da aus die Installation gestartet.
Und siehe da. Es hat funktioniert.
Ein kurzer Blick auf die Systemeigenschaften hat dies nochmal bestätigt.

Screenshot aus den Systemeigenschaften

Wer anschliessend Speicherplatz freigeben möchte und sich sicher ist, dass das SP1 nie wieder deinstalliert werden muss/soll/kann/darf kann mit folgendem Befehl die Installationsdateien vom SP1 löschen

dism.exe /online /cleanup-image /spsuperseded

weiterlesen ...



Mobile Performance Bookmarklet

Steve Souders (Herausgeber: „High Performance Websites“ und „Even Faster Websites“) hat in seinem Blog ein neues Bookmarklet veröffentlicht.
Mittlerweile hat Steve Souders sich etwas mehr auf die Performance von mobilen Webseiten ausgerichtet.

Gerade als Entwickler ist man immer an dem Code interessiert, den eine Website ausliefert. Während Smartphones und Tablets meist eine für das mobile Endgerät eine angepasste Seite angezeigt bekommt, sind leider die Möglichkeiten eine Website mit einem aktuellen Smartphone zu analysieren – Handy darf man in Zeiten von Android und iOS nicht mehr sagen 😉 – begrenzt bzw. gar nicht möglich.

Dieses Bookmarklet macht es allerdings möglich.
Neben dem bekannten „Firebug“ für Firefox bringt das Bookmarklet DOM Monster, Page Resources und andere Tools mit.

Die Installation ist denkbar einfach:
1. Link anklicken: Mobile Perf bookmarklet
2. Die Seite als Lesezeichen anlegen
3. Den URL des Bookmarks anpassen und alles inklusive dem “#“ löschen, so dass das Lesezeichen mit “javascript:“ beginnt.

Eine Anleitung für das iphone gibt es bei Steve Souders im Blog

Ich habe das auf meinem HTC Desire getestet und bin zufrieden.

weiterlesen ...



Performance-Analyse mit DOM Monster-Bookmarklet

Gerade eben habe ich beim Durchlesen meiner RSS-Feeds ein Interessantes Bookmarklet entdeckt.

DOM Monster analysiert das vorliegende DOM einer Website.

Screenshot DOM Monster auf Spiegel Online

In einem Layer zeigt es die Ergebnisse an und berücksichtigt u.a. folgende Dinge.

  • Anzahl der Elemente
  • Anzahl der Knoten im DOM
  • Anzahl der Script-Tags
  • Anzahl der Kommentare
  • Verschachtelung der Tags
  • Anzahl der leeren Knoten
  • Hinweise auf ggf. neuere Frameworks (jquery etc.)

Ab einer Verschachtelungstiefe von 15 Tags (oder mehr) markiert das Bookmarklet die entsprechenden Elemente mit einer roten gestrichelten Linie.

In Kombination mit YSlow und/oder PageSpeed liefert DOM Monster wichtige Indikatoren, wie man die Performance der eigenen Website verbessern kann.

Das Bookmarklet wurde übrigens von Thomas Fuchs, dem Autor des bekannten JavaScript-Frameworks script.aculo.us geschrieben.

Aufmerksam geworden auf das Bookmarklet bin ich durch den Blogeintrag von Matthias Schütz

weiterlesen ...



Delicious Bookmarks exportieren

Es ist zwar noch nicht gewiss, aber laut einem geleakten Screenshot wird delicious eingestellt.

Da stellt sich dem geneigten delicious-Nutzer natürlich die Frage:
„Wohin mit den ganzen Bookmarks?“

Ich weiß zwar selbst noch nicht, was ich zukünftig damit tue,
aber erstmal sollte man sich das ganze angesammelte Gegulpe irgendwo hin speichern.

Dazu gibt es zwei Möglichkeiten:
1. https://secure.delicious.com/settings/bookmarks/export speichert die Bookmarks in eine HTML-Datei
2. Im Terminal folgendes ausführen: curl https://{your username}:{your password}@api.del.icio.us/v1/posts/all > bookmarks.xml

weiterlesen ...



What’s your Ninja name

Seitdem ich Christian Heilmann auf der BOA2009 erlebt habe, lässt mich YQL (Yahoo Query Language) nicht mehr los.

Kurz zu YQL: YQL ist eine an SQL angelehnte Abfragesprache für sämtliche Daten im Web.

So liesse sich beispielsweise meine Blog-Startseite mit folgender Abfrage abholen:

select * from html where url="http://blog.cmff.de"

Das Ergebnis kann entweder als XML oder als JSON weiterverarbeitet werden.

Inspiriert durch das Internet-Meme

(gefunden auf Blame it on the voices) habe ich mal eine kleine Fingerübung durchgeführt.

Christian Heilmann, der noch bis zum 1.12.2010 Yahoo! Senior Developer Evangelist ist, hat für YQL einen so genannten OpenTable geschrieben.
So kann man relativ leicht in der YQL-Console seinen echten Namen in einen Ninja-Namen übersetzen lassen.

Da aber die meisten User (die keine Entwickler-Gene in sich tragen) vermutlich mit der Konsole überfordert sind, habe ich mal ein kleines Frontend dafür gebaut:

Einfach in das Textfeld den eigenen Namen eingeben und schon purzelt der Ninja-Name heraus.
Meiner lautet: lutamoshikikato

Wie lautet Euer Ninja-Name?

weiterlesen ...



LABjs Script Loader

Mal wieder ein Quickie zwischendurch.
Ich bin heute über LABjs gestolpert.
LABjs steht für Loading And Blocking JavaScript.
Prinzipiell bietet es die Möglichkeit externes und Inline-Javascript gezielt synchron bzw. asynchron zu laden.
Darüber hinaus kann man für jedes eingebundene Script bestimmen, ob es auf ein Anderes zu warten hat.
Alle Möglichkeiten und Optionen stehen in der offiziellen Dokumentation.

Vorher:

<script src="framework.js"></script>
<script src="plugin.framework.js"></script>
<script src="myplugin.framework.js"></script>
<script src="init.js"></script>

Nachher:

<script>
   $LAB
   .script("framework.js").wait()
   .script("plugin.framework.js")
   .script("myplugin.framework.js").wait()
   .script("init.js");
</script>
weiterlesen ...



Flash Fullscreen auf dem zweiten Monitor

In Zeiten wo die Formel1 nicht mehr ganz so spannend ist wie sie mal war, habe ich auch keine Lust mehr mich zwei Stunden vor den Fernseher zu setzen.
Dennoch möchte ich die Rennen nicht verpassen.
Dank DualMonitor-Setup kann ich bequem an einem Monitor arbeiten und den LiveStream von rtl.de auf dem zweiten Monitor in Fullscreen laufen lassen. Seit jetzt.

Adobe hat nämlich beim Flash-Plugin großartige Arbeit geleistet.
Sobald der Stream (in Fullscreen) läuft und ich auf dem anderen Monitor etwas anklicke war’s das. Statt Vollbild gibt’s Minibild.

Wie man mit einem Hex-Editor das Flash-Plugin überredet wird auf Andrew Brampton’s Website erklärt.
Aufgepasst: Vorher ein Backup von der betroffenen Datei machen.

Viel Spass beim Rennen.

weiterlesen ...