"Step by Step" Build programs like Legos manuals

[grantjenks]

• Product: Transform program into a set of pages of images of HTML Diffs which edit or construct a program.
• Study Lego manuals and learn how to do it!
• Publish these as "book manuals" and market to parents who want to teach their kids how to program.

Tooling

See step_by_step repo for an initial implementation.

• Python's HTMLDiff - generate html diffs
• PhantomJS - screen capture for html
• Pygments - syntax highlighter
• autopep8 - source code formatter

Methods

Annotated construction

Annotate with comments:

# >>> 1
def count(iterable):
    return sum(1 for val in iterable)
# <<<
# >>> 2
total = count(values)
# <<<

Automatic construction

def count(iterable):     # 1 Function start.
    total = 0            # 2 Block.
    for val in iterable: # 3 Loop start.
        total += 1       # 4 Block.
    return total         # 5 Function end.

• Break at blocks/block headers.
• Maybe this should allow for annotated diffs.

Edits

# >>> 6v1
foreground = (0, 0, 0)
# <<<
# >>> 6v2
foreground = (255, 0, 0)
# <<<

• Tag: chunk name, diff name, next diff name
• If chunk name repeats then it is the application of a diff?
• Diffs should be ordered in a linked list for easy insertion.