July 10, 2020

400k+ Alpine.js CDN hits/month but what version do you run?

Alpine.js got 400k+ JSDeliver CDN hits last month but I would be interested if everyone could fill out the Alpine.js version poll since it seems there's a heavy skew to version 2.3.5.

Interesting @Alpine_JS version usage stats (from CDN @jsDelivr) 400k+ CDN hits last month

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

It interesting to see the following Stimulus vs Alpine takes:

Alpine.js is everything I wanted Stimulus.js to be.

by @RichNwan

And the poll from @alec_c4:

Which one is better and why? Alpine.js or Stimulus

Tips

Pro tip from @LukeDowning19, you can make a template an Alpine.js component.

Did you know that you can scope an @Alpine_JS component to a <template> tag? Makes for a very clean syntax when using loops from data fetched asynchronously

@LukeDowning19's epiphany can benefit us all:

The more I extract @Alpine_JS into blade components, the more I avoid placing x-data on the outer-most div of the component. You avoid any conflicts of interest and weird behaviour when placing things like x-ref on the component tag.

Made with Alpine.js

harmonograph.art - a micro progressive web application (<30kb) to draw, download and share a randomised harmonograph by @alexpage_ is built with Alpine.js (and Eleventy).

• "super slick range slider" by @ShaneDRosenthal, let's see if we can get him to share his source
• A Pocket client with Alpine.js and TailwindCSS by @hossammourrad
• Drupal Single File Component being re-rendered server-side using Alpine.js and morphdom by @mortensonsam
• alpine-auto-interval demo with TailwindCSS by @kevinbatdorf
• tiny "devtools" module by @kevinbatdorf as seen in his many demos at codepen.io/collection/nRxrPk
• Alpine.js Handbook Examples a storybook with a few Alpine.js components (more to come) from @hugo__df.

@Marvinified is an Alpine.js convert:

@Alpine_JS @Alpine_JS @Alpine_JS That's what I used for my personal website and it was quite smooth. You get to keep your DOM, but this time with some upgrades. You can check it out here github.com/alpinejs/alpine

Articles & Tutorials

Basic Modal with Alpine JS by @FullstackPhoen1

How to use AlpineJS with Laravel Mix by @Martin_Betz, shared by @laravel_101

Alpine.js In-Depth: x-data "state" & x-text "echo" by @hugo__df

Focusing Down: Implementing Laravel Livewire Infinitely Reduced Page Load by @WillRodRican

If you enjoy the newsletter and posts like these you can join my GitHub Sponsors, github.com/sponsors/HugoDF/, you support the newsletter & get early access to Alpine.js content.

Code & Tools

The v0.6.9 version of @axiomtheme dropped, it uses Alpine.js under the hood see the release notes at axiomtheme.com/v0.6.9-release-notes.

github.com/KevinBatdorf/alpine-auto-interval - a plugin to auto run a function every n milliseconds by @kevinbatdorf