Web Dev Survey from Kyoto

Draft <img> tags, render them with a browser, and use a bookmarklet called RespImageLint to correct the <img> tags. That’s it!

Explaining two ways of creating the frosted glass look without using `backdrop-filter`, a CSS property not supported by Firefox

Getting your website’s favicon right is incredibly complicated. This article puts together all you need to know about favicons.

We need to properly understand ARIA landmark roles to write the HTML code for toggling the appearance of a navigation menu with the…

I’ve digested various techniques to write `alt` text for images into 10 lessons.

We can do a lot better than just copy and paste the <iframe> code!!!

The choice should be guided by the purpose of italicizing words.

While we are writing, occasionally we feel the need to indicate a change in topic without using a new section heading. The degree to which…

Putting everything together in one place about rendering abbreviations in small caps for web articles, with info sources clearly indicated.

Showing error on blur and hiding it immediately after correction is the best practice in web form design. How can we code it with React?

Next.js requires a few modifications to Google Maps API’s official documentation on rendering a map. This article explains them all.

I’m making a color picker web app with React. Drawing a raster image like the color picker on the web requires a <canvas> HTML element…

Short answer: Top-left corner INSIDE the text field box

For smooth animation to change the background color of a web page, use the pseudo element and toggle its opacity with a CSS transition.

Web Dev Survey from Kyoto is a series of blog posts on web development by myself, an aspiring web designer/developer in Kyoto.

6 steps to make the link to your webpage appear nicely on social media

Sometimes you want to hide an HTML element (e.g. <h1> when the logo is present) from sighted users but not from screen readers. Here’s how.

The default file upload button is ugly. Customizing its style is hard. I’ve surveyed the solutions available across the web. Here’s what I…

Every single web page should have a certain set of code for the user to have a pleasant experience with the page. This set of code is…

History of how and why the system font stack is implemented

…but to place the duplicate copy beneath

The best way to understand semantic HTML is to think of it as an alternative to graphic design.