Seite 72 - Mironsoft Blog

EditorConfig, Code Style und Teamkonsistenz in PhpStorm

März 16, 2025

IDE

{ }

PhpStorm · EditorConfig · Code Style · Teamkonsistenz

EditorConfig, Code Style und
Teamkonsistenz in PhpStorm

Inkonsistenter Code entsteht nicht aus Böswilligkeit, sondern aus fehlenden Werkzeugen. EditorConfig, PHP CS Fixer und PhpStorm-Inspektionen zusammen erzwingen einheitlichen Code automatisch – ohne Diskussionen im Code-Review.

13 Min. Lesezeit EditorConfig · PHP CS Fixer · PHP_CodeSniffer · Inspektionen · Save Actions PhpStorm 2024.x · 2025.x · PHP 8.x

Inhaltsverzeichnis

1. Das Teamkonsistenz-Problem und warum es tooling braucht
2. EditorConfig: die Basis-Ebene für alle Editoren
3. PhpStorm und EditorConfig: automatische Übernahme
4. PHP Code Style in PhpStorm konfigurieren
5. PHP CS Fixer in PhpStorm integrieren
6. PHP_CodeSniffer für Magento 2 Standards einrichten
7. PhpStorm-Inspektionen gezielt konfigurieren
8. Save Actions: automatische Formatierung beim Speichern
9. Tool-Vergleich: Was übernimmt welches Werkzeug?
10. Zusammenfassung
11. FAQ

1. Das Teamkonsistenz-Problem

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