A few months ago, I made my first-ever open source contribution.
This admission may surprise, even shock, as I've worked in industry across a variety of stacks for over a decade.
While it's true my employers have been small and mid-size companies with a penchant for using rather than creating open source software, the real reason I've made it so far without contributing is simple...
I never tried.
Indeed, the massive and welcoming ecosystem for open source software today leaves little excuse to not take part. As noted on Github's blog:
"In 2022 alone, developers started 52 million new open source projects on GitHub—and developers across GitHub made more than 413 million contributions to open source projects."
This is not to say that issues of project scarcity, gatekeeping, or other barriers to entry don't exist, but the simple fact is that a vast array of opportunities exists for developers in many domains and of many different skill levels.
Which brings me to...
MonkeyType
Monkeytype was created in 2020 as a single-developer passion project to make a minimalist, customizable online typing test. Since then it has grown rapidly, with 365 million tests taken, an active Discord server, and hundreds of supporters and contributors.
I've been a big fan of Monkeytype for my typing practice, with highest speeds to date being 135wpm over 15 seconds and 117wpm over 60 seconds (100% accuracy). When I saw that Monkeytype is open-source on Github, I saw a perfect opportunity to contribute.
In particular, I observed that the subproject Fingermap, a keyboard finger map editor, exhibited multiple issues I would happily take on, including:
- An inability to select keys using keypress.
- A lack of mobile layout/responsiveness.
- An outdated / diverged style as compared to the main site.
I started by joining the Monkeytype Discord, creating an issue on the repo, forking, and working up a draft solution for keypress selection. I was updating this code as a fun exercise, so I wasn't concerned with negotiating the changes in advance with the project owner Miodec. I hypothesized that providing a hosted demo of the updates would offer a strong introduction and elicit a faster response.
The response was prompt and positive!
Miodec expressed interest in the update and suggested additional changes. Over the course of a week and with numerous iterations, updates addressing all items of interest were PR'd and merged to the main repo.
Some noteworthy process and implementation points:
- Keypress selection required changing other shortcuts to remove conflicts. Previously, keys 1-10 had been used for finger selection. The shift key also had overlap as a modifier key, which I resolved with logic to differentiate between quick press (selection) and hold (modifier).
- Header updates entailed some questions about icon usage, label presence, and styling. These were ultimately resolved with a healthy deference to the main site.
- Responsiveness required a new mobile header as well as a mechanism for keyboard resizing. This proved pretty interesting, as the existing code was resistant to standard sizing mechanisms. In particular, preserving the aspect ratios on resize was tricky given the layout and markup. To solve this, I created a wrapper that I call an Aspect Ratio Box - scaling smoothly while preserving aspect ratio and interactivity. I've posted a demo to Codepen.
At the time of writing, Fingermap is hosted at https://fingermap.monkeytype.com/
I've also separately hosted snapshots for:
Before | After
Thank you for reading!