The Ng-Renaissance Fair

Today’s issue: The Ng-Renaissance Fair, JavaScript adrenaline junkies, and flashbacks of cheating at high school math.

---

WebContainers get their own API

StackBlitz first introduced WebContainers back in 2021 as a WebAssembly-based “micro-operating system” that let you run Node.js in the browser. And despite the “micro” label, this was actually a pretty big deal. For the first time, developers could create full-stack Node environments that were fast, link-shareable, and secure by default.

And last week, they brought that power to the unwashed masses with the WebContainers API — so now anyone can build a full-stack dev environment directly into their web app.

Why would I want to do that? I don’t know, maybe you want to build a party planning app that requires people to correctly solve a coding challenge in order to “unlock” their invitation. But since Ben Awad is probably already working on that, you could go for some of the more traditional use cases — like building interactive coding tutorials, low-code tools, or even AI apps that run directly in the browser.

Like Willy Wonka’s Factory, the only real limit here is your imagination, because the WebContainers API has just about everything you need:

• It runs native versions of npm, pnpm, and yarn in the browser.

• It supports every major JavaScript framework, and you can port any other non-JS languages to Wasm.

• The API has nice ergonomic features, like an in-browser filesystem, dev server, and Node command line.

Bottom Line: In the past, we’ve written about the idea of retiring localhost and doing all of your development in the browser. And while the future will probably be a lot more nuanced than that (#OnlyASithDealsInAbsolutes), it’s really cool to see projects like WebContainers, Sandpack, Codespaces, and others pushing the boundaries of the browser forward.

---

Courier frees you from notification hell

There are two things I wouldn’t wish on my worst enemy: 1) getting put on a project that uses Flux, and 2) building a notification system from scratch.

Thankfully, Courier’s got you covered (for the second one, at least). Their notification API lets you easily manage templates and routing logic for over 50 service providers like Twilio, Sendgrid, APN, Firebase, and Slack — all from one centralized platform.

It takes care of all the security and scalability stuff for you, and makes it easy for anyone on your team to quickly add new channels and change providers.

Companies like Lattice and LaunchDarkly have used Courier to save an average of 480 engineering hours a year. One CEO said that, “it’s probably saved us more pain (and time!) than any other single platform that we use.”

Check it out — and send your first 10,000 notifications of every month for free, no credit card required.

---

How would you add a console.log to this expression?

const names = ["Ben", "Alex", "Lynn", "Tyler"];
const mappedNames = names.map(name => ({ 
  name, 
  company: "uidotdev"
}));

---

1. Sarah Drasner created this cool Angular Signals Demo and predicted an upcoming “Angular Renaissance.” Can’t wait to bust out my tunic and tights for this year’s Ng-Renaissance Fair.

2. Jules Blom wrote A First look at useSyncExternalStore to help you understand React’s least popular hook more.

3. Dopt is developer infrastructure for product onboarding tools. It helps you design and run user state machines, paired with an in-product CMS — so you can build faster, collaborate more effectively, and ship better onboarding and education flows. [sponsored]

4. Julia Evans wrote about Writing JavaScript without a build system. Because every adrenaline junkie needs to get their fix somehow.

5. David Aerne created Poline, which he describes as “an enigmatic color palette generator, that harnesses the mystical witchcraft of polar coordinates.” Looks like someone just got themselves invited to Ng-Renaissance Fair 2023.

6. Stephen Wolfram (the guy who helped you cheat at high school math) wrote an in-depth technical analysis called, What Is ChatGPT Doing, and Why Does It Work? A question I ask myself every day, but about my own code, not AI.

7. Brandon Foley wrote a good article called, Simple, Modern JavaScript. Just like nature intended it to be.

8. Electric Clojure is a reactive signals DSL for building fullstack web UI’s. Electric Closure is a radical new form of post-breakup therapy that’s outlawed in 36 states — but I know a great specialist in Reno, if you need a referral.

---

How would you add a console.log to this expression?

const names = ["Ben", "Alex", "Lynn", "Tyler"];
const mappedNames = names.map(name => ({ 
  name, 
  company: "uidotdev"
}));

You could rewrite the function to use a block body, but ain’t nobody got time for that. Because console.log returns undefined we can use the logical OR operator (||) to add the log inline.

const names = ["Ben", "Alex", "Lynn", "Tyler"];
const mappedNames = names.map(name => console.log(name) || ({ 
  name, 
  company: "uidotdev"
}));