Alpine.js Devtools Launched
You can now get the Alpine.js Devtools, (repo is Te7a-Houdini/alpinejs-devtools), you can get it as a Chrome Extension or Firefox Add-on. Big thanks to @Te7aHoudini for kickstarting that project, and @ryangjchandler for his previous forays into it.
Late last week (a couple hours after the latest newsletter issue went out), Alpine.js passed 6k stars on GitHub, we’re now sitting around 6.2k, pretty cool to see the influx of people in the issues and the Discord.
The Alpine.js Community helped Caleb refactor x-for during a YouTube stream.
As part of Alpine.js Weekly I’ve released Alpine.js Collections: components, tools, articles, demos & more where you’ll find an always up to date, categorised list of items featured on the newsletter (past & future).
Some cool new projects are leveraging Alpine.js
- Zambian Pay As You Earn (PAYE) tax calculator by @eddyshivers is made with Alpine.js
- challengeteacher.online by @emd uses Alpine.js (amongst other things)
Articles & Tutorials
This week, you can build an Alarm clock using Alpine.js by Rakesh Bhatt.
There’s a lot of buzz around using Alpine.js and TailwindCSS for prototyping, here’s How to make interactive, code-based prototypes that feel like the real deal, even if you suck at JavaScript by @UnknownGuest
(Video) Laravel Movie App - UI Interactivity w/ Alpine.js - Part 5
Animate with Alpine.js by @benbao93
Getting started with Alpine.js by @LogRocket
Pseudo Computed Properties in Alpine by @ryangjchandler
Integrating Alpine.js with Eleventy & YAML files to create Alpine Playground’s Collections
A couple of new episode from Caleb’s Building Alpine.js series: Episode 3 - Making Things Reactive and Episode 4 - Event Listening.
Code & tools
No need for an Easter hunt to get demos this week:
- A todo list by @ryangjchandler
- Calendar UI with TailwindCSS and Alpine.js](https://codepen.io/mithicher/pen/OJyVPBY) by @mithicher.
- In memory of John Conway, @unlikenesses wrote Conway’s game of life in Alpine.js
- A “probably shouldn’t be used in production” quantity selection widget using Alpine.js by @PiotrPogorzel
- Ajax Loading a page into a modal with Alpine JS by @terry_upton
- After discussion in the Discord server, @ryanjchandler shared his attempt at an Alpine.js datatable using data set as HTML on the page and here’s another datatable one using x-data
- AlpineJS Dynamically Injected Nested Components by @getJReviews
No release this week, but the Alpine.js Devtools have beend launched as both a Chrome Extension and a Firefox Add-on.
@ryangjchandler has been playing around with implementing Vue-style filters in Alpine.js you can see it working at Alpine.js filters for x-text.