Use "await" inside of Alpine.js event handlers

Last week, Alpine.js 2.6.0 landed with a couple of bug fixes and support for “await” inside of event handlers

🔥just landed in Alpine.js 2.6.0

Use “await” inside of event handler bindings

— Hugo (@hugo__df) August 14, 2020

@kevinbatdorf is creating shareable Alpine.js helpers for you, go check it out on GitHub https://github.com/KevinBatdorf/alpine-magic-helpers

Going to work on adding a bunch of helper methods to use with @Alpine_JS. Currently I only have 3 setup ($fetch, $interval, and $truncate) but will add more over time. Let me know if you have some suggestions for other helps you’d like! https://github.com/KevinBatdorf/alpine-magic-helpers

— Kevin Batdorf (@kevinbatdorf) August 16, 2020

He’s even got something working for accessing data from parent components in nested components using $parent.

Working on a magic helper for @Alpine_JS to simplify reactively accessing parent component data (or any other component). Here’s the PR if anyone has feedback: https://t.co/ZLuLxAHyWS

The syntax would be intuitive as this:

— Kevin Batdorf (@kevinbatdorf) August 18, 2020

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

Tips

Getting mixed results from your CSS breakpoints and JavaScript’s width() methods? 🤔

You can use media queries in JavaScript as well! Works excellent with @Alpine_JS and @tailwindcss 🔥

MDN docs: https://t.co/gBtSGbWMCp pic.twitter.com/GWwrxkFwmo

— Pascal Baljet (@pascalbaljet) August 19, 2020

Some people might not know that $watch supports nested object/array properties using dot-notation.

🔥@Alpine_JS tip

You can watch deep/nested array/object properties using dot notation, thanks @jeffrey_way for asking 😬

eg. “$watch(‘array.0.msg’, (val) => {})” or “$watch(‘https://t.co/sPyeD7QSRl.value’, val => console.log(val))”pic.twitter.com/UL5YYOGC4x

— Hugo (@hugo__df) August 20, 2020

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:

This is starting to look good. Replicating @laravelphp docs with @Alpine_JS @tailwindcss. Supporting Markdown too. by @bladedocs

Blade Docs will not care how you navigate through your docs. Each button in the navigation will have custom event dispatched by @Alpine_JS that will let you decide what you want to do. by @bladedocs

Beginnings. @Alpine_JS @tailwindcss @laravelphp by @bladedocs

• https://www.camya.com/simple-header-payload-browser-extension/ is built with Alpine.js, thanks to @leobm for sharing.

Alpine Appreciation

Over about 4 days, I built a fully functional, interactive, responsive web app that looks and feels like a complex single page application

Not one single line of custom javascript

I freaking love the TALL stack so much 💪@tailwindcss @Alpine_JS @LaravelLivewire @laravelphp

— Jordan Hoff (@jordanthoff) August 17, 2020

Turbolinks, TailwindCSS, AlpineJS, Laravel and Livewire - TTALL stack but just playing with alpine for hover cards 🙃 #laravel #tailwindcss #alpinejs #livewire pic.twitter.com/b0jyPecfvJ

— Carl Brand (@_carlbrand) August 20, 2020

Used @Alpine_JS for the first time this week. It’s absolutely perfect for adding a bit of interactivity to a single page. Especially when working within a CMS that exposes little more than a “content box” for HTML.

— Chris Berry (@Chris_Berry) August 20, 2020

Can we take a moment to say thanks for Alpine.js and TailwindCSS? These are both such a joy to use, especially together. I didn’t know making web apps could be this fun! 🙌👏❤️ Simplicity and yet tons of power! 👏 #alpinejs #laravel #tailwind #php

— Hendrik Bonthuys (@HBonthuys) August 20, 2020

After a couple of small projects (one personal and one Pro Bono) I’m extremely happy with the static-first + #serverless approach that @eleven_ty plus @Netlify provides. One needs little frontend code and for the other @Alpine_JS is prefect. DevOps is a happy place again.

— Steve Lee (@SteveALee) August 16, 2020

For more articles and tutorials, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

@_braindev is looking for some help with an Alpine.js/Livewire project.

https://github.com/blade-ui-kit/awesome-tall-stack is an awesome list for the TALL stack by @driesvints

https://github.com/KevinBatdorf/alpine-magic-helpers - A set of magic helpers to use with AlpineJS by @kevinbatdorf.