Alpine.js Weekly #69
Alpine plugins are dropping, keep an eye on Caleb Porzio's announcements.
🥳 New Alpine Plugin: Persist 🍾
Easily persist data across page loads by using a nifty little decorator function: $persist()
Think data-table filters, currently active tab, preserving a user's decision to hide a notification, etc.
Dig it: https://alpinejs.dev/plugins/persist
— Caleb Porzio (@calebporzio) July 22, 2021
🚀🚀 New Alpine plugin drop today: Intersect 🎉🎉
A simple, declarative way to trigger some JS when an element enters the viewport (scroll-triggered animations, etc...)
Oh, also it (currently) weighs only 311 bytes!
Check it oooouuuut: https://alpinejs.dev/plugins/intersect
— Caleb Porzio (@calebporzio) July 12, 2021
This newsletter supported by my GitHub Sponsors.
Tips
I guess It’s not possible to use the new $persist inside https://t.co/8gGUmnPSOL, I did something like this
pic.twitter.com/Tr799FdCEj #alpinejs #alpine #persist
— Giorgio Pogliani (@giorgiopogliani) July 23, 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:
- www.albarella.it is a touristic website and has been fully redesigned with TailwindCSS + AlpineJS over Wordpress with Root's Sage by @mktgarena
- colorsandfonts.com by @mike_andreuzza & @g_perales are built using Tailwind CSS and Alpine.js.
- listennotes.com has recently migrated from Bootstrap and jQuery to Tailwind and Alpine over 3 months by @ListenNotes
- kevinsmith.github.io/cash-flow-forecast/ by @_KevinSmith is a simple, fully self-contained single page app with Tailwind and Alpine.js.
Demos:
- dynamic progress bar with Alpine by @yacobee
- Simple hero section with Tailwind and Alpine by @ak_kamona
- Circular progress bar with Tailwind and Alpine by @ak_kamona
- Coming soon to Peak for Statamic, a cookie consent banner by @studio1902
Articles & Tutorials
Django, HTMX and Alpine.JS: A Match Made In Heaven by @Guoxiang_Pan
How to Setup User Notifications for your Django App - Part 2 by @AdvantchHQ
Headless WordPress is Overrated: A Case for The Nearly-Headless Web App by @AlexStandiford
Let's Build An Instagram Clone With The PETAL(Phoenix, Elixir, TailwindCSS, AlpineJS, LiveView) Stack by @ElixirLearn
Code & Tools
v3.2.2
Fixes:
- Allow dynamic transition classes
github.com/rehhouari/alpinejs-i18n has been updated to support Alpine v3 by @rehhouari