Seite 2 - Monthly Archives: December 2025

JavaScript Immutability Patterns: Unveränderliche Datenstrukturen richtig einsetzen

Dezember 24, 2025

JS

() =>

JavaScript · Immutability · Funktionale Programmierung · State Management

JavaScript Immutability Patterns
Unveränderliche Datenstrukturen richtig einsetzen

Mutabler State ist die häufigste Quelle schwer findbarer Bugs in JavaScript-Anwendungen. Immutability Patterns machen Zustandsänderungen explizit, ermöglichen Änderungserkennung per Referenzvergleich und verhindern, dass shared State an unerwarteten Stellen verändert wird – von Object.freeze bis zu Records und Tuples.

15 Min. Lesezeit Object.freeze · Spread · Immer.js · Records & Tuples ES2015+ · React · Redux · State Management

Inhaltsverzeichnis

1. Warum mutabler State Bugs produziert
2. Object.freeze: Shallow vs. Deep Immutability
3. Spread-Operator und Object.assign als Immutability-Werkzeuge
4. Immutable Array-Operationen ohne Mutation
5. Strukturelles Sharing: Effizienz ohne Kopieren
6. Immer.js: Mutable schreiben, immutable erhalten
7. Referenzgleichheit und Change Detection
8. Records und Tuples: native Immutability

Tailwind CSS Navigation Patterns: Sticky Header, Mega-Menü und Mobile Nav

Dezember 24, 2025

</>

tw

Tailwind CSS · Navigation · Alpine.js · Barrierefreiheit

Tailwind CSS Navigation Patterns
Sticky Header, Mega-Menü und Mobile Nav mit Alpine.js

Navigation ist das Rückgrat jeder Website – und gleichzeitig die Komponente, an der sich zeigt, ob Tailwind CSS nur für einfache Styling-Aufgaben genutzt wird oder als vollständiges UI-System. Diese Anleitung zeigt, wie die wichtigsten Tailwind CSS Navigation Patterns korrekt implementiert werden: mit ARIA-Attributen, Keyboard-Navigation und Alpine.js.

16 Min. Lesezeit Sticky Header · Mega-Menü · Mobile Nav · Breadcrumb · Sidebar Tailwind CSS · Alpine.js · ARIA · WCAG 2.2

Inhaltsverzeichnis

1. Grundlagen: Navigation mit Tailwind CSS richtig aufsetzen
2. Sticky Header mit Scroll-Behavior
3. Dropdown-Menü mit Alpine.js und ARIA
4. Mega-Menü: Kategorie-Navigation für E-Commerce
5. Mobile Hamburger-Navigation
6. Off-Canvas-Sidebar mit Overlay
7. Breadcrumb-Navigation mit Schema.org
8. Navigation Patterns im direkten Vergleich
9. ARIA und Keyboard-Navigation

UNION vs. UNION ALL: Wann welcher Operator richtig ist

Dezember 23, 2025

SQL

UNION

SQL · MySQL 8 · Query-Optimierung · Magento

UNION vs. UNION ALL:
Wann welcher Operator richtig ist

SQL UNION entfernt Duplikate durch einen impliziten DISTINCT-Schritt – das kostet Zeit. UNION ALL gibt alle Zeilen zurück, ohne zu deduplizieren. Der Unterschied klingt trivial, ist aber in der Praxis performance-entscheidend.

14 Min. Lesezeit Praxisbeispiele Performance-Vergleich Magento Reporting

Inhaltsverzeichnis

1. Das Grundprinzip: DISTINCT-Schritt vs. direkte Ausgabe
2. Wann UNION ALL immer die richtige Wahl ist
3. Wann UNION notwendig bleibt
4. ORDER BY auf UNION-Ergebnissen
5. LIMIT-Optimierung in MySQL 8
6. INTERSECT und EXCEPT in MySQL 8.0.31+
7. Magento: Aktive und archivierte Bestellungen kombinieren
8. Unterstützung
9. Zusammenfassung
10. FAQ

