The Officially Unofficial Svelte 4 Launch Party™️

Today’s issue: The Big Vim industrial complex, W3C eye bleach, and trying to get a React data graph gallery in the MoMA.

---

Welcome to the Svelte 4 launch party

After making us wait 1,522 days since the last major release, you’d probably think that the Svelte team had something huge planned for last week’s Svelte 4 announcement, right?

Wrong.

Ok, that’s not totally fair. This “maintenance release” might not be jam-packed with new features, but the main purpose of v4 is to “set the stage for the next generation of Svelte to be released as Svelte 5.” Plus, the Svelte team has been prioritizing work on the SvelteKit metaframework, which recently released v1.0.

But now that Vercel is sponsoring the Svelte team, couldn’t Guillermo & Co. have thrown together some sort of launch celebration for the Svelties? Maybe a Svelte-themed drone show, or a giant plate of coconut shrimp in the shape of Rich Harris’ head? What about allowing Vercel employees to go crazy and wear a multi-colored t-shirt without receiving a formal warning from HR?

Well, it doesn’t seem like any of that happened, so consider this The Officially Unofficial Svelte 4 Launch Party™️.

We’ll help you celebrate this occasion the only way we know how — with cursed memes, sarcastic jokes, and quick summaries to help you feel smarter and better than your co-workers.

Speaking of which, let’s discuss what’s actually in Svelte 4:

• Perf improvements — This release took Svelte’s already small package size and reduced it by a whopping 75% 🤯. They also cut the number of dependencies from 61 to 16, for faster downloads and better security.

• DX improvements — Svelties are very excited about a few specific improvements to the IDE authoring experience. They also introduced some more general changes to make Svelte feel easier and more intuitive overall.

• Documentation improvements — You can tell the team has invested significant time into redoing the official site and overhauling the TypeScript Svelte docs. It’s never been easier to give Svelte a try.

Where does Svelte go from here? Svelte 5, obviously. And that should be a big one, with the team promising a full rewrite of the Svelte compiler and runtime. Hopefully we get to see it before 2027!

Bottom Line: Up til now, Svelte has been a cult classic in the JS ecosystem — it’s always had a strong group of die-hard fans, it’s universally beloved and respected, and it’s helped inspire many of the next-gen, minimalist frameworks that have emerged in recent years.

But will Svelte be able to cross the chasm and start taking real market share from the more “mainstream” frameworks like React (aka the MCU of JavaScript)? We’ll start to find out over the next few months and years. Stay tuned.

---

Become a serverless god with Cloudflare

Remember our 2022 predictions issue, when we said that “serverless tools will help front-end devs become real full-stack developers”?

Well, we’re seeing this happen everywhere now (nailed it) – and the Cloudflare Developer Platform is the gold standard. It’s helped thousands of front-end devs build robust serverless solutions for their work projects and side projects.

That’s because it’s not only the most powerful platform, but it also has the most generous free tier by far 🤑.

Let’s take a closer look under the hood:

• Workers — Deploy serverless code instantly across the globe for exceptional performance, reliability, and scale for applications

• R2 — Set up rapid and reliable object storage that is S3-compatible without egress fees

• Images — Build a highly scalable image pipeline — effortlessly and affordably

• Stream — Upload, store, encode and deliver live and on-demand video with one API

Try it out at your job or for your next side project – and don’t miss out on the golden age of serverless.

---

const car = {
  name: 'Tesla',
  startEngine() {
    console.log(`The ${this.name} engine is starting...`);
  },
  delayedStart() {
    setTimeout(this.startEngine, 1000);
  }
};

car.delayedStart();

---

1. More Svelte: Claudio Holanda wrote a balanced article about his team’s Thoughts on SvelteKit, one year and 3 billion requests later.

2. Sonya Moisset wrote A Day in the Life of an Ethical Hacker, which covers how to identify security weaknesses before they get exploited by malicious actors. It also shares practical steps for getting started with ethical hacking, from reconnaissance and vulnerability exploitation to responsible disclosure. [sponsored]

3. Shoubhit wrote about Why he switched from Neovim to VS Code, and is now on the run from the Big Vim Industrial Complex. Godspeed, brother.

4. DevPod is an open-source, client-only, unopinionated version of CodeSpaces.

5. The Good Line Height is a helpful tool for calculating the exact right line height for any grid, given your text sizes. It’s kind of similar to the The Good Place, except instead of being a fun sitcom about confronting your mortality, it’s something completely different than that.

6. The newly redesigned W3C site just went live, but don’t worry - its white background can still pierce your retinas as much as ever.

7. Figma just introduced a new workspace called Dev Mode. But personally, I’m just waiting for Neovim to introduce Design Mode.

8. Yan Holtz created The React Graph Gallery — a collection of different graph examples and templates designed to guide you through the basic concepts of data viz. I’m trying to get some of the charts displayed in the MoMA, but they stopped returning my calls after they said my most recent performance art piece was “severely off-putting, even for modern art.” Prudes.

---

const car = {
  name: 'Tesla',
  startEngine() {
    console.log(`The ${this.name} engine is starting...`);
  },
  delayedStart() {
    setTimeout(this.startEngine, 1000);
  }
};

car.delayedStart();

The bug has to do with our invocation of startEngine. Because we’re passing this.startEngine as an argument to setTimeout, we’re not the ones invoking it. That means it’s not going to get invoked with the correct context (this). We can fix this in two ways – either using .bind (🙃) or invoking the function ourself like this.

const car = {
  name: 'Tesla',
  startEngine() {
    console.log(`The ${this.name} engine is starting...`);
  },
  delayedStart() {
    setTimeout(() => this.startEngine(), 1000);
  }
};

If you’d like a longer explanation, we break it down in Understanding the “this” keyword, call, apply, and bind in JavaScript.