Alpine.js Weekly #81
Happy 2022 to the Alpine.js Community!
Tips
I ♥️ how easy @Alpine_JS makes it to ~Do The Right Thing~:
• got a script only needed for the footer? Lazy load it with x-intersect & muicss/loadjs
• something could benefit from aria-describedby? Use $id
• made a flyout menu? Use Trap
• want to save user state? Use Persist— Phil Wolstenholme (@philw_) December 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:
- joeyfarruggio.com by @Joey_Farruggio is build with Eleventy, Alpine, Tailwind and Netlify
- code.benco.io/midi-toolkit/ by @BenCodeGeek is built with Alpine.js and HTML - see the repo github.com/benc-uk/midi-toolkit
- tommountain.dev/countdown is built with Alpine.js, Laravel and Tailwind by @tommountain_
- pcdparts.co.uk is built with Alpine, Tailwind, CraftCMS/Craft Commerce, the new @PCDparts website by @amascicreative via @terry_upton
Demos:
- Date Range Picker with Tailwind and Alpine JS by geechartier via @TwComponents
- dynamic list with API call in 20 lines of Alpine.js by @BenCodeGeek
- Alpine.js dropdown menu by @ZStalevski
- Alpine.js for designers - a codepen collection of demos by @androsfenollosa
This newsletter supported by my GitHub Sponsors.
Articles & Tutorials
How to Implement Select2 with Alpinejs & Laravel Livewire 2 by @tamaandrean1
[Video] Laravel HTTP Client + Alpine.js: External Weather API Demo by @DailyLaravel
[Video] Wrapping Signature Pad and storing base-64 with Alpine.js and Laravel Livewire via @DailyLaravel
[Video] Avoid Livewire Server Requests: Use Alpine.js Where Suitable by @PovilasKorop
Building an AJAX form with Alpine.js by @T5Trampoline
Advanced Alpine.js, Part I: The Story So Far by @timgthomas
Advanced Alpine.js, Part II: Moving Beyond HTML by @timgthomas
My 2022 Programming Stack by @brbcoding
[Video] Alpine JS Tutorial | Build a Markdown Previewer | Free Code Camp by @GreggFine
[Video] Introducción a AlpineJS @Nisa6Delgado via @DevTeam504
Alpine.js - First impressions of a new javascript framework by @tripdog
Code & Tools
github.com/willvincent/11-TEA - An 11ty starter with Tailwind 3, AlpineJS 3 by @willvincent
v3.7.1
Features
- deep
$watch
Fixes
x-collapseflickering- Firefox: Avoid warning "Unknown property 'null'
Adopter Reactions
Just replaced morphdom with the @Alpine_JS morph plugin to Flask-Meld and it not only worked, but it also fixed a bug. Absolutely floored by this @calebporzio - https://t.co/ARvnQFGUs3
— Michael Abrahamsen (@MikeAbrahamsen) December 15, 2021
.@Alpine_JS and the @tailwindcss CDN are a crazy powerful and fast UI prototyping combination
— cully.sol (@cullymason) December 11, 2021