Bytes #110 - C++ kind of sucks, actually.

This week, we’ve got Google’s succession plans, Bun tattoos, and my virtual wolfpack chatroom from 2005. Welcome to #110.

Wrestlers giving up the crown

Live footage of the C++ succession ceremony

Google wants to build the TypeScript of C++

It all went down last week in Toronto at a C++ Conference (yes those are real, I checked).

Chandler Carruth (leader of the C++, Clang, and LLVM teams at Google) stepped onstage to give the keynote speech, slowly locked eyes with everyone in the audience, and delivered the news: “C++ kind of sucks, actually.”

Ok, he didn’t say it quite like that. But he did say that the language is “falling short” of its stated goals — which include software and language evolution, creating code that is easy to write and understand, and more.

Why though? Just like your parents, most C++ issues stem from the fact that it’s pretty old and unwilling/unable to change (still love you, mom).

The language is bogged down by decades of technical debt, but it needs to focus on backwards compatibility (at the expense of incremental improvements) to make sure it doesn’t break all of the low-level systems that use it to power… (*checks notes*) most of the modern world.

After outlining all of the C++ problems, Chandler (aka Chan-C) also offered a solution that he’d been cooking up with his friends at Google: an experimental “successor language” to C++ called Carbon.

This approach is similar to JavaScript → TypeScript and Java → Kotlin: it’s designed for tight interop with C++ and large-scale adoption/migration, while giving Carbon the freedom to make improvements much faster.

Highlights:

Performance matching C++, so it doesn’t sacrifice any speed
Simplified grammar and keywords, so it’s a lot easier to learn and use
Seamless, bidirectional interoperability with C++

Bottom Line: There are lots of great options for modern, low-level programming languages out there (Rust, Go, Kotlin, and more). But the C++ ecosystem isn’t going away anytime soon, especially now that Google has stepped in the ring. Stay tuned.

Cat stuck in a pringles can

“Looks like I got stuck hand-rolling auth again” [sponsored]

FusionAuth is the holy grail

Trying to build authentication from scratch is like trying to hold in diarrhea while meeting your future in-laws – it’s painful, complicated, and you’re one wrong step away from a complete disaster.

That’s why we’re huge fans of FusionAuth.

They’re a complete auth solution that takes care of all the gross stuff like SSO, MFA, user management, and security – and if you don’t know what one or more of these things are… you probably need it.

Their Free Community version is surprisingly robust (no credit card, no limits, and it’s free forever if you self host 🙏). That makes it great to learn with or use for side projects, but it’s also got a pretty seamless integration process for existing apps.

And if you ever get stuck, you can call their support line and talk to an actual engineer who really knows auth – instead of just typing your questions into a support chat box that no one will read (like some other auth companies I know).

Check it out and never worry about auth again.

Succession characters sitting in a circle

Design system support group

Radix releases v1.0 so you can stop pretending to build your own

Remember ~2 years ago when every frontend dev wanted to work on design systems, only to realize it’s basically like working in the basement of Lumon Industries?

Fortunately, Radix UI (Latin for round) just released v1 of their set of primitive, un-styled React UI components — so we can all stop pretending to build our own 🙏.

What makes Radix so good? Every React app does styling differently, which can make certain component libraries a no-go. Radix, however, is unstyled, which makes it easy to adopt and customize.

Each component encapsulates the markup and core UI behaviors while ensuring that accessibility features like keyboard navigation, focus management and screen readers work out of the box (aka all the things your PM would cut from the scope because “we need to move fast and break things”).

Basically, Radix let’s you live your life, while they earn the finger traps for providing some top-tier goodies out of the box:

26 different components, including essentials like tooltips and modals (popovers), but also has primitives like Portal to help you compose your own components.
Great SSR support for React 18, which ensures that fast TTI for screen readers.
Small bundle size — you can adopt the components one at a time and save some bits.
Nice add ons including an accessible icon library and color palette generator.
Works with any styling or animation solution, but the team build their own zero runtime css-in-js solution too.

Bottom Line: You know a component library must be great if big bois like Vercel, Linear, and Supabase were already using it before Radix had released v1. Excited to see where it goes from here 🚀.

