Seite 7 - Alpine.js

Alpine.js

AI generated

Kreditkarten-Eingabemaske mit Alpine.js richtig bauen

Maxim Mironjuk - Juli 19, 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.

Alpine.js

AI generated

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

Maxim Mironjuk - Juli 06, 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.

Alpine.js Security/OWASP

AI generated

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

Maxim Mironjuk - Juli 06, 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.

Alpine.js Barrierefreiheit

AI generated

Back to Top Button mit Sichtbarkeitslogik in Alpine.js

Maxim Mironjuk - Juli 02, 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.

Alpine.js

AI generated

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

Maxim Mironjuk - Juli 01, 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.

Alpine.js

AI generated

Alpine.js Autocomplete Combobox: Suchvorschläge barrierefrei umsetzen

Maxim Mironjuk - Juni 22, 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.

JavaScript Alpine.js

AI generated

Debounce und Throttle Modifier bei Event Listenern | Alpine.js

Maxim Mironjuk - Juni 21, 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.

Alpine.js Design Patterns

AI generated

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

Maxim Mironjuk - Juni 21, 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.

JavaScript Alpine.js

AI generated

Sortierbare Tabellenspalten mit Alpine.js ohne Bibliothek

Maxim Mironjuk - Juni 13, 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.

CSS Alpine.js

AI generated

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

Maxim Mironjuk - Juni 01, 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.