Seite 25 - Monthly Archives: January 2025

Ein Video-Embed ohne festes Seitenverhältnis verschiebt beim Laden das gesamte Layout — und kostet Core Web Vitals-Punkte. Mit den aspect-ratio-Utilities von Tailwind CSS löst man dieses Problem sauber, responsiv und ohne Padding-Hack. Dieser Artikel zeigt alle Patterns — von 16:9 bis zu benutzerdefinierten Verhältnissen.

Eine rohe Liste von Commit-Nachrichten ist kein Changelog, das jemand lesen will. Claude kann Commit-Historien zwischen zwei Releases kategorisieren, zusammenfassen und in eine Struktur bringen, die Nutzer und Entwickler tatsächlich verstehen. Dieser Artikel zeigt den praktischen Workflow, die Abgrenzung zu Tools wie semantic-release und die nötige Qualitätskontrolle.

Wer interaktive Bedienelemente als generische div oder span umsetzt, verliert automatisch Tastaturbedienung, Fokusreihenfolge und Screenreader-Ankündigungen und muss all das mühsam mit ARIA nachbauen. Native HTML-Elemente wie button, a, ul und h2 liefern diese Eigenschaften kostenlos mit. Dieser Artikel zeigt, wie ihr semantische Fehler in Magento- und Hyvä-Templates erkennt und durch die richtigen Elemente ersetzt.

Wird eine React-Native-App per Force-Quit beendet und danach erneut geöffnet, geht standardmäßig der gesamte Navigationszustand verloren, weil sowohl React Navigation als auch Expo Router den aktuellen Screen und die Stack-Historie ausschließlich im Arbeitsspeicher halten. Für viele Apps ist das ein spürbarer Bruch im Nutzungserlebnis, wenn eine tief verschachtelte Ansicht nach jedem Neustart wieder beim Start-Screen beginnt. Dieser Artikel zeigt, wie sich der Navigationszustand gezielt persistieren lässt, welche Konfiguration dafür in React Navigation und Expo Router nötig ist, und wo diese Wiederherstellung bewusst unterbleiben sollte, etwa nach einem abgelaufenen Login.

Die shape()-Funktion erweitert clip-path um echte Kurvenbefehle wie curve to, arc to und smooth to, direkt in lesbarer CSS-Syntax. Wo bisher nur ein externes SVG oder eine grobe Polygon-Annäherung half, entstehen jetzt organische, kurvige Formen ohne Build-Step und ohne Pfad-Editor.

Die Sitelinks Search Box zeigt Nutzern ein Suchfeld direkt unterhalb des eigenen Domain-Ergebnisses in der Google-Suche, über das sie ohne Klick auf die Website direkt auf der eigenen Seite suchen können. Technisch braucht es dafür nicht mehr als ein sauberes WebSite-Schema mit SearchAction, doch die tatsächliche Anzeige liegt am Ende ausschließlich bei Google. Dieser Artikel zeigt die Implementierung, die technischen Voraussetzungen und warum das Feature trotz korrektem Markup nicht garantiert erscheint.

Ein einzelnes riesiges JavaScript Bundle bremst jede Vue App beim ersten Laden aus. Bundle Splitting mit dynamic import, manualChunks und Route basiertem Code Splitting verteilt den Code auf kleinere Häppchen, die der Browser parallel und bedarfsgerecht lädt.

Eine bestehende REST-API auf einen Schlag durch GraphQL zu ersetzen, ist der sicherste Weg, Produktionsausfälle zu provozieren. Mit einer BFF-Schicht, dem Strangler-Fig-Pattern und einem klaren Rollout-Plan lässt sich REST zu GraphQL migrieren, während beide Protokolle monatelang parallel und risikofrei koexistieren.

Conditional Types erlauben es, den Typ eines Ausdrucks von einer Bedingung über einen anderen Typ abhängig zu machen. Sie stecken hinter fast jedem eingebauten Utility-Type wie Exclude, ReturnType oder Awaited und lösen Probleme, die sonst nur mit Type Assertions oder doppeltem Code lösbar wären. Dieser Artikel zeigt Syntax, Praxisfälle und die Grenze zur Lesbarkeit.

CSS Container Queries beenden das Zeitalter der viewport-zentrierten Responsiveness. Eine Karte weiß jetzt, wie breit ihr Container ist — und passt sich an, egal ob sie in einer Sidebar, einem Hauptbereich oder einem Modal erscheint. Das verändert die CSS-Architektur von Grund auf.