Page 9 - Alpine.js

AI generated

Building a Vertical Timeline Component with Alpine.js

Maxim Mironjuk - April 16, 2025

A vertical timeline component displays events chronologically along a vertical line and reveals steps as the user scrolls. With CSS Grid for the layout and Alpine.js x-intersect for scroll-reveal animations, a flexible timeline component emerges without loading a dedicated timeline library.

JavaScript Alpine.js

AI generated

x-show vs. x-if in Alpine.js: When to Use Which

Maxim Mironjuk - April 09, 2025

x-show and template x-if both solve conditional rendering, but with fundamentally different DOM behavior. Knowing the differences in lifecycle hooks, transitions and performance lets you make the choice deliberately instead of randomly, avoiding unnecessary re-initializations or bloated DOM.

Alpine.js

AI generated

Alpine.js v3: The Complete Directives Reference

Maxim Mironjuk - April 06, 2025

Alpine.js v3 ships with 15 directives, 6 magic properties, and 3 global methods. Anyone who knows all of them and understands where each one belongs can build interactive UIs without a build step, without a virtual DOM, and without the complexity of large frameworks: reactive, maintainable, and written directly in HTML.

JavaScript Alpine.js

AI generated

x-for with key: Stable List Updates in Alpine.js

Maxim Mironjuk - April 06, 2025

Without the key modifier, Alpine confuses DOM elements with the wrong record in x-for lists as soon as entries are inserted, removed, or reordered. A stable, unique key solves this diffing problem and prevents focus jumps, wrong animations, and swapped form state.

Alpine.js Hyvä

AI generated

Building a Mini Cart Preview with Alpine.js in Hyvä

Maxim Mironjuk - March 25, 2025

A mini cart preview shows the customer instantly what is in the cart, without leaving the product page. With Alpine.js this flyout can be built as a lean x-data component that catches section data events, changes quantities live and does all of this without jQuery or extra libraries.

Alpine.js

AI generated

Async Server Validation While Typing with Alpine.js

Maxim Mironjuk - March 12, 2025

A username or coupon code cannot be checked client side because the answer depends on the server's current data. Server validation while typing therefore needs debounce, clean request cancellation, and a clear loading state, so Alpine.js never shows a stale response and the server is not queried on every single keystroke.

Alpine.js

AI generated

Alpine.js $nextTick: Waiting for DOM Updates Without setTimeout

Maxim Mironjuk - March 08, 2025

Using setTimeout(fn, 0) as a workaround for DOM timing problems is a code smell in Alpine.js projects. $nextTick is the clean alternative: it waits precisely for the next render pass to finish, not for an arbitrary number of milliseconds.

Alpine.js

AI generated

Visualize Data with Alpine.js Without Chart.js

Maxim Mironjuk - March 06, 2025

Chart.js adds 200 KB to your JavaScript bundle. D3.js is a learning curve of its own. For most dashboard widgets in Hyva themes, Alpine.js and native SVG are enough, complete with tooltips, animations, and full accessibility.

Alpine.js

AI generated

Animated Number Counter: Smooth Without GSAP Using Alpine.js

Maxim Mironjuk - February 25, 2025

Animated number counters are everywhere on landing pages, statistics sections, and dashboards. Pulling in GSAP or CountUp.js for this loads unnecessary kilobytes. With Alpine.js, requestAnimationFrame, and the IntersectionObserver, you get a smooth, scroll-triggered counter, completely without external libraries.

JavaScript Alpine.js

AI generated

Using x-cloak Correctly: Preventing FOUC in Alpine.js

Maxim Mironjuk - February 14, 2025

Anyone shipping Alpine.js without x-cloak risks a brief flash of unstyled directives during page load. x-cloak closes exactly this gap between HTML parsing and Alpine initialization with a single CSS rule and an attribute that reliably disappears once the component is ready.