[HN Gopher] Scrollycoding - A new way to write code walkthroughs...
___________________________________________________________________
Scrollycoding - A new way to write code walkthroughs [video]
Author : pomber
Score : 71 points
Date : 2021-03-15 14:29 UTC (8 hours ago)
(HTM) web link (www.youtube.com)
(TXT) w3m dump (www.youtube.com)
| dayre wrote:
| This is really great... i didn't realize how much this was needed
| until working with the demo.
| michael-ax wrote:
| Brilliant!
| RobSpectre wrote:
| This is super tasteful and clean. Well done.
| Lukas_Skywalker wrote:
| Wonderful! I recently did something similar to teach kids to
| program a game (in german):
| 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... It currently works for JS,
| HTML and CSS.
| pomber wrote:
| I like it!
| matthiaswh wrote:
| 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
| respondo2134 wrote:
| 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 wrote:
| 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.
| pomber wrote:
| Agree. Nice demo! Good name also.
| pomber wrote:
| Project: https://github.com/code-hike/codehike
|
| Demo: https://code-hike-scrollycoding-
| preview.vercel.app/posts/lor...
| ballmerspeak wrote:
| This is fantastic. I'll be using on a new project and will
| happily provide feedback.
| Xevi wrote:
| What about mobile users? It doesn't seem to work for them.
| pomber wrote:
| Check 6:42 in the video. It works, if there isn't enough screen
| space it falls back to something more static.
| mrdonbrown wrote:
| 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 [2]
| https://github.com/manimcommunity/manim [3]
| https://www.youtube.com/watch?v=e21hJnB9J5k&t=2s
| anm89 wrote:
| Woah! This is pretty slick and addresses a real problem. Great
| work.
| netgusto wrote:
| 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 wrote:
| 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-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.
___________________________________________________________________
(page generated 2021-03-15 23:01 UTC)