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.

I want to take you with me on a journey of creating a table component that is generic and statically typed. Instead of just showing an end result, I want to try out different approaches that have different pitfalls, and find the solution that seems to be the best one.

As a starting point, we want to render a table with some country data:

A few weeks ago, I wrote a blog post on how to turn an API call into a hook to make it easy to use. By then, I hadn't used TanStack Query (formerly React Query) yet. Turns out lots of cool stuff comes for free when using it. Let me show you.

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

In my last post IP Location, I used an API to get the location of a user's IP address.

In this post, I want to show how to make it a hook, so a user's IP location can be used in an easy way anywhere in your application.

You live close to , right?

How did I know that? I used Ipapi! A neat API for getting the location of IP addresses, with 30,000 free lookups per month.

Some time ago I wrote a blog post on how to access the clipboard with the navigator API. I decided to make it a custom hook to make it super easy to use. Before we go into code, let's try it out — click the button to read your clipboard:

I've had some fun with random colors lately! To speed up development, I made a utility function for getting a random color. It's really simple:

export const getRandomColor = () => {
	const red = Math.floor(Math.random() * 256)
	const green = Math.floor(Math.random() * 256)
	const blue = Math.floor(Math.random() * 256)

	const color = `rgb(${red}, ${green}, ${blue})`

	return color
}

<h1 class="h2"></h1>

That's a line of code (or at least an HTML start tag with a class) that apparently makes many people mad or confused.