Alpine.js Weekly - 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.$persist shared 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