Trianglify - Algorithmically Generated Triangle Art

Die unter GPLv3 stehende Bibliothek Trianglify erstellt anhand von wenigen Parametern sehr ansehnliche SVG-Hintergründe. Version 2 von Trianglify hat keine Abhängigkeiten mehr. Die erste Version benötigte mit D3 noch eine sehr umfangreiche Bibliothek. Mit einer Größe von 35 kb ist Trianglify jetzt gut geeignet Webseiten mit einem ansprechenden, sich immer ändernden Hintergrund auszustatten.

Kore - Webservices in C programmieren

Kore ist ein in C geschriebenes Webapplication-Framework. Kore ermöglicht es sichere (es wird ausschließlich HTTPS unterstützt), gut skalierende Webservices und sogar Websites in reinem C zu programmieren. Es bietet sich an, wenn man einen Webservice aus einem nur in C oder C++ zur Verfügung stehenden Klasse/Framework erstellen will. Durch Kore spart man sich das meist aufwendige und fehleranfählige binding dieser Bibliotheken an eine für Webanwendungen gebräuchlichere Sprachen wie PHP, Java, JavaScript oder Python. Geschwindigkeitstechnisch ist davon auszugehen das die mit Kore erstellten Services schneller sind als z.B. mit SWIG erstellte Bindings, auch wenn diese Performanceunterschiede in der Praxis wahrscheinlich keine Rolle spielen werden.

Kore braucht zum builden keine Makefiles, ein Kore-Programm kann über den einfachen Aufruf:

kore run 

erstellt und ausgeführt werden. Weitere Informationen zu Kore bekommt man unter kore.io.

GarageGames - Torque 2D und Torque 3D sind OpenSource

Die beiden GameEngines Torque 2D und Torque 3D stehen jetzt unter der MIT-Lizenz. Bei Torque 2D handelt es sich um eine in C++ geschriebene 2D-GameEngine mit Unterstützung für Windows, OSX, Linux, iOS und Android. Spiele können dabei in C++ oder einer an C angelehnten Skriptsprache geschrieben werden. Die GameEngine unterstützt OpenGL, Box2D and OpenAL. Weitere Informationen zu Torque 2D können unter github.com/GarageGames/Torque2D gefunden werden.


Bei Torque 3D handelt es sich um eine 3D-GameEngine. Dem Entwickler oder Designer stehen mit der World Editing Suite die aus Shape Editor, Terrain Editor, Road & River Editor, Material Editor, Particle Editor und Decal Editor besteht zahlreiche Wekzeuge zum erstellen von Inhalte zur Verfügung.
GarageGames, der Entwickler der beiden Engines bietet auf seiner Webseite zahlreiche kostenpfichtigen Plugins für diese an.

Zepto - jQuery in klein

Zepto eine weitgehend mit jQuery kompatible, minimalistische OpenSource-JavaScript-Bibliothek für moderne Browsers. Dabei ist jedoch keine 100 prozentige Abdeckung der Funktionalität von jQuery gegeben. Der Vorteil von Zepto ist das die Bibliothek mit maximal 10k wesentlich kleiner ist als jQuery, was weitgehend durch die geringere Unterstützung älterer Browser erreicht wird. Zepto kann unter der MIT Lizenz auf zeptojs.com heruntergeladen werden.

Leaflet - Multi-Provider Karten

Die 33 kb große JavaScript-Bibliothek Leaflet ermöglicht es interaktive Karten in eine Webseite einzubinden, dabei ist man nicht an einen Karten-Provider gebunden, es ist möglich nahezu beliebige Anbieter von Karten zu verwenden. Das Einbinden von OpenStreetMap und GoogleMaps ist einfach zu umzusetzen. Leaflet wird von einer Vielzahl große Internetauftritte wie z.b Flicker verwendend. Es ist also davon auszugehen das es Ausreichend getestet und stabil ist.

Bei der Verwendung eines Providers müssen immer die entsprechenen AGBs beachtet werden so erlaubt z.B GoogleMaps keinen unbegrenzten Zugriff auf seine MapsApi. Ab einer gewissen Anzahl von Requests wird der Dienst dann für die entsprechende Webseite gesperrt. Weitere Informationen zu den Nutzungsbedingungen von GoogleMaps finden man hier.

Inzwischen muss man nicht mehr die langweiligen Standardkarten verwenden, auf den Seiten maps.stamen.com und mapbox.com können unterschiedliche Styles gefunden werden. Bei mapbox.com ist auch möglich einen komplett eigenen Style für eine Karte zu entwickeln. Allerdings ist das mit einigem Aufwand verbunden.

Babylon.js - WebGL GameEngine

Babylon.js ist eine unter Apache License 2.0 stehende 3D-Engine für den Browser. Sie steht in Konkurrenz zu tree.js, bietet aber mehr integrierte Funktionalität.

Zu den Features von Babylon.js zählen unter anderem: Ein implementierter Scenegraph für Modelle, Materials, Licht und Kameras. Eine Kollisions-Engine sowie eine Physik-Engine auf Basis von cannon.js. Es werden Animationen (auf Basis von Bones) und Partikel unterstützt. Die Standart-Materials unterstützen PerPixel-Lightning sowie die gängigen Texturemaps. Auf der Webseite stellen zahlreiche Demos die unterschiedlichen Features der Engine vor.

Babylon.js wird von Microsoft Entwicklern entwickelt. Und kann unter babylonjs.com heruntergeladen werden.

jsDelivr - Kostenloses CDN für JavaScript-Bibliotheken

