Ngrok - VPN für localhost

Ngrok ist ein VPN-Tool das es ermöglicht, einen eigentlich nicht öffentlichen localhost öffentlich bereitzustellen. Es eignet sich für Entwickler die z.B. einen Zwischenstand einer Webapp oder Webseite zur Abnahme bereitstellen wollen. Dabei wird ein konfigurierbarer Port auf eine Subdomain des Anbieters Ngrok weitergeleitet. Hat man keinen Account beim Ngrok bekommt man eine zufällige Subdomain zugeteilt. Die Subdomain sowie Statusinfomationen über eingehende Anfragen werden direkt auf der Konsole angezeigt. Wenn man sich einen Account bei Ngrok erstellt kann auch eine Subdomain wählen. Ngrok ermöglicht HTTP- sowie HTTPS-Verbindungen zu dieser Domain.

Das Komandozeilen-Tool kann für Linux, MacOs und Windows kostenlos von der Webseite ngrok.com heruntergeladen werden. Durch den Aufruf von:

    ngrok 8181 

wird z.B. der localhost:8181 an Ngrok weitergeleitet. Die Performance der VPN-Verbindung ist nicht hoch, aber zum Testen ausreichend.

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.

Medoo - Ein Mini-PHP-ORM

Bei Medoo handelt es sich um ein kleines ORM-System unter der MIT-Lizenz. Es besteht nur aus einer einzigen 14 kb kleinen Datei und eignet sich hervorragend für kleine bis mittlere Projekte. Als Systemvoraussetzung muss mindestens PHP 5.1 mit PDO Support installiert sein. Es werden die Datenbanken MySQL, MSSQL, SQLite, MariaDB, Oracle, Sybase und PostgreSQL unterstützt.

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.