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

Dec 17 '21

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

#a11y #html #button #svg

6 min read

Templating repetitive code with Hygen

As the official "quick start" guide isn't particularly easy t...

Nov 30 '21

Definitive edition of "How to Favicon in 2021"

Great to hear that! Thanks for your feedback again!

Nov 11 '21

Definitive edition of "How to Favicon in 2021"

Thank you for your feedback, @benblazak ! On Nov 8, I've rev...

Nov 9 '21

Day 14: Tracking user location on embedded Google Maps

Thanks a lot for your encouragement!

Nov 3 '21

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

Thank you for letting me know your response! It took quite a ...

Oct 2 '21

How to Integrate the Google Maps API with React.js

One year passed since your article was written, and it's stil...

Sep 3 '21

Mastering the art of `alt` text for images

Thanks a lot for your comments! I want to incorporate your co...

Jun 12 '21

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

Thank you, Andrew, for liking my article (and following me!)....

May 27 '21

View all 13 comments

Masa Kudamatsu

Dec 3 '21

Glassmorphism for Firefox

#glassmorphism #css #firefox

22 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

4 2

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

7 3

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

13 2

7 min read

Masa Kudamatsu

May 19 '21

Mastering the art of `alt` text for images

#html #a11y #images

20 3

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

7 1

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

4 1

6 min read

Masa Kudamatsu

May 1 '21

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

#html #css #typography

14 1

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

11 3

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 #expressjs #jsonwebtoken #security

451 53

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

17 3

10 min read

Masa Kudamatsu

Feb 3 '21

Which fallback fonts should we choose to make FOUT less jarring

#fout #webfonts #webtypography

10 1

6 min read

Masa Kudamatsu

Feb 1 '21

Safari doesn't render self-hosted Google Fonts

#safari #googlefonts #webfont

2 1

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

17 3

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

107 8

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

63 4

12 min read

DEV Community is a community of 847,300 amazing developers

Recent comments

Templating repetitive code with Hygen

Definitive edition of "How to Favicon in 2021"

Definitive edition of "How to Favicon in 2021"

Day 14: Tracking user location on embedded Google Maps

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

How to Integrate the Google Maps API with React.js

Mastering the art of `alt` text for images

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