Tag: Alpine.js

1. Cookie Consent Banner DSGVO konform mit Alpine.js

   22.02.2025

   Ein Cookie Consent Banner entscheidet direkt darüber, ob Tracking-Skripte, Marketing-Pixel und externe Einbettungen überhaupt geladen werden dürfen. Mit Alpine.js entsteht ein Cookie Consent Banner, der Kategorien sauber trennt, Zustimmung persistent speichert, Skripte erst nach Einwilligung nachlädt und den Widerruf jederzeit ohne neue Seite ermöglicht.

   Read more

2. Datei-Upload mit Vorschau und Fortschrittsbalken in Alpine.js

   22.02.2025

   Ein Datei-Upload, der nur eine graue Datei-Auswahl-Schaltfläche zeigt, lässt Nutzer bei großen Bildern oder Dokumenten im Ungewissen. Mit FileReader, Drag and Drop und XMLHttpRequest baust du einen Datei-Upload mit sofortiger Bildvorschau, sauberer Validierung und einem Fortschrittsbalken, der echte Upload-Bytes anzeigt statt einer simulierten Animation.

   Read more

3. FAQ Akkordeon mit Schema Markup verbinden mit Alpine.js

   20.02.2025

   Ein FAQ Akkordeon und das dazugehörige FAQPage Schema Markup werden in der Praxis fast immer getrennt gepflegt, was fast zwangsläufig zu Abweichungen zwischen sichtbarem Inhalt und strukturierten Daten führt. Mit Alpine.js entsteht ein FAQ Akkordeon, das dieselbe Datenquelle für die sichtbare Anzeige und für das generierte JSON-LD nutzt, wodurch beide garantiert synchron bleiben und Rich Snippets zuverlässig funktionieren.

   Read more

4. Alpine.js Events: $dispatch und @window-Events zwischen Komponenten

   19.02.2025

   Zwei Alpine-Komponenten auf derselben Seite müssen miteinander reden – aber ohne gemeinsamen State, ohne prop-drilling und ohne globale Variablen. Das native Browser-Event-System in Kombination mit $dispatch und @window-Listenern löst genau das auf elegante Weise.

   Read more

5. Alpine.js Rating-Widget: Sterne-Bewertung ohne jQuery

   16.02.2025

   jQuery für ein simples Sterne-Widget zu laden ist wie einen LKW zu mieten, um einen Brief zu transportieren. Alpine.js bietet mit x-data, x-on und x-bind alles, was ein vollständiges, barrierefreies Rating-Widget braucht – in unter 50 Zeilen, ohne npm, ohne Build-Step, direkt im Template.

   Read more

6. Alpine.js mit Fetch API: Daten laden und Fehler behandeln

   30.01.2025

   Asynchrones Datenladen ist in fast jedem interaktiven Widget nötig. Alpine.js macht es mit async/await und x-data erstaunlich einfach – aber erst mit sauber durchdachter Fehlerbehandlung, Ladezuständen und Abort-Logik wird ein Fetch-Widget produktionstauglich.

   Read more

7. Asynchrone Server-Validierung während der Eingabe mit Alpine.js

   22.01.2025

   Ein Benutzername oder Gutscheincode lässt sich nicht clientseitig prüfen, weil die Antwort vom aktuellen Datenbestand des Servers abhängt. Server-Validierung während der Eingabe braucht deshalb Debounce, sauberen Request-Abbruch und einen klaren Ladezustand, damit Alpine.js keine veralteten Antworten anzeigt und der Server nicht bei jedem Tastendruck angefragt wird.

   Read more

8. Computed Values und Getter Pattern in Alpine.js

   20.01.2025

   Alpine.js hat kein eingebautes computed(), aber JavaScript-Getter füllen diese Lücke fast vollständig. Wer weiß, wie Getter innerhalb von Alpine.data() reaktiv funktionieren, verkettet werden und sich von einer normalen Methode unterscheiden, baut abgeleitete Werte, die genauso sauber sind wie Computed Properties in Vue oder useMemo in React.

   Read more

9. Sidebar Navigation ein und ausklappen mit Alpine.js

   19.01.2025

   Eine einklappbare Sidebar Navigation ist eines der häufigsten Layout Elemente in Dashboards und Admin Oberflächen. Mit Alpine.js lässt sich der komplette Zustand, vom Öffnen und Schließen über die Persistenz im Browser bis zur mobilen Overlay Variante, in einer kompakten Komponente abbilden, ohne React oder Vue laden zu müssen.

   Read more

10. Alpine.js Image Gallery & Lightbox mit Keyboard Support

    17.01.2025

    Eine Lightbox-Galerie ohne jQuery, ohne externe Libraries: Alpine.js verwaltet den Zustand, Pfeiltasten navigieren, Escape schließt, Touch-Swipe funktioniert auf Mobile und Lazy Loading hält den Initial-Load schlank.

    Read more