Alpine.js Weekly - Alpine.js Weekly #52

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.

This newsletter supported by my GitHub Sponsors.

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:

• wolstenhol.me is built with Tailwind, Eleventy, and Alpine – the TEA stack! by @philw_
• swish.ink is built with Alpine.js by @StephenAfamO
• lukeshiru.github.io/annowying/, a webapp (Alpine.js PWA) to know which hero you should pick to counter other heroes in Overwatch by @lukeshiru
• isiprint.net/tranche/ is a calculator for the price of a book’s paper by @eliottchampault
• shop.saloninteractive.com (coming soon) is being re-built in Alpine.js and Tailwind by @servervivalist

Demos:

• a little snippet to copy text from input and show it inside tippy JS by @DanekKalivoda
• Multi Range Slider with Alpine.js by @TwComponents
• Dynamic input fields with Alpine.js by @Zubairmohsin33

Articles & Tutorials

Getting Started with Alpine.js by @carltongibson

[Podcast] Caleb (creator of Alpine) on the PodRocket podcast on Alpine.js & what to expect in 2021 by @LogRocket

Using Native Fetch With Alpine.js by @witty_progr

Building an Accessible Nav with Alpine.js and Tailwind CSS by @austriker27

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

filamentadmin the elegant TALL stack admin panel looks like it’s picking up some steam (via by @nunomazer).

@eclecticlly/tata is an npm package to configure the Adonis JS framework with Tailwind, Alpine.js and TypeScript by @maxbertinetti.

go4cas/wasp-template is a scaffolding from @go4cas, with componentization driven by Presto, reactivity powered by Alpine.js, and compilation handled by Vite. (via @stephancasas)

Adopter Reactions

The Alpine community is on the Smashing Mag radar

What tech stacks have you been using lately — successfully? E.g.:

Alpine + Eleventy
Gatsby/Next.js + Preact
Sapper + Svelte

Anything else? What worked well, and what didn’t work at all?

— Smashing Magazine (@smashingmag) March 4, 2021

Been a vue.js user since it’s inception and never really thought that I needed anything else. But then I finally checked out alpine.js… I think it’s time to add it to my repertoire.#vue #vuejs #alpinejs #javacript

— Jeremy Menicucci (@jmenicucci) March 4, 2021

I’ve been developing a @googlechrome plugin for my wife’s side hustle and I moved it over to @Alpine_JS & @tailwindcss. It has made the dev experience 100x better. 😍

— Jose Soto (@JoseCanHelp) March 2, 2021