Imagine a person who studies algorithms. To understand how they work, you have to understand their code and imagine how the computer will execute it. This is strange - why should we learn to think like a computer instead of making it help us? Some kind of strong tech addiction.
In my opinion, a machine should sweat, and a person should learn without turning their brains inside out. So I thought, why not visualize the work of the algorithms? Visualizations would help not to dig into the code, but would clearly show how the algorithms work and allow you to understand them. What I got - read in this article.
The result was the Explaining Code project. You can see what it is at code-explained.com . The project code is posted on GitHub.
What inspired me
Bret Victor says creators need instant feedback on what they are doing. When you create something or make changes to your creation, you should immediately see the result. Otherwise, some of the ideas will simply never come to your mind.
. , , . .
, , .
Youtube —
- .
- .
. , — . , , , . , .
, . , , , .
« ». , , .
- . . , . , .
Python JS, . . , JS , Python, — .
, Immutable.js. Immutable.js — . , . . , immutable.js . -:
while (true) { //
this.addBP('check-not-found'); //
if (this.newList.get(this.newListIdx) === null) {
// this.newList --
break;
}
this.addBP('check-found'); // ,
if (EQ(this.newList.get(this.newListIdx), this.number)) {
this.addBP('found-key');
return true;
}
this.fmtCollisionCount += 1; //
this.newListIdx = (this.newListIdx + 1) % this.newList.size; //
this.addBP('next-idx');
}
, . React CSS. React , CSS transitions . . , 1000 . , .
- API . , , . div , , . Div . , window.requestAnimationFrame().
, . .
?
We launched recently and so far only talked about hash tables. The project grows and develops and new chapters will appear in it - in the sorting plans and other algorithms. We really need feedback - tell us about your impressions, what, in your opinion, should be changed or improved. I remind you that the project can be viewed at the link .