Jocko Clock – The Pomodoro Clock with Jocko Willink

Allow me to introduce Jocko Clock.

Free Code Camp has various projects in which aspiring software engineers write programs as they complete the coursework. One of the projects requires the student to build a Pomodoro Clock.

The idea behind a Pomodoro Clock is that you set a 25-minute timer as you begin a task. You promise yourself ahead of time that you will work on that task until that time has elapsed. With luck, you will be inspired to keep working after that 25 minutes is complete. At its core, the Pomodoro Technique is a procrastination elimination tool.

I know no public personality that inspires procrastination destruction more than Jocko Willink. His podcast always inspires me to work harder and wake up earlier. That’s why I made the Jocko Clock.

Jocko Clock

So the above project combines the principles of the Pomodoro technique with audio clips from Jocko Podcast. I sourced the recordings from YouTube.

Clip 1 – Get out of Bed | Clip 2 – Not Feeling It?

Whenever you load Jocko Clock, you’re greeted with Jocko’s voice,

“Get up and get after it.”

After you complete your 25 minutes, you get another message from Jocko.

“…you stayed on the warpath.”

Developing Jocko Clock

While building the clock, I went down a lot of dead-end roads. I integrated JS libraries that were complex, CSS libraries that broke everything and a host of other bad ideas.

After a lot of confusion, I found that simple jQuery and JavaScript were the best for executing these simple tasks.

To get the clips, I recorded the YouTube audio with Screenflow. Screenflow has a leveling tool which I used to homogenize the levels. Then I used Audacity to downsize the audio files from 3-megabyte .aiff to a 100-kilobyte .mp3 (64kbps is fine).

Jocko Clock Improvements

If you think you could help with any of these improvements, feel free to create a pull request. This clock is open sourced and available on GitHub here.

Center Align – I’m having a really hard time vertically aligning the clock so that the font grows and shrinks with the window size. I was able to weasel my way out by adjusting the image and the watch layout, but I wish I could make it responsive to the window size.

Font –  The font should match his actual watch, but I couldn’t find a Google font that fit the bill properly. Below is an image of what it should ideally look like:

A Bigger Library of Audio Clips – The tool would be more fun to use if the audio clips were randomly selected from a large library. That way, each time the user started a working session, they would have a gamified inspiration to get after it.