Tag: javascript

201618Mai

GearAward: Digitale Kunstwerke von JavaScript-Künstlern

Dass sich mit HTML5, JavaScript und Canvas bzw. WebGL auch künstlerische Projekte umsetzen lassen, dürfte mittlerweile klar sein. Auf Seiten wie der GLSL Sandbox oder CreativeJS lassen sich derartige Werke begutachten. Eine weitere Seite, auf der digitale JavaScript-Kunstwerke gesammelt werden, stellt nun auch GearAward dar. Hier werden sämtliche 2D- und 3D-Effekte aufgelistet, die auch den dazugehörigen Quellcode beinhalten.

GearAward - Code-driven art

So finden sich dort etliche Canvas-Animationen, aber auch interessante WebGL-Beispiele wie etwa die THREE Image Transition, die aufwendige Bildübergänge auf Basis von THREE.js demonstriert. Bei GearAward dürften sich in der nächsten Zeit sicherlich noch mehr Beiträge finden, so dass man die Seite als Inspirationsquelle im Auge behalten sollte.

201629Mär

WebGL: Einführung in GLSL und 3D-Grundlagen

Wer sich für das Gebiet der 3D-Grafik interessiert und diese zudem im Browser darstellen möchte, kommt an WebGL und den Grundlagen von 3D-Grafikprogrammierung nicht vorbei. Es handelt es sich um ein mittlerweile sehr komplexes Feld, zumal auch die Anforderungen an dreidimensionale Darstellungen steigen. Bei WebGL handelt es sich um ein Subset von OpenGL, genauer gesagt basiert WebGL auf OpenGL ES (OpenGL for Embedded Systems). Es gibt ein paar Unterschiede im Vergleich zur OpenGL-API und was Shader betrifft, stehen in WebGL lediglich Vertex- und Fragment-Shader zur Verfügung — mit diesen beiden Arten von Shadern lassen sich dennoch aufwendige Effekte erzielen.

Can I use - WebGL 2016

Wenn man einen Blick auf die Browser wirft, die WebGL derzeit ganz oder teilweise unterstützen, lässt sich folgern, dass etwa 85% der Webbrowser mit dem 3D-Standard arbeiten können.
Der Einstieg in die Materie ist in diesem Bereich nicht gerade einfach, deshalb empfiehlt sich eine Anleitung wie die von Ilya Pestov. Es handelt sich dabei um eine Übersetzung eines russischen Artikels, der wiederum einen guten Einstieg in WebGL darstellt. Es werden GL-Grundlagen, Shader sowie Matrizen behandelt und schließlich wird am Ende ein rotierender 3D-Würfel mittels GLSL und JavaScript erzeugt.

201628Jan

Nativefier: Native Electron-Apps per Kommandozeile

Ich hatte bereits über ein Tutorial sowie UI-Komponenten für das Chromium-Framework Electron berichtet. Damit lassen sich native Desktop-Anwendungen für Windows, Mac OS X und Linux auf HTML- und JavaScript-Basis erstellen. Wer es besonders einfach möchte, kann jetzt ein Node.js-Package namens Nativefier verwenden. Damit lassen sich mit einem Befehl per Kommandozeile Electron-Apps aus Web-URLs erzeugen.

Nativefier - Wrap any web page natively without even thinking, across Windows, OSX and Linux

Nativefier lädt das aktuelle Electron-Paket herunter und erzeugt die notwendigen Dateien, je nach Plattform. Um beispielsweise Google Maps in eine Electron-App zu packen, ist lediglich folgender Befehl nötig:

  • $ nativefier maps.google.com

Im "resources"-Verzeichnis befindet sich neben den spezifischen JavaScript-Dateien eine generierte nativefier.json, in der die Einstellungen abgelegt sind. Hier sind verschiedene Optionen für die App möglich, wie etwa die Fenstergröße oder die Einstellung des Hauptmenüs. Auf der GitHub-Seite finden sich gesonderte Anleitungen für die verschiedenen Betriebssysteme, um eine komplette Anwendung samt Icon zu erstellen.

