Creé una aplicación que hace que los algoritmos de aprendizaje y las estructuras de datos sean mucho más divertidos

Soy un programador autodidacta. Esto significa que estoy constantemente lidiando con el síndrome del impostor. No es raro que me sienta inadecuado y en desventaja para comprender conceptos complejos de informática.

Nunca he sido bueno en matemáticas. Y siempre he vinculado las sólidas habilidades matemáticas a la habilidad natural de uno para sobresalir en la programación. Siento que tengo que trabajar más duro que otros (que tienen habilidades innatas en matemáticas) para aprender los mismos conceptos. Con esta idea arraigada profundamente en mi cerebro, estaba bastante seguro de que nunca sería capaz de aprender cosas como atravesar árboles de búsqueda binaria y cómo analizar mentalmente pesadillas recursivas como Mergesort.

Aunque con un poco de esfuerzo logré sorprenderme. Así que quería compartir un poco sobre cómo y los resultados tangibles de mis esfuerzos. Como siempre, ¡con la esperanza de que haya algunos colaboradores dispuestos a colaborar!

Ingrese a CS-Playground-React, una caja de arena de JavaScript simple en el navegador para aprender y practicar algoritmos y estructuras de datos.

Esta aplicación de preparación para entrevistas sin registro guarda su progreso automáticamente, ofrece soluciones para cuando se atasca y viene repleta de enlaces a artículos útiles, tutoriales y otros recursos para ayudarlo a que su viaje sea mucho menos doloroso que el mío. !

Permítanme reconocer abiertamente que esta aplicación no es nada innovadora. (¡Sé que lo estabas pensando!) Hay un montón de aplicaciones que enseñan habilidades similares y te dan la capacidad de escribir y ejecutar código directamente en tu navegador.

Pero CS Playground React tiene la intención de ser extremadamente minimalista y se concentra en un conjunto de temas muy específicos. Además, esto no está destinado a ser la próxima gran novedad. Crear esta aplicación fue solo mi forma de hacer que aprender estas cosas fuera divertido. Si termina siendo un recurso valioso incluso para otra persona en el camino, mucho mejor.

La aplicación todavía es un trabajo en progreso, y queda mucho camino por recorrer en lo que respecta al tema y las características potenciales. Entonces, si conoce un desafío interesante o una estructura de datos que no he cubierto, o ve algo que cree que puede mejorar, no dude en abrir un problema o enviar una solicitud de extracción. ?

Si solo desea ver la aplicación, no lea más: está disponible aquí (también disponible a través de https, registrará al trabajador del servicio para el almacenamiento en caché sin conexión).

Si está interesado en el código, no busque más.

El resto son todas las cosas aburridas sobre el por qué y el cómo :-)

Por qué construí esto

Mis motivaciones para crear esta aplicación fueron simples: quería aprender y quería que el aprendizaje fuera más fácil y divertido. Más importante, es la razón por la que quería aprender estas habilidades específicas.

Durante los últimos 18 meses más o menos, puedo decir con confianza que he aprendido a codificar. Aunque todavía dudo en llamarme programador. Y esto no se debe a que no codifique para ganarme la vida (no lo hago), sino más o menos por el fenómeno del síndrome del impostor al que me referí anteriormente. Sé cómo construir cosas, seguro. Pero hasta hace muy poco, sabía muy poco sobre informática formal.

Al aprender los fundamentos de la informática, esperaba no solo sentirme más seguro al pensar en mí mismo como programador, sino también ayudar a otros a verme de esa manera.

Los programadores autodidactas son una píldora que la industria tecnológica ha encontrado más fácil de tragar en los últimos años. Especialmente en áreas como Silicon Valley, donde los bootcamps de codificación han surgido en cada esquina.

Sin embargo, todavía hay un gran obstáculo que superar para la mayoría de los programadores que esperan ingresar a la industria sin una educación formal en Ciencias de la Computación.

Entonces, para ayudar a aliviar el impacto de tener una Licenciatura en Artes en lugar de una Licenciatura en Ciencias, me propuse enseñarme algunos de los conceptos que un estudiante de informática de primer o segundo año podría aprender. Pensé que esto complementaría algunas de mis habilidades de desarrollo más prácticas y ayudaría a otros a tomarme más en serio como programador.

Utilicé un conjunto de temas conocidos por ser comunes a la programación de entrevistas como la línea de base que quería cubrir.

Clasificación de burbujas, clasificación de selección, clasificación de inserción, clasificación de combinación, clasificación rápida, clasificación de montón, pilas, colas, listas vinculadas, tablas hash y árboles de búsqueda binaria. Phwewf…

Estaba muy intimidado por esta serie de problemas y había estado posponiendo abordarlos durante bastante tiempo.

No dispuesto a aceptar la derrota, finalmente comencé a profundizar. Buscando tutoriales, leyendo todos los artículos que pude encontrar y corriendo círculos de confusión a mi alrededor día tras día.

Sin embargo, con el tiempo, algunos de los conceptos empezaron a asimilarse. Pero había un par de problemas:

  1. Me estaba aburriendo un poco. Me encanta la resolución de problemas, pero seamos sinceros, resolver el reverseLevelOrderrecorrido de un árbol de búsqueda binario es mucho menos divertido que resolver un problema del mundo real para tu última aplicación.
  2. Esto llevó mucho tiempo. Trabajo a tiempo completo (NO escribo código todo el día) y mi tiempo libre para codificar es extremadamente valioso. Sabía que pasaría meses en esto y me preocupó perder el contacto con mis habilidades más comerciales.

