close

DEV Community

Masa Kudamatsu profile picture

Masa Kudamatsu

Self-taught web app designer/developer, currently building an app to save rich text notes about places on Google Maps.

Location Kyoto, Japan Joined Joined on  github website twitter website
Five Year Club
Four Year Club
Top 7
Writing Debut
Three Year Club
1 Week Community Wellness Streak
Two Year Club
One Year Club
4 Week Writing Streak
Paragraph styling based on x-height (and how to implement it with CSS)

Paragraph styling based on x-height (and how to implement it with CSS)

Comments
5 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.

Already have an account? Sign in
Vanilla JS carousel that is accessible, swipeable, infinite-scrolling, and autoplaying

Vanilla JS carousel that is accessible, swipeable, infinite-scrolling, and autoplaying

BERJAYA BERJAYA BERJAYA 33
Comments 5
27 min read
Responsive images: DIY implementation in 6 steps

Responsive images: DIY implementation in 6 steps

BERJAYA 3
Comments
9 min read
Day 26: Integrating Google Maps search with a React app

Day 26: Integrating Google Maps search with a React app

BERJAYA 2
Comments
29 min read
Day 25: Adding Google Maps autocomplete search to a React app

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

BERJAYA BERJAYA BERJAYA 6
Comments
26 min read
Day 24: Making autocomplete search accessible for React apps with Downshift

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

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

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

2
Comments
17 min read
Day 22: Using container transform pattern to animate the appearance of a search box

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

Comments
11 min read
Day 21: Animating transitions for a React app without external libraries

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

BERJAYA 2
Comments
10 min read
Day 20: Toggling a search box for keyboard users with React

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

1
Comments
14 min read
Day 19: Styling a popup like clouds

Day 19: Styling a popup like clouds

Comments
11 min read
Day 18: Building a close button with ripple effect as a React component

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

BERJAYA BERJAYA 6
Comments
17 min read
Day 17: Styling a search box like Google's

Day 17: Styling a search box like Google's

BERJAYA BERJAYA 6
Comments 1
17 min read
Day 16: Icon buttons should be labelled with aria-label

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

BERJAYA BERJAYA 5
Comments
6 min read
Glassmorphism for Firefox

Glassmorphism for Firefox

BERJAYA BERJAYA 9
Comments
23 min read
Day 15: Showing user's direction of movement on embedded Google Maps

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

BERJAYA BERJAYA 6
Comments
9 min read
Day 14: Tracking user location on embedded Google Maps

Day 14: Tracking user location on embedded Google Maps

BERJAYA BERJAYA 4
Comments 2
10 min read
Day 13: Flashing tapped button while user is waiting (with React and Styled Components)

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

BERJAYA BERJAYA 4
Comments
11 min read
Day 12: Showing user location on embedded Google Maps (with Geolocation API and React)

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

BERJAYA BERJAYA 5
Comments
18 min read
Day 11: web app vs native app on location services

Day 11: web app vs native app on location services

BERJAYA 3
Comments
7 min read
Day 10: Fixing a bug that renders buttons in dark mode but embedded Google Maps in light mode

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

BERJAYA BERJAYA 5
Comments
8 min read
Day 9: Picking the dark-mode color palette for web app buttons logically

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

BERJAYA BERJAYA 6
Comments
10 min read
Day 8: Positioning buttons over embedded Google Maps

Day 8: Positioning buttons over embedded Google Maps

BERJAYA BERJAYA 6
Comments
18 min read
Day 7: Making buttons look like "clouds" for embedded Google Maps

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

BERJAYA BERJAYA 9
Comments 3
26 min read
Day 6: Using Google Fonts as Google Maps place markers

Day 6: Using Google Fonts as Google Maps place markers

BERJAYA 2
Comments
30 min read
Day 5: Switching embedded Google Maps into custom dark mode after 6pm

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

BERJAYA BERJAYA 6
Comments
24 min read
Day 4: Customizing Google Maps color scheme (and its place label visibility)

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

BERJAYA BERJAYA 2
Comments
22 min read
Day 3: Visualizing design concept with mood boards

Day 3: Visualizing design concept with mood boards

Comments
9 min read
Day 2: Finding design concept to drive UI design process

Day 2: Finding design concept to drive UI design process

BERJAYA 1
Comments
11 min read
Day 1: Creating SaaS to solve my own problem

Day 1: Creating SaaS to solve my own problem

BERJAYA 2
Comments
9 min read
Don't nest <nav> inside <header>. Do nest the hamburger menu button inside <nav>.

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

BERJAYA BERJAYA BERJAYA 34
Comments 8
7 min read
Mastering the art of `alt` text for images

Mastering the art of `alt` text for images

BERJAYA BERJAYA BERJAYA 25
Comments 5
11 min read
Making embedded YouTube videos (1) responsive, (2) accessible, and (3) less YouTube-looking

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

BERJAYA BERJAYA 9
Comments 1
4 min read
Choosing semantic HTML mark-up for italic text, guided by Chicago Manual of Style

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

BERJAYA 4
Comments 1
6 min read
Everything about `<hr>`: When to use it and how to style it

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

BERJAYA BERJAYA 19
Comments 1
7 min read
Everything about `<abbr>`: when to use it and how to style it in small caps

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

BERJAYA BERJAYA 11
Comments 3
14 min read
JSON web tokens are NOT meant for authenticating the same user repeatedly: Use session tokens instead

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

BERJAYA BERJAYA 456
Comments 53
7 min read
How to handle invalid user inputs in React forms for UX design best practices

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

BERJAYA BERJAYA 15
Comments
14 min read
4 gotchas when setting up Google Maps API with Next.js and ESLint

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

BERJAYA BERJAYA 18
Comments 3
10 min read
Which fallback fonts should we choose to make FOUT less jarring

Which fallback fonts should we choose to make FOUT less jarring

BERJAYA BERJAYA 6
Comments 1
6 min read
Safari doesn't render self-hosted Google Fonts

Safari doesn't render self-hosted Google Fonts

BERJAYA 2
Comments 1
5 min read
Loading Google Fonts and any other web fonts as fast as possible in early 2021

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

BERJAYA BERJAYA 26
Comments 3
8 min read
Deploy a static Next.js site to Netlify (with Git LFS)

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

BERJAYA 1
Comments
2 min read
Definitive edition of "How to Favicon" in 2023

Definitive edition of "How to Favicon" in 2023

BERJAYA BERJAYA BERJAYA 194
Comments 43
21 min read
React Hooks to scroll-animate a top app bar in Material Design style

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

BERJAYA 5
Comments
9 min read
How to use HTML Canvas with React Hooks

How to use HTML Canvas with React Hooks

BERJAYA BERJAYA 24
Comments
7 min read
Beyond create-react-app: Why you might want to use Next.js or Gatsby instead

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

BERJAYA BERJAYA 66
Comments 4
12 min read
loading...