Inertia.js is a property of matter

Today we’ve got Bun’s new mission statement, 2nd-grade arts and crafts nostalgia, and too much possum content.

Welcome to #154.

---

Inertia.js is a property of matter

We all know that JavaScript is objectively the greatest programming language on Earth. And now we have even more proof with last week’s release of Inertia.js 1.0 — a “modern monolith” that makes it easier for back-end developers to connect their server-driven web apps to a ✨ beautiful ✨ JS front end.

Historically, if a Laravel or Rails developer wanted to replace their server-side rendered views with a JavaScript-based SPA, they would need to build a REST or GraphQL API, figure out auth and state management, set up a new Git repo, and…hope for the best.

But Inertia’s server and client side adapters give our back-end BFFs a bridge between Laravel-Land and the juicy JavaScript goodness of React, Vue, and Svelte. Here’s how it works:

• Back-end developers still build apps with server frameworks like they always have. They use the same functionality for routing, controllers, middleware, and whatever other gross interesting features they’ve tricked themselves into liking over the years.

• Inertia replaces the server application’s view layer, so the views it returns are JavaScript page components. This allows developers to build front ends with React, Vue, or Svelte, while still enjoying the productivity of the back-end frameworks they know and love.

• At its core, Inertia characterizes itself as a client-side routing library. So it also allows you to make page visits without forcing a full page reload, via its <Link> component. This gives your app the full JavaScript SPA experience.

Bottom Line: We welcome any and all Laravel and Rails devs into our ranks with open arms. In time, we hope you’ll join us in — 1) being confused on Twitter about why React is re-rendering and 2) giving us your unsolicited opinions on Tailwind 🫡 .

---

Swimm is the coolest way to create docs

The unthinkable just happened: Harold quit.

He was the only person on your team who understood how half the codebase worked, and now he’s gone forever 😭 .

If only you’d used Swimm — a new documentation tool built specifically for devs that’s currently the #1 product of the week on Product Hunt. It helps you reap all the productivity benefits of a “documentation culture”, without having to have an actual “documentation culture.” Here’s how:

• Swimm lets you integrate live code snippets from your repo directly into their docs editor, so you can easily document complex flows across multiple repos.

• They automatically keep those code snippets up to date with their GitHub app and CI/CD integrations, which verify that all your docs are synced up with your code after every PR.

• Their IDE apps show you relevant documentation whenever you’re browsing code — so you always have up-to-date docs at your fingertips.

Check out Swimm for free — and stop using the wrong tools to document your code.

---

Have a job you want to fill?

---

How would you remove the duplicate elements from this array?

const list = [
  { name: 'John' }, 
  { name: 'Sara' },
  { name: 'Sara' },
  { name: 'Lynn' },
  { name: 'Jake' }
];

---

1. Bun v0.5 was just released with a bunch of new features, including npm workspaces. It’s great to see that new company mission statement in action: “Move fast and bake things.”

2. Brilliant has thousands of byte-sized math and CS lessons (🥁) to sharpen your analytical thinking. Which is great, because learning a little every day is one of the best habits you can develop, and Brilliant’s interactive lessons make it feel easy (but not too easy). [sponsored]

3. Eleventy v2 just released its first beta. We wish them luck in their quest to trick people into thinking that possums are cute.

4. Glauber Costa wrote about how Chiselstrike built SQLite-based databases on the postgres protocol, which will undoubtedly send Hacker News into a frenzy similar to when Oprah gave every person in the audience a new car.

5. Gluon is a framework for creating desktop apps from websites using normal browsers and Node.js. Would you ever just open up the Elmer’s rubber cement lid during 2nd-grade arts and crafts time and just breathe in the fumes nice and slow while everyone else was working on their projects? Yeah, me neither.

6. Andrej Karpathy created nanoGPT — “the simplest, fastest repo for training and fine tuning medium-sized GPTs.” I don’t know what any of those things mean but surely my job isn’t at risk, right?

7. Your boy wrote The Guide to Nested Routes with React Router which critics are calling “Harrowing, breathtaking, and entirely unputdownable”.

---

How would you remove the duplicate elements from this array?

const list = [
  { name: 'John' }, 
  { name: 'Sara' },
  { name: 'Sara' },
  { name: 'Lynn' },
  { name: 'Jake' }
];

There are a few ways to do this. Your first intuition might be to do something like this.

const uniqueList = Array.from(new Set(list))

It’s the right idea since creating a Set will ensure our collection only contains unique values and Array.from allows us to create a new, shallow-copied array. Unfortunately, Sets only enforce uniqueness for primitive values, but our list is full of objects.

Instead, we can do something like this.

const list = [
  { name: 'John' }, 
  { name: 'Sara' },
  { name: 'Sara' },
  { name: 'Lynn' },
  { name: 'Jake' }
];

const map = new Map();

list.forEach(item => {
	map.set(item.name, item)
});

const uniqueList = Array.from(map.values())

Notice we’re using a Map here. Since Map’s preserve insertion order, our uniqueList will have the same order as the original list, but without the duplicates since we’re using name as the key.