butterflies aren't made out of butter

Issue #86.February 7, 2022.2 Minute read.
Bytes

This week, we’ve got a new Node API that was years in the making, Vercel hiring Kendrick Lamar, and a makeover for my mommy blog. Welcome to #86.

Fetch meme

The tables have turned

Node.js finally embraces fetch

They did it. The Node.js team finally made fetch happen.

Wtfetch? The fetch API makes it easy to make HTTP requests. Before fetch, we had to use the “butterfly” of the dev world, XMLHttpRequest. Despite their names, butterflies aren’t made out of butter and XMLHttpRequest can be used to retrieve any type of data, not just XML.

fetch simplifies that process with a minimal Promise-based API, which is built on primitives like Request and Response that represent parts of the HTTP request lifecycle. It’s been around for a while — we’ve had fetch in browsers since 2015, and Deno’s had it since 2019.

So what took Node so long? And why now?

Turns out, browsers and Node are not alike at all. Features that already exist in browsers needed to be re-created in Node — like Headers, EventTarget, AbortController, Blob, File, FormData… you get it. And things that browsers take for granted, like “the origin” (aka the website making the HTTP request), don’t make sense in a server environment. Same goes for lots of browser security features.

So yeah, it’s a lot of work. Adding a browser-first API like fetch to Node is kind of like adding an open bar to your family reunion — it seems like a simple enough way to amp up the fun, but if you haven’t put in the time to figure out all the logistics, things will get very complicated very quickly.

Why Now? The fetch addition was finally made possible by http, Node’s existing HTTP client. In 2018, the Node.js team started an effort called undici (Italian for eleven) to modernize and improve http. Undici uses Promises, which enables async/await, and is 14x faster than the existing API.

It’s literally taken years to implement everything needed in both Node core and undici, but it’s finally done. Last week, undici and its built-in fetch API were merged into Node.js core. You can use it when Node 18 comes out in April.

Bottom Line: Having fetch in Node is kind of a big deal. It provides a standard around fetching data that’s the same as browsers, which brings us one step closer to being able to use server code and client code interchangeably. Still upset about butterflies though.

Raygun Meme

The only pair programmer I’ll allow [sponsored]

Raygun gives you X-ray vision

…for your code. Now stop looking at me like that.

Raygun has super powerful tools that make it easy to get all the diagnostics you care about for your team’s web and mobile apps. When there’s an issue, it shows you exactly what’s going on, who’s being impacted, and exactly how to fix the root cause – down to the specific line of code itself.

This X-Ray Code Vision lets you quickly prioritize fixing the issues that have the biggest impact on your users, so that you can quickly return to watching Spider-Man 3 starring Tobey Maguire (aka the greatest film of the 21st century).

Start a 14-day free trial of Raygun and give your team a tool that’ll genuinely make their lives easier. It only takes a few lines of code, and their simple usage-based plans start at $4 a month – a small price to get your users to love you, your team to love you, and your stepdad to finally respect you.

Try it out. Thank me later.

MDX2 meme

First we gonna rock, then we gonna roll

MDX 2

Everyone’s favorite tool for over-engineering your blog inserting cool components into long-form content just got even better last week. I’m talking about MDX — the aptly named lovechild of markdown and JSX that just released v2.

This release comes 2.5 years after v1 was released, and it required almost a complete rewrite. Let’s dive into the highlights:

  • Formatting improvements — These make MDX feel more like writing JSX than markdown, which should make the whole experience more intuitive overall. They also added support for JavaScript expressions.

  • Rollup and esbuild join the party — MDX used to only work with Babel and webpack, but now it’s got integrations for hot new build tools like Rollup and esbuild. You can also import MDX files directly in Node.js with the new @mdx-js/node-loader.

  • Bring your own JSX runtime — MDX can now compile JSX to normal JavaScript, so any and all JSX runtimes are supported. You can still use React, but you can also use Vue, Preact, Emotion, or whatever other weird stuff you might be into (no judgment).

Bottom Line: This release should make MDX even more popular as it spreads its non butter wings beyond the React ecosystem. And it’s definitely going to revolutionize the mommy blog I’ve been ghostwriting about gourment Italian food for the whole family. My affiliate links for this Amazon Basics dutch oven will be popping off once I seamlessly embed an interactive image of it in the middle of my World’s Best Baked Ziti recipe — which obviously begins with 20,000 words about the history my family, the etymology of the word “ziti”, and a quick breakdown of all the cool new features in MDX 2.

Cool Bits

  1. Ryan Carniato (the creator of SolidJS) wrote a great breakdown on Why Efficient Hydration in JavaScript Frameworks is so Challenging, along with the tradeoffs of each approach. I kept waiting for the big reveal of — “SolidJS fixes all of these problems perfectly, and if you can’t see that then you’re not paying attention!!” — but it never came. I guess Ryan’s still got a lot to learn about marketing before he raises $10m in venture capital like everyone else.

  2. Storybook lets you pinpoint visual bugs automatically. Chromatic runs visual tests, publishes component docs and gathers UI feedback in one shared workspace. That helps you ship UIs with less manual work. Learn more » [sponsored]

  3. Vercel released a very aesthetically-pleasing 2021 Year in Review. The best part was where they talked about how they hired Kendrick Lamar. Or maybe they just meant that a web developer built him a website with Next.js (??). Either way, you know that growth chart has Guillermo saying, Now I run the game, got the whole world talkin’.

  4. There was a little bit of an uproar last week when it was revealed that nobody at Facebook has worked on Jest for years. Honestly based on their stock price lately, it feels like making fun of Meta is punching down for us now, so we’re going to stop.

  5. Electron 17 was just released with some stack upgrades and a couple small breaking changes. “bUt iSn’T iT SoOOo bIg ANd sLOw??” Maybe, but the hand full of billion dollar companies built on it don’t seem to mind.

  6. Gyroflow is a new Rust app for stabilizing video using motion data from a gyroscope, because Rust is everywhere and we cannot escape it.

  7. WebVM is a serverless virtual Linux environment that runs directly in your browser, thanks to a little JavaScript magic mixed with the WASM-based CheerpX x86 virtualization engine. If most of those words don’t make sense to you, check out the creator’s blog post on how they did it (no guarantees that’ll actually help though).

  8. Lee wrote about how Yes, he can connect to a database in CSS. Why? He says it’s because it had “been too long since I last embarked on a quality sh*tpost project.” Same thing I tell myself every time I sit down to write this newsletter. Thanks for reading.