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.
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
🔥 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
🔥 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.
🔥 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.
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:
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:
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.
Spot the Bug Solution — Sponsored by Raygun