Alpine.js Weekly - Alpine.js Weekly #85

Tips

❓ Using Alpine.js and need to debounce a function?

❌ You don’t need JavaScript libraries like lodash.

✅ Just use Alpine.debounce() which is also used internally for the x-on:input.debounce=”” modifier.

Cc: @calebporzio

— Zep Fietje (@zepfietje) March 17, 2022

neat trick for @Alpine_JS v3. The official way to access Alpinejs scope from outside code is to use Alpine.store() method. However I found this approach ( window.MyData = this ) easier for small code base where using store() is overkill

— Abdurrahman Shofy Adianto (@azophy) March 7, 2022

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:

• @ChipperCI‘s notification channels are built with Laravel, Tailwind and Alpine, by @thierylaverdure
• collegead.com/newsfeed is built with Alpine, Tailwind and WordPress by @joshiediy
• efgases.com is built with Alpine, Tailwind and WordPress/WooCommerce by @joshiediy

Demos:

• Alpine + intersection observer to fake a hover effect on scroll on mobile by @derrickgrigg
• Alpine.js Fake Viewer Count by @extralam
• Alpine.js Accordion by @extralam
• Alpine Scroll to Top by @CuriosityBugs
• Alpine Simple Panel Toggle by @batraio

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

Alpine.js: Displaying API data in a HTML table

dansult’s What Got Done for the week of 2022-03-18, includes dabbling with Alpine.js by @dansult

Creating a GO GUI with Alpine.js and Webview by @GoDiscussions

Calling Alpine.js methods from third-party scripts - How we made Alpine-powered page understand Google Map events by @gauravmakhecha

Adopter Reactions

I learned seven new JavaScript frameworks

This one was the best find:

AlpineJS

• Easy to install with a single script
• 15 attributes, 6 properties, 2 methods. That’s all there is to learn
• Imports data like a champ
• Pairs really well with Tailwind…

— Ray Villalobos (@planetoftheweb) March 7, 2022