Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
October 30, 2020

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
Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.