Let me take you to a virtual tour of the lesser-known masterpiece rock garden in Kyoto that transports you to an imaginary lake sailing.

You are sailing on a lake

dyed red at sunset.

By the time the full moon rises,

you change to a small houseboat

in which you join a tea ceremony

while staring at the moon

reflected on the lake…

This is an experience you can have just by seeing waterless gardens at Koho-an Temple, a hidden gem in Kyoto: was

Image for post
Image for post
A garden view from the inside of Teahouse Bosen at Koho-an Temple (image source)

You’ve probably never heard of Koho-an Temple, which rarely opens its door to the public. Last month, I had a rare chance to visit the temple and attend a tea ceremony held in its critically-acclaimed teahouse called Bosen.

Gardens are…


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.
Image for post
Image for post
The maximum amount of green light the computer display can emit (i.e. rgb(0, 255, 0)) is 6.26 times brighter than the same amount of blue light (i.e. rgb(0, 0, 255)). Image source: contrast-ratio.com
  • 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…


Image for post
Image for post
The key lines of code in this article, written in calligraphic style :-)

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…


Why you might want to use Next.js or Gatsby instead

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…


Image for post
Image for post
Japanese Prime Minister’s approval (in blue) & disapproval (in red) ratings from November 2013 to November 2020. The grey indicates the share of people who did not answer. Image source: Asahi Shinbun Digital

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

Image for post
Image for post
The world map showing Press Freedom Index in 2017. Image source: Reporters Without Borders

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


Nine sins that Evernote 10 for Mac has committed in its user interface, breaching some of the most basic UI design principles.

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


Image for post
Image for post
An installation view of Wing Shya’s photography exhibition at Kyotographie 2020, designed by Katsuhiko Endo. Photographed by Masa Kudamatsu (the author of this article) on 14 Oct. 2020

The above photograph says it all. Endo Architect and Associates’ exhibition design for Wing Shya’s photography at Kyotographie 2020 elevates the beauty of exhibited art works by giving a proper nod to the exhibition venue.

Design features

The exhibition venue is a workshop of Kondaya Genbei, the nearly 300-year-old manufacturer of kimono belts, or obi. Obi is a very long piece of cloth, more than 4 meters long.

Rather than being hung on the walls, Wing Shya’s photographs are placed on a long, narrow table, as if it were a film strip or a piece of obi. …

MasaKudamatsu

Aspiring webapp designer/coder. Made https://line-height-picker.app. Also art/design reviewer. Formerly an academic data scientist. Based in Kyoto, Japan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store