Kategorien
Design HTML/CSS

CSS- und HTML-Vokabular: Wörterbücher für Anfänger und Vergessliche

Selbst als erfahrener Entwickler hat man nicht, wo man geht und steht, CSS-Vokabular vor Augen. Oder murmelst du etwa kontinuierlich CSS-Syntax vor dich hin? Sollte dem so sein, wundere dich nicht, wenn die Menschen beginnen, dich zu meiden. Hast du in letzter Zeit derlei Anzeichen bemerkt, weißt du ja jetzt, woran es liegen könnte. Schon gut, danke mir nicht.

Möglicherweise hilft dir das Projekt, das ich dir heute vorstellen möchte, den Anschein beginnenden Wahnsinns zu widerlegen. Also, anstelle CSS murmelnd durch die Straßen zu ziehen, bookmarke einfach das kleine Projekt „CSS Vokabular“ und mach den Kopf frei…

CSS Vocabulary: Not More To It
CSS Vokabular: Viel mehr gibt es nicht zu sehen

CSS Vokabular: Wissen, was was ist

Das kleine Helferlein namens CSS Vocabulary, das mit der Hilfe einiger engagierter Zeitgenossen inzwischen nicht nur in englischer, sondern auch in deutscher Sprache, sowie einigen weiteren, verfügbar ist, ist im Grunde komplett selbsterklärend. Es besteht aus nicht mehr als einem einzelnen Quelltext-Beispiel und und einer Sidebar mit Begriffen. Wählst du einen beliebigen Teil des Quelltextes per Klick aus, wird der dazu passende Begriff in der Sidebar farblich hervorgehoben.

Umgekehrt funktioniert es genau so. Klickst du auf einen Begriff in der Sidebar, werden die dazu passenden Code-Teile im Quelltext-Beispiel farblich hervor gehoben. Mehr gibt es nicht zu sehen.

CSS Vocabulary: Code Example
CSS Vocabulary: das Quelltext-Beispiel

Klar, CSS Vocabulary bringt dir nicht wirklich CSS bei. Aber, wenn es dir wenigstens manchmal so geht wie mir, dann wirst du an dir selbst bemerkt haben, dass die genauen Begrifflichkeiten im Kopf nicht immer sicher abrufbar sind. Das ist besonders dann ungünstig, wenn du gerade einen Text über CSS schreibst. Du weißt genau, was du schreiben wolltest, aber wie hieß jetzt dieser verflixte Begriff noch gleich genau? Mir passiert das auch gerne, wenn ich einen Style Guide dokumentiere. Da freue ich mich über eine schnelle unkomplizierte Nachschlagemöglichkeit wie CSS Vocabulary.

CSS Vocabulary: Sidebar
CSS Vocabulary: Sidebar

CSS Vocabulary ist ein Projekt der Finnen Ville Vanninen, Pasi Jokinen und Timo Moilanen, das inzwischen in einem größeren Projekt namens Vocabs aufgegangen ist. Neben CSS findest du auf Vocabs einen in gleicher Weise aufbereiteten Wortschatz für HTML, eben das HTML Vocabulary.

Vocabs kann völlig frei unter einer MIT-Lizenz genutzt werden und ist zuhause bei Workflower.fi. 

(Der Beitrag erschien zuerst im Sommer 2014 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im April 2019.)

Beitragsbild: MikesPhotos auf Pixabay

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