Once you Wasm, the fun don't stopsm

Issue #195.June 12, 2023.2 Minute read.
Bytes

You may not know it (we’re bad at marketing), but Bytes is actually just a small part of what we do as a business. The other 90% is spent teaching the JavaScript ecosystem. And after nearly a year of building, we’re excited to finally announce that our newest course, 🕹️ react.gg, is now in private beta.

For this launch we’re opening it up to 10% of the size of our waitlist – on a first come, first serve basis.

There’s a launch discount available now on http://react.gg.

And with that, back to our regularly scheduled programming.

Today’s issue: Smelly JavScript, organic human batteries, and my weird neighbor who’s a little too excited about NakedJSX.

Welcome to #195.

Eyeballs logo

The Main Thing

Polywhirl pokemon with Wasm logos on the eyes

Polywasm, go!!

Poly-what now?

When I heard that Evan Wallace created something called polywasm, my first thought was, “Oh no, was he hanging out with the FTX team down in the Bahamas?”

Thankfully, the answer is no 🙏. It turns out that polywasm is actually just a polyfill for WebAssembly.

That means it allows you to run a .wasm file in a JavaScript environment that doesn’t have a Wasm implementation (or has it disabled, like Safari when Apple’s “Lockdown Mode” security feature is on). Polywasm does this by parsing the .wasm file and translating each WebAssembly function to a JS function.

This approach sacrifices some of the speed and power you get with native WebAssembly, but it theoretically allows Wasm apps to go where no Wasm apps have gone before.

To understand why that’s cool, let’s do a quick WebAssembly review:

  • Wasm is a portable compilation target that lets developers use faster, lower-level languages like C++ and Rust to build web applications with near native performance.

  • Wasm dramatically increases the scope of what’s possible to build on the web. We’ve already seen companies like Figma (which Evan co-founded) leverage Wasm for their browser-based design tool, StackBlitz is using Wasm to build Web Containers (an interactive dev environment in the browser), and a bunch of other projects are using Wasm to push the boundaries of the browser even further.

At this point, Wasm support is already pretty widespread (it became an official WC3 standard back in 2019). But this polyfill provides an interesting solution to help developers work around edge cases to make sure that WebAssembly can truly go anywhere JavaScript can.

And since polywasm was created by the co-founder of the most successful Wasm app ever, who also of happens to be the creator of esbuild, this project might be worth keeping an eye on.

Bottom Line: Never bet against the web. And always bet against drug-fueled polycules in the Bahamas.

        
Airplane Logo

Our Friends
(With Benefits)

A pug flying in a drone.

When my team finally lets me build some real tools.

Airplane is the developer platform for internal tools

No-code platforms are kind of like getting all-you-can-eat sushi: it starts off great, and then reality sets in.

And that’s the best part about Airplane’s robust, code-first platform for internal tools. It helps you quickly transform scripts, queries, and APIs into custom UIs and workflows for your team — but everything you build is code.

That means it’s integrated with the rest of your codebase, easy to extend with third-party libraries, and version-controlled.

Here’s what else it gets you:

  • Views are a “React-the-good-parts” component library for creating custom UIs and dashboards that are fully extensible as code.

  • Tasks help you turn scripts into production-grade apps that can connect to any data source or API.

  • Enterprise-grade defaults give you maintenance-free schedules, role-based permissions, audit logs, self hosting, and more.

Check it out for free — and see why companies like Vercel, Box, and Flatfile love it.

Spot the Bug logo

Spot the Bug

Sponsored by Snyk

Join Snyk’s hands-on Ethical Hacking 101 Workshop on June 21 to exploit vulnerabilities and learn how to proactively identify and fix security weaknesses. Register now!

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Filter</title>
  </head>
  <body>
    <h1>SVG Filter</h1>

    <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="filter">
          <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
      </defs>
      <image
        id="myImage1"
        href="image.jpg"
        x="10"
        y="10"
        height="100px"
        width="100px"
        filter="url(#filter)"
      />
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="filter">
          <feColorMatrix
            in="SourceGraphic"
            type="matrix"
            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
          />
        </filter>
      </defs>
      <image
        id="myImage2"
        href="image.jpg"
        x="10"
        y="10"
        height="100px"
        width="100px"
        filter="url(#filter)"
      />
    </svg>
  </body>
</html>
Cool Bits logo

Cool Bits

  1. Npm, yarn, and pnpm are now supported natively in WebContainers and claim to have up to 5x faster installs than on local. Once you Wasm, the fun don’t stopsm.

  2. Postbot is a powerful new AI assistant in Postman. It helps you debug and understand APIs, write tests faster, and make sense of large quantities of data. Sign up for early access. [sponsored]

  3. NakedJSX is a CLI tool for using JSX without React. Unfortunately, I know my next-door neighbor with the giant windows is going to love it.

  4. KV.JS is a fast, in-memory data store written in JavaScript. It’s meant for when you need caching, but running Redis would be overkill.

  5. Douglas Crockford said that JavaScript is a “smelly language”, and we shouldn’t use it anymore — but maybe it’s just because his all-natural deodorant isn’t working.

  6. The Algolia team created Autocomplete — a full-featured JS library for enabling user laziness (in a good way).

  7. Jules Blom created this Visual guide to running promises in parallel.

  8. VS Code’s IntelliSense can now steer GitHub Copilot code completions — which means we’re one step closer to becoming the organic human batteries from The Matrix powering the super AI. At least the steak will be delicious.

Spot the Bug logo

Spot the Bug: Solution

Sponsored by Snyk

The filter on the SVG has a duplicate id of filter causing the second svg to apply the filter from the first. To fix this, ensure that each relevant element has a unique id.

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Filter</title>
  </head>
  <body>
    <h1>SVG Filter</h1>

    <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="filter">
          <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
      </defs>
      <image
        id="myImage1"
        href="image.jpg"
        x="10"
        y="10"
        height="100px"
        width="100px"
        filter="url(#filter)"
      />
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="filter2">
          <feColorMatrix
            in="SourceGraphic"
            type="matrix"
            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
          />
        </filter>
      </defs>
      <image
        id="myImage2"
        href="image.jpg"
        x="10"
        y="10"
        height="100px"
        width="100px"
        filter="url(#filter2)"
      />
    </svg>
  </body>
</html>