Tag: tricks

201522Apr

JS.ORG: Subdomain für JavaScript-Entwickler per GitHub

Für JavaScript-Entwickler, die bereits über einen GitHub-Account verfügen, gibt es jetzt eine Möglichkeit, das eigene Github-User-Repository mit einer JS.ORG-Subdomain zu verknüpfen. Auf der Website finden sich die notwendigen Schritte: Im Grunde muss nur die gewünschte JS.ORG-Subdomain dem CNAME-Eintrag des User-Repositories hinzugefügt werden. Ob der gewünschte Domain-Präfix noch frei ist, kann hier eingesehen werden.

JS.ORG - Providing nice and free domains for GitHub Pages since 2015

Ist die CNAME-Datei erstellt und in das User-Repository übertragen worden, muss ein Pull-Request auf das JS.ORG-Repository gemacht werden. Der Entwickler verspricht, den gewünschten CNAME-Eintrag innerhalb von 24 Stunden der Liste hinzuzufügen. Die Domain ist dann aktiv und das User-Repository ist von diesem Zeitpunkt an nicht mehr über *.github.io, sondern *.js.org erreichbar.

201516Apr

Node.js: Skripte per Windows-Kontextmenü ausführen

Node.js-Entwickler, die in Windows unterwegs sind, können von der Anpassbarkeit des Systems Gebrauch machen und beispielsweise das Kontextmenü dazu nutzen, Node.js-Skripte direkt per Klick auszuführen. Dazu braucht es nur ein paar Einträge in der Windows-Registrierung sowie den dazugehörigen Befehl. Voraussetzung ist, das Node.js auf dem Rechner installiert ist. Dann lassen sich Skripte einfach über den Befehl cmd in Verbindung mit der Node-Anwendung ausführen.

Node.js - Skripte per Windows-Kontextmenü ausführen

Mit dem Parameter /k wird cmd dazu angewiesen, den Prozess nicht zu beenden. Das entsprechende Fenster, also die Eingabeaufforderung, bleibt in diesem Fall nach der Ausführung des Skripts bestehen. Wer hingegen nur das Skript ausführen und das dazugehörige Konsolenfenster direkt wieder schließen möchte, verwendet stattdessen einfach den Parameter /c.

Weiterlesen...
201528Mär

Node.js: Einfacher Webserver mit connect und serve-static

Ich habe das Skript schon seit einiger Zeit im Einsatz und mittlerweile dürfte es auch allgemein bekannt sein, wie sich mit Node.js und den Modulen connect und serve-static einfache Webserver einrichten lassen. Wenn es wirklich nur darum geht, schnell und unkompliziert HTML-, JavaScript- und CSS-Dateien auszuliefern, muss nicht gleich das umfangreiche Express.js-Framework verwendet werden. Mit dem folgendem Setup kann das Vorhaben schneller umgesetzt werden, da die genutzten Module kompakter ausfallen als Express.js.

Zuerst müssen dazu die beiden Module lokal installiert werden:

  • npm install connect serve-static

Anschließend kann der Webserver mit diesem Skript erzeugt werden:

  • var connect = require('connect');
  • var serveStatic = require('serve-static');
  • var http = require('http');
  •  
  • var app = connect().use(serveStatic(__dirname));
  •  
  • http.createServer(app).listen(3000);

Nach dem Start über die Kommandozeile ist der Server dann per http://localhost:3000 erreichbar. Das Skript steht auch als Gist bereit. Wer alternativ nach einer universellen Lösung für statische Webserver unter Windows und Mac OS X sucht, sollte einen Blick auf den Fenix Web Server werfen. Hier wird auch gleich noch eine Benutzeroberfläche geboten, welche per Klick die Verwaltung von mehreren lokalen Webservern und deren Neustart ermöglicht.

201516Mär

jQuery: Kurzanleitung für Deferred-Objekte und Promises

Um in JavaScript die sogenannte "Callback Hell" zu verhindern, können sich JavaScript-Entwickler seit jQuery 1.5 dem Deferred-Objekt und damit verbundenen Promises bedienen. Dabei handelt es sich um ein Konzept, mit dem sich asynchrone Programmabläufe besser steuern lassen. Dies kann beispielsweise bei Ajax-Abfragen, Animationen oder Benutzerinteraktionen der Fall sein.

jQuery - Kurzanleitung für Deferred-Objekte und Promises

Zusammen mit dem Deferred-Objekt können also Promises und entsprechende Funktionen wie $.then() und $.when() eingesetzt werden. Weiterhin können Callbacks mit .done() und .fail() ausgeführt werden, nachdem ein Promise aufgelöst (per resolve oder reject) wurde. Um die ganzen Begrifflichkeiten und den Zusammenhang von Deferred-Objekten und Promises besser zu verstehen, können Interessierte einen Blick in die Anleitung von Vasanth Krishnamoorthy werfen. Der Entwickler zeigt hier anhand eines einfachen Beispiels die Funktionsweise von Deferred-Objekten auf. Schließlich wird auch die synchrone Version des Beispiels aufgezeigt, wodurch das Konzept noch besser verständlich wird.

201511Mär

ANNE: Stack aus AngularJS, Node, Neo4J und Express

