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
Design HTML/CSS

CSS Ratiocinator und Trashman: Müllabfuhr für Stylesheets?

Es ist ein markiger Slogan, mit dem Joe Nelson aka Begriffs seinen Qualitätsverbesserer für CSS-Stylesheets ins Rennen schickt. „CSS Ratiocinator – because your CSS is garbage“, behauptet er. So, unser CSS ist also Mist, Abfall, Unrat? Neben dem Slogan relativiert Nelson diese Behauptung zwar und wenn man dann tiefer einsteigt, ist man sogar geneigt, ihm – bei allen körperlichen Schmerzen, die diese Erkenntnis verursacht – wenigstens bei stark evolutionär verlaufenden Kundenprojekten teilweise zuzustimmen. Am Ende erkennt man, dass Ratiocinator ein wertvolles Tool ist, dass man nicht mehr missen möchte…

css-ratiocinator-01

CSS-Stylesheets und ihre Tendenz zu verwildern

Ich muss schon sagen, dass ich mich zunächst einer gewissen Verärgerung über Nelsons vollmundige Generalabwertung nicht entziehen konnte. Wer hört schon gern, dass er Abfall produziert, speziell dann, wenn es quasi um die schönen Künste geht… Lässt man sich dann jedoch etwas auf das Thema ein und reflektiert einige seiner älteren Projekte, so, zumindest ging es mir so, erscheint die Aussage zwar noch überzogen, aber nicht an den Haaren herbeigezogen.

Ich betreue verschiedene Projekte, die schon sehr alt sind. Und mit sehr alt meine ich zehn Jahre und älter. Natürlich hatten diese Projekte zum Zeitpunkt der Fertigstellung eine ordentliche Ausstattung mit CSS-Stylesheets. Aus einem Guss waren die, möchte ich behaupten, andere Meinungen mag es da aber auch geben.

css-ratiocinator-02

Mit der Zeit kamen die Veränderungen, wie neues Logo, andere Farben, weitere Serviceangebote, mobile Version und was nicht alles im Laufe der Jahre auf so einer Website passieren kann. Schön, wenn man einen Kunden hat, der bereit ist, auch immer brav die Generalanpassung des Grunddesigns zu bezahlen. Meiner Erfahrung nach ist das jedoch extrem selten der Fall. Und so geschieht, was geschehen muss. Das CSS wird – sagen wir – punktuell und auf die Neuerungen isoliert erweitert.

Dies führt dazu, und das konstatiert Nelson versöhnlicherweise schlussendlich auch, dass das Stylesheet eben nicht mehr aus einem Guss ist, sich Anweisungen teilweise widersprechen, aufheben und/oder unnötig komplex verschachtelt sind, so dass es zu ulkigen Effekten kommen kann.

CSS Ratiocinator schreibt das Stylesheet neu

An dieser Stelle kommt Nelsons Werkzeug CSS Ratiocinator, das er selbst als Code-Quality-Tool bezeichnet, ins Spiel. Der Ratiocinator schreibt ein homogenes Stylesheet völlig neu und berücksichtigt dabei den aktuellen Stand der Technik. Zu diesem Zweck nimmt er nicht etwa das bereits bestehende Stylesheet, analysiert und optimiert es. Vielmehr liest er direkt aus dem DOM und baut daraus ein eigenständiges, die bisherigen Definitionen nur quasi optisch berücksichtigendes Stylesheet zusammen.

Um als Verwender von Ratiocinator zu profitieren, kann man einen von drei Wegen gehen. Um die Prüfung und das Rewriting lokal durchführen zu können, ist es erforderlich PhantomJS zu installieren, das Ratiocinator-Repository zu klonen und dann in PhantomJS aufzurufen. So wird das optimierte CSS erzeugt. Einfacher ist der Weg über ein JavaScript, das als Bookmarklet hinterlegt wird und den gleichen Effekt erzielen soll. Dieser Weg hat jedoch in meinen Tests nicht sauber funktioniert.

