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
$parentmagic 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:
$watchmemory 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