In diesem Bereich findet Ihr Artikel, Tipps und Anleitungen (Tutorials) zu den Themen Webdesign, Photoshop, CSS, XHTML, JavaScript, jQuery, Flash, Typo3 und Textpattern.

Die Beiträge richten sich sowohl an Einsteiger als auch an Fortgeschrittene und sollen bei der täglichen Arbeit im Web-/Grafikdesign helfen.

201623Jan

JavaScript: Richtige Bedingung für globale Variablen

In JavaScript stößt man hin und wieder auf Besonderheiten, die nicht immer begründet werden können. Wie der Interpreter arbeitet, leuchtet daher nicht in jedem Fall ein. Eine dieser Besonderheiten stellt die Überprüfung von globalen Variablen dar. Hierzu gibt es zwei Möglichkeiten, die sich allerdings in ihrer Art unterscheiden. Das folgende Code-Snippet erzeugt einen Fehler, wenn die globale Variable testVar nicht vorhanden ist.

  • if (testVar) {
  • // Code
  • }

Wer globale Variablen verwenden will, erzeugt diese am besten mit var oder window.variablenName. Und hieraus ergibt sich eine Logik zur Überprüfung, die sich anders verhält: Wenn beim Überprüfen von globalen Variablen, die (noch) nicht vorhanden sind, der window-Namespace vorangestellt wird, schlägt der JavaScript-Interpreter nicht mit einem Fehler aus. Eine bessere Überprüfung könnte dann so aussehen:

  • if (window.testVar) {
  • // Code
  • }

Generell sollten natürlich so wenig globale Variablen wie möglich verwendet werden, um Konflikte mit anderen Bibliotheken zu vermeiden. Daher eignen sich Namespaces oder eine IIFE bestens, um diesem Problem vorzubeugen.

201514Aug

Node.js: Seiten automatisch neu laden mit AutoReload

Die Entwicklung einer Webanwendung oder Website beginnt für gewöhnlich in einer lokalen Umgebung. Unabhängig davon, ob serverseitige Skriptsprachen wie PHP, C#, Java oder JavaScript zum Einsatz kommen, müssen das User Interface und HTML-Templates umgesetzt werden. Beim Entwickeln von HTML-Vorlagen stellt das automatische Aktualisieren des Browserfensters eine große Hilfe dar und ist mittlerweile fast selbstverständlich geworden. Dieser Prozess lässt sich auch sehr gut mit Node.js umsetzen.

AutoReload - Browserfenster automatisch aktualisieren

Ich habe dazu das Skript "AutoReload" geschrieben, das einen lokalen Webserver für statische Dateien erstellt und anschließend auf Änderungen von Dateien wartet. Findet eine Dateiänderung statt, wird die entsprechende Seite im Browser neu geladen. AutoReload basiert auf den Modulen connect, connect-livereload, serve-static, tiny-lr und chokidar. Die rund 50 Zeilen Code stehen als Gist bereit. Das Skript wird einfach über die Konsole per Befehl ausgeführt und kann als Argument oder nach dem Start eine Pfadangabe entgegen nehmen, die zum Wurzelverzeichnis der lokalen Website führt.

201526Jul

JavaScript: Einfache Implementierung von sprintf

Bei der täglichen Arbeit mit JavaScript ist das Zusammensetzen (Concatenation) von Zeichenketten (Strings) eine wiederkehrende Aufgabe. Grundsätzlich lassen sich Strings mit dem "+"-Operator verketten. Wenn es sich um längere oder komplexere Teile handelt, die zu einer großen Zeichenkette zusammengefügt werden müssen, kann die Methode mit dem "+"-Operator schnell unübersichtlich werden.
Etwas eleganter wäre hier die Verwendung einer gängigen Concat-Methode wie sprintf, bekannt aus C++ und PHP. Eine einfache Variante der populären sprintf-Funktion lässt sich beispielsweise mit einer Erweiterung des nativen String-Objekts umsetzen. Diese könnte aussehen wie folgt:

  • String.prototype.sprintf = function() {
  • var counter = 0;
  • var args = arguments;
  •  
  • return this.replace(/%s/g, function() {
  • return args[counter++];
  • });
  • };

Anschließend können Zeichenketten auf diese Weise zusammengesetzt werden:

  • var str1 = "%s Welt".sprintf("Hallo");
  • var str2 = "%s ist ein schöner %s".sprintf("Heute", "Tag");

Dies stellt wie erwähnt eine sehr einfache Implementierung dar. Es sind keine Typspezifizierungen, benannte Argumente oder bestimmte Umrechnungen (wie %d) möglich. Wer derartige Features benötigt, greift beispielsweise zu sprintf.js. Für einfache Zusammensetzen von Textbausteinen genügt diese Variante jedoch aus und liest sich besonders bei komplexeren Verkettungen einfacher als die "+"-Variante.

201509Jul

Windows: Ordner per Kontextmenü in Konsole öffnen

Wer mit Node.js arbeitet, wird hauptsächlich mit der Konsole arbeiten. Das verwendete Betriebssystem spielt dabei keine Rolle. Im produktiven Einsatz wird in der Regel die entsprechende Konsole (cmd.exe/Terminal) gestartet und anschließend zum gewünschten Verzeichnis navigiert (per cd). Alternativ kann auch ein entsprechender Ordner per Drag 'n' Drop in das Konsolenfenster gezogen werden, um die vollständige Pfadangabe zu erhalten.

Windows - Ordner per Kontextmenü in Konsole öffnen

Unter Windows geht es aber noch einen Schritt schneller: Über einen kleinen Eintrag in der Windows-Registrierung lässt sich allen Ordnern ein Eintrag im Konextmenü hinzufügen, über den dann direkt die Konsole mit dem entsprechenden Pfad geöffnet werden kann. Der vollständige Pfad inklusive Parameter lautet:

  • [HKEY_CLASSES_ROOT\Directory\shell\console\command]
    @="cmd.exe /k cd \"%V\""

Zusätzlich kann im "console"-Bereich (diese Bezeichnung kann frei gewählt werden) noch ein Icon gesetzt werden. Die ZIP-Datei enthält die fertige Registrierungsdatei, die nur noch per Doppelklick aktiviert werden muss.