PinnedMasaKudamatsuinMasa’s Design ReviewsData visualization guideline: Get the chart type right for your dataTell me what data you have. I’ll show you which chart type you should choose to visualize your data.13 min read·Nov 12, 2023--1--1
MasaKudamatsuinWeb Dev Survey from KyotoResponsive images: DIY implementation in 6 stepsDraft <img> tags, render them with a browser, and use a bookmarklet called RespImageLint to correct the <img> tags. That’s it!8 min read·Aug 5, 2023----
MasaKudamatsuin100 Days in Kyoto to Create a Web App with Google Maps APIDay 26: Integrating Google Maps search with a React appHow to fetch data from Google Maps server so a place can be indicated on embedded Google Maps along with its information in a popup window29 min read·Jul 2, 2023----
MasaKudamatsuin100 Days in Kyoto to Create a Web App with Google Maps APIDay 25: Adding Google Maps autocomplete search to a React appHow to make API calls to Google Maps server and handle server responses to change search suggestions while users keep typing search terms25 min read·Feb 24, 2023--2--2
MasaKudamatsuin100 Days in Kyoto to Create a Web App with Google Maps APIDay 24: Making autocomplete search accessible for React apps with DownshiftThis article reviews the HTML code for accessible autocomplete search and explains how to use Downshift to implement it.13 min read·Feb 7, 2023----
MasaKudamatsuin100 Days in Kyoto to Create a Web App with Google Maps APIDay 23: Animating the closing of a popup as if button ripple effect wipes it awayA white popup with `mix-blend-mode: lighten` and `color: black` can be wiped away with its child whose `background-color` is…17 min read·Jan 8, 2023----
MasaKudamatsuin100 Days in Kyoto to Create a Web App with Google Maps APIDay 22: Using container transform pattern to animate the appearance of a search boxHow Material Design’s container transform animation pattern can be implemented with CSS animation and the transform-origin CSS property.11 min read·Jan 3, 2023----
MasaKudamatsuin100 Days in Kyoto to Create a Web App with Google Maps APIDay 21: Animating transitions for a React app without external librariesFour UI state values, the data attribute selector, and the onAnimationEnd prop allow us to animate transitions for React apps.10 min read·Jan 2, 2023----
MasaKudamatsuin100 Days in Kyoto to Create a Web App with Google Maps APIDay 20: Toggling a search box for keyboard users with ReactHow to autofocus interactive elements, trap the focus inside a popup, and close a popup with Esc key, all implemented with React14 min read·Dec 19, 2022----
MasaKudamatsuin100 Days in Kyoto to Create a Web App with Google Maps APIDay 19: Styling a popup like cloudsFor a popup in web apps to appear like clouds, use the frosted glass look (aka. glassmorphism) with translucent white box shadows around.11 min read·Dec 17, 2022----