March 12, 2021, 7:30 p.m.

Alpine.js Weekly #53

Alpine.js Weekly

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

You just read issue #53 of Alpine.js Weekly. You can also browse the full archives of this newsletter.

Share on Facebook Share on Twitter Share via email
Brought to you by Buttondown, the easiest way to start and grow your newsletter.