Use React Context + useReducer to Implement A Simple State Management Like Redux

React Hooks have brought us much convenience in writing concise readable code. Recently, I have been enjoying the usage of React Context and useReducer to implement a simple state management architecture, as a replacement of Redux. There are at least...

4min read

How To Build My Own Website (4) - Image Optimization

This article illustrates how I applied image optimization to improve the performance of my website.
2min read

How To Build My Own Website (3) - Style

This article illustrates how I style my own website using Tailwindcss framework, make theme color configurable, and apply interactive animations.
2min read

How To Build My Own Website (2) - Markdown

Parsing and displaying Markdown files are one of the most important things in building a personal website, because all my blogs are written in Markdown. This article illustrates several things that I did in processing Markdown files....

3min read

How To Build My Own Website (1) - Next.js

I had always dreamed of building my own website, to express myself, to keep memory of what I have done, and to make others know me faster. Although I had self-learned web developing technologies, e.g. html/css, javascript, react, redux, jquery,...

5min read

Mock requestAnimationFrame in Jest

When I wrote test for my tiny rhythm game, I realized that all the browser based actions needed to be mocked, including window.requestAnimationFrame. I created a custom hook useCanvas which takes a draw function and renders the content under canvas...

1min read

Create A Classical Rythm Game With React Hooks and Tone.js

Recently I've been obsessed with React Hooks, and then I came up with an idea to create a classical rythm game using Hooks and Tone.js. This is how it looks:...

5min read

A Simple Piano App Developed By Tonejs

When I was pregnant, my husband bought me a piano, because he wanted us and our baby to learn piano together. Hmm... a good point:)...

5min read