How key is Alpine.js to the future of the web?

Request for product? Or is the Laravel TALL preset “good enough”?

Anyone ever created a product configurator with the TALL stack? Or just LiveWire+alpinejs? #tall #livewire #alpinejs /cc @calebporzio

— Peter Jaap Blaakmeer (@PeterJaap) October 27, 2020

This email is supported by my GitHub Sponsors.

Tips

We featured Chris last week for his work on a PHPStorm “Alpine.js Support” plugin.

Just approved. Search for the “Alpine.js Support” plug-in. https://t.co/lBqJp18h7E

— Chris #BlackLivesMatter (@inxilpro) October 26, 2020

Tip for recent Vue/React converts, Alpine.js is all about dumping JSON in the DOM.

🗻 @Alpine_JS tip: Coming from React or Vue, you might thinking you need to load your initial state from an endpoint. This is an anti-pattern and is actually pretty painful to do.

Your DOM is initial state. Render the page as you want it with your template system.

— Jeffrey Guenther (@jeffreyguenther) October 26, 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:

• @ContestKit‘s latest campaign is built with Alpine.js (by @ninjaparade)
• Northeastern University Community and City Engagement organization‘s new website & design system is built with Alpine and Tailwind by @roasted_dev

Demos:

• Dropdown Nav with mobile off-canvas menu using Tailwind and Alpine by @CS_sean
• Demo of simple reactivity, with blade and alpine.js by @bardiz12
• find a keyword’s google ranking with Alpine.js and Livewire by @dennisvdalen
• Toast Notifications with Alpine and Tailwind by @KevinBatdorf

Articles & Tutorials

Build a Remaining Character Count Component with Alpine.js by @ryangjchandler

If not SPAs, What? includes a mention of how Livewire/LiveView/Stimulus Reflex and tools like Alpine might be a look at the future of websites/webapps.

Webflow + Alpine.js - A match from heaven by @untitledfactory

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

github.com/indgy/LittleBigTable - A lightweight interactive AlpineJS html table.

v2.7.3

Fix:

• Improvements to what interrupting a nested transition (wrapped with parent x-shows) does