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