A few courses have been cropping up, the latest of which is Sprinkle declarative, reactive behaviour on your HTML with Alpine JS on egghead.io by @simonswiss who apparently wrote an Alpine.js course without knowing there’s a Discord community.
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
@bep, the creator of Hugo (the Static Site Generator, not the curator of this newsletter) and Simone have been working on a PR to fix some turbolinks issues and in the meantime had this public service announcement for anyone who’s doing Turbolinks + Alpine.js:
Just a heads up about @calebporzio ‘s AlpineJS – before going down that route, you could saye some gray hairs by waiting for this to merge first: https://t.co/JVA9E764ig (esp. if Turbolinks is also on the menu).
— GoHugo.io (@GoHugoIO) May 8, 2020
There’s a bunch of love between Alpine.js and static site generators, according to @STOQE Eleventy and Alpine.js is a match made in heaven.
The big one this week is transistor.fm adopting Alpine + Tailwind for their dashboard rebuild.
Sprinkle declarative, reactive behaviour on your HTML with Alpine JS (video) by @simonswiss
Alpine.js State Management with Spruce (video) by @ryangjchandler on codecourse.com
Alpine.js + jQuery/JavaScript Plugin Integration: a Select2 example by @hugo__df.
For more posts like this, you can join the Alpine.js Handbook Knowledge Base (Paid), that’s a great way to support the newsletter and get early access to Alpine.js content.
The @shat/stylenames package allows you to have object/array style bindings, like :style="styleNames({ backgroundColor: 'red' })
by @hugo__df.
alpine-minimal-boilerplate, is a one-file Alpine.js boilerplate. The irony of a boilerplate for a project that doesn’t need one isn’t lost on me. What’s nice is that you’ve now got a place to refer to for Alpine.js links: example.codewithhugo.com/alpine-minimal-boilerplate/.
The Alpine.js repo is now at 7.6k stars, which means people are liking what they see.
Fixes:
x-on
on anx-for
ed element wasn’t being registered, fixed now:class="{...}"
bindings