🚀 Astro Takeover

Issue #218.August 31, 2023.2 Minute read.
Bytes

Welcome aboard the Astro rocket ship, where the memes are always fresh and the throttle is always stuck on Ludicrous Speed. Might want to buckle up.

Today’s issue has all the goodness from Astro Launch week, plus new ways to (ab)use the platform, a Primeagen thirst trap, and the web that never was.

Welcome to #218 🚀.

Eyeballs logo

The Main Thing

Cartoon wolf with really big eyes

Look at those View Transitions morph and slide!

A new era for Astro?

Astro’s launch week has us feeling like proud parents tearfully filming our child as they walk across the stage at their middle school graduation.

Ok, maybe we’re not “parents,” since we did literally nothing to help create it — but we did write about its first public launch back in June 2021, gave it the OSScar for “Best Performance” in 2022, and we used it to build react.gg and useHooks earlier this year. That has to qualify us to be the inappropriate fun uncles, at least.

But I digress. We’re here to celebrate Astro’s launch week, and how it has 69x’d its weekly npm downloads in the last two years, announced an official hosting partnership with Vercel, and just launched a landmark v3.0 release.

Let’s dive into the highlights:

  • View Transitions API Support — This platform API gives you all the silky smooth transitions of a SPA, without any page refreshes. Just add the ViewTransitions component to any page’s <head> element, and you can easily morph, slide, persist, and fade however you want (see live demo).

  • Image Optimization — The new built-in <Image> component lets you import images from your codebase and place them on the page. From there, the build pipeline automatically detects and optimizes each image for you.

  • Faster rendering perf: Most components now render at least 30% faster than Astro 2.9, thanks to a big refactor to remove unnecessary code and optimize the rest 🙏.

There’s one other new feature I definitely didn’t have on my Astro 3.0 bingo card: a major refactoring of its internal JSX build to support React Fast Refresh and significantly improve HMR overall.

This should make it easier to embed a SPA within your Astro project, and unlock a whole new Astro-tastic experience with three cohesive elements:

  1. A fast, content-driven marketing site for logged-out users
  2. An embedded client-side SPA for logged-in users that’s written in React/Vue/Svelte and optimized for managing lots of state
  3. An optional dynamic server API that powers everything behind the scenes

This might seem like a shocking move, considering that Astro built its rabid passionate fanbase largely by advocating against JS-heavy SPAs.

But Fred & co never argued against all SPAs, they argued against using the more complex, less performant SPA architecture for simple content sites that didn’t need it. To their credit, Astro has always acknowledged that client-side SPAs are often the best way to build true web applications.

And now, Astro 3.0 seems like it could be uniquely positioned to give developers the best of both worlds — a marketing site that stays simple and fast (with as little JS as possible), and a web app that has all of the power of a SPA for long-lived sessions, which won’t negatively affect the performance of logged out users.

Bottom Line: With a release like this, the Astro hype train rocket probably won’t be slowing down anytime soon. So we have to cherish moments like this while we have them, because your kids always grow up way too fast 🥹.

        
Imagine Engine logo

Our Friends
(With Benefits)

Pixelated image of Dave Chapelle saying, Y'all got any more of those pixels?

When your images won't load on Android

ImageEngine can give you 80% lighter images

Tired of wrestling with site performance because your images are too big and slow? Of course you are.

That’s where ImageEngine can help. Their image CDN leverages mobile device detection to deliver images with the highest visual quality and lowest possible byte size for every device. Here’s what that gets you:

Optimized Performance — By adapting your images to every visitor’s device, browser, and network conditions, ImageEngine can help drive faster loading times, reduced bounce rates, and a better UX.

Easy Integration — Setting up the CDN is as simple as changing a DNS setting.

Improved SEO — Faster load times boost SEO performance, which helps drive more organic traffic.

Try it free for 30 days.

Spot the Bug logo

Spot the Bug

Sponsored by Secureframe

Getting SOC 2 compliant doesn’t have to be painful. Check out Secureframe’s free personalized demo to see how they can help you do it in just a few weeks.

Criteria:

  1. Sort the array in numerical order
  2. If the array has an even number of elements, return the average of the two middle elements
  3. If the array has an odd number of elements, return the middle element
function getMiddleValue(arr) {
  arr.sort((a, b) => a - b);

  if (arr.length % 2 === 0) {
    const mid1 = arr[arr.length / 2 - 1];
    const mid2 = arr[arr.length / 2];
    return (mid1 + mid2) / 2;
  } else {
    return arr[Math.floor(arr.length / 2) - 1];
  }
}

