Seite 5 - Monthly Archives: March 2025

React useId: Stabile IDs für Accessibility-Attribute

März 08, 2025

</>

{ }

React 18 · Accessibility · SSR · Hooks

React useId
Stabile IDs für Accessibility-Attribute

Barrierefreiheit in React-Komponenten scheitert oft an einem Detail: IDs für aria-labelledby und htmlFor müssen einmalig sein und auf Server und Client übereinstimmen. useId löst beides auf einmal – ohne Boilerplate und ohne Hydration-Fehler.

9 Min. Lesezeit useId · aria-labelledby · htmlFor · aria-describedby · SSR · Next.js React 18+ · TypeScript

Inhaltsverzeichnis

1. Das ID-Problem in React-Komponenten
2. Warum ARIA-IDs einmalig sein müssen
3. useId: Syntax und grundlegendes Verhalten
4. useId in Formular-Komponenten
5. Mehrere IDs aus einem useId-Aufruf
6. SSR und Hydration: Warum useId sicher ist
7. useId vs. andere ID-Ansätze im Vergleich
8. Typische Fehler und Einschränkungen
9. TypeScript und Komponentendesign
10. Zusammenfassung
11. FAQ

1. Das ID-Problem in React-Komponenten

In HTML verknüpfen IDs Elemente miteinander: Ein <label>-Element referenziert ein <input>-Element via htmlFor

Magento Performance mit SQL analysieren: Top 20 langsamste Datenbankzugriffe

März 07, 2025

PERF

EXPLAIN

Magento Performance SQL & Datenbankanalyse

Magento Performance mit SQL analysieren:
Top 20 langsamste Datenbankzugriffe

performance_schema, Slow Query Log, EXPLAIN und typische Magento-Anti-Pattern – ein systematischer Ansatz, um die langsamsten SQL-Abfragen zu finden, zu verstehen und gezielt zu beheben.

⏱ 17 Min. Lesezeit ???? Magento Performance SQL ⚙️ MySQL 8.0 / MariaDB ???? Januar 2025

Magento Performance SQL: Warum die Datenbank der Engpass ist

In den meisten Magento-Performance-Projekten liegt der größte Hebel nicht im PHP-Code oder im Caching, sondern in der Datenbank. Ungünstige SQL-Abfragen, fehlende Indizes und typische Magento-spezifische Anti-Pattern wie übermäßige EAV-JOINs oder N+1-Abfragen können eine Seite um den Faktor 10 bis 50 verlangsamen. Das Gute: MySQL und MariaDB liefern mit performance_schema und dem Slow Query Log ausgezeichnete Werkzeuge, um genau diese Probleme zu finden.

Dieser Artikel zeigt, wie man Magento Performance SQL-Analysen systematisch

MySQL Deadlock analysieren und vermeiden – Praxisguide

März 05, 2025

1. Was ist ein MySQL Deadlock?

Ein MySQL Deadlock entsteht, wenn zwei oder mehr Transaktionen jeweils eine Ressource halten und gleichzeitig auf eine Ressource warten, die die andere Transaktion hält. Das ergibt einen zyklischen Wartegraph, aus dem keine Transaktion selbstständig herauskommt. InnoDB erkennt diesen Zyklus typischerweise innerhalb von Millisekunden, wählt eine Opfer-Transaktion (die mit dem geringsten Rollback-Aufwand) und rollt diese zurück — die andere kann dann weitermachen.

Das klassische Szenario mit zwei Transaktionen: Transaktion A sperrt Zeile 1 und wartet auf Zeile 2. Transaktion B hat Zeile 2 gesperrt und wartet auf Zeile 1. Beide warten aufeinander — zyklischer Deadlock. InnoDB wählt Transaktion B als Opfer, rollt sie zurück, Transaktion A kann weitermachen. Der Aufrufer von Transaktion B erhält den Fehler ERROR 1213 (40001): Deadlock found when trying to get lock; try restarting transaction.

Deadlocks sind kein Zeichen eines kaputten Systems — sie sind ein normales

