Tag: Alpine.js

1. Kreditkarten-Eingabemaske mit Alpine.js richtig bauen

   19.07.2025

   Eine Kreditkarten-Eingabemaske ist mehr als das Einfügen von Leerzeichen alle vier Ziffern. Kartentyp-Erkennung, unterschiedliche Gruppierungslängen bei American Express, die Luhn-Prüfsumme und ein Cursor, der beim Tippen nicht ständig zurückspringt, machen aus einer simplen Formatierung ein kleines, aber anspruchsvolles Alpine.js Projekt.

   Read more

2. Alpine.js vs. React Hooks — Wann reicht Alpine?

   06.07.2025

   React Hooks haben die Komponentenentwicklung revolutioniert – aber für viele serverseitig gerenderte Projekte ist Alpine.js die bessere Wahl: weniger Build-Tooling, kein Virtual DOM, direktes HTML-Enhancement. Dieser Artikel zeigt anhand konkreter Muster, wo Alpine.js vollständig ausreicht und wo React seine Stärken ausspielt.

   Read more

3. Alpine.js CSP Build: Strikte Content Security Policy ohne eval()

   06.07.2025

   Das Standard-Build von Alpine.js wertet Expressions in x-data und x-on über new Function() aus, was unter einer strikten Content Security Policy ohne unsafe-eval sofort blockiert wird. Das dedizierte Alpine.js CSP Build ersetzt diese Auswertung durch einen sicheren Expression-Parser und macht reaktive Komponenten auch in Umgebungen mit striktester Sicherheitsrichtlinie möglich.

   Read more

4. Back to Top Button mit Sichtbarkeitslogik in Alpine.js

   02.07.2025

   Ein Back to Top Button klingt nach einem trivialen UI Element, entpuppt sich bei genauerem Hinsehen aber als kleines Bündel von Detailentscheidungen: wann er erscheinen soll, wie er scrollt, wohin der Fokus nach dem Klick wandert, und wie er sich mit anderen fixierten Elementen wie Cookie Bannern verträgt. Alpine.js liefert dafür ein kompaktes, vollständig barrierefreies Muster.

   Read more

5. Alpine.js $nextTick: Auf DOM-Updates warten ohne setTimeout

   01.07.2025

   setTimeout(fn, 0) als Workaround für DOM-Timing-Probleme ist ein Code-Smell in Alpine.js-Projekten. $nextTick ist die saubere Alternative – sie wartet exakt auf den Abschluss des nächsten Render-Durchlaufs, nicht auf einen willkürlichen Millisekunden-Wert.

   Read more

6. Alpine.js Autocomplete Combobox: Suchvorschläge barrierefrei umsetzen

   22.06.2025

   Eine Autocomplete-Combobox klingt einfach – bis man ARIA-Rollen, Tastaturnavigation, Screenreader-Ankündigungen und Focus-Management zusammenbringt. Mit Alpine.js lässt sich das alles deklarativ und ohne eine Zeile jQuery lösen.

   Read more

7. Debounce und Throttle Modifier bei Event Listenern | Alpine.js

   21.06.2025

   Die Alpine.js Modifier debounce und throttle verhindern, dass ein Event Listener bei jedem einzelnen Tastendruck oder jedem einzelnen Scroll-Pixel unnötig aufgerufen wird. Wer den Unterschied zwischen beiden Drosselungsstrategien versteht, baut Live-Suchen, Scroll-Handler und Resize-Reaktionen, die spürbar performanter laufen als ungedrosselte Handler.

   Read more

8. Formular-Autosave: Entwurf im localStorage speichern mit Alpine.js

   21.06.2025

   Ein langes Formular, das beim versehentlichen Schließen des Tabs verloren geht, kostet Nutzer Zeit und Nerven. Ein Autosave-Pattern in Alpine.js speichert den Entwurf automatisch im localStorage, mit Debounce, sichtbarem Speicherstatus und sauberer Konflikterkennung zwischen mehreren geöffneten Tabs.

   Read more

9. Sortierbare Tabellenspalten mit Alpine.js ohne Bibliothek

   13.06.2025

   Sortierbare Tabellenspalten gehören zu den am häufigsten gebrauchten Datenlisten Funktionen, landen aber oft über eine komplette DataTables Bibliothek im Projekt. Mit einer einzigen Alpine.js x-data Komponente, einer generischen Vergleichsfunktion und ein paar Zeilen für die Sortierrichtung entsteht dieselbe Funktionalität ganz ohne zusätzliche Abhängigkeit.

   Read more

10. Vorher-Nachher-Bildvergleich mit Alpine.js: Slider ohne Bibliothek

    01.06.2025

    Ein Bildvergleichsslider zeigt zwei überlagerte Bilder und lässt Nutzer per Ziehen die Grenze zwischen Vorher und Nachher verschieben. Mit CSS clip-path, einheitlichen Pointer Events und Alpine.js als reaktiver Zustandsschicht entsteht diese Interaktion ganz ohne jQuery Plugin und ohne zusätzliches Slider Framework.

    Read more