We heard you like containers...
Today’s issue: A new way to not understand RegEx, JavaScript cartography, and my dad’s new family.
Welcome to #183.
The Main Thing
Is that Node.js hiding in my browser?
We heard you like containers…
Unless you live a healthy, balanced, fulfilling life – you probably saw that Stackblitz recently announced that WebContainers now run on Safari, iOS, and iPadOS. Also dependent on the current state of your mental health, you may or may not have just wondered “wtf are WebContainers?”
Thankfully, for you, it’s my job to obsess over micro changes in the web dev ecosystem so you can continue to live your best life. Let’s break it down.
Stackblitz announced WebContainers back in 2021. You can think of them as a micro-operating system, based on WebAssembly, designed to run a Node.js server inside your browser. Node in the browser – rad.
In February of this year Stackblitz announced the WebContainer API, allowing developers (like the Svelte Team) to build their own apps on top of the tech. Also rad.
This sounds great, except for one massive problem – iOS (and Safari and oh also iPadOS).
The Stackblitz team, like the rest of us, loves bleeding edge tech. But one thing they don’t tell you about the bleeding edge is you’re the one doing the bleeding. One tradeoff they chose to make when building WebContainers was to use WASM threads and SharedArrayBuffer (a modern JS feature which uses multiple JS threads to share the same memory space). This meant, unfortunately, limited iOS support since Safari is the new IE Safari hadn’t implemented them yet.
That is, until now. Safari was recently released from the Silicon Valley Correctional Facility and with that new lease on life started shipping some features – including WASM threads and SharedArrayBuffer. This, of course, means WebContainers are now supported on Safari.
Bottom line: This is a huge win for the web platform and those of us wanting to sound smart at pool parties this summer by telling people we run Node in the browser.
    |
Our Friends
(With Benefits)
Need some tools for your quest?
Postman is a one-stop shop for APIs
It’s basically like the shopkeeper from Zelda (shoutout Morshu) — but instead of selling you mushrooms and elixirs, it gives you power-ups tools that simplify every step of the API building process.
So step inside, traveler, and let me give you a tour:
-
Postman’s Public API Network is a completely free resource where you can discover and test thousands of public APIs. And it’s a great way to get inspo for your next project by seeing what millions of other Postman users have built.
-
Once you know what you want to build, their *very* comprehensive set of API Tools will help you speed up every phase of the API lifecycle — design, testing, documentation, mocking, and more.
-
Postman Workspaces help you easily organize your API work and collaborate with teammates and other developers.
Check it out — and see why over 25 million developers love using Postman.
Pop Quiz
Sponsored by Secureframe
They automated the entire process for SOC 2 compliance, so it takes weeks instead of months. Check out their free, personalized demo.
In what order will the logs below show up in the console?
console.log('First')
setTimeout(function () {
console.log('Second')
}, 0)
new Promise(function (res) {
res('Third')
}).then(console.log)
console.log('Fourth')
Cool Bits
-
Ryan Dahl gave a 30-minute talk about Deno 2.0 at the Node Congress conference. It reminded me of that time my dad came back for Thanksgiving one year to tell us about how great his new family was. Fun times.
-
Are you tired of doing QA testing? Check out CarbonQA’s high-quality QA services for dev teams, so you’ll never have to do it yourself again. [sponsored]
-
Chris Schmitz wrote an article on the Highlight blog about Building a Type-Safe Tailwind with vanilla-extract. Score another one for the type nerds.
-
RegExGPT lets you generate regex patterns by inputting an example of the text you’d like to transform and the expected result. Then you select the programming language you want for the output, click “generate”, and voila! — you still don’t understand RegEx.
-
The CSS Working Group accepted Justin Fagnani’s multiple stylesheets per file proposal, which means we’ll be able to bundle CSS modules soon(ish).
-
Microsoft just released v0.71 of React Native macOS — their framework for building native MacOS apps with React. So nice to see all of our tech overlords come together on this one.
-
Ivica Batainic wrote a blog post introducing Panda CSS — a CSS-in-JS solution without the runtime overhead.
-
Alex MacArthur wrote an article called, Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes. Personally, I’ve always liked using maps because of the fun song from Dora the Explorer and because of all those posters I had of Willem Blaeu on my wall when I was a kid.
In what order will the logs below show up in the console?
console.log('First')
setTimeout(function () {
console.log('Second')
}, 0)
new Promise(function (res) {
res('Third')
}).then(console.log)
console.log('Fourth')
First, Fourth, Third, Second.
To fully understand this one you need an understanding of JavaScript’s event loop – specifically, the Call Stack, Task Queue, Web APIs (for setTimeout), and the Job Queue. Turns out, that’s a little much to cover here so do some Googling and uh GLHF.