Spot the Bug — Sponsored by Appwrite

Their secure, open-source backend asa service gives you all the core APIs you need to build anything you can think of.

function reduceLanguages (str, lang, i) {
  if (i === this.languages.length - 1) {
    return `${str} and ${lang}.`;
  }

  return `${str} ${lang},`;
}

const user = {
  name: "Tyler",
  age: 27,
  languages: ["JavaScript", "Ruby", "Python"],
  greet() {
    const hello = `Hello, my name is ${this.name} and I know`;

    const langs = this.languages.reduce(reduceLanguages, "");

    return hello + langs;
  },
};

const greeting = user.greet()

Jobs

Frontend software engineer at Phantom

Phantom is looking for frontend engineers who enjoy massive ownership and freedom, and who want to work with a variety of technologies, including React, TypeScript, and React Query. You’ll be directly impacting the development of their flagship mobile app and working closely with the founders to improve the product. The role is fully remote.

Cool Bits

Ryan Carniato wrote about The Cost of Consistency in UI Frameworks. FWIW, “The Cost of Consistency” also sounds like the title of a (ghost-written) self-help book by a college football coach who’s about to get busted for doing something super illegal.
BugHerd simplifies Website QA and UAT testing for everyone and sends website feedback to one central location for easy management. As a result, one team was able to reduce bug ticket management time by 75% 🤯 [sponsored]
Kelly Lampotang and Bonnie Nguyen wrote about Building text animations for Instagram Stories at Meta. Those text animations have really helped take my inspirational quote + stock image IG stories to the next level: “For the strength 💪 of the wolf is the pack 👯️, and the strength of the pack is the wolf 🐺.” Smash that follow button for more pure alpha inspo.
The PyTorch team partnered with Expo to create PlayTorch — a new app and SDK for easily prototyping “AI-powered experiences.” I’m not really sure what that means, but I’m sure it’s good, right? Right??
Kara Erickson spoke about the NuxtJS and Chrome collaboration that she works on as a member of the Chrome Aurora team. What a coincidence, “Chrome Aurora” is also the wolf name that all of my brother wolves gave me in that virtual pack I joined in that chat room back in 2005.
Baldur Bjarnason wrote an article called, I don’t care how you web dev; I just need more better web apps. Why would you say something so controversial, yet so brave?
Awesome Bun is a repo full of “awesome things related to Bun” — just in case you weren’t entirely sure what phase of the hype cycle we’re in. (First one to get the Bun logo tattooed on their face wins a free hoodie!)
You.com (S-tier domain flex) is a new search engine that’s looking to target developers with features like code snippets in the search results and AI-assisted autocomplete for code searches. Here’s an example. It was very forward-thinking of them to get Kelly Clarkson to write and record their product theme song back in 2004.

Spot the Bug Solution — Sponsored by Appwrite

If you run the original code, you’ll get “Uncaught TypeError: Cannot read properties of undefined (reading ‘length’)“. The only place we’re using .length is inside our reduceLanguages function, so we can infer that this.languages is undefined and we’re incorrectly using the this keyword.

Whenever you’re trying to figure out what the this keyword is referencing, you need to look at where the function using the this keyword is being invoked. In our example, we don’t know since it’s in the implementation of reduce. To make sure reduceLanguages gets invoked in the right context and therefor has the correct this binding, we have two choices. First, the old school way - using .bind.

greet() {
  const hello = `Hello, my name is ${this.name} and I know`;

  const langs = this.languages.reduce(reduceLanguages.bind(this), "");

  return hello + langs;
}

Second, the better way - using an arrow function.

greet() {
  const hello = `Hello, my name is ${this.name} and I know`;

  const langs = this.languages.reduce((str, lang, i) => {
    if (i === this.languages.length - 1) {
      return `${str} and ${lang}.`;
    }

    return `${str} ${lang},`;   
  }, "");

  return hello + langs;
}

The reason this works is because with arrow functions, this is determined lexically. Arrow functions don’t have their own this. Instead, just like with variable lookups, the JavaScript interpreter will look to the enclosing (parent) scope to determine what this should reference.