As a Chinese language learner, being able to look up Chinese words is essential, and while the resources available make it easier than ever, a lot of relevant information is fragmented and introduces friction in the learning process. I created a React app that lets you transliterate a snippet of Chinese text, breaking up the individual words and displaying the phonetic reading underneath each word as a reading aid. The app allows toggling between Mandarin Pinyin and Cantonese Jyutping readings. The app also allows toggling between traditional and simplified scripts. When combined with an OCR tool like Google Lens and a mouseover dictionary extension like Zhongwen, this app makes for a great reading aid. Try the app out here.

I went through Discord’s tutorial for building your first Discord app that has you complete a starter Express.js server to handle webhooks from your Discord server but doesn’t walk you through how you might deploy it. I went through the exercise of deploying it to Cloudflare Worker and making the adjustments needed for it to work in that serverless environment. I struggled with two issues moving to Cloudflare: one was how to persist game state, and another was how to properly make outgoing API requests. After learning more about the Cloudflare serverless computing model and some of Cloudflare’s building blocks, I was able to solve my issues by rewriting the Discord app in a native Cloudflare handler. I found Cloudflare’s CLI wrangler easy-to-use, and with the generous free tier, I’m looking forward to building more proof-of-concept-type projects on Cloudflare. I made my code available on Github here.

After setting up this Hugo site, I wanted to spruce it up a bit by bringing back a throwback from classic websites back in the day: a visitor counter. Below are some notes on that as I get more accustomed to working with Hugo.

The backend

I prepared a backend to handle the visitor count. Making a request to the backend will increment and return the visitor count. I hosted the backend on Google’s Cloud Run platform. I chose this platform for the backend because it’s serverless and at this point would fall under the free tier of usage, i.e. cost me zero dollars. Also, I wanted to go through the exercise of setting up a serverless backend. I’ll make a separate post about the details later. For now, all we need to know for this discussion is that the backend is accessible by a URL. In order to make it available to frontend Javascript, I will put it in the DOM. I decided to put it in a meta tag in the head of the HTML document. The ananke theme has a predefined block that pulls in a partial file if it’s available, so I placed the following snippet in layouts/partials/head-additions.html: