How fast can _you_ learn Alpine.js?
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.
Made with Alpine.js
The big one this week is transistor.fm adopting Alpine + Tailwind for their dashboard rebuild.
- northatlantic.mike-martin.ca/ by @MikeMartin604 is built with Alpine.js
- A Ping Pong Score Board by @victormustar
- giftaplate.org is Tailwind and Alpine.js, Python/Flask
- @justinjunodev is looking forward to WordPress + Alpine.js
- taptourist.co.uk/explore by @MadeByMayo is built with Alpine.js
- burstcommerce.com/flair-release-notes-scheduling-unpublishing-copying/ by @atomgiant is rebuilt with Alpine and Tailwind
Demos
- A ‘site banner message’ component that can display multiple messages, animates their closing, and remembers closed messages via localStorage by @philw_
- @simonswiss is working on displaying pups with Alpine.js for his Alpine.js course on egghead
- A Tailwind Accessibility config overview by @Xewl
- A dropdown with focus management using classNames by @philw_
- Transition tips by @JonasKuske
- “playlist” for audio playback by @michaeldyrynda
- Alpine.js slider with native scroll by @hus_hmd
- Progressively enhanced Checkbox / Toggle by @underscoresdev
- Analytics Add-on Usage Examples by
Articles & Tutorials
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.
Code & Tools
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.
2.3.4
Fixes:
x-onon anx-fored element wasn’t being registered, fixed now- Fix cursor placement bug on Safari
- Ignore extra whitespace in
:class="{...}"bindings - Mirror VueJS’s behavior for binding false/null/undefined values to attributes