Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
June 26, 2020

What does open source sustainability look like?

Congratulations to Caleb (@calebporzio for reaching $100k a year in GitHub sponsors contributions. Quite a topical tweet by @getJReviews, thanks for his support in the community.

A few weeks ago I cancelled the automatic renewal of a bunch of unused domain names and re-directed some of those funds to sponsor a few projects and devs on Github @joomla @Alpine_JS @driesvints @ryangjchandler @htmx_org

— JReviews (@getJReviews) June 25, 2020

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

Tips

Pro tip for Alpine.js transitions + Laravel users:

Here’s a little tip for keeping things clean when using @Alpine_JS with #Laravel. Place all of your transition logic in separate partials. It will clean up your components and allow you to build a reusable library of animations.#webdev #css #animation pic.twitter.com/XNoQbf05g3

— Luke Downing (@LukeDowning19) June 19, 2020

And one for the Alpine.js + React crew:

inspired by @tejas tweeting about the costs of using react for static sites earlier, I wanted to try something:

Alpine.js code in JSX works, with a trick pic.twitter.com/OFDFrW4956

Combined with the next.js unstable_runtimeJS option it’s a nice option for minimal interactivity

— Karl Sander (@kall) June 20, 2020

Made with Alpine.js

  • (Coming soon) A lightweight HTTP Client with & for Laravel built with Alpine.js by @LupacescuEuard
  • alpine.brad-v.me, a sandbox to learn more about Alpine.js by @bvorjohan
  • Domain management for Tenancy For Laravel is built with Alpine.js @samuelstancl
  • orbit.love is built with Alpine.js by @Phacks
  • gifs.mlo.io is built with Alpine.js by @mloberg, you can see the source at github.com/mloberg/gifs
  • icecast-status.netlify.app by @iexistin3d is built with Alpine.js
  • a new site by @DominikGeimer with Alpine.js is brewing

Demos:

  • Tabs with AlpineJS and TailwindCSS by @kevinbatdorf
  • Text highlight button group with AlpineJS and TailwindCSS by @kevinbatdorf
  • Vertical scroll indicator with AlpineJS and TailwindCSS by @kevinbatdorf
  • Pin number / OTP module with AlpineJS and TailwindCSS by @kevinbatdorf
  • SVG Loader Animation - Blade + Alpine by @userlastname
  • Accessible Toggle Component with Alpine.js by @MaurizioLepora

Articles & Tutorials

Alpine.js x-for with objects: 4 ways to iterate/loop through JavaScript objects by @hugo__df

Learn Alpine.js by Codecourse has a new x-spread section by @teamcodecourse

Let’s build an ajax form with Alpine.js by @dwberri

(Video) How and When to Extract Component Logic by @laracasts

Tech Stack Philosophy: Lightening The Client by @WillRodRican on when using Livewire and Alpine makes more sense than React and Vue.

For more posts like these, you can join the Alpine.js Handbook Knowledge Base (Paid), it’s a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

github.com/clickfwd/css-prefixer-tailwindui now supports Alpine.js x-transitions (by @getJReviews

github.com/radiocubito/laravel-tall-auth

v2.4.1

A patch version for a regression came out reasonably soon after 2.4.0 was released.

Fixed

  • regression in x-show within x-for directives
Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.