This week we talk with Kent C. Dodds, one of the greatest React teachers in the industry, all about React! Why choose React over another framework? What are the hardest parts about learning React? You’ll find out this week!

Hemanth HM added a page to his website that highlights new features in ES2021: logical assignment operators, numerical separators (e.g. 1_000_000), Promise.any, and more. So if you don’t know, now you know.

Feross is back with a brand new web app for us to pick apart! Wormhole is the fastest way to send files on the internet and we want to know why he built it, how it works, and what crazy hacks he invented along the way.

Battlesnake’s Brad Van Vugt:

This past spring on Coding Badly, Joe and I, for whatever reason, challenged ourselves to build a camera-controlled Battlesnake. The result was “Facesnake” – a Battlesnake controlled in real-time using your face and webcam. This post outlines how we built it using Replit and tracking.js :-)

You can also jump straight to the source code or watch Facesnake in action here.

k6 describes itself as “like unit testing, for performance.” It’s an open source tool that can be run locally or on their cloud. The company behind the tool was recently acquired by Grafana, so the project is now a Grafana Labs thing. You write your scripts in JavaScript and they run on a Go backend engine.

The panel discusses all the things that have to happen before you write a lick of code. Then, for Story of the Week: Dan Abramov thinks npm audit is broken by design. We also have thoughts. Lots of ’em.

KBall and Nick Nisi sit down with Nick Fitzgerald to learn about running JavaScript on WebAssembly. They talk about almost instantaneous startup, running interpreted languages at the edge, and take a deep dive into the weeds of how Wasm based modules will change the future of application development.

Dan Abramov cuts right to the chase:

Have you heard the story about the boy who cried wolf? Spoiler alert: the wolf eats the sheep. If we don’t want our sheep to be eaten, we need better tools.

As of today, npm audit is a stain on the entire npm ecosystem. The best time to fix it was before rolling it out as a default. The next best time to fix it is now.

He goes on to lay out how it works, why it’s broken, and what changes he’s hoping to see.

Nick Reese joins the party to tell us all about Elder.js, his opinionated static site generator and web framework built with SEO in mind. Elder.js was purpose-built with large, content-heavy websites in mind and already serves in many production capacities. We discuss imposter syndrome, the startup/product mindset, Svelte’s virtues, and much more.

Solid… does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs.

Solid takes a lot of cues from React, but sets itself apart in that it doesn’t use a Virtual DOM. Here’s what Michel Weststrate had to say about it on Twitter:

Not a revolution, but really solid (pun) evolution; clean component model, really efficient run-time model, deeply embedded reactivity. Definitely think it’s worth giving it a shot in fresh new, limited scope projects!

Dr. Axel Rauschmayer gives us a feel for one of the most exciting new APIs in JavaScript-land.

The Temporal date time API is accessible via the global variable Temporal. It is a pleasure to use:

• All objects are immutable. Changing them produces new values, similarly to how strings work in JS.
• There is support for time zones and non-Gregorian calendars.
• There are several specialized classes for Temporal values (date time values with time zones, date time values without time zones, date values without time zones, etc.). That has several benefits:
  • The context of a value (time zone or not, etc.) is easier to understand.
  • It is often more obvious how to achieve a given task.
  • .toString() can be used with much less consideration.
• January is month 1.

(The Temporal proposal is currently at Stage 3. The API isn’t expected to change and is being implemented.)

This week we chat with Angie Jones about all things testing. We’ll cover unit testing, visual testing, end-to-end testing, and more!

Benny Powers is NOT pleased with what he believes is missing from the latest React release:

For five years now, there’s been a concerted, multilateral push to bring React into line with every other major framework on custom elements, enshrined in the HTML and DOM specs for years now. Much effort was spent both in public and behind the scenes to encourage the React core team to implement real support for the standards.

But then the PRs were closed, or ignored without public comment. And the issues languished. And the hopeful indications of a willingness to play ball with the rest of the web community grew stale and limp.

We, developers that want to write components that work in any frontend stack, were really hopeful that React 17 would deliver, but React is still the mobile iOS of front-end frameworks.

My spidey sense tells me that “the mobile iOS of front-end frameworks” isn’t a compliment…

Yulia Startsev from Mozilla’s SpiderMonkey team joins Jerod & Feross to talk compilers, going back to get your Master’s, making decisions as a group, process of shepherding a feature through TC39, how Firefox actually works, and LavaMoats. Yes, LavaMoats.

Tanner joins Nick to talk about his projects, react-query and react table, and discuss scratching your own itch in a maintainable way with open source.

Powered by Mediapipe, TensorFlow, and Jeeliz.

Eric Simons and the StackBlitz team recently announced WebContainers which let you run Node.js natively in your browser! This has BIG implications and leaves us with many BIG questions like: how did they do it, why did they do it, and where does it go from here? Tune in! Keyword: BIG

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

Cool, but it’d be even cooler if it detached from React so we could all use it. It’d also be nice if you could opt to having the initials overlay the gradient.

Brian LeRoux has been building the web long enough to see many ways we produce HTML come in and go out of fashion. On this episode, he joins Amal & Nick to discuss the past, present, and potential future of rendering patterns on the web. SSR, ISR, & DSR (oh my!)

This week Emma and Adam are joined by Una Kravets to discuss difficult parts of CSS.

The Parcel team is excited to release Parcel 2 beta 3! This release includes a ground up rewrite of our JavaScript compiler in Rust, which improves overall build performance by up to 10x. In addition, this post will cover some other improvements we’ve made to Parcel since our last update, along with our roadmap to a stable Parcel 2 release.

A growing trend in the JS tooling world is to replace bits and pieces with Rust || Go where it makes sense and reap the performance benefits. Congrats to the Parcel team on epic results from this rewriting effort.

For far too long React has encouraged to people to cram their data layer into their view layer. If you learn anything from the Clojure community, this is a flawed approach. I argue that we can do better, and need a data-first frontend revolution, which relegates React to what it does best: diff and render DOM nodes.

Ever wanted a language like JavaScript, but without the warts, with a great type system, and with a lean build toolchain that doesn’t waste your time?

Patrick Ecker from the ReScript Association sits down with Jerod and Feross to tell us all about this “JavaScript-like language you have been waiting for”.

Bash is great, but when it comes to writing scripts, people usually choose a more convenient programming language. JavaScript is a perfect choice, but standard Node.js library requires additional hassle before using. zx package provides useful wrappers around child_process, escapes arguments and gives sensible defaults.

I wouldn’t say JavaScript is a perfect choice for this kind of scripting, but it’s definitely a suitable one (especially if it’s the language you already know well). Here’s what scripting looks like with zx:

#!/usr/bin/env zx

await $`cat package.json | grep name`

let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,
])

let name = 'foo bar'
await $`mkdir /tmp/${name}`

Top-level await sure makes things nicer. (Deno supports this out of the box, btw.)

Paul Bakaus from Google Web Creators joins Amal, Nick, & Jerod to talk about this new initiative to promote, educate, and equip people to create on the web.

Along the way we discuss Web Stories, AMP, RSS, Google Reader, and more, of course. Join us: for a more dope web!