As a computer science instructor, I’ve long wished there was a better way to guide others through my code. When I was first learning to program, I was a big fan of traditional programming books. I have shelves and shelves of 800+ page books covering various programming languages ​​and technologies.
I’ve known for some time now that most learners today don’t share my love of big fat books, and to be honest, I rarely read them in their entirety. These large books often had more exposure to code than was probably necessary. As a book buyer I wanted to make sure I was getting my money’s worth so the thicker the better. These days it is very common for learners to use blog-based tutorials and videos.
If you’re just learning to code, you’ve probably experienced the frustration of these formats. I wanted to share something I’ve been working on that might help.
Blogs and videos
Blog-style tutorials combine code and its explanation in a top-down fashion. Scrolling through these web-based descriptions feels familiar and one can easily copy and paste. However, linking code and code specification has always been less than ideal. Often I find myself jumping around the blog post so I can see the entire code example working with the explanation. Instead, I’m only able to see small sections of code and it’s hard to see how those sections relate to other sections.
Video tutorials are very popular these days. They solve some of the problems associated with blog-style tutorials. Videos are great because you get two streams of information: the author’s audible narration and the code being written. A viewer can focus on two streams simultaneously. However, the videos also have some issues.
Watch videos
From a viewer’s point of view, videos are difficult to find and are not useful as a copy and paste source or as a code reference. More importantly, though, they discourage viewers from taking their time and considering the content. Often, when I’m watching a video tutorial I don’t pause and let the concepts sink in before moving on to the video. Yes, I can be more disciplined and pause and rewind often but usually I don’t.
Making videos
From a video creator’s point of view, it’s clear that it’s not interesting to see all the code being generated. Some of it is not really worth showing to the audience. Not all video creators can keep the narrative interesting all the time.
I know I struggle with the ‘performance’ aspect of making videos (you won’t find me coding on Twitch anytime soon). Many times after making a video, when I review it, I wish I had mentioned something I forgot. It’s hard to go back and edit the video and start over without destroying it.
Storyteller
I have created a new medium to guide viewers through code examples. It combines the best books, blog posts and videos. This new medium allows a developer to write code using an advanced editor (Visual Studio Code) and then replay the development of that code in a browser.
Authors can add comments at key points in the evolution of the code. Comments can include text, hand-drawn images, screenshots, and audio and video recordings. This allows the author to incorporate concepts that we have in mind but don’t make it into the code itself. The tool is called Storyteller.
Here are some examples of ‘playback’:
These work best on the big screen. If you are viewing the playback on a small screen you can view it in ‘blog’ mode (there is a button on the top right to switch from ‘code’ mode to ‘blog’ mode).
I’ve created groups of these guided code walkthroughs to help my students teach different topics. All of these are free and hosted on a website I created. Playback Press. Here are some of the ‘books’ I’ve created so far:
I usually assign them as readings in my classes rather than using expensive textbooks. It is much easier for me to write several programs than to find an excellent textbook.
I also use them for class demos instead of writing code live. This makes the code demo much faster and smoother. If I make an interesting mistake while developing the code, I can still highlight it with a comment. If I make an uninteresting or embarrassing mistake, I can ignore it and the students won’t notice.
Advantages of code playback:
The main focus is on the code. It’s always visible and easy to find and navigate.
Because the code is so accessible, its explanations are short and concise.
Narratives can include whiteboard-style drawings, screenshots, or videos of running code in addition to textual explanations.
As an author, I can review the code many times and add/edit comments as I go through it. I don’t need to give a perfect performance like I do with a video.
Comment points are highlighted when the author wants the viewer to take a moment to think and reflect on the code. Playback only proceeds when the viewer is ready.
Code mentioned in comments can be highlighted so viewers know exactly where to look.
The code can be downloaded at any time during playback. A viewer can then play it, change it, and add to it.
The tool is a language-independent editor plugin and can be used to define programs in any language.
Viewers only need a web browser to navigate through the playback.
Lately, I’ve been exploring how to make playback more useful for learners.
AI as an infinite patient tutor
I’ve extended the code playback to include an AI tutor. One thing I’ve learned in my years of teaching is that students are often reluctant to ask questions. They’re worried about looking stupid, or they don’t want to slow down the class, or they just can’t articulate what’s confusing them.
What if every student had access to a patient tutor who never got frustrated with repeated questions and could explain concepts in multiple ways until something clicked?
I’ve integrated AI directly into the playback experience. As students work through the playback, they can ask questions about anything they see. It could be a specific line of code, a concept I mentioned in a comment, or how something connects to earlier content in playback. AI has a complete context. It can see the code, it understands where the student is in the playback, and it can provide explanations tailored to that exact moment. AI is right there. with the The student, looking at the same code, is understanding the same context.
AI can also generate self-grading multiple-choice questions based on code and comments in playback. These low-stakes quizzes make the learning experience more engaging and help learners test their understanding as they go.
Let me be clear: AI does not replace me as an instructor. I still make playback. I still decide which concepts to cover, in what order to present them, and which examples best illustrate the ideas. AI is an extension of my education, not a substitute for it.
Note: AI features are available for registered users. Playback Press. Registration is free but login is required to access AI Tutor. If you want to see what it feels like, try one of the playbacks linked above and ask the AI ​​a question about what you’re seeing.
The result
My goal has always been to help people learn to code. Books gave us depth but required commitment. Blogs gave us access but fragmented the code. Videos gave us narrative but took away control. Playbacks put the code front and center while allowing learners to progress at their own pace and reflect when they need it. Adding AI doesn’t change that philosophy, it just means there’s always someone there to answer questions. Together, they approximate the experience of having an expert sit down with you and walk you through a program. That’s what I’m trying to build, and I think we’re getting there.