April 23, 2021, 5:45 p.m.

Alpine.js Weekly #58

Alpine.js Weekly

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 :

pic.twitter.com/Ex7NHwQc2B

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


vs how you could do it without Tailwind JIT/important

Like so

pic.twitter.com/yOxuVxDZ3o

— 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

You just read issue #58 of Alpine.js Weekly. You can also browse the full archives of this newsletter.

Share on Facebook Share on Twitter Share via email
Brought to you by Buttondown, the easiest way to start and grow your newsletter.