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 aktiviert werden. Die Virtualhost-Datei muss wie folgt aufgebaut sein:
sudo a2enmod proxy
<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.
Websites mit Node.js
Das Entwickeln von Webanwendungen mit Node.js unterscheidet sich Grundlegend von der Herangehensweise in PHP. Wo PHP eine sehr umfangreiche Standartbibliothek bietet ist die von Node.js auf das wichtigste reduziert.
Um Node.js zu erweitern stehen zahlreiche Module zur Verfügung. Module können über die Paketverwaltung NPM installiert werden. Inzwischen ist NPM standardmäßig in der Node.js Installation enthalten.
Nachfolgend einige wichtige Module die für Standardwebanwendungen hilfreich sind:
- Express
Webframework welches die Arbeit mit Node.js extrem erleichtert - Swig
Templateengine für express, benötigt Consolidate um zu funktionieren - Xml2js
Einfacher Wrapper wandelt XML in JSON um und ermöglicht so direkten Zugriff. Funktioniert unter Linux und Windows - Eyes
Bringt Farbe in die Console - MongoJs
Datenbanktreiber für MongoDb - Prompt
Nimmt Eingaben von der Commandline entgegen - Cheerio
jQuery Implementierung für Node.js ermöglicht den Zugriff auf das DOM über die bekannten jQuery Selektoren - Request
einfacheres Screen-Scraping für Node.js, funktioniert auch unter Windows
Deaktivieren von MySQL Key-Constraints
Wer zu Testzwecken während des Entwicklungsprozesses die Key-Constraints in der MySQL deaktivieren möchte, kann das über den SQL-Befehl: SET FOREIGN_KEY_CHECKS = 0. Durch den SQL-Befehle: SET FOREIGN_KEY_CHECKS = 1 können diese wieder aktiviert werden.
Twitter Bootstrap
Bei Bootstrap handelt es sich um ein von der Firma "Twitter" entwickeltes UI-Toolkit. Es kann mit jQuery UI verglichen werden und basiert ebenfalls auf jQuery. Neben reinen Komponenten bietet es aber auch generelle Stylesheets die das Entwickeln von durchgängigen Layouts vereinfachen.
Generell macht Bootstrap einen ausgereifteren Eindruck als jQuery UI, die einzelnen Features sind sehr gut aufeinander abgestimmt und die Komponenten sind in der Standardausführung schöner anzusehen als die von jQuery UI.
Weitere Informationen unter: http://twitter.github.com
Font Awesome
Font Awesome ist eine spezielle Schriftart die ausschließlich aus Symbolen besteht. Sie wurde für die Benutzung mit Twitter Bootstrap erstellt. Durch die Verwendung von Vektordaten sind die Symbole beliebig skalierbar und wesentlich kleiner als Pixelbilder.
Weitere Informationen unter: fortawesome.github.com
Bambalam PHP EXE Compiler
Bei Bambalam handelt es sich trotz seines Namens nicht wirklich um einen Compiler. Viel mehr embedded Bambalam PHP und die entsprechenden PHP-Dateien in eine EXE. Der Code wird immer noch interpretiert.
Dennoch ist Bambalam eine interessantes Programm, ermöglicht er doch mit PHP ausführbare Konsolenprogramm zu erstellen. Oft ist es mit PHP möglich schneller zum Ziel zu kommen als mit anderen Programmiersprachen. Es war bisher jedoch nur schlecht möglich diese Programme auf anderen Rechnern auszuführen, da immer eine PHP-Installation vorhanden sein musste. Mit Bambalam ist das nicht mehr notwendig. Es können PHP 4 und PHP 5 verwendet werden. Auch ist es möglich PHP-Erweiterungen einzubinden. Weitere Informationen unter: www.bambalam.se/bamcompile
XUL - Platformübergreifende Anwendungen in JavaScript
XUL ist eine von der Mozilla-Stiftung entwickelte auf XML bassierende Beschreibungs- sprache. Mit XUL(XML User Interface Language) ist die gesamte Oberfläche des Firefox-Browser erstellt worden. XUL wird mittels der Gecko-Engine gerendert. Der XLU-Runner ist eine Laufzeit- umgebung die es ermöglicht eigenständige Anwendungen zu erstellen. Dabei wird die Logik in JavaScript geschrieben.
XUL-Runner implementiert folgende Features:
- XPCOM
- Networking
- Gecko rendering engine
- DOM editing and transaction support (no UI)
- Cryptography
- XBL (XBL2 planned)
- XUL
- SVG
- XSLT
- XML Extras (XMLHttpRequest, DOMParser, etc.)
- Web Services (SOAP)
- Auto-update support (not yet complete)
- Type ahead find toolbar
- Accessibility support
- IPC services for communication between gecko-based apps (not yet complete)
- Storage - SqLite interfaces (not yet turned on by default)
Weitere Informationen unter: developer.mozilla.org