Playback Press is Live! New

1/16/23 by Mark Mahoney

I have been thinking about and developing code playbacks for several years. First, I created an open source text editor plugin called Storyteller that allowed me to record and playback code in the browser. Next, I wrote hundreds of code playbacks for my students to get feedback and to refine the medium.

After a lot of work, I am happy to announce that the Playback Press is live! The Playback Press is a place where you can learn about code by watching it evolve and getting inside the head of the developer who wrote it. Learning through code playbacks is a great way to grow as a developer. I am really excited to share playbacks with others.

I have written several books of playbacks to get you started. All of my books are free to read online. All you have to do is create an account and you can add my books to your bookshelf for free.

Code Playback Best Practices New

1/17/23 by Mark Mahoney

You may be new to code playbacks, so, what is the best way to view them? Watch this video to find out.

In my opinion, they work best on a big screen. On a mobile device the playback is shown in 'blog' mode which is similar to a tradtional online tutorial. On a big screen, however, you have full control over how you interact with the playback.

To navigate through a code playback you can hit the 'play' button to start the playback. It will play through the code and stop at each comment. Then, you can read the comment and look at the highlighted code that it refers to along with any pictures, videos, etc. that the author has added. You can also use the arrow keys to move forward and backward through the playback.

After you get more experience, you may want to skip the animation of the code and focus on the code at the comment points. This is my preferred way of working through a playback. You can do this by clicking on the 'fast forward' button. Hitting shift + right arrow will move you forward to the next comment. You can also click on the comments to jump to that point in the playback. All new changes in the code editor will be highlighted so you can see what is new since the last comment.

Code playbacks have a search bar to look for specific text in the code. This is useful when you are looking for a specific function or variable in the code or a comment.

There is a file system view tab where you can see the state of the file system as the playback progresses. From this tab you can download the code at any point in the playback.

A viewer can make the code bigger or smaller. They can speed up or slow down the animation of the code.

Some comments have videos, pictures, and other media. They can be expanded by clicking on them. Some comments have self-grading multiple choice questions.

Comments have 'tags' associated with them so you can filter the comments with images or multiple choice questions, for example.

After a little bit of practice you will be moving through code playbacks like a pro.