201624Jan

X-Ray: Moderner Web-Scraper für Node.js

Dokumente einlesen und spezifische Daten ausgeben — das ist der Zweck von Screen-Scraping. Web-Scraper ermöglichen diese Funktionalität also für HTML-Dokumente und DOM-Elemente. Für Node.js gibt es bereits diverse Screen-Scraper wie Osmosis oder Scraper.js. Etwas mehr Komfort ist mit X-Ray möglich. Mit dem Node.js-Scraper lassen sich beispielsweise auch Paginierungen einbauen.

X-Ray - The next web scraper

Die Bibliothek bietet einfache Selektoren, um DOM-Elemente zu durchsuchen. Unterstützt werden Tags, Klassen, Attribute oder der Inhalt eines Elements. Zudem erlaubt X-Ray Delays und Throttling, wodurch Ajax-Inhalte ausgelesen werden können. Hier ein Beispiel-Snippet für ein einfaches Scraping:

  • var xray = require('x-ray');
  • var x = xray();
  •  
  • x('https://dribbble.com', 'li.group', [{
  • title: '.dribbble-img strong',
  • image: '.dribbble-img [data-src]@data-src',
  • }])
  • .paginate('.next_page@href')
  • .limit(3)
  • .write('results.json');

Das Ergebnis wird hier in eine JSON-Datei geschrieben, kann aber auch an eine weitere Funktion übergeben und darin verarbeitet werden.

201623Jan

JavaScript: Richtige Bedingung für globale Variablen

In JavaScript stößt man hin und wieder auf Besonderheiten, die nicht immer begründet werden können. Wie der Interpreter arbeitet, leuchtet daher nicht in jedem Fall ein. Eine dieser Besonderheiten stellt die Überprüfung von globalen Variablen dar. Hierzu gibt es zwei Möglichkeiten, die sich allerdings in ihrer Art unterscheiden. Das folgende Code-Snippet erzeugt einen Fehler, wenn die globale Variable testVar nicht vorhanden ist.

  • if (testVar) {
  • // Code
  • }

Wer globale Variablen verwenden will, erzeugt diese am besten mit var oder window.variablenName. Und hieraus ergibt sich eine Logik zur Überprüfung, die sich anders verhält: Wenn beim Überprüfen von globalen Variablen, die (noch) nicht vorhanden sind, der window-Namespace vorangestellt wird, schlägt der JavaScript-Interpreter nicht mit einem Fehler aus. Eine bessere Überprüfung könnte dann so aussehen:

  • if (window.testVar) {
  • // Code
  • }

Generell sollten natürlich so wenig globale Variablen wie möglich verwendet werden, um Konflikte mit anderen Bibliotheken zu vermeiden. Daher eignen sich Namespaces oder eine IIFE bestens, um diesem Problem vorzubeugen.

201619Jan

Vue.js: Modernes und kompaktes Reactive-Framework

Es gibt einen neuen Stern am Framework-Himmel, der sich neben anderen Web 3.0-Frameworks wie React, AngularJS oder Riot.js aufstellt: Es ist von Vue.js die Rede und es sei gleich vorab erwähnt, dass diese Bibliothek auf jeden Fall einen Blick wert ist. Sie vereint Konzepte von React und AngularJS, bleibt dabei aber einfach und dennoch komfortabel. Vue.js bietet reaktive Data-Bindings, um DOM und Daten zu synchronisieren. Es kommt mit einer Template-Sprache, Filtern, Directives, Komponenten und sogar Mixins.

Vue.js - Reactive Components for Modern Web Interfaces

