Tag: tricks

Webentwicklung: Traits in Javascript nutzen

Zur Erweiterung der objektorientierten Programmierung in JavaScript bieten sich verschiedene Bibliotheken und Plugins an — größere Frameworks wie MooTools oder Prototype besitzen von Haus aus schon erweiterte Möglichkeiten wie etwa ein Klassen-System. Um in JavaScript die Vorteile von "Traits" nutzen zu können, kann die kleine Bibliothek "Traits.js" genutzt werden. Bei einem Trait können Funktionen innerhalb eines Objekts gespeichert werden und anderen Funktionen verfügbar gemacht bzw. vererbt werden.

Hier ein einfaches Beispiel, bei dem ein eine Funktion als Komposition an eine andere Funktion übergeben wird.

• function ausserhalb(wert1) {
• return Trait({
• aussenFunktion: function() { return wert1; }
• });
• }
•  
• function funktion1(wert2) {
• return Trait.create(
• Object.prototype,
• Trait.compose(
• ausserhalb("test1"),
• Trait({
• innenFunktion: function() { return wert2; }
• })));
• }
•  
• var objekt1 = funktion1("test2");
• objekt1.aussenFunktion(); // Ausgabe: test1

Komplexere Beispiele für die Anwendung von Traits finden sich bei den Tutorials der Website. Die Trait-Bibliothek nutzt zudem die neue Object-Manipulation API von ECMAScript 5.

Webdesign: Muster für interaktive Bedienelemente

Umfangreiche und anschauliche Bücher stellen neben Ressourcen aus dem Internet die beste Methode dar, um sich mit einem Thema vertraut zu machen. Ein schönes Werk zum Thema Web-Benutzeroberflächen stellt beispielsweise ein Buch vom O’Reilly-Verlag dar, in dem Prinzipien und Entwurfsmuster für interaktive Web-Auftritte behandelt werden. Passend zum Buch gibt es eine Website, auf der sich die Inhalte des Buches in einer kurzen Übersicht betrachten lassen. Weiterhin finden sich auf der Seite aber auch interessante Blog-Artikel: In diesem Beitrag werden 12 Beispiele zu bekannten Bedienelementen vorgestellt und beschrieben.

Dabei geht es also hauptsächlich um die Gestaltung und Darstellung von Spalten, Tabellen, Suchergebnissen, Formularen, Paletten oder sonstigen Anwendungsbereichen. In dem Beitrag finden sich zu jedem Entwurfsmuster verschiedene Screenshots von vorbildlichen Beispielen.
Weiterhin gibt es in dem Blog schöne Beiträge über Web-Komponenten oder interaktive Steuerelemente von Websites. Einen guten Artikel über die zukünftige Welt des User Interface Designs gab es übrigens im Februar bei WebDesignerWall.

Cuzillion: Website-Komponenten analysieren

Ich habe beim Surfen eine interessante Seite gefunden, auf die ich früher schon einmal gestoßen war: Das Projekt "Cuzillion" von Steve Souders stellt ein nützliches Tool dar, mit dem sich verschiedene Komponenten einer Website konfigurieren und testen lassen. Zu den Komponenten zählen Inline-Skripte, verlinkte Skript-Dateien, externe Stylesheets, Bilder und iframes. Mit dem Werkzeug lassen sich beliebige Blöcke in einem fiktiven HTML-Konstrukt platzieren und anpassen. Anschließend kann die Ladezeit getestet und die optimale Reihenfolge der Komponenten ermittelt werden.

Steve Souders ist ein Spezialist, was Komprimierung und Caching von Websites angeht. Ein interessanter Punkt, den er aufzählt, stellt beispielsweise die Tatsache dar, dass Firefox maximal 2 Dateien parallel herunterlädt, während Internet Explorer 8 bis zu 6 Elemente synchron laden kann. Cuzillion ist also dafür gedacht, Differenzen der verschiedenen Browser ausfindig zu machen und zu verstehen. Die Konfigurationen der Komponenten können als permanente Links verschickt und somit von mehreren Entwicklern verwendet werden.

Webentwicklung: PHP-Endung bei URLs entfernen

Mit .htaccess-Befehlen lassen sich wichtige Aspekte der Suchmaschinenoptimierung umsetzen. Neben 404-Fehlerseiten oder dem Entfernen der "www"-Subdomain zählen vor allem saubere URLs zu den Vorzügen von .htaccess-Dateien. Wer eine einfache Website mit PHP realisiert hat und verschiedene Dateien in Form von "http://www.domain.com/name-der-seite.php" vorliegen hat, kann bei Bedarf die Erweiterung ".php" mit ein paar Zeilen .htaccess-Code ausblenden. Bei stuntSnippets findet sich dazu ein kleiner Artikel, in dem die Thematik behandelt wird.

Neben diesem Beitrag finden sich bei stuntSnippets noch weitere interessante Code-Bausteine, so dass die kleinen Lösungen der Seite in vielen Fällen behilflich sein dürften.
Unabhängig davon folgt hier noch ein kleines .htaccess-Snippet, durch das saubere URLs mit PHP und einer Struktur im Stil von "index.php?id=seite" erreicht werden können:

