cmff.de

keyboard_arrow_right Menü

www (22)


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.



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



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



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>


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.



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.


Tuts+ Translator

Neueste Beiträge

Neueste Kommentare

Blogroll

cmff.de, 2024. Theme Material for Coders