Cómo intenté idear un nuevo enfoque para aprender algoritmos a través de visualizaciones interactivas

Imagínese una persona que estudia algoritmos. Para comprender cómo funcionan, debe comprender su código e imaginar cómo lo ejecutará la computadora. Esto es extraño: ¿por qué deberíamos aprender a pensar como una computadora en lugar de hacer que nos ayude? Algún tipo de fuerte adicción a la tecnología.





En mi opinión, una máquina debería sudar y una persona debería aprender sin voltear el cerebro. Entonces pensé, ¿por qué no visualizar el trabajo de los algoritmos? Las visualizaciones le ayudarían a no profundizar en el código, pero mostrarían claramente cómo funcionan los algoritmos y le permitirían comprenderlos. Lo que tengo - lea en este artículo.





Como resultado, nació el proyecto "Explicando el Código". Puede ver lo que es en code-explained.com . El código del proyecto se publica en GitHub.





Que me inspiro

Bret Victor dice que los creadores necesitan comentarios instantáneos sobre lo que están haciendo. Cuando crea algo o realiza cambios en su creación, debería ver el resultado de inmediato. De lo contrario, algunas de las ideas simplemente nunca se le ocurrirán.





, , , . , , . , , . , .





. , , . .





, , .





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().





, . .









?

Lanzamos recientemente y hasta ahora solo hablamos de tablas hash. El proyecto crece y se desarrolla y aparecerán nuevos capítulos en él, en los planes de clasificación y otros algoritmos. Realmente necesitamos comentarios: cuéntenos sus impresiones, qué, en su opinión, debería cambiarse o mejorarse. Les recuerdo que el proyecto se puede ver en el enlace .








All Articles