Bytes.dev - Bytes: Hot Spec Summer is BACK

Bytes banner (Turn on images 😘)

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

Welcome to #106.


Megan the Stallion with a JS logo

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


Guy drowning with thumbs up

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.


Mermaids as front end frameworks

"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))

Share Bytes

ui.dev banner
 

We work hard to make Bytes something you'd want to share with your developer friends. And to make it a little easier, we'll give you free stuff when you do.

30

Your bits

Your Referral Page

Your shareable link

https://bytes.dev?x=1697807915
 

Have a product you think our developers will love?
Advertise in Bytes

youtube icon youtube icon twitter icon instagram icon

50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101

Unsubscribe from Bytes

Key phrases

Older messages

Bytes: If it renders on the edge, it's time to pledge.

Monday, June 20, 2022

This week, we've got the Death Cab for Cutie of auth solutions, lessons from Daddy Warzucks, and nowhere to hide. Welcome to #105. We are fast. We are lean. We are French. The build tool coming for

Bytes: 15 badges earns you a waffle party

Monday, June 13, 2022

This week, we've got one IDE going to heaven, fifteen GitHub badges to earn a waffle party, and a million ways to be cruel. Welcome to #104. Welcome to the cloud, my son Is the cloud heaven? Last

Bytes: What do Air Bud and Angular have in common?

Monday, June 6, 2022

This week, we've got an Air Bud crossover for the ages, a new team-building drinking game, and a master plan for infiltrating the Vue Mafia. Welcome to #103. Was this a real movie, or did we all

Bytes: Twitter beefs between framework authors

Tuesday, May 31, 2022

This week, we've got a new way to feel something test your code, some bundler fan fiction, and the hardest diss of the 18th Century. Welcome to #102. My first (and last) testing conference Fact

Bytes: Two words: React fatigue

Monday, May 23, 2022

This week, we've got blessings from the platform, math being a very cool thing, and yet another existential crisis. Welcome to #101. The Chrome team presenting new platform features Google I/O

Airbnb tests anti-party tech

Thursday, August 18, 2022

The Morning After Now available on your smart speaker and wherever you get your podcasts Apple Podcasts | Spotify | Google Play | iHeart Radio It's Thursday, August 18, 2022. Airbnb, which

Do Samsung Galaxy Watches Work With Non-Samsung Phones?

Thursday, August 18, 2022

Read in Browser Logo for Review Geek August 18, 2022 Few smartwatches match the quality of Samsung's Galaxy Watch lineup. But if you don't own a Samsung smartphone, is a Galaxy Watch actually

Post from Syncfusion Blogs on 08/18/2022

Thursday, August 18, 2022

New blogs from Syncfusion A Full-Stack Web App Using Blazor WebAssembly and GraphQL: Part 6 Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge More from the Syncfusion Ecosystem Bold

🗣🤖 Edge#218: Meta AI's BlenderBot 3, A 175B Parameter Model that can Chat About Every Topic and Organically Impr…

Thursday, August 18, 2022

The new release represents a major improvement compared to previous versions ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

iPhone 14 event 📱, Amazon's TikTok-style feed 🛍️, Reddit Developer Portal 👨‍💻

Thursday, August 18, 2022

This year's iPhone event will be held on September 7. Sign Up | View Online | Sponsor Daily Update 2022-08-18 Skyflow compared 4 approaches to data privacy. Here are the conclusions (Sponsor)

[Python Mastery] Learn Python in 21 days!!!!11 (what a lie)

Thursday, August 18, 2022

Hey there, One of the first programming books I ever bought was "Teach Yourself C in 21 Days." This four pound tome came with a CD-ROM that included an ancient version (3.1) of the Borland

[Python Dependency Pitfalls] How to set the world on fire

Thursday, August 18, 2022

Hey there, #1 on my list of dependency management pitfalls is there for a good reason: It lead to a single developer causing mayhem and breaking thousands of open-source projects around the world in

Laravel + WordPress, Silver Play Button and More

Thursday, August 18, 2022

Hey hey, So today is an important day for me, as I have unboxed my Youtube Silver Play button for 100000 subscribers, still can't believe it. Meanwhile, business as usual, will still keep putting

Migrate your Elasticsearch data across clusters with zero downtime

Thursday, August 18, 2022

Deep dive on migrating data effectively using CCS and CCR elastic | Search. Observe. Protect Cloud migration workflow using CCS and CCR Register now Date & Time September 8, 2022 1:30 pm SGT, 3:30

Physical buttons outperform touchscreens in new cars, test finds — RavynOS – Finesse of macOS, freedom of FreeBSD — and VPNs on iOS are a scam

Wednesday, August 17, 2022

Issue #862 — Top 20 stories of August 18, 2022 Issue #862 — August 18, 2022 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer. 1