Skip to main content

Difference between useState and useMemo

· One min read
Filip Tammergård
Software Engineer at Einride

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])

Excess properties in TypeScript

· 2 min read
Filip Tammergård
Software Engineer at Einride

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.

Mouse, Touch and Pointer events

· 5 min read
Filip Tammergård
Software Engineer at Einride

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.

border-radius ellipses

· 4 min read
Filip Tammergård
Software Engineer at Einride

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.

Five blog rewrites in four years

· 2 min read
Filip Tammergård
Software Engineer at Einride

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.

font-feature-settings vs font-variant

· 3 min read
Filip Tammergård
Software Engineer at Einride

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;

Physical properties to logical properties

· 9 min read
Filip Tammergård
Software Engineer at Einride

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.

|| vs ??

· 2 min read
Filip Tammergård
Software Engineer at Einride

|| 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.