Kategorien
JavaScript & jQuery Programmierung

DevDocs: Zentrales Nachschlagewerk für Webentwickler

Thibaut Courouble ist wieder da. Der französische Frontend-Entwickler, den wir im Sommer 2012 erstmalig bei Dr. Web vorstellten, meldet sich mit seinem jüngsten Projekt DevDocs zurück. DevDocs will nicht weniger, als das zentrale Nachschlagewerk für Webentwickler sein. Und in der Tat ist die themenübergreifende Bündelung verschiedener Dokumentationen mit einer ebenso übergreifenden Suchfunktion gar keine schlechte Idee.

devdocs

Courouble: Kein Unbekannter in der Entwicklergemeinde

Thibaut Courouble kennen regelmäßige Dr. Web-Leserinnen und Leser schon seit längerem. Auffällig an ihm ist insbesondere seine philosophische Art, den Menschen und Themen des Netzes zu begegnen. Das mag nicht jedermann Sache sein. Darüber hinaus jedoch ist er ein äußerst talentierter Entwickler mit interessanten Ideen.

Im August 2012 stellten wir sein damals neues Projekt WebInterfaceLab vor, das er zwischenzeitlich in CSSFlow umbenannte. Am Konzept, CSS Snippets kostenfrei und ganze Interface Kits kostenpflichtig anzubieten änderte sich indes nichts. Einzig die Zahl der angebotenen Elemente ist seither gestiegen. Nach wie vor sollte die Website in keinem Designer-Werkzeugkasten fehlen.

DevDocs: HTML5, CSS, JavaScript, DOM, HTTP und vieles mehr

Mit seinem neuesten Projekt DevDocs geht Courouble ein Problem an, das selbst erfahrene Webentwickler immer mal wieder ereilen wird. Man muss eine Funktion, ein Feature, eine Schreibweise nachschlagen. Dazu gibt es im besten Falle eine schnell auffindbare Dokumentation. Nicht immer ist zumindest das schnelle Auffinden gewährleistet. Ich jedenfalls suchte mir schon mehr als oft einen Wolf in den Weiten des Netzes.

DevDocs ist auf Wachstum ausgerichtet. Courouble bittet um aktive Vorschläge zur Integration weiterer Dokumentationen in seinen Service. Dabei ist die Zahl der verfügbaren Referenzen schon jetzt ganz beachtlich und beinhaltet neben den unabdingbaren Basics, wie CSS, DOM, HTML, HTTP und JavaScript auch Frameworks und Tools wie jQuery, Node.js, Ruby, Sass, Less und weitere.

devdocs-css-snap
Links die Übersicht eines Teils der Themen, rechts die Inhalte

Interessant ist einiges am Konzept der DevDocs. Zunächst können Sie diejenigen Dokumentationen aktiv markieren, die für Sie von Relevanz sind. So schließen Sie irrelevante Informationen von vornherein aus. Eine nun durchgeführte Freitextsuche erstreckt sich über alle Themenbereiche, die Sie zuvor markiert haben. Dabei bietet DevDocs in begrenztem Umfang sogar eine Fuzzy Logic und erkennt ähnliche Ergebnisse. Will man gezielt nur in einer bestimmten Doku suchen, stellt man dem Suchbegriff den Namen nebst einem Tab voran. Die Web-App unterstützt Keyboard-Shortcuts. Auch die Suche über die Adressleiste des Browsers ist vorgesehen. Wer es noch bequemer will, installiert die Chrome App.

devdocs-chromeapp

DevDocs ist kostenfrei unter Open Source Lizenz verfügbar. Man muss allerdings der englischen Sprache mächtig sein, um es sinnvoll zu nutzen. Inwieweit es künftig mehrsprachig zugehen wird, ist nicht klar, aber meines Erachtens nicht zu erwarten, wenn man bedenkt, dass Courouble nicht mal seine eigene Muttersprache berücksichtigt.

Im Ergebnis ist DevDocs eines dieser Projekte, die Webentwickler ihrer Bookmark-Sammlung hinzufügen sollten. Nicht unwichtig ist noch, dass DevDocs ebenfalls für die Anzeige auf mobilen Geräten optimiert ist.

Links zum Beitrag

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
JavaScript & jQuery Programmierung

Einmal hin, alles drin: Munee verwaltet und optimiert Website-Assets auf Basis von PHP

Cody Lundquist, Australier mit schwedisch klingendem Namen, stellt mit Munee ein kostenlos verwendbares Asset-Management auf der Basis von PHP 5.3 vor. Der Funktionsumfang des Tools ist durchaus beachtlich, verlangt aber eine entsprechende Anpassung der eigenen Web-Projekte. Mit Munee kann nahezu jedwede Form von denkbarem Asset, seien es Bilder und andere Dateien, JavaScript, CSS, LESS, SCSS oder CoffeeScript verwaltet werden.

munee

Munee: Caching als Herzstück

