Saturday, September 5, 2020

Code Recording Project

 I'd like to go ahead and share a bit of something that I've been working on. I've been working on a code recording application that is meant to go hand in hand with programming video tutorials and essentially level up the programming video tutorial experience in multiple ways. I'll be touching on the two features that I've built so far, which are searchability and code accessibility, which I believe will make the video tutorial a more powerful learning experience.

Now it is worth noting that the reason why I'm only sharing videos of this functionality as opposed to providing a demo application is simply because I don't have this deployed to a production environment as of yet. That is in fact the current thing that I'm working on, and to that end I'm currently working through setting up Kubernetes, Istio, and OAuth. Hopefully within the next month or two, I'll be to a point where I'll have a simple MVP in place where I can send people and they can try it out and give me some feedback.

And so with that, let's take a look at things:

Searchability

So a scenario that I've run into frequently when it comes to learning from video tutorials is that I may not immediately need what I'm learning when I'm learning it, but rather it may be a few weeks or even a few months out before I run into a situation where I need to use what I learned. It's usually at this point in time that I remember that I'd learned something about this particular topic in a video tutorial or video tutorial series, but now I'm a little fuzzy on the details. So I then head back over to the video tutorial and then proceed to skip around the video, trying to find that one spot in the video that talked about the one thing that I need right now.

Searchability fixes this issue. I can simply type in a small snippet of the code that is relevant to what I'm trying to find, and the code recording will highlight the spot (or spots, if there were multiple instances) in the video where that snippet of code was typed in the video tutorial. This allows me to not waste time finding that part of the video that I'm looking for.

Here's an example of searchability in action:


Code Accessibility

The other issue that I've run into with programming video tutorials is that once you've found what you're looking for in the video, you run into the problem of getting the code out of the video and in to your own code so that you can start using and tweaking it. The process usually involves opening the video on one side of the screen and your code editor on the other side of the screen, pausing the video on the frame with the needed code snippet, and then transcribing the code over into your project. If you're unlucky enough to be looking at a code snippet that doesn't all fit on the screen at once, you'll likely have to skip around to different frames to be able to see all the code and transcribe the necessary parts. This is tedious and error prone.

Code Accessibility fixes this by making so that with the click of a single button, you're given access to what the code looks like in the project at that specific frame. And what's more, you can also choose to download the project in it's entirety at that specific frame. This gives you access to the code you need with minimal effort, allowing you to instead put all your effort into the code that you're crafting.

And with that, here's an example of code accessibility in action:


And with that, there's a sneak peak into what's been consuming my evening and weekends as of late. I personally think that it's got a lot of potential, but it's also got a long ways to go. So with that, I'll keep plugging at it, and with any luck before too long I'll have a fully working example up and running and in the wild.