Tag: entwicklung

201528Jul

JavaScript: Toast-Benachrichtigungen im Web verwenden

Benutzer von Android-Geräten werden sie kennen: Bei Toast-Benachrichtigungen handelt es sich um eine Nachricht, die für eine bestimmte Zeit am unteren Bildschirmrand angezeigt wird und nach einer gewissen Zeit ausgeblendet wird. In einer Webanwendung könnte diese Funktionalität für diverse Zwecke eingesetzt werden — so könnte beispielsweise der Benutzer darüber informiert werden, ob seine Formulardaten erfolgreich gespeichert wurden.
Wer eine Nachbildung der Android-Toast-Nachrichten für HTML sucht, kann einen Blick auf ToastIt.js werfen. Dabei handelt es sich um ein kompaktes Skript (alternativ NPM-Modul), das die entsprechende Benachrichtigung in den Browser bringt.

ToastIt.js - html toast messages

Die Demo zeigt das Skript in Aktion. Die Verwendung ist denkbar einfach:

  • toastit(text, timeout, options)

Bei den Optionen können Attribute gesetzt werden, die anschließend als CSS-Eigenschaft auf die ToastIt-Benachrichtigung übertragen werden.

201527Jul

JavaScript: Mehrzeilige Strings direkt einbetten

In JavaScript ist die Verwendung von mehrzeiligen Zeichenketten direkt im Code nicht ohne Umwege möglich: Entweder müssen die einzelnen Zeilen per "+"-Operator verbunden werden (Concatenation) oder sie müssen in einem Array abgelegt und anschließend per join() zusammengeführt werden. Mit ECMAScript 6 wird sich das ändern, da Template Strings auch das direkte Einbetten von mehrzeiligen Strings ermöglichen.
Wer allerdings noch nicht auf ES6 zurückgreifen möchte, kann auch das kompakte Multiline-Skript von Sindre Sorhus verwenden.

Multiline strings in JavaScript

Das Skript greift auf die toString()-Funktion zurück und eine mehrzeilige Zeichenkette wird in einer anonymen Funktion als Blockkommentar übergeben. Das Artikelbild zeigt eine beispielhafte Verwendung. Es sind sogar dynamische Platzhalter möglich:

  • var str = multiline(function(){/*
  • I love %s
  • */}), "unicorns");
  •  
  • // Ausgabe: I love unicorns

Multiline steht bei GitHub als NPM-Modul und als Browser-Skript zum Download bereit.

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.

201519Jul

JavaScript: Weitere nützliche Artikel zu ECMAScript 6

Aktuell tauchen immer wieder interessante Artikel und Anleitungen rund um den kommenden JavaScript-Standard ES6 auf, der längst durch Transpiler wie Babel genutzt werden kann. Zuletzt zeigten namhafte Entwickler auf, wie sich ES6 schon jetzt durch entsprechende Tools in Projekten nutzen lässt. Im vorherigen ES6-Round-Up ging es primär um Maps, Module und Template Strings.

ECMAScript 6 - Harmony

Die folgenden Artikel befassen sich mit Destructuring, Loops, Arrays, Promises und Module im Detail.

Der letzte Link zeigt nur auf einen Teilbereich bei Medium — dort findet sich eine ganze Reihe mit ausführlichen Erklärungen rund um ES6-Themen.

201518Jul

JavaScript: Grundätzliche Entwurfsmuster für Node.js

Wer als JavaScript-Entwickler mit Node.js anfängt, wird anfangs vermutlich auf einige Stolpersteine stoßen. In der Welt von Node.js gibt es ein paar Unterschiede im Vergleich zur klassischen Webentwicklung im Browser, da andere Konzepte vorliegen und eine entsprechende Programmierung erforderlich ist. Im Blog von Rising Stack findet sich dazu ein kompakter Artikel, der sich mit Entwurfsmustern für Node.js beschäftigt.

RisingStack - Fundamental Node.js Design Patterns

Zu den beschriebenen Entwurfsmustern (Design Patterns) zählen beispielsweise Singletons, Observer, Factories oder Dependency Injection. Singletons sind etwa mit statischen Funktionen vergleichbar und benötigen keine mehrfache Instanziierung. So können Singletons in Verbindung mit module.exports eine statische Klasse bilden, in der sich verschiedene Hilfsfunktionen finden. Schließlich werden in dem Beitrag noch kurz Middlewares und Pipelines beschrieben, die vor allem bei Anwendungsframeworks wie Express oder Koa zum Einsatz kommen.

201514Jul

Cola.js: Bibliothek für Constraint-Layout-Diagramme

Graphen und Diagramme, die auf einer kraftgelenkter Anordnung basieren (Force-Directed Graphs), können auch als "Constraint-Based Layout" bezeichnet werden. Für derartige Szenarien bieten sich Skripte wie Arbor.js oder Sigma.js an. Es gibt zudem noch eine weitere Bibliothek, die interessante Features bietet: Cola.js kann mit D3.js, SVG.js, aber auch mit THREE.js kombiniert werden, um kraftgelenkte Graphen zu zeichnen.

Cola.js - Bibliothek für Constraint-Diagramme

Die Graphen zeichnen sich durch eine ästhetische Anordnung aus, da sich möglichst wenige Linien, die eine gemeinsame Schnittstelle aufweisen, überlappen und die verbundenen Elemente immer einen gewissen Abstand zueinander beibehalten. Dieses Cola.js-Beispiel zeigt den Einsatz in Verbindung mit THREE.js. Dadurch werden auch dreidimensionale kraftgelenkte Diagramme möglich, dessen Umsetzung ohne eine spezielle Bibliothek einen gewissen Schwierigkeitsgrad darstellen würde. Auf der Website von Cola.js finden sich noch weitere Beispiele, das Skript selbst steht als NPM-Modul und in einer Web-Variante bei GitHub bereit.

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.

201508Jul

Indicative.js: JavaScript-Validierung mit Promises

Die Validierung von Benutzereingaben gehört bei Webanwendungen mittlerweile zur Grunddisziplin. Dafür bieten sich neben regulären Ausdrücken mittlerweile auch Micro-Frameworks an, wie beispielsweise is.js. Wer nach einer kompakten Bibliothek sucht, die das Definieren von Schemata erlaubt und zudem auf Promises basiert, sollte sich Indicative.js ansehen. Das Skript wurde von dem PHP-Framework Laravel inspiriert und erlaubt das Erzeugen von Validierungsregeln über JSON-Objekte.

Indicative.js - JavaScript-Validierung mit Promises

Auf der Website finden sich diverse Beispiele, die den Einsatz des Skripts demonstrieren. Interessant ist bei dem Ansatz, dass sich mehrere Regeln in einem Durchgang abarbeiten lassen. Mit ".then()" und ".catch()" können dann erfolgreiche Durchläufe und Fehlerbehandlungen integriert werden. Indicative.js integriert unter Anderem die is.js-Bibliothek und bietet zudem vordefinierte Regeln für Arithmetik, Datum/Uhrzeit, Strings, Typen und reguläre Ausdrücke. Die Bibliothek steht als npm-Modul bereit und kann per Browserify auch im Browser genutzt werden.