We can safely say that developers enjoy being able to put Alpine.js into “stack” acronyms. What’s more, it showcases Alpine.js’s flexibility, since it’s being integrated in a variety of environments.
TALL stack - TailwindCSS Alpine.js Laravel Livewire (more on that later) coined by @stauffermatt. The latest one, the BALL stack and @JunaidQadirB‘s favourite . And my personal SHAT stack - Serverless HTML Alpine.js TailwindCSS.
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
Made with Alpine.js
Cool new projects & websites using Alpine.js:
- https://www.hestanvineyards.com/ by @bennash is built with Alpine.js, Craft CMS and Tailwind CSS.
- github.com/santigarcor/laratrust v0.6 by @santigarcor is uses Alpine.js and TailwindCSS
- github.com/laravel-frontend-presets/tall there’s now a TailwindCSS, Alpine.js, Laravel, LiveWrite (TALL stack) preset for Laravel, thanks to @LiamHammett, @ryangjchandler and @DanHar_
- askjanet.xyz by https://twitter.com/swlkr is built with Alpine.js and water.css, and it runs on a Raspberry Pi?
Demos:
- E Exam Landing Page with Alpine.js and TailwindCSS by @theasarmah
- Copy to clipboard animation by @rizalrenaldi
- gugahoa/liveview-todo-app a todo app with Phoenix LiveView, TailwindCSS and Alpine.js by @gustavohoa
- An Alpine to Vue adapter by @Spider__dev
- Other form field with Alpine.js by @MikeMartin604
Articles & Tutorials
Build an RSS reader with Alpine.js by @teamcodecourse. It’s a great teaser for the course and a cool standalone end to end app build with Alpine.js.
Alpine.js Drag and Drop by @trovster
Using Loops in Alpine.js by @SamNewby_
Using Tailwind UI with Alpine.js - this is useful for people caught out by the fact Alpine.js isn’t the default for TailwindUI any more (which I’ve seen a fair few of on Twitter)
Laravel TALL Stack Preset by @LiamHammett
Code & Tools
I released alpine-test-utils “utilities for testing Alpine.js components” last the weekend.
Spruce by @ryangjchandler has had a couple of new releases (0.2.0, 0.3.0) to support “global store variables”, an event bus, a Spruce.watch function and make stores accessible from outside of Alpine.js components.
Congrats & thanks to the contributors new and existing whose work got merged this last week. I think it’s safe to assume @scholz_felix was pretty happy about it.
May the fourth special edition
Note: this didn’t actually make it into mainline Alpine.js.
Features:
x-wingdirective, see Caleb’s tweet about it
2.3.3
Fixes
- Mutation observer bug when multiple mutations from different parts of the dom happen AND the first mutation was unrelated to the rest
2.3.2
Fixes
<input type="hidden" x-model="foo">:x-modelwasn’t working on"hidden"input elements in Safari