ragersWeb erfolgreich migriert

ragerWeb ist auf ein neu entwickeltes CMS umgestiegen. Sowohl die Webseite als auch der Adminbereich sind jetzt in Node.js implementiert. Die Webseite ist mit Express umgesetzt, die Templates werden in Handelbars gerendert. Beim Backend handelt es sich um eine Ember.js Anwendung. Als HTML/CSS-Framwork wird auf Twitters Bootstrap gesetzt, wodurch das Blog voll responsive ist.

In den nächsten Tagen wird das Design noch weiter angepasst.

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.

Breach - Der JavaScript-Browser

Breach ist ein auf Chromium und Node.js basierender Open-Source-Browser. Er ist hauptsächlich in JavaScript umgesetzt, seine GUI basiert auf HTML. Durch diese Architektur kann er komplett angepasst werden und ist verhältnismäßig einfach per JavaScript zu erweitern. Der Browser richtet sich mehr an Entwickler und Power-User die mit ihm Ihre eigenen Vorstellung des perfekten Browsers umsetzen können.

Wer hingegen eigene GUI-Anwendungen mit Node.js programmieren will sollte sich das Projekt node-webkit anschauen.

Eine erste Alphaversion kann unter breach.cc heruntergeladen werden.

Flickr Bilder downloaden

Flickr bietet seit einiger Zeit allen Kunden 1TB Speicherplatz für seine Bilder. Leider ist es nicht direkt möglich eine Set (Album) komplett wieder herunterzuladen. Es müssen alle Bilder einzeln heruntergeladen werden.

Hier springt www.flickandshare.com in die Bresche. Dem Service muss Zugriff auf den Flickr-Account gegeben werden. Über ein Java-Applet werden dann alle Bilder eines Albums heruntergeladen und auf dem eigenen Rechner gespeichert. Es kann ein Link erstellt werden mit dem z.B. auch Freunde ein Komplettes Album herunterladen können.

Flick and share bietet momentan die einfachste Lösung an seine bei Flicker gespeicherten Bilder zu kommen. Leider wird ein Java-Applet verwendet. Java ist aus Sicherheitsgründen in immer mehr Browsern deaktiviert.

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.

Brackets - Eine neue Generation von Codeeditor

Brackets ist ein neuer Texteditor für Coder. Er wird als OpenSource Projekt von Adobe entwickelt. Eine Besonderheit von Brackets ist es das er in HTML und Javascript programmiert ist. Dadurch ist es für Webentwickler einfacher den Editor an eigene Anforderungen anzupassen oder neue Plugins zu entwickeln. Optisch ähnelt Brackets dem ebenfalls immer beliebter werdenden Sublime Text kann es aber noch nicht mit dessen Features aufnehmen (Sublime Text kein OpenSource und auch keine Freeware, auch wenn eine unbegrenzter Testzeitraum eingeräumt wird). Alle rudimentären Features sind bereits vorhanden. Brackets kann durch Plugins erweitert werden, von denen bereits eine beachtliche Anzahl existiert. Auch Emmet (vomals Zen Coding) wird bereits als Plugin unterstützt. Ein bisher einmaliges Feature ist eine quick edit Funktion für CSS. Befindet man sich in einem HTML dokument können die CSS eigenschafteen einer Node direkt im Dokument geändert werden. Dazu Blendet Brackets einfach die entsprechenden Definitionen aus der CSS-Datei als eine Art Snippet ein, wodurch nicht mehr so oft zwischen Dateien gewechselt werden muss.

Brackers befindet sich momentan noch in der Entwicklung kann aber bereits unter brackets.io heruntergeladen werden.

ShoeBox - Multifunktionswerkzeug für 2D-Spiele

ShoeBox ist ein auf AdobeAir basierendes Tool mit dem viele unterschiedliche Arbeiten aus dem Kontext der Spieleentwicklung erledigt werden können.

In der folgenden Aufzählung werden die wichtigsten Features vorgestellt:

  • Extract Tiles
    Aus einem Screenshot eines beliebigen Tiles-Basierten Spiels wird ein Tileset rekonstruiert. Damit ist es möglich auf einfache und schnelle Art Background-Tileset aus jedem beliebigen Retrospiel zu extrahieren.
  • Pack Sprites und Extract Sprites
    Einfaches erstellen eines Texturatlas und zerlegen eines Atlanten in seine Einzelbilder.
  • Slice 9
    Mit dieser Funktion wird z.B ein Button-Bild so zerschnitten das sich damit beliebig große Buttons erstellen lassen. Dabei erfolgt das erkennen der Schnittstellen halbautomatisch. Jedes Bild wird im Normalfall in neun Teile zerlegt: Ränder, Ecken und zwei Mittelteile.
  • Bitmapfont
    Erstellen von Bitmapfonts aus PNG-Dateien. Es können Schriften mit beliebigen Grafikprogrammen erstellt werden.  

ShoeBox kann unter renderhjs.net/shoebox kostenlos heruntergeladen werden.

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.

node-webkit - Desktop Applicationen mit Node.js

node-webkit ist eine auf Chronium und Node.js basierende Laufzeitumgebung für Desktopanwendungen. Dafür wurde die in Chronium normal einsetzte V8-Engine durch die von Node.js ersetzt bzw. erweitert. Dies war möglich da Node.js ebenfalls auf die V8-Engine aufsetzt. Durch die Integration von Node.js in die Webkit-Rendering-Engine von Chronium kann die gesamte Node.js API verwendet werden. Es sind also Zugriffe auf Netzwerk, das lokale Filesystem möglich. Auch können beliebige Node.js Extensions verwendet werden. Da für Node.js momentan noch kein ausgereiftes GUI-Buinding zur Verfügung steht ist node-webkit eine gute Möglichkeit Desktop-Applikationen in JavaScript zu erstellen. Durch die Verwendung von WebGL ist es sogar möglich 3D-Anwendungen auf den Desktop zu bringen. Die Laufzeitumgebung ist existiert für Windows, Linux und MacOs.