SvelteKitty 2.0 -- now even sveltier!

Today’s issue: Fantasy novels centered around Node.js, extended JavaScript metaphors about black holes, and the mainstream media’s anti-linting bias.

Welcome to #247.

---

SvelteKitty 2.0 — now even sveltier!

Exactly one year after launching SvelteKit 1.0, Rich Harris and the gang are back at it again with SvelteKit 2.0.

For the uninitiated, SvelteKit is a metaframework like Next.js that extends Svelte with additional functionality like SSR, directory-based routing, and built-in code splitting.

It’s grown to almost 300k weekly downloads since v1.0 came out, while helping Svelte nearly double its downloads in the same time frame.

Unlike my grandmother’s Cirque du Soleil-themed holiday party, this SvelteKit 2.0 release is pretty low key. It adds support for Vite 5 and “fixes a bunch of annoying things that couldn’t change without a semver major.”

The most exciting update is the addition of shallow routing, which lets you bind state to a history entry without causing navigation. This is helpful for creating modals that you can dismiss by swiping back on mobile or pop-up views of routes that you don’t want to do a full navigation to.

Bottom Line: This SvelteKit 2.0 release might not look particularly exciting on its own, but it’s helping to lay the foundation for Svelte 5 — which comes out early next year and will feature a full rewrite of the entire framework.

All signs point to 2024 being the year of the SvelteKitty, so buckle up.

---

Basedash automatically turns any database into a full admin panel

…and it does it in 2 minutes, for free.

How TF does it do that? With AI, of course.

You just connect any database you want to Basedash, and it immediately generates a beautiful interface full of tools for visualizing and editing your data:

• Dashboards and charts that let you filter, sort, edit, and interact with your production data.

• Actions that let you easily connect your DB to external APIs (like GitHub or Slack), or internal APIs to trigger business logic.

• Multiplayer data editor that lets anyone on your team view and edit your DB with the familiarity of a spreadsheet, including images.

TLDR: you connect your DB, and 2 minutes later you get pretty much every internal tool your business will ever need, with no custom code or drag-and-dropping required.

Go try it out for free — even if you don’t plan on using it forever, it’s worth taking 5 minutes to see the magic for yourself.

---

How would you remove the duplicate elements from this array?

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

---

1. Oxlint is a new JavaScript linter that utilizes Rust and parallel processing to be 50-100x faster than ESLint. Unfortunately, there was no $20k public bounty for this one - probably because of the mainstream media’s anti-linting bias.

2. Colin Sidoti wrote about how Clerk just launched Custom Roles & Permissions - new helpers in Clerk’s SDK that make it easy to add enterprise-level permissions to your React app. [sponsored]

3. Vue 2 will be deprecated on Dec 31st. Rest easy, old sport 🫡.

4. Deno v1.39 came out last Thursday and brings back the WebGPU API, which had previously been removed for performance issues.

5. Not to be outdone, Bun also released v1.0.18 last Thursday with a bunch of bug fixes.

6. The Bonaroo team wrote a creative fantasy story called, Building Node.js apps without any dependencies.

7. Bunchee just released v4.0 of its zero-config bundler with better SM/CJS compatibility, support for the bin field convention, and more.

8. Charles Lowell wrote about The Await event horizon in JavaScript with an extended metaphor about black holes, and I am here for it.

9. Michael Shilman wrote about how Storybook just released experimental support for React Server Components in the new Storybook 8 alpha.

10. The Chrome team released CSS Wrapped: 2023, and I found out that I’m in the top 1% of trigonometric function users. I bet my 9th-grade geometry teacher, Mr. Talon, feels pretty dumb right now for not bumping my grade up to a B- like I asked.

---

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 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.

Another fancy approach is using filter with findIndex,

const uniqueList = list.filter((item, index) => 
  list.findIndex(({name}) => 
    name === item.name
  ) === index
);

Or using .reduce and .map,

const uniqueList = Object.keys(
  list.reduce((acc, cur) => {
    acc[cur.name] = cur.name;
    return acc;
  }, {}),
).map((name) => ({ name }));

Or one of the other various ways that I’m sure you’ll all let me know about 🫶.