April 23, 2022

Alpine.js Weekly #87

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:

• caniphp.com is built with Alpine and Tailwind by @magicroundabout
• www.auzdevs.com is made with Tailwind, HTMX, Alpine,
• muted.io/lil-beat-maker/, a simple beat-making web app, made using Alpine.js and Tone.js by @muted_io
• moneyglance.herokuapp.com is built with Alpine, Tailwind, Laravel and Livewire by @dnlgrz91
• copy2.cc is built with Laravel, Livewire, Alpine and Tailwind by @extralam
• bristolpay.org.uk has been re-designed and migrated to Craft CMS, Tailwind and Alpine.js by @williamhibberd

Demos:

• Fiddle to show total Packagist downloads in Alpine and Tailwind by @KaziAhmedDev
• Login form with hide/show password using Alpine and Tailwind by @TwComponents
• x-effect directive to hide a subnav when the page hits the lg breakpoint in Alpine by @xiCO2k

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

Improve Your Inputs With AlpineJS’s New x-mask Plugin by @jamesauble

How To Build A Progressively Enhanced, Accessible, Filterable And Paginated List by @mmatuzo

Alpine.js: Declare & React Training - repository and training samples, supported a workshop given at #devnexus2022 by @lmajano

Implement a multi-step form in Webflow with Alpine.js by @jareklip

[Video] Alpine.Js - Ep4 Modal by @ola_falowo

Code & Tools

🎉🎉 New Alpine Plugin: Mask

One directive: x-mask

Extremely simple, extremely powerful input masking.

Check it ooooaaaaatttttttt:https://t.co/vZtNHBw4Ul pic.twitter.com/kqRTvciOcL

— Caleb Porzio (@calebporzio) April 19, 2022

v3.9.6

Features:

• Warn if directive from plugin is being used without plugin
• Add x-collapse.min modifier

v3.10.0

Features:

• add Promise support to $nextTick
• add x-mask plugin

Fixes

• fix link in error message

v3.10.1

• fix Safari x-mask bug that causes focus trap #2852

v3.10.2

Features

• add x-mask:dynamic instead of :function

Fixes

• fix x-mask with x-model

Adopter Reactions

JQuery🔫 Alpinejs

— Ahmed Nagi | Web developer (@nagiworks) April 22, 2022