Is Alpine.js still a secret to the JS community?
This week's public service announcement that friends don't let friends not know about Alpine.js.
To illustrate this point, here are a couple of reactions to discovering Alpine.js:
Why didn't anyone tell me about @Alpine_JS before?
— Paul Rudd saying "that's thick" on repeat (@Thecanarium) October 8, 2020 by @Thecanarium
And another:
I just discovered @Alpine_JS and I can’t be more excited. I might even start liking JavaScript after all.
— José M. Arévalo (@josemarevalo_) October 8, 2020 by @josemarevalo_
This email is supported by my GitHub Sponsors.
Tips
@click.away is one of those features that seems like Vue/React/Svelte should have but don't, it's an Alpine.js gem.
Lifesaver! This (click-outside), and debouncing are 2 things so far that I miss in Svelte. @Alpine_JS has native click-outside and it's so nice. https://t.co/Z3z0ntZG3m
— Placebo Domingo (@brbcoding) October 8, 2020 by @brbcoding
Made with Alpine.js
If you've got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.
This week's Alpine.js adopter is @kevinbatdorf with the Alpine.js Inline Devtools landing/demo page: https://kevinbatdorf.github.io/alpine-inline-devtools/
Demos:
- a confirm-deletion component by @Farhanianz
- a demo for a blog post about ScriptableApp + Alpine.js by @getJReviews
- a basic image gallery / lightbox with Tailwind and Alpine.js by @pixleight
Articles & Tutorials
State management in Alpine.js using Spruce by @LogRocket
Authoring progressive enhanced fragments with Alpine by @nico__delfino
Alpine.js directives and WordPress sanitization by @meszarosrob
For more posts like these, you can join the Alpine.js Development Subscription, it's a great way to support the newsletter and get early access to Alpine.js content.
Code & Tools
Taming Thymeleaf - a book about Spring Boot and Thymeleaf by @wimdeblauwe uses some Alpine.js examples if you're in the Java + Alpine community.
For Laravel, Livewire + Alpine users, @jcergolj has published a simple authorisation system to laravellte: https://github.com/jcergolj/laravellte/tree/feature/simple-role-based-auth.
Alpine Inline Devtools by @kevinbatdorf now actually work inline (in an iframe), although using a popup still works, as a bonus, there's a new demo page: https://kevinbatdorf.github.io/alpine-inline-devtools/
A new @webcomp_dev starter kit with Alpine.js: webcomponents.dev/new. No support for shadow DOM which is a limitation on the Alpine side.
A starter with Alpine.js, TypeScript, TailwindCSS, PostCSS, PostHTML & more by @chapmanjacobd: github.com/chapmanjacobd/alpinets-starter