Hyvä: Anleitungen und Praxiswissen | Seite 10 | mironsoft Blog
Hyvä
-
24.01.2025
Solange der Tailwind-Production-Build manuell über bin/npm run build auf dem Rechner eines einzelnen Entwicklers läuft, hängt das Ergebnis von lokal installierten Node-Versionen, vergessenen Zwischenständen und der Tagesform der jeweiligen Person ab. Dieser Artikel zeigt, wie sich der Build als eigene, reproduzierbare CI-Stage einrichten lässt, wie ein Build-Cache Pipeline-Läufe spürbar beschleunigt und wie sich fehlerhafte Tailwind-Klassen bereits vor dem Deployment automatisiert erkennen lassen.
-
16.01.2025
Alpine.js-Komponenten wirken oft interaktiv und modern, bleiben für Screenreader und Tastaturnutzer jedoch häufig unbrauchbar, wenn ARIA-Attribute nicht reaktiv mit dem Komponentenzustand verbunden sind. Dieser Artikel zeigt praxisnah, wie man x-bind:aria-expanded, x-on:keydown und sauberes Fokus-Management korrekt einsetzt, und baut ein vollständig barrierefreies Akkordeon sowie ein Dropdown-Menü Schritt für Schritt von Grund auf, inklusive Tastaturnavigation und Screenreader-Unterstützung.
-
09.01.2025
Der Store-Switcher und der Währungsumschalter im Header sind keine gewöhnlichen Dropdowns: Beide müssen einen echten Formular-Submit an einen Magento-Controller auslösen, damit Cookie und Session serverseitig aktualisiert werden und den Seiten-Reload überstehen. Dieser Artikel zeigt, wie man beide Komponenten als zugängliches Alpine.js-Dropdown im Hyvä-Header baut, inklusive ARIA-Listbox-Pattern, Tastatursteuerung, Gruppierung nach Website bei vielen Store Views und CSP-konformer Inline-Registrierung, ganz ohne zusätzliches JavaScript-Bundle.
-
06.01.2025
Ein Skeleton-Screen ersetzt einen leeren, weißen Bereich durch eine grobe Vorschau der kommenden Inhalte und lässt Wartezeit dadurch kürzer wirken, als sie tatsächlich ist. Im Hyvä-Kontext mit seinem GraphQL-lastigen Nachladen von Inhalten ist das ein mächtiges, aber leicht falsch eingesetztes Werkzeug, das sauber vom klassischen Spinner abgegrenzt werden muss.
-
05.01.2025
Ein funktionierender Hot-Reload-Loop entscheidet im Hyvä-Alltag darüber, ob eine Layout-Anpassung in Sekunden sichtbar wird oder erst nach einem manuellen Deploy-Zyklus. Der Hyvä-Watcher läuft im Hintergrund des Docker-Containers, beobachtet phtml-, CSS- und JS-Dateien über einen Bind-Mount und stößt bei jeder Änderung automatisch einen Tailwind-Rebuild sowie die Regeneration des view_preprocessed-Verzeichnisses an, ganz ohne setup:static-content:deploy. Wer die Mechanik dahinter kennt, inotify-Limits richtig setzt und den Watcher-Status sauber prüfen kann, spart im Entwicklungsalltag täglich Stunden gegenüber dem klassischen Production-Build-Zyklus.
-
05.01.2025
Die Standard-Suchbox von Hyvä springt erst nach Enter zur Ergebnisliste und zeigt während der Eingabe keine Vorschläge. Live-Search-Autocomplete im Hyvä-Header schließt genau diese Lücke: eine GraphQL-Suggestion-Query liefert Produkte, Kategorien und Preise, eine schlanke Alpine.js-Komponente steuert Debounce, Request-Cancellation und Tastatur-Navigation, und ein CSP-konformes Rendering hält den Shop dabei sicher und performant.
-
02.01.2025
Wiederkehrende Magento-spezifische Muster wie Ladezustände, Store-Grid-Abstände oder Alpine-Sichtbarkeitszustände lassen sich nicht immer sauber mit Standard-Utilities abbilden. Ein eigenes Tailwind Plugin kapselt dieses Wissen einmalig und macht es über das gesamte Hyvä Theme wiederverwendbar, inklusive korrektem Kompilieren in der Build-Pipeline.