November 5, 2021

Alpine.js Weekly #78

Tips

Someone just PR'd a good tip to the @Alpine_JS docs - thought I'd share cuz I liked ithttps://t.co/SUKef4Co0E

— Caleb Porzio (@calebporzio) November 1, 2021

---

Here's a little @Alpine_JS snippet I use for the copyright notice in site footers (both static and dynamic sites). This keeps me from having to remember to go fix the date. Doubly useful in the year 2021, where time no longer exists.

— Andrew Ek (@ektastrophe) November 3, 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:

• dev.manarah.de/?idlwpb=wallframes is being built with Alpine.js by @tahiriqbalnajam
• docuapi v2 by @bepsays is powered by @GoHugoIO and Alpine.js
• pixelpirates.cc is built with the TALL stack (Tailwind, Alpine, Laravel, Livewire) by @mubashariqbal

Demos:

• AlpineJS / Tailwind Carousel with x-intersect

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

[Free Video Course] Learn Alpine.js by @teamcodecourse is available on YouTube.

Using Alpine.js in a Netlify form by @MartyFriedel

Setting Alpine Data Outside of the Component by @tnylea

Code & Tools

Upgraded my @CraftCMS project boilerplate to use ESBuild with @Alpine_JS and @tailwindcss, fork away, github.com/dgrigg/craft-3-boilerplate

— Derrick Grigg (@derrickgrigg) November 1, 2021

3.5.0

Features

• .inert and .noscroll x-trap modifiers
• x-model can be accessed programmatically
• $data magic property
• global Alpine.$persist to enable persisting in Alpine.store
• improve Alpine error resiliency and logging

Fixes

• transition bug where @click.outside AND leave transition only
• x-collapse: only set overflow:hidden when strictly needed
• x-collapse not working properly when used with click.away
• binding plain attributes
• static attribute binding in x-bind object
• evaluator bug when expression starts with let or const

Adopter Reactions

Finally wrote my first codepiece with @Alpine_JS

Looks like lots of jQuery/JavaScript code can be removed now 😃

I didn't understand the purpose of Alpine at first. But for simple interactivity of classical #web apps it does the trick.

Thanks @calebporzio

— davert (@davert) October 27, 2021