Seite 4 - Monthly Archives: March 2025

React useImperativeHandle: Refs richtig nach außen exponieren

März 16, 2025

</>

{ }

React · Hooks · Refs · Komponenten-API · TypeScript

React useImperativeHandle
Refs richtig nach außen exponieren

Einen rohen DOM-Node via Ref nach außen zu geben, ist eine Einladung zu unkontrolliertem externem Zugriff. useImperativeHandle definiert präzise, welche Methoden über den Ref verfügbar sind – eine kontrollierte API statt einer offenen DOM-Schnittstelle.

12 Min. Lesezeit useImperativeHandle · forwardRef · useRef · focus · validate React 18+ · TypeScript

Inhaltsverzeichnis

1. Das Problem mit unkontrollierten DOM-Refs
2. forwardRef: Refs an Kind-Komponenten weiterleiten
3. useImperativeHandle: Syntax und Grundprinzip
4. Praxisbeispiel: Fokus-API für Formularfelder
5. Validierung und Scroll-to-Error-Muster
6. Komplexe Komponenten: Player und Media-Steuerung
7. useImperativeHandle vs. rohem Ref im Vergleich
8. Wann useImperativeHandle verwenden – und wann nicht
9. TypeScript-Typisierung mit forwardRef
10. Zusammenfassung
11. FAQ

1. Das Problem mit unkontrollierten DOM-Refs

Tailwind CSS Scroll Snap Slider: Karussell ohne JavaScript-Bibliothek

März 16, 2025

</>

tw

Tailwind CSS · Scroll Snap · Alpine.js · CSS-only Slider

Tailwind CSS Scroll Snap Slider:
Karussell ohne externe Bibliothek

Scroll Snap ist CSS – kein JavaScript. Mit Tailwind CSS und wenigen Utility-Klassen entsteht ein Touch-fähiger Slider, der auf jedem Gerät nativ funktioniert. Alpine.js ergänzt Navigationspfeile, Dot-Indikatoren und Keyboard-Support ohne eine einzige externe Bibliothek zu laden.

14 Min. Lesezeit Scroll Snap · Alpine.js · Touch · Keyboard · Dots Tailwind CSS v3 · v4 · Alle modernen Browser

Inhaltsverzeichnis

1. Warum Scroll Snap statt Slider-Bibliothek?
2. Grundstruktur: Container und Slides mit Tailwind CSS
3. Snap-Typen und Align-Optionen verstehen
4. Navigation mit Alpine.js: Pfeile und scrollTo
5. Dot-Indikatoren: Aktiven Slide mit IntersectionObserver erkennen
6. Mehrere Slides gleichzeitig sichtbar: peek und partial
7. Keyboard-Navigation und Accessibility
8. Autoplay mit Pause bei Hover und Fokus
9. Scroll Snap Slider vs. Bibliotheken im Vergleich
10.

Symfony Validator: Eigene Constraint-Klassen schreiben

März 16, 2025

We're sorry, an error has occurred while generating this content.

Slots und Scoped Slots für flexible UI-Komponenten in Vue.js

März 15, 2025

We're sorry, an error has occurred while generating this content.

JavaScript Memory Leaks mit Chrome DevTools finden und beheben

März 14, 2025

JS

() =>

JavaScript · Chrome DevTools · Performance · Memory

JavaScript Memory Leaks mit Chrome DevTools
systematisch aufspüren und dauerhaft beheben

Memory Leaks in JavaScript-Anwendungen sind unsichtbar – bis der Browser abstürzt oder die Seite nach Minuten spürbar langsamer wird. Heap Snapshots, Allocation Timelines und das Retainer-Diagramm in Chrome DevTools machen unsichtbare Speicherlecks sichtbar, lokalisierbar und behebbar.

15 Min. Lesezeit Heap Snapshot · Allocation Timeline · Retainer · detached DOM Chrome 120+ · JavaScript ES2024

Inhaltsverzeichnis

1. Wie JavaScript-Speicherverwaltung wirklich funktioniert
2. Die häufigsten Ursachen von Memory Leaks
3. Chrome DevTools Memory-Panel im Überblick
4. Heap Snapshots: Drei-Snapshot-Technik
5. Allocation Timeline für laufende Leaks
6. Detached DOM-Knoten aufspüren
7. Event-Listener-Leaks diagnostizieren
8. Konkrete Fix-Strategien mit Code
9. Leak-Muster im direkten Vergleich
10. Zusammenfassung
11. FAQ

