Tag: tricks

201514Aug

Node.js: Module vergleichen mit NPMCompare

Wer Projekte mit Node.js umsetzt, wird die große Auswahl an fertigen Modulen zu schätzen wissen. Häufig gibt es für eine bestimmte Aufgabe nicht nur ein Modul, sondern gleich mehrere. Welches der vorhandenen Module dann passender für ein Projekt ist, hängt in erster Linie von den Anforderungen ab. Weitere Faktoren könnten beispielsweise Lizenz, letzte Änderungen, Issues, Downloads oder Abhängigkeiten zu anderen Modulen sein. Wenn derartige Faktoren von Modulen verglichen werden sollen, könnte eine Website wie NPMCompare hilfreich sein.

NPMCompare - Easily search and compare between npm packages

Auf der Seite können zwei oder mehrere Node-Module per Suchfunktion in den direkten Vergleich gebracht werden. Anschließend gibt es eine Auflistung verschiedener Bereiche: Versionsnummer, Links, Lizenz, letzte Änderungen, durchschnittliche Veröffentlichung von Versionen, zugehörige Entwickler, Abhängigkeiten, tägliche/wöchentliche/monatliche Downloads, Anzahl der Forks sowie offene Issues und Pull Requests.

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.

201521Jul

JavaScript: Desktop-Automatisierung mit Robot.js

Wer automatisierte Aktionen auf Betriebssystemebene ausführen möchte, kann dazu die Skriptsprache AutoHotkey verwenden. Hiermit lassen sich diverse Aufgaben ausführen, zu denen auch Maus- und Tastatureingaben gehören. Für den produktiven Einsatz habe ich damit bereits die Skripte MonitorMouseMover und Simple Alarm entwickelt, die auch bei GitHub bereitstehen.
Einen Haken gibt es bei AutoHotkey bisher allerdings: Die Skriptumgebung steht ausschließlich für Windows zur Verfügung. Das störte auch den Entwickler Jason Stallings, der mit Robot.js ein Node.js-Pendant für Mac OS X und Linux entwickelt hat.

Robot.js - Node.js Desktop Automation

Mit dem Skript lassen sich die absoluten Maus-Koordinaten auslesen und auch setzen, so dass der Mauszeiger an eine bestimmte Stelle auf dem Bildschirm bewegt werden kann. Weiterhin können Tastatureingaben gemacht werden und somit Texte eingefügt werden. Schließlich kann auch die Pixelfarbe unter der Mauszeigerposition ausgelesen werden. Laut Roadmap sind die Arbeiten am "Screen"-Bereich zu 10% abgeschlossen. Der Entwickler möchte hier noch erweiterte Funktionen wie etwa ImageSearch implementieren. Die Windows-Variante von Robot.js steht zudem auch noch aus, befindet sich aber in Arbeit.

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.

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.