Eine Prüfkette, bevor etwas live geht

Bei bork.media ist ein Push auf main gleichzeitig der Livegang. Deshalb läuft vorher automatisch eine Prüfkette: Ein Git-Hook startet npm run pruefen, und nur wenn alles bestanden ist, geht der Push raus.

Geprüft wird genau der Stand, der gepusht wird. Liegen ungesicherte Änderungen im Ordner oder ist ein anderer Commit ausgecheckt, bricht der Hook ab. Sonst hätte ich etwas anderes geprüft als das, was live geht.

Was die Kette prüft

• Build. Danach rechnet ein Skript die Prüfsummen aller eingebetteten Skripte aus und schreibt daraus die Content-Security-Policy.
• Interne Links. Jeder Verweis auf eine Seite oder Datei muss im fertigen Bau existieren.
• CSP im echten Browser. Ein Chrome ohne Fenster lädt jeden Seitentyp mit der echten Policy, schaltet hell und dunkel, öffnet das Kontaktfenster und lässt den Spamschutz eine Probeaufgabe rechnen. Jeder Verstoß zählt. Abgeschickt wird nichts.
• Kontrast. Jede Textzeile wird gegen den Hintergrund gemessen, der wirklich gezeichnet ist. Das Soll ist 4,5 : 1, bei großer Schrift 3 : 1. Gemessen wird die Startseite bei 390 und 1440 Pixeln Breite, hell und dunkel, dazu zwei Fallstudien und eine Notiz.
• Lebenslauf. Das PDF muss genau zwei Seiten haben, in Chrome und in WebKit, der Engine von Safari.

Die langen Schritte haben ein Zeitlimit von vier Minuten. Hängt einer, wird er beendet und einmal wiederholt. Einmal stand ein Kontrastlauf zehn Minuten still. Seitdem bricht die Kette so etwas ab, statt ewig zu warten.

Warum genau diese Punkte

Die Kette prüft nichts Theoretisches, sondern das, was schon einmal schiefging.

Kontrast. Lighthouse und axe werten Text auf Verläufen nicht aus und melden trotzdem 100. Mein eigenes Messwerkzeug fand auf der damaligen Seite 116 von 244 Texten unter dem Soll; eine Kachel lag bei 2,2 : 1. Nach dem Umbau waren es null, und dabei soll es bleiben.

Safari. Safari druckt mit größerem Rand als Chrome. Im Lebenslauf rutschten dadurch drei Projekte und die Fußzeile auf eine dritte Seite, in Chrome sah alles gut aus. Wie schnell so etwas zurückkommt, zeigte sich wenige Minuten nach dem Einbau der Kette: eine längere Titelzeile, und Safari druckte wieder drei Seiten. Jetzt steht der Titel auf einer Zeile.

Content-Security-Policy. Eine zu strenge Policy bricht still. Die Seite baut fehlerfrei, nur im Browser läuft ein Skript nicht. Deshalb prüft die Kette im echten Browser. Dass sie das bemerkt, zeigte die Gegenprobe beim Einbau: Ohne Prüfsumme meldete sie sechs Verstöße. Wie leicht so etwas passiert, zeigte sich einen Monat später auf babytakt.app: Dort blockte die Policy ein eingebettetes Skript, für das Astro keine Prüfsumme rechnet.

Was grün bedeutet

Der erste Lauf war nach drei Minuten durch, der Lauf im Bild oben nach knapp zweieinhalb.

Grün heißt nicht, dass die Seite gut ist. Es heißt, dass die Fehler, die ich schon kenne, nicht zurück sind. Ob eine Seite wirklich so aussieht, wie sie soll, sehe ich mir trotzdem selbst an, siehe Entwickeln mit KI.