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! 💯
— 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