Have yourself a merry little Route-mas

Today’s issue: A compelling case for not starting another hosting company, underestimating HTML at your own risk, and creating Christmas memories with my children JavaScript.

Welcome to the last issue of the year, #249.

---

Have yourself a merry little Route-mas

Our best friend Tanner Linsley just harnessed his inner Buddy the Elf to launch TanStack Router 1.0, two days before Christmas.

This new React Router️ router for React is 100% type safe and promises to save you from the pain of global state and server state by letting you simply store a lot more state in the URL instead. This makes sense considering that links are the OG form of “portable state” and are inherently shareable, historical, and bookmark-able.

But wait, don’t Next.js and React Router/Remix already give us APIs to manage state inside the URL structure with path and search params?

Yes, but their approaches don’t always scale well, because they assume you’re working with very few search params, flat key-value pairs, and strings. Reality is usually a lot more complicated.

So what’s unique about TanStack Router?

• State manager-grade search param APIs come with schemas and validation, custom parsing and serialization, and immutability to make it easy to store all kinds of state in the URL without triggering unwanted side effects.

• 100% type safety means the router is fully inferred from route definitions to rendering, so you get autocomplete everywhere, and you don’t have to worry about writing unsafe routes.

• Built-in data fetching with caching features custom cache timings and automatic preloading for faster page loads.

It also comes with SSR, nested routes, error handling, and all of the other standard features of other routing libraries.

Bottom Line: Tanner & co. have already changed the state management game with React Query, which is now up to 3.5 million weekly downloads. Will they be able to do the same for routing in 2024? Early results look promising, with developers like Cory House tweeting that “It’s more than a router. It’s basically a TypeScript-optimized React framework.” Stay tuned.

---

Convex makes it “drop-dead simple” to build fullstack React apps

That’s because it gives you a fully type-safe cloud backend that can instantly replace your database, server functions, and glue code.

It’s like the 2023 2024 version of Firebase, because it comes with first-class support for React/Next.js and lots of advanced features:

• A realtime relational DB that makes every part of your app automatically reactive (with zero config)

• Simple server functions that manage dev and prod for you

• Built-in file storage, search, auth, and more

Try the free tier to see how Convex can help you eliminate tons of boilerplate, improve DX, and ship faster than you ever imagined.

---

function sumArgs() {
  let sum = 0;

  arguments.forEach((arg) => {
    sum += arg;
  });

  return sum;
}

const result = sumArgs(1, 2, 3, 4, 5);

---

1. shadcn/ui just released a bunch of new components, CLI improvements, and more. Long live the copy-pasta component king 🫡.

2. Ollie Williams wrote about Easy vertical alignment without flexbox.

3. Clerk discusses how magic links unlock secure, passwordless authentication. Explore Clerk for effortless integration of advanced authentication into your app. [sponsored]

4. In Alternate Futures for “Web Components”, Carlana Johnson writes about how WC always seem to be “on the cusp of catching on” — much like FP on the front-end 🥁.

5. Next.js is exploring moving to Lightning CSS.

6. Swizec Teller wrote an article called People like me are why you shouldn’t run a hosting company. It reminded me of the blog post I still need to finish called, “People like me are why you shouldn’t run an all-you-can-eat potstickers restaurant.”

7. The NEW Developer Nation survey is here! For every survey response, Developer Nation will donate to a charity based on their community’s input, including Mozilla Foundation, ADRA, Ada Developers Academy, Free Code Camp, and Engineers Without Borders. Wanna join? Start Here. [sponsored]

8. Lara Aigmüller wrote an article called Never underestimate HTML, which reminds me that you should also never underestimate an 18-year-old hacker with access to a smartphone, Amazon Firestick, and hotel TV.

9. The Solid.js team just released SolidStart Beta 2 with new super serializing server functions, a new Nitro server layer, and more.

10. Emil Privér posted an article about Multi-threading within Rust on Christmas morning. Sure, my kids were a little bummed out that I spent a few hours reading it and playing with TanStack Router while they quietly opened their presents in the living room — but at least they’ll always have the memory of that time when their dad made sure that issue #249 of his JavaScript newsletter went out on time.

---

In JavaScript, arguments is not an array, it is an “array-like object” 😅. Because it’s an iterable, you can use a for loop to iterate over it, but if you want to use array methods like forEach, you need to convert it to an array first. There are a few different ways to do this.

function sumArgs() {
  let sum = 0;

  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }

  return sum;
}

const result = sumArgs(1, 2, 3, 4, 5);

Or you can use the rest operator to get the arguments as an array:

function sumArgs(...args) {
  let sum = 0;

  args.forEach((arg) => {
    sum += arg;
  });

  return sum;
}

const result = sumArgs(1, 2, 3, 4, 5);

Or you can use Array.from to convert the arguments to an array:

function sumArgs() {
  let sum = 0;

  Array.from(arguments).forEach((arg) => {
    sum += arg;
  });

  return sum;
}

const result = sumArgs(1, 2, 3, 4, 5);