Alpine.js developer are you more BALL, TALL or SHAT?
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