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