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.

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.

201527Mai

Mobile Apps: Entwicklung mit einer JavaScript-Codebasis

Es ist wieder Zeit für eine Matrix: Diesmal geht es um die Entwicklung von mobilen Apps mit einer zentralen JavaScript-Codebasis. Dies wird mit bestimmten Frameworks möglich, die Cross-Plattform-Support durch HTML oder eine dynamische Runtime ermöglichen. Zu diesem Thema habe ich daher die Mobile App Framework Matrix entwickelt. Sie zeigt Technologien auf, mit denen sich iOS-/Android-Apps durch einen zentralen JavaScript-Code entwickeln lassen. Webentwickler sollen sich ein Bild von den derzeitigen Technologien und ihren Kehrseiten machen können.

Mobile App Framework Matrix - iOS-/Android-Apps in JavaScript entwickeln

Da mobile Cross-Plattform-Apps unterschiedliche Anforderungen haben, eignet sich nicht jede Lösung für jedes Szenario. Wenn es um Erweiterbarkeit, Leistung und Skalierbarkeit geht, variieren die Frameworks in verschiedenen Bereichen.

Weiterlesen...
201514Mai

Tooltip.js: MouseOver-Skript mit HTML-Konfiguration

Vor 5 Jahren hatte ich ein Tutorial veröffentlicht, das die Entwicklung eines eigenen jQuery-Tooltip-Plugins beschreibt. Das daraus resultierende Plugin kann zwar immer noch eingesetzt werden, doch mittlerweile bieten sich andere Techniken an, um Seiten eine spezifische JavaScript-Funktionalität hinzuzufügen. Daher habe ich das Skript Tooltip.js entwickelt, das sich an AngularJS orientiert und auf eine HTML-Konfiguration setzt.

Tooltip.js - A basic mouseover tooltip script

Dementsprechend können DOM-Elemente per data-Attribut mit der Tooltip-Funktionalität versehen werden. Anschließend wird noch ein Tooltip-Text benötigt, der aus dem entsprechenden title-Attribut gelesen wird. Über einen JSON-Option-String lassen sich einzelne Tooltip-Elemente zudem anpassen.

Weiterlesen...