Ist es nicht immer wieder erstaunlich, mit welchen Tools die Entwicklercommunity aufwartet? Während sich darunter viele sehr nützliche, teils unverzichtbare finden, gehören auf der anderen Seite auch etliche dazu, deren Sinn sich nicht auf den ersten, vielfach ebenso wenig auf den zweiten Blick erschließt. Heute habe ich je ein Tool von beiden Enden des Spektrums für Sie.
Roole: CSS-Preprozessor auf der Basis von JavaScript
Aus der Rubrik „Nützliche Tools“ macht der neue CSS-Preprozessor Roole auf sich aufmerksam. Roole steht in der Tradition von Sass und LESS, wirkt also auf den ersten Blick wie die Neuerfindung des Rades.
Roole ist jedoch insofern anders, als es auf reinem JavaScript fußt und auf diese Weise direkter als die genannten Alternativen implementiert werden kann. Wie LESS kann es per Node.js serverseitig lauffähig gemacht werden, auf der Client-Seite funktioniert es ohne weitere Zusätze, vorausgesetzt, JavaScript ist nicht deaktiviert. In letzterem Falle funktionierte allerdings der Laufzeitcompiler von LESS ebenfalls nicht. Sass erfordert zudem ohnehin mehr Aufwand, wenn man es zur Laufzeit kompilieren wollte.
Roole verbindet die Vorteile der Logik einer Programmiersprache mit der Erstellung von Stylesheets und erlaubt so einfache, wie komplexe Vorgänge zeit- und codesparend zu verwirklichen. Auf der Demoseite finden sich zahlreiche Beispiele.
Roole kümmert sich um das leidige Vendor-Prefixing selber, so dass kurze standard-konforme Anweisungen ausreichen, wie das folgende Beispiel zeigt:
Unter Roole.org/test lässt sich prüfen, ob der verwendete Browser fähig ist, Roole zu interpretieren, was bei meinem unter Windows 8 Pro installierten Chrome-Browser vollumfänglich gegeben war. Roole steckt noch in den Kinderschuhen und steht in Version 0.1.2 unter der MIT-Lizenz auf Github zum Download bereit.
Auf der Website zum Produkt kann mit einem Live-Editor experimentiert werden, will man sich mit Roole näher auseinander setzen. Im Vergleich zu den älteren Wettbewerbern LESS und Sass steht Roole funktional noch etwas im Abseits. Einen CSS-Compiler nativ mit JavaScript zu erstellen, ist jedoch vom Ansatz her durchaus interessant. Roole sollte man im Auge behalten.
Markdown.css: HTML wie Markdown aussehen lassen
Auf der anderen Seite des Spektrums findet sich ganz aktuell eine Neuentwicklung, die auf den ersten Blick nützlicher erscheint als sie es auf den zweiten dann ist. Die Rede ist von Peter Coles Markdown.css, einem Stylesheet, das aus einem HTML-Dokument ein Markdown-formatiertes Dokument macht. Nein, halt, das wäre ja nützlich.
Markdown.css macht nicht Markdown aus HTML, sondern lässt HTML aussehen wie Markdown. Das verdeutliche ich am besten visuell. Diese Optik:
Sieht nach Anwendung von Markdown.css so aus:
Die Lesbarkeit ist erhöht. So weit so gut. Nützlich wäre nun, wenn man den entstandenen Markdown-Text auskopieren und zu Bearbeitungszwecken gebrauchen könnte. Genau das ist jedoch nicht möglich. Beim Auskopieren wird der gesamte Markdown-Anteil nicht mitgenommen.
Markdown.css: Ein Ausschnitt
So ist Markdown.css, das mit LESS realisiert wurde, nicht mehr als ein Experiment. Ich finde dabei besonders den Fortbildungsaspekt interessant. Durch die Auseinandersetzung mit Markdown.css und seiner LESS-Basis bin jedenfalls ich zu neuen Ansätzen inspiriert worden. Das ist ja nicht etwa nichts.
Markdown.css steht übrigens zusätzlich als Bookmarklet zur Verfügung, mit dessen Hilfe man beliebige Websites in Markdown-Optik versetzen kann.
Links zum Beitrag:
- Roole – A Language That Compiles To CSS
- Roole – Github Repository
- LESS – The Dynamic Stylesheet Language
- Sass – Syntactically Awesome Stylesheets
- Markdown.css – Demo-Website
- Markdown.css – Github Repository