css-ratiocinator-03

Die einfachste Methode, die auch die wenigsten manuellen Zwischenschritte benötigt, stellt der Aufruf der zu optimierenden Website über deren URL im Webservice CSS Trashman dar. Dieser Weg ist für ältere Projekte, die auch den Hauptanwendungsfall darstellen dürften, natürlich gangbar. In Entwicklung befindliche Seiten, die nur lokal existieren, sollten über den PhantomJS-Weg behandelt werden.

css-trashman-results

Der Webservice CSS Trashman integriert neben Ratiocinator auch direkt das Tool Sass-Convert, bietet mithin als Ergebnis nicht nur ein optimiertes CSS, sondern auch ein optimiertes Sass-File an. Die Möglichkeit, sich Seite an Seite das bisherige und das neue CSS anzeigen zu lassen, ist zwar schon vorgesehen, aber noch nicht funktional.

CSS Ratiocinator steht unter der liberalen MIT Lizenz sowohl für private, wie auch kommerzielle Zwecke zum Download auf Github bereit. Das Tool wird auf jeden Fall einen Stammplatz in meinem Werkzeugkasten bekommen und wenn es letztlich nur dazu dient, eine zweite Meinung einzuholen.

Links zum Beitrag:

Kategorien
Design HTML/CSS

easings.net: Bremsen und Beschleunigen mit CSS3

Mit der Einführung von CSS3 sind auch animierte Hover-Effekte und andere Übergänge möglich. Für die Transitions – wie diese Form der Animationen genannt werden – existieren mehrere vordefinierte Effekte, die sogenannten Easings. Sie unterschieden sich in der Art der Beschleunigung und des Abbremsens der Bewegung. Die Seite easings.net hat eine Reihe zusätzlicher Easings zusammengestellt und liefert den passenden Quelltext dazu.


Übersicht über alle Easings

Zu den Standard-Easings von CSS3 gehören einfache Ease-In- und Ease-Out-Effekte, die Animationen entweder am Anfang und/oder am Ende abbremsen oder beschleunigen. CSS3 ermöglicht jedoch auch die Definition eigener Easings, die über eine individuelle Bézierkurve definiert werden.

Auf easings.net gibt es eine Galerie mit 30 verschiedenen Animationseffekten, die über die Standard-CSS3-Easings hinausgehen. Für jeden einzelnen Effekt steht eine Vorschau zur Verfügung, in der die Bézierkurve dargestellt und die Bewegung beispielhaft ausgeführt werden kann. Außerdem liefert die Seite für jedes Easing den passenden Quelltext gleich mit dazu.

Easings für CSS3 und jQuery-Plugin

Die Easings, die direkt per CSS3 ausgeführt werden können, erlauben nur relativ einfache Bézierkurven. Komplexere Easings, bei denen beispielsweise ein Abfedern oder eine Elastizität in einer Animation dargestellt werden sollen, lassen sich nur mit Hilfe von JavaScript realisieren.

Daher liefert easings.net nicht nur die Bézierkurven für CSS3, sondern immer auch den richtigen Quelltext für das jQuery-Easing-Plugin, welches sehr viel komplexere Animationsübergänge erlaubt. In dem Plugin sind die 30 vorgestellten Easing-Effekte bereits implementiert, weshalb nur der entsprechende Easing-Name angegeben werden muss.

Easings für SASS

Neben der CSS3- und jQuery-Ausgabe bietet easings.net mit der Erweiterung Ceaser Easing Animation auch eine  Ausgabe für das CSS3-Framework Compass. Die Erweiterung ermöglicht es, vordefinierte Easings einfach zu übernehmen, ohne die entsprechende Bézierkurve angeben zu müssen.

Fazit: easings.net bietet eine sehr schöne Zusammenstellung unterschiedlicher Easing-Effekte samt passenden Quelltextes für unterschiedliche Einsätze.

(dpe)