Alpine.js Weekly - Alpine.js Weekly #84

Tips

The @Alpine_JS Collapse plugin has saved me literal hours of work since it’s release and not enough people are using it. If you’re building accordions, dropdown menus or mobile navigation menus, take it for a spin! https://alpinejs.dev/plugins/collapse

— Ryan Chandler (@ryangjchandler) February 24, 2022

Alpine JS and React developers tip. Never use invalid self-closing elements in Alpine JS ie:

<div x-text="msg" />

would raise cryptic and hard to debug errors.

— Bojan Mihelac (@bmihelac) February 16, 2022

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:

• musicbydarcy.com/pages/portfolio by @darcyvoutt is built with Alpine
• fffuel.co/mmmotif and fffuel.co/cccolor, are built using Alpine.js by @ffffffuel
• cartboss.io is built with Alpine
• erichaacht.com, portfolio site for South West painter Eric Haacht. Designed by @intercitystudio. Built with CraftCMS, Alpine and Tailwind by @williamhibberd
• seps.gr - Association of Greek Psychologists is built with Wordpress + Tailwind and Alpine by @low_developer
• heimatkino.de a local cinema website is built with Alpine by @jasonens
• blacktre.es is built with Alpine and Tailwind by @weareblacktrees

Demos:

• Timer which displayed time similar to the format of Carbon::diffForHumans in Alpine.js by @TheLaravelDev
• www.hyperjs.dev/ has multiple examples of Alpine.js functionality by @itsmarkmead
• Alpine.js “tetris” attempt by @magicroundabout
• Alpine.js GSAP animated todo app by @tylerlwsmith
• Alpine.js + Bootstrap: drag and drop with add/delete by @lisa_gaud

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

Laravel and Alpinejs : Creating List Data and Modal with Data Based on Index by @musliadidottech

Creating a modal dialog with Alpine.js by @MathieuPiton

Disabling submit button on browser validation failures by @datsfranktastic

[Video] Django, HTMX and Alpine.js - Building an Accordion component by @bugbytesio

[Video] Create Simple Search Functionality With Up and Down Keys Support Using Alpine.js by @Laratips1

I have released a neat little Alpine.js plugin for autosizing textareas. marcreichel.dev/blog/alpinejs-… #Alpinejs #Plugin #Autosize by @_marcreichel

Code & Tools

New community plugins:

• github.com/ryangjchandler/alpine-parent - “Access parent components using a handy $parent magic variable.” by @ryangjchandler
• github.com/marcreichel/alpine-autosize - “A little Alpine.js plugin to automatically resize a textarea to fit its content.” by @_marcreichel
• github.com/ryangjchandler/alpine-mask - “A clean integration between Cleave.js and Alpine.” by @ryangjchandler
• github.com/markmead/alpinejs-sticky by @itsmarkmead

v3.9.1

Fixes:

• $watch memory leak issue
• Focus trap doesn’t release focus when the element is removed from the dom
• morphdom sibling cleanup bug
• Removed non breaking space
• failing tests - account for the morph function now returning a promise

Adopter Reactions

Discovered @Alpine_JS through an 11ty tutorial. It’s dope. It is very much “jQuery but for the modern web” in all the best ways.

— Charles (@charlesw_dev) February 24, 2022