1. Wie JavaScript-Speicherverwaltung

Node, PHP und Composer in Docker-Containern zusammenbringen

März 13, 2025

Docker · Node · PHP · Composer · Multi-Stage

Node, PHP und Composer
in Docker-Containern zusammenbringen

PHP-Projekte brauchen Composer für Backend-Dependencies und Node für Asset-Compilation. Beide in einem Container zu zwingen ist falsch – beide auf dem Host laufen zu lassen ist unpraktisch. Multi-Stage-Builds und sauber getrennte Build-Container lösen das elegant.

11 Min. Lesezeit Multi-Stage · Composer · Node · Asset-Pipeline · CI PHP 8.4 · Node 20 · Composer 2 · Docker Compose

Inhaltsverzeichnis

1. Das Grundproblem: Node und PHP in einem Projekt
2. Klare Rollentrennung: Build-Container vs. Runtime-Container
3. Composer in einem eigenen Container betreiben
4. Node-Assets in einem separaten Build-Stage kompilieren
5. Multi-Stage-Dockerfile für PHP-Node-Projekte
6. Build-Reihenfolge in Docker Compose steuern
7. Layer-Caching für schnelle Build-Zeiten
8. Hybride Builds in CI/CD-Pipelines
9. Build-Strategien im direkten Vergleich
10. Zusammenfassung
11. FAQ

1. Das Grundproblem: Node und

Symfony UX Live Component: Reactive PHP-Komponenten

März 10, 2025

We're sorry, an error has occurred while generating this content.

Alpine.js v3 — Alle Direktiven auf einen Blick

März 10, 2025

x-data

Alpine

Alpine.js · Direktiven · Frontend · Hyvä

Alpine.js v3 — Alle Direktiven auf einen Blick
von x-data bis x-teleport vollständig erklärt

Alpine.js v3 bietet 15 Direktiven, 6 magische Properties und 3 globale Methoden. Wer alle davon kennt und den richtigen Einsatzort versteht, schreibt interaktive UIs ohne Build-Step, ohne Virtual DOM und ohne die Komplexität großer Frameworks – direkt im HTML, reaktiv und wartbar.

12 Min. Lesezeit x-data · x-bind · x-on · x-model · x-show · x-if · x-for · x-transition Alpine.js 3.x · Hyvä Themes · Magento 2

Inhaltsverzeichnis

1. Warum Alpine.js v3 eine vollständige Direktiven-Übersicht verdient
2. x-data: Der Ursprung jedes reaktiven Kontexts
3. x-bind und x-on: Attribute und Events deklarativ verdrahten
4. x-model: Two-Way-Binding für Formulare
5. x-show vs. x-if: Sichtbarkeit und DOM-Präsenz
6. x-for: Listen reaktiv rendern
7. x-transition: Animationen ohne CSS-Klassen-Chaos
8. x-effect und x-ref: Seiteneffekte und DOM-Zugriff
9. x-teleport

Deployments über Shell-Skripte vs. Deployer vs. Ansible in GitLab vergleichen

März 09, 2025

We're sorry, an error has occurred while generating this content.

Event Delegation für dynamische Listen in JavaScript

März 08, 2025

JS

() =>

JavaScript · DOM Events · Event Delegation · Performance

Event Delegation für dynamische Listen
ein Listener für tausende Elemente

Wer für jedes Listenelement einen eigenen Event-Listener registriert, baut eine Speicher- und Performance-Falle. Event Delegation nutzt Event Bubbling und ermöglicht mit einem einzigen Listener die Behandlung von Events auf beliebig vielen Elementen – auch auf solchen, die erst später dynamisch zum DOM hinzugefügt werden.

14 Min. Lesezeit Event Bubbling · closest() · data-Attribute · SPA-Navigation Vanilla JS · React · Alpine.js

Inhaltsverzeichnis

1. Event Bubbling: das Grundprinzip der Event Delegation
2. Warum ein Listener pro Element das falsche Muster ist
3. Event Delegation implementieren: closest() und matches()
4. data-Attribute als sichere Action-Identifier
5. Dynamisch hinzugefügte Elemente automatisch abdecken
6. Event Delegation in Tabellen und komplexen Listen
7. Fallstricke: stopPropagation, SVG und Formular-Events
8. SPA-Navigation und