Jan. 7, 2022, 7:30 p.m.

Alpine.js Weekly #81

Alpine.js Weekly

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-collapse flickering
  • 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

You just read issue #81 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.