Seite 6 - Alpine.js

Alpine.js

AI generated

Daten visualisieren mit Alpine.js ohne Chart.js

Maxim Mironjuk - September 10, 2025

Chart.js bringt 200 KB in euer JavaScript-Bundle. D3.js ist eine eigene Lernkurve. Für die meisten Dashboard-Widgets in Hyvä-Themes reichen Alpine.js und natives SVG – mit Tooltips, Animationen und vollständiger Barrierefreiheit.

Alpine.js Design Patterns

AI generated

Warnung bei ungespeicherten Änderungen mit Alpine.js

Maxim Mironjuk - September 05, 2025

Ein Nutzer, der zwanzig Minuten in ein Formular investiert hat und dann versehentlich den Tab schließt, verliert seine Arbeit komplett, wenn keine Warnung bei ungespeicherten Änderungen greift. Mit Dirty-State-Tracking, dem beforeunload-Event und einem eigenen Bestätigungsdialog für interne Navigation lässt sich dieser Datenverlust in Alpine.js zuverlässig verhindern.

Alpine.js

AI generated

Accessibility-konformes Modal mit Alpine.js: Fokus-Trap und ARIA

Maxim Mironjuk - August 30, 2025

Ein visuell ansprechendes Modal ist nur die halbe Arbeit. Wer Barrierefreiheit nach WCAG 2.1 ernst nimmt, muss Fokus-Management, korrekte ARIA-Rollen und vollständige Keyboard-Navigation implementieren. Alpine.js macht das möglich – ohne jQuery, ohne externe Bibliotheken.

JavaScript Alpine.js

AI generated

Event Modifier prevent, stop und once im Detail | Alpine.js

Maxim Mironjuk - August 16, 2025

Wer Alpine.js Event Modifier wie prevent, stop, once und self kennt, schreibt schlankere Templates ohne preventDefault-Aufrufe im JavaScript. Dieser Artikel erklärt jeden Event Modifier im Detail, zeigt die Verkettung mehrerer Modifier und deckt Fälle auf, in denen die native Event-API trotzdem gebraucht wird.

JavaScript Alpine.js

AI generated

Testimonial Slider ohne externe Bibliothek mit Alpine.js

Maxim Mironjuk - August 13, 2025

Ein Testimonial Slider zeigt Kundenstimmen in kompakter, rotierender Form und ist damit ein zentrales Social-Proof-Element auf Produkt- und Landingpages. Mit Alpine.js entsteht ein Testimonial Slider mit Autoplay, Touch-Swipe, Tastaturbedienung und Bullet-Indikatoren in wenigen Zeilen Code, komplett ohne Swiper, Slick oder andere externe Slider-Bibliothek.

Alpine.js

AI generated

Alpine.js Performance: Große Datenlisten optimieren

Maxim Mironjuk - August 10, 2025

Hunderte oder tausende Einträge in einem Alpine.js x-for-Loop rendern – das geht, aber ohne gezielte Optimierungen werden Filtereingaben träge, Scrolling ruckelt und der Browser-Tab friert ein. Mit den richtigen Mustern bleibt Alpine.js auch bei großen Datensätzen schnell und reaktiv.

JavaScript Alpine.js

AI generated

x-cloak richtig einsetzen: FOUC in Alpine.js zuverlässig vermeiden

Maxim Mironjuk - August 03, 2025

Wer Alpine.js ohne x-cloak einsetzt, riskiert ein kurzes Aufblitzen ungestylter Direktiven beim Seitenaufbau. x-cloak schließt genau diese Lücke zwischen HTML-Parsing und Alpine-Initialisierung mit einer einzigen CSS-Regel und einem Attribut, das zuverlässig verschwindet, sobald die Komponente bereit ist.

Alpine.js SEO

AI generated

Breadcrumb dynamisch aus der Route generieren mit Alpine.js

Maxim Mironjuk - Juli 27, 2025

Eine Breadcrumb Navigation zeigt Nutzern, wo sie sich innerhalb der Seitenstruktur befinden, und liefert Suchmaschinen ein klares BreadcrumbList Signal. Mit Alpine.js lässt sich diese Navigation direkt aus der aktuellen URL erzeugen, ganz ohne clientseitigen Router und ohne die Pfadsegmente manuell für jede Seite zu pflegen.

Alpine.js

AI generated

Alpine.js Sticky Table Header: Scroll-Aware Tabellen

Maxim Mironjuk - Juli 22, 2025

Lange Vergleichstabellen ohne fixierten Header kosten Nutzer Zeit und Orientierung. Mit position: sticky, Alpine.js x-data und IntersectionObserver entsteht ein vollständig scroll-aware Tabellenkopf – mit Shadow-Indikator, optionaler Spalten-Markierung und responsiver Fallback-Strategie, ohne jQuery-Plugin und ohne JavaScript-basierte Position-Berechnung.

Alpine.js

AI generated

Alpine.js x-collapse: Smooth Akkordeon-Animation ohne CSS-Hack

Maxim Mironjuk - Juli 20, 2025

Der max-height-Trick funktioniert, sieht aber nie wirklich flüssig aus. Alpine.js x-collapse animiert die tatsächliche Inhaltshöhe, reagiert auf dynamische Inhalte und integriert sich nahtlos in Alpine-State – ohne eine einzige Zeile eigenes JavaScript.