Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 7. Dezember 2017

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

Das Abarbeiten von Checklisten hilft nach­ge­wie­se­ner­ma­ßen dabei, die Qualität des­sen zu ver­bes­sern, für das die jewei­li­ge Checkliste ent­wor­fen wur­de. Die Front-End Checklist von David Dias wid­met sich dem Thema Webentwicklung und lässt kei­ne Aspekte ver­mis­sen.

Checklisten sind schon ein Wert an sich

You mana­ge what you moni­tor“, sagt der Amerikaner und meint damit, dass du allei­ne dadurch, dass du etwas genau­er betrach­test, schon Einfluss auf des­sen Verlauf nimmst. Nach die­sem Prinzip funk­tio­nie­ren etwa die Fitness-Tracker, die sich an immer mehr Handgelenken fin­den. Wer will es auch bestrei­ten? Mehr Information führt zu mehr Durchblick führt zu höhe­rer Anstrengung und am Ende zu einem bes­se­ren Ergebnis.

Das und natür­lich der Wunsch, schlicht­weg nichts wich­ti­ges zu ver­ges­sen, sind auch der Antrieb hin­ter Checklisten, die wohl jeder von uns mehr oder weni­ger im Überfluss führt. Die anspruchs­vol­le­ren Vertreter ihrer Art sind nicht bloß simp­le Abarbeitungsvorlagen, son­dern beinhal­ten teils Aspekte, an die wir mög­li­cher­wei­se selbst dann nicht gedacht hät­ten, wenn wir inten­si­ver gedacht hät­ten. Perfekte Checklisten erklä­ren zusätz­lich noch, war­um der jewei­li­ge Punkt über­haupt 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 über­neh­me die Schreibweise des Urhebers) von David Dias, der sich als Reisender zwi­schen Mauritius, Frankreich und Kanada ver­steht, gehört ein­deu­tig zu den letzt­ge­nann­ten. Erst Ende Oktober 2017 stell­te David sei­ne Checklist bei Github als Open Source ein und wur­de vom Erfolg voll­kom­men über­rascht. In nur sechs Wochen sam­mel­te die Front-End Checklist fast 22.000 Sterne ein und schoss im Ranking der Codeplattform steil nach oben. Ganz offen­sicht­lich traf David einen Nerv.

Zusätzlich zum Github-Repository fin­dest du die Front-End Checklist als voll funk­ti­ons­fä­hi­ge Web-App, die du direkt und ohne wei­te­re Voraussetzungen für dei­ne Web-Projekte nut­zen kannst. Solltest du jetzt skep­tisch sein, weil du bereits zu vie­le ver­meint­lich gute Checklisten gese­hen und ver­wor­fen hast, emp­feh­le ich dir, direkt mal auf den Link zu Davids Web-App zu kli­cken. Dort wirst du garan­tiert eines Besseren belehrt.

Erfahrungen aus 17 Jahren in einer Checkliste gebündelt

Die Front-End Checklist ent­stammt Davids beruf­li­chen Erfahrungen der letz­ten 17 Jahre, die er in unter­schied­li­chen Positionen, auch in lei­ten­den, im Webentwickler-Umfeld ver­bracht hat. Man merkt es sei­nem Projekt förm­lich an, dass hier kein Theoretiker aus dem Elfenbeinturm doziert, son­dern wirk­lich ein Praktiker sei­ne Ärmel hoch­ge­krem­pelt hat.

Im Grunde kannst du dich vor den lee­ren Bildschirm einer neu­en Datei in dei­nem Lieblingseditor set­zen und begin­nen, Davids Checkliste abzu­ar­bei­ten. Die ist näm­lich so auf­ge­baut, dass sie dich vom Start bis ins Ziel sinn­voll beglei­tet.

Dabei wirst du dich nicht nur um HTML, CSS und JavaScript küm­mern. Vielmehr unter­stü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ür­lich frei­ge­stellt, ein­zel­ne Themen etwa nicht zu bear­bei­ten. Die Front-End Checklist ist fle­xi­bel genug, um sich an dei­ne Anforderungen anzu­pas­sen.

