Are you a Speedy Coder?
an app that will help calculate your coding speed
I had an idea. An idea to built an app to calculate the speed at which I code. It was super random; but I built it anyway. In this article, I will walk through the main steps.
One of the goals I set for myself was to finish it over a weekend.
Design
I came up with an initial design, it included the code editor and in the background, you could see the code that you had to type.
Note: This is not what the end result looks like
The Code Editor
As a developer, I wanted to make sure the experience of typing code was as close to that of an actual editor. For me, in addition to the keyboard shortcuts, the biggest requirement was to have syntax highlighting.
It took a few google searches and I was able to discover a few options.
After going through the documentations for the VSCode and Monaco, I could not find a nice way to display the code that had to be typed in the background. Next, I found react-simple-code-editor which seemed super simple and flexible enough that I could add code in the background; however, soon to my surprise, the package did not support React 17.
At this point, I decided to build the editor by myself. I took inspiration from the react-simple-code-editor package and started to look into prism.js.
I created a text area where the user could write code. In order to highlight the code syntax, I had to add a pre component in front of the text area with a specific css class. In case of JavaScript, it was ‘language-javascript’.
Next, all I had to do was call Prism.highlightAll and the prism.js package would identify the different language tokens used using regex. Create a span element for consecutive tokens and add the styling.
As this pre component was displayed in front of the text area, it would give the illusion that syntax highlighting is present.
You can view the code below.
Calculations
One of the key elements of the application was on how to calculate the speed. I looked into how the speed was calculated and found a page explaining the typing equations.
Equation 1: Words Per Minute
(All Typed entries / 5) / Time (min)
Equation 2: Corrected Words Per Minute
((All Typed entries / 5)- incorrect entries) / Time (min)
I was able to use the above equations to calculate the words per minute and the corrected words per minute.
I initially wanted to have one big piece of code that you had to type, but I changed the format to include levels. Hence; The game computes the average of corrected words per minute for all the levels that are finished.
Sharing the result
The last part of this was being able to share the result with others. I found a super straight-forward package called react-share that did exactly that.
Using the example they provided, I was all set and ready to go.
One thing I discovered soon after was that you can only share a URL on LinkedIn (No text/images). I left the LinkedIn share icon, but it won’t do much.
At the end, you can share your result on Facebook, Linkedin and Twitter.
Overall, it was a fun project. Let me know what you guys think?
Code
You can find the code in my Github repo.
So, are you a speedy coder?
Find out by taking the test now. It’s been deployed to github pages.