Das Framework biete im Grunde alles, was eine moderne Webanwendung oder mobile App benötigt. Für Single-Page-Applications (SPAs) darf auch ein Router nicht fehlen. Hier ein Code-Snippet, welches Event Handling demonstriert. Der HTML-Code:

  • <div id="example-2">
  • <button v-on:click="say('hi')">Say Hi</button>
  • <button v-on:click="say('what')">Say What</button>
  • </div>

Und der JavaScript-Teil:

  • new Vue({
  • el: '#example-2',
  • methods: {
  • say: function(msg) {
  • alert(msg);
  • }
  • }
  • });

Die Entwickler hinter Vue.js haben sogar einen ausführlichen Vergleich mit den führenden Web-Frameworks zusammengestellt, in dem die einzelnen Unterschiede sowie Nachteile sehr genau beleuchtet werden. Hier wird auch die Funktionsweise von Vue.js noch deutlicher. Bei GitHub steht das Projekt bereit und hat mittlerweile Version 1.0 erreicht.

201618Jan

VerbalExpressions: Reguläre Ausdrücke leicht gemacht

Reguläre Ausdrücke sind auch in der Webentwicklung ein wichtiges Werkzeug, wenn es beispielsweise um die Validierung von Zeichenketten geht. Die Ausdrücke an sich können jedoch schnell sehr komplex werden und diese sind nicht immer leicht zu meistern. Zwar gibt es Tools zur Visualisierung von regulären Ausdrücken, allerdings hilft das nur bedingt.
Vereinfachen lassen sich die Ausdrücke aber dennoch: Zum Beispiel mit einer Bibliothek wie VerbalExpressions, die auch für JavaScript (Browser und Node.js) zur Verfügung steht.

VerbalExpressions - JavaScript Regular Expressions made easy

Dabei handelt es sich um eine Art Hochsprache für reguläre Ausdrücke, die solche durch einfache Funktionen generiert. So lassen sich verschiedene Bedingungen durch Chaining aneinander hängen. Mit Funktionen wie maybe() oder anythingBut() können dann komplexe Abfragen vereinfacht geschrieben werden:

  • var tester = VerEx()
  • .startOfLine()
  • .then('http')
  • .maybe('s')
  • .then('://')
  • .maybe('www.')
  • .anythingBut(' ')
  • .endOfLine();
  •  
  • var testMe = 'https://www.google.com';
  •  
  • if (tester.test(testMe)) {
  • alert('We have a correct URL'); // Output
  • } else {
  • alert('The URL is incorrect');
  • }
  •  
  • console.log(tester);
  • // Output: /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/

Die VerbalExpressions-Bibliothek steht bei GitHub bereit und gibt es gibt Portierungen für nahe zu jede Sprache, darunter PHP, Dart, Swift, Java, Lua und C#.

201615Jan

Chakra: Microsofts JavaScript-Engine wird Open Source

Wie seit kurzem auf dem MSEdge-Developer-Blog zu lesen ist, steht der Quellcode des Kerns der JavaScript-Engine "Chakra" jetzt bei GitHub bereit. Bei Chakra handelt es sich um die JavaScript-Engine von Microsoft, die seit Internet Explorer 9 im Einsatz ist. Bei GitHub steht nun "ChakraCore" zur Verfügung: Dabei handelt es sich um die Kernmodule der Engine, die sich aus verschiedenen Komponenten wie dem JIT-Compiler, dem Interpreter und der Runtime zusammensetzt. Mehr dazu findet sich in der Architektur-Übersicht.

ChakraCore - JavaScript-Engine von Microsoft nun Open Source

ChakraCore beherrscht ECMAScript 2015 und lässt sich zudem mit der JSRT-API (JavaScript Runtime) nutzen. So kann die Engine in eigenen Anwendungen genutzt werden. Der in C++ geschriebene Code kann für x86-, x64- oder ARM-Plattformen kompiliert werden. Dazu ist mindestens Windows 7 (mit SP1) sowie Visual Studio 2013 oder 2015 erforderlich. Eine Linux-Portierung der Engine ist laut Microsoft schon geplant.