Seite 3 - Monthly Archives: April 2026

JavaScript Signals: Das reaktive Paradigma für den Browser

April 19, 2026

JS

() =>

JavaScript · TC39 · Reaktivität · Signals

JavaScript Signals
Das reaktive Paradigma als Browser-Standard

Reaktive Programmierung ist in jedem modernen Frontend-Framework anders gelöst – mit inkompatiblen APIs und Abstraktion hinter Framework-Grenzen. Das TC39 Signals-Proposal definiert erstmals eine universelle Grundlage: Signal, computed und effect als native JavaScript-Primitive, auf denen Frameworks aufbauen können.

16 Min. Lesezeit Signal · computed · effect · lazy evaluation · glitch-free TC39 Stage 2 · Solid.js · Angular · Vue

Inhaltsverzeichnis

1. Das Problem reaktiver Programmierung in JavaScript
2. Was ein Signal ist – und was es nicht ist
3. computed(): abgeleitete Zustände ohne manuelles Tracking
4. effect(): Seiteneffekte reaktiv steuern
5. Lazy Evaluation und Glitch-Free Semantik
6. Die TC39-Proposal-API im Detail
7. Signals in Solid.js, Angular und Vue
8. Interoperabilität: Framework-übergreifende Signals
9. Signals vs. andere Reaktivitätsmodelle
10. Zusammenfassung

Symfony Workflow Component: State Machine für Prozesse

April 19, 2026

SF

{ }

Symfony · Workflow Component · State Machine · PHP

Symfony Workflow Component:
State Machine für komplexe Prozesse

Bestellprozesse, Genehmigungsworkflows, Content-Publishing und Ticket-Systeme haben eines gemeinsam: Objekte wechseln ihren Zustand nach definierten Regeln. Wer diese Übergänge mit if-Konstrukten in Services implementiert, baut technische Schulden auf. Das Symfony Workflow Component macht State Machines zu deklarativer Konfiguration mit vollem Event-Support und Visualisierung.

18 Min. Lesezeit Zustände · Übergänge · Guards · Events · Visualisierung Symfony 7.x · PHP 8.3+

Inhaltsverzeichnis

1. Warum das Symfony Workflow Component statt manueller if-Logik
2. Kernkonzepte: Workflow, State Machine und der Unterschied
3. Workflow deklarativ in YAML konfigurieren
4. Entities und Objekte als Workflow-Subjekte
5. Guards: bedingte Übergänge mit Sicherheitsprüfungen
6. Workflow-Events für Nebeneffekte nutzen
7. Den Workflow-Service im Code verwenden
8. Workflows testen: Unit-

PHPStorm

PhpStorm und CI/CD: wie lokale Checks und Pipeline-Checks zusammenpassen

Mir Admin - April 18, 2026

Wenn PHPStan lokal grün ist aber in der CI-Pipeline rot, liegt es an einer unterschiedlichen Konfiguration. Das Problem ist lösbar: Pre-Commit-Hooks, PhpStorm Quality Gates und CI-Pipeline so aufeinander abstimmen, dass lokal identisch prüft was die Pipeline prüft – kein Push der auf Anhieb fehlschlägt.

Frontend-Workflows in PhpStorm: Tailwind, Alpine.js, Vue & React

April 17, 2026

IDE

{ }

PhpStorm · Tailwind CSS · Alpine.js · Vue · React

Frontend-Workflows in PhpStorm
Tailwind, Alpine.js, Vue und React ohne Kontextwechsel

Wer moderne Frontend-Stacks mit PhpStorm nutzt, verliert Zeit durch fehlende Autocomplete-Konfiguration, fehlgeschlagene CSS-Klassen-Completion und Vite-Prozesse, die nicht in der IDE integriert sind. Die richtigen Einstellungen reduzieren den Kontextwechsel zwischen Terminal, Browser und Editor auf ein Minimum.

18 Min. Lesezeit Tailwind · Alpine.js · Vue · React · Vite · TypeScript PhpStorm 2024.x · 2025.x

Inhaltsverzeichnis

