The answer? Mike Tyson

Apparently, last week was Conference Week™ — as Guillermo from Vercel, Nat from GitHub, and Mark from Meta all went head to head in a Battle of the Keynotes. We’re still not sure who won, but we definitely know who filled us with the most existential dread, just in time for Halloween! 🎃

Welcome to #72.

---

We don’t make the rules

We learned two things at last week’s Next.js Conf — 1) If this whole Vercel thing doesn’t work out, Guillermo would be a great host for the Architectural Digest YouTube channel. 2) Next.js 12 is Vercel’s “biggest release ever” — and not just because 12 is bigger than 11 (I think).

What’s new in Next.js 12?

• A Rust-powered compiler, which means, yes, this meme gets to make another appearance.
• Support for AVIF images using the <Image> component, which crunches your cat pics 20% smaller.
• Native ES Module support, because CommonJS is so 2010.
• URL Imports, which lets you import files directly from the web, instead of dirtying your node_modules folder with peasant modules.

But the most exciting part are two big experimental features.

Middleware (Beta) — This solves one of the biggest problems with JAMStack — How do you run server-side code on requests when you’re just serving static files? Middleware lets you write functions that run before every request using a limited, but fast runtime. This allows you to do lots of stuff like authentication, feature flags, A/B testing, and analytics.

React Server Components (Alpha) — Next.js becomes the first to implement this shiny new server rendering method, which is different from the SSR that Next.js normally does to generate the HTML for a page. Instead, this renders individual components on the server and streams the results to the client. This gives you faster page loads, smaller JavaScript bundles (since all the processing happens server-side), and a great developer experience.

Bottom Line: Are we ready to talk about how by building on top of React, and by having a privileged relationship with the React core team, Vercel, in a sense, is able to leverage the React core team for free labor? Not yet? Right right.

---

The choice is yours

Retool makes it 10x faster to build internal tools

I’ve been telling you about how great Retool is for a while now.

It’s the easiest way to build internal tools at your job… blah blah blah. We all know that.

But here’s the thing: you don’t build a toaster from scratch every time you want to eat some crispy bread. It’s 2021. Someone already built that for you.

Here’s another thing: you shouldn’t build internal tools from scratch every time your boss wants to “see the data.” It’s 2021. And Retool already built that for you.

Retool gives you all the building blocks you need to make tools that *actually* look good — tables, lists, charts, wizards, etc. And you can easily connect it to any database or API you want, instead of trying to hack together all that internal data yourself (gross).

And if you want to bedazzle customize your app, you can add your own custom JavaScript to build some pretty robust stuff.

👉 Check it out.

---

JS Quiz

What will be logged to the console when this code executes? The answer is below.

window.name = "Mike Tyson";

const me = {
  name: "Tyler",
  sayName() {
    console.log(this.name);
  },
};

const sayName = me.sayName;
sayName();

---

Isn’t it great that we can use CodeSpaces to build the Metaverse from inside the Metaverse?

All Across the (GitHub) Universe

GitHub Universe kind of felt like one big commercial for CodeSpaces — the fully-featured dev environment in the cloud that GH first announced earlier this year (and is a paid enterprise product).

To be fair, CodeSpaces is significantly more powerful than any of the other cloud-based IDEs we’ve ever seen. It lets you do everything that your local machine can do (access a terminal, run servers, execute tests, sync your local VS Code settings, etc.) — but from any computer in the Metaverse world.

GitHub announced a bunch of new CodeSpaces features last week that’ll make it even easier to use — including a new (beta) REST API to programmatically manage your CodeSpaces, newly-added CS support in the GitHub CLI, and the ability to create/update the devcontainer.json development environment as code definitions with a one-click setup.

Here’s the rest of the non-CodeSpaces highlights:

• New GitHub Issues experience hits public beta — with new and innovative features for passive-aggressively shaming your co-workers collaborating, like project boards and dynamic tables.

• New GH Command Palette (beta) lets you use the trusty cmd/ctrl k to navigate to any project, repo, PR, or issue and run commands.

• The new GH Discussions feature got some additional updates designed to help developers, teams, and OSS communities communicate directly on GitHub (and perhaps save the world from one more Discord server being spawned).

Bottom Line: GitHub is trying to walk a fine line of maintaining its appeal to individual developers and small teams, while simultaneously trying to attract big-fish clients with enterprise-only features like CodeSpaces. And after GitLab IPO’d two weeks ago for $15 billion (largely because of its strong enterprise client base), I’m guessing we’ll be seeing more enterprise plays from GitHub soon.

---

Cool Bits

1. Notifire is a powerful OSS library for managing multi-channel notifications with a single API. Not-a-fire is an app I built back in 2012 that allowed fire fighters to point their iPhone 4S at a building, and it would tell them whether or not it was on fire.

2. Builder.io is a visual experience builder that lets non-developers use a drag-and-drop UI to create custom pages and layouts that are speed-optimized out of the box. Check out their free tier, and see how easy it is to instantly clear your backlog from all those neverending marketing asks. [sponsored]

3. The Google Chrome team wrote about Photoshop’s Journey to the Web, and how Chrome has been able to empower more complex web apps (when they’re not busy throttling non-amp ads).

4. Yarn 3.1 was just released with ESM support, a Node.js Corepack integration and lots more.

5. Anthony Fu wrote about Reimagining Atomic CSS with a Tailwind CSS alternative named Windi.

6. LittleJS describes itself as the “Tiny JavaScript Game Engine That Can”. In contrast, BigJS describes itself as “The modern web developer’s platform”. Wait no, that’s just Angular.

7. Daniel wrote about How Svelte Makes Two-Way Binding Safe, which means that whenever you think of two-way binding, you can just imagine Rich Harris giving you a big hug and whispering, “you’re safe now.”

8. MDX 2 was just released with lots of new features and improvements. Now I can finally finish writing my long form breakdown about this guy who, for years, only ate at Six Flags — complete with all of the MDX components I need to illustrate the total number of calories that came from overcooked hot dogs, stale french fries, and Dippin’ Dots.

---

JS Quiz - Answer

What will be logged to the console when this code executes?

window.name = "Mike Tyson";

const me = {
  name: "Tyler",
  sayName() {
    console.log(this.name);
  },
};

const sayName = me.sayName;
sayName();

The answer? “Mike Tyson”.

Since we’re not in strict mode, sayName isn’t a method, and we’re not using call or apply, this inside of sayName will default to the window object.