Tag: tricks

201515Sep

PostCSS: CSS-Preprocessor für Node.js-Build-Tools

Die moderne Entwicklung von Stylesheets findet heutzutage kaum noch in reinem CSS statt: Dank CSS-Präprozessoren wie SASS, LESS oder Stylus können Variablen, Funktionen (Mixins) und echte Verschachtelungen genutzt werden. Die Tools basieren auf systemspezifischen Bibliotheken und erzeugen den finalen CSS-Code mittels Ruby oder Node.js. Wer das ganze in sein bestehendes Frontend-Tooling integrieren möchte (beispielsweise in Grunt oder Gulp), sollte sich PostCSS ansehen.

PostCSS - Transforming styles with JS plugins

Dabei handelt es sich um ein Node.js-Modul, das laut den Entwicklern 2x schneller arbeitet als libsass, die eigentliche SASS-C++-Bibliothek. PostCSS macht zudem Gebrauch von dem CSS-Transpiler cssnext und ermöglicht so zukunftssicheres CSS. Die Integration des entsprechenden Gulp-Tasks könnte beispielweise so aussehen:

  • gulp.task('css', function () {
  • var postcss = require('gulp-postcss');
  • return gulp.src('src/**/*.css')
  • .pipe( postcss([ require('cssnext')(), require('cssnano')() ]) )
  • .pipe( gulp.dest('build/') );
  • });

Viel Spaß beim Ausprobieren!

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.

201515Aug

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.

201528Jul

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.