He came, he saw, he conquered

Introducing Rome

He came, he saw, he conquered

All roads lead to… JavaScript, obviously. But Rome wants to help make your JS journey smoother and simpler than ever.

Sebastian McKenzie announced Rome’s first beta release last week, and called it “the spiritual successor of Babel” (he’s allowed to say that because he created Babel). Sebastian has long maintained that his original plan for Babel was to use it to consolidate multiple frontend tools into one, but for a variety of reasons that never happened. Well, it’s happening now.

This first version of Rome is just a simple linter for JavaScript and TypeScript, but it eventually wants to become the one-stop shop for all your frontend tooling needs.

What does that actually look like?

Instead of using a collection of tools for compiling, bundling, and testing your frontend code, Rome will provide all of that functionality in one single package that’s built from scratch. Rome refers to this as their “toolchain”.

The bottom line

“Rome is designed to replace Babel, ESLint, webpack, Prettier, Jest, and others” – which some would say is an impossible goal. However, similar to Augustus, Sebastian found JavaScript a language of bricks, and he plans on leaving it a language of marble.

---

React Fixes Tech Debt

by @bradypp

After more than 3 years since the last Major release, React v17.0 (RC) is finally here and let me tell you – it was worth the wait.

Huh? There are no new features? How 2020.

Like your boyfriend in High School, React 17 is a “stepping stone” to future upgrades. Here’s a recap.

• Gradual Upgrades: Typically when upgrading Major versions, you’d have to upgrade your entire app. React 17 will make it easier to upgrade your app piece by piece rather than all at once.
• New Event Delegation: Traditionally React would attach events not to the DOM nodes on which you’d declare them, but to the document node itself. This worked fine, unless you had various React versions in your app. In R17, React will attach events to the root DOM container where React is rendered, therefor, fixing the multiple versions issue.
• New JSX Transform: One gotcha for new React devs is that even if you weren’t using the React package directly, you’d still need to import React because of JSX. With the new react/jsx-runtime, that’s a problem of the past.
• Remove Event Pooling: Historically React has recycled synthetic event objects. Again, this is usually fine except for rare cases where you’d want to access the event “later on” like in an updater function.

The bottom line

Though not the release we were hoping for, React 17 puts all the right pieces in place for better versions in the future.

---

This week in history

Damn BOI HE THICC

IBM released the first desktop computer to be called a “PC” 39 years ago last week. Other desktop computers had launched before it, but this IBM 5150 was the first one to get mainstream traction and is credited with kicking off the “worldwide computing revolution.” The OG PC is arguably one of the most important hardware products of the last 50 years.

• Specs: Working speed of 4.77 MHz, 16KB of RAM, dual 160KB disk drives, and a cassette port for additional storage
• Price: $1,565 ($4,440 in 2020 dollars)
• Design: Off-white before Virgil, the bright red power switch on the side (you literally flip it on and off), and a clacky keyboard that actually worked.

Your Macbook Pro might cost a lot and might not have as much RAM as you’d like, but at least you’re not paying $278 per KB. It also doesn’t need a cassette port. It just needs a dongle with 6 different adapters, #courage.

---

Spot the bug (in React 16) - Answer Below

import React from 'react'

function Form () {
  ...

  const handleChange = (e) => {
    setData((user) => ({
      ...user,
      name: e.target.value
    }))
  }

  ...
}

---

Cool bits

1. Everyone’s favorite, handsome, charming - yet humble technical author wrote the best thing you’ll ever read about React’s useRef Hook.

2. This interactive collection of TypeScript exercises gives a nice, soft intro to some foundational TypeScript capabilities and principles.

3. Shesh wrote a fantastic tutorial building a single page app in Rust. He shows you how to build an online store called “RustMart”, which sounds like a very safe and normal place to go grocery shopping.

4. Gatsby merged their two websites into a newly updated Gatsbyjs.com in order to funnel more traffic to their paid product “set up users for success through one consolidated resource.” They also released a new roadmap.

5. Jimmy made a short, insightful video about how the React Native bridge works.

6. Storybook just released v6.0, which promises to be much easier to set up while incorporating new best practices for component-driven development.

7. Debdut created a JavaScript currying library called omg-curry. Look at Curry man.

8. Afonso wrote about how building helpful tools for himself and others helped him become a senior JavaScript developer.

---

Spot the bug - Explanation

As mentioned above, React 17 removes “Event Pooling”. This is an example of where Event Pooling could go wrong with React 16. Because React used to recycle synthetic event objects, e.target.value would be gone by the time we wanted to access it. To fix this we can either upgrade to React 17 (RC), call .persist() on the event, or do as we’re doing in the code below.

...

const handleChange = (e) => {
 const name = e.target.value

 setData((user) => ({
   ...user,
   name
 }))
}

...

---