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

How to make API calls to Google Maps server and handle server responses to change search suggestions while users keep typing search terms

This article reviews the HTML code for accessible autocomplete search and explains how to use Downshift to implement it.

A white popup with `mix-blend-mode: lighten` and `color: black` can be wiped away with its child whose `background-color` is…

How Material Design’s container transform animation pattern can be implemented with CSS animation and the transform-origin CSS property.

Four UI state values, the data attribute selector, and the onAnimationEnd prop allow us to animate transitions for React apps.

How to autofocus interactive elements, trap the focus inside a popup, and close a popup with Esc key, all implemented with React

For a popup in web apps to appear like clouds, use the frosted glass look (aka. glassmorphism) with translucent white box shadows around.

How to build a close button with React, with the best practices of coding HTML and styling the focus state, plus the ripple effect on click

Nitty-gritty details of HTML/CSS code for a search box

Because browsers may fail to recognize an icon image’s own accessible name as its parent <button> element’s accessible name.

TL;DR

Use Geolocation API’s getUserPosition() and watchPosition() methods sequentially to keep updating user location on Google Maps in a web…

How to design and code for a web app button so that the user can see it functioning instead of being broken

How to implement a user experience in which the user presses a button to see their location on Google Maps embedded in a web app

With a web app, the user will be asked for granting permission to use their location information every time they access the app.

If the web app’s UI depends on the user’s local time, make sure that Next.js (or Gatsby) will produce HTML pages only on the client-side.

Apply the same logic as in light mode for visual consistency. But opacity and blur radius may need an extra care unique to dark mode.

How to use Styled Components with design tokens and data attribute selectors for performance and code readability

The design process and HTML/CSS coding for making unusually shaped buttons, with its shadows and focus/hover/active states styled

How I’ve used an asterisk from Google Fonts as place markers for embedded Google Maps in a web app

How I’ve customized the dark theme of Google Maps to be embedded in a web app, and coded in JavaScript to turn on the dark mode after 6pm.

This article shares what I have learned about how to custom-style Google Maps to be embedded in a web app that I’m making.

Design concept alone doesn’t help the UI design process. Designers need to visualize the concept with what is known as a mood board.

Before starting to design the user interface of an app, I believe it’s beneficial to find a design concept of the app first.