Seite 4 - Monthly Archives: April 2025

React Internationalisierung: next-intl in der Praxis

April 11, 2025

</>

{ }

React · next-intl · i18n · Next.js · Übersetzungen

React Internationalisierung:
next-intl im Next.js App Router in der Praxis

Internationalisierung in React wird oft unterschätzt, bis die erste Mehrsprachigkeit-Anforderung im Backlog landet. next-intl bietet für Next.js App Router eine vollständige i18n-Lösung: typsichere Übersetzungen, ICU-Pluralisierung, Datums- und Zahlenformatierung nach Locale, Sprachrouting und vollständiger Server-Component-Support ohne Client-Bundle-Overhead.

16 Min. Lesezeit useTranslations · useFormatter · Middleware · Server Components · ICU next-intl 3.x · Next.js 14+ · TypeScript

Inhaltsverzeichnis

1. Warum next-intl für React-i18n?
2. Setup: Middleware, Routing und Nachrichten-Dateien
3. useTranslations: Texte sicher und typsicher abrufen
4. ICU Message Format: Pluralisierung und Variablen
5. useFormatter: Datum, Zahlen und Währungen nach Locale
6. Übersetzungen in Server Components
7. Sprachrouting: Link und useRouter mit Locale
8. Typsichere Übersetzungsschlüssel

Symfony AssetMapper: Bundler war gestern

April 11, 2025

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

GraphQL Debugging mit Altair, GraphiQL, Insomnia und Postman

April 10, 2025

{ }

type

GraphQL · Debugging · Altair · GraphiQL · Insomnia · Postman

GraphQL Debugging:
Altair, GraphiQL, Insomnia und Postman

Das richtige Debugging-Tool für GraphQL ist nicht immer das bekannteste. Ob Browser-eingebettet, Desktop-App oder API-Client – jedes Tool hat seinen Platz im Diagnose-Workflow. Wer die Stärken kennt, debuggt Queries, Auth-Probleme und Resolver-Fehler effizienter.

13 Min. Lesezeit Altair · GraphiQL · Insomnia · Postman · curl · Magento-Auth GraphQL · Magento 2 · API-Testing

Inhaltsverzeichnis

1. Warum GraphQL-Debugging anders funktioniert als REST-Testing
2. GraphiQL: Der eingebettete Browser-Standard
3. Altair GraphQL Client: Desktop-Power für komplexe Szenarien
4. Insomnia: GraphQL-Support im API-Client-Kontext
5. Postman: GraphQL in bestehenden REST-Workflows
6. Auth-Header konfigurieren: Token-Workflow in jedem Tool
7. Magento-spezifisches Debugging: Fehlerquellen und Diagnose-Workflow
8. Tool-Vergleich: Was wann sinnvoll ist
9. Typische Debugging-Fehler und

Bash

BATS für Bash-Tests in CI einsetzen

Mir Admin - April 10, 2025

Shell-Skripte ohne Tests sind eine Blackbox in der Automatisierung. Das Bash Automated Testing System (BATS) bringt strukturierte Unit-Tests, Fixtures und Mocking in die Shell-Welt – und lässt sich nahtlos in GitHub Actions, GitLab CI und Jenkins integrieren, ohne externe Laufzeitabhängigkeiten.

React Context vs. Zustand vs. Jotai – Was wann nutzen

April 09, 2025

</>

{ }

React · State Management · Performance · Architektur

React Context vs. Zustand vs. Jotai
Was wann und warum nutzen

Die falsche Wahl beim State Management kostet in React-Projekten mehr Performance und Wartbarkeit als fast jede andere Architekturentscheidung. Context, Zustand und Jotai lösen dasselbe Grundproblem auf grundlegend verschiedene Weisen – dieser Artikel erklärt die Unterschiede mit echten Codebeispielen und zeigt, wann welches Tool die richtige Wahl ist.

15 Min. Lesezeit Context API · Zustand · Jotai · Re-render · Atoms React 18+ · TypeScript · Vite

Inhaltsverzeichnis

1. Warum State Management in React eine Architekturentscheidung ist
2. React Context API: Stärken, Grenzen und das Re-render-Problem
3. Zustand: Einfaches globales State Management ohne Boilerplate
4. Jotai: Atomares State Management von unten nach oben
5. Performance-Analyse: Wer rendert wann neu?
6. TypeScript-Integration im Vergleich
7. DevTools, Testing und Debugging
8. Migration und Koexistenz in bestehenden

Renderless Components und Headless Patterns in Vue.js

April 06, 2025

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

GROUP BY und HAVING sauber verstehen

April 05, 2025

GRP

HAVING