Die ein­zel­nen Listenpunkte geben auf Klick wei­te­re Infos preis. (Screenshot: Dr. Web)

Front-End Checklist: Web-App als akribischer Buchhalter

Während du die ein­zel­nen Punkte der Liste abar­bei­test, führt die Web-App Buch dar­über, wel­chen Komplettierungsgrad du bereits erreicht hast. Farbcodes für ver­schie­de­ne Prioritäten zei­gen dir auf den ers­ten Blick, wel­che Aspekte beson­ders wich­tig sind.

Bei den meis­ten Punkten fin­dest du zusätz­lich zum rei­nen Listenpunkt den ent­spre­chen­den Code-Schnipsel, sowie einen Link zu Hintergrundinformationen zum ent­spre­chen­den Thema. Dabei siehst du immer nur so vie­le Details, wie du möch­test. Alle Ansichten sind ein- und aus­klapp­bar, Themen kön­nen auch ganz ver­bor­gen wer­den, wenn du dich damit nicht oder erst spä­ter aus­ein­an­der­set­zen möch­test.

Zu jeder Zeit im Prozess kannst du einen Report gene­rie­ren, der dann auf dei­nen Drucker geschickt wird. Das ent­spre­chen­de Stylesheet ist für den Ausdruck opti­miert und ermög­licht es dir, den Projektstand ent­we­der für den Eigengebrauch zu archi­vie­ren oder dem Kunden oder ande­ren Teammitgliedern zu doku­men­tie­ren.

Du kannst jeder­zeit einen Report auf den Drucker schi­cken. (Screenshot: Dr. Web)

Leider gibt es kei­ne Möglichkeit, die Checkliste in der Web-App, mei­net­we­gen auch in Local Storage, zu spei­chern oder mit meh­re­ren Personen gemein­sam an einer Checkliste zu arbei­ten. Vor allem die feh­len­de Speichermöglichkeit ist ange­sichts des Umfangs der im Projektverlauf ent­ste­hen­den Menge an Einzelpunkten ein Nachteil. Andererseits ist die Front-End Checklist Open Source. Wir kön­nen sie also um der­lei Funktionen erwei­tern oder sie auf unse­ren eige­nen Servern mehr­fach, etwa für jedes Kundenprojekt sepa­rat, instal­lie­ren. Ich will also kei­nes­falls 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 eini­gem Überblick sagen, dass mir bis­lang kei­ne umfang­rei­che­re und bes­ser aus­ge­führ­te Checkliste für den Frontend-Entwickler unter­ge­kom­men ist.

Davids Projekt ist nicht nur für rela­ti­ve Neueinsteiger eine sehr wert­vol­le Unterstützung, son­dern auch für alte Hasen nütz­lich. Letztgenannte brau­chen viel­leicht die Schnipsel und die Hintergrundinformationen nicht mehr, kön­nen aber sicher­stel­len, dass sie im Projektverlauf kei­nen wich­ti­gen oder weni­ger wich­ti­gen, aber den­noch sinn­vol­len Aspekt über­se­hen.

In die­sem Beitrag für CSS-Trick erläu­tert David die Idee hin­ter sei­ner Front-End Checklist aus­führ­li­cher.

Dieter Petereit

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.

Ein Kommentar

  1. Wir haben die Erfahrung gemacht, dass Checklisten in der Programmierung nicht weg­zu­den­ken sind. Gerade im Termindruck sehr sinn­voll. Wir haben unse­re Checklisten digi­ta­li­siert und stel­len unse­ren Entwicklern die­se in Form von mobi­len Formularen zur Verfügung (iOS, Android) somit sind wir auch auf dem Stand und wis­sen genau ob die Punkte erle­digt wur­den.

Schreibe einen Kommentar zu Michael Becker Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.