Tips
Got to love how easy it is to make basic html interactive and animated with Alpine.js :)
x-collapsetakes care of all the magic here! https://t.co/UzTV2lVToy
— Dennis van Dalen @ 🇲🇽 (@dennisvdalen) March 21, 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:
- fffuel.co/pppalette, a color palette generator, built using Alpine.js by @ffffffuel
- moneyglance.herokuapp.com, a simple app to write down earnings and expenses of the month with Laravel, Livewire, Alpine and Tailwind by @dnlgrz91
- voguetyre.com is made with Laravel, Livewire, Alpine and Tailwind by @divtag_it
- itwillcost.me, a tool built to calculate future potential return on investment using Alpine.js by @AbdelElrafa
- kandji.io/?aa a Kandji website, built with Eleventy, Alpine, Tailwind and hosted on Netlify by @ItsMeAra
Demos: -Show Hide Input Password Field with Alpine.js by @extralam - Simple Website(TailwindCSS + AlpineJS) by @naveenkharwar21 - Alpine.js + Swap View in Login and Sign up page by @extralam - Umbraco UUI Library Example in Alpine.js by @warrenbuckley, Warren’s interested in feedback if anyone has some.
This newsletter supported by my GitHub Sponsors.
Articles & Tutorials
Building a carousel component with TailwindCSS and Alpine.js by @MaciejJanowski
Alpine.js Brings JavaScript Interactivity without Complexity to HTML on @thenewstack by @rwwmike
Bootstrap Toggle clone with Tailwind CSS and Alpine by @wimdeblauwe
Code & Tools
@_marcreichel published a alpine-timeago - a simple Alpine.js plugin to display the human-readable distance between a date and now, github.com/marcreichel/alpine-timeago