Masa Kudamatsu articles - 46 total
Vanilla JS carousel that is accessible, swipeable, infinite-scrolling, and autoplaying
TL;DR A carousel that is accessible, swipeable, infinite-scrolling, and autoplaying can be...
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...
Day 26: Integrating Google Maps search with a React app
TL;DR To create a user experience like this: your React app needs to have a component...
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...
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...
Day 23: Animating the closing of a popup as if button ripple effect wipes it away
TL;DR A white popup with mix-blend-mode: lighten and color: black can be wiped away with...
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...
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...
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...
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....
Day 18: Building a close button with ripple effect as a React component
TL;DR This article goes through the steps to build a close button as a React component....
Day 17: Styling a search box like Google's
TL;DR To style a search box like the one on google.com, write the HTML and CSS code as in...
Day 16: Icon buttons should be labelled with aria-label
TL;DR Use aria-label to give accessible names to icon buttons. Browsers may fail to...
Glassmorphism for Firefox
UPDATE (Aug 26, 2022): Firefox version 103 or higher (released on July 26, 2022 or later) supports...
Day 15: Showing user's direction of movement on embedded Google Maps
TL;DR Unlike Google Maps native app, a web app cannot show the direction at which the...
Day 14: Tracking user location on embedded Google Maps
TL;DR To keep updating the user's location shown on embedded Google Maps for a web...
Day 13: Flashing tapped button while user is waiting (with React and Styled Components)
TL;DR Sometimes it takes a while for web apps to show the result after the user taps a...
Day 12: Showing user location on embedded Google Maps (with Geolocation API and React)
TL;DR To create a web app that shows the user's location on embedded Google Maps with...
Day 11: web app vs native app on location services
TL;DR With a web app, the user will be asked for granting permission to use their location...
Day 10: Fixing a bug that renders buttons in dark mode but embedded Google Maps in light mode
TL;DR If the web app's UI depends on the user's local time, make sure that static site...
Day 9: Picking the dark-mode color palette for web app buttons logically
TL;DR To design the dark mode color scheme for buttons on a web app with embedded Google...
Day 8: Positioning buttons over embedded Google Maps
TL;DR For a web app that embeds full-screen Google Maps, I position the menu button at the...
Day 7: Making buttons look like "clouds" for embedded Google Maps
TL;DR I've made a button look like a cloud for the web app I'm currently building. The...
Day 6: Using Google Fonts as Google Maps place markers
TL;DR This article describes how I've used an asterisk from Google Fonts as place markers...
Day 5: Switching embedded Google Maps into custom dark mode after 6pm
TL;DR This article describes three things: How I’ve created a custom dark mode theme of...
Day 4: Customizing Google Maps color scheme (and its place label visibility)
TL;DR This article describes How to customize the style of Google Maps to be embedded on...
Day 3: Visualizing design concept with mood boards
TL;DR In the previous article, I discussed the importance of having a design concept...
Day 2: Finding design concept to drive UI design process
TL;DR Before starting to design the user interface of an app, I believe it's beneficial to...
Day 1: Creating SaaS to solve my own problem
TL;DR Solving your own problem is the best way to start creating a SaaS on your own....
Don't nest <nav> inside <header>. Do nest the hamburger menu button inside <nav>.
This article may be provocative. Let me know what you think. 1. Motivation Imagine you...