Hot Spec Summer is BACK

This week, we’ve got Hot Spec Summer, Shopify’s Big H, and Bionicles fan fiction.

Welcome to #106.

---

Hot Spec Summer is back

A tradition unlike any other

Last week, we observed the only religious holiday on our Gregorian Bytes calendar: the new version of ECMAScript going live.

To celebrate, we’re bringing back Hot Spec Summer — an annual tradition where we rate each new feature based on our multivariate analysis of their perceived utility to the median JavaScript developer (aka their hotness score 🔥).

I knew that day and a half of CS algorithms at the developer bootcamp I went to would come in handy one day.

Let’s meet the newcomers:

RegExp Match Indices — This creates a new flag /d that you can put at the end of a RegExp to get the start and end indices of capture groups.

🔥 Rating: 2.3/5 — Definitely helpful for doing more complex RegExp stuff, but if you’re actually doing a lot of complex RegExp at your job, you’ve got bigger problems to worry about (like finding a different job).

Class field declarations — Lets you declare class properties and methods right on the class, without having to use the constructor.

🔥 Rating: 3/5 — Lots of frameworks (including React) have already had this feature for years thanks to Babel. But it’s nice to have it built right into the JS spec now.

Top-level await — You used to only be able to use the await keyword in async functions. But now you can use await at the top-level of a program, which is helpful when writing scripts to perform async operations, instead of using an IIFE (lol).

🔥 Rating: 4.2/5 Lots of folks are excited to use this feature, as it seems genuinely helpful for a few fairly common use cases. It barely missed out on winning the top prize, just like when Jesse Pinkman lost the most heartbreaking Showcase Showdown ever on Price is Right.

error.cause — new Error() got an upgrade that now allows you to specify what actually caused the current error.

try {
  // Do stuff
} catch (error) {
  throw new Error('Figure this out one day -', { cause: error });
}

🔥 Rating: 4.6/5 Let’s be honest, you’re going to keep ignoring the errors in your app anyway but its nice to at least know this exists.

.at() — This new method on arrays lets us get the value at a specific index, including negative indices. And that’s pretty magical because a negative index returns a value from the end of the array, making it way easier to grab the last item of an array.

🔥 Rating: 5/5 — Great new feature that’s pretty straightforward and will make all our lives easier. Most importantly, it gives JavaScript something that Python has had for years, so it gives them one less thing to talk crap about.

Bottom Line: Please remember to celebrate Hot Spec Summer responsibly.

---

Live look at your team doing UI tests

Time to stop drowning in UI errors

Building visual tests for all of the different states and layouts in your app’s UI is a special kind of nightmare fuel.

There’s basically two ways most of us do it: sink a ton of time into building a bunch of flaky tests that kinda-sorta work, or just decide to let your users become your new QA team and hope for the best.

Thankfully, the maintainers of StorybookJS got together and created a third option — Chromatic. And it’s actually pretty slick.

TLDR: It’s basically one big automated game of Spot the Difference, just with your software instead of two pictures on the back of your kids menu at IHOP.

How it works:

1. Chromatic **actually renders** each component (with real code and styling) in the cloud, and takes a snapshot.
2. It compares that snapshot to previous component versions and notifies you of any differences.
3. It makes it super fast to review changes with your team because every component is fully indexed and easy to reproduce.

It’ll take about 5 minutes for it to become your new favorite tool. Check it out.

---

“Can we play mermaids in the pool now?” -Shopify, probably

Hydrogen enters the meta-framework arena

The team at Shopify just released v1.0.0 of Hydrogen, their React meta-framework for building Shopify storefronts, this past week.

If you’re sick of hearing about meta-frameworks, we’re sick of writing about them — but sooner or later you’re gonna get roped into “helping” your friend sell their homemade essential oils online, and we want you to be prepared.

Ok, so what is Hydrogen and how is it different than “the others”?

Hydrogen, or Big H as we like to call it, is very similar to frameworks like Next.js, offering many of the same features (server rendering, api routes, etc).

