Show HN: Codelapse.com(codelapse.com) |
Show HN: Codelapse.com(codelapse.com) |
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?
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!
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 , it's look beautiful.
Reminds me of the Twitter rant of the guy who created "webpack" or "babel" or something who was rejected by google because he couldn't reverse a linkedlist on a white board.
Also reminds me of Brett Victor's work: http://worrydream.com/#!2/LadderOfAbstraction
Would definitely help people studying CS or preparing for interviews!
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?
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.