May 13, 2022, 7:08 p.m.

Alpine.js Weekly #88

Alpine.js Weekly

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

pic.twitter.com/56R2vEONG9

— 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

pic.twitter.com/N5LU8uQ44y

— 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.

You just read issue #88 of Alpine.js Weekly. You can also browse the full archives of this newsletter.

Share on Facebook Share on Twitter Share via email
Brought to you by Buttondown, the easiest way to start and grow your newsletter.