Tag: tricks

201509Sep

ShaderFrog: WebGL-Shader im Browser kombinieren

Für Entwickler von hardwarebeschleunigten Computer- und Browserspielen stellen Shader ein wichtiges Werkzeug dar, wenn es darum geht, besondere Effekte zu simulieren. Dabei stehen Entwicklern Fragment- und Vertex-Shader zur Verfügung, die unterschiedlich vom Grafikprozessor verarbeitet werden. Eine Hürde für angehende WebGL- oder OpenGL-Entwickler kann die dazu benötigte Mathematik sein, da Shader eine gewisse Komplexität aufweisen.
Für WebGL gibt es mittlerweile schon Tools wie das Shader Toy oder die GLSL Sandbox, mit denen sich der Shader-Code direkt im Browser bearbeiten lässt. Eine andere Variante stellt nun ShaderFrog dar, ein browsergestützter Shader-Editor, mit dem sich Shader auch kombinieren lassen.

ShaderFrog - WebGL Shader Editor and Composer

ShaderFrog bietet also die Möglichkeit, gewöhnliche Shader per Code (Basic Shader) oder einen zusammengesetzten Shadern (Composed Shader) aus mehreren Shadern zu erzeugen. Letzteres ermöglicht das Kombinieren bestehender Shader, ohne dass Code eingegeben werden muss. Die Shader können auf der Website ausgewählt werden. In einer Vorschau wird das Resultat des kombinierten Shader-Programms angezeigt. Werte lassen sich per Schieberegler oder Eingabefelder anpassen.
Fertige Shader lassen sich nach THREE.js exportieren. Wer seinen Shader in Unity, iOS oder reinem GLSL nutzen will, benötigt einen Pro-Account. Ein Marktplatz für Shader ist ebenfalls geplant, so dass Entwickler gezielt nach fertigen Effekten suchen können.

201506Sep

AngularJS: Artikel für den Einstieg in Angular 2

Es wird noch eine Weile dauern, bis Angular 2.0 erscheinen wird: Ein offizielles Release-Datum gibt es nicht, es ist von Ende 2015, aber auch von 2017 die Rede. Dennoch können sich interessierte Entwickler schon jetzt mit der kommenden Version des MVW-Frameworks vertraut machen. Auf der neuen AngularJS-Website steht die Alpha-Version zum Download bereit und zudem gibt es verschiedene Einführungen in das Framework.

AngularJS - Superheroic JavaScript MVW Framework

Jetzt wurde noch eine weitere Website von Thoughtram ins Leben gerufen, auf der ausgesuchte und hochqualitative Artikel zum Thema Angular 2.0 bereitgestellt werden. Die Seite trägt den Namen "Exploring Angular 2" und ist bisher in diese Kategorien unterteilt: Getting Started, Dependency Injection, Routing, Views and Rendering und Migration / Upgrade. Die Seite wird zukünftig um weitere Anleitungen ergänzt werden und sollte bei AngularJS-Entwicklern daher einen Platz in den Lesezeichen finden.

201501Sep

JavaScript: Schnelleinstieg in ES6 durch ES5-Vergleich

Für den kommenden JavaScript-Standard gibt es mittlerweile eine große Auswahl an Artikeln, Einführungen, Playgrounds, Polyfills oder Use-Cases. Zudem stehen schon ausführliche Beschreibungen bereit, in denen gezeigt wird, wie sich ES6 schon jetzt für Projekte einsetzen lässt.
Der Entwickler Alex Bardanov hat vor kurzem noch ein nützliches GitHub-Repository erstellt, in dem die Unterschiede von ECMAScript 5 und 6 direkt aufgezeigt werden.

JavaScript - Comparison between ECMA5 and ECMA6 features

Das Repository ist unterteilt in die Kategorien Arrows, Classes, Enhanced Object Literals, Template Strings, Destructuring, Default / Rest / Spread, Let / Const, Iterators / For..Of, Generators und Modules. Sogar das Array Comprehension-Feature von ES7 wird beleuchtet. Das Repository kann sehr gut als Schnelleinstieg genutzt werden, da lediglich Snippets von ES5- und ES6-Code zugrunde liegen und miteinander verglichen werden können.

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.