
Show HN: Codelapse.com - itroot
https://codelapse.com
======
itroot
Hey, HN!

I think that visualizing interview algorithms in that way can help lot of
people to understand them, to form a "gut feeling" what's going on. What do
you think?

This particular example, linked list reversal, is a "medium" interview
question, but I've seen many times people failing it. When I solve this
question by myself I always imagine this pointers, how they act and so on, and
this visualization - it's what's going in my head. I really think that putting
it on the list and animating it helps people to form long-term understanding.

What do you think?

~~~
ncr100
Yes I agree visualization aids are helpful, and under-utilized by the
educational world. (Same thing goes for math, basic and complex.)

Specifically, for programming:

0) Memory layout or even a Variable's storage, to me, is most useful. It shows
intermediate state, and can teach programmers what they can expect to see when
their program is running. Most of the time, practically speaking, we don't
look at final results ... we look at this intermediate state.

1) Next is historical variable storage. Yes Codelapse seems to have a time-
slider. It is also helpful to have a X'd out list of prior values, to help
teach programmers to see patterns, showing the historical values they should
expect to see over time stored in a variable.

2) Keeping track of the line of code where the program counter is pointing at,
is next on my prioritized list of elements to visualize.

I recommend making the time-travel feature, in the center, more "button like",
for discoverability's sake.

The >_> faces are cool. Imaginative! Keep inventing these thoughtful
illustrations!

~~~
itroot
Thanks for the feedback, espacially for #2.

I really like to see visualisation with feedback loop ( ability to change
source code and commit a-la wikipedia) in educational process. For example,
consider
[https://www.geogebra.org/m/ZFTGX57r](https://www.geogebra.org/m/ZFTGX57r) ,
it's look beautiful.

~~~
ncr100
Wow that is mesmerizing.

Kudos to you for making such a plainly generally valuable and worthwhile piece
of technology, itroot.

~~~
itroot
geogebra is just an aspiring example, I do not have any encounter there. So,
kudos to geogebra founders =)))

------
algodaily
Very cool! This is a feature I've partially added to AlgoDaily[1], but your
implementation is a much more clean and intuitive IMO.

I assume this works the same as pythontutor.com by executing a code snippet
through a debugger and playing back the execution trace. Is each code snippet
custom created, or do you have a tool that generates these visuals?

[1] [https://algodaily.com/challenges/reverse-a-linked-
list](https://algodaily.com/challenges/reverse-a-linked-list)

~~~
itroot
Hey, thanks for comment! You are right, it uses debugger output.

This is opinionated custom visualization, and I do not have some generic tool
here. I think it is possible to do it, but it will be

* generic, like pythontutor - it misses "meaning" of what's happening, just showing the facts without emphasis

* specific cases for popular data structures (I thinking about that way)

* hand-made every time (like a Disney in old good times) - hard work =)

I'm just scratched my own itch, and learned vue.js + vuex + a bit of modern
frontend during this project.

