NOTE: This article is written as a help document for Triangulum Color Picker.

What is chroma?

Chroma is a measure of colorfulness. Briggs (2016) provides the best account of it I’ve ever seen:

“… for an object to have high chroma it must reflect [or] transmit saturated light in relatively large amounts” — David Briggs

In this quote, “saturated light” means colored light (red light, blue light, etc.) as oppose to white light.

Chroma vs. Saturation

Chroma and saturation are often used interchangeably. Technically speaking, however, these two terms refer to different concepts.

Saturation refers to the absence of white light, while chroma concerns the presence…

NOTE: This article is written as a help document for Triangulum Color Picker.

What is luminance?

By luminance, we mean how bright a color is to human perception. If we compare two colors, the one with higher luminance appears brighter to human eyes than the other.

• It is NOT about the physical amount of light, though. For example, when we see the same amount of green and blue light, green appears much brighter than blue.

• Why? It’s because human eyes are more responsive to green than to blue. See Blaunch (2014) for the best account of why.

Why should we choose color by luminance?

Luminance is important for graphic design…

I’ve set up Google Maps JavaScript API for my Next.js app. The API documentation on how to get started (Google 2021) is very well-written, but I encountered a few gotchas when the API is used together with Next.js and also ESLint. Let me take note of them below for your information (and for my future self).

Gotcha #1: CSS

TL;DR

Add the following CSS declaration:

#__next {
  height: 100%;
}

Detail

To show a Google Map across the entire browser window, Google (2021) recommends the following CSS code:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}#map {
  height: 100%;
}

where #map…

(If you’re not a Medium member, click here to read this article.)

I’m making a color picker web app with React. Drawing a raster image like the color picker on the web requires a <canvas> HTML element. But the HTML canvas and React do not easily go hand in hand.

I’ve found a bunch of web articles on the topic, most of which are outdated as they use React class components. Those with React hooks are helpful but not fully accurate. So it took quite a while for me to make it work in my web dev project.

To help…

Limitations of create-react-app

Once you start learning web development, sooner or later you’ll learn React and use create-react-app to kickstart the building of your first React app. Or at least that’s what CodeCademy taught me to do (in 2019). And I built my first React app, Line-height Picker, out of create-react-app.

However, I’ve noticed web developers often point out two limitations of create-react-app: (1) it takes time for the landing page to be rendered; and (2) search engine crawlers may fail to index the app.

In addition, what keeps bugging me while I’m building an app from create-react-app is this: (3) it doesn’t…

Prepared by the digital edition of Asahi Shinbun, one of the major national newspapers of Japan, this stacked bar chart shows the approval (blue) and disapproval (red) ratings for Japanese Prime Minister over time.

This kind of data is usually visualized with a line chart in which two lines indicate approval and disapproval ratings over time:

(This article was originally written on 3 May, 2017.)

Social science is usually very poor at visual communication. But the map of the Press Freedom Index for 2017 is a rare exception. Important information is intuitively and pleasantly communicated.

First of all, the color scale is meaningful: white for clean, yellow for warning, red for alarming, orange in between, and black for hell. …

(If you’re not a Medium member, click here to read this article.)

I’ve been a long-time user of Evernote, ever since 2011, with over 23,000 notes in total. So you can say I’m one of its loyal customers.

With the release of Evernote 10 earlier this month, however, I’ve made up my mind: I’m going to migrate all of my notes to another note-taking app.

It’s not because of the removal of several features, as heavy users such as Darryl (2020) complain. …