Scrollycoding – A new way to write code walkthroughs [video]
youtube.com
youtube.com
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.
Happy to see people putting effort into making better tooling in this space.
[0] https://matthiashager.com/tardis/programming-tutorial-demo
You’d do better specifying a font-size and line-height, defining height in ems, or both.
(Source: the “try it” link on that page, https://githistory.xyz/babel/babel/blob/master/packages/babe..., which should probably be replaced with something else since the file in question got moved (babel-core → babel-register) and your tool doesn’t follow renames.)
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.
[1] https://github.com/sleuth-io/code-video-generator [2] https://github.com/manimcommunity/manim [3] https://www.youtube.com/watch?v=e21hJnB9J5k&t=2s
You can show a snippet
function log(...args) {
}
function log(...args) {
+ console.log(...args);
}
It's also the approach I used for the lessons I wrote for my canvas library[1]. I could do with a tool to make developing these lessons a lot easier - currently I have no toolchain to help, which is why I haven't written more lessons in a while.
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.
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.
A few years ago I blogged [how to build your own react on Medium]( https://engineering.hexacta.com/didact-fiber-incremental-rec...) and the classic blog flow was to limiting. Later I wrote [this version](https://pomb.us/build-your-own-react/) on my blog. The experience was much better for both, reading and writing.