• RewriteEngine On
•  
• RewriteCond %{REQUEST_FILENAME} -f [OR]
• RewriteCond %{REQUEST_FILENAME} -d
• RewriteRule ^(.+) – [PT,L]
•  
• RewriteRule ^(.*) index.php?id=$1
• RewriteRule ^(.*)/(.*) $2

Weitere nützliche .htaccess-Snippets finden sich unter Anderem hier.

JavaScript: Vergleich verschiedener Kompressoren

Wenn es darum geht, komprimierten JavaScript-Code im Web auszugeben, bietet sich Minification (oder "Minify") an — dadurch werden unnötige Zeichen (etwa Zeilenumbrüche, Trennzeichen oder Kommentare) vom Quellcode entfernt, ohne dabei die Funktionalität des Skriptes einzuschränken. Zusätzlich werden alle Variablen und Funktionen durch einstellige Bezeichnungen ersetzt (Shrinking) und die Zahl von wiederkehrenden Zeichen wird durch eine Base64-Komprimierung, welche vom Browser dekomprimiert werden kann, reduziert. Wenn zudem eine serverseitige GZip-Komprimierung erfolgt, kann sehr viel Speicherplatz eingespart werden.
Da es verschiedene Kompressoren gibt (JSMin und Packer zählen zu den beliebtesten Projekten), lohnt sich ein Blick auf die Unterschiede der Komprimierung. Hierzu kann der CompressorRater verwendet werden, der verschiedene Kompressoren auf JavaScript-Code anwendet und entsprechende Kompressionsraten grafisch darstellt.

Die Überschrift des CompressorRaters lautet "JavaScript Compressor and Comparison Tool", denn auf der Seite können auch die verschiedenen Resultate des komprimierten JavaScript-Codes angesehen und kopiert werden. Zu den verfügbaren Kompressoren zählen JSMin, Packer, Dojo ShrinkSafe sowie der YUI Compressor. Nützlich sind die aufgeführten Beispiele, zu denen große JavaScript-Frameworks zählen. Hier lohnt sich Minification besonders und somit kann ein Vergleich hilfreich sein.

Webentwicklung: Sammlung etlicher PHP-Snippets

Gute Snippet-Sammlungen finden sich mittlerweile häufig im Netz. Wer noch ein paar interessante PHP-Snippets sucht, sollte bei PHPSnippets.info vorbeischauen. Hier werden in kurzen Zeitabständen nützliche Code-Schnipsel aus unterschiedlichen Bereichen veröffentlicht. Dabei handelt es sich um knappe, aber hilfreiche Funktionen, die zudem in Kategorien eingeteilt sind.

In den Snippets finden sich so beispielsweise Funktionen zur Währungsumrechnung oder automatischen Backup-Erstellung einer MySQL-Datenbank. Weiterhin gibt es ein Snippet, mit dem sich der Ursprung einer "TinyURL"-Adresse anzeigen lässt.
Die Seite dürfte einen Platz in den Lesezeichen finden, da auch in der kommenden Zeit sicherlich weitere Snippets folgen werden.

JavaScript: Alternative Methoden für If-Bedinungen

In Skriptsprachen stellt eine If-Bedingung die einfachste Form einer Abfrage dar, mit der sich Variablen und Objekte überprüfen lassen. Auch wenn If- und Switch-Bedingungen eine einfache Möglichkeit zur Überprüfung darstellen, gibt es oft elegantere Wege für die Erstellung von Kontrollstrukturen. Einige Optionen zeigt so auch Angus Croll in einem Blog-Eintrag. Darin erklärt er verschiedene Alternativen und geht dabei auf die Aspekte "Statement-Branching" (Ersatz von if, else, switch, for, while) und "Micro-Branching" (Nutzung von && und ||) ein.

So lassen sich in der Regel längere If-Bedinungen beispielsweise durch die Verwendung des "||"-Operators verkürzen. Weiterhin können Switch-Abfragen durch in Objekte verschachtelte Funktionen ersetzt werden. Der Artikel dürfte für objektorientierte Entwicklung in JavaScript einen Blick wert sein.

CSS: Mehr Möglichkeiten mit Conditional Comments

Eine Methode, um gesonderte Stile für verschiedene Versionen des Internet Explorers auszuliefern, stellen neben CSS-Hacks die beliebten "Conditional Comments" dar. Hierbei können durch spezielle Bedingungen im HTML-Code entsprechende Browser-Versionen angesteuert werden. Es bleibt dem Entwickler überlassen, was in dem "if"-Bereich definiert wird. Paul Irish empfiehlt beispielsweise in einem älteren Artikel die Benutzung von unterschiedlichen IDs für den body-Bereich — dadurch entfallen browserspezifische Stylesheets und auch CSS-Hacks werden überflüssig.
Ein Stück weiter hinten setzt man bei Impressive Webs an: Kürzlich wurde ein schöner Beitrag veröffentlicht, in dem erweiterte Möglichkeiten für Conditional Comments vorgestellt werden.

Dabei werden diverse Deklarationen beschrieben, die vielleicht nicht jedem CSS-Entwickler bekannt sind. So können noch genauere Angaben für den gewünschten Browser gemacht werden und auch erweiterte Operatoren wie "&" oder "|" sind in Verbindung mit Subexpression-Operatoren (Klammern) möglich. Der Artikel dürfte bestimmt für das eine oder andere Web-Projekt nützlich sein und sollte in den Bookmarks abgelegt werden.