Aprender JavaScript con imaginación

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • SmashingConf Friburgo 2024

  • Índice
    1. Mi búsqueda de más material de aprendizaje visual
    2. Construyendo mis propias representaciones visuales
    3. Mi primera gran lección
    4. Mi segunda gran lección
    5. El gran avance
    6. De las analogías a los modelos
    7. Cómo hacer crecer un universo memorable de múltiples capas
    8. Una celebración de enfoques de aprendizaje alternativos
      1. Lecturas adicionales sobre la revista Smashing

    Esta es la historia de cómo un pequeño pulpo, que explica el concepto de un principiante, tuvo tal peso y poder para Kylo que impulsó su interés en el aprendizaje visual y lo llevó a investigar algo que es realmente bastante tonto. Y, sin embargo, transformó la forma en que aprendió a escribir (y finalmente comprender) JavaScript.

     

    Hace muchos años, me propuse convertirme en desarrollador senior. ¡Logré ese objetivo! Ojalá pudiera decir que fue cuestión de trabajo duro y perseverancia, pero no, eso no fue suficiente. JavaScript se interpuso en mi camino, y fue mientras luchaba con él que encontré una frase tonta en el libro clásico de Marijn Habernecker, Eloquent JavaScript . Sobre el tema de las variables dice:

    “Deberíamos imaginar las encuadernaciones como tentáculos en lugar de cajas. No contienen valores; los captan: dos encuadernaciones pueden referirse al mismo valor”.

    - Marijn Habernecker

    ( Vista previa grande )

    Una analogía como esta cae en la categoría de comparaciones infantiles destinadas principalmente a principiantes para comprender conceptos básicos. Son divertidos y entretenidos, pero no son algo que te convierta en un desarrollador senior.

    Pero me llamó la atención. Incluso en pequeña medida, esta metáfora infantil me convirtió en un mejor desarrollador. Solucionó un malentendido fundamental: no ponemos valores en variables . Si las variables se comportaran como cubos o contenedores, ¿cómo podría ser cierto esto?

    const count1 = 10;const count2 = count1;

    ¿Cómo es posible tener el mismo 10valor en dos depósitos diferentes? No puede estar lo mismo en dos lugares al mismo tiempo, ¿verdad?

     

    Pero la metáfora del pulpo me resolvió este dilema. ¡Dos tentáculos ciertamente pueden obtener el mismo valor! ¡Es una visualización que revela la naturaleza subyacente de los valores! Si tuvieran a mi alcance toda la literatura informática del mundo sobre variables, no me sería tan útil como este pulpo imaginario.

    ¿Por qué no todo JavaScript puede ser así?

    Mi búsqueda de más material de aprendizaje visual

    Noté una brecha frustrante entre hacer los ejercicios de funciones y bucles simples que se encuentran en la mayoría de los cursos para principiantes y la creación de programas.

    ¿El problema? Todavía no estaba al nivel en el que podía descifrar montones de texto técnico seco. ¡Quería más pulpos!

    Así que los busqué por todas partes. Busqué en Internet recursos de aprendizaje visuales y abstractos: Google, YouTube, Medium, TikTok y todos los libros que pude encontrar. Descubrí que la mayor parte del material de “aprendizaje visual” encaja en uno de tres grupos.

    La primera es una experiencia de aprendizaje gamificada , como las plataformas para aprender jugando CodeCombat y ElevatorSaga . Si bien es maravillosamente creativo y está lleno de historias y personajes que te ayudan a construir programas reales con patrones del mundo real, este tipo de aprendizaje es procedimental. La atención se centra en utilizar conceptos en lugar de profundizar en lo que son.

    Fuente: CodeCombat . ( Vista previa grande )

    El segundo grupo es el de la sintaxis representada gráficamente o explicación técnica . ¿Alguna vez has visto una variedad de emojis de manzanas y naranjas? ¿O diagramas del eventbucle? Estos pueden dividir conceptos aterradores en un medio visual más fácil de digerir. Pueden ser poderosas ayudas visuales que transforman la densa jerga técnica. Los ejemplos incluyen la brillante serie " JavaScript Visualized " de Lydia Hallie , así como hojas de referencia como esta de Ram Maheshwari .

    “JavaScript Vizualizado: Alcance” de Lydia Hallie . ( Vista previa grande )

    El tercer grupo se acerca más a lo que buscaba: la experiencia de aprendizaje basada en analogías . A los desarrolladores les encanta una buena analogía. Los usamos todo el tiempo en publicaciones de blogs y tutoriales en vídeo. Ayudan a explicar conceptos muy técnicos. Un recurso que encontré, CodeAnalogies , es particularmente impresionante, con analogías para todo, desde redes de distribución de contenido hasta marcos MVC.

    Fuente: CodeAnalogys . ( Vista previa grande )

    Pero el aprendizaje basado en analogías tiene limitaciones para mí. ¡Todas las analogías estaban desconectadas! No tenían ninguna relación entre sí. Fueron geniales para entender un tema aislado, pero no para ver el panorama general. Lo que pasa con JavaScript es que todo está conectado. ¿Cómo se puede ampliar una analogía periodística con los objetos para describir la herencia prototípica?

    Finalmente, me di cuenta de que lo que más deseaba era algo memorable . Quería consolidar todo lo que estaba aprendiendo en un formato visual que fuera fácil de recordar cuando lo necesitara, ya sea en una entrevista o mientras escribía código. Desafortunadamente, la mayoría de las analogías son completamente olvidables. ¿Cuántas matrices de perros, gatos y plátanos se pueden tomar?

     

    Construyendo mis propias representaciones visuales

    Sólo había una solución para esto: crear mis propias representaciones visuales para mi árbol de conocimientos de JavaScript. Pero primero, necesitaba descubrir cómo hacer que algo se quedara grabado en mi memoria.

    Siempre me han interesado los métodos de memoria mnemotécnica . Se trata de “trucos” de la memoria, como el “palacio de la memoria” . Ayudan a codificar visualmente grandes cantidades de información para recordarla más fácilmente. Los competidores de la memoria mundial lo utilizan para recordar el orden de múltiples barajas de cartas y secuencias de números aleatorios.

    El principio básico es este: puedes tomar cualquier idea y convertirla en una imagen. Por ejemplo, una matriz podría ser una raya del océano . Eso es bueno, pero todavía no es suficiente. El truco consiste en hacer que la imagen mental sea lo más extraña, divertida y ridícula posible. Las imágenes que se salen de lo común son las que se quedan en la memoria.

    Mi primera gran lección

    Entonces, aquí está una de mis primeras representaciones mnemotécnicas de matrices de JavaScript:

    ( Vista previa grande )

    Estaba muy orgulloso de esto. Tenemos un vendedor ambulante de mantarrayas que vende fruta, lo que me recuerda que las matrices contienen datos. Tiene un dispositivo cuadrado especial para seleccionar elementos individuales que representan la sintaxis de corchetes para seleccionar elementos. Tiene un monóculo para recordarme que las matrices tienen métodos de búsqueda. Tiene un lazo de vaquero que hace referencia a bucles, etc.

    Es una representación divertida. ¡Pero estaba intentando aprender JavaScript para conseguir un trabajo! Si esta ridícula raya con monóculo no me convirtió en un mejor desarrollador, frustró el propósito. La prueba definitiva: ¿utilizaría esta imagen de un vendedor ambulante como punto de referencia mientras codifico? No. Resultó ser total y absolutamente inútil. Blog sobre Ajedrez

    No necesitaba una forma de recordar el término matriz . Saber que tienen métodos para buscar no me dice cómo puedo realizar búsquedas. Incluso una navaja suiza con todos los métodos de matriz principales como .sort(), .push()y .unshift()resultó inútil con una búsqueda de dos segundos en Google.

    Esto fue más complicado de lo que pensaba. Aprendí mi primera gran lección:

    No podemos aprender un lenguaje de programación usando métodos mnemotécnicos puros porque memorizar las listas de cosas no ayuda a comprender los conceptos subyacentes.

     

    Mi segunda gran lección

    Después de mucha reflexión y muchos, muchos más intentos fallidos, intenté representar algo con lo que siempre había luchado: funciones . ¿Cómo sería la composición de una función? Se me ocurrió esta representación bastante pobre:

    ( Vista previa grande )

    En la parte superior tenemos paracaidistas tontos que representan parámetros. Enviamos parámetros a través de la entrada ( )y terminan en un grupo contenido (es decir, el cuerpo de la función). Empiezan a discutir y así es como podemos recordar arguments.

    Desafortunadamente, esto también cayó en el grupo del fracaso. Representar la sintaxis no es útil. Es mejor familiarizarse con la práctica de escribirlo. También había fallos peligrosos en la analogía. Sugirió que los parámetros y argumentos son los mismos; la única diferencia es su lugar.

    ¡Una abstracción como esta con una teoría defectuosa incorporada en realidad me convertiría en un peor desarrollador! Necesitaba profundizar más en lo que realmente son las cosas.

    El gran avance

    La solución era volverse atómica. Centrarse en el concepto más pequeño me daría la primera capa que podría usar para pintar una imagen de JavaScript. Regresé a nuestro amigable pulpo, donde comenzó todo esto.

    ¿Qué agarraban los tentáculos? ¡Valores!

    Los valores a menudo se pasan por alto y no parecen la clave para desbloquear los misterios de JavaScript. Pero esta simple idea fue un gran avance para mí: si el código fluye, podemos imaginarlo como un océano o un río. ¿Qué encontramos en este flujo? ¡Islas!

    ( Vista previa grande )

    Los valores son las islas, y cada isla tiene una ubicación y un tamaño determinados. ¡Eso fue todo! Era exactamente lo que estaba buscando. Todavía no mejoró mis habilidades como desarrollador. Pero sabía que tenía potencial.

    De las analogías a los modelos

    Capa tras capa, comencé a construir una visión de JavaScript enfocándome en qué son las cosas y cómo se relacionan con otras cosas. Primero fueron las islas. Luego vinieron los genios, los hechiceros malvados, los barcos voladores y los pilotos tortugas. Mi entusiasmo creció a medida que las capas más pequeñas, los fundamentos, podían combinarse para producir una comprensión global de temas más complejos como los cierres.

    Cada imagen no era una simple analogía. Era un modelo mental , una forma de pensar. Proporcionó una lente para interpretar cada concepto, pero requirió imaginación. Yo los llamo imagimodelos .

    Sabía por mis intentos anteriores que centrarse en listas es ineficaz. El secreto está en lo que son las cosas más que en lo que hacen. Cuando lo pienso, ese fue mi problema al aprender JavaScript todo el tiempo. Al final no tuve ningún problema para que algo funcionara. El problema era que prácticamente no tenía la menor idea de por qué .

     

    Cómo hacer crecer un universo memorable de múltiples capas

    Con este enfoque, se construyó un mundo abstracto de JavaScript:

    ( Vista previa grande )

    Esta imagen me ayuda a identificar conceptos fundamentales de JavaScript para asignación, alcance local y valores primitivos. Por supuesto, no es una imagen independiente y no podrás identificar estos conceptos sin contexto. Se requiere una historia para entrelazar JavaScript y la analogía.

    Una narrativa es lo que impulsó los otros conceptos a la imagen, literalmente. Aquí podemos ver un cierre:

    ( Vista previa grande )

    La siguiente imagen utiliza métodos mnemotécnicos para recordar terminología útil. A diferencia de las matrices y los parámetros, el “contexto de ejecución” parecía algo que leería en un manual de IBM de la década de 1970. Era un término aterrador que merecía una representación aterradora.

    ( Vista previa grande )

    Encontré una conexión entre el “contexto de ejecución” y la frase “el ejecutor recibió un maleficio”, que inspiró una ilustración de un verdugo de estilo medieval sosteniendo un hacha en una mano y un maleficio, o hechizo de hechicero, en la otra.

    ¿Por qué el hechizo? No es aleatorio. Se basa en capas existentes anteriores que representan otros subconceptos. El hechizo está ligado a nuestra comprensión de la invocación de una función y te hace pensar en magos y hechiceros, ¿verdad? Y es el paréntesis en cada llamada a función.

    Esto plantea la pregunta, ¿qué es una función? ¿Es el resultado del maleficio o de la ejecución? ¿Es la invocación misma? Sólo una comprensión firme de los objetos me ayudaría a identificar lo que realmente está pasando aquí.

    Como puedes ver, las capas visuales se construyen unas sobre otras, como un árbol con un tronco central que se ramifica en diferentes direcciones. Es el árbol de conocimiento que quería: no uno que contenga todos los detalles sobre JavaScript, sino un recurso mnemotécnico central y unificado que pueda compararse y evaluarse, agregarse, discutirse y, sobre todo, recuperarse cuando lo necesite.

    A mis ilustraciones de conceptos de JavaScript las llamo "La gran sincronización" y las uso para seguir ampliando mi comprensión. También es algo que ahora uso para enseñar a otros.

    ( Vista previa grande )

    Una celebración de enfoques de aprendizaje alternativos

    ¿Fue todo sol y margaritas en mi viaje de aprendizaje de JavaScript a partir de este momento? ¿Construir este mundo me hizo superar todas las pruebas de JavaScript que necesitaba aprobar para conseguir ese trabajo de alto nivel?

    ¡No! Le deseo la mejor de las suertes a cualquiera que crea que puede aprender JavaScript simplemente mirando algunas imágenes.

    Mi mayor conclusión de todos mis esfuerzos de aprendizaje es la siguiente: a pesar de que The Great Sync resolvió tantas de mis luchas personales con el idioma, ¿es mejor que cualquiera de los recursos que mencioné? ¿Tiene alguna utilidad sin la codificación real: el proceso incansable y doloroso de intentar que el código funcione? Ciertamente no.

    Es una herramienta, entre muchas, para "ver" JavaScript de manera diferente y escapar del confinamiento de un editor de código o un tutorial de YouTube.

    Todos estos enfoques celebran la variedad y el infinito potencial creativo de la experiencia de aprendizaje. Y cuanto más tengamos, más estudiantes atrapados en JavaScript podrán descubrir nuevas rutas hacia la comprensión.

    Lecturas adicionales sobre la revista Smashing

    • API de JavaScript que no conoces
    • Herramientas de aprendizaje interactivas para desarrolladores front-end
    • Una guía para la visualización de audio con JavaScript y GSAP
    • Cuando CSS no es suficiente: requisitos de JavaScript para componentes accesibles

    (gg, yk, il)Explora más en

    • javascript
    • Codificación
    • Inspiración





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Aprender JavaScript con imaginación

    Aprender JavaScript con imaginación

    Implemente rápidamente. Implementar inteligentemente SmashingConf Friburgo 2024 Índice Mi búsqueda de m

    programar

    es

    https://aprendeprogramando.es/static/images/programar-aprender-javascript-con-imaginacion-1173-0.jpg

    2024-04-04

     

    Aprender JavaScript con imaginación
    Aprender JavaScript con imaginación

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20