The Metaframework of the Future

Today’s issue: Beyond Meat components in React 19, 100% Turbopack, and how to make your UI more dense than a collapsing neutron star.

Welcome to #291.

---

The Solid.js metaframework of the future

I never wanted to build a dating site for Weird Al Yankovic fans, and Ryan Carniato never wanted to build a metaframework for Solid.js – yet here we both are.

In Ryan’s case, I’m talking about SolidStart 1.0, which just launched on Tuesday and is built on a bold premise: what if your metaframework was a little less meta?

Like most app frameworks, SolidStart still integrates multiple packages to give you full-stack functionality, but it’s all composable. So each piece of the framework can be replaced with a different option of your choosing.

Let’s break down how it works:

• SolidStart is built on top of Vinxi (a Vite+Nitro-based bundler and runtime), the Seroval serializer, and the Solid Router – but you can replace any of these with your own implementation.

• You get all the app framework features like file-based routing, streaming, all the rendering modes, server functions and actions, and API routes – but it never locks you into any specific conventions.

• You can easily deploy to any of the 25+ platforms that Nitro has a preset for, including Cloudflare, Vercel, Deno, and Bun.

Bottom Line: SolidStart claims that their choose-your-own-adventure approach will be “the shape of frameworks to come.” That might sound a little bold, but Solid already has a strong track record of trend-setting in the JavaScript ecosystem – pioneering the use of signals back in 2019, and incorporating server functions in early 2022.

Now if you’ll excuse me, I need to go work out some kinks in my Poodle Hat matching algorithm.

---

AI phone calls?? Now you can build it yourself

And it only takes 10 lines of code, thanks to Bland AI’s hyper-realistic AI phone agent.

Their YC-backed platform gives you all the infrastructure you need for building AI phone calling apps at scale:

• It can access external APIs live during calls, which lets it perform tasks like scheduling appointments and accessing knowledge bases (see enterprise features).

• You can train it to handle inbound sales, customer support and B2B data collection tasks – without hallucinating.

• It can handle over 1,000,000 phone calls simultaneously and respond at human-level speeds. Try calling it yourself.

The best part? They’re giving Bytes readers a special offer – which gives you access to something even crazier.

---

What gets logged?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), i * 1000)
}

---

1. Angular 18 just dropped. Don’t worry, ng-stans, we’ll write a lot more about it on Monday.

2. All the React Conf talks are up on YouTube, including this React Compiler deep dive from Day 2 – just in case you want to learn how it actually works before complaining about it on Twitter.

3. Mohsen Taleb wrote this deep, deep dive comparing JavaScript unit testing frameworks in 2024 for the Raygun blog. It’ll give you a better idea of whether you should use Jest, Vitest, or my personal favorite – praying to the software gods to bless you with clean code. [sponsored]

4. Zach Leatherman just announced that He is working independently on 11ty full time and could use your (or your company’s) support. And by support, I mean money.

5. Ryan Dahl gave a 30-minute talk at DevWorld 2024 introducing JSR, Deno’s new open-source package registry.

6. Another Ryan (Carniato) also gave a 30-minute talk at the same conference introducing SolidStart, in case you want to dive even deeper.

7. Bright Data’s Web Scraper API lets you run your Puppeteer, Selenium, and Playwright scripts on fully hosted browsers – so you can easily scrape web data at scale from the most complicated websites, without being blocked. [sponsored]

8. Darius Cepulis wrote about how React 19 lets you write impossible components. I’ve alway been more into Beyond Meat components, but to each their own.

9. Turbopack (the Vercel-backed, Rust-powered successor to Webpack) is now passing 100% of tests for the dev server.

10. Matthew Ström wrote about What UI Density means and how to design for it. By the end of this post, you’ll know how to make your website look like a neutron star collapsing in real time.

---

What gets logged?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), i * 1000)
}

A little throwback for all you old heads. This used to be everyone’s favorite JavaScript interview question.

This code will eventually log 5, 5 times.

The reason for this is because we declared our variable with var, which is function scoped. By the time our functions given to setTimeout run, i will already be 5 and every function will reference that same variable.

To fix this, use let which is block scoped and will give each iteration of our for loop its own i.

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), i * 1000)
}

or you can capture the correct value of i by passing it as an argument to the function via setTimeout’s third argument.

for (var i = 0; i < 5; i++) {
  setTimeout((capturedI) => console.log(capturedI), i * 1000, i)
}

or you can use an IIFE to kind of do the same thing, lol.

for (var i = 0; i < 5; i++) {
  ((capturedI) => 
    setTimeout(() => console.log(capturedI), i * 1000)
  )(i);
}