Show HN: Codelapse.com | Hacker News Reader

Show HN: Codelapse.com

codelapse.com

28 pointsitroot10 comments

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?

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!

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 , it's look beautiful.

Wow that is mesmerizing.

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

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

Really cool!

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

You're thinking of Max Howell of Homebrew fame-- https://twitter.com/mxcl/status/608682016205344768?lang=en

Yes, agree that visualizing algorithms with nice animations would help people understand them and be able to apply them!

Would definitely help people studying CS or preparing for interviews!

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

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.

Reply on news.ycombinator.com