
Show HN: Algojammer – an experimental Python code editor inspired by Bret Victor - ChrisKnott
https://github.com/ChrisKnott/Algojammer
======
ChrisKnott
Hi HN,

I have had this project on the go for a while and have decided to put it out
as-is because I can't forsee being able to complete it any time soon. For
people who go straight to the comments, here's a video -
[https://www.youtube.com/watch?v=9XPE4uT0AdE](https://www.youtube.com/watch?v=9XPE4uT0AdE)
\- I have a very mumbly British accent but you should be able to get the gist
of it...

The one line summary is - it's a "real" implementation of some of the demo
GIFs in Bret Victor's "Learnable Programming" [0]

The original project goal was to create a "bicycle for the mind" that actually
has a provably positive effect on people's performance in algorithm
competitions like Google Code Jam/Facebook Hacker Cup. I don't think I got
there, but I think there's enough stuff here to interest people on a Sunday
afternoon...

Constructive criticism greatly appreciated, here or on Github issues page. If
you are experienced with CPython (as in, experienced in contributing to the
actual interpreter), then I would appreciate input on how to deliver the
"recording" aspect of the project properly. The current implementation is very
hacky.

[0]
[http://worrydream.com/LearnableProgramming/](http://worrydream.com/LearnableProgramming/)

~~~
Folcon
Really nice, I'll be dropping this around a few people I know getting into
python, any good way of passing on feedback? Github issue?

~~~
ChrisKnott
Yeah probably GitHub is best. As I've said elsewhere, little bit burnt out atm
but will be looking to start afresh at some point probably next year
incorporating as many suggestions as possible.

------
fkohlgrueber
Hi Chris, great project! If you're generally interested in all sorts of ideas
on how to make programming better, I can recommend to check out
[https://futureofcoding.org/](https://futureofcoding.org/) and the slack group
that's linked on the website. There are a lot of people thinking about,
sharing and discussing great ideas in the slack, and your project perfectly
fits into the "future of programming" category.

~~~
segmondy
If you can checkout this book "Interactive Programming Environments" do so

[https://books.google.com/books/about/Interactive_Programming...](https://books.google.com/books/about/Interactive_Programming_Environments.html?id=YcgmAAAAMAAJ&source=kp_book_description)

------
Glench
I think the idea of showing runtime data in various forms to help programmers
understand what their programs do is a great idea with a lot of promise — it's
my main research area. And this demo shows a plausible way to get some of that
in Python, which is great.

But I still wonder if anyone writing actual algorithms would find this useful,
and if so what exactly they'd find useful. I'd really like to see the field of
UIs for programming get clearer on what data is useful to show to which
programmers in what form and when.

~~~
ChrisKnott
You are totally right. My #1 annoyance is research and demos in this space,
that don't consider your question. That is why I think it is important that
this project aims to tackle problems outside my control, that are genuinely
hard to understand (Google Code Jam problems).

My plan was basically to work my way through past problems, for each one
thinking specifically about that problem - ok, what's hard here, what would
help me solve this, where did I go wrong with this, then adding those features
to Algojammer.

Then when Code Jam comes around again, I can really test it in a very
falsifiable way.

I need a break and more time so I'm not going to be working on this for a
while but I'm 100% on your side. Do you have any links to your research?

~~~
Glench
Your plan to work through past Google Code Jam problems sounds great. I'm sure
that process would help build your intuition for what tools are actually
helpful when working on this specific type of problem, which would probably
have implications for lots of programs. Personally, I think this type of
first-person empiricism is a highly undervalued resource.

Also, I wish there were more research labs that could support folks in UIs for
programming like this. Right now there are only a couple and a lot of
independent people dabbling.

As for my work, you can see it at [http://glench.com](http://glench.com)

------
jazzkingrt
Nice work! I like this bicycle analogy and believe we have a ways to go for
improving programming environments. In a far less ambitious vane, I've been
trying to integrate the pytest-watch plugin to get a tighter feedback loop
about regressions when making code changes.

------
d--b
Nice. The best thing about this project is that it is clearly dedicated to
algorithm design and it does not try to cover every programming problem.

------
Already__Taken
This is brilliant, I'd love to add this as a VSCode extension

------
sterlind
Omniscient debuggers like this are a godsend, and too few and far between.
Thank you.

When I was designing a complex, topology-transforming graph / search algorithm
in C#, I had to cobble together my own "Algorithm Debugger" to fix some
particularly tricky defects. My algorithm emitted a series of messages as it
ran, which triggered viewport updates in different tabs, showing coroutine
state, intermediate graphs, searches, etc.

It took me a month to write, and it was mired with bugs. Starting with
Algojammer I probably could have knocked it out in a couple days.

------
j3r3miah
This is amazing. I've been brushing up on algorithms for some upcoming
interviews and could imagine this being super helpful to visualize/understand.
Don't give up on the project! It's great!

------
michaelscott
This is great work and a lovely implementation of a lot of Bret Victor's (and
others') ideas. If you're really interested in constructive feedback, I'd love
to see the Sheets output directly on the timeline as I step through it but
this is probably a very subjective thing.

There are so many ways this could be developed further, I love it!

~~~
ChrisKnott
The one thing I really wanted to do was add a kind of stacking visualisation
to the timeline to show depth of callstack. At the moment it is not clear at
all how deep you are in recursion. I was thinking thin drop shadows that make
it look like the timeline is a stack of paper.

I did half implement "Markers" which are coloured lines on the timeline
similar to breakpoints.

I decided to shelve it until I had rewritten the whole thing to be more
stable, which I think will require doing it as a fork of CPython.

~~~
michaelscott
Recursion visualization would be fantastic, especially in languages like
Python where the max depth is quite shallow. You could also develop modules
for language-specific visualizations; it would be incredible to see memory
management visualized (maybe as an addressed stack?) when writing in C, or how
data ownership is being passed around a program in Rust. These would be great
for lowering the cognitive load for developers writing more complex programs.

What I really like about your implementation is that it's scratching the itch
of abstraction code (i.e. the inherently non-visual), as opposed to something
like Light Table's WebGL example (which is very impressive, but not applicable
to most developers' day jobs).

~~~
ChrisKnott
Yes, you've hit the nail on the head. The same is true of some of Bret's demos
like the Braid one. I was trying to bring some of that tangibility to
difficult abstract problems like from code jam.

I think one of the reasons games developers are so ahead of the field in
making the abstract visible is they have a "canvas" right there that they are
outputting to. It's very common to see really clever and intuitive
visualisations covering the screen in game development, not because those guys
are visionaries but because they are just trying to understand the code and
that's how they naturally express themselves.

Basically what I wanted to do was come up with a solution "one step up the
ladder of abstraction" (is my BV fanboy showing?) that let's users define
their own, problem specific visualisations. This is where the concept of
metacode came from. If you give people access to the data (omniscience), a
blank canvas (sheet), and a way to express themselves (metacode) then natural
curiosity should take over.

I'm not saying I achieved all that, but that was the idea. I think there's
more work to be done on the language of describing the code, the current
vocabulary is based around line numbers and execution steps which are brittle
when the code is changed. What you want is visualisations that persist and
change as you edit the code.

------
lgessler
Really cool, I just tried live-py the other day (on emacs, but I think it
works in other editors) and I loved how it printed the values of variables at
every stage of a loop. This looks like that but more general and much, much
prettier.

------
kuroop
Hi Bred, This is really nice work. Will play with it for sure.

Is this heavily coupled with python? Or can it be extended to any other
language like C++ or Java easily?

~~~
jxub
Looks like it is. It hooks into some CPython interpreter stuff.

~~~
ChrisKnott
Yes, it's very much Python only at the moment, although the concept can be
applied to other languages

------
deepaksurti
Excellent work @ChrisKnott, respect for one who ships stuff!

Either Chris or any of the Lispers hanging around here, can they throw deeper
insight at the following question/assertion: Isn't what Brett Victor proposing
'visual programming' on top of a live REPL?

~~~
Glench
Absolutely not. He states his vision very clearly in Learnable Programming,
especially near the end:
[http://worrydream.com/LearnableProgramming/](http://worrydream.com/LearnableProgramming/)

> Programming has to work like this. Programmers must be able to read the
> vocabulary, follow the flow, and see the state. Programmers have to create
> by reacting and create by abstracting. Assume that these are requirements.
> Given these requirements, how do we redesign programming?

------
sitkack
Thanks, this is awesome!

------
kotapi
This is beautiful, what inspired you to build this? I starred the repo, will
have a look into it and work on some algos once I find free time.

------
jatins
This looks great! That's how I (and I assume many others) actually visualize
arrays for certain algorithms.

------
zubairq
I love this! I was very inspired by the code execution timeline and will see
if I can make something similar.

