Introducing Zhong

Today I am pleased to introduce Zhong, my latest open-source project. Zhong is the missing clock application for macOS and Windows. Zhong is made up of three parts: world clock, stopwatch, and timer. It was designed to have a clean and elegant user interface.

Technologies

I used Electron because it provides a cross-platform graphical user interface, while allowing for easy customization and layout. Electron is my library of choice for desktop interfaces that require detailed interfaces.

Typescript provides a strongly-typed language that is compatible with javascript. It also provides useful features such as interfaces and enumerations. Typescript also allows me to ensure the right parameter types for components and methods, and prevents invalid data conversion.

ReactJS is my go-to library for HTML interfaces due to its flexibility and my experience in it. I used the excellent BlueprintJS library for the components, and Emotion for the custom styling. I also used ReactJS to render the custom SVGs used for the analog clocks on the world clock screen and the timer countdown.

For my build tool, I used Parcel. Parcel supports Electron as a target and allows multiple entry points. I find it easier to use in small projects than Webpack and Rollup.

Challenges

The two main challenges in making Zhong were creating a reliable timer, and drawing analog clock faces.

I fixed the Javascript setInterval time drift by using the method described here.

Part 2 (Coming Soon) will explain the math behind drawing the clock faces.

Download

You can download Zhong from GitHub here. Stars are appreciated 😄