TL;DR Use aria-label to give accessible names to icon buttons. Browsers may fail to recognize an icon image's own accessible name as its parent <button> element's accessible name. Introduction My Ideal Map App, a web app I’m building, has four icon buttons on its main screen:

TL;DR To create a frosted glass look (known as glassmorphism) on the web, using backdrop-filter: blur() in CSS is the simplest approach if you can ignore Firefox users (Section 1). For Firefox users, however, there is a trick quite straightforward to implement glassmorphism: using the -moz-element() CSS function. (Section 2) If…

TL;DR Unlike Google Maps native app, a web app cannot show the direction at which the user’s device points at on the map embedded in a page. A work around is to calculate the direction of the user’s movement from the current and previous location, by using trigonometry along with React’s…

TL;DR To keep updating the user’s location shown on embedded Google Maps for a web app: Once the user presses a button, run Geolocation API’s getUserPosition() to snap the map to where the user initially is Then run the API’s watchPosition() method to start tracking the user's location without snapping the…

TL;DR Sometimes it takes a while for web apps to show the result after the user taps a button. …

TL;DR To create a web app that shows the user’s location on embedded Google Maps with React: Create a state variable that stores an instance of Google Maps, and pass this state to a button component as its prop (Section 1). Once the button is clicked, use Geolocation API to retrieve…

TL;DR With a web app, the user will be asked for granting permission to use their location information every time they access the app. Consequently, showing the user’s current location immediately after accessing the web app will force the user to give permission every time they start using the app. …

TL;DR If the web app’s UI depends on the user’s local time, make sure that static site generators such as Next.js will produce HTML pages only on the client-side. For example, if a React app’s UI turns into the dark mode automatically after 6pm at the user’s local time, use the…

TL;DR To design the dark mode color scheme for buttons on a web app with embedded Google Maps, I apply the same logic, wherever possible, as used for designing the light mode color scheme so that the dark mode UI appears visually consistent with the light mode counterpart. But I’ve learned…