Seite 9 - Monthly Archives: February 2026

Eine Select-Komponente für Produkte, eine zweite für Nutzer, eine dritte für Kategorien, jede fast identisch, nur mit anderem Datentyp: Genau dieses Muster lösen generische React-Komponenten. Statt für jeden Datentyp eine eigene Komponente zu duplizieren, wird der Typ selbst zum Parameter, und der Compiler prüft bei jeder Verwendung, ob Daten, Callback und Rendering zueinander passen. Dieser Artikel zeigt, wie generische React-Komponenten in der Praxis entstehen, inklusive JSX-Syntax, Constraints und forwardRef.

Namespaces isolieren, was ein Prozess sieht, seccomp begrenzt, was ein Prozess überhaupt tun darf. Wer Container Härtung ausschließlich über Capabilities und Namespaces denkt, übersieht damit eine der wirkungsvollsten Verteidigungslinien gegen Kernel Exploits: die gezielte Sperrung von Systemaufrufen, die eine Anwendung im Normalbetrieb schlicht nie benötigt.

Wer für jede Sprache und jeden Store eine eigene Testkopie pflegt, verliert Übersicht und Laufzeit gleichzeitig. Ein Store-Kontext-Parameter in Cypress oder Playwright reicht aus, um Sprachen, Währungen und Katalogunterschiede gezielt zu prüfen und typische Store-Scope-Konfigurationsfehler zuverlässig vor dem Go-Live abzufangen.

Magentos Full Page Cache invalidiert Einträge über Tags wie cat_p_123 oder cat_c_45, die entitätsbezogen, aber standardmäßig nicht store-spezifisch sind. In einer Multi-Store-Installation mit mehreren Websites, Store-Groups und Store-Views bedeutet das: Eine Änderung, die eigentlich nur eine einzige Store-View betrifft, etwa eine store-spezifische Preisregel oder ein individueller Freigabestatus, kann trotzdem Cache-Einträge für alle anderen Stores mit invalidieren, weil sie denselben Tag-Namensraum teilen. Wer viele Stores betreibt, muss deshalb bewusst entscheiden, wie granular Tags aufgebaut werden, ohne dabei in eine Tag-Explosion mit unüberschaubar vielen, kaum wiederverwendeten Tags zu laufen.

Ein Masonry Layout mit Tailwind CSS zu bauen ist einfacher als gedacht: CSS columns löst 80% der Fälle ohne eine Zeile JavaScript. Für die restlichen 20% – Reihensortierung, dynamische Inhalte und Filterung – liefert Alpine.js die nötige Logik ohne externe Abhängigkeiten.

Jest Testing in React Native umfasst Unit-Tests für reine Logik und Hooks sowie Komponententests mit React Native Testing Library, die das tatsächliche Nutzerverhalten prüfen statt nur Implementierungsdetails abzugleichen. Richtig aufgesetzt, mit sauberem Mocking, disziplinierten Snapshots und Coverage-Schwellenwerten in der CI-Pipeline, fängt diese Testschicht die meisten Regressionen ab, bevor sie überhaupt einen Simulator erreichen.

Eine einzelne prefers-reduced-motion-Regel in einer einzelnen Komponente löst kein Team-Problem. Erst ein zentrales Motion-Token-System mit klaren Abstufungen, automatisiertem Testing und dokumentierten Mustern sorgt dafür, dass jede neue Animation im Projekt automatisch die richtige Rücksicht auf Bewegungsempfindlichkeit nimmt.

Wer eine wachsende React-Anwendung als Monolith betreibt, kämpft irgendwann mit langen Build-Zeiten, Deployment-Abhängigkeiten und Team-Konflikten. Module Federation 2.0 löst diese Probleme durch echte Laufzeit-Komposition: Teams deployen ihre App-Teile unabhängig, und die Shell-App komponiert alles dynamisch zusammen.

Eine Bestellbestätigung oder eine Registrierungsmail gehört zu den kritischsten, aber am häufigsten ungetesteten Pfaden eines Onlineshops, weil E-Mail-Versand außerhalb des direkten Zugriffs eines Browsertests stattfindet und asynchron, mit unbekannter Verzögerung, in einem fremden System landet. Ein Test-SMTP-Server wie Mailhog oder Mailtrap löst genau dieses Problem, indem er ausgehende E-Mails innerhalb der Testumgebung abfängt, über eine eigene API abrufbar macht und damit Inhalt, Betreff und Links einer E-Mail genauso präzise prüfbar macht wie ein DOM-Element im Browser.

Wer die Kategorieseiten-Toolbar im Hyvä-Theme anpasst, arbeitet mit einem einzigen Block, einem einzigen Template und Alpine.js statt mit Knockout-Bindings und UI-Components-Grids. Diese Anleitung zeigt, wie Sortierfelder erweitert, ein View-Mode-Umschalter mit Persistenz gebaut und die Pagination der Hyvä-Kategorieseite ohne Bruch mit dem Full Page Cache angepasst werden.