When making my YouTube videos, I often have to explain code by showing it in the VS Code, but often times, just showing the code is quite boring. While I could record myself typing the code out and speed up the footage during an editing part, I wanted this task to be automatic and (somewhat) unique to my channel, because I will be doing this process a lot in the future as well.
So, I thought “How about I build a simple tool that animates (or types out) the code automatically, so I don’t have to”. So, I sat down next to my laptop and started coding it at around 12 AM.
[The rest is history/I might make a video on it as well, who knows?]
By the time I finished my tool, it was already 5 AM, (yes, AM, not PM). Here are a couple of tools that made the process much easier:
Syntax highlighter (obviously): https://github.com/react-syntax-highlighter/react-syntax-highlighter
React Typist (for typewriter effect): https://github.com/jason89521/react-typist-component
Also, I can’t forget about this StackOverflow post that saved me hours of work: https://stackoverflow.com/questions/37862843/show-just-cursor-caret-but-hide-the-letters-in-input.
The code is on GitHub: https://github.com/technoph1le/code-typing-animation
And, here’s the tool itself: https://technoph1le.github.io/code-typing-animation/
I will probably make a video on this. But, right now, I need to sleep, lol.