Terrific work! IMO the state of programming tutorials and walkthroughs is surprisingly bad and antiquated. I wrote a concept demo a few years ago with some of the same ideas, but based around the Git diff.[0] The basic idea is each different "step" of the tutorial is a new commit, where the commit message is the instructions and the diff is the change in code.<p>I discovered there is a big advantage to the reader in being able to reference the entire WIP code base at any given time, as well as seeing what code is removed/replaced, which is easily missed but vitally important when building up an idea incrementally.<p>Happy to see people putting effort into making better tooling in this space.<p>[0] <a href="https://matthiashager.com/tardis/programming-tutorial-demo" rel="nofollow">https://matthiashager.com/tardis/programming-tutorial-demo</a>
Related, if you want to create a code walkthrough video, I wrote code-video-generator [1]<p>It uses Manim [2], an animation library commonly used by Math teachers, and adapted it to code walkthroughs. Just comment code as you do and it generates a video for it. I've been using it to generate visuals for youtube videos [3] with some success.<p>[1] <a href="https://github.com/sleuth-io/code-video-generator" rel="nofollow">https://github.com/sleuth-io/code-video-generator</a>
[2] <a href="https://github.com/manimcommunity/manim" rel="nofollow">https://github.com/manimcommunity/manim</a>
[3] <a href="https://www.youtube.com/watch?v=e21hJnB9J5k&t=2s" rel="nofollow">https://www.youtube.com/watch?v=e21hJnB9J5k&t=2s</a>
Hard pass. I used a site that did something like this. I found it extremely frustrating not to just be able to look at the entire document with multiple code samples. This to me is fluff and animation because you can, not because it's a good idea.<p>You can show a snippet<p><pre><code> function log(...args) {
}
</code></pre>
and show additions with highlights or colors<p><pre><code> function log(...args) {
+ console.log(...args);
}
</code></pre>
show deletions with strikeouts, etc.. Much better than having to scroll up and down, up and down, up and down, and watch the animations to divine what actually changed from one segment to the next.
Very nice!<p>Last code post I wrote I became aware of how difficult it is to intertwine explanations and readable code in a way that fist a blog post format. Conforming to the linear structure of a blog post (technical information is often hierarchical) and to the physical width of a blog post on screen proved to be very challenging.<p>Literate code might help, but it's not a one size fits all solution. It's nice to see your project offers something original in that space.
Wonderful! I recently did something similar to teach kids to program a game (in german): <a href="https://game.bbz.cloud/topics/04_collisions" rel="nofollow">https://game.bbz.cloud/topics/04_collisions</a>
To get the step-by-step code building, you can add comments to individual lines of example source code to tell them when they should appear (and optionally disappear): <a href="https://github.com/bbz-biel-informatik/jsgame/blob/master/04_collisions/game.js" rel="nofollow">https://github.com/bbz-biel-informatik/jsgame/blob/master/04...</a>
It currently works for JS, HTML and CSS.
Amazing. I've seen similar presentation styles before, not sure if this exact idea existed previously or not, but I had this idea and could not find it a few years ago. I had zero interest in implementing it, but would absolutely use it for blog posts. I would like to try to incorporate this into a Hugo site.