SQL · MySQL · Aggregation · Magento · Performance

GROUP BY und HAVING sauber verstehen

GROUP BY ist mehr als nur Gruppieren. Wer die Semantik, ONLY_FULL_GROUP_BY, den Unterschied zwischen WHERE und HAVING sowie die Fan-out-Falle nicht kennt, baut Queries die falsche Zahlen liefern.

ONLY_FULL_GROUP_BY WHERE vs HAVING ROLLUP Fan-out-Falle

Inhaltsverzeichnis

1. GROUP BY Semantik: Was die Regel wirklich bedeutet
2. ONLY_FULL_GROUP_BY: Was Magento erzwingt
3. WHERE vs HAVING: Reihenfolge und Indexnutzung
4. GROUP BY mit mehreren Spalten
5. WITH ROLLUP: Zwischensummen und Gesamttotals
6. Aggregatfunktionen: SUM, COUNT, AVG, GROUP_CONCAT
7. Die Fan-out-Falle mit JOINs
8. Magento-Praxisbeispiele
9. Unterstützung
10. Zusammenfassung
11. FAQ

1. GROUP BY Semantik: Was die Regel wirklich bedeutet

Die fundamentale Regel von GROUP BY: Jede Spalte, die im SELECT erscheint und keine Aggregatfunktion ist, muss auch in der GROUP BY-Klausel stehen — oder muss funktional vom Primärschlüssel einer

Alpine.js Multi-Step Form Wizard mit Validierung

April 04, 2025

x-data

Alpine

Alpine.js · Formulare · UX-Pattern · Hyvä

Multi-Step Form Wizard mit Alpine.js
Schritt-Validierung und Fortschrittsanzeige

Mehrstufige Formulare erhöhen die Conversion, wenn sie UX-technisch sauber umgesetzt sind: klare Fortschrittsanzeige, Validierung pro Schritt statt erst beim Submit, und zuverlässige Rückwärtsnavigation ohne Datenverlust. Mit Alpine.js lässt sich dieses Pattern ohne externe Bibliothek vollständig realisieren.

15 Min. Lesezeit Wizard-Pattern · Schritt-Validierung · Fehleranzeige · Submit Alpine.js 3.x · Hyvä Themes · Magento 2

Inhaltsverzeichnis

1. Warum Multi-Step statt einem langen Formular?
2. Datenstruktur: Schritte, Felder und Fehlerobjekte
3. Navigation: Vorwärts, Rückwärts und Fortschritt
4. Validierung: Schritt-für-Schritt statt Submit-Validierung
5. Fehleranzeige: Inline-Fehler pro Feld
6. Fortschrittsanzeige: Visuelles Feedback mit Tailwind
7. Submit-Handling und Ladezustand
8. Zugänglichkeit: ARIA-Attribute und Keyboard-Navigation
9. Vergleich:

REST-API

Caching in REST-APIs: ETag, Last-Modified und Cache-Control richtig einsetzen

Mir Admin - April 04, 2025

Eine REST-API, die bei jedem Request dieselben Daten aus der Datenbank lädt und vollständig zurücksendet, verschwendet Bandbreite und Serverressourcen. ETag, Last-Modified und Cache-Control sind die HTTP-Standard-Werkzeuge, die genau das verhindern – mit 304 Not Modified für unveränderte Ressourcen und Proxy-Caching für öffentliche Daten.

Tailwind CSS Container Queries: Komponenten-responsive Layouts

April 03, 2025

</>

tw

Tailwind CSS · Container Queries · Responsive Design · CSS

Tailwind CSS Container Queries:
Komponenten responsiv ohne Viewport-Abhängigkeit

Viewport-Breakpoints sind das falsche Werkzeug für wiederverwendbare Komponenten. Eine Produktkarte, die auf 1200px Viewport „schmal" ist, kann auf demselben Viewport in einer Sidebar noch schmaler sein. Container Queries lösen genau dieses Problem – und Tailwind CSS v4 bringt erstklassigen Support dafür mit.

15 Min. Lesezeit @container · cqw · containment · Named Container · Hyvä Tailwind CSS v4 · CSS Container Queries Level 1 + 3

Inhaltsverzeichnis

1. Das Problem mit Viewport-Breakpoints
2. Was sind Container Queries?
3. Container Queries in Tailwind CSS v4
4. Named Containers für verschachtelte Layouts
5. Container-Einheiten: cqw, cqh, cqi, cqb
6. Praxis: Containerresponsive Produktkarte in Hyvä
7. Sidebar-Layouts ohne spezielle Breakpoint-Klassen
8. containment-Typen: inline-size vs. size
9. Container Queries vs. Media Queries: Vergleich