1. Warum PhpStorm für moderne Frontend-Stacks?
2. Tailwind CSS: Klassen-Completion und IntelliSense
3. Alpine.js: Direktiven-Support und Syntax-Highlighting
4. Vue.js: SFC-Unterstützung und DevTools-Integration
5. React und JSX: TypeScript und Fast Refresh
6. Vite-Integration: Run Configurations und HMR
7. JavaScript-Debugging direkt in PhpStorm
8. Frontend-Tooling im Vergleich
9. Zusammenfassung
10. FAQ

1. Warum PhpStorm für

Animated Number Counter — Smooth ohne GSAP mit Alpine.js

April 17, 2026

x-data

Alpine

Alpine.js · Animation · requestAnimationFrame · IntersectionObserver

Animated Number Counter
Smooth ohne GSAP — reines Alpine.js und Browser-APIs

Animierte Zahlen-Counter sind auf Landing Pages, Statistik-Sektionen und Dashboards allgegenwärtig. Wer dafür GSAP oder CountUp.js einbindet, lädt unnötige Kilobytes. Mit Alpine.js, requestAnimationFrame und dem IntersectionObserver entsteht ein flüssiger, scroll-triggerter Counter – komplett ohne externe Libraries.

11 Min. Lesezeit requestAnimationFrame · Easing · IntersectionObserver · Intl.NumberFormat Alpine.js 3.x · Vanilla JS · Kein GSAP · Kein jQuery

Inhaltsverzeichnis

1. Warum keinen GSAP oder CountUp.js verwenden?
2. Das Problem mit setInterval für Animationen
3. requestAnimationFrame: Animationen im Browser-Rhythmus
4. Easing-Funktionen: Warum linear langweilig ist
5. Die Alpine.js-Komponente: Grundstruktur
6. IntersectionObserver: Animation bei Scroll-Sichtbarkeit
7. Zahlen-Formatierung: Intl.NumberFormat und Suffixe
8.

npm, Tailwind und Frontend-Builds in GitLab Pipelines integrieren

April 16, 2026

CI/CD

.yml

GitLab · npm · Tailwind CSS · Hyvä · Frontend-Build

npm, Tailwind und Frontend-Builds
in GitLab Pipelines integrieren

Hyvä Themes bringt Tailwind CSS v4 als CSS-first-Build in Magento. Wer diesen Build in die GitLab-Pipeline integriert, muss Node.js-Versionen, npm-Caching, Artefakt-Übergabe und die Reihenfolge gegenüber dem PHP-Build sauber koordinieren. Dieser Artikel zeigt, wie das in der Praxis funktioniert.

13 Min. Lesezeit npm ci · Tailwind v4 · node_modules Cache · Artefakt Magento 2.4 · Hyvä · GitLab CI/CD · Node.js 20

Inhaltsverzeichnis

1. Warum der Frontend-Build in die Pipeline gehört
2. Node.js-Version festlegen und reproduzieren
3. npm-Caching in GitLab CI korrekt konfigurieren
4. Tailwind CSS v4 im Pipeline-Job kompilieren
5. Build-Artefakt sauber übergeben
6. Static Content Deploy nach dem Frontend-Build
7. Typische Fehler beim Frontend-Build in CI
8. Frontend-Build-Strategien im Vergleich
9. Build-Zeit optimieren
10. Zusammenfassung
11. FAQ

1. Warum der Frontend-Build

Eigenen Magento GraphQL Resolver bauen: Query von A bis Z

April 16, 2026

{ }

type

GraphQL · Magento · Resolver · Schema · PHP 8.4

Eigenen Magento GraphQL Resolver bauen
Query von A bis Z

Von der Schema-Definition über das ResolverInterface bis zur DI-Konfiguration, Fehlerbehandlung und Integrationstests – der vollständige Weg zu einem produktionstauglichen Magento GraphQL Resolver ohne Abkürzungen.

18 Min. Lesezeit schema.graphqls · ResolverInterface · DI · Fehlerbehandlung · Tests Magento 2.4 · PHP 8.4 · GraphQL

Inhaltsverzeichnis

1. Warum ein eigener Resolver kein Hexenwerk ist
2. Die schema.graphqls-Datei: Typen, Queries und Argumente
3. Das ResolverInterface implementieren
4. DI-Konfiguration: Resolver registrieren
5. Query-Argumente verarbeiten und validieren
6. Fehlerbehandlung im Resolver: Exceptions vs. Errors
7. Mutations bauen: Input, Service, Response
8. Integrationstests für den eigenen Resolver
9. Zusammenfassung
10. Vergleich: gute vs. problematische Resolver-Muster
11. FAQ

