5 ms·

Scrollycoding – A new way to write code walkthroughs [video]

143 points by pomber 6y ago

pomber 6y ago
Project: https://github.com/code-hike/codehike https://github.com/code-hike/codehike Demo: https://code-hike-scrollycoding-preview.vercel.app/posts/lorem-ipsum-three https://code-hike-scrollycoding-preview.vercel.app/posts/lor...
netgusto 6y ago
Very nice! 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.
- pomber 6y ago
  That was the feeling that inspired me to work on this. A few years ago I blogged [how to build your own react on Medium]( https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec 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/ https://pomb.us/build-your-own-react/) on my blog. The experience was much better for both, reading and writing.
matthiaswh 6y ago
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. [0] https://matthiashager.com/tardis/programming-tutorial-demo https://matthiashager.com/tardis/programming-tutorial-demo
- pomber 6y ago
  Agree. Nice demo! Good name also.
- respondo2134 6y ago
  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.
  - pomber 6y ago
    I also have this project http://githistory.xyz/ 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.
    - chrismorgan 6y ago
      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/babel-core/test/browserify.js 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.)
dayre 6y ago
This is really great... i didn't realize how much this was needed until working with the demo.
RobSpectre 6y ago
This is super tasteful and clean. Well done.
ballmerspeak 6y ago
This is fantastic. I'll be using on a new project and will happily provide feedback.
Lukas_Skywalker 6y ago
Wonderful! I recently did something similar to teach kids to program a game (in german): https://game.bbz.cloud/topics/04_collisions https://game.bbz.cloud/topics/04_collisions 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): https://github.com/bbz-biel-informatik/jsgame/blob/master/04_collisions/game.js https://github.com/bbz-biel-informatik/jsgame/blob/master/04... It currently works for JS, HTML and CSS.
- pomber 6y ago
  I like it!
Xevi 6y ago
What about mobile users? It doesn't seem to work for them.
- pomber 6y ago
  Check 6:42 in the video. It works, if there isn't enough screen space it falls back to something more static.
michael-ax 6y ago
Brilliant!
anm89 6y ago
Woah! This is pretty slick and addresses a real problem. Great work.
mrdonbrown 6y ago
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. [1] https://github.com/sleuth-io/code-video-generator https://github.com/sleuth-io/code-video-generator [2] https://github.com/manimcommunity/manim https://github.com/manimcommunity/manim [3] https://www.youtube.com/watch?v=e21hJnB9J5k&t=2s https://www.youtube.com/watch?v=e21hJnB9J5k&t=2s
- rlevy 6y ago
  This is slick! Anything similar for languages beyond Python?
  - mrdonbrown 6y ago
    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.
gfxgirl 6y ago
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.
- rikroots 6y ago
  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. [1] https://scrawl-v8.rikweb.org.uk/learn/first-lesson https://scrawl-v8.rikweb.org.uk/learn/first-lesson
alanbernstein 6y ago
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.

143 points by pomber 6y ago

Project: https://github.com/code-hike/codehike https://github.com/code-hike/codehike Demo: https://code-hike-scrollycoding-preview.vercel.app/posts/lorem-ipsum-three https://code-hike-scrollycoding-preview.vercel.app/posts/lor...

netgusto 6y ago

Very nice! 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.

pomber 6y ago
That was the feeling that inspired me to work on this. A few years ago I blogged [how to build your own react on Medium]( https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec 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/ https://pomb.us/build-your-own-react/) on my blog. The experience was much better for both, reading and writing.

matthiaswh 6y ago

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. [0] https://matthiashager.com/tardis/programming-tutorial-demo https://matthiashager.com/tardis/programming-tutorial-demo

pomber 6y ago
Agree. Nice demo! Good name also.
respondo2134 6y ago
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.
- pomber 6y ago
  I also have this project http://githistory.xyz/ 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.
  - chrismorgan 6y ago
    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/babel-core/test/browserify.js 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.)

dayre 6y ago

This is really great... i didn't realize how much this was needed until working with the demo.

RobSpectre 6y ago

This is super tasteful and clean. Well done.

ballmerspeak 6y ago

This is fantastic. I'll be using on a new project and will happily provide feedback.

Lukas_Skywalker 6y ago

Wonderful! I recently did something similar to teach kids to program a game (in german): https://game.bbz.cloud/topics/04_collisions https://game.bbz.cloud/topics/04_collisions 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): https://github.com/bbz-biel-informatik/jsgame/blob/master/04_collisions/game.js https://github.com/bbz-biel-informatik/jsgame/blob/master/04... It currently works for JS, HTML and CSS.

pomber 6y ago
I like it!

Xevi 6y ago

What about mobile users? It doesn't seem to work for them.

pomber 6y ago
Check 6:42 in the video. It works, if there isn't enough screen space it falls back to something more static.

michael-ax 6y ago

Brilliant!

anm89 6y ago

Woah! This is pretty slick and addresses a real problem. Great work.

mrdonbrown 6y ago

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. [1] https://github.com/sleuth-io/code-video-generator https://github.com/sleuth-io/code-video-generator [2] https://github.com/manimcommunity/manim https://github.com/manimcommunity/manim [3] https://www.youtube.com/watch?v=e21hJnB9J5k&t=2s https://www.youtube.com/watch?v=e21hJnB9J5k&t=2s

rlevy 6y ago
This is slick! Anything similar for languages beyond Python?
- mrdonbrown 6y ago
  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.

gfxgirl 6y ago

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.

rikroots 6y ago
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. [1] https://scrawl-v8.rikweb.org.uk/learn/first-lesson https://scrawl-v8.rikweb.org.uk/learn/first-lesson

alanbernstein 6y ago

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.