Alpine.js Weekly - Enjoying the Alpine.js Sprinkles ✨

I’ve liked the combo of @rails + @Alpine_JS so far. Feels good not having to rip out the entire rails front end just to get little more ✨ in the UI/UX.

— Chris Collinsworth (@cmcollin41) December 4, 2020

This email is supported by my GitHub Sponsors.

I just tried out @Alpine_JS with standard Phoenix app… and I’m genuinely impressed. It doesn’t feel intrusive at all, and it allows me to add just the right amount of interactivity without having to either setup liveview or bring in a ton of Javascript complexity. Good stuff :)

— Javier (@hojasdemanzano) December 2, 2020

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.

Here are this week’s Alpine.js adopters:

• hatchendtuition.co.uk by @terry_upton is built with Alpine, CraftCMS and TailwindCSS

Demos:

• Alpine.js radio toggle by @joko_susilo_
• a pretty popular Alpine and Tailwind Accordion by @AllmanajD
• Data table selection with Spruce by @brbcoding

Articles & Tutorials

Hide AlpineJS Components with x-cloak by @thedevdojo

Alpine JS modal component for Craft CMS by @PiotrPogorzel

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

Alpine.js devtools 0.0.8 and 0.0.9 have been released:

• features: new attributes for “component name” and LiveView “view name” support
• fix: handling of HTMLElement’s in Alpine.js state
• fix: better handling of unserializable values (eg. jQuery instances)
• fix: when editing a number value, use a number input
• perf: only update edited Alpine.js variables
• internal: improve dev setup, docs & tests

Get it for Chrome or Firefox or check out the repo alpine-collective/alpinejs-devtools.