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.

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.