Tag: Alpine.js

1. Alpine.js und Astro Islands: Gezielte Interaktivität in Static-Site-Generatoren

   08.10.2025

   Astro rendert Seiten standardmäßig ohne jegliches clientseitiges JavaScript und lädt Interaktivität nur dort nach, wo sie tatsächlich gebraucht wird. Alpine.js und Astro Islands zusammen sind die leichteste Kombination für dieses Modell: eine einzige kleine Bibliothek statt eines vollen React- oder Vue-Bundles pro interaktivem Inselelement.

   Read more

2. Wishlist Toggle Button mit Alpine State bauen

   30.09.2025

   Ein Wishlist Toggle Button muss sich sofort anfühlen, unabhängig davon, wie lange der Server für die Antwort braucht. Mit Alpine State, Optimistic UI und einem globalen Store lässt sich ein Herz-Icon bauen, das über beliebig viele Produktkarten synchron bleibt und auch nicht angemeldeten Besuchern eine funktionierende Merkliste bietet.

   Read more

3. Alpine.js Transitions: Animationen die wirklich smooth sind

   29.09.2025

   Ruckelnde Animationen, Inhalt der beim Öffnen sofort erscheint oder beim Schließen abrupt verschwindet – das sind die Symptome eines falsch eingesetzten Transitions-Systems. Alpine.js bietet mit x-transition ein durchdachtes Framework für flüssige Enter- und Leave-Animationen, das mit wenig Code professionelle Ergebnisse liefert.

   Read more

4. Alpine.js und Turbo/Hotwire kombinieren: Reaktive Inseln in serverseitigen Apps

   29.09.2025

   Turbo ersetzt volle Seitenwechsel durch schnelle Teil-Updates, doch clientseitiger UI-Zustand geht bei jedem Turbo-Frame-Rendering leicht verloren. Alpine.js und Turbo/Hotwire zusammen liefern genau das, was den beiden Ansätzen einzeln fehlt: serverseitige Navigation ohne Reload plus zuverlässig re-initialisierte, lokale Reaktivität in jeder Komponente.

   Read more

5. Alpine.js in Magento Hyvä: Patterns und Anti-Patterns

   28.09.2025

   Hyvä hat Alpine.js als das primäre JavaScript-Werkzeug im Magento-Frontend etabliert. Wer Alpine.js ohne klare Patterns einsetzt, baut Komponenten, die schwer testbar, schlecht wartbar und performance-kritisch sind. Dieser Artikel zeigt die wichtigsten bewährten Patterns und die häufigsten Fehler beim Einsatz von Alpine.js in Hyvä-Themes.

   Read more

6. Scroll Progress Bar am Seitenrand mit Alpine.js

   26.09.2025

   Eine Scroll Progress Bar zeigt Lesern eines langen Artikels auf einen Blick, wie viel Inhalt noch folgt und wie weit sie bereits gekommen sind. Mit Alpine.js lässt sich diese Fortschrittsanzeige in wenigen Zeilen umsetzen, performant an das Scroll Event gebunden und wahlweise als horizontale Leiste oben oder vertikal am Seitenrand.

   Read more

7. Dark Mode Toggle mit $persist und System-Preference

   23.09.2025

   Ein Dark Mode der beim nächsten Seitenaufruf vergessen ist, oder der beim Laden kurz hell aufblitzt bevor er dunkel wird – das sind die häufigsten Fehler. Alpine.js löst beides: $persist speichert die Nutzerpräferenz dauerhaft in localStorage, und ein Blocking-Script vor Alpine.js verhindert den Flash of Wrong Theme.

   Read more

8. Alpine.js Lifecycle: init() und destroy() richtig nutzen

   20.09.2025

   Der init()-Hook ist in jedem Alpine.js-Tutorial präsent – destroy() dagegen wird häufig übersehen. Genau das führt zu schleichenden Memory Leaks, verwaisten Event-Listenern und Fehlern, die erst nach mehreren Seitennavigationen auftreten. Dieser Artikel erklärt beide Hooks vollständig.

   Read more

9. Alpine.js Copy-to-Clipboard mit Feedback-Animation in 10 Zeilen

   20.09.2025

   Ein Copy-Button, der nur Text kopiert, ist halbfertig. Visuelles Feedback, Screenreader-Ankündigung, Browser-Fallback und Timeout-Reset – all das steckt in einem einzigen Alpine.js-State-Objekt mit 10 Zeilen Logik.

   Read more

10. Alpine.js + htmx: Das unterschätzte Duo 2026

    18.09.2025

    Während die JavaScript-Community über die nächste Framework-Version diskutiert, lösen Alpine.js und htmx zusammen echte Produktionsprobleme: weniger JavaScript, mehr Server-Logik, bessere Performance und Progressive Enhancement ohne Kompromisse.

    Read more