1. Warum ein eigener Resolver kein Hexenwerk ist

Ein eigener GraphQL-Resolver

JavaScript Cache API: HTTP-Ressourcen im Browser cachen

April 15, 2026

JS

() =>

JavaScript · Cache API · Service Worker · Performance

JavaScript Cache API
HTTP-Ressourcen gezielt im Browser speichern

Der Browser-Cache war lange eine Blackbox. Die Cache API gibt Entwicklern vollständige Kontrolle darüber, welche Requests gecacht werden, wie lange sie gültig bleiben und wann sie ersetzt werden – unabhängig von HTTP-Headern und Browser-Heuristiken.

12 Min. Lesezeit Cache Storage · caches.open · Service Worker · Staleness Chrome · Firefox · Safari · Edge

Inhaltsverzeichnis

1. Warum die Cache API existiert
2. Grundprinzip: Cache Storage und caches.open()
3. Ressourcen hinzufügen: add, addAll und put
4. Cache-Treffer mit match und matchAll
5. Integration in den Service Worker
6. Caching-Strategien im Vergleich
7. Staleness erkennen und aktualisieren
8. Cache-Versionierung und Cleanup
9. Cache API vs. andere Speichermechanismen
10. Zusammenfassung
11. FAQ

1. Warum die Cache API existiert

Der klassische HTTP-Cache des Browsers speichert Ressourcen nach Regeln, die

OpenAPI in Symfony mit NelmioApiDocBundle sauber aufsetzen

April 15, 2026

{ }

GET

REST API · OpenAPI · Symfony · NelmioApiDocBundle

OpenAPI in Symfony mit NelmioApiDocBundle
sauber aufsetzen — von Null bis Swagger-UI

Wer eine Symfony-REST-API ohne Dokumentation betreibt, überlässt Konsumenten und QA-Teams die mühsame Reverse-Engineering-Arbeit. NelmioApiDocBundle generiert aus PHP-Attributes und YAML-Konfiguration eine vollständige OpenAPI 3.1-Spezifikation – inklusive Swagger-UI, JWT-Security-Schemes und Response-Schemas direkt aus dem Code.

15 Min. Lesezeit NelmioApiDocBundle · PHP Attributes · OpenAPI 3.1 · JWT · Swagger-UI Symfony 6.x · 7.x · PHP 8.2+

Inhaltsverzeichnis

1. Warum NelmioApiDocBundle statt manueller YAML-Specs
2. Installation und Bundle-Konfiguration
3. OpenAPI-Attributes in Symfony-Controllern
4. Request- und Response-Schemas mit PHP-Klassen
5. Security-Schemes: JWT Bearer und API-Key konfigurieren
6. API-Gruppen und Versionierung
7. Swagger-UI produktionssicher bereitstellen
8. OpenAPI-Spec als JSON/YAML exportieren und testen
9. Konfigurationsansätze

Pagination in GraphQL: Cursor vs. Offset sauber umsetzen

April 15, 2026

{ }

type

GraphQL · Pagination · Relay · Magento · API-Design

Pagination in GraphQL:
Cursor vs. Offset sauber umsetzen

Pagination ist in GraphQL keine Kleinigkeit. Wer einfach Offset und Limit ins Schema schreibt, hat eine funktionierende Lösung – aber keine robuste. Cursor-basierte Pagination nach der Relay-Spezifikation ist aufwändiger, löst aber genau die Probleme, die Offset-Pagination bei wachsenden Datenmengen und parallelen Schreibzugriffen schafft.

12 Min. Lesezeit Relay-Cursor · pageInfo · Resolver · Magento · Vergleich GraphQL · REST-Vergleich · Produktionsbetrieb

Inhaltsverzeichnis

1. Warum Pagination in GraphQL kein trivialer Parameter ist
2. Offset-Pagination: Einfach, verständlich, limitiert
3. Cursor-Pagination und die Relay-Spezifikation
4. Schema-Design: Connection-Typen korrekt aufbauen
5. Resolver-Implementierung: Cursor erzeugen und auswerten
6. Typische Fehler und Fallstricke
7. Pagination in Magento GraphQL
8. Cursor vs. Offset im direkten Vergleich
9. Zusammenfassung