Alpine.js Weekly #53
More than one year on, it’s great to see new people discovering Alpine.js every week. We’ve got a bunch of new tools released so make sure to read all the way to the Code & Tools section.
First glance at @Alpine_JS, and I can totally relate on the separation of concern!
The framework helps you deal with the DOM without the need for
<script>tag.You can use the script tag for JavaScript logics. Free of getElementByID and the likes or masks
— Toheeb Ogunbiyi (@ToheebDotCom) March 6, 2021
I love explanations of Alpine.js, they stand the test of time, here’s a thread I wrote more than a year ago, all of which I would stand by today.
What’s Alpine.js and why should I care?
With React, Vue, Angular, Svelte do we need another JavaScript library?
In short, Alpine.js is for developers who aren’t looking to build an SPA, it’s lightweight (~7kb gzip) & designed to write markup-driven client-side JS.
— Hugo (@hugo__df) March 10, 2020
An issue with loads of longer form content, do scroll to the “Articles & Tutorials” section. It’s also the 52nd edition of Alpine.js Weekly, so happy 1 year to us.
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:
- transistor.fm has been using Alpine for a while (for their dashboard at least), but looks like @mijustin also dropped it onto their homepage.
- amorcorkflooring.co.uk by @stevemarkperry is built with Alpine and Tailwind, there’s even a matching write-up linkedin.com/pulse/all-good-product-needs-honest-advertising-kevin-murphy/
- 12stream.de by @pdeden is built with Alpine and Tailwind
- @galstar‘s wedding invitation is powered by Rails and Alpine, though I’d feature him without having the URL because he thought no one would care and we’re a friendly bunch
- Random City Video by @blankxk is built with Alpine
- github.com/a6h-s/go-rest-db-auth by @__circuit is a Go backend project with auth/user sessions which uses Alpine/Tailwind for the dashboard section
Demos:
- Alpine + Tailwind sidebar
- Alpine, Tailwind & Laravel Livewire form validation by @h4mzt3r
- Simple Alpine.js FAQ by @thinkverse
Articles & Tutorials
Solving Component Communication with Events in Alpine
Weeknotes: Getting started with Alpine.js and PythonKit by @carltongibson
Flexible Carousel with AlpineJS by @jcarouth
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
For Ray users, @PatDeveloper has released some Alpine.js & Spruce integrations: github.com/permafrost-dev/alpinejs-ray
Spruce v2.6.4 by @ryangjchandler is out: release notes
Alpine.js devtools v0.3.0 has been released with a new “warnings” tab that shows Alpine eval errors + a fix to x-model updates updating the devtools data. See the release notes or get it for Chrome: chrome.google.com/webstore/detai…, Firefox: addons.mozilla.org/firefox/addon/…
Adopter Reactions
Timber + Advanced Custom Fields + TailwindCSS + AlpineJS = the TATA stack.
It’s making WP development as enjoyable as working in WP can be (for me).@TimberWP @wp_acf @tailwindcss @Alpine_JS
— anu (@anu) March 8, 2021