Vor einem Monat habe ich die Front-End-Checkliste auf GitHub veröffentlicht. In weniger als 2 Wochen haben mehr als 10.000 Menschen auf der ganzen Welt das Repository mit einem Stern versehen. Das war völlig unerwartet und unglaublich!

Ich arbeite seit 2011 als Front-End-Entwickler, aber ich habe 2000 mit dem Erstellen von Websites begonnen. Seitdem versuche ich, wie wir alle, die Qualität meines Codes zu verbessern und Websites schneller auszuliefern. Unterwegs habe ich Entwickler aus zwei verschiedenen Ländern betreut. Das hat mir geholfen, eine Checkliste zu erstellen, die sich von dem unterscheidet, was ich im Laufe der Jahre im Web gefunden habe.
Während ich die Checkliste erstellte, hatte ich ständig das Buch „The Checklist Manifesto: How to Get Things Right“ von Atul Gawande im Hinterkopf. Dieses Buch hat mir geholfen, Checklisten für meine Arbeit und mein Privatleben zu erstellen und Dinge zu vereinfachen, die manchmal zu komplex erscheinen.
Ob Sie alleine oder im Team arbeiten, individuell, remote oder vor Ort, ich möchte Ihnen einige Ratschläge zur Verwendung der Front-End-Checkliste und der dazugehörigen Webanwendung geben. Vielleicht kann ich Sie überzeugen, sie in Ihren Entwicklungszyklus zu integrieren.
#1 Entscheiden Sie, *welche* Regeln Ihr Projekt und Team befolgen müssen
Jedes Projekt ist anders. Bevor ein neues Projekt beginnt, muss das gesamte Team (d.h. die Projektmanager, Designer, Entwickler, QA usw.) vereinbaren, was die Ergebnisse sein werden.
Um Ihnen bei der Entscheidung zu helfen, habe ich 3 verschiedene Prioritätsstufen erstellt: **hoch**, **mittel** und **niedrig**. Sie müssen diesen Unterscheidungen nicht unbedingt zustimmen, aber sie können Ihnen helfen, Ihre Aufgaben zu ordnen.
Die Front-End-Checklisten-App wurde entwickelt, um die Erstellung von *personalisierten* Checklisten zu erleichtern. Ändern Sie einige JSON-Dateien nach Ihren Wünschen und Sie sind bereit zu starten!
#2 Definieren Sie die Regeln für die Überprüfung zu Beginn, während und am Ende Ihres Projekts
Sie sollten nicht alle diese Regeln nur am *Ende* eines Projekts überprüfen. Sie wissen genauso gut wie ich, wie es am Ende von Projekten zugeht! Zu hektisch. Die meisten Punkte der Front-End-Checkliste können zu Beginn Ihrer Entwicklung berücksichtigt werden. Es liegt an Ihnen, das zu entscheiden. Machen Sie Ihrem Team von Anfang an klar, was wann passiert.
#3 Erfahren Sie etwas mehr über jede Regel
Wer liest gerne die Dokumentation? Nicht die meisten von uns, aber es ist unerlässlich. Wenn Sie die Gründe für die Regel verstehen wollen, kommen Sie nicht darum herum, sich darüber zu informieren. Je mehr Sie das *Warum* jeder Regel verstehen, desto besser werden Sie als Entwickler.
#4 Fangen Sie an zu prüfen!
Die Front-End-Checklisten-App kann Ihr Leben als Entwickler erleichtern. Es ist eine Live-Checkliste, so dass Ihr Fortschritt und Ihre Punktzahl live aktualisiert werden, während Sie Elemente abschließen. Alles wird in localStorage gespeichert, so dass Sie gehen und zurückkehren können, wann immer nötig.
Das Projekt ist Open Source, also zögern Sie nicht, es zu forken und nach Belieben zu verwenden. Ich arbeite daran, sicherzustellen, dass alle Dateien kommentiert sind. Insbesondere lade ich alle ein, die sich für Pug interessieren, einen Blick in den views-Ordner zu werfen.

