Issue #200 Extravaganza!

Welcome to the Issue #200 Bytes Extravaganza! 🎉

To celebrate, we’re sharing 3 of our favorite stories from the past 200 issues, along with our 8 greatest hits coolest bits. It’s like a Bytes-themed trip down memory lane, just with less nostalgia and more JavaScript.

Welcome to #200.

---

June 2021 (#52)

Astro is shipping websites without JavaScript??

Whether you’re trying to build faster websites or reduce traffic in the Suez Canal, the advice is the same: just ship less.

But that’s become a lot tougher these days as product managers users (?) demand more and more features that require more and more JavaScript. Astro wants to change all that with its new static-site generator that “ships zero JavaScript by default.”

How TF does that work? Astro renders your entire site to static HTML and only ships JavaScript to the parts of your site that need it, via an Islands Architecture approach. Interactive components (like image carousels and shopping carts) get loaded by Astro — but if a user never sees an interactive element, they never load the JavaScript required to run it. (This seems similar to code splitting to me, but that doesn’t quite have the same ring as “we ship zero JavaScript”.)

But what about my precious frameworks? Calm yourself, Iago. You can still use any frameworks or npm packages you want to build your UI components. Astro just renders everything that doesn’t need JavaScript to static HTML during the build.

Bottom Line: Astro was built by Fred K. Schott — the creator of Snowpack and a clear proponent of the Using-your-middle-initial-makes-you-seem-smarter Theory. The Snowpack connection is interesting, because Astro’s “JavaScript-on-demand” approach is only possible because of these newer, less-bundled build tools like Snowpack, Parcel, esbuild, and others.

Today’s Update: This was the first time we ever wrote about Astro or any of the other next-gen, “Diet JavaScript” frameworks — which have continued to steadily gain ground in the ecosystem today. This was also the last time that I watched the video of all those celebrities singing Imagine during The Dark Times™️. I’m tempted to watch it again, but I’m not sure my body can handle vomiting that violently a second time.

---

Nylas is the fastest way to build communication features

Email is a trap.

Sure, it’s a great way to engage your app’s users — but is it worth the pain and misery of building and maintaining all those disgusting integrations? 🤮

Thankfully, Nylas can set you free. Their platform gives you simple CLI tools and SDKs to connect to all of your users’ emails, calendars, and address books in one place — so you can build customizable email and scheduling functionality that just works (even on Outlook 🥲).

It’s way more practical than paying all the hidden costs of building it yourself, and it gives you all the functionality you need:

• Sync data from your users’ inboxes, calendars, and address books to build engaging experiences.

• Automate tasks like scheduling meetings, sorting emails, and data entry.

• Get out-of-the-box compliance with security frameworks like SOC 2, GDPR, HIPAA, and more.

Start building with Nylas for free — and see why over 120,000 developers love it.

---

July 2022 (#108)

Sun’s Out, Bun’s Out

Who would win? A runtime for JavaScript, TypeScript, and Wasm that’s based on Rust and V8, and has raised $26,000,000 in funding from the best VCs in the world — or one determined boi?

Meet Bun: the brand new, all-in-one JavaScript runtime that can install npm packages ~20x faster than yarn and ~49x faster than npm install, is able to bundle over 1 million lines of JS per second, and claims to be 3x faster than both Deno and Node. Oh, and it was all built by one person.

Bun is currently an alternative runtime to Node and Deno. But it aims to eventually include a bundler, transpiler, and package manager — which would make it a viable alternative to other build tools like Webpack 🙏. Let’s break down the features:

• Bun comes with built-in Web API’s like fetch and WebSocket (reminder that Node just barely added native fetch support a few months ago). It natively implements 90% of Node-API functions, and it also comes with a super fast, built-in SQLite3 client.

• It implements Node’s module resolution algorithm, so you can use most npm packages in Bun.

• Every file is transpiled, so TypeScript and JSX just work.

That’s a lot already, but it’s only half the fun. Let’s zoom in on what makes Bun so mind-numbingly fast:

1. Unlike Node and Deno, Bun uses WebKit’s JavaScriptCore engine instead of V8. JSC is known for being harder to work with than V8, but it’s a little bit faster in some cases.

2. It’s written in Zig, instead of Rust or C++. According to Jarred Sumner (the creator), Zig is great because of its “low-level control over memory and lack of hidden control flow, which makes it much simpler to write fast software.” (We’ll take his word for it.)

3. Jarred wrote most of Bun from scratch and was obsessed with benchmarking and optimizing everything by hand.

Bottom Line: The only thing moving faster than the Bun runtime is the Bun hype train — the GH repo went from 1,700 stars to over 13,000 in the first 24 hours of last week’s v0.1.0 beta release. And it doesn’t look like it’s slowing down any time soon.

Today’s Update: The Bun hype train has definitely not slowed down since we first wrote about them. The repo is up to 42.2k stars, Jarred raised $7m of VC and hired a team, and they’re cooking up new Bun releases faster than The Great British Bake Off.

---

July 2020 (#3)

VC and OSS

Developers love to throw around phrases like, “it depends” and “tradeoffs” when making technical decisions. Of course, some frameworks/libraries are better suited for certain projects than others, but the #1 goal is to avoid having to write a think-piece about how “we chose the wrong technology 2 years ago and now we’re screwed because of it”.

However, one data point that developers never seem to take into consideration when making technology decisions is how the company behind a specific technology is financed — and how stable they may (or may not) be.

Remember Famo.us? It was a JavaScript framework that specialized in building a fancy Periodic Table of Elements HTML5 performance. It raised a $1m seed round, then a $4m Series A, then a $25m Series B, then it died pivoted. If you bought the hype and built on top of Famo.us, you, well, probably died with it (or at least felt like you died inside).

What about Meteor? It raised $20m, then its growth stalled, and it sold to Tiny Capital for what I assume was pennies on the dollar. If you bought the hype and built on top of Meteor, you, well, probably died with it.

We’re good now though, right? It’s 2020 — Kanye is running for president, we’re partying like we’re not in the middle of a global pandemic, and all the OSS we use is backed by healthy companies with solid financial fundamentals.

Wait, what’s that? Nothing has changed? Oh.

• Gatsby - $46.8m raised
• Vercel - $21m raised
• Apollo - $53.2m raised
• Netlify - $97.1m raised

Bottom Line: I’m not saying venture capital is always bad. Cloudflare, Firebase, MongoDB all come to mind as successful, VC-backed tech platforms. What I am saying is that VC startups are specifically designed to either grow fast or die trying — so we should all take that potential lack of stability into consideration when making technical decisions.

Today’s Update: Lol. I had no idea back in July 2020 that we were about to live through the most insane VC + OSS spending spree (and subsequent crash and burn) of our lifetimes. But I tried to warn y’all anyway!

---

What gets logged?

let sharedVariable = "initial";

setTimeout(() => {
  sharedVariable = "updated by first timeout";
}, 500);

setTimeout(() => {
  if (sharedVariable === "initial") {
    console.log("Shared variable not yet updated");
  } else {
    console.log("Shared variable was already updated");
  }
}, 500);

---

Here are a few of our greatest hits from the 1,600 bits we’ve written so far — only 6,400 more to reach a full KB!

1. March 2021: jQuery released v3.6 and said they “still have their eye on a 4.0 release.” That kinda feels like me saying, “I still have my eye on asking Jamie to Prom”, but we still ❤ you, jQuery. (Update: They just released v3.7 last month, so at this rate we’ll get 4.0 sometime in May 2030).

2. April 2021: Sarah Drasner (👑) created an open-source career ladder framework, which shows what expectations are at different levels for various software engineering roles. TIL that once you hit “Senior DevRel”, your bonus comp is directly tied to your number of Clubhouse followers. (Lol, remember Clubhouse?)

3. What is the hottest AI trend this year? Take the Developer Nation survey, share your opinion, win some prizes, and uncover the cutting edge advancements shaping the AI ecosystem. Start here. [sponsored]

4. Sept 2022: Evan Bacon from Expo just announced the new Expo Router, which attempts to solve one of the hairiest problems in cross-platform app development: navigation. I DM’d my good friend Evan once to see if he could help me solve a hairy problem of my own, but all he said was “Please stop sending me pictures of your back. I’m not a doctor, and I have no idea who you are.” Classic Evan.

5. June 2021: Adebola wrote a tutorial on How to create NFTs with JavaScript. This reminds me of my childhood, when my Dad and I would take all our micro-plastics and dump them in the local river as our preferred way to ruin the environment.

6. May 2021: Sandro wrote a great guide called Modern JavaScript: Everything you’ve missed over the last 10 years. It’s the perfect resource if you learned JavaScript in 2011, but then gave it all up to pursue your dream of becoming a classically trained French pastry chef, only to discover years later that the cutthroat Pâtisserie world had left you feeling jaded and alone, and so you just decided last week to get back into web development, but really wished there was a concise guide that could help fill in all the gaps of what you’d missed in JavaScript over the last decade while you were busy perfecting your pâte à choux technique. It’s also a good article if you’re just curious what’s changed in JavaScript over the last 10 years.

7. Jan 2021: AnimXYZ is a composable CSS animation toolkit that’s powered by CSS variables. AnimeXYZ would be a great name for an animation library that makes a tiny Naruto run across the bottom of your screen every time a new page loads. A few hours after I sent out that issue, Jordan Gardner created a fully functioning AnimeXYZ and sent it back to us — which proves that everyone who reads this newsletter is smart and also cool. See you for #201 on Monday ❤️.

---

What gets logged?

let sharedVariable = "initial";

setTimeout(() => {
  sharedVariable = "updated by first timeout";
}, 500);

setTimeout(() => {
  if (sharedVariable === "initial") {
    console.log("Shared variable not yet updated");
  } else {
    console.log("Shared variable was already updated");
  }
}, 500);

In JavaScript, the execution order for setTimeout callbacks with identical delays aren’t deterministic. This means we aren’t guaranteed that the first timeout callback will execute first (which can be the cause of some nasty and difficult to reproduce bugs). In reality it’s almost always what you’d expect (“Shared variable was already updated”), but it’s best not to rely on that behavior.

Here’s a famous talk by Philip Roberts to learn more about the event loop and how JavaScript handles asynchronous code.