April 9, 2021, 5:45 p.m.

Alpine.js Weekly #56

Alpine.js Weekly

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

pic.twitter.com/VSCBaPx4HX

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

pic.twitter.com/h4ySwBukBF

— 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

You just read issue #56 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.