Tag: tipps

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...
201418Nov

Karma HTMLfile Reporter: Unit Test-Ergebnisse als HTML

Mit Karma steht seit geraumer Zeit ein komfortables Node.js-Modul zur Verfügung, mit dem sich automatisiert JavaScript-Unit Tests ausführen lassen. Dabei kann auf bekannte Test-Bibliotheken wie Jasmine, Mocha oder QUnit zurückgegriffen werden. Bisher hatte ich Karma in erster Linie bei AngularJS-Projekten im Einsatz und hier leistet es ganze Arbeit. Lediglich die Ausgabe der Unit Test-Ergebnisse in der Konsole störten etwas, weshalb ich ein Karma-Reporter-Plugin geschrieben habe, mit dem sich die Ergebnisse übersichtlich auf einer HTML-Seite ausgeben lassen.

Karma HTMLfile Reporter - Unit Test-Ergebnisse als HTML

Entstanden ist schließlich der Karma HTMLfile Reporter, der mittlerweile schon ein Jahr bei GitHub bereitsteht. Dennoch könnte es für einige Entwickler interessant sein, um sich einen besseren Überblick über die ausgeführten Unit Tests zu verschaffen.

Weiterlesen...
201410Nov

Firefox Developer Edition: Webbrowser für Webentwickler

Anlässlich des zehnjährigen Jubiläums von Firefox hat Mozilla heute die Firefox Developer Edition veröffentlicht, die speziell an Webentwickler gerichtet ist und verschiedene Tools zum Entwickeln moderner WebApps bietet. Der neue Browser soll vor allem das plattformübergreifende Arbeiten von einem Gerät aus erleichtern, was durch das Add-On "Valence" (zuvor: Firefox Tools Adapter) erreicht wird. Dabei handelt es sich um eine Erweiterung, welche die Anbindung an Android-, iOS- oder Firefox OS-Geräte (also Tablets und Smartphones) ermöglicht.

Firefox Developer Edition

Die Firefox Developer Edition besteht also in erster Linie aus dem aktuellen Firefox-Build, der WebIDE und dem Valence-Add-On: Damit können lokale WebApps aber auch Remote-Projekte mit den gängigen Firefox-Tools (Web-Konsole, Seiten-Inspektor, Javascript-Debugger, Netzwerkanalyse, Audio-Editor, etc.) untersucht werden. Die WebIDE enthält verschiedene Integrationen von Laufzeitumgebungen wie beispielsweise einem Simulator, einem Remote-Browser, einer Chrome Desktop-Anwendung, einer Firefox OS-App oder einer normalen Website. Für das Debuggen von Android-Apps wird natürlich ein entsprechender USB-Treiber für das angeschlossene Smartphone benötigt und die Android Debug Bridge (ADB) muss das Gerät per adb devices auflisten. Unter Mac OS X gestaltet sich der Prozess für iDevices etwas einfacher. Besteht schließlich eine USB-Verbindung, können die Tabs des Smartphone-Browsers mit dem Inspektor oder der Konsole bearbeitet werden. Schließlich ist noch ein Tool zur schnellen Kommunikation enthalten: Per Klick können Links erzeugt werden, die dann an andere Entwickler weitergeschickt werden können, wodurch eventuelle Probleme direkt im Browser-Chat diskutiert werden können.
Die Developer Edition von Firefox ersetzt damit den Aurora-Build und wird alle 6 Wochen neue Funktionen erhalten.

201413Okt

AngularJS: Directives und Services für Material Design

Die neuen Material Design-Spezifikationen von Google dürften mittlerweile in aller Munde sein. Dabei handelt es sich um Design-Guidelines, die unter Anderem bei Android 5.0 für die Optik eingesetzt werden. Die Guidelines enthalten etliche Richtlinien und Empfehlungen für die Gestaltung von interaktiven Anwendungen, die auf mehrere Endgeräte ausgelegt sind. Das "Material Design" orientiert sich dabei stark an haptischen Gegebenheiten wie taktilem Feedback.
Mit dem Paper Elements Sampler des Polymer Projects stehen bereits Web-Komponenten bereit, die den Ideen des Material Designs folgen. Nun haben einige Core-Entwickler von AngularJS und Ionic das Ganze auch für AngularJS umgesetzt.

Material Design for AngularJS Apps

Eine Demo-Seite gibt es hier. Es handelt sich in erster Linie um erweiterte Attribute für bestehende DOM-Elemente und Directives/Services. Ein Beispiel für einen Material Design-Button:

  • <md-button noink class="md-button-colored">
  • Button (noInk)
  • </md-button>

Die Directives bestehen aus etlichen Bedienelementen wie Schaltflächen, Listen, Radio-Buttons, Slider, Header, Schalter, Tabs, Toolbars und vielem mehr. Viel Spaß beim Ausprobieren!

201421Sep

React Starter Kit: Einstieg für das Facebook-Framework

Das Frontend-Framework React dürfte mittlerweile in aller Munde sein. Zusammen mit AngularJS zählt es zu den Next-Gen-JavaScript-Frameworks, die mit MVC-Konzepten auskommen oder gar darüber hinausgehen, wie es Facebook mit seiner Flux-Architektur zeigt.
Die neuen Frameworks sind durch ihre Komplexität nicht gerade leicht zu verstehen, weshalb es bereits diverse Bücher und Tutorials gibt. Für React gibt es jetzt bei GitHub das React Starter Kit, das den Einstieg erleichtern soll.

React - A JavaScript library for building user interfaces

Dabei kommen moderne Techonlogien zum Einsatz: Neben der eigentlichen React.js-Bibliothek zählen Gulp, Webpack, BrowserSync und Bootstrap zu den Bestandteilen des Starter Kits. Auch der Karma Test Runner ist mit an Bord, der schon in AngularJS zur Grundausstattung gehört, um Unit Tests mit Jasmine durchzuführen.
Das Skeleton des React Starter Kits ist leicht verständlich und dürfte für viele Einsteiger einige Hürden nehmen, da gerade die Komponenten sowie die Verwendung von JSX-Templates am Anfang eine Herausforderung darstellen können.

201427Aug

JavaScript: Black Box Driven Development als Grundlage

Konzepte wie private Methoden oder Information Hiding sind in JavaScript nicht sofort ersichtlich, aber mit den richtigen Design Patterns sind auch diese Bereiche einfach zu bewerkstelligen. Das Module Pattern hat sich hierfür schon seit langer Zeit bewährt und eigentlich sollte es mittlerweile zum Standard geworden sein, da es gegenüber der Prototype- und Konstruktor-Methodik via new nur Vorteile bietet: Kapselung, private Methoden und ein Interface-Objekt, das nach außen gereicht wird und später beliebig erweitert werden kann. Eine echte Vererbung ist in JavaScript in der Regel nicht notwendig, denn es gilt: Composition over inheritance. So können bestehende Pseudo-Klassen, die auf dem Module Pattern aufbauen, instanziiert und schließlich erweitert werden.

Black Box Driven Development in JavaScript

Dass dieses Entwurfsmuster als Grundlage für JavaScript-Projekte dienen sollte, ist auch bei Mozilla bekannt. Hier wird die Bezeichnung "Black Box Driven Development" gewählt und im entsprechenden Artikel werden anhand von einfachen Code-Beispielen die Vorteile des "Revealing Module Pattern" aufgezeigt.