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.
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.
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.
I do something similar for our internall Technical Talks. The idea is to make them a smaller, live-coding discussions vs. a presentation, and if you make each commit a logical segment of your talk you provide both integrated instructions for your audience and a safety net to get your live coding back on track when it inevitably goes awry. It's like protection when lead rock climbing; you only fall back to beneath your last checkout.
I also have this project http://githistory.xyz/, I want to make a new version of it specific for tutorials, using commit messages or git notes to display a better description of each step.
FYI, `height: 15px` is wrong, because it’s not relative to the line-height, which you haven’t specified. Browsers will mostly default to a font-size of 13px for monospaced text (for bad reasons that should be discarded), which yields a line-height that will probably cause little to no clipping of the glyphs; but if you set the default monospace font larger, or have a monospace font with larger normal line-height, you may get clipping. For me with 16px Triplicate T4c as my default monospace font, all descenders are completely cut off.
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.)
Related, if you want to create a code walkthrough video, I wrote code-video-generator [1]
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.
The library should work with a few other languages like Java, JavaScript, and C++. If you want to add another one, take a look at comment_parser.py as it is pretty simple.
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.
You can show a snippet
function log(...args) {
}
and show additions with highlights or colors
function log(...args) {
+ console.log(...args);
}
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.
I agree with this. As much as I like the look of these coding lessons (I am easily distracted by the Shiny), when it comes to learning I find it much better to type out and run the code locally as I follow along with the lesson. A static presentation which highlights code changes is the simplest, most effective presentation for me.
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.
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.
23 comments
[ 2.8 ms ] story [ 69.8 ms ] threadDemo: https://code-hike-scrollycoding-preview.vercel.app/posts/lor...
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.
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
and show additions with highlights or colors 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.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.
[1] https://scrawl-v8.rikweb.org.uk/learn/first-lesson