macaroni in the pot
This week, we’ve got you an invite to JavaScript PartyTown, TinyTown, and HalloweenTown. Welcome to #67.
Nobody parties but me, ok?
PartyTown wants to speed up your JavaScript thread
It’s kind of like PartyCity… but instead of being a semi-creepy converted warehouse where you go to buy Halloween costumes and the occasional piñata, PartyTown is a cool (still experimental) new library that makes loading third-party scripts easier and faster using Web Workers and some good old-fashioned JavaScript voodoo.
What problem does it solve? Third-party scripts (like trackers, ad networks, etc.) often load and execute a lot of JavaScript. This can slow down the main thread, which makes the UI unresponsive and your users visibly angry not down to party. PartyTown solves this by running these third-party scripts in a web worker, so they don’t block the main thread.
That sounds simple enough, but this is one of those (many) things in web development that’s a lot trickier than it sounds.
For one thing, third-party scripts often need to access DOM APIs and the window object — but you can’t do that from within a Web Worker directly. Plus, the bridge between Web Workers and the main thread has to be async — but third-party scripts expect DOM/window API calls to be synchronous.
How does it work? Like we said, it’s Voodoo. PartyTown starts by creating a JavaScript Proxy in the Web Worker for DOM/window APIs, where it can intercept those requests. From there, it sends the message to the main thread, gets the response back, and passes it along to the third-party script. For the async problem, it (very cleverly) uses a Synchronous XHR Request, which blocks the thread while the request is being made.
“But wait, isn’t blocking the thread bad? JavaScript is a single-threaded language!!” That’s correct, except this isn’t blocking the main thread — it’s blocking the worker thread. And we don’t care if that gets blocked, as long as the main thread stays responsive #bigbrain.
Bottom Line: The third-party runs in a worker, but can still call DOM/window APIs without knowing any better — the best of both worlds. Maybe they should rename the library, PartyInTheUSATown?
The hero we deserve [sponsored]
Sentry Saved My Life
I had that same nightmare again last night.
The one where I get woken up at 2:00 am by 17 Slack notifications, and my phone sounds like the National Guard is knocking my door into the ground:
Prod crashed again.
Different bug this time.
Can’t find it.
Could you hop online for a bit?
💀💀💀
Oh wait, that wasn’t a nightmare — that was literally what happened to me every few weeks before my old company finally started using Sentry.
Sentry makes it 100x easier to monitor your app’s errors and performance, so that you can quickly catch and fix issues during the day time — instead of frantically trying to un-crash your app in the middle of the night. Plus, they’ve got individual SDK’s and solid documentation for every major technology, so it’s super simple to set up.
Try 1 month of Sentry’s Business Plan for free with the promo code BYTES, and go back to having normal anxiety dreams about stuff like climate change or being back in middle school.
Such a little thing
Next stop, Tiny Town
Motion One was just released last week, and it bills itself as “the smallest fully-featured animation library for the web.” It was created by Matt Perry, who’s also the creator of Framer Motion (when he’s not playing Chandler in Friends).
The secret’s in the WAAPI. We’re not talking about “macaroni in the pot” — we’re talking about the not-super-well-known Web Animations API. This native browser API was released six years ago to try and fill the gap between declarative CSS animations and transitions, and dynamic JavaScript animations. But it never really caught on because of how big and clunky it is.
Enter Motion One. It packs the power of WAAPI into a more minimalist API that feels like a modern JavaScript animation library you’d actually want to use — complete with features like Timeline, Key Frames, Options, and (coming soon) Springs.
This WAAPI-based approach gives Motion One a few key advantages:
-
Smaller bundle sizes — Because it doesn’t need to force users to download code that’s already present in their browser.
-
Hardware acceleration — Even if your app is already running a bunch of other JavaScript, your animations stay smooth because they can run outside the main JavaScript thread (usually on the GPU).
-
Better value interpolation — Motion One is able to use the browser’s interpolation code, which is typically much better and makes your relevant animations more performant.
Motion One’s biggest tradeoff is that WAAPI can only animate CSS styles (not JavaScript values, SVG attributes, or HTML text). Future polyfills could allow Motion One to support these animations at some point, and Matt should have more time to work on it now that the Friends reunion just wrapped up shooting.
Cool Bits
-
Appwrite is an open source Firebase alternative that makes cross platform app development easy. It’s got a realtime database, file storage, serverless functions, numerous authentication methods and an architecture that’s focused on scalability, privacy, security and self-hosting out of the box. [sponsored]
-
Elk is a new, tiny JavaScript engine for embedded systems that implements a subset of ES6 and is definitely on that Joe Rogan diet.
-
Our very own Alex Anderson just made a great video on Rate Limiting in JavaScript. If you don’t immediately watch and forward it to 8 friends, your crush will **never** like you back!!!
-
Strange attractors is a Vanilla JavaScript app where you can generate and visualize strange attractor geometry with thousands of points. Pretty sure that “strange attractor geometry” is the name of the DnD spell that Grimes cast as a joke, but two weeks later her and Elon were dating.
-
Elijah made this tutorial to show off a few handy Neovim plugins that make his JavaScript and TypeScript development easier. You know what makes my TypeScript development easier?
any. -
Lots of new animation libraries this week, and Aria created Theatre.js — an animation library for high-fidelity motion graphics.
-
Prateek wrote this helpful JavaScript developer’s guide to browser cookies. I’m still waiting for one of the Facebook developers to write an article about what cookies they used in order to immediately bombard me with ads for ”HalloweenTown 2: Kalabar’s Revenge couples costumes,” when all I did was send one measly text to my wife about it as a joke, ok??