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 threadIt’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 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 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 LifeI 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:
💀💀💀 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 TownMotion 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:
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
|
