Archive: November 2025

1. Farbpaletten-Generator: Aus einer Markenfarbe die volle Tailwind-Skala bauen

   22.11.2025

   Ein Designteam liefert meist genau einen Hex-Wert für die Markenfarbe, aber Tailwind erwartet eine vollständige Skala von 50 bis 950 für Hintergründe, Rahmen, Text und Hover-Zustände. Wer diese elf Stufen von Hand in einem Grafikprogramm zusammenklickt, bekommt selten ein konsistentes Ergebnis, weil sich Helligkeit und Sättigung ohne festen Farbraum kaum gleichmäßig abstufen lassen. Mit einer OKLCH-basierten Interpolation lässt sich dieser Prozess automatisieren und liefert Skalen, die sich genauso gleichmäßig anfühlen wie Tailwinds eingebaute Paletten.

   Read more

2. JavaScript IndexedDB: Offline-Datenbank im Browser richtig nutzen

   22.11.2025

   IndexedDB ist die mächtigste Offline-Speicherlösung im Browser: strukturierte Daten, Gigabyte-Kapazität, Transaktionen, Indexes und asynchrone Abfragen ohne Block des UI-Threads. Wer die Grundlagen beherrscht, baut Offline-first-Apps, die auch ohne Netzwerkverbindung vollständig funktionieren.

   Read more

3. GraphQL API dokumentieren ohne Leser zu überfordern

   22.11.2025

   Gute GraphQL-Dokumentation ist keine statische Datei, sondern lebt im Schema selbst – ergänzt durch Introspection-Tools, lebende Beispielqueries, Deprecation-Strategien und einen Schema-Registry-Workflow, der Änderungen kommunizierbar macht.

   Read more

4. Barrierefreiheitstests mit KI-Unterstützung: Claude für WCAG-konforme Prüfungen

   21.11.2025

   Automatisierte Scanner finden nur einen Bruchteil der Barrieren einer Webanwendung, und manuelle Prüfung ist zeitaufwendig. Claude hilft bei Barrierefreiheitstests, indem es ARIA-Struktur analysiert, Testfälle für Tastaturbedienung generiert und Screenreader-Szenarien durchdenkt, als Ergänzung zu automatisierten Tools und menschlicher Prüfung.

   Read more

5. Google-Play-Data-Safety-Angaben korrekt ausfüllen

   21.11.2025

   Das Data-Safety-Formular in der Play Console verlangt präzise Angaben darüber, welche Daten eine App erfasst, wofür sie genutzt werden und ob sie an Dritte weitergegeben werden. Wer diese Angaben aus dem Bauch heraus ausfüllt statt aus dem tatsächlichen Code- und SDK-Bestand abzuleiten, riskiert Store-Ablehnungen und Vertrauensverlust. Dieser Artikel zeigt eine systematische Vorgehensweise.

   Read more

6. Server-Timing-API: Backend-Performance im Browser sichtbar machen

   21.11.2025

   Während Frontend-Performance mit den DevTools bis ins Detail sichtbar ist, bleibt die Backend-Seite für den Browser meist eine Blackbox. Die Server-Timing-API schließt diese Lücke, indem sie serverseitige Messwerte wie Datenbankzeit, Cache-Status oder Rendering-Dauer über einen einfachen HTTP-Header direkt in die Browser-Werkzeuge und die Navigation-Timing-API überträgt.

   Read more

7. CSS Scroll Snap: Karussells und Galerien ohne JavaScript-Bibliothek

   21.11.2025

   Scroll Snap bringt das Verhalten klassischer Karussell-Bibliotheken direkt in den Browser: Der Nutzer scrollt frei, aber der Container rastet an definierten Positionen ein, sauber und ruckelfrei. Wer scroll-snap-type und scroll-snap-align richtig kombiniert, spart eine komplette JavaScript-Abhaengigkeit und bekommt dabei Touch-Gesten, Tastatursteuerung und Barrierefreiheit quasi geschenkt.

   Read more

8. CSP in Hyvä einrichten: registerInlineScript und Co

   21.11.2025

   Wer Inline-Skripte in Hyvä-Templates ohne das richtige Muster einbaut, sieht früher oder später eine blockierte Ausführung in der Browser-Konsole statt eines funktionierenden Alpine-Widgets. CSP in Hyvä basiert auf einem klaren Zusammenspiel aus Magento_Csp, dem HyvaCsp-ViewModel, csp_whitelist.xml und einem Hash-Mechanismus, der Full Page Cache und strikte Content Security Policy gleichzeitig möglich macht. Dieser Artikel zeigt jeden Baustein mit echtem Code aus Magento 2.4.8 und PHP 8.4.

   Read more

9. Closures in Schleifen: Stale Closures als Fallstrick

   21.11.2025

   Eine Schleife registriert fünf Buttons, jeder Klick zeigt dieselbe Zahl statt der erwarteten Reihenfolge. Dieses Muster heißt stale Closure und trifft nicht nur klassische var-Schleifen, sondern auch moderne Event Handler und asynchronen Code. Dieser Artikel zeigt, wo stale Closures entstehen, warum let das Problem oft löst und wie man verbleibende Fälle systematisch debuggt.

   Read more

10. Filter und Backdrop-Filter Utilities in Tailwind CSS im Detail

    21.11.2025

    Filter Utilities wie blur, brightness und grayscale wirken auf den ersten Blick wie kosmetische Spielerei, lösen in Tailwind aber ein technisch anspruchsvolles Problem: mehrere Filter-Funktionen werden zu einer einzigen CSS-Deklaration komponiert. Wer versteht, wie diese Komposition funktioniert und wo Backdrop-Filter an Grenzen stoßen, baut Effekte, die auch auf Mobilgeräten flüssig bleiben.

    Read more