Seite 3 - Monthly Archives: August 2025

Next.js App Router Migration vom Pages Router: Der vollständige Leitfaden

August 20, 2025

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

BuildKit Cache Mounts und schnellere CI-Builds mit Docker

August 19, 2025

Docker BuildKit · CI/CD · Performance · Cache Mounts

BuildKit Cache Mounts
und schnellere CI-Builds mit Docker

CI-Builds, die fünf Minuten dauern, weil jeder Run Composer-Pakete und npm-Module komplett neu herunterlädt, sind kein Naturgesetz. Docker BuildKit Cache Mounts halten Package-Caches persistent zwischen Builds, ohne sie ins Image zu baken. Dieser Artikel zeigt, wie RUN --mount=type=cache funktioniert und wie Layer-Strategie, parallele Stages und Registry-Cache zusammenspielen, um CI-Laufzeiten drastisch zu kürzen.

14 Min. Lesezeit BuildKit · Cache Mounts · Layer-Strategie · Registry-Cache · Multi-Stage Docker 24+ · BuildKit 0.12+ · GitHub Actions · GitLab CI

Inhaltsverzeichnis

1. Das eigentliche Problem langer CI-Builds
2. BuildKit: was sich gegenüber dem alten Builder ändert
3. RUN --mount=type=cache: Mechanismus und Semantik
4. Composer-Cache persistent halten
5. npm- und yarn-Cache effizient nutzen
6. APT-Pakete ohne Layer-Bloat installieren
7. Layer-Reihenfolge: der unterschätzte

React Realtime: WebSocket und Mercure integrieren

August 19, 2025

</>

{ }

React · WebSocket · Mercure · Realtime

React Realtime:
WebSocket und Mercure integrieren

Polling ist keine Echtzeit-Architektur – es ist ein Kompromiss, der unter Last zusammenbricht. WebSocket und Mercure bieten echte Push-Kommunikation, aber ihre Integration in React erfordert durchdachte Custom Hooks, robuste Reconnect-Logik und sicheres State-Management für Echtzeit-Datenströme.

16 Min. Lesezeit WebSocket · Mercure · SSE · Custom Hooks · Reconnect · Authentifizierung React 18+ · TypeScript · Mercure Hub

Inhaltsverzeichnis

1. WebSocket vs. SSE vs. Long-Polling: die richtige Wahl
2. useWebSocket: ein robuster Custom Hook
3. Reconnect-Logik mit Exponential Backoff
4. Mercure: Server-Sent Events mit Hub
5. useMercure: Topics und Subscriptions in React
6. Authentifizierung: JWT und Mercure Authorization
7. State-Management für Echtzeit-Datenströme
8. Performance: Verbindungen optimieren
9. WebSocket vs. Mercure im direkten Vergleich
10. Zusammenfassung
11. FAQ

1. WebSocket vs. SSE

PHPStorm

PhpStorm Plugins für Testing, Docker, SQL, GraphQL und OpenAPI sinnvoll auswählen

Mir Admin - August 19, 2025

Jedes Plugin erhöht den Speicherbedarf, verlängert den Start und kann die IDE verlangsamen. Die Frage ist nicht welche Plugins existieren, sondern welche für den eigenen Workflow wirklich einen Mehrwert bringen – und welche man ohne Verlust deaktivieren kann.

Daten laden in Vue & Nuxt: Fetching, Caching und Error Handling

August 18, 2025

<v/>

{ }

Vue 3 · Nuxt · Data Fetching · Caching · Error Handling

Daten laden in Vue & Nuxt
Fetching, Caching und Error Handling richtig gemacht

Daten zu laden klingt trivial – bis die erste API-Anfrage in der Produktion hängt, der Loading-State unklar ist oder veraltete Cache-Daten dem Nutzer ein falsches Bild der Realität zeigen. Vue 3 und Nuxt bieten ausgereifte Primitiven für Data Fetching, die zusammen Caching, Error Handling und SSR-Kompatibilität abdecken.

16 Min. Lesezeit useFetch · useAsyncData · Stale-While-Revalidate · Error Boundaries · Loading States Vue 3 · Nuxt 3 · TypeScript · VueQuery

Inhaltsverzeichnis

1. Warum Data Fetching in Vue mehr ist als ein fetch()-Aufruf
2. Das useData-Composable: Fetching mit Loading und Error State
3. useFetch und useAsyncData in Nuxt 3
4. Caching-Strategien: vom einfachen Memo bis SWR
5. Error Handling: Netzwerkfehler, API-Fehler und Timeouts
6. Loading States und Skeleton-UX richtig gestalten
7. Paginierung und unendliches Scrollen
8. TanStack

Performance von Bash-Skripten verbessern

August 18, 2025

Bash · Performance · Builtins · Subshell · DevOps

Performance von Bash-Skripten verbessern
Subshell-Vermeidung, Builtins, Caching und Fork-Overhead messen

Ein Shell-Skript, das für tausend Dateien tausend externe Prozesse startet, ist kein Performance-Problem — es ist ein Design-Problem. Wer versteht, wie viel ein Fork kostet, welche Operationen Builtins abdecken und wie Caching in der Shell funktioniert, schreibt Skripte, die Sekunden statt Minuten benötigen.

15 Min. Lesezeit Subshell · Builtins · Fork · Caching · Profiling Bash 4.x · 5.x · Linux · macOS

Inhaltsverzeichnis

1. Wo in Bash-Skripten Performance verloren geht
2. Fork-Overhead verstehen und messen
3. Subshell-Vermeidung: welche Konstrukte Subshells erzeugen
4. Builtins statt externe Prozesse: was Bash selbst kann
5. String-Operationen ohne externe Tools
6. Caching in Shell-Skripten: Ergebnisse wiederverwenden
7. Profiling mit time, strace und bash -x
8. Schleifen-Optimierung: externe Tools aus Schleifen raushalten
9. Subshell

