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