Für moderne Webanwendungen muss nicht immer ein LAMP-Stack (Linux, Apache, MySQL, PHP) her: Dank der Beliebtheit von Node.js und NoSQL-Datenbanken eröffnen sich Webentwicklern in diesem Bereich neue Möglichkeiten. Mit Node.js steht ein plattformunabhängiges Server-System bereit, das mit bestehenden NoSQL-Lösungen harmoniert. Zusammen mit dem Express-Framework, das sich mittlerweile als Quasi-Standard etabliert hat, werden neue Konstellationen möglich, um eine Webanwendung zu betreiben. MEAN (MongoDB, Express, AngularJS, Node.js) stellt einen dieser Technologie-Stacks dar.
Wer hier noch eine weitere Alternative sucht, könnte mit dem ANNE Stack (AngularJS, Node, Neo4J, Express) gut beraten sein: Hier kommt die Graph DB Neo4j zum Einsatz, die eine RESTful API bietet und über die Cypher-Syntax angesprochen werden kann.

ANNE Stack - AngularJS, Node, Neo4J and Express

In dem Blog-Eintrag von 42id wird der ANNE Stack anhand eines Problems beschrieben. Die dazugehörige Beispiel-Anwendung, ein System zur Verwaltung von Medikamenten, steht bei GitHub zum Download bereit. Der Stack dient in jedem Fall als Inspiration und gibt Einblick in eine mögliche Server-Anwendung auf Basis von Node.js.

201529Jan

is.js: Micro-Framework für Überprüfungen und Vergleiche

Dass nahezu alles in JavaScript wie ein Objekt behandelt wird, dürfte mittlerweile bekannt sein. Um den genauen Typ einer Variable herauszufinden, ist die Verwendung von "Object.prototype.toString()" nötig. Wer in seinem Projekt nicht unbedingt ein fertiges Framework einsetzt, das bereits mit Methoden zur Überprüfung und Validierung verschiedener Arten ausgestattet ist, kann einen Blick auf das Micro-Framework is.js werfen.

is.js - micro check library

Die Bibliothek ist denkbar einfach zu benutzen und bietet eine große Anzahl an fertigen Routinen zur Überprüfung von Variablen an. Dazu zählen Typ-Überprüfungen, reguläre Ausdrücke, Zeitangaben, Strings, mathematische Vergleiche und User-Agent-Variablen (Gerät, Betriebssystem, Browser, etc.).

Ein paar Beispiele:

  • is.email('test@test.com');
  • is.alphaNumeric('y3s');
  • is.weekend(new Date('07/03/1985'));
  • is.all.even([4, 2, 7]);
  • is.ios()

Mit der Bibliothek lässt sich also unter Umständen viel Zeit sparen. Die Größe der JavaScript-Datei in minifizierter Form beläuft sich auf rund 11 KB.

201521Jan

JavaScript: Nützliche Einführungen und Tipps für ES6

Die Spezifikationen der sechsten Edition von JavaScript (ECMA-262) wurden im Dezember 2014 aktualisiert und der Webstandard rückt der Fertigstellung ein Stück näher. Im Node.js-Bereich wird ES6 durch io.js noch mehr Beliebtheit erlangen und auch Angular 2.0 wird komplett auf ES6 aufgebaut sein. Wer die zukünftigen Funktionen der Skriptsprache nutzen will, kann dazu schon seit geraumer Zeit den Traceur-Compiler verwenden.
Kürzlich wurden einige interessante Artikel und Hilfestellungen veröffentlicht, die verschiedene Bereiche des Standards beleuchten.

Count Up to Version 6 of JavaScript

So handelt es sich beispielsweise bei count-to-6 um ein Node.js-Modul, mit dem eine interaktive Einführung in die Bereiche von ES6 zur Verfügung steht. Weiterhin empfiehlt sich ein Blick in die folgende Beiträge, die in den letzten Wochen entstanden sind:

Viel Spaß beim Ausprobieren!

201419Nov

THREE.BasicThirdPersonGame: Ein WebGL-Game-Starterkit

Für die englische Version meiner Website habe ich ein kleines WebGL-Spiel entwickelt, bei dem es sich um einfaches Jump 'n' Run-Prinzip im dreidimensionalen Raum handelt. Dabei kommen die Bibliotheken THREE.js (3D-Engine) und Cannon.js (Physik-Engine) zum Einsatz. Während der Entwicklung des Spiels ist die Idee zu einem kleinen Framework gekommen, das jetzt unter dem Namen THREE.BasicThirdPersonGame als Open Source-Projekt bereitsteht.

THREE.BasicThirdPersonGame - Game Starter Kit in THREE.js + Cannon.js

Dabei handelt es sich also um eine Basis für mögliche 3D-WebGL-Browserspiele, bei denen der Spieler aus der Perspektive der dritten Person verfolgt wird. Während THREE.js die Darstellung übernimmt, sind durch Cannon.js physikalisch korrekte Berechnungen möglich, was sich unter Anderem durch die Verwendung von Starrkörpern (Rigid bodies) auszeichnet. Eine virtuelle Spielwelt kann dank Rigid bodies mit Eigenschaften wie Gravitation, Reibung und Federung versehen werden.

Weiterlesen...