Oh, well this is awkward.

Issue #80.December 27, 2021.2 Minute read.
Bytes

It’s the last Bytes issue of the year so we’ve got a recap of Vercel’s big 2021, some worthless JavaScript knowledge, and the Coolest Bits of the year. Welcome to #80.

Guillermo's Kitchen

I got a dirty mouth, but my kitchen’s clean

Vercel’s Big Year

December 2020 was a different time… before Space Jam 2 had ruined our childhoods and Web3 had ruined Twitter. Back then, Vercel was just another early stage devtool startup with a popular OSS framework — and we didn’t even know what Guillermo’s kitchen looked like 😱.

But times have changed.

Npm downloads for Next.js have doubled in the last 12 months (after tripling in 2020), Vercel’s paid hosting product has taken off, and the company is officially a majestic unicorn (which means if you can drink its blood, you’ll live forever).

Here’s a recap of Vercel’s big year:

  • Launched Next.js 11 & 12 — Some of the best new features included the next/image component, a new Rust compiler for faster builds, new Next.js Middleware, ESM support, and Conformance for making sure your site’s Core Web Vitals are on fleek.

  • Raised some serious cash — From last December to this December, Vercel has raised $292m (most recently at a $2.5b valuation). That’s what folks in the finánce industry commonly refer to as racks on racks on racks.

  • Hired half the popular white guys you follow on Twitter — They’ve started using that cash to hire folks like Rich Harris (now working on Svelte full time) and Jared Palmer (they acquired Turborepo too).

What’s in store for 2022? Vercel has been talking about building an “edge-first” end-to-end platform for the web. That’s a lot of buzzwords, but it’s probably safe to say that Guillermo’s in the kitchen, cookin’ up something good.

Ugly Cookie

When you build your own chat app from scratch [sponsored]

Stream is how smart developers build chat apps

Building a chat app from scratch is like trying to make Pop-Tarts from scratch — overly complex and completely unnecessary in 2021.

That’s why most developers just use Stream. It’s the #1 chat-messaging and activity feed platform in the world — because it handles all of the mess that comes with building chat apps for you.

bUt WilL iT SCaLe? I knew you’d ask that. Well maybe you should ask Match.com — they use Stream to let their 21.5 million members send each other heartfelt messages like, “You up?” every single day (and night).

Adobe, Imgur, SoundCloud and a bunch of other companies have built apps with Stream too. Chances are, you’ve probably already used Stream’s chat without even realizing it 🤯.

Check out this tutorial to see how easy it is to build a React chat app that leverages Stream’s Chat API and their React Components. The API is surprisingly flexible, which means you can build pretty much any chat experience you’d ever need.

The Coolest Bits of 2021

Here’s a list of our most popular Bits of the year.

  1. You know how 50% of blog posts could have just been tweets? Well, Alex Kondov wrote a blog post so in-depth that it probably should become a book. We present to you, The Tao of React: Software Design, Architecture & Best Practices. Just call it an e-book and charge $10 for it, Alex (and pay us 15% for being your e-publisher).

  2. Mark Dalgleish created Sprinkles – A zero-runtime, type-safe atomic CSS-in-TypeScript framework. Sprinkles would also be a great name for the pug we’ve been wanting to adopt as a company.

  3. Kyle Shevlin wrote about why your React components should only use custom hooks. Most of you will hate this premise at first, but you might come around by the end of the article. Kind of like the movie Master of Disguise.

  4. Corepack is a new, experimental Node.js feature for automatically managing your package managers (not a joke). Can’t wait to see which package gets chosen as assistant to the regional package manager of package managers.

  5. (👑) Sarah Drasner created a Fortnite VSCode theme that’ll trick your brain into thinking you’re a kid playing a fun video game, instead of an adult working for a company that thinks it’s “fun” to ring a gong every time they sell something to another company.

  6. Emily and Phil wrote a fantastic article about how Not All Components Are Created Equal – which reminded me of how not all bento boxes are created equal either.

  7. Wolfgang Ettlinger wrote about The Invisible JavaScript Backdoor – which (sadly) does not lead to a magical world of talking animals and Turkish delight.

  8. 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.

Worthless Fun JS knowledge

Have you ever wondered how you’d create your own implementation of Array in JavaScript? No? Oh, well this is awkward.

function array () {
  let arr = Object.create(array.prototype)

  Object.defineProperty(arr, 'length', {
    value: 0,
    enumerable: false,
    writable: true,
  })

  for (key in arguments) {
    arr[key] = arguments[key]
    arr.length += 1
  }

  return arr
}

array.prototype.push = function (element) {
  this[this.length] = element
  this.length++
  return this.length
}

array.prototype.pop = function () {
  this.length--
  const elementToRemove = this[this.length]
  delete this[this.length]
  return elementToRemove
}

array.prototype.filter = function (cb) {
  let result = array()

  for (let index in this) {
    if (this.hasOwnProperty(index)) {
      const element = this[index]

      if (cb(element, index)) {
        result.push(element)
      }
    }
  }

  return result
}

If you’re curious or confused by the code, we wrote about it here.