Aug. 21, 2020, 5:30 p.m.

Use "await" inside of Alpine.js event handlers

Alpine.js Weekly

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

pic.twitter.com/DU8sPdYa3M

— 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: pic.twitter.com/lFzQHzFxkY

— 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.

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