Alpine.js Weekly #79
Hey @calebporzio, seems like the new https://t.co/tUm0XDf3Uh is using @Alpine_JS
— Amit Merchant (@amit_merchant) November 17, 2021
I spy @Alpine_JS 👀👀👀
— Caleb Porzio (@calebporzio) November 17, 2021
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:
- fffuel.co/bbburst/ and SVG generator for confetti-like explosions of shapes is made with Alpine.js by @ffffffuel
- md.jeremyjaydan.dev/ by @JeremyJaydan has been recently rebuilt with Alpine
- remoteworkvisas.com tab functionality in the user dashboard is built with Alpine.js and Tailwind by @toomaime
- thefoodbuyer.com a new food blog by @thefoodbuyeruk, designed by @intercitystudio is built on the CATS stack (CraftCMS, Alpine.js Tailwind and Pylo Craft) by @williamhibberd who has also built bristolpay.org.uk a microsite in Alpine and Tailwind
- cannabrew.uk is built with Tailwind & Alpine by @ryanhelmn
- checkthisout.today is built with Eleventy and Alpine by @ashur
Demos:
- stripped back Livewire and Alpine.js notification functionality by @alexjgarrett
- Tallstack Quill rich text editor reusable component by @HosamHasanMonir
- A File Upload component with Live Preview using AlpineJS v3, Blade, Tailwind by @cmellor
This newsletter supported by my GitHub Sponsors.
Articles & Tutorials
[Video] Laravel Livewire Series | Episode 2 Installing Tailwindcss + Alpinejs by @jacques_van_wyk
@skttl gave a talk at umbdkfest, here are his slide: Alpine.js, the easy way to add interactivity on your Umbraco site
Select all checkboxes with Alpine.js by @janostlund
Build a modern web app using Django and Javascript by @AdvantchHQ
How to Make Ajax Request in Alpine.js by @PostSrc
Getting Started With Alpine.js by @AwedaIdris
Code & Tools
@Alpine_JS make it easy to extend it’s functionality , I have just build my first npm alpinejs plugin introducing anime directive to make use of npmjs.com/package/@muhamadselim/alpinejs-plugin-anime by @MuhamadSelim is a new plugin that exposes a directive and a magic property to use animejs by @JulianGarnier in Alpine.
3.5.1
Fixes:
- x-trap issue when cloning DOM (or using
@entangle) - x-transition fast double click bug
- global
Alpine.$persistshared between different properties
Adopter Reactions
Today I discovered a new JS framework @Alpine_JS
Is this the new front-end secret power? Need to check it out!— Benny Chew (@bennychewNL) November 18, 2021
Cannot express enough how much I love @Alpine_JS. Sometimes you don’t have build tools and CI and just need to edit some HTML and make it extremely interactive. It’s incredible.
— Christopher B. Bloom (@illepic) November 19, 2021
This is really quite beautiful in its minimalism. #AlpineJS @Alpine_JS
— CSDev (@CSDevAr) November 9, 2021
