Skip to content
Navigation menu
Search
Powered by
Search
Algolia
Search
Log in
Create account
DEV Community
Close
100 Days in Kyoto to Create a Web App with Google Maps API Series' Articles
Back to Masa Kudamatsu's Series
Day 1: Creating SaaS to solve my own problem
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Aug 16 '21
Day 1: Creating SaaS to solve my own problem
#
googlemaps
#
saas
#
kyoto
#
ux
2
reactions
Comments
Add Comment
9 min read
Day 2: Finding design concept to drive UI design process
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Aug 20 '21
Day 2: Finding design concept to drive UI design process
#
googlemaps
#
kyoto
#
design
#
saas
1
reaction
Comments
Add Comment
11 min read
Day 3: Visualizing design concept with mood boards
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Aug 23 '21
Day 3: Visualizing design concept with mood boards
#
uxdesign
#
uidesign
#
googlemaps
#
kyoto
Comments
Add Comment
9 min read
Day 4: Customizing Google Maps color scheme (and its place label visibility)
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Sep 3 '21
Day 4: Customizing Google Maps color scheme (and its place label visibility)
#
googlemaps
#
saas
#
webdev
#
design
2
reactions
Comments
Add Comment
22 min read
Day 5: Switching embedded Google Maps into custom dark mode after 6pm
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Sep 8 '21
Day 5: Switching embedded Google Maps into custom dark mode after 6pm
#
googlemaps
#
darkmode
#
ux
#
webdev
6
reactions
Comments
Add Comment
24 min read
Day 6: Using Google Fonts as Google Maps place markers
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Sep 16 '21
Day 6: Using Google Fonts as Google Maps place markers
#
googlemaps
#
uidesign
#
webdev
#
darkmode
2
reactions
Comments
Add Comment
30 min read
Day 7: Making buttons look like "clouds" for embedded Google Maps
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Sep 30 '21
Day 7: Making buttons look like "clouds" for embedded Google Maps
#
svg
#
buttons
#
uidesign
#
webdev
9
reactions
Comments
3
comments
26 min read
Day 8: Positioning buttons over embedded Google Maps
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Oct 7 '21
Day 8: Positioning buttons over embedded Google Maps
#
googlemaps
#
styledcomponents
#
css
#
uidesign
6
reactions
Comments
Add Comment
18 min read
Day 9: Picking the dark-mode color palette for web app buttons logically
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Oct 15 '21
Day 9: Picking the dark-mode color palette for web app buttons logically
#
darkmode
#
color
#
uidesign
#
button
6
reactions
Comments
Add Comment
10 min read
Day 10: Fixing a bug that renders buttons in dark mode but embedded Google Maps in light mode
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
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
5
reactions
Comments
Add Comment
8 min read
Day 11: web app vs native app on location services
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Oct 19 '21
Day 11: web app vs native app on location services
#
googlemaps
#
geolocation
#
webapp
#
webdev
3
reactions
Comments
Add Comment
7 min read
Day 12: Showing user location on embedded Google Maps (with Geolocation API and React)
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Oct 26 '21
Day 12: Showing user location on embedded Google Maps (with Geolocation API and React)
#
geolocation
#
react
#
googlemaps
#
webdev
5
reactions
Comments
Add Comment
18 min read
Day 13: Flashing tapped button while user is waiting (with React and Styled Components)
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Oct 26 '21
Day 13: Flashing tapped button while user is waiting (with React and Styled Components)
#
styledcomponents
#
react
#
cssanimation
#
webdev
4
reactions
Comments
Add Comment
11 min read
Day 14: Tracking user location on embedded Google Maps
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Nov 2 '21
Day 14: Tracking user location on embedded Google Maps
#
googlemaps
#
react
#
geolocation
#
webdev
4
reactions
Comments
2
comments
10 min read
Day 15: Showing user's direction of movement on embedded Google Maps
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Nov 4 '21
Day 15: Showing user's direction of movement on embedded Google Maps
#
geolocation
#
googlemaps
#
webdev
#
svg
6
reactions
Comments
Add Comment
9 min read
Day 16: Icon buttons should be labelled with aria-label
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Dec 17 '21
Day 16: Icon buttons should be labelled with aria-label
#
a11y
#
html
#
button
#
svg
5
reactions
Comments
Add Comment
6 min read
Day 17: Styling a search box like Google's
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Aug 11 '22
Day 17: Styling a search box like Google's
#
html
#
css
#
webdev
#
searchbox
6
reactions
Comments
1
comment
17 min read
Day 18: Building a close button with ripple effect as a React component
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Dec 12 '22
Day 18: Building a close button with ripple effect as a React component
#
webdev
#
react
#
button
#
ripple
6
reactions
Comments
Add Comment
17 min read
Day 19: Styling a popup like clouds
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Dec 16 '22
Day 19: Styling a popup like clouds
#
webdev
#
css
#
glassmorphism
Comments
Add Comment
11 min read
Day 20: Toggling a search box for keyboard users with React
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Dec 19 '22
Day 20: Toggling a search box for keyboard users with React
#
webdev
#
react
#
a11y
#
search
1
reaction
Comments
Add Comment
14 min read
Day 21: Animating transitions for a React app without external libraries
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Jan 2 '23
Day 21: Animating transitions for a React app without external libraries
#
webdev
#
react
#
css
#
animation
1
reaction
Comments
Add Comment
10 min read
Day 22: Using container transform pattern to animate the appearance of a search box
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Jan 3 '23
Day 22: Using container transform pattern to animate the appearance of a search box
#
css
#
animation
#
webdev
Comments
Add Comment
11 min read
Day 23: Animating the closing of a popup as if button ripple effect wipes it away
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Jan 8 '23
Day 23: Animating the closing of a popup as if button ripple effect wipes it away
#
webdev
#
react
#
css
#
animation
2
reactions
Comments
Add Comment
17 min read
Day 24: Making autocomplete search accessible for React apps with Downshift
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Feb 7 '23
Day 24: Making autocomplete search accessible for React apps with Downshift
#
webdev
#
a11y
#
react
#
autocomplete
Comments
Add Comment
13 min read
Day 25: Adding Google Maps autocomplete search to a React app
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Feb 24 '23
Day 25: Adding Google Maps autocomplete search to a React app
#
googlemap
#
react
#
webdev
#
tutorial
5
reactions
Comments
Add Comment
26 min read
Day 26: Integrating Google Maps search with a React app
Masa Kudamatsu
Masa Kudamatsu
Masa Kudamatsu
Follow
Jul 2 '23
Day 26: Integrating Google Maps search with a React app
#
react
#
googlemaps
#
webdev
#
a11y
2
reactions
Comments
Add Comment
29 min read
We're a place where coders share, stay up-to-date and grow their careers.
Log in
Create account