While Number() and parseInt() are similar, there are important differences. Let's explore them!

The title of this post might seem ridiculous. Of course useState and useMemo are different.

But in one sense, they are quite similar.

Consider this example:

const [state] = useState(() => {
	return calculateSomething(input)
})

const memo = useMemo(() => {
	return calculateSomething(input)
}, [input])

Properties defined on an object that are not expressed by the type of the object are called excess properties.

Here's an example:

type Person = {
	firstName: string
}

const person: Person = {
	firstName: "Filip",
	lastName: "Tammergård", // ⛔️ Object literal may only specify known properties, and 'lastName' does not exist in type 'Person'.
}

In this case, TypeScript makes it clear that lastName is not defined in the Person type and is therefore not allowed.

I recently stumbled upon the JavaScript equality table. I'm always impressed by nice ways of visualizing such concepts. And I immediately thought it would be a fun thing to build myself!

Choose between double equals and triple equals to see how that affects the equality table.

I recently stumbled upon a bug related to the subtle differences between mouse, touch and pointer events. The bug made me confused—and curious. What is actually the difference between these events?

I opened an issue for the bug that you can check out if you're also curious—but before trying to understand the bug, we need to set the stage with some knowledge around different types of events.

When I started learning about CSS many years back, I learned that border-radius: 50% turns a shape into an ellipse.

div {
	width: 100px;
	height: 100px;
	background-color: hotpink;
	border-radius: 50%;
}

I never questioned why. But as you might guess, 50% is not some kind of "ellipse hack". It all makes sense.

I first started blogging in 2018. I used HTML, CSS and JavaScript—no frameworks or dependencies.

In 2019, I wanted to reuse UI components, so I rewrote my blog in React.

In 2020, I wanted to use MDX, so I rewrote my blog in Gatsby. I built my own internationalization solution. It worked, but had a few bugs that I didn't have the energy to prioritize properly.

In 2021, I wanted to learn Next.js, so I rewrote my blog in...Next.js.

Later in 2021, I wanted to ship less JavaScript, so I rewrote my blog it in Astro.

In 2022, I wanted this madness to end.

So I rewrote my blog in Docusaurus.

I did.

We recently did some font feature tweaks at work. For one thing, we changed the appearance of 0 (number zero) to include a slash (like 0), to make it easier to differentiate from capital letter O. I learned a few things in the process that I'd like to share!

Slashed zeros​

There are two main ways to configure slashed zeros.

1. font-feature-settings: "zero" 1;
2. font-variant: slashed-zero;

In the last months, I have been diving into the beautiful world of logical properties. The CSS spec has one sentence that I think describes what logical properties are in a nice way:

[Logical] properties are writing-mode relative equivalents of their corresponding physical properties.

Physical properties are simple to reason about, since they represent physical directions. Top, right, bottom and left are absolute directions. Left is always left—simple as that. Logical properties, on the other hand, are relative—the physical direction they correspond to varies.

As mentioned, the absolute nature of physical properties makes them simple to reason about. However, the absolute nature is also a limitation.

|| and ?? are similar, but there's some very important nuance. Take a look at this example:

const a = "" || "default value"
// > "default value"

const b = "" ?? "default value"
// > ""

Let me explain.