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.