1. Das Grundprinzip: DISTINCT-Schritt vs. direkte Ausgabe

Der Unterschied zwischen SQL UNION und UNION ALL lässt sich in einem Satz zusammenfassen: UNION wendet nach dem Zusammenführen beider Ergebnismengen ein implizites DISTINCT

Docker-Interpreter in PhpStorm sauber aufsetzen

Dezember 23, 2025

IDE

{ }

PhpStorm · Docker · PHP-Interpreter · XDebug

Docker-Interpreter in PhpStorm
sauber aufsetzen

Wer PHP in einem Docker-Container betreibt, will auch PhpStorm mit dieser PHP-Version arbeiten lassen – für Autocompletion, Navigation, Tests und Debugging. Der Docker-Interpreter in PhpStorm verbindet IDE und Container, ohne dass PHP lokal installiert sein muss. Dieser Artikel zeigt, wie er korrekt konfiguriert wird.

13 Min. Lesezeit Docker Compose · PHP-Interpreter · XDebug · Path-Mappings · Composer PhpStorm 2024.x · Docker · PHP 8.x · Magento 2

Inhaltsverzeichnis

1. Warum Docker-Interpreter statt lokaler PHP-Installation
2. Docker-Verbindung in PhpStorm einrichten
3. PHP-Interpreter aus Docker-Container konfigurieren
4. Composer über den Docker-Interpreter nutzen
5. PHPUnit-Tests im Docker-Container ausführen
6. XDebug mit Docker-Interpreter konfigurieren
7. Path-Mappings verstehen und richtig setzen
8. Häufige Fehler und ihre Lösungen
9. Zusammenfassung
10. FAQ

1. Warum Docker-Interpreter

SSR, SSG und Hybrid-Rendering in Nuxt sauber einsetzen

Dezember 23, 2025

<v/>

{ }

Nuxt · Vue.js · SSR · SSG · Hybrid-Rendering

SSR, SSG und Hybrid-Rendering in Nuxt 3
Den richtigen Rendering-Modus für jede Route wählen

Nuxt 3 bietet Server Side Rendering, Static Site Generation, Incremental Static Regeneration und Hybrid-Rendering — alles in einem Framework. Wer die Unterschiede nicht kennt, verschenkt Performance und SEO-Potenzial. Dieser Artikel erklärt alle Rendering-Modi mit konkreten Route-Rules-Konfigurationen und typischen Fallstricken.

16 Min. Lesezeit SSR · SSG · ISR · Route Rules · Hydration · Caching Nuxt 3 · Vue 3 · Nitro · TypeScript

Inhaltsverzeichnis

1. Rendering-Modi in Nuxt 3: Überblick und Entscheidungsrahmen
2. SSR: Server Side Rendering für dynamische Inhalte
3. SSG: Static Site Generation für maximale Performance
4. ISR: Incremental Static Regeneration als Kompromiss
5. Hybrid-Rendering: Verschiedene Modi pro Route
6. Route Rules: Rendering-Strategie deklarativ konfigurieren
7. Hydration-Fehler verstehen und vermeiden
8. Server-Caching mit

Tailwind

Tailwind CSS Animationen: Keyframes, Transitions und animate-Utilities

Mir Admin - Dezember 23, 2025

Wer Tailwind CSS nur für statisches Styling nutzt, verschenkt erhebliches Potenzial. Die eingebauten animate-Utilities, konfigurierbare Keyframes und das transition-System ermöglichen flüssige, performante UI-Animationen — ohne eine einzige Zeile eigenes CSS schreiben zu müssen. Dieser Artikel zeigt, wie es geht.

Vue in Legacy-Systeme integrieren statt alles neu zu bauen

Dezember 22, 2025

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

Exceptions in PHPUnit korrekt testen

Dezember 21, 2025

@test

assert

