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.

201622Jan

CoreSheet: Responsives Sass/CSS3-Framework

Für die Websites meiner Open Source-Projekte habe ich bisher eine CSS-Codebasis sowie ein entsprechendes HTML-Template eingesetzt. Da ich den CSS-Code stetig erweitert habe, ist daraus schließlich ein eigenes Framework entstanden. Es hat eine eigene Website erhalten und steht ab sofort bei GitHub, NPM und Bower zur Verfügung: CoreSheet stellt ein responsives Sass/CSS3-Framework dar, das ein prozentuales Grid-System sowie verschiedene Komponenten enthält. Dazu zählen gestaltete Formulare, Tabellen, Navigationsmenüs, Schaltflächen sowie ein Sticky Footer.

CoreSheet - Responsive Sass/CSS3 framework including a grid system

CoreSheet an sich ist kompakt und beinhaltet nur rudimentäre CSS-Resets und -Normalisierungen. Das primäre Layout setzt sich aus einem horizontal zentrierten Container und den Spalten des Grid-Systems bzw. Rasters zusammen. Das Grid-System ist wie alle anderen Komponenten konfigurierbar, so dass die Anzahl der Spalten und die Breite der Stege eingestellt werden können. Es gibt einen zentralen Breakpoint bei 767px, bei dem alle Elemente umbrechen und auf die volle Breite des Fensters gestreckt werden. Mit den bestehenden Konzepten und Elementen von CoreSheet können direkt responsive Seiten-Layouts erstellt werden. Die Grundidee besteht in einem minimalistischen Framework, das durch eigene Stile erweitert und so auf das Erscheinungsbild (Corporate Design) des eigenen Projekts zugeschnitten wird.
Es gibt zudem Themes, die als Vorlage genutzt werden können. Die Kompilierung der SCSS-Dateien erfolgt durch Gulp. Durch die beiliegende gulpfile.js werden die Sass-Dateien von CoreSheet (Framework, Konfiguration und Theme) eingelesen und die finale CSS-Datei inklusive der minifizierten Variante werden erzeugt. Ein Watcher für die Echtzeit-Aktualisierung ist ebenfalls enthalten.