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.