June 19, 2020

Alpine.js 2.4.0 with x-spread support

Go check out Caleb at JSNation Live demo-ing Alpine.js

I'll be giving a talk on @Alpine_JS today at @thejsnation at 11:40 AM EST

It'll be a quick 20 minutes. If you care you can watch it on YouTube Live: https://t.co/QR1yf9W9NR

(It's free)

— Caleb Porzio (@calebporzio) June 19, 2020

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

Tips

Finally figured it out. @LaravelLivewire + @Alpine_JS + @vuejs happy together. 🥰

Just load dependencies in this order 💪 pic.twitter.com/O1pHMvqVzD

— Andrés Santibáñez (@asantibanez) June 16, 2020

Made with Alpine.js & Demos

• baraveli-delivery.netlify.app by @baravelidev
• Show / Hide Password by @mr_alaraj
• manyrequests.com by @gabolecointere is now built with by Alpine.js
• Toggle on mouse enter/leave using Tailwind and Alpine by @CuanJan
• Alpine.js + Spruce URL Query Params by @chapmanjacobd
• "As you type" search by @alexjgarrett
• musicpracticetools.net by @SteveALee is built with Alpine.js & Eleventy
• Navbar with animation by @Alfianokt
• A credit card input for Stripe by @afelixdorn
• AlpineJS modal with data from JSONPlaceholder by @jonwelshdesigns
• Fetch and seed a select component with Alpine.js by @Tiago_Ferat
• A countdown timer with Blade UI kit (powered by Alpine.js) by @driesvints
• Buttons with loading feedback in Alpine.js and Tailwind by @userlastname
• Toast Notifications - Alpine JS by Kevin Batdorf
• Slider protoype by Kevin Batdorf

Articles & Tutorials

[Video] Realtime Private Messages with Laravel Livewire (Paid) by @teamcodecourse

Adding Quill Editor to a Livewire-Alpine.js App by @eduarguzher

Tutorial: Responsive Navigation with AlpineJS and TailwindCS by @WillRodRican

Tailwindcss dropdown with the use of Alpine.js by @Larapeakdev

[Video] Alpine.js Essentials - Laracasts by @jeffrey_way

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

ridgecss - A maximalist css framework for making web apps fast by @swlkr

v2.4.0

A big release this week.

Features:

• x-spread directive (Allows you to bind an element to an object of Alpine directives and they will be "applied" (similar to x-bind="{}" in Vue)), see the x-spread docs
• if one Alpine component on a page breaks, the others still work
• access to $el from an x-data expression
• support for animations in x-transition directives
• x-model.number is now supported for checkbox arrays

Fixes:

• $nextTick now waits until a transition is completely started (an extra tick) until being called
• attributes are only set when needed in Alpine, (this was causing issues like pausing audio elements)
• when transitions are toggled quickly, overlapping transitions are supported (the previous transition is finished first before the next one is applied)
• allow nested components to be moved around the DOM and not be re-initialized
• Checkboxes were being checked by default if a value binding was present
• Expressions that use a "result" variable were running into a conflict with Alpine's built-in result variable