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
Delivered to 114,267 developers every Monday
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.
The Bytes newsletter is a work of art! It’s the only dev newsletter I’m subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.
Bytes has been my favorite newsletter since its inception. It’s my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.
Literally the only newsletter I’m waiting for every week.
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.
The sense of humor and structure of the Bytes Newsletter is first class and the information that comes with it is enough to make a mini course.
Very few newsletters manage to be useful and not very boring. @uidotdev manages to achieve these pretty effortlessly. You can almost see Tyler chuckle as he writes them.