Perfekt für Webentwickler: Die Front-End Checklist sorgt für Code-Qualität

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Das Abarbeiten von Checklisten hilft nachgewiesenermaßen dabei, die Qualität dessen zu verbessern, für das die jeweilige Checkliste entworfen wurde. Die Front-End Checklist von David Dias widmet sich dem Thema Webentwicklung und lässt keine Aspekte vermissen.

Checklisten sind schon ein Wert an sich

„You manage what you monitor“, sagt der Amerikaner und meint damit, dass du alleine dadurch, dass du etwas genauer betrachtest, schon Einfluss auf dessen Verlauf nimmst. Nach diesem Prinzip funktionieren etwa die Fitness-Tracker, die sich an immer mehr Handgelenken finden. Wer will es auch bestreiten? Mehr Information führt zu mehr Durchblick führt zu höherer Anstrengung und am Ende zu einem besseren Ergebnis.

Das und natürlich der Wunsch, schlichtweg nichts wichtiges zu vergessen, sind auch der Antrieb hinter Checklisten, die wohl jeder von uns mehr oder weniger im Überfluss führt. Die anspruchsvolleren Vertreter ihrer Art sind nicht bloß simple Abarbeitungsvorlagen, sondern beinhalten teils Aspekte, an die wir möglicherweise selbst dann nicht gedacht hätten, wenn wir intensiver gedacht hätten. Perfekte Checklisten erklären zusätzlich noch, warum der jeweilige Punkt überhaupt auf der Checkliste steht.

Front-End Checklist: Der Anfang von allem. (Screenshot: Dr. Web)

Front-End Checklist: David Dias trifft einen Nerv

Die Front-End Checklist (ich übernehme die Schreibweise des Urhebers) von David Dias, der sich als Reisender zwischen Mauritius, Frankreich und Kanada versteht, gehört eindeutig zu den letztgenannten. Erst Ende Oktober 2017 stellte David seine Checklist bei Github als Open Source ein und wurde vom Erfolg vollkommen überrascht. In nur sechs Wochen sammelte die Front-End Checklist fast 22.000 Sterne ein und schoss im Ranking der Codeplattform steil nach oben. Ganz offensichtlich traf David einen Nerv.

Zusätzlich zum Github-Repository findest du die Front-End Checklist als voll funktionsfähige Web-App, die du direkt und ohne weitere Voraussetzungen für deine Web-Projekte nutzen kannst. Solltest du jetzt skeptisch sein, weil du bereits zu viele vermeintlich gute Checklisten gesehen und verworfen hast, empfehle ich dir, direkt mal auf den Link zu Davids Web-App zu klicken. Dort wirst du garantiert eines Besseren belehrt.

Erfahrungen aus 17 Jahren in einer Checkliste gebündelt

Die Front-End Checklist entstammt Davids beruflichen Erfahrungen der letzten 17 Jahre, die er in unterschiedlichen Positionen, auch in leitenden, im Webentwickler-Umfeld verbracht hat. Man merkt es seinem Projekt förmlich an, dass hier kein Theoretiker aus dem Elfenbeinturm doziert, sondern wirklich ein Praktiker seine Ärmel hochgekrempelt hat.

Im Grunde kannst du dich vor den leeren Bildschirm einer neuen Datei in deinem Lieblingseditor setzen und beginnen, Davids Checkliste abzuarbeiten. Die ist nämlich so aufgebaut, dass sie dich vom Start bis ins Ziel sinnvoll begleitet.

Dabei wirst du dich nicht nur um HTML, CSS und JavaScript kümmern. Vielmehr unterstützt David dich zudem in Fragen der Definition des Dokumenttyps, bei Webfonts und Bildern, bei Performance, Sicherheit und SEO und sogar in Fragen der Zugänglichkeit. Es ist dir natürlich freigestellt, einzelne Themen etwa nicht zu bearbeiten. Die Front-End Checklist ist flexibel genug, um sich an deine Anforderungen anzupassen.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Die einzelnen Listenpunkte geben auf Klick weitere Infos preis. (Screenshot: Dr. Web)

Front-End Checklist: Web-App als akribischer Buchhalter

Während du die einzelnen Punkte der Liste abarbeitest, führt die Web-App Buch darüber, welchen Komplettierungsgrad du bereits erreicht hast. Farbcodes für verschiedene Prioritäten zeigen dir auf den ersten Blick, welche Aspekte besonders wichtig sind.

Bei den meisten Punkten findest du zusätzlich zum reinen Listenpunkt den entsprechenden Code-Schnipsel, sowie einen Link zu Hintergrundinformationen zum entsprechenden Thema. Dabei siehst du immer nur so viele Details, wie du möchtest. Alle Ansichten sind ein- und ausklappbar, Themen können auch ganz verborgen werden, wenn du dich damit nicht oder erst später auseinandersetzen möchtest.

Zu jeder Zeit im Prozess kannst du einen Report generieren, der dann auf deinen Drucker geschickt wird. Das entsprechende Stylesheet ist für den Ausdruck optimiert und ermöglicht es dir, den Projektstand entweder für den Eigengebrauch zu archivieren oder dem Kunden oder anderen Teammitgliedern zu dokumentieren.

Du kannst jederzeit einen Report auf den Drucker schicken. (Screenshot: Dr. Web)

Leider gibt es keine Möglichkeit, die Checkliste in der Web-App, meinetwegen auch in Local Storage, zu speichern oder mit mehreren Personen gemeinsam an einer Checkliste zu arbeiten. Vor allem die fehlende Speichermöglichkeit ist angesichts des Umfangs der im Projektverlauf entstehenden Menge an Einzelpunkten ein Nachteil. Andererseits ist die Front-End Checklist Open Source. Wir können sie also um derlei Funktionen erweitern oder sie auf unseren eigenen Servern mehrfach, etwa für jedes Kundenprojekt separat, installieren. Ich will also keinesfalls Davids Leistung schmälern.

Fazit: Arbeite mit der Front-End Checklist

Ich bin selbst auch schon seit über 20 Jahren im Geschäft und kann daher mit einigem Überblick sagen, dass mir bislang keine umfangreichere und besser ausgeführte Checkliste für den Frontend-Entwickler untergekommen ist.

Davids Projekt ist nicht nur für relative Neueinsteiger eine sehr wertvolle Unterstützung, sondern auch für alte Hasen nützlich. Letztgenannte brauchen vielleicht die Schnipsel und die Hintergrundinformationen nicht mehr, können aber sicherstellen, dass sie im Projektverlauf keinen wichtigen oder weniger wichtigen, aber dennoch sinnvollen Aspekt übersehen.

In diesem Beitrag für CSS-Trick erläutert David die Idee hinter seiner Front-End Checklist ausführlicher.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz