For the last couple of weeks I have been iterating over a typing training app that should feel more modern and help with becoming a better typist. The initial idea was more of an experiment, while I had a couple of days of focus time, to see how such an app could work and feel like. Using it for a couple of months helped to carve out a more specific idea what this training app should and should not do.
You can read about the initial implementation here. The write-up explains the technical setup and reasoning behind the initial prototype. One idea is to make the training useful by using spaced repetition as a learning technique, you can read more about the approach here. The other aspect is to enable to train with actual code examples.
The code part seems trivial at first, but you can quickly run into scenarios where you have to decide for the actual user. For example working with { and }. Does it automatically close, once you open a curly brace? Or would you rather want to manually open and close the curly braces and then type out the body part? We can see that there are some interesting questions that need to be answered when dealing with code as training material. Check this write-up for more details.
In the initial version the code examples where just hard coded strings that get split by searching for new lines and then going through every line and splitting the line into words. Taking this approach made it easy to quickly try out the functionality and see how the interaction and flow would be like. Here is a screenshot of an early version:
So behind the scenes something like the following code snippet:
function bar() {
const arr = [1, 2, 3, 4, 5, 6];
return arr.map((n) => n * 2);
}would be represented as a simple string:
const snippets = [`function bar() {
const arr = [1, 2, 3, 4, 5, 6];
return arr.map((n) => n * 2);
}
`];Before that string gets rendered on to the screen, we apply some transformation functions to create lines, words and characters, as mentioned above. Additionally there is a check for \n that converts to an enter on the screen. Logically we want the user to press enter, so that the cursor jumps to the next line.
While taking this approach already worked, there were still some limitations. One of the limitations is that we would have to manually keep updating complete examples as compared to the text based training part of the app, where the examples are randomly generated. So the next idea was to autogenerate the code examples as well, enabling a larger set of code examples to train on.
This is currently work in progress and should result in not only being able to train with random code examples but also showing previous code snippets when there is some room for improvement. For example showing a code snippet every third or fourth session, when there were too many errors or the typing speed was slow for that section previously.
To keep things simple for now, instead of just taking a string and rendering that string, there is a function that generates some code training example by using snippets and randomly building an example. While technically there is nothing really interesting to talk about here, it could open up a very large set of unique examples based on a set of snippets. If we think about it, 100 snippets could be sufficient enough.
The snippets could be structured like this:
const snippets = [
{
id: 1,
content: `function bar() {
const arr = [1, 2, 3, 4, 5, 6];
return arr.map((n) => n * 2);
}
`,
},
{
id: 2,
content: `const items = [
{ id: 1, title: "Practice Code", state: "TODO" },
{ id: 2, title: "Write Documentation", state: "DONE" },
{ id: 3, title: "Review Pull Request", state: "PROGRESS" },
];
`,
{
id: 3,
content: `const nums = [4, 2, 5, 8, 12, 3, 44, 8];
`,
// ...
];Based on the above we could generate something like the following:
const nums = [4, 2, 5, 8, 12, 3, 44, 8];
function bar() {
const arr = [1, 2, 3, 4, 5, 6];
return arr.map((n) => n * 2);
}I think this is a good starting point for seeing how much flexibility is required when working with code examples. Once this is defined, the next step is to introduce spaced repetition to the code part as well.
Introducing code examples for typing training can have a set of challenges. Iterating over ideas and testing these ideas out with actual typists can help to answer some of the questions.
Checkout the Code Training here: https://typing-cyclist.vercel.app/code
Checkout the Weakest Words (repetition based) demo here: https://typing-cyclist.vercel.app/weakest
Typing Cyclist Demo: https://typing-cyclist.vercel.app