Alpine.js Weekly - Alpine.js Weekly #58

Caleb’s setting up an Alpine Day, there’s a mailing list you can join.

🥳 Alpine Day 2021 is now a real thing.

One day packed full of new launches and cool speakers. Gonna be a hoot! 🦉https://alpineday.com

— Caleb Porzio (@calebporzio) April 21, 2021

Alpine.js devtools 1.0.1 is out

Fixes a devtools panel crash when one of the page’s Alpine components crashes. Updates to build dependencies (including Tailwind)

Chrome (pending review): https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk

Firefox: https://addons.mozilla.org/firefox/addon/alpinejs-devtools/

Release: https://github.com/alpine-collective/alpinejs-devtools/releases/v1.0.1

— Hugo (@hugo__df) April 19, 2021

This newsletter supported by my GitHub Sponsors.

Tips

With Tailwind JIT, we’ve got some interesting new things we can do with

🔥 #webdev / #tailwindcss tip:

I found a little nugget in the new @tailwindcss JIT compiler: Adding important to a class via the Important modifier!*

Link to the docs: https://t.co/xnEg406ihq

Here’s how I used it with @Alpine_JS :

— David A. Lindahl (@austriker27) April 16, 2021

vs how you could do it without Tailwind JIT/important

Like so

— Jack Whiting (@jackabox) April 16, 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:

• questionsfromthecloset.com is built with Tailwind and Alpine.js, and is hosted on Netlify, by @richcorbs
• bohemicastudio.com is built with Alpine, Spruce, Tailwind CSS, Navigo, Anime.js, Eleventy & many other open-source libraries. It ended up as a pure JavaScript single-page-application with custom i18n functionality. By @BohemicaStudio, repo is at https://github.com/bohemicastudio/bohemica-studio-website

Demos:

• Dashboard template (should be open-sourced soon) by @ak_kamona
• Check Blend Mode, Gradient Overlay and Object Fit on HTML5 Video nice Alpine + Tailwind prototype by @klickreflex

Articles & Tutorials

Global Modals with Livewire and Alpine.js by @teamcodecourse

[Video Playlist] Twitter Bot With Fastify, AlpineJS, TailwindUI, and HandlebarsJS by @wolfejw86

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

Interesting project by @rehhouari: github.com/rehhouari/alpine-router, a router for Alpine.js. Has a pretty clean API as well.

Adopter Reactions

Ok, so I just used @Alpine_JS to add auto-dismiss for toaster notifications on @WayApp_ and it literally took 5s and one line of code… Mind officially blown !! 🤯 Can’t wait to replace all jQuery bits with AlpineJS now 🔥

— Jonathan TRAVENS (@jonTravens) April 19, 2021

PETAL stack folks! 📢@lawik @bernheisel @brainlid @VelinaPetrova7

I’ve joined your club and published my first Phoenix app using this wonderful stack! 💯

App:https://t.co/Z7fWfdywjR

Code:https://t.co/cLKG1pcIEP

— Faisal Alghurayri - فيصل الغريري (@FGhurayri) April 19, 2021

My only gripe (and maybe I failed to find a proper solution) is the poor JS code organization if you need to do non-trivial stuff client-side only using Alpine JS.

I have a single giant script living inside the LV’s HTML and hooked to the wrapping div in x-data pic.twitter.com/FhIdxHtS9e

— Faisal Alghurayri - فيصل الغريري (@FGhurayri) April 19, 2021