The cover image of the video course

Exploring Alpine.js

Go Beyond the Basics with Alpine.js

Alpine.js lets you easily add bits of reactivity to your website without needing to setup a front-end build process. All you have to do is:

  1. Add the CDN link
  2. Sprinkle in some HTML attributes
  3. Poof ✨ magic happens

It is especially great for adding simple animations and interactive behavior to a WordPress website.

But…it can be challenging to go beyond some basic examples. After piecing together disparate articles, learning on my own via trial and error, and using Alpine.js to build over three dozen components across multiple production websites I wanted to share what I’ve learned to help you too Go Beyond the Basics.

Through a series of videos we will explore how to use Alpine.js in more advanced ways so that you can level up 🚀 your game.

The videos are organized into modules named after prominent peaks 🏔️ in the Alps.

1. Intro and Framework Features (Eiger)

This is a great module to start with if you have limited experience with Alpine.js.

We get started by looking at a sample Alpine.js component then build a firm foundation with a basic project setup. Next, we’ll look at some features of the framework that I learned about the hard way and wrap up with a discussion on how to leverage native events on the window 🪟 object.

2. Code Organization and Communication (Jungfrau)

Now that we’ve got a foundation, we’ll look at how to extract our component code into external files for better organization 📁 and re-use. We’ll also dig into nested components to see how to leverage the cascade from outer to inner and explore options to pass data between non-nested components.

3. Using External Data (Zugspitze)

Showing data (especially tabular data) from an external data source is a fantastic use case for Alpine.js. In this module we’ll look at a bunch of different permutations and capabilities:

  • Loading data from an external source
  • Caching ⏳
  • Loading in chunks
  • Paginating 📖
  • Sorting
  • Filtering
  • Searching 🔍

4. Animation and Intersection (Mont Blanc)

Don’t just react to user input, see how to add animation and whimsy 🦄 to your projects with intersection and scrolling triggers. We’ll also look at controlling a Lottie animation and leveraging Mutation Observer to react to other page changes.

5. Real World Components (Matterhorn)

Learn from real-world components. We will walk through the actual code that I’ve used on production websites to deliver Alpine.js components to meet design and content requirements.

  • Scoring on a Curve 💯
  • (Fun With) Statistics
  • Annotating 🖼️ Images
  • Avoiding Underlap
  • Dynamic 🧨 Datacards
  • Image Marquee

Lessons

5 Modules - 29 Lessons - 2h 32m total length - 1080p
Intro and Framework Features (Eiger)
An introduction to Alpine.js and project setup as well as some framework features to be aware of.
1. Glossary
2. Project Setup
3. Array Reactivity
4. Property Name Collisions
5. Native Events
Preview
6. Bonus - Alpine.js Histogram Filter Component
Code Organization and Communication (Jungfrau)
Extracting components to external files for re-use and passing data between component.
1. Creating a Component
2. Extracting Code to External Files
3. Leveraging the Cascading with Nesting
4. Passing data between components
Using External Data (Zugspitze)
Using external data in your components including loading, caching, paginating, sorting, filtering, and sorting.
1. Getting Data In
2. Caching Data
3. Importing in Chunks
4. Infinite Scroll
5. Paginating
6. Sorting
7. Filtering
8. Searching
Animation and Intersection (Mont Blanc)
Adding animation and intersection including using Alpine.js to support Lottie animations and react to page changes with Mutation Observer.
1. Intersection and Scrolling
2. Animation on Entrance
3. Hide and Show Header
4. Integrating Lottie
5. Mutation Observer
Real World Components (Matterhorn) - In Development
A deep dive through six different components that I've developed and am using today on real-world production sites.
1. Scoring on a Curve - Coming Soon
Coming soon
2. (Fun with) Statistics - Coming Soon
Coming soon
3. Annotating Images - Coming Soon
Coming soon
4. Avoiding Underlap - Coming Soon
Coming soon
5. Dynamic Datacards - Coming Soon
Coming soon
6. Image Marquee - Coming Soon
Coming soon

Price: $49.00

Coupons
Reviews
5.0 (2)
5 Stars
100%
4 Stars
0%
3 Stars
0%
2 Stars
0%
1 Stars
0%
Created by The creator profile picture Matt Vanderpol

Price: $49.00