navigator.sendBeacon: zuverlässige Daten beim Seitenende senden

März 05, 2025

JS

() =>

JavaScript · Browser-APIs · Analytics · Networking

navigator.sendBeacon
Daten beim Seitenende zuverlässig senden

Fetch und XHR beim Seitenende zu nutzen ist eine Race-Condition gegen den Browser. Wenn der Tab geschlossen oder die Seite entladen wird, bricht der Browser offene Anfragen ab. navigator.sendBeacon überträgt Daten garantiert, ohne die Navigation zu verzögern – das ist die richtige Lösung für Analytics, Session-Daten und Exit-Tracking.

10 Min. Lesezeit sendBeacon · Beacon API · beforeunload · visibilitychange · fetch keepalive Alle modernen Browser

Inhaltsverzeichnis

1. Das Problem: Warum fetch beim Seitenende versagt
2. Wie navigator.sendBeacon funktioniert
3. Syntax, Rückgabewert und Payload-Typen
4. Der richtige Auslöser: visibilitychange statt beforeunload
5. CORS-Verhalten der Beacon API
6. Payload-Limits und Fehlerbehandlung
7. fetch keepalive als moderne Alternative
8. sendBeacon vs. fetch keepalive vs. XHR im Vergleich
9. Praxisbeispiel: robuste Analytics-Queue

Hexagonale Architektur in Symfony: Ports und Adapters praktisch umgesetzt

März 01, 2025

SF

{ }

Symfony · Hexagonale Architektur · Ports und Adapters · DDD

Hexagonale Architektur
in Symfony: Ports und Adapters

Die hexagonale Architektur — auch bekannt als Ports and Adapters — befreit die Domänenlogik von der Kopplung an Frameworks, Datenbanken und externe Services. In Symfony lässt sie sich mit PHP-Interfaces als Ports und Symfony-Services als Adapters präzise umsetzen: vollständig testbarer Domänencode ohne ein einziges Framework-Import in der Kernlogik.

20 Min. Lesezeit Ports · Adapters · Domain Layer · Application Layer · Infrastructure Symfony 6.x / 7.x · PHP 8.2+ · DDD

Inhaltsverzeichnis

1. Was ist die hexagonale Architektur?
2. Die drei Schichten: Domain, Application, Infrastructure
3. Ports: PHP-Interfaces als Vertragsdefinition
4. Der Domänenkern ohne Framework-Import
5. Application Layer: Use Cases und Command Handler
6. Adapters: Symfony-Services implementieren Ports
7. Dependency Injection: Ports mit Adapters verdrahten
8. Testen ohne Framework: Domänenlogik isoliert

ARIA-Attribute automatisieren: Accessibility mit Alpine.js

März 01, 2025

x-data

Alpine

Alpine.js · ARIA · Accessibility · WCAG · Screen Reader

ARIA-Attribute automatisieren:
Accessibility mit Alpine.js

Barrierefreiheit ist keine optionale Ergänzung – sie ist eine gesetzliche Anforderung und ein Qualitätsmerkmal. Alpine.js macht es einfach, ARIA-Attribute reaktiv mit dem UI-Zustand zu synchronisieren: aria-expanded folgt automatisch dem Toggle-State, aria-hidden wird dynamisch gesetzt, und Fokus-Traps halten den Keyboard-Fokus im richtigen Kontext.

17 Min. Lesezeit ARIA · Fokus-Trap · Live-Regions · Keyboard-Navigation WCAG 2.2 · Alpine.js 3.x · Hyvä 1.3+

Inhaltsverzeichnis

1. Warum ARIA und Alpine.js so gut zusammenpassen
2. aria-expanded: Dropdown- und Akkordeon-State automatisieren
3. aria-hidden: Inhalte für Screen Reader aus- und einblenden
4. Fokus-Trap: Fokus im Modal halten
5. ARIA Live Regions: Änderungen ansagen
6. ARIA Roles und Keyboard-Patterns (WAI-ARIA)
7. Fokus-Management beim Öffnen und Schließen
8. Accessibility mit Screen Readern testen
9.