Running a quiz service, we got a complaint one day: “I just took the test — why does it say ‘No score’?” We checked. Their score was zero. The database clearly stored 0, the API returned 0 faithfully. The culprit was a single line in the UI code. javascript Read line numbers: OFF Line-number reading help Reading line numbers aloud This button is for screen reader users. ...
I built a dashboard. I was proud of it. Three lines of code using Promise.all to fetch three APIs at once — and the code review feedback was “clean.” Multiple tasks running concurrently - with Promise.all, one failure affects the whole thing Photo: Unsplash javascript Read line numbers: OFF Line-number reading help Reading line numbers aloud This button is for screen reader users. ...
At some point while writing JavaScript, you’ll end up with code like this: javascript Read line numbers: OFF Line-number reading help Reading line numbers aloud This button is for screen reader users. ...
Introduction Running a blog in both Korean and English revealed an interesting problem. When sharing blog links internationally, visitors often land on the Korean page. Those who can’t read Korean are confused, right? Similarly, when Korean readers click on English post links shared in Korean communities, they face the same issue. While there’s a language switcher button in the header, new visitors often struggle to find it. This isn’t user-friendly, and from an accessibility perspective, it’s not ideal either. ...
Introduction Blogs built with Static Site Generators (SSG) are incredibly fast and secure. However, adding dynamic features like comments requires careful consideration. This blog uses Giscus, a GitHub Discussions-based comment system, but there was one inconvenience. Comments only appear at the bottom of each post, making it difficult to see at a glance which articles have active discussions. So I built three features: Display comment counts in post lists - See which articles have ongoing conversations Show recent comments on the explore page - View recent blog activity at a glance Create an all comments page - Browse all comments in one place This article shares the process of bringing dynamic comment information to a static site using GitHub GraphQL API while maintaining optimal performance. ...
Introduction Recently, I started building and operating a blog using Hugo with the PaperMod theme. Using someone else’s theme has the advantage of quick setup, but not everything fits my needs perfectly. After customizing many parts to match my preferences, I noticed some issues with the code blocks. Line numbers were implemented with <table> tags. While this doesn’t violate accessibility guidelines, it felt not semantic. Moreover, I wondered: what’s the experience for screen reader users? I found a better approach using CSS Counters. ...