Lights, Camera, Astro Actions

Today’s issue: Deno is (probably) subtweeting your OSS project, Sir Mix-a-Lot likes huge icons, and I’m worrying about Jojo Siwa the future of CSS.

Welcome to #288.

---

Lights, Camera, Astro Actions

If there’s one thing I learned from rewatching every M. Night Shyamalan movie last weekend (don’t ask), it’s that great filmmakers understand the power of a good twist.

And that’s what Astro gave us last week, when they released v4.8 with a surprise preview of Astro Actions – a long-requested feature that makes it easy to define and call back-end functions from your client code (with full type safety).

Here’s a quick TLDR on how to use it:

• Declare all your actions in a global actions handler

• Define an action using the defineAction()

• Call actions from any client component using the actions object from astro:actions

This approach seems to track pretty closely with how actions work in other frameworks like Remix and SvelteKit, and it provides some powerful benefits beyond the obvious ones. For example, you no longer need boilerplate to safely parse the request body based on the Content-Type or to retrieve form data values from the request body.

Bottom Line: The Actions RFC mentions how the new Astro database platform has been “propelling the Astro community from static content to more dynamic use cases, like counters and comment widgets.” So it makes perfect sense, from both a business perspective and a DX perspective, for Astro to invest in making backend functions simple.

---

A free deep dive on caching in

Wtf is a cache, really?

If your first thought was, “It makes things faster or something,” then you might want to check out this in-depth blog post from Convex CEO, Jamie Turner.

In it, he defines a cache as “a non-authoritative representation of data maintained for performance.” But he doesn’t just leave you hanging with a bunch of buzzwords.

He breaks down what each of those terms actually teach us about caching, and gives you 3 key takeaways on how to approach caching for your next project.

Check it out. It’s one of the best articles about caching we’ve ever read.

---

const car = {
  name: 'Tesla',
  startEngine() {
    console.log(`The ${this.name} engine is starting...`);
  },
  delayedStart() {
    setTimeout(this.startEngine, 1000);
  }
};

car.delayedStart();

---

1. The Deno team wrote about How to document your JavaScript package. I don’t think they’re subtweeting your OSS project specifically, but they’re not not subtweeting it.

2. Socket for GitHub is an interesting approach to protecting your PRs from sketchy dependencies. Just install the GitHub app, select the repos you want to protect, and boom – Socket will automatically analyze your projects and keep them secure. [sponsored]

3. Hugeicons is an open-source React icon library with 3,800+ free, customizable stroke icons. I like huge icons and I cannot lie.

4. Safari 17.5 with a bunch of new CSS features like text-wrap: balance, the light-dark() color function, and queries for importing CSS.

5. Sentry and Supabase are hosting a livestream this Thursday on How to find slow queries and errors in your database. They’ll demo how to connect a Next.js app to Supabase and how to integrate Sentry to improve your DB’s performance and scale. [sponsored]

6. Andy Bell wrote about how he’s worried about the tabbing behaviour, rather than the syntax and name of CSS masonry. Well Andy, I’m worried about Jojo Siwa, so I guess we both have our problems.

7. Matias Gonzales wrote a visual article called Shipping Ship, which gives a behind-the-scenes look at how his team built the particle shader effect for the Vercel Ship conference site.

8. Callstack is hosting three hands-on workshops for advanced React and React Native developers, covering React Native Performance, React Server Components and Actions, and Advanced Testing Strategies. [sponsored]

9. Phoenix LiveView 1.0-rc just came out, 6 years after its first commit.

10. Molly White wrote about how We can have a different web. I can’t remember if this was the exact same name as one of Obama’s campaign speeches – but I was chanting, “Yes we can,” as I read this blog post at 2 am in between watching Signs and The Visit.

---

const car = {
  name: 'Tesla',
  startEngine() {
    console.log(`The ${this.name} engine is starting...`);
  },
  delayedStart() {
    setTimeout(this.startEngine, 1000);
  }
};

car.delayedStart();

The bug has to do with our invocation of startEngine. Because we’re passing this.startEngine as an argument to setTimeout, we’re not the ones invoking it. That means it’s not going to get invoked with the correct context (this). We can fix this in two ways – either using .bind (🙃) or invoking the function ourself like this.

const car = {
  name: 'Tesla',
  startEngine() {
    console.log(`The ${this.name} engine is starting...`);
  },
  delayedStart() {
    setTimeout(() => this.startEngine(), 1000);
  }
};

If you’d like a longer explanation, we break it down in Understanding the “this” keyword, call, apply, and bind in JavaScript.