Alpine.js Weekly - Alpine.js Weekly #56

I’ve got my CSS-in-JS solution for @Alpine_JS sorted 👀🤣

— James Browne (@onejamesbrowne) April 1, 2021

This newsletter supported by my GitHub Sponsors.

Magic Helpers for @Alpine_JS is just shy of 2M hits a month! The two most popular helpers being $​component, to sync and communicate between two components, and $​screen, to hide/show based on screen size (think Tailwind’s md: or lg: variants)https://t.co/WDzdLwTXwu pic.twitter.com/qFL0BaFOqe

— Kevin Batdorf (@kevinbatdorf) April 1, 2021

Tips

You can fire a Livewire Event from Component and perform an Action by listening to it in your View using @Alpine_JS

You can also do the same thing by Dispatching a Browser Event from Livewire Component.

Below are equivalent. Which one you prefer?

— The Laravel Dev (@TheLaravelDev) April 1, 2021

Laravel Livewire tip: Doing conditional dropdowns with Select2

Just listen for an event and destroy/reinitialize select2 using Alpine.js pic.twitter.com/XmSLZ2OBxz

— Mackensie Alvarez (@greymattermack) March 26, 2021

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:

• totaljobs.com/advice/career-advice is built with Alpine for header and footer menus and account sign in.
• github-author.astrotomic.info by @devgummibeer is built with Alpine
• interneto-sprint-04.web.app was built by @galtashma on a livestream using Alpine
• collapsology.info by @jeromecoupe is built with Alpine, Eleventy and Netlify functions for the scientific publications database
• securib.ee/404.html by @securibee random bee facts on the 404 page are powered by Alpine.

Demos:

• a Page Builder webapp with Tailwind CSS and Alpine by @bennash
• Price page with Tailwind and Alpine by @ak_kamona
• autofocus a modal on open by @reusserdesign
• jQuery toggleSlide clone with Alpine.js and Tailwind by @DanekKalivoda
• a simple contact form in Alpine and Livewire by @brbcoding
• a custom quote multi-step form validated with iodine.js with Alpine and Tailwind by @Joey_Farruggio
• Star rating with labels in Alpine.js with click again to clear by @rehhouari
• A Stripe tabs clone with Tailwind and Alpine by @LarsKlopstra

Articles & Tutorials

Autocomplete Search with Phoenix LiveView and AlpineJS by @karlosmid

[Video] Livewire + Alpine.js: Disappearing Success Message by @DailyLaravel

AlpineJS – JavaScript solution in Hyvä Themes by @hatimeria

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.

Code & Tools

ta-youtube.markusantonwolf.com is a Youtube Embed using Alpine and Tailwind.

tom-select.js.org thanks to Chris in Discord for sharing ‘An alternative to Select2 that doesn’t use jQuery’

github.com/pixney/alpinejs-scroll-x is a horizontal css scroller component using Alpine by @HelloPixney.

Jobs

⚡️ The @TrendyMinds team is hiring! If you’re a developer who loves collaborating with others, learning new things, and teaching others we want to hear from you!

You’ll work with great tools like @CraftCMS, @tailwindcss, @Alpine_JS and much, much more! https://t.co/5zXRmzodch pic.twitter.com/j3QUDTlQz7

— Aaron Bushnell (@aaronbushnell) April 5, 2021

Adopter Reactions

@calebporzio did a great job with alpinejs. I’ve spent some time working with it and for sure I will use it in any projects where I’m using jquery.

I’ve used jquery + handlebars in the past but @Alpine_JS is the new sheriff in the town.

— Dan Nicovski🐝 (@Nichovski) March 27, 2021