Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
April 9, 2021

Alpine.js Weekly #56

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

Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.