Alpine.js Weekly - Alpine.js Weekly #88

Tips

#AlpineJS Tips

Use shorthand conditionals when you want to add a class to the element based on an alpine property using x-bind. #laravel #livewire #TALL

— Tushar Gugnani (@tushar_web) May 9, 2022

#AlpineJS Tips

No need for setting id of the element and accessing it via document.getElementByID

Use x-ref in combination with $refs is for easily accessing DOM elements directly.

See video example of using x-ref in building Stepper component : https://t.co/zqqatNCQXF

— Tushar Gugnani (@tushar_web) May 12, 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:

• www.ohmsense.com.au is built with Alpine.js, Tailwind, Parcel and Fastify
• @OhDearApp‘s status page interactions are built with Alpine.js, see status.flareapp.io status.laravel.com, by @freekmurze
• jacksleight.dev is built with Statamic and Alpine.js by @jacksleight
• www.designerandgeek.com/tailwind-color-gradient-generator is built with Alpine.js and Color.js by @DesignerAndGeek
• betonpas.com is built with Laravel and Alpine by @yacobee

Demos:

• Demo of Alpine.js with GSAP flip to hide/show cards by @MagnusSkare
• Simple Open Graph Image Generator with Alpine and Tailwind by @khatabwedaa

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

Load Disqus Comments on demand by @luna_dxp

This article from 2020 got resurfaced by @mostafakram: Building an Autocomplete/Typeahead Component with AlpineJS and Livewire

Building Table Sorting and Pagination in Alpine.js by @raymondcamden

Signature Pad with Alpine.js by @irfanmm96

Building a metronome: React vs Alpine by @v1ccenzo

Embed JavaScript Widgets as HTML by @Joey_Farruggio

[Video] Coding Shorts: Simple Web Interactivity with Alpine.js by @ShawnWildermuth

Code & Tools

github.com/danharrin/alpine-mousetrap is A simple library for handling keyboard shortcuts with Alpine.js by @danjharrin.