Alpine.js Weekly - 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:

• v2.2.2
• v2.2.0

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