Über den kostenlosen Service von jsDelivr können über 1000 JavaScript-Bibliotheken eingebunden werden. Bekannte Scripts wie jQuery, Ember.js, Angular.js oder auch die WebGL-Engines Babylon.js und three.js finden sich dort. Durch den Einsatz von Contend Delivery Networks (CDNs) kann die Last auf den eigenen Sever veringert werden, sowie die Ladegeschwindigkeit beim User erhöht werden, da die Scripte von einem möglichst nahe gelegenen Server geladen werden. Dabei sollte aber darauf geachtet werden dass möglichst alle Scripte beim selben CDN liegen um auflösen von zusätzlichen Domains zu vermeiden. Ein weiterer Vorteil ist das Scripts wie jQuery eventuell schon von einer anderen (fremden) Seite geladen wurden, so das diese nicht erneut geladen werden müssen. Browser greifen in diesem Fall auf eine lokal zwischengespeicherte Version des Scipts zurück. Diese "teilen" von JavaScript-Dateien ist nur über ein CDN möglich. Je verbreiteter das verwendete Script ist, desto höher sind die Chancen das es nicht erneut heruntergeladen werden muss.

Emmet - HTML und CSS in schnell

Bei Emmet, früher auch Zen Coding genannt, handelt es sich um ein Plugin für gängige Code-Editoren oder IDEs. Emmet generiert aus kurzen Anweisungen umfangreiche HTML- und CSS-Konstrukte. Dadurch kann das schreiben von HTML und CSS extrem beschleunigt werden. Inzwischen ist Emmet für die meisten Editoren und IDEs verfügbar. Es existieren Plugins für: Sublime Text, Eclipse, Netbeans, TextMate, Komodo Edit, Notepad++, Brackets usw. Eine vollständige Liste kann unter emmet.io/download gefunden werden.

Diagramme und Datenvisualisierung im Browser

Durch die immer besser werdende Unterstützung von Canvas und SVG in modernen Browsern müssen Diagramme und Visualisierungen nicht mehr serverseitig erstellt und als Bild ausgeliefert werden. Die Server werden durch die Visualisierung direkt im Client entlastet und bei einfachen Diagrammen nimmt auch die zu übertragende Datenmenge ab. Auch sind durch das rendern im Browser interaktive Diagramme möglich. Inzwischen existierten einige Bibliotheken die dem Entwickler bei der Umsetzung unterstützen. Nachfolgend werden drei freie Bibliotheken vorgestellt. Flotr2 und Chart.js eignen sich besonders für das erstellen einfacher Diagramme. D3 ermöglicht es darüber hinaus auch komplexe Visualisierung zu erstellen.

Chart.js ist in der gezippten Version nur 4,5 Kb groß. Es bietet 6 Diagrammarten: Linien, Baken, Radar, Kuchen, Doughnut und Polar-Diagramme werden unterstützt. Alle Diagramme können animiert werden. Die Verwendung ist einfach, die Konfiguration sowie die darzustellenden Daten werden als JSON übergeben.

Flotr2 ist mit 29,8 Kb größer als Chart.js, bietet aber mehr Funktionen und Möglichkeiten die Darstellung zu beeinflussen.

D3 steht für "Data-Driven-Documents" und ist eine Bibliothek für das Manipulieren und Visualisieren von Daten mit Hilfe von SVG. D3 ist Modular aufgebaut, so das nur die benötigten Funktionen geladen werden müssen. Im Gegensatz zu den beiden vorherigen Bibliotheken bietet D3 weniger fertige Diagramme, sondern erleichtert das Erstellen komplett eigener an die eigenen Bedürfnisse angepasster Diagrammarten oder Visualisieren. Auf der Webseite werden bereits über 160 Beispiele gezeigt. Darunter sind neben Diagrammen auch Karten, Graphen oder sogar Gen-Visualisieren zu finden. D3 bietet einen gigantischen Funktionsumfang erfordert allerdings auch einiges an Einarbeitung.

Apache Proxy für Node.js einrichten

Will man auf einem Rootserver parallel einen Apache und einen Node.js Server betreiben hat man das Problem das beide nicht einfach auf dem selben Port laufen können. Zwar ist es theoretisch möglich Node.js oder Apache auf unterschiedlichen Ports laufen zu lassen. Allerdings ist das bei Webserver unüblich und kann zu Problemen führen wenn bei einigen Benutzern nur der Port 80 in der Firewall geöffnet ist.  Auch ist es damit nicht möglich nur eine bestimmte Subdomain unter Node.js zu betreiben.

In der folgenden Anleitung wird beschrieben wie man eine Subdomain unter Apache an einen Node.js Server weiterleitet, alles wurde unter Ubuntu erfolgreich getestet. Die hier vorgestellte Lösung ist performance-technisch nicht optimal aber einfach umzusetzen.

Hier der verwendete minimale Node.js Server:

var http = require("http");
var s = http.createServer(function(req,res){
  res.writeHead(200, {'content-type': 'text/plain'});
  res.end("Node working on 8080"); 
});
s.listen(8080); 
console.log("Server running...") 

Für den Apache müssen über zwei zusätzliche Module installiert werden: sudo apt-get install libapache2-mod-proxy-html Danach müssen die beiden Module über  sudo a2enmod proxy_http
sudo a2enmod proxy
aktiviert werden. Die Virtualhost-Datei muss wie folgt aufgebaut sein:

<VirtualHost *:80>
   ServerName tour.ragersweb.de
   ServerAdmin webmaster@ragersweb.de 

   ProxyRequests On
   <Proxy *>
    Order deny,allow
    Allow from localhost
   </Proxy>
   ProxyPass / http://localhost:8080
   ProxyPassReverse / http://localhost:8080 
</VirtualHost>

In diesem Beispiel werden alle Anfragen an die Subdomain bps.ragersweb.de an den unter Port 8080 laufenden Node.js Server weiterleitet.