#5 Integrieren Sie automatisiertes Testen in Ihren Workflow
Wir alle träumen von Automatisierung (oder träume ich nur?). Vorerst ist die Front-End-Checkliste nur eine interaktive Liste, aber einige der Aufgaben *können* in Ihrem Workflow automatisiert werden.
Werfen Sie einen Blick auf die gulpfile, die zum Generieren des Projekts verwendet wird. Alle Aufgaben sind Pakete, die Sie mit npm, webpack usw. verwenden können.
#6 Validieren Sie jede Seite, bevor Sie sie an das QA-Team und in die Produktion senden

Wenn Sie leidenschaftlich gerne sauberen Code erstellen und sich um die Qualität Ihres Codes kümmern, sollten Sie Ihre Seiten regelmäßig testen. Es ist so einfach, Fehler zu machen und wichtigen Code zu entfernen. Oder jemand anderes in Ihrem Team hat es vielleicht getan, aber es ist Ihre gemeinsame Verantwortung, solche Dinge zu erkennen.
Die Front-End-Checkliste kann schöne Berichte generieren, die Sie an einen Projektmanager oder ein Qualitätssicherungsteam senden können.
#7 Genießen Sie vor allem Ihre Arbeit
Manche Leute mögen bei einer so langen Checkliste einen leichten Schwindel verspüren. Das Durchgehen einer solchen Liste kann Angst auslösen und wirklich keinen Spaß machen.
Aber die Front-End-Checkliste ist nur ein Werkzeug, das Ihnen hilft, qualitativ hochwertigeren Code zu liefern. Code, der alle Aspekte eines Projekts beeinflusst: das SEO, die Benutzererfahrung, den ROI und letztendlich den Erfolg des Projekts. Ein Werkzeug, das bei all diesen Dingen helfen kann, kann tatsächlich helfen, Ihre Angst zu reduzieren und Ihre Gesundheit zu verbessern!
Fazit
Der Erfolg, den die Front-End-Checkliste in so kurzer Zeit erzielte, erinnerte mich daran, dass viele Menschen wirklich daran interessiert sind, Wege zu finden, ihre Arbeit zu verbessern. Aber nur weil das Werkzeug existiert, hilft das nicht direkt dabei. Sie müssen sich auch dazu verpflichten, es zu nutzen.
In einer Zeit, in der KI viele manuelle Aufgaben übernimmt, ist Qualität ein Muss. Auch wenn die Automatisierung viele unserer Aufgaben übernimmt, wird ein gewisses Qualitätsniveau schwer zu automatisieren bleiben, und wir Front-End-Entwickler haben noch viele lange Tage, um unsere Arbeit zu genießen.
Ich arbeite seit über 15 Jahren als Webentwickler. Ich kann stolz sagen, dass all diese Checklisten wertlos sind. Die Realität beweist, dass Dinge getan werden müssen. Der beste Validator ist der Browser und die besten „automatisierten“ Tests sind menschliche Tests. Natürlich kann Automatisierung die Qualität verbessern, aber sie ersetzt niemals den Menschen. Ich glaube nicht an KI, zumindest nicht in den nächsten 30-50 Jahren.
Ich glaube nicht, dass in ihrem Werkzeug etwas automatisiert ist. Nichts, was ich sehen konnte, es sah wie ein einfacher Aufgabenmanager aus.
Tolle Checkliste! Wird auch einen Stern von mir bekommen.
Sind Sie sich jedoch sicher, dass
<nav>role="navigation"benötigt? Das habe ich auch immer gemacht, aber ich erinnere mich, dass ich einmal eine Warnung vom W3C-Validator erhalten habe, dass es bei einem Nav-Element redundant sei. Ein Nav-Element sagt an sich schon, dass seine Rolle für die Navigation ist. Ich vermute, das Gleiche gilt für<main role="main">, aber da bin ich mir nicht sicher.Wenn ich mich recht erinnere, ist es eine ARIA-Regel, die zur Barrierefreiheit beiträgt. Technisch ist es nicht 100%ig erforderlich.
Ja, ich weiß... es ist eine Landmarkenrolle, aber
role="navigation"ist für die Barrierefreiheit bei Elementen, die eine Art von Navigation außerhalb eines<nav>enthalten, erforderlich. Ein<nav>ist semantisch ausreichend für die Barrierefreiheit.Sie haben Recht. Die ARIA-Rolle ist im
<nav>-Element implizit.Dasselbe gilt für
<main role="main">und<button role="button">, wo die Rolle redundant ist.