Open in app

Sign in

Write

Sign in

MasaKudamatsu
MasaKudamatsu

183 Followers

Home

About

Published in

Masa’s Design Reviews

·Pinned

Data visualization guideline: Get the chart type right for your data

Tell me what data you have. I’ll show you which chart type you should choose to visualize your data. Last updated on November 12, 2023. — Motivation Google “how to choose chart type”, and you’ll get tons of articles advising you on this first step of any data visualization. As far as I see, all these guidelines introduce one chart type after another and then explain its pros and cons. That is NOT how we work on…

Data Visualization

13 min read

Data visualization guideline: Get the chart type right for your data
Data visualization guideline: Get the chart type right for your data
Data Visualization

13 min read


Published in

Web Dev Survey from Kyoto

·Aug 5

Responsive images: DIY implementation in 6 steps

TL;DR If you as a web developer need to make images responsive to screen widths and device pixel ratios on your own, take this 6-step procedure: Step 1: Figure out the maximum width of each image required by the design of your webpage. Let’s say, it is 624px. Step 2: Convert…

Web Development

8 min read

Responsive images: DIY implementation in 6 steps
Responsive images: DIY implementation in 6 steps
Web Development

8 min read


Published in

100 Days in Kyoto to Create a Web App with Google Maps API

·Jul 2

Day 26: Integrating Google Maps search with a React app

TL;DR To create a user experience like this:

Web Development

29 min read

Day 26: Integrating Google Maps search with a React app
Day 26: Integrating Google Maps search with a React app
Web Development

29 min read


Published in

100 Days in Kyoto to Create a Web App with Google Maps API

·Feb 24

Day 25: Adding Google Maps autocomplete search to a React app

TL;DR To create an user experience with Google Maps place search like this: your React app needs the code as follows: // Each comment refers to the section of this article // which explains the code block that follows. import {useMemo, useState} from 'react'; import {useCombobox} from 'downshift'; export const SearchBox = () =>…

Web Development

25 min read

Day 25: Adding Google Maps autocomplete search to a React app
Day 25: Adding Google Maps autocomplete search to a React app
Web Development

25 min read


Published in

100 Days in Kyoto to Create a Web App with Google Maps API

·Feb 7

Day 24: Making autocomplete search accessible for React apps with Downshift

TL;DR To equip your React app with accessible autocomplete search, use the useCombobox hook from the Downshift library. It makes web developers’ life a lot easier than coding from scratch. …

Web Development

13 min read

Day 24: Making autocomplete search accessible for React apps with Downshift
Day 24: Making autocomplete search accessible for React apps with Downshift
Web Development

13 min read


Published in

100 Days in Kyoto to Create a Web App with Google Maps API

·Jan 8

Day 23: Animating the closing of a popup as if button ripple effect wipes it away

A white popup with `mix-blend-mode: lighten` and `color: black` can be wiped away with its child whose `background-color` is `currentColor`. — TL;DR Suppose you have the following DOM structure for a popup: <div class="popup" data-closing='false'> <span class="ripple"></span> </div> where the data-closing attribute will turn true when the user presses the close button of the popup. Then, the following CSS code

Web Development

17 min read

Day 23: Animating the closing of a popup as if button ripple effect wipes it away
Day 23: Animating the closing of a popup as if button ripple effect wipes it away
Web Development

17 min read


Published in

100 Days in Kyoto to Create a Web App with Google Maps API

·Jan 3

Day 22: Using container transform pattern to animate the appearance of a search box

TL;DR This article describes a simple way of implementing Material Design’s container transform animation with animation and transform-origin CSS properties. …

Web Development

11 min read

Day 22: Using container transform pattern to animate the appearance of a search box
Day 22: Using container transform pattern to animate the appearance of a search box
Web Development

11 min read


Published in

100 Days in Kyoto to Create a Web App with Google Maps API

·Jan 2

Day 21: Animating transitions for a React app without external libraries

TL;DR With four steps of coding, we can animate transitions for a React app without relying on external libraries. First, use four state values for UI change: closed, opening, open, and closing. Second, render a component when the state value is either opening, open, or closing. In other words: {state !==…

Web Development

10 min read

Day 21: Animating transitions for a React app without external libraries
Day 21: Animating transitions for a React app without external libraries
Web Development

10 min read


Published in

100 Days in Kyoto to Create a Web App with Google Maps API

·Dec 19, 2022

Day 20: Toggling a search box for keyboard users with React

TL;DR To toggle the visibility of a search box with React in a keyboard user-friendly manner, do the following: Use the useEffect hook to trigger a keydown event handler for hiding the search box with the Esc key Add the autoFocus prop to <input type="search"> so that the user can immediately…

React

14 min read

Day 20: Toggling a search box for keyboard users with React
Day 20: Toggling a search box for keyboard users with React
React

14 min read


Published in

100 Days in Kyoto to Create a Web App with Google Maps API

·Dec 17, 2022

Day 19: Styling a popup like clouds

TL;DR For a popup in web apps to appear like clouds, use the frosted glass look (aka. glassmorphism) with translucent white box shadows around (as seen in the top image). And write the CSS code as in the CodeSandbox demo for this article. Introduction My Ideal Map, a web app I’m buidling…

CSS

11 min read

Day 19: Styling a popup like clouds
Day 19: Styling a popup like clouds
CSS

11 min read

MasaKudamatsu

MasaKudamatsu

183 Followers

Self-taught web developer (currently in search of a job) whose portfolio is available at masakudamatsu.dev

Following
  • Andrew Somers

    Andrew Somers

  • Thomas Jockin

    Thomas Jockin

  • Kaki Okumura

    Kaki Okumura

  • Nate Baldwin

    Nate Baldwin

  • Takahiko Kawasaki

    Takahiko Kawasaki

See all (28)

Help

Status

About

Careers

Blog

Privacy

Terms

Text to speech

Teams