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