PHPUnit · PHP 8.4 · Exception Testing · Unit Tests

Exceptions in PHPUnit korrekt testen
expectException, Codes, Nachrichten und eigene Hierarchien

Wer Exceptions nicht gezielt testet, lässt Fehlerbehandlung ungeprüft – der gefährlichste blinde Fleck in einer PHP-Testsuite. PHPUnit bietet präzise Methoden, um sicherzustellen, dass der richtige Ausnahmetyp, die passende Nachricht und der korrekte Fehlercode ausgelöst werden.

12 Min. Lesezeit expectException · expectExceptionMessage · expectExceptionCode PHPUnit 11 · PHP 8.4

Inhaltsverzeichnis

1. Warum Exception-Tests unverzichtbar sind
2. expectException: den Typ korrekt prüfen
3. expectExceptionMessage und MessageMatches
4. expectExceptionCode: Fehlercodes gezielt testen
5. Eigene Exception-Hierarchien strukturieren
6. Exceptions mit DataProvider kombinieren
7. Typische Fallstricke und falsche Patterns
8. Exception-Test-Methoden im Vergleich
9. Exception-Tests in CI und Coverage integrieren
10. Zusammenfassung
11. FAQ

1. Warum

Artefakte in GitLab: Was in den Release-Build gehört und was nicht

Dezember 21, 2025

CI/CD

.yml

GitLab · CI/CD · Magento · Artefakte

Artefakte in GitLab:
Was in den Release-Build gehört – und was nicht

Wer wahllos Verzeichnisse in GitLab-Artefakte packt, erhält aufgeblähte Pakete, nicht reproduzierbare Deployments und unnötige Serverrisiken. Die richtige Trennung von Build-Output, Shared-Daten und Server-State ist der Kern eines belastbaren Release-Prozesses für Magento.

12 Min. Lesezeit vendor · generated · pub/static · shared · artifacts GitLab CI · Magento 2 · PHP 8.4

Inhaltsverzeichnis

1. Was ein GitLab-Artefakt wirklich ist
2. Build-Output vs. Server-State: die zentrale Trennlinie
3. Magento-Verzeichnisse im Artefakt-Check
4. vendor/ und generated/ – bauen oder deployen?
5. pub/static und Frontend-Assets im Build
6. Shared-Daten: was nie ins Artefakt gehört
7. artifacts in .gitlab-ci.yml korrekt konfigurieren
8. Paketgröße kontrollieren: expire_in und exclude
9. Vergleich: aufgebläht vs. sauber getrennt
10. Zusammenfassung
11. FAQ

1. Was ein GitLab-Artefakt wirklich

JavaScript MutationObserver: DOM-Änderungen effizient beobachten

Dezember 20, 2025

JS

() =>

JavaScript · DOM API · MutationObserver · Performance

JavaScript MutationObserver
DOM-Änderungen reaktiv, asynchron und performant beobachten

Der MutationObserver ist die moderne, performante Alternative zu DOMSubtreeModified und polling-basierten DOM-Beobachtungsansätzen. Er reagiert asynchron auf Attribut-, Kindknoten- und Textänderungen im DOM – ohne das Rendering-Thread-Blocking der alten Mutation-Events.

12 Min. Lesezeit observe() · disconnect() · MutationRecord · subtree · attributeFilter Alle modernen Browser · JavaScript ES2024

Inhaltsverzeichnis

1. Warum MutationObserver statt DOM-Events und Polling?
2. Grundprinzip: observe, callback und disconnect
3. Konfigurationsoptionen im Detail
4. MutationRecord analysieren
5. Attribut-Änderungen beobachten
6. childList: hinzugefügte und entfernte Knoten
7. Performance-Optimierung und häufige Fallstricke
8. Reale Anwendungsfälle: Lazy Loading, Accessibility und Third-Party
9. MutationObserver vs. andere Observer-APIs
10. Zusammenfassung