Parallelisierung mit xargs -P, GNU Parallel und Worker-Skripten

August 18, 2025

Bash · xargs · GNU Parallel · Concurrency · DevOps

Parallelisierung mit xargs -P, GNU Parallel und Worker-Skripten
Concurrency, Job-Slots, Fehlerkontrolle und Throttling in der Shell

Sequentielle Shell-Skripte lassen CPU-Kerne und Netzwerkbandbreite ungenutzt. xargs -P, GNU Parallel und manuelle Worker-Skripte ermöglichen echte Parallelisierung in der Shell — mit kontrollierbaren Job-Slots, zuverlässiger Fehlererkennung und Throttling-Mechanismen für ressourcensensible Umgebungen.

16 Min. Lesezeit xargs -P · GNU Parallel · Worker · Throttling · Fehlerbehandlung Bash 4.x · 5.x · Linux · macOS

Inhaltsverzeichnis

1. Wann sich Parallelisierung lohnt — und wann nicht
2. xargs -P: der schnellste Einstieg in Parallelisierung
3. Fehlerkontrolle bei xargs -P: Exit-Codes und Logging
4. GNU Parallel: die Profi-Lösung für komplexe Jobs
5. Throttling und Ressourcenkontrolle mit GNU Parallel
6. Manuelle Worker-Skripte mit & und wait
7. Work-Queue-Muster mit named Pipes
8. Fehlerbehandlung und Neustart

Accessibility in Vue-Komponenten: Fokus, ARIA und Keyboard-Support

August 18, 2025

<v/>

{ }

Vue 3 · Accessibility · ARIA · Keyboard-Navigation

Accessibility in Vue-Komponenten
Fokus, ARIA und Keyboard-Support richtig umsetzen

Barrierefreiheit in Vue-Applikationen ist keine optionale Zusatzanforderung – sie ist technische Qualität. Wer Fokusmanagement, ARIA-Attribute und Keyboard-Navigation von Anfang an in Vue-Komponenten einbaut, baut Interfaces, die für alle Nutzenden zuverlässig funktionieren und gleichzeitig rechtliche Anforderungen wie den European Accessibility Act erfüllen.

18 Min. Lesezeit ARIA · Fokusmanagement · Keyboard · Screenreader · WCAG 2.2 Vue 3.4+ · Composables · Custom Directives

Inhaltsverzeichnis

1. Warum Accessibility in Vue-Komponenten entscheidend ist
2. Semantisches HTML als Fundament
3. Fokusmanagement: wann und wie Fokus programmatisch setzen
4. ARIA-Attribute in Vue: aria-label, aria-live und Rollen
5. Keyboard-Navigation: Tabs, Pfeiltasten und Escape
6. Barrierefreie Modals und Dialoge in Vue
7. Barrierefreie Formulare und Fehlermeldungen

Symlink-Switch-Deployment für Magento Schritt für Schritt

August 17, 2025

CI/CD

.yml

GitLab · Magento · Symlink · Zero Downtime · Release-Struktur

Symlink-Switch-Deployment für Magento
Schritt für Schritt

Der atomare Symlink-Wechsel ist der technische Kern von Zero-Downtime-Deployments für Magento. Statt Dateien direkt zu überschreiben – was Inkonsistenz erzeugt – wird das neue Release vollständig vorbereitet und dann in einem einzigen Kernel-Systemcall als current aktiviert. Rollback ist damit kein Notfallplan, sondern eine Millisekunden-Operation.

14 Min. Lesezeit ln -sfn · releases/ · shared/ · current · Rollback GitLab CI/CD · Magento 2.4 · Zero Downtime

Inhaltsverzeichnis

1. Das Symlink-Switch-Konzept erklärt
2. Verzeichnisstruktur auf dem Server vorbereiten
3. Shared-Pfade: was zwischen Releases geteilt wird
4. Der atomare Symlink-Wechsel: ln -sfn im Detail
5. Neues Release vorbereiten: Schritt für Schritt
6. Symlink-Switch in der GitLab-Pipeline integrieren
7. Symlink-Switch vs. direktes Überschreiben im Vergleich
8. Rollback: in Sekunden auf das vorherige

MapQueryString und MapRequestPayload: Request Mapping in Symfony 7

August 17, 2025

SF

{ }

Symfony · PHP 8.4 · Request Mapping · DTOs

MapQueryString und MapRequestPayload
Request Mapping in Symfony 7

Wer in Symfony-Controllern noch manuell $request->query->get() und json_decode($request->getContent()) schreibt, verschenkt Typsicherheit und Validierung. MapQueryString und MapRequestPayload mappen Query-Parameter und Request-Body seit Symfony 6.3 direkt in typisierte DTOs — automatisch deserialisiert, validiert und einsatzbereit.

15 Min. Lesezeit MapQueryString · MapRequestPayload · DTO · Validation · PHP 8.4 Symfony 6.3+ · 7.x · PHP 8.2+

Inhaltsverzeichnis

1. Das Problem: Request-Daten manuell extrahieren
2. MapQueryString: Query-Parameter direkt in DTOs
3. MapRequestPayload: JSON-Body typsicher mappen
4. DTOs mit PHP 8.4 Constructor Promotion
5. Validierung mit Symfony Constraints
6. Fehlerbehandlung und HTTP-Antworten
7. Verschachtelte DTOs und Collections
8. Unterschiedliche Formate: JSON, Form-Data, XML
9. Vergleich: Vorher und nachher
10. Zusammenfassung
11. FAQ

1.