Es genial tener todas estas cosas de CS en su haber, pero seamos sinceros, la mayoría de las veces, los desarrolladores web son contratados para construir cosas. Y no hay demasiados usos prácticos para la mayoría de estos conceptos en el desarrollo web diario.

Para mí, aprender estos conceptos era un motivo de orgullo y no me iba a rendir. Pero mi prioridad número uno era seguir siendo competente en el desarrollo web práctico.

Así que decidí unir las dos ideas. La respuesta fue crear una aplicación simple que me ayudara a lograr mis objetivos y a mantenerme bien practicado en mis habilidades básicas.

Para mí, la mejor manera de aprender algo (especialmente algo seco) es relacionarlo con algo que amas. Así que mientras construía esta aplicación y me divertía mucho haciéndola, también estaba desarrollando contenido para ella.

Ahora, aprender algoritmos y estructuras de datos era una parte necesaria de mi último proyecto. Porque, por supuesto, ¿cuál es el punto de crear una aplicación de preparación para entrevistas a menos que la llenes de problemas?

Cada pocos días, estaba aprendiendo un nuevo algoritmo o estructura de datos. Una vez que casi lo tenía, recopilaba los recursos de aprendizaje y los agregaba a la aplicación. Ahora, podría practicarlo una y otra vez en un espacio de trabajo súper simple que construí yo mismo. ¿¡Cuan genial es eso!?

El punto principal es que tomé algo que había estado posponiendo durante mucho tiempo y encontré una manera de hacerlo divertido. Y, efectivamente, tuve más éxito en lograr mis objetivos gracias a eso.

Creé esta aplicación para mí, pero quería compartirla con todos ustedes por una razón. Si incluso otra persona encuentra útil CS-Playground-React, sentiré que he hecho mi parte (o al menos parte de ella) para retribuir a esta comunidad.

Hay tantos programadores que comparten libremente sus conocimientos y experiencias, y piden poco o nada a cambio. Sin una comunidad de mente tan abierta, difícilmente sería posible aprender a codificar por su cuenta.

Hace diez años, había muchas menos opciones en lo que respecta al aprendizaje autoguiado. Así que estoy agradecido todos los días por vivir en una era de la información en la que tanto conocimiento es tan fácilmente accesible.

Hizo posible este viaje para mí, y espero que alguien más se encuentre con este artículo y descubra que su propio viaje se ha vuelto un poco más fácil.

Pila de tecnología y trucos

En caso de que esté interesado, construí esta aplicación con React & React-Redux (aunque la primera versión fue Vanilla JS, CSS y HTML). También usa CodeMirror y React-Codemirror2 para incrustar un editor en el navegador (NOTA: el React-CodeMirror original ya no se mantiene y no funciona bien con las versiones más nuevas de React, así que dale al repositorio de Scniro una estrella en GitHub para elegir ¡arriba el holgura!).

Consola simulada

Un pequeño truco me permite disparar una acción redux cada vez que un usuario llama console.logen su código. De esta manera, puedo capturar los mensajes registrados y, a su vez, simular una consola en el navegador para mostrar el resultado del código, ¡lo que pensé que era genial! Puede ejecutar en clearConsole()cualquier momento que desee borrar los mensajes de la consola simulada.

Código persistente

Quería que esta aplicación fuera muy fácil de usar. Entonces, en lugar de implementar una base de datos y pedirles a los usuarios que inicien sesión, elegí un enfoque más simple para guardar el progreso. Redux administra el estado de la aplicación durante cada sesión y yo lo uso localStoragepara conservar el código entre sesiones. La aplicación recupera este estado guardado en su próxima visita y rehidrata la tienda Redux con él. De esta manera, puede continuar justo donde lo dejó.

Si por alguna razón desea borrar todo su progreso, puede ejecutarlo resetState()en cualquier momento en el editor. Si no desea enviar su código al almacenamiento local, deje un // DO NOT SAVEcomentario en su código antes de navegar. Esto evitará guardar cualquier código, no solo para ese archivo.

Como nota al margen, resulta que hay un paquete que hace esto por ti, llamado Redux-Persist (que descubrí después del hecho). Pero para un caso de uso simple, ¿puede hacer algo con unas pocas líneas de código o instalar un paquete NPM para hacer lo mismo? Elegiré el primero cada vez. Lo más probable es que esté guardando cientos de líneas de código y un conjunto completamente nuevo de dependencias. Siempre es un toma y daca, y debes decidir cuándo la solución altamente optimizada (pero de mayor peso) es mejor que la simplista.

Paneles de tamaño variable

El último truco que tenía bajo la manga era hacer que el espacio de trabajo fuera flexible y fácil de usar. Quería darles a los usuarios la posibilidad de cambiar el tamaño tanto del editor como de la consola, así que utilicé un pequeño script que encontré llamado simpleDrag.jsReact refsy la magia de flexbox para hacerlo posible.

¡Gracias por leer y feliz pirateo!