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
Responsive images: DIY implementation in 6 steps
masakudamatsu profile

Responsive images: DIY implementation in 6 steps

2
Comments
9 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
Day 26: Integrating Google Maps search with a React app
masakudamatsu profile

Day 26: Integrating Google Maps search with a React app

#react #googlemaps #webdev #a11y
2
Comments
29 min read
Day 25: Adding Google Maps autocomplete search to a React app
masakudamatsu profile

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

#googlemap #react #webdev #tutorial
Comments
26 min read
Day 24: Making autocomplete search accessible for React apps with Downshift
masakudamatsu profile

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

#webdev #a11y #react #autocomplete
Comments
13 min read
Day 23: Animating the closing of a popup as if button ripple effect wipes it away
masakudamatsu profile

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

#webdev #react #css #animation
2
Comments
17 min read
Day 22: Using container transform pattern to animate the appearance of a search box
masakudamatsu profile

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

#css #animation #webdev
Comments
11 min read
Day 21: Animating transitions for a React app without external libraries
masakudamatsu profile

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

#webdev #react #css #animation
1
Comments
10 min read
Day 20: Toggling a search box for keyboard users with React
masakudamatsu profile

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

#webdev #react #a11y #search
1
Comments
14 min read
Day 19: Styling a popup like clouds
masakudamatsu profile

Day 19: Styling a popup like clouds

#webdev #css #glassmorphism
Comments
11 min read
Day 18: Building a close button with ripple effect as a React component
masakudamatsu profile

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

#webdev #react #button #ripple
6
Comments
17 min read
Day 17: Styling a search box like Google's
masakudamatsu profile

Day 17: Styling a search box like Google's

#html #css #webdev #searchbox
6
Comments 1
17 min read
Day 16: Icon buttons should be labelled with aria-label
masakudamatsu profile

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

#a11y #html #button #svg
5
Comments
6 min read
Glassmorphism for Firefox
masakudamatsu profile

Glassmorphism for Firefox

#glassmorphism #css #firefox
8
Comments
23 min read
Day 15: Showing user's direction of movement on embedded Google Maps
masakudamatsu profile

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

#geolocation #googlemaps #webdev #svg
6
Comments
9 min read
Day 14: Tracking user location on embedded Google Maps
masakudamatsu profile

Day 14: Tracking user location on embedded Google Maps

#googlemaps #react #geolocation #webdev
4
Comments 2
10 min read
Day 13: Flashing tapped button while user is waiting (with React and Styled Components)
masakudamatsu profile

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

#styledcomponents #react #cssanimation #webdev
4
Comments
11 min read
Day 12: Showing user location on embedded Google Maps (with Geolocation API and React)
masakudamatsu profile

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

#geolocation #react #googlemaps #webdev
5
Comments
18 min read
Day 11: web app vs native app on location services
masakudamatsu profile

Day 11: web app vs native app on location services

#googlemaps #geolocation #webapp #webdev
3
Comments
7 min read
Day 10: Fixing a bug that renders buttons in dark mode but embedded Google Maps in light mode
masakudamatsu profile

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

#nextjs #react #darkmode #webdev
5
Comments
8 min read
Day 9: Picking the dark-mode color palette for web app buttons logically
masakudamatsu profile

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

#darkmode #color #uidesign #button
6
Comments
10 min read
Day 8: Positioning buttons over embedded Google Maps
masakudamatsu profile

Day 8: Positioning buttons over embedded Google Maps

#googlemaps #styledcomponents #css #uidesign
6
Comments
18 min read
Day 7: Making buttons look like "clouds" for embedded Google Maps
masakudamatsu profile

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

#svg #buttons #uidesign #webdev
9
Comments 3
26 min read
Day 6: Using Google Fonts as Google Maps place markers
masakudamatsu profile

Day 6: Using Google Fonts as Google Maps place markers

