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