December 3, 2021

Alpine.js Weekly #80

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:

• spartner.software is built with Laravel, Statamic, Alpine and Tailwind by @patrickbrouwers
• doeken.org is build with Alpine, Jigsaw and Algolia by @doekenorg
• sketchupforwoodworkers.com by @ZTHall is built on the NEAT (Netlify CMS, Eleventy, Alpine, Tailwind) stack

Demos:

• Laravel Livewire and Alpine CKE editor integration by @Jameskaguo
• a more accessible Tailwind UI toggle with Alpine by @h4mzt3r
• flyout menu on Desktop with Alpine portals by @brbcoding
• an Alpine Mapbox component by @MonneyArthur
• Mac OS Dock animation with Alpine and Tailwind by @nileshtrivedi

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

[Video] Alpine JS Tutorial | Build a Todo App by @GreggFine

How to create and use Reusable Modal using Alpine.js and Livewire by @snehal_kadwe

Django, HTMX and Alpine.js: Modern websites, JavaScript optional by @czue

[Video] free mini-course: Reusable Edge components with Alpine.js by @adonis_mastery

Code & Tools

v3.5.2

Features:

• morph plugin
• hide x-collapse content from the accessibility tree

Fixes:

• evaluatorMemo memory leak
• multiple instantiation of component due to complex mutations

v3.6.0

Features:

• $id magic

Fixes:

• wrong order of x-for when children use x-if
• mutations + third party libs interop improvements

v3.7.0

Features:

• moves x-teleport plugin into core

Adopter Reactions

I think I’ve found my new darling for anything web related: .NET Core Razor Pages with sprinkles of @htmx_org and @Alpine_JS (where it makes sense). Pair that with something like @ShuffleEditor and it’s off to the races.

Notice there isn’t ANY front end tooling involved 🥰

— Bartek (@brtkdotse) November 30, 2021