HN Theater @HNTheaterMonth

⬐ mrdonbrown

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

⬐ rlevy

This is slick! Anything similar for languages beyond Python?

⬐ mrdonbrown

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

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

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

⬐ pomber

Project: https://github.com/code-hike/codehike

Demo: https://code-hike-scrollycoding-preview.vercel.app/posts/lor...

⬐ netgusto

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

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.

⬐ Lukas_Skywalker

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

I like it!

⬐ alanbernstein

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.

⬐ RobSpectre

This is super tasteful and clean. Well done.

⬐ dayre

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

⬐ ballmerspeak

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

⬐ anm89

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

⬐ michael-ax

Brilliant!

⬐ Xevi

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

⬐ pomber

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

⬐ matthiaswh

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

⬐ pomber

Agree. Nice demo! Good name also.

⬐ respondo2134

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

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.

⬐ chrismorgan

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.)