PinnedPublished inMasa’s Design ReviewsData visualization guideline: Get the chart type right for your dataTell me what data you have. I’ll show you which chart type you should choose to visualize your data.Nov 12, 20231Nov 12, 20231
Published inWeb Dev Survey from KyotoVanilla JS carousel that is accessible, swipeable, infinite-scrolling, and autoplayingFollow ARIA Authoring Practices, use CSS Scroll Snap, duplicate first and last slides, and use setInterval().Aug 4Aug 4
Published inWeb Dev Survey from KyotoResponsive images: DIY implementation in 6 stepsDraft <img> tags, render them with a browser, and use a bookmarklet called RespImageLint to correct the <img> tags. That’s it!Aug 5, 2023Aug 5, 2023
Published in100 Days in Kyoto to Create a Web App with Google Maps APIDay 26: Integrating Google Maps search with a React appHow to fetch data from Google Maps server so a place can be indicated on embedded Google Maps along with its information in a popup windowJul 2, 2023Jul 2, 2023
Published in100 Days in Kyoto to Create a Web App with Google Maps APIDay 25: Adding Google Maps autocomplete search to a React appHow to make API calls to Google Maps server and handle server responses to change search suggestions while users keep typing search termsFeb 24, 20233Feb 24, 20233
Published in100 Days in Kyoto to Create a Web App with Google Maps APIDay 24: Making autocomplete search accessible for React apps with DownshiftThis article reviews the HTML code for accessible autocomplete search and explains how to use Downshift to implement it.Feb 7, 2023Feb 7, 2023
Published in100 Days in Kyoto to Create a Web App with Google Maps APIDay 23: Animating the closing of a popup as if button ripple effect wipes it awayA white popup with `mix-blend-mode: lighten` and `color: black` can be wiped away with its child whose `background-color` is…Jan 8, 2023Jan 8, 2023
Published in100 Days in Kyoto to Create a Web App with Google Maps APIDay 22: Using container transform pattern to animate the appearance of a search boxHow Material Design’s container transform animation pattern can be implemented with CSS animation and the transform-origin CSS property.Jan 3, 2023Jan 3, 2023
Published in100 Days in Kyoto to Create a Web App with Google Maps APIDay 21: Animating transitions for a React app without external librariesFour UI state values, the data attribute selector, and the onAnimationEnd prop allow us to animate transitions for React apps.Jan 2, 2023Jan 2, 2023
Published in100 Days in Kyoto to Create a Web App with Google Maps APIDay 20: Toggling a search box for keyboard users with ReactHow to autofocus interactive elements, trap the focus inside a popup, and close a popup with Esc key, all implemented with ReactDec 19, 2022Dec 19, 2022