Munee ist in der Lage, viele SEO-relevante Fragestellungen zufriedenstellend zu bearbeiten. So kombiniert es auf Wunsch etwa sämtliche JS- und CSS-Dateien in jeweils eine einzelne Datei und stellt diese minified und gzipped zur Verfügung. Ebenso ist es möglich, LESS und SCSS ohne vorherige Kompilierung bereitzustellen und die Erstellung des CSS Munee zu überlassen. Gleiches erlaubt Munee mit Blick auf CoffeeScript. Dieses kann zur Laufzeit nach JavaScript übersetzt werden.

Alle Dateien werden auf Client- und auf Server-Seite gecacht. Im Falle des Aufrufes checkt Munee die Aktualität der Caches und liefert nur im Veränderungsfalle neue Versionen aus.

Mit Blick auf Bilddateien liefert Munee noch mehr Möglichkeiten. Bilder können zur Laufzeit nach verschiedenen Kriterien in der Größe verändert werden. Die so veränderten Bilddateien werden wiederum im Cache gehalten. Neben der Größenveränderung ist zusätzlich die Verwendung gängiger Fotofilter vorgesehen. Möchte man seine Designs zunächst nicht mit echten Bildern, sondern lediglich mit Platzhaltern versehen, so kann man ebenfalls zu Munee greifen, welches verschiedene Platzhalter-Services zu integrieren imstande ist.

Munee: So funktioniert’s

Einmal installiert und per Rewrite-Rule verfügbar gemacht, steht Munee serverweit zur Verfügung. Die Funktionalität wird über entsprechende Parameter angesprochen. So würde man etwa folgendes schreiben, wollte man ein SCSS zu CSS machen und minifiziert ausliefern:

Parameter lassen sich kombinieren, wie dieses Beispiel eines größenreduzierten und mit einem Fotofilter bearbeiteten Bildes zeigt:


Die Kombination mehrerer CSS oder auch LESS/SCSS oder gemixt in ein auszulieferndes CSS-File erledigt man, indem man alle Dateien in eine einzige Script-Source-Angabe schreibt und dabei mit Komma trennt:

Entsprechendes gilt für den Einsatz von mehreren JavaScript-Dateien.

Munee sollte am sinnvollsten via Rewerite in der .htaccess getriggert werden. Alternativ ist es ebenso möglich, bei jedem Aufruf den Pfad zu Munee beizugeben. Das sähe dann beispielsweise so aus:

Munee steht unter MIT-Lizenz auf Github zur freien Verwendung in privaten, wie kommerziellen Projekten bereit.

Munee: die Zielgruppe

Schön und gut. Das Featureset von Lundquists PHP-Tool ist nicht schlecht. Aber es ist natürlich nicht alternativlos.

Fangen wir beim CSS an und nehmen JavaScript auf dem Weg gleich mit. Sicherlich, Munee nimmt CSS, LESS und SCSS, kompiliert wo erforderlich, schreibt in eine Datei und liefert minifiziert aus. Das klingt nicht schlecht. Wie oft jedoch ändern wir was an unseren CSS-Dateien und was hindert uns daran, LESS und SCSS vorab zu kompilieren. Wieso sollten wir die Ergebnisse dann nicht in einer Datei zusammenführen und auch noch einen Minifier drüber jagen?

Ebenso verhält es sich mit JavaScript und CoffeeScript. Warum soll mein CoffeeScript erst zur Laufzeit nach JavaScript kompiliert werden, wenn ich das genauso gut vorab manuell erledigen kann?

Das sind im Normalfall einer kleinen Website Tätigkeiten, die man ein einziges Mal zu leisten hat und die dann Bestand haben. Gut, Munee verspricht, im Zweifel serverseitig zu cachen und den Cache auszuliefern. Man kann also vermuten, wenn alles funktioniert, dass auch Munee weitgehend einmalig kompilieren wird.In überschaubaren Projekten würde ich jedoch vom Gefühl her stets die manuelle Methode vorziehen.

Zum Thema Resizing von Bildern im responsiven Webdesign gibt es ebenfalls Alternativen, noch dazu standardkonforme. Munee kann da schon deshalb nicht mithalten, weil es gar nicht vollresponsiv arbeiten kann. Hier sehe ich außer dem Caching im Grunde keine Vorteile auf Seiten des PHP-Tools.

Was bleibt? Es bleiben größere Websites, die von verschiedenen Personen bearbeitet werden, aber dennoch weitgehend optimiert erscheinen sollen. Ich betreue selbst ein entsprechend passendes Projekt. Dort werden fünf verschiedene Bereiche unter einer gemeinsamen Oberfläche von Designern und Developern verantwortet, die sich teils nicht einmal kennen.

Wenn hier eine Zusammenführung der unterschiedlichen Bemühungen via Munee erfolgte, wäre allen damit geholfen, denn hier wäre sonst der zentrale Projektverantwortliche immer wieder gefragt, die beschriebenen Tätigkeiten manuell zu erledigen, vor allem deren Erfordernis zu überwachen. Munee kann hier dafür sorgen, dass etwaige Veränderungen zur Laufzeit berücksichtigt werden, ohne dass man sich untereinander verständigen würde müssen.

Wie sehen Sie das? Können Sie sich Munee im Einsatz in einem Ihrer Projekte vorstellen?

Links zum Beitrag