Alpine.js Weekly - Alpine.js Weekly #63

Tips

Thank you Afonso Cerejeira for this great introduction to Htmx, alpine.js and hotwire.
You might not need a frontend framework#DjangoCon #djangoconeurope #sketchnote

— Sara (@aspigirlcodes) June 3, 2021

This newsletter supported by my GitHub Sponsors.

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:

• wickedtemplates.com is built with Alpine.js for eg. wiring up the Netlify function for Gumroad coupons. By @g_perales.
• digital-science.com is built with WordPress + Gutenberg, using TailwindCSS, AlpineJS, TimberWP and ACF (the TATA stack), by @anu
• builtwithdjango.com is built with Tailwind, Alpine and Stimulus. By @builtwithdjango.

Demos:

• updated popup men example with close on escape and transition animations by @brbcoding
• an FAQ section using Alpine.js by @HeyNikhila
• work in progress: a page builder for Magento 2/Hyva built on GrapesJS, Tailwind and Alpine by @edwinbos1

Articles & Tutorials

Full-Text Search with Minisearch and Alpine.js by @skybluetrades

[Video] Responsive Side Navigation with Tailwind CSS and Alpine JS by @shrutibalasa

Toggle 🌒 dark and 🔆 sunny mode using AlpineJS, and TailwindCSS by @onerinas

How to create a toast notification with Alpine.js by @dwberri

For more posts like these, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.

Adopter Reactions

Working on an old bootstrap 3.x site and need to add tabs. So much simpler to use Alpine JS and easily style how I want vs copying bootstrap code and then fighting their default styles. #alpineJs

— Sean Smith (@CS_sean) June 3, 2021

Just discovered @Alpine_JS. Incredible! It’s like React’s state management and Tailwind’s HTML-only philosophy had a baby and it’s beautiful.

— Kai Malcolm (@kai_malcolm) June 2, 2021

Just discovered @Alpine_JS And Holy Smokes

— Hasbullah Magomedov (@saniyusuf) June 2, 2021

Let’s talk about a recent tool in my toolbelt: AlpineJS

✅ it’s like jQuery with Vue-like syntax
✅ It’s very light wieght little library for making a reactive DOM with no (virtual DOM) frameworks.

👉 https://t.co/BQec07ZpBw

— Chris⚡Codes🤘 (@ChrisArter) June 2, 2021