entwicklung (15)


Ringmark – Test-Suite für mobile Browser

Ringmark ist eine Web-basierte Test-Suite.
Diese testet die Fähigkeiten des (vorzugsweise mobilen) Browsers.
Die Entwickler legen hier den Fokus auf die Eigenschaften, von denen sie glauben, dass aktuelle WebApps diese erfordern.

Wenn man Ringmark nun aufruft, beginnen sofort die Tests.
Diese wurden in drei Gruppen (respektive drei Ringe) eingeteilt. Laufe alle Tests eines Ringes durch, wird mit dem nächsten Ring weitergemacht.
Schlagen ein oder mehrere Tests fehl, so wird der Ring zwar noch zu ende getestet, alle weiteren jedoch gar nicht erst gestartet.
Anschliessend kann man sich genau anschauen, welche Features unterstützt werden und welche eben nicht.

Finde ich eine ganz schicke Geschichte um zu sehen, was der aktuell verwendete Browser so drauf hat.




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:




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.




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.




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.




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




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?




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>



Greasemonkey-Script: Last.fm Now Playing TweetButton

Manchmal würde ich gerne der Welt draussen via Twitter mitteilen, was ich gerade für Musik höre.
Meistens habe ich aber gerade dann keine Lust den Künstler und Titel des Songs irgendwo in einen Twitter Client zu hacken.

Also habe ich mir ein Greasemonkey-Script geschrieben, was den offiziellen TwitterButton in meine Last.fm Profilseite hackt.

Funktioniert natürlich nur, wenn gerade Musik läuft.
Andernfalls würde ja auch die Bezeichnung „Now Playing“ nur begrenzt Sinn ergeben.

Wenn Ihr Greasemonkey installiert habt, dann könnt ihr das entsprechende Script auf userscripts.org herunterladen.
Achja: Den Sourcecode dazu gibt es auf GitHub




Google Chrome und Extensions

Zeiten, in denen der Internet Explorer als unsicher gilt, kommen den alternativen Browsern zu Gute. So auch dem Chrome aus dem Hause Google. Auch wenn er oft aufgrund des „Nach-Hause-telefonierens“ kritisiert wird. Welche Daten Chrome sendet und wie man sie abschaltet wird von Caschy auf seinem Blog beschrieben.

Info zu Google Chrome

Mittlerweile liegt Chrome in Version 4.0.249.78 vor. Basis ist Chromium, ein Open Source-Projekt, dass die Entwickler von Google erweitert und gebrandet haben.

Seit einiger Zeit gibt es die Möglichkeit Extensions zu installieren. Das sind kleine Erweiterungen, wie man sie vielleicht vom Firefox kennt.
Sowohl im privaten Bereich, als auch auf der Arbeit benutze ich im Firefox eine Vielzahl an Erweiterungen. Was sich nicht unbedingt positiv auf die Ladezeit und den Arbeitsspeicher auswirkt.
Google Chrome bringt mächtig PS auf die Strasse. Schneller Seitenaufbau und besonders JavaScript-lastige Seiten bauen sich im Chrome rasend schnell auf.

Dieses Wochenende habe ich mal einige Extensions ausprobiert und möchte Sie hier kurz vorstellen.