Alpine.js Devtools Holiday Makeover
Alpine.js devtools versions 0.0.4-0.0.7 have been released within the last week. They includes fixes to the key issues of the devtools: handling page refresh and open/close properly (who knew those things would take months to fix). We got some help from @stephenoldham on the repo to give the Devtools a fresh UI, and squashed a bunch of issues since then (eg. got the size down to 50kb instead of 4MB) 👇 have a look at 0.0.7 if you haven’t used the devtools yet.
This email is supported by Learnetto. Get the full-stack JS bundle for 70% Off (sale ending soon).
Alpine.js devtools version 0.0.7 with improved handling of non-latest Alpine version on page and slow-loading Alpine/race conditions on page refresh
Firefox: https://t.co/KV0fjGWdDK
Chrome: https://t.co/mxm8D9rcNV
Source/report bugs: https://t.co/7jvSA3XFYq pic.twitter.com/qNwlKEkbtC
— Hugo (@hugo__df) November 27, 2020
Tips
@tailwindcss and @Alpine_JS have changed my life. Feels like cheating, but it’s really just increased productivity and tons of fun.
— Joseph Farruggio (@Joey_Farruggio) November 27, 2020
Reached that stage when I came back to a project to implement a new feature and said: “Heck!! I don’t have @Alpine_JS on this one?!”
— Mauricio Etcheverry (@maurietchev) November 26, 2020
Also, jsDelivr tells me that there are more than 50,000 hits for v0.6.x of Spruce. If you haven’t already, upgrade to v2.x for some lovely upgrades! ❤️ https://t.co/oWsOUMcfhE
— Ryan Chandler (@ryangjchandler) November 24, 2020
I needed a simple toggle. I tried to do it with jQuery for 3 minutes and then I used @Alpine_JS. It took me 30 seconds! 🚀
Thx @calebporzio, alpine is so cooool! 👍
— Aurelien MOOS 👨🔧 (@AurelienMoos) November 24, 2020
Super interesting situation, turns out you can override @Alpine_JS magic properties.
Here’s an example instrumenting `$dispatch` (if this keeps working, we’ll be able to intercept all `$dispatch`-ed events for you to inspect in Alpine devtools)https://t.co/1aBYrl33dr
— Hugo (@hugo__df) November 23, 2020
TailwindCSS v2.0 + Alpine.js + Phoenix Framework (incl. LiveView) ❤️
A solid combination so far 😃👌
It’s a good time to build new things with software!
💡👷🌱
— Lukas Ender 💡👷♂️🌱 (@lukasender) November 21, 2020
@LaravelLivewire together with @Alpine_JS and @tailwindcss is just pure magic. 😍✨I cannot get enough of this combination, it’s fantastic. Highly recommend. 👍😀 pic.twitter.com/EgoPJ12tY7
— Kim Hallberg (@thinkverse) November 21, 2020
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:
- https://notifyxf.com/ by @jasontxf is built with Alpine, Tailwind, Livewire, Laravel and Laravel Forge
- a little bird called @neilkeena says tha @FundrazerOrg‘s soon to come platform for fundraising is being built with Tailwind, Alpine, Laravel and Livewire
- jobs.jobvite.com by @rockacystudios is built with Alpine (check out the benefits, people and gallery sections at jobs.jobvite.com/ago-review/jobs/)
Demos:
- how to set up a contenteditable div with Alpine by @kevinbatdorf
- override $refs (don’t do this) and make it loopable by @kevinbatdorf
- Sage 10 with anonymous Blade components and AlpineJS simple modal with enter/leave transitions by @withjacoby
- A super simple password strength meter made with Alpine and Tailwind by @raschsebastian
Articles & Tutorials
Not many articles this week but there’s a French Podcast:
Vers une Jamstack légère et performante, avec Nicolas Goutay (@Phacks) by @jamstatic_fr with @Phacks where he discusses why Eleventy and Alpine.js got picked for the OrbitModel site.
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
Spruce by @ryangjchandler v2.2.0 up to v2.2.2 got released with “persisted store” support:
Alpine magic helpers got a $screen helper, see the announcement tweet by @kevinbatdorf:
The Alpine Magic Helpers library for @Alpine_JS just got a `$screen` helper that you can use to match up with your @tailwindcss breakpoints. You can add custom breakpoints or use dynamic breakpoints too. Grab it here: https://t.co/WDzdLwCm7U pic.twitter.com/0BDL1AJJmw
— Kevin Batdorf (@kevinbatdorf) November 23, 2020
ta-foodtrucks.markusantonwolf.com/ - A light-weight plugin to show the next food truck and street food dates in your area based on Tailwind CSS and Alpine JS by @markusantonwolf