#googlemaps #uidesign #webdev #darkmode
2
Comments
30 min read
Day 5: Switching embedded Google Maps into custom dark mode after 6pm
masakudamatsu profile

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

#googlemaps #darkmode #ux #webdev
6
Comments
24 min read
Day 4: Customizing Google Maps color scheme (and its place label visibility)
masakudamatsu profile

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

#googlemaps #saas #webdev #design
2
Comments
22 min read
Day 3: Visualizing design concept with mood boards
masakudamatsu profile

Day 3: Visualizing design concept with mood boards

#uxdesign #uidesign #googlemaps #kyoto
Comments
9 min read
Day 2: Finding design concept to drive UI design process
masakudamatsu profile

Day 2: Finding design concept to drive UI design process

#googlemaps #kyoto #design #saas
1
Comments
11 min read
Day 1: Creating SaaS to solve my own problem
masakudamatsu profile

Day 1: Creating SaaS to solve my own problem

#googlemaps #saas #kyoto #ux
2
Comments
9 min read
Don't nest <nav> inside <header>. Do nest the hamburger menu button inside <nav>.
masakudamatsu profile

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

#a11y #html #webdev
31
Comments 8
7 min read
Mastering the art of `alt` text for images
masakudamatsu profile

Mastering the art of `alt` text for images

#html #a11y #images
25
Comments 5
11 min read
Making embedded YouTube videos (1) responsive, (2) accessible, and (3) less YouTube-looking
masakudamatsu profile

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

#html #css #iframe #youtube
8
Comments 1
4 min read
Choosing semantic HTML mark-up for italic text, guided by Chicago Manual of Style
masakudamatsu profile

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

#html #typography #webdev
4
Comments 1
6 min read
Everything about `<hr>`: When to use it and how to style it
masakudamatsu profile

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

#html #css #typography
15
Comments 1
7 min read
Everything about `<abbr>`: when to use it and how to style it in small caps
masakudamatsu profile

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

#typography #html #css
11
Comments 3
14 min read
JSON web tokens are NOT meant for authenticating the same user repeatedly: Use session tokens instead
masakudamatsu profile

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

#webdev #express #jsonwebtoken #security
451
Comments 53
7 min read
How to handle invalid user inputs in React forms for UX design best practices
masakudamatsu profile

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

#react #webdev #uxdesign #webform
15
Comments
14 min read
4 gotchas when setting up Google Maps API with Next.js and ESLint
masakudamatsu profile

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

#googlemaps #nextjs #eslint #react
18
Comments 3
10 min read
Which fallback fonts should we choose to make FOUT less jarring
masakudamatsu profile

Which fallback fonts should we choose to make FOUT less jarring

#fout #webfonts #webtypography
6
Comments 1
6 min read
Safari doesn't render self-hosted Google Fonts
masakudamatsu profile

Safari doesn't render self-hosted Google Fonts

#safari #googlefonts #webfont
2
Comments 1
5 min read
Loading Google Fonts and any other web fonts as fast as possible in early 2021
masakudamatsu profile

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

#webfont #googlefonts #html
19
Comments 3
8 min read
Deploy a static Next.js site to Netlify (with Git LFS)
masakudamatsu profile

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

#netlify #nextjs #gitlfs
1
Comments
2 min read
Definitive edition of "How to Favicon" in 2023
masakudamatsu profile

Definitive edition of "How to Favicon" in 2023

#favicon #html
133
Comments 30
21 min read
React Hooks to scroll-animate a top app bar in Material Design style
masakudamatsu profile

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

#react #styledcomponents #materialdesign
4
Comments
9 min read
How to use HTML Canvas with React Hooks
masakudamatsu profile

How to use HTML Canvas with React Hooks

#react #canvas
17
Comments
7 min read
Beyond create-react-app: Why you might want to use Next.js or Gatsby instead
masakudamatsu profile

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

#react #nextjs #gatsby #navi
66
Comments 4
12 min read
loading...