The biggest difference is that Big H comes complete with components that integrate seamlessly with Shopify’s e-commerce platform. The idea is that many sites tend to outgrow the templates they start with, and Hydrogen lets them stay on Shopify but deliver that custom experience that only a “h4rdc0re engineer” using React can deliver (how to trigger a platform devrel in under 10 words) 🙃.

Here are some of the Big H-ighlights:

• Built on top of Vite — so its blazing fast (score another W for the kitty gawd)

• React Server Components (RSC) — so they can be the most cutting edge, buzzword rich fw in the game (and also less JS on the client)

• Parallel Data Fetching — nested routes are so 2000&late. Hydrogen does the same thing (parallel data fetching) using some GraphQl magic instead

• Supports Tailwind out of the box — so you can become a ecomm god in 3 easy steps: 1) buy a fully built design from TW, 2) throw that ish directly into Big H, 3) Profit

• Hosted on Oxygen — In addition to loving Periodic Table metaphors, Shopify wants to host your app with their own platform. But if you wanna be a cowboy, they’re also working to support Vercel and Netlify

Bottom Line: Hydrogen might be the best way to build an e-commerce site in 2022, but it’s still not an excuse to sell something as ugly as Allbirds.

---

Spot the Bug — Sponsored by Raygun

Raygun is the best tool for catching and resolving bugs before they crash prod. We use it at ui.dev and it’s genuinely really helpful.

function eventuallyFail (time) {
  setTimeout(() => {
    throw Error("Oops!")
  }, time)
}

try {
  eventuallyFail(1000)
} catch (error) {
  console.error(error.message)
}

---

Cool Bits

1. Moon is a new, Rust-based build system/monorepo for the JS ecosystem that’s heavily inspired by Bazel and Princess Yue of the Northern Water Tribe.

2. BugHerd an easy way to get *actually helpful* feedback on a website from your team (or a client). No screenshots, long email chains, or worrying about what browser everyone is using. [sponsored]

3. Deno just raised a $21 million Series A from Sequoia Capital to continue building “JavaScript for the serverless era.” R*cession? Never heard of her.

4. Do you ever think about how most OSS contests and surveys are just thinly veiled marketing campaigns for VC-backed software startups? Yeah, me neither. In other news, Tuple will send your favorite OSS creator on a $10,000 vacation if you vote for them. Lots of great candidates here, but our official endorsement is for Tanner Linsley (the creator of React Query and React Table) and whoever else doesn’t get paid FAANG bucks.

5. Defensive CSS is a helpful collection of practical CSS and design tips for building future-proof UI’s. Personally, the only time I get defensive about my CSS is whenever someone looks at it for more than 5 seconds. But that’s just me.

6. Zhenghao He wrote a great (and thorough) article about When You Should Prefer Map Over Object In JavaScript. If only Charlie had this Map when he went to CandyMountain.

7. Speaking of things that definitely aren’t marketing, Stack Overflow just released its 2022 Developer Survey. And if you’re ever feeling down, just be grateful that you’re not one of the 10% of professional developers still using Angular.js at their day job — unless you are, in which case, thoughts and prayers? 🥴

8. The React Team wrote an update about what they’ve been working on for the last few months. I wrote a very similar blog post about what I’ve been working on, but hardly anyone read it — apparently no one appreciates the dying art form of Bionicles fan fiction anymore.

---

Spot the Bug Solution — Sponsored by Raygun

function eventuallyFail (time) {
  setTimeout(() => {
    throw Error("Oops!")
  }, time)
}

try {
  eventuallyFail(1000)
} catch (error) {
  console.error(error.message)
}

try/catch is synchronous. By the time our error is thrown, the try/catch block will be long gone - leaving us with Uncaught Error: Oops!. To fix this, we want to rely on promises which allow us more async control.

function eventuallyFail (time) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      rej(Error("Oops!"))
    }, time)
  })
}

eventuallyFail(1000)
  .catch((reason) => console.error(reason.message))