Masa Kudamatsu

Self-taught web designer/developer. Portfolio: Triangulum Color Picker (https://triangulum.netlify.app/), Line-height Picker (https://line-height-picker.app/).

Kyoto, Japan Joined on Nov 30, 2020

Masa Kudamatsu

Feb 24

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

#googlemap #react #webdev #tutorial

26 min read

Want to connect with Masa Kudamatsu?

Create an account to connect with Masa Kudamatsu. You can also sign in below to proceed if you already have an account.

Create Account

Already have an account? Sign in

Masa Kudamatsu

Feb 7

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

#webdev #a11y #react #autocomplete

13 min read

Masa Kudamatsu

Jan 8

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

#webdev #react #css #animation

17 min read

Masa Kudamatsu

Jan 3

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

#css #animation #webdev

11 min read

Masa Kudamatsu

Jan 2

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

#webdev #react #css #animation

10 min read

Masa Kudamatsu

Dec 19 '22

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

#webdev #react #a11y #search

14 min read

Masa Kudamatsu

Dec 16 '22

Day 19: Styling a popup like clouds

#webdev #css #glassmorphism

11 min read

Masa Kudamatsu

Dec 12 '22

Day 18: Building a close button with ripple effect as a React component

#webdev #react #button #ripple

17 min read

Masa Kudamatsu

Aug 11 '22

Day 17: Styling a search box like Google's

#html #css #webdev #searchbox

17 min read

Masa Kudamatsu

Dec 17 '21

Day 16: Icon buttons should be labelled with aria-label

#a11y #html #button #svg

6 min read

Masa Kudamatsu

Dec 3 '21

Glassmorphism for Firefox

#glassmorphism #css #firefox

23 min read

Masa Kudamatsu

Nov 4 '21

Day 15: Showing user's direction of movement on embedded Google Maps

#geolocation #googlemaps #webdev #svg

9 min read

Masa Kudamatsu

Nov 2 '21

Day 14: Tracking user location on embedded Google Maps

#googlemaps #react #geolocation #webdev

10 min read

Masa Kudamatsu

Oct 26 '21

Day 13: Flashing tapped button while user is waiting (with React and Styled Components)

#styledcomponents #react #cssanimation #webdev

11 min read

Masa Kudamatsu

Oct 26 '21

Day 12: Showing user location on embedded Google Maps (with Geolocation API and React)

#geolocation #react #googlemaps #webdev

18 min read

Masa Kudamatsu

Oct 19 '21

Day 11: web app vs native app on location services

#googlemaps #geolocation #webapp #webdev

7 min read

Masa Kudamatsu

Oct 16 '21

Day 10: Fixing a bug that renders buttons in dark mode but embedded Google Maps in light mode

#nextjs #react #darkmode #webdev

8 min read

Masa Kudamatsu

Oct 15 '21

Day 9: Picking the dark-mode color palette for web app buttons logically

#darkmode #color #uidesign #button

10 min read

Masa Kudamatsu

Oct 7 '21

Day 8: Positioning buttons over embedded Google Maps

#googlemaps #styledcomponents #css #uidesign

18 min read

Masa Kudamatsu

Sep 30 '21

Day 7: Making buttons look like "clouds" for embedded Google Maps

#svg #buttons #uidesign #webdev

26 min read

Masa Kudamatsu

Sep 16 '21

Day 6: Customizing Google Maps place markers with asterisks from Google Fonts

#googlemaps #uidesign #webdev #darkmode

20 min read

Masa Kudamatsu

Sep 8 '21

Day 5: Switching embedded Google Maps into custom dark mode after 6pm

#googlemaps #darkmode #ux #webdev

24 min read

Masa Kudamatsu

Sep 3 '21

Day 4: Customizing Google Maps color scheme (and its place label visibility)

#googlemaps #saas #webdev #design

22 min read

Masa Kudamatsu

Aug 23 '21

Day 3: Visualizing design concept with mood boards

#uxdesign #uidesign #googlemaps #kyoto

9 min read

Masa Kudamatsu

Aug 20 '21

Day 2: Finding design concept to drive UI design process

#googlemaps #kyoto #design #saas

11 min read

Masa Kudamatsu

Aug 16 '21

Day 1: Creating SaaS to solve my own problem

#googlemaps #saas #kyoto #ux

9 min read

Masa Kudamatsu

Jun 12 '21

Don't nest <nav> inside <header>. Do nest the hamburger menu button inside <nav>.

#a11y #html #webdev

7 min read

Masa Kudamatsu

May 19 '21

Mastering the art of `alt` text for images

#html #a11y #images

11 min read

Masa Kudamatsu

May 18 '21

Making embedded YouTube videos (1) responsive, (2) accessible, and (3) less YouTube-looking

#html #css #iframe #youtube

4 min read

Masa Kudamatsu

May 9 '21

Choosing semantic HTML mark-up for italic text, guided by Chicago Manual of Style

#html #typography #webdev

6 min read

Masa Kudamatsu

May 1 '21

Everything about `<hr>`: When to use it and how to style it

#html #css #typography

7 min read

Masa Kudamatsu

Apr 27 '21

Everything about `<abbr>`: when to use it and how to style it in small caps

#typography #html #css

14 min read

Masa Kudamatsu

Apr 10 '21

JSON web tokens are NOT meant for authenticating the same user repeatedly: Use session tokens instead

#webdev #express #jsonwebtoken #security

451

7 min read

Masa Kudamatsu

Mar 15 '21

How to handle invalid user inputs in React forms for UX design best practices

#react #webdev #uxdesign #webform

14 min read

Masa Kudamatsu

Feb 12 '21

4 gotchas when setting up Google Maps API with Next.js and ESLint

#googlemaps #nextjs #eslint #react

10 min read

Masa Kudamatsu

Feb 3 '21

Which fallback fonts should we choose to make FOUT less jarring

#fout #webfonts #webtypography

6 min read

Masa Kudamatsu

Feb 1 '21

Safari doesn't render self-hosted Google Fonts

#safari #googlefonts #webfont

5 min read

Masa Kudamatsu

Feb 1 '21

Loading Google Fonts and any other web fonts as fast as possible in early 2021

#webfont #googlefonts #html

8 min read

Masa Kudamatsu

Jan 29 '21

Deploy a static Next.js site to Netlify (with Git LFS)

#netlify #nextjs #gitlfs

2 min read

Masa Kudamatsu

Jan 27 '21

Definitive edition of "How to Favicon in 2021"

#favicon #html

122

19 min read

Masa Kudamatsu

Jan 20 '21

React Hooks to scroll-animate a top app bar in Material Design style

#react #styledcomponents #materialdesign

9 min read

Masa Kudamatsu

Dec 9 '20

How to use HTML Canvas with React Hooks

#react #canvas

7 min read

Masa Kudamatsu

Nov 30 '20

Beyond create-react-app: Why you might want to use Next.js or Gatsby instead

#react #nextjs #gatsby #navi

12 min read

Two Year Club

One Year Club

4 Week Streak

Want to connect with Masa Kudamatsu?