Development (11)


Alles Neue macht der Januar…

… macht er das?
Man weiß es nicht. Jedenfalls habe ich schon lange überlegt, meinem Blog mal ein neues und (vor allem schlankeres) Aussehen zu verpassen.
Mangels Zeit und mangelnder gestalterischer Qualitäten habe ich mich einfach eines fertigen Themes bedient.
Das hört auf den Namen Material for Coders und ist genau das, was ich mir momentan so vorgestellt habe.
Schlank, schick und responsive. Der Content steht hierbei im Vordergrund.

Den Ansatz des Themes habe ich im ersten Schritt aufgegriffen.
Ein wenig Redundanz, was den Header-Bereich angeht, ist noch vorhanden, wird aber sukzessive reduziert werden.
Die ehemalige Header-Grafik wird in reduzierter Form wiederkommen – allein um den Wiedererkennungswert beizubehalten.
Weitere gravierende Änderungen hier einmal im Schnelldurchlauf:

  • keine Werbung mehr
  • kein Archiv, keine Kategorien – interessiert eh Keinen
  • keine Sidebar mehr
  • kein Stilbruch mehr auf mobilen Geräten
  • schnellere Ladezeiten durch verzicht auf Schmuck-Grafiken
  • keine Social-Media-Buttons in jedem Beitrag

Über die nächsten Tage, Wochen, Monate werde ich hier und da Dinge anpassen und weiter optimieren.
Ferner werde ich versuchen ein wenig mehr den Fokus dieses Blogs auf meine Erfahrungen aus der Welt der Webentwicklung zu legen.
Weniger privater Kram, mehr aus dem Nähkästchen eines Web-Entwicklers.
Ich schreibe mir hier bewusst keine Quote auf die Fahne, da gerade in diesem Jahr einige private Dinge anstehen, die eine deutlich höhere Priorität genießen.
Wer weiß, vielleicht lasse ich mich dazu hinreißen gegen Mitte/Ende des Jahres 2016 hier darüber zu berichten.

Spannend finde ich die Geschichte, die der Yellowled da in seinem Blog veranstaltet. Nämlich ein Live-Redesign. Kann ich aber im Moment nicht mit meiner Work-Life-Balance vereinbaren. 😉




Mein Setup bei dassetup.de

dassetup_florian_fischer

Der Martin Sauer, evtl. besser bekannt als Admartinator adaptiert auf seiner Webseite Das Setup die erfolgreiche Umsetzung von The Setup.

Ich finde es ganz interessant, welche Setups die Blogger und Webmenschen hierzulande einsetzen.
Da ich auch gerne meine aktuelle Systemlandschaft den Leuten da draussen präsentieren wollte, habe ich das einfach mal nieder gepinnt und der Martin hat das auf seiner Webseite veröffentlicht.

Wenn es Euch also interessieren sollte, womit ich so meinen Kram im Web publiziere, dann schaut doch mal rein.
Mein Setup gibt es hier.




Compass – CSS Framework unter Windows verwenden

Compass ist ein CSS-Framework zur Erstellung von Websites.

Im Prinzip ist Compass eine große Sammlung an Mixins für SASS und hat darüber hinaus diverse
Helfer-Tools im Gepäck. Zum Beispiel solche, um automatisiert CSS-Sprites zu generieren.

Wie man ein erstes Compass Projekt auf einer Windows-Kiste an den Start bringt möchte ich Euch heute beschreiben.




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




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>