const numbers1 = [5, 3, 8, 4, 2];
const numbers2 = [40, 20, 60, 80, 50, 30];

console.log(getMiddleValue(numbers1)); // 4
console.log(getMiddleValue(numbers2)); // 45
Cool Bits logo

Ben's Bits

Well I guess they gave the president of whiteboards control over the links this week. You could say I’m… a bit nervous.

  1. Game dev and Ryan “not-that-Ryan-F” Fleury shows how Factorio taught him debugging best practices. To confirm: Factorio is a puzzle game, not another .io domain that’s one $10k/yr fee from shutting down forever.

  2. Still using spreadsheets and email for website feedback? Might be time to switch to BugHerd to better manage web projects. It automatically provides a screenshot, along with the user’s browser, and OS, so you can pinpoint issues and resolve bugs fast. [sponsored]

  3. ShreddedNerd (not a Primeagen thirst trap, I swear) breaks down Why Doom is Awesome from a map design perspective. While Carmack worked on KBs of RAM, you just downloaded a MB of images for this stinking newsletter.

  4. Max Levchin took a break from doing billionaire things to write about how the least secure password saved PayPal from collapsing. I’ll give you a hint: it’s not buttword.

  5. Dylan Beattie enters the Twilight Zone with this talk on The Web that Never Was. According to him, we were one flap-of-a-butterfly’s-wings away from Lisp in the browser. Imagine that… wait what do you mean someone made Lisp in the browser?

  6. Casey Muratori and ThePrimeagen (oh wait is this a thirst trap?) talk about how clean code = bad performance. Not safe for child viewing, because they’ll never clean their room again if they watch this.

  7. Jon Jensen teaches us to (Ab)use the platform with a progressively enhanced synth. When I said I’m into prog rock, this isn’t what I meant.

  8. Unlayer Embed is a drag-and-drop email editor and page builder for your SaaS application that’s easy to embed and guaranteed to save you weeks of dev time. [sponsored]

  9. Robin Rendle gave us a new TLA when they coined VDD as Vibe Driven Development. I don’t know about you, but anyone who says analytics don’t matter passes my vibe check.

  10. Jake Archibald built a spring-y CSS generator using the linear() function, and I built the internet’s squooshiest button with it. I almost used “whiteboard guy tries” in the title, but I think that’s off-limits now. Probably for the best.

Spot the Bug logo

Spot the Bug: Solution

Sponsored by Secureframe

This is a classic example of an off by one error. Let’s step through the logic:

  1. numbers1 gets sorted to be [2, 3, 4, 5, 8] (an odd number of elements)
  2. To get the middle element we need to divide the length of the array by 2 (5 / 2 = 2.5)
  3. Since 2.5 is not a valid index, we need to round down to the nearest whole number, 2
  4. However subtracting 1 gives us the second element in the array, 3, instead of the middle element, 4

The Math.floor effectively did the same thing as subtracting 1, so removing it fixes the bug.

function getMiddleValue(arr) {
  arr.sort((a, b) => a - b);

  if (arr.length % 2 === 0) {
    const mid1 = arr[arr.length / 2 - 1];
    const mid2 = arr[arr.length / 2];
    return (mid1 + mid2) / 2;
  } else {
    return arr[Math.floor(arr.length / 2)]; // remove -1
  }
}

const numbers1 = [5, 3, 8, 4, 2];
const numbers2 = [40, 20, 60, 80, 50, 30];

console.log(getMiddleValue(numbers1)); // 4
console.log(getMiddleValue(numbers2)); // 45
one question interview logo

One Question Interview

What will building for the web look like in four years?

“I hate to give a cliche “AI WILL CHANGE EVERYTHING!!!” answer but, well, here I am. Tools like Copilot and Code Llama will continue to evolve and get more powerful, and we’ll begin to explore new ways to interact with these tools (please, stop building chat interfaces, I beg you!). I imagine a future where open source contributors can get a personalized guided walk-through of the codebase before they start work on a new bug fix, just based off of the reported issue description and stack trace. Or, on the opposite end, an AI agent that can submit small cleanup and refactoring Pull Requests to your codebase unprompted, ready-to-merge. Don’t like the change? Just close the PR and the bot will be back tomorrow with another one for you to review. The possibilities here will be endless once the underlying AI technology catches up with our imagination.”

– Fred, Astro Co-Creator