DEV Community 👩‍💻👨‍💻

Masa Kudamatsu profile picture

Masa Kudamatsu

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

Location Kyoto, Japan Joined Joined on  github website twitter website
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

Reactions 2 Comments
17 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
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

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

Reactions 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

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

Day 17: Styling a search box like Google's

Reactions 5 Comments
17 min read
Day 16: Icon buttons should be labelled with aria-label

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

Reactions 5 Comments
6 min read
Glassmorphism for Firefox

Glassmorphism for Firefox

Reactions 7 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

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

Day 14: Tracking user location on embedded Google Maps

Reactions 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)

Reactions 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)

Reactions 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

Reactions 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

Reactions 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

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

Day 8: Positioning buttons over embedded Google Maps

Reactions 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

Reactions 9 Comments 3
26 min read
Day 6: Customizing Google Maps place markers with asterisks from Google Fonts

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

Reactions 2 Comments
20 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

Reactions 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)

Reactions 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

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

Day 1: Creating SaaS to solve my own problem

Reactions 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>.

Reactions 21 Comments 3
7 min read
Mastering the art of `alt` text for images

Mastering the art of `alt` text for images

Reactions 22 Comments 4
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

Reactions 8 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

Reactions 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

Reactions 14 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

Reactions 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

Reactions 451 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

Reactions 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

Reactions 17 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

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

Safari doesn't render self-hosted Google Fonts

Reactions 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

Reactions 18 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)

Reactions 1 Comments
2 min read
Definitive edition of "How to Favicon in 2021"

Definitive edition of "How to Favicon in 2021"

Reactions 122 Comments 9
19 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

Reactions 4 Comments
9 min read
How to use HTML Canvas with React Hooks

How to use HTML Canvas with React Hooks

Reactions 16 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

Reactions 65 Comments 4
12 min read
loading...