Bytes #77 - Spot the bug

🚨 Announcement: This Wednesday at 4pm PT, we’ll be doing an hour-long workshop for ui.dev subscribers on React Native with Charlie Cheever, the co-founder of Quora and Expo. Grab a free ui.dev trial if you want to join.

This week, we’ve got Strapi making big moves, a new way to pretend like you’re good at CSS, and a detailed breakdown on why your Spotify Wrapped results make you superior to all of your family and friends. Welcome to #77.

beating a dead horse meme

Live look at tech Twitter humor

Open Props — A new way to pretend you know CSS

Unless your name rhymes with Bosh Bumeau… chances are that CSS isn’t your passion.

That’s why the good webLord gave us frameworks like Bootstrap and Tailwind — so we could make our apps look pretty, while simultaneously learning as little CSS as possible.

But there’s a tradeoff: Bootstrap sits at 164kb minified (😱), and Tailwind requires a complicated setup process and build step (don’t ask how big its CDN bundle is).

Enter, Open Props by Adam Argyle. It’s a brand new collection of CSS variables that you can use within your own CSS files. These variables represent design tokens for things like colors, fonts, sizes, shapes, media queries, animations, and some other fancy stuff. In other words, Tailwind: The Good Parts.

Here’s what else makes Open Props cool:

A much smaller bundle size (23kb including a normalize stylesheet), which can be shrunk even more by only including the utilities you need.
The variables give you a consistent, harmonious layout and design.
You can import it directly from the CDN (no build step required) or install it as a dependency in your project.
Since it’s just CSS variables, you can still write whatever other CSS you want. Open Props isn’t quite as clingy as a full-fledged CSS framework (or Wayne Campbell’s Ex).

The inside scoop:

“First I shipped Hack Packs from transition.style, which were ‘just the props’ of the library so folks could create their own transitions. That idea of shipping just props felt more valuable than the library itself, but wasn’t a popular concept. Open Props hopes to make shipping just props mainstream and common practice.” — Adam Argyle

Bottom Line: Ok Adam, playtime’s over — it’s time to go raise $15m to build Open Props Inc. with your own “proprietary” hosting service. I don’t make the rules.

We’ll see you next week when Tailwind v3 comes out and we’re back to saying only nice things.

Spot the Bug (answer below)

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

raygun

The only pair programmer I’ll allow [sponsored]

Raygun gives you X-ray vision

…into your Core Web Vitals. Now stop looking at me like that.

Raygun is a super powerful tool that makes it quick and easy to identify and resolve the errors and performance issues that make your users hate you.

They’ve also got first-class support for monitoring Core Web Vitals — so you can easily figure out how to improve whatever metrics Google is judging us on these days. (I’m more than just a number, @Addy Osmani.)

Raygun lets you check out your CWV scores in real time with real-user insights you can trust – not some generic dataset or “synthetics” (AKA “fake data”). You can see who experienced a poor score and drill into individual sessions and page requests to find out why 🤯.

Start a 14-day free trial of Raygun, and give your team something they’ll actually want for the Holidays — a simple, pain-free way to monitor Core Web Vitals and front-end performance.

Try it out. Thank me later.

plugin man

Y’all talkin’ about plugins?

Strapi v4 — Now with (better) plugins

Strap in… (had to) because everyone’s favorite tool for building custom API’s is back with another major release.

Quick Review: Strapi is an open-source, headless JavaScript CMS that’s built on Node.js. It’s been a go-to tool for the last few years when creating REST and GraphQL API’s that can be consumed from any client. You can host all the data yourself, or you can pay Strapi-the-company™️ to host it for you.

Side Note: It seems like there might be something to this approach of, use-your-popular-OSS-project-to-market-your-paid-hosting-product. Have any other devtool startups ever tried doing this before??

What’s new in Strapi v4:

A “deeply re-worked core” — No, I’m not talking about that one time you did Ab Ripper X in your college dorm room. The all-new Strapi core improves performance and lets you build more powerful API’s, while making Strapi itself a lot more extendable and customizable (see below).
New Plugin API — This makes it way easier to create and maintain Strapi plugins, so that you can customize and integrate with other tools. You can also use the plugins created by other Strapi stans (Strapists?).
New Design System — This new components library is meant to provide some design consistency for plugin creators (and users), so that it’s easier to build and use plugins without having to worry about building a pretty UI for it.

Bottom Line: The headless CMS space is more crowded than ever — there’s Ghost, Prismic, Netlify CMS, Keystone, and lots more. Strapi is still the most popular option for now, but it’ll be interesting to see if these new features are enough to keep it that way over the long term.

Cool Bits

PodRocket is a good web dev podcast where the LogRocket team interviews some big-time ~~JavaScript celebs~~ industry experts about technologies they’ve created. They talked to Guillermo Rauch about Next.js, Rich Harris about Svelte, and lots more. If you love Bytes, I’ve got a feeling you’ll like this pod too. [Sponsored]
CodeSandbox just released Sandpack — an open-source, in-browser bundler that powers CodeSandbox. That means you can create your own CodeSandbox for any project you want. It also means that you don’t have to hate sand anymore — even if it is coarse and rough and irritating.
Floating UI is a new, slimmed-down positioning library for tooltips, popovers, dropdowns, and more. Sound like PopperJS? Well it’s created by the same person, but this library is somehow only 600 bytes (or 4,800 bits if you’re on the metric system).
MicroDiff is a zero dependency object and array comparison library that claims to be twice as fast as most other object diff libraries. Did we verify that claim? No. But do we stand by it? Also, no.
Ben Awad gave Dan Abramov an hour-long technical coding interview. Besides re-defining state management, being on the React core team, and a great hairline – he’s just like the rest of us.
Medusa is an open-source Shopify alternative, which should finally give me the push I need to get my custom doily e-comm business up and running.
Igor Minar wrote about how he’s stepping away from Angular after 12 years of being one of the project’s core leaders. Coincidentally, after 0 years of being one of the project’s core leaders, we’ve also stepped away from Angular.
Marcin Kulik wrote about the process of Rewriting asciinema in Rust and SolidJS to make it 4x smaller and 50x faster. And since we know that no one verifies these claims, I just want to point out that I can run a 4.4s 40-yard dash.

Spot the Bug - Problem/Solution

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Arrow functions don’t have their own this. This leads to three errors in our code.

First, we’re adding properties to this in the constructor function. Again, because Arrow Functions don’t have their own this, you can’t do that.

Second, we can’t use the new keyword with an Arrow Function. This will throw a X is not a constructor error.

Third, we can’t add a property on a function’s prototype if that function is an arrow function, again, because there’s no this.

Here’s the solution -

function Animal (name, type) {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')