Kategorien
Design HTML/CSS

Koala – Brandneue Cross-Plattform-App erleichtert den Umgang mit Präprozessoren wie LESS , Sass und anderen

Aus der chinesischen Großstadt Shengzhen stellt uns Entwickler Ethan Lai kostenlos ein Tool zur Verfügung, das den Umgang mit Less, Sass, Compass und CoffeeScript erleichert. Dies gilt umso mehr, wenn Sie, wie ich, unter der Flagge verschiedener Betriebssysteme segeln. Denn Koala, so der sympathische Name des Werkzeugs, läuft unter Windows, Mac OS und Linux. Gestern stellte Lai die Version 2.0 in einer Beta-Fassung vor.

koala-app

Koala kompiliert und komprimiert einmal hinzugefügte Ordner automatisch

Ein nettes Detail will ich gleich einleitend erwähnen. Koala folgt dem Trend zum Flat Design und gehört optisch bereits jetzt zu meinen Favoriten für das sauberste App-Layout des Jahres. Sicherlich ist das nicht sonderlich schwierig zu erreichen gewesen, gemessen am sehr überschaubaren Feature-Set der App. Dennoch, es fällt auf.

Über seinen Amazon Clouddrive stellt Lai die verschiedenen Versionen zum Download bereit. Ubuntu erhält eine angepasste neben denen für die übrigen Linux-Derivate. Out of the box unterstützt Koala derzeit Less, Sass, Compass und CoffeeScript. Die in Version 2 hinzugekommene Extension-Architektur erlaubt es allerdings, der App weitere Sprachen beizubringen.

Ebenso modularisiert präsentiert sich Koala hinsichtlich der unterstützten Sprachen der UI. Language-Packs erlauben die Übersetzung in beliebige Sprachen, derzeit steht neben der englischen, chinesischen, französischen und portugiesischen Übersetzung auch bereits die deutsche zur Verfügung. Die genannten Sprachen sind im Download-Paket bereits enthalten.

Der Umgang mit Koala ist einfach. Nach dem Start der App zieht man seine Projektordner per Drag and Drop in das Programmfenster oder fügt sie mittels des links oben angeordneten Plus-Buttons über den Datei-Dialog hinzu. Einmal hinzugefügte Ordner werden fortan überwacht. Bei Änderungen an unterstützten Dateien werden diese automatisch kompiliert und komprimiert. Compiler-Optionen können bei Bedarf für jede Datei einzeln gesetzt werden. Es ist sogar möglich, externe Compiler einzubinden, sofern das erforderlich sein sollte.

Für die Kompilation von Sass wird Ruby benötigt. Dieses ist auf Mac-Systemen ohnehin per Standard vorhanden. Linuxer installieren es über die bevorzugte Package-Verwaltung nach. Für Windows liefert Koala seit Version 2 Ruby direkt mit, so dass es nicht separat installiert werden muss. Die von Koala erzeugten JS- und CSS-Dateien kann das Tool auch gleich kombinieren, so es denn gewünscht ist.

Koala wird seit April 2013 aktiv entwickelt, wobei die seit gestern vorliegende Version 2 sicherlich als Meilenstein, vor allem aufgrund der Modularisierung, bezeichnet werden darf. Lai stellt Koala über die Produkt-Website und das Github-Repository kostenlos zur freien Nutzung unter der Lizenz Apache 2.0 bereit.

Insbesondere webdesignende Betriebssystem-Weltenwanderer werden sich für das Werkzeug interessieren. Und das sicher nicht nur wegen des unbestreitbar niedlichen App-Icons ;-)

koala-icon

Links zum Beitrag:

Kategorien
Design HTML/CSS

Neue Tools: CSS-Preprozessor Roole und HTML-Umwandler Markdown.css

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

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:

Roole schreibt Vendor Prefixe selber

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:

Vor Markdownify

Sieht nach Anwendung von Markdown.css so aus:

Nach Markdownify

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
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: