Alpine.js
Alpine.js is a great library to bring pages to life with client-side interactions, without the need to write a lot of custom JavaScript or use a more heavy UI library.

Alpine is a lightweight frontend library that I’ve used with a lot of happiness, specifically to add client-side interactivity to a page.

Things like “if I click this button, show this modal” or “close the modal if I click outside of it”, which are always kind of unfriendly to do with vanilla JavaScript and DOM APIs. Not hard, but I have to think a bit about how to do some things, while with Alpine, it’s very straightforward.

Compared to most UI libraries you see these days, like React, Svelte, Vue, Angular, and so on, Alpine is A LOT simpler, and it’s 100% focused on so-called “JavaScript sprinkles”, which are little bits of interactivity.

As opposed to taking control of the entire UI like most of those bigger frameworks tend to do (although you can also use them for tiny portions of a web page).

Alpine is 100% focused on this, and it’s very good at it.

In this unit I’ll explain the basics of Alpine, so you can learn the fundamentals of this super handy library.

To learn more, the official documentation is the best place to go: https://alpinejs.dev/start-here

Lessons in this unit:

0: ▶︎ Introduction
1: Installing Alpine
2: The basics of Alpine
3: Events
4: Defining data
5: Looping
6: Binding user input to variables
7: Watching variables change
8: Stores
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!