JavaScript on Wayne X.Y. Blog

VocabularyTest: Building My Own English Vocabulary Practice Tool

Tue, 05 May 2026 00:00:00 +0000

Why Build This?

Vocabulary memorization is probably the most tedious part of learning English. There are plenty of apps out there, but they all seem to have the same problems — too many ads, overcomplicated interfaces, or no way to practice the specific words you care about.

So I built my own.

VocabularyTest is my latest side project: a lightweight English vocabulary quiz web app with one goal — open it, practice, and move on.

Adding an Interactive Travel Map to Hugo Blog (Leaflet + JSON)

Tue, 10 Mar 2026 00:00:00 +0000

Adding an Interactive Travel Map to Hugo Blog (Leaflet + JSON)

Recently, I wanted to add an interactive map to the top of my blog’s Travel page to mark the places I’ve visited. After some consideration, I decided to use the open-source and lightweight Leaflet.js, paired with a custom JSON file to manage the locations and marker colors.

🗺️ Implementation Goals

Pin a map to the top of /life/travel to display the countries and places I’ve visited.
Centrally manage location data (including English and Chinese names, latitude, longitude, and custom colors) via a JSON file.
Use Leaflet.js to render the map, and automatically calculate the zoom boundaries (fitBounds) based on the JSON data to perfectly fit all markers.
Encapsulate the map into a Hugo Shortcode to easily reuse it across different language pages.

💾 Creating the Data File (Data Layer)

First, create a travel.json file under the data/ directory of your Hugo project. If you have new trips in the future, you just need to update this file without touching any code:

Building a Micro-World: Playground Pixel Art and Pathfinding Implementation

Thu, 26 Feb 2026 00:00:00 +0000

Building a Micro-World: Playground Pixel Art and Pathfinding Implementation

Recently, while coding, I came across an interesting project on GitHub called Pixel Agents. It simulates AI agents during coding as tiny pixel-style characters working in an office, which looks incredibly cute 😆. Because I really love pixel art, I wondered if I could bring a similar vibe to my own website. That’s how this Playground came to be.

This post will share the implementation details behind this little world, covering how to render crisp pixel art using HTML5 Canvas, designing the states for the characters, and how they navigate the room (BFS pathfinding algorithm).