Alpine.js Weekly - Alpine.js for sorcerers

I’m experimenting with @Alpine_JS and @tailwindui and now I feel like a sorcerer. pic.twitter.com/wW2ExmOhoQ

— Mark Praschan (@MarkPraschan) October 13, 2020

This email is supported by my GitHub Sponsors.

I’ve wondered for a long time which use-case Spruce by @ryangjchandler for @Alpine_JS could have.
Today I’ve found one and it works super easy, impressive and like expected! 🎉🚀
I was able to create a global volume slider for several videos with it. 🤩https://t.co/5pGdbGfh4v

— Tom Witkowski (@devgummibeer) October 12, 2020

Tips

Give @Alpine_JS a try! You can sprinkle in tiny amounts of JS in-line with HTML and it’s super approachable.

— Ryan Atkins (@ryatkins) October 12, 2020

As someone who avoids writing JS at any cost, @LaravelLivewire and @Alpine_JS have been a joy to work with and have allowed me to create some pretty interactive apps that I wouldn’t have ever attempted before.

— Brad Kilshaw (@BradKilshaw) October 13, 2020

I described @Alpine_JS like this on a call today: “Imagine if jQuery and Vue had a baby, but they modified the genetics so it was like @tailwindcss but for JavaScript.”

You’re welcome to use that @calebporzio.

— Galen Gidman (@galengidman) October 12, 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:

• dcblog.dev by @dcblogdev is build with Laravel, Tailwind/Tailwind UI and Alpine.js
• @fostr_io are revamping their Shopify themes with Alpine.js + Tailwind CSS

Demos:

• a component to create data charts with Livewire, Alpine.js and Chart.js by @asantibanez
• a transition for a navigation menu on mobile by @austriker27
• a demo of an Alpine.js REST API integration by @getJReviews
• a flashcard component with Alpine, Tailwind and Popmotion.js by @miczed
• a TALL international phone number input with Livewire, Squire, Alpine and libphonenumber-js by @danjharrin
• A Livewire, Tailwind and Alpine.js modal by @jtkendall

Articles & Tutorials

Landing Starter Template based on TailwindCSS, AlpineJs and build on esbuild and PostCSS by @witty_prog_blog

[Video] Building a custom select input with Alpine.js and Tailwind CSS by @danjharrin

[Slides + Video] Keeping your head with Magento by @willemwigman on how the future of Magento might leverage Tailwind and Alpine.

The best way to use x-cloak in Alpine JS by @markusantonwolf

Sharing State Between Livewire & Alpine by @tnylea

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

hyva.io are fast Magento themes with TailwindCSS and Alpine.js by @willemwigman

Spruce 2.0.0 by @ryangjchandler has been released, the state managamement library for Alpine.js now has persisted stores.