https://futureofcoding.org/ logo
#thinking-together
Title
# thinking-together
m

Mike Austin

11/02/2023, 7:37 PM
Over the years, I've thought about different ways of creating an interactive tutorial about writing a simple programming language. For example, you can create a "wizard" style with next and back buttons, or you can create one single page with the code floating on the right side of the content (possibly sticky). One detail is that each example would grow in size (for the complete code), but would only focus on one sub-section. I thought about collapsing sections already covered, but being able to expand them, or just have a single button to expand all the hidden code. Has anyone had experience or have seen articles that use a "build from small to large", showing code along the way?
I realize it's a bit abstract. An example of "paged" tours wold be https://go.dev/tour/welcome/1
k

Kartik Agaram

11/02/2023, 8:10 PM
I've always loved this walkthrough: https://viewsourcecode.org/snaptoken/kilo
m

Mike Austin

11/02/2023, 8:17 PM
This looks like inline code (vs off to the side), and colored "diffs" to show the changes and also collapsed functions. I like it. Very visual.
e

Eli Mellen

11/03/2023, 1:46 PM
Similar to what @Kartik Agaram shared, I enjoy how Build your own Lisp is setup.
I particularly like that it makes evident a thought process behind the code. Many examples start with a naive implementation, and then, once the idea has been communicated the chapter concludes with a “cleaning up” section that gently optimizes what has been done before
m

Mike Austin

11/03/2023, 4:33 PM
Thank you Eli. Yes, it has a similar format and I like the build-ups. To support "visual diff" and code folding, I think I'll add Markdown code comments at the end of the line. Maybe something like:
Copy code
NumericLiteral                  // >
  = value:[0-9]+ {
      return {
        type: 'NumericLiteral', // +
        value: Number(text())   // +
      };
    }
GitHub Markdown support adding + and - to the beginning of the line, but I want to be able to support other hints, maybe tooltips for example.
e

Eli Mellen

11/03/2023, 4:38 PM
legit, I tend to shy away from tooltips because they are a headache to make accessible — I think that is why I’m drawn to this more literate code style, but I defo see the gap it leaves in getting comments sort of right as close to the code as possible
m

Mike Austin

11/03/2023, 4:43 PM
Maybe not hover tooltips, but like static popup notes
s

Steve Dekorte

11/03/2023, 9:22 PM
Assuming you already have good reference docs on your website, you might wait for the LLMs to crawl them and then create a tutorial chat UI on your site that asks the user for simple apps or examples they'd like to write, and walks them through how to do that. Could also periodically have the LLM generate a bunch of simple examples with descriptions, for quick tutorial browsing. Conveniently, these would update as your docs and APIs do. It's possible the docs themselves could be autogenerated...
m

Mike Austin

11/04/2023, 4:22 AM
Ah yes, I haven't done much with AI/deep learning. That could be the start of my journey.
5 Views