diff --git a/src/data/en.yml b/src/data/en.yml
index 2aae5c08da..3556c4850a 100644
--- a/src/data/en.yml
+++ b/src/data/en.yml
@@ -1073,16 +1073,13 @@ learn:
     We welcome new written tutorial contributions and this guide outlines the
     steps of how to propose, prepare and contribute.
   writing-a-tutorial-how-start-title: 'How to get started:'
-  writing-a-tutorial-how-start-1: 'Check that your proposed topic has not already been covered. There is '
-  writing-a-tutorial-how-start-2: a working spreadsheet here
+  writing-a-tutorial-how-start-1: 'Ensure your chosen topic has not been previously covered. ' 
+  writing-a-tutorial-how-start-2: 'Review the available resources. ' 
   writing-a-tutorial-how-start-3: >-
-    that outlines in progress tutorials. If your topic is listed as in progress,
-    perhaps you can add to work being done and contribute to preparing existing
-    work for publication so please reach out to us.
+    If your topic is already in progress, consider contributing to the existing work and helping prepare it for publication. Feel free to reach out to us for guidance. 
   writing-a-tutorial-how-start-4: >-
-    If your topic is not already covered and is not listed as in progress,
-    please write a few sentences on what you propose to cover and email us this
-    description at education@p5js.org.
+    If your topic hasn't been covered and isn't currently in progress, please provide a brief description of your proposed topic. You can send this description to us at education@p5js.org.
+
   writing-a-tutorial-how-prepare-title: 'How to prepare a p5js tutorial for publication online:'
   writing-a-tutorial-how-prepare-1: >-
     When your tutorial is ready for publication, please follow these steps to
diff --git a/src/data/es.yml b/src/data/es.yml
index 30bd489522..f8cebfeab5 100644
--- a/src/data/es.yml
+++ b/src/data/es.yml
@@ -83,7 +83,7 @@ copyright:
   copyright-title: Información de Copyright
   copyright1: >-
     La biblioteca p5.js es software libre; puedes redistribuirla y/o modificarla
-    según los términos de la 
+    según los términos de la
   copyright2: ' publicada por la Free Software Foundation, versión 2.1.'
   copyright3: 'La Referencia del lenguaje se encuentra bajo una licencia '
   copyright4: ' que permite reusar este contenido para propósitos no-comerciales si se otorga el crédito correspondiente.'
@@ -107,11 +107,11 @@ get started:
   download3: disponible en el sitio.
   download8: >-
     Después de la descarga, es necesario configurar un servidor local. Mira las
-    instrucciones 
+    instrucciones
   download9: aquí
   download10: >-
     . Ejecuta tu servidor local dentro de la carpeta descargada y en tu
-    navegador, ves a 
+    navegador, ves a
   download11: 'http://localhost:{your-port-num}/empty-example'
   download4: >-
     Si revisas el archivo index.html, te darás cuenta que tiene un enlace al
@@ -120,7 +120,7 @@ get started:
   download5: >-
     De forma alternativa, puedes enlazar a un archivo p5.js alojado en línea.
     Todas las versiones de p5.js están almacenadas en un CDN (Content Delivery
-    Network). Puedes ver un historial de estas versiones aquí: 
+    Network). Puedes ver un historial de estas versiones aquí:
   download6: '. En este caso, puedes cambiar el enlace a: '
   download7: 'Una página HTML de ejemplo podría verse así:'
   environment-title: Ambiente
@@ -132,7 +132,7 @@ get started:
   environment5: ' y '
   environment6: >-
     Si estás utilizando un lector de pantalla y no usas el editor de p5, te
-    recomendamos usar 
+    recomendamos usar
   environment7: ' o '
   environment8: >-
     Abre Sublime. Despliega el menú File (archivo) y elige Open (abrir) ... y
@@ -142,7 +142,7 @@ get started:
     directorio.
   environment9: >-
     Haz click en tu archivo sketch.js y éste se abrirá a la derecha de tu
-    pantalla, donde podrás editarlo. 
+    pantalla, donde podrás editarlo.
   environment10: el código de inicio de p5 en el editor sublime.
   environment11: >-
     Abre el archivo index.html en tu navegador haciendo doble click en él o
@@ -168,7 +168,7 @@ get started:
   your-first-sketch6: >-
     Si estás utilizando un lector de pantalla, tienes que activar las salidas
     accesibles en el editor, fuera del editor tienes que agregar la biblioteca
-    de accesibilidad a tu html. Para aprender más visita el 
+    de accesibilidad a tu html. Para aprender más visita el
   your-first-sketch7: ' tutorial usando p5 con un lector de pantalla'
   your-first-sketch8: >-
     Si escribiste todo correctamente, esto aparecerá en tu ventana de
@@ -245,7 +245,7 @@ download:
   complete-library-intro1: >-
     Esta es una descarga contiene el archivo de la biblioteca p5.js, el
     complemento p5.sound y un proyecto de ejemplo. No contiene un editor.
-    Explora 
+    Explora
   complete-library-intro2: Empezar
   complete-library-intro3: ' para aprender cómo crear un proyecto de p5.js.'
   p5.js-complete: p5.js completo
@@ -271,7 +271,7 @@ download:
   support-1: >-
     ¡Necesitamos tu ayuda! p5.js es un software gratuito y de código abierto. 
     Queremos hacer nuestra comunidad lo más abierta e inclusiva posible.  Puedes
-    apoyar nuestro trabajo haciendo una donación a 
+    apoyar nuestro trabajo haciendo una donación a
   support-2: >-
     , la organización que soporta p5.js. Tu donación ayudará al desarrollo de
     software para p5.js, recursos educativos como ejemplos de código y
@@ -343,7 +343,7 @@ learn:
   teach-title2: Enseñar
   learn1: >-
     Estos tutoriales proveen una revisión en mayor profundidad o paso a paso
-    sobre temas particulares. Revisa la 
+    sobre temas particulares. Revisa la
   learn2: página de ejemplos
   learn3: ' para explorar demostraciones cortas sobre diversos temas de p5.js.'
   introduction-to-p5js-title: Introducción a p5.js
@@ -687,7 +687,7 @@ learn:
     One of the most fundamental differences between working in 2D and working in
     3D is the most obvious: there is one more dimension to work with. In
     addition to the horizontal and vertical position (x and y axes) of an
-    element in our drawing, 3D adds depth, the z-axis. 
+    element in our drawing, 3D adds depth, the z-axis.
   getting-started-in-webgl-coords-and-transform-p6x1: >-
     When drawing in 2D, the point (0,0) is located at the top left corner of the
     screen. In WebGL mode, the origin of the sketch (0,0,0) is located in the
@@ -762,7 +762,7 @@ learn:
     example, if <a class="code">rotate()</a> is called, followed by <a
     class="code">translate()</a>, the direction of that translation will be
     affected by the rotation. The entire coordinate system is rotating and
-    moving, not just the shape itself. 
+    moving, not just the shape itself.
   getting-started-in-webgl-coords-and-transform-p14x1: >-
     Transformations can be performed in any order, but using
     <strong>translate</strong>, <strong>rotate</strong>, and then
@@ -789,7 +789,7 @@ learn:
     places two boxes in our sketch. To position the second box without <a
     class="code">push()</a> and <a class="code">pop()</a>, you have to account
     for the first transformation. This  can be a lot to keep track of in a more
-    complex 3D scene. 
+    complex 3D scene.
   getting-started-in-webgl-coords-and-transform-p16x2: and
   getting-started-in-webgl-coords-and-transform-p16x3: >-
     . <a class="code">push()</a> and <a class="code">pop()</a> make it easier to
@@ -805,7 +805,7 @@ learn:
     Consider this following example, which places two boxes in our sketch. To
     position the second box without <a class="code">push()</a> and <a
     class="code">pop()</a>, you have to account for the first transformation.
-    This  can be a lot to keep track of in a more complex 3D scene. 
+    This  can be a lot to keep track of in a more complex 3D scene.
   getting-started-in-webgl-coords-and-transform-p17x1: >-
     Now, let's try the same code with <a class="code">push()</a> and <a
     class="code">pop()</a>. Now we can just translate the object where we want
@@ -820,7 +820,7 @@ learn:
   getting-started-in-webgl-coords-and-transform-p18x1: >-
     In the below example, try removing <a class="code">push()</a> and <a
     class="code">pop()</a> to see how the transformations affect the second
-    object that is drawn. 
+    object that is drawn.
   getting-started-in-webgl-coords-and-transform-heading5: Basic Shapes in 3D
   getting-started-in-webgl-coords-and-transform-p19x1: >-
     So far we have only been using <a class="code">box()</a> but p5.js has seven
@@ -895,7 +895,7 @@ learn:
     method, which should be used within <a class="code">preload()</a>.
   getting-started-in-webgl-custom-geometry-p2x2: >-
     method, which should be used within <a class="code">preload()</a>. Then you
-    can use the 
+    can use the
   getting-started-in-webgl-custom-geometry-p2x3: 'function to draw the model, as demonstrated in the example below.'
   getting-started-in-webgl-custom-geometry-p3x1: >-
     A common issue that can come up with custom models is scaling. Depending on
@@ -937,11 +937,11 @@ learn:
     href="{{root}}/reference/#/p5/p5.Geometry">p5.Geometry</a>, which p5 uses
     internally for <a class="code">loadModel()</a> but can also be used to
     define custom geometry, offering tools that can be helpful in calculating
-    faces and normals. 
+    faces and normals.
   getting-started-in-webgl-custom-geometry-p6x1_: >-
     , which p5.js uses internally for <a class="code">loadModel()</a> but can
     also be used to define custom geometry, offering tools that can be helpful
-    in calculating faces and normals. 
+    in calculating faces and normals.
   getting-started-in-webgl-custom-geometry-p6x2: >-
     In 3D, a face refers to a collection of three or four points that make up a
     surface, giving our geometry the appearance of being solid. A normal is the
@@ -1003,7 +1003,7 @@ learn:
     A <em>perspective camera</em> skews objects so they appear to get smaller as
     they get further away, vanishing at a single point in the distance. This is
     in contrast to an <em>orthographic camera</em>, where the  geometry stays
-    the same size as it gets further away and has no vanishing point. 
+    the same size as it gets further away and has no vanishing point.
   getting-started-in-webgl-appearance-p3x1: >-
     One setting that we can change with a perspective camera is the
     <em>field-of-view</em>, or FOV. This is the  term that is used to describe
@@ -1079,7 +1079,7 @@ learn:
   getting-started-in-webgl-appearance-p11x1: >-
     In this interactive example, try selecting each of the different materials
     to see how they affect the appearance of the geometry. You can move your
-    mouse and see the effect that a directional light has on the material. 
+    mouse and see the effect that a directional light has on the material.
   getting-started-in-webgl-appearance-p12x1: 'Try commenting and uncommenting the different lights in this example:'
   getting-started-in-webgl-appearance-p13x1: >-
     More custom materials can be achieved through using <a
@@ -1093,7 +1093,7 @@ learn:
     While they are useful for changing the appearance of your geometry, shaders
     are a bit beyond the scope of this  tutorial, so make sure to check out the
     <a href="{{root}}/learn/introduction-to-shaders.html">Introduction to
-    Shaders</a>  page when you are ready. 
+    Shaders</a>  page when you are ready.
   getting-started-in-webgl-appearance-info1x2: Introduction to Shaders
   getting-started-in-webgl-appearance-info1x3: 'page when you are ready. '
   getting-started-in-webgl-appearance-heading4: Conclusion
@@ -1178,7 +1178,7 @@ learn:
     missing semicolon for example is not allowed and will result in an error
     message. You can't use different types of numbers, like floats or integers
     interchangeably.
-  getting-started-in-webgl-shaders-p6x1: 'First let''s look at a basic vertex shader:'
+  getting-started-in-webgl-shaders-p6x1: "First let's look at a basic vertex shader:"
   getting-started-in-webgl-shaders-p7x1: >-
     This vertex shader begins with an <em>attribute</em>, which p5.js uses to
     share vertex position information with the shader. This attribute is a <a
@@ -1364,18 +1364,13 @@ learn:
     tutorial.
   writing-a-tutorial-how-start-title: 'Cómo empezar:'
   writing-a-tutorial-how-start-1: >-
-    Comprueba que el tema que hayas propuesto no haya sido cubierto antes.
-    Puedes encontrar 
-  writing-a-tutorial-how-start-2: una lista aquí
+    Asegúrese de que el tema elegido no haya sido cubierto previamente.
+  writing-a-tutorial-how-start-2: Revisar los recursos disponibles.
   writing-a-tutorial-how-start-3: >-
-    con los tutoriales que están en progreso. Si tu tema está marcado en esta
-    lista como en progreso, tal vez puedes añadir al trabajo que se está
-    llevando a cabo y cooperar preparando el trabajo ya existente para su
-    publicación así que por favor contáctate con nosotros.
+    Si su tema ya está en progreso, considere contribuir al trabajo existente y ayudar a prepararlo para su publicación. No dude en comunicarse con nosotros para obtener orientación.
   writing-a-tutorial-how-start-4: >-
-    Si tu tema no está cubierto y no está enlistado como en progreso, por favor
-    escribe unas líneas sobre lo que propones cubrir y mándanos un email con
-    esta descripción a education@p5js.org.
+    Si su tema no ha sido cubierto y no está actualmente en progreso, proporcione una breve descripción del tema propuesto. Puede enviarnos esta descripción a education@p5js.org.
+
   writing-a-tutorial-how-prepare-title: 'Cómo preparar un tutorial de p5js para su publicación en línea:'
   writing-a-tutorial-how-prepare-1: >-
     Cuando tu tutorial esté listo para ser publicado, por favor sigue los
@@ -1385,13 +1380,13 @@ learn:
   writing-a-tutorial-how-prepare-4: ' Como se muestra en este archivo, tiene que contener un un encabezado como se muestra a continuación:'
   writing-a-tutorial-how-prepare-5: >-
     La carpeta que contiene tu tutorial se colocará en la carpeta 'tutoriales'
-    del sitio de p5js. El archivo llamado index.hbs es la 
+    del sitio de p5js. El archivo llamado index.hbs es la
   writing-a-tutorial-how-prepare-6: 'página de destino de los tutoriales de p5js,'
   writing-a-tutorial-how-prepare-7: y el archivo test-tutorial.hbs es el tutorial de prueba.
   writing-a-tutorial-how-prepare-8: 'Todos los contenidos deben de ir en las:'
   writing-a-tutorial-how-prepare-9: >-
     etiquetas de la página, con el fórmato definido por las etiquetas &lt;h1&gt;
-    y &lt;h2&gt; y las etiquetas de párrafo &lt;p&gt; como se muestra en la 
+    y &lt;h2&gt; y las etiquetas de párrafo &lt;p&gt; como se muestra en la
   writing-a-tutorial-how-prepare-10: ' página del tutorial de prueba.'
   writing-a-tutorial-how-prepare-11: >-
     Si tu tutorial contiene imágenes, deben colocarse en la carpeta 'assets' del
@@ -1424,15 +1419,15 @@ learn:
   writing-a-tutorial-iframe-1: >-
     Un iframe es cómo crear una ventana a través de la cual puedes ver otra
     página, aislada del resto de tú página. En este caso va a ser una ventana al
-    archivo index.html que contiene tu bosquejo p5js. 
+    archivo index.html que contiene tu bosquejo p5js.
   writing-a-tutorial-iframe-2: >-
     Coloca tus bosquejos p5 en la carpeta /src/assets/learn del sitio, en una
     carpeta etiquetada con el nombre de tu bosquejo como se muestra en la
     captura de pantalla. Aquí es donde todas las imágenes y bosquejos p5
-    enlazados por el iframe deben de estar guardados. 
+    enlazados por el iframe deben de estar guardados.
   writing-a-tutorial-iframe-3: >-
     En las subcarpetas que contienen tus ejemplos p5 debe de haber un archivo
-    sketch.js y otro embed.html para tu bosquejo. 
+    sketch.js y otro embed.html para tu bosquejo.
   writing-a-tutorial-iframe-4: >-
     Asegúrate que tu archivo embed.html tenga la ruta correcta hacia las
     librerías p5 del sitio. Si la estructura de tus archivos es igual a la de
@@ -1457,7 +1452,7 @@ learn:
     procesando tu bosquejo (en este caso se llama embed.html).
   writing-a-tutorial-iframe-11: >-
     Más información sobre cómo incorporar bosquejos de p5.js se pueden
-    encontrar 
+    encontrar
   writing-a-tutorial-embed-iframe-12: aquí.
   writing-a-tutorial-finishing-title: Los últimos detalles
   writing-a-tutorial-finishing-1: >-
@@ -1471,7 +1466,7 @@ learn:
     Este tutorial proviene del libro Learning Processing de Daniel Shiffman,
     publicado por Morgan Kaufmann, © 2008 Elsevier Inc. Todos los derechos
     reservados. Fue transcrito a p5 por Kelly Chang. Si detectas algún error o
-    tienes comentarios, 
+    tienes comentarios,
   color-description2: ' por favor escríbenos.'
   color-p1x1: >-
     En el mundo digital hablar de color requiere precisión. No basta con decir,
@@ -1493,12 +1488,12 @@ learn:
      rect(50,50,75,100); // Dibuja un rectángulo
   color-p3x1: >-
     Tanto el contorno como el interior de la forma pueden ser eliminados con las
-    funciones: 
+    funciones:
   color-p3x2: ' y '
   color-p3x3: >-
     . Instintivamente podríamos pensar en utilizar "stroke(0)" para eliminar el
     contorno, sin embargo, es importante recordar que 0 no significa "nada",
-    sino que indica un color negro. Además, recuerda no eliminar ambos, con 
+    sino que indica un color negro. Además, recuerda no eliminar ambos, con
   color-p3x4: ' y '
   color-p3x5: ', porque ¡nada aparecerá!'
   color-p4x1: >-
@@ -1550,7 +1545,7 @@ learn:
     manipular color en p5.js, de hecho p5.js nos permite pensar el color de la
     manera que deseemos. Por ejemplo, tu podrías preferir pensar el color en
     rangos de 0 a 100 (como un porcentaje). Esto lo puedes hacer especificando
-    un modo específico de color con la función 
+    un modo específico de color con la función
   color-custom-ranges-p2x1: >-
     La expresión anterior dice: "Ok, queremos pensar el color en términos de
     rojo, verde y azul, o RGB, en que el rango de cada color pueda estar entre
@@ -1640,17 +1635,17 @@ learn:
   coordinate-system-simple-shapes-p6x1: >-
     Una segunda manera de dibujar un rectángulo requiere especificar su punto
     central junto con su ancho y alto. Si preferimos este método, debemos
-    indicar previamente que queremos utilizar el modo 
+    indicar previamente que queremos utilizar el modo
   coordinate-system-simple-shapes-p6x2: ' antes de la instrucción del propio rectángulo. Notemos que p5.js es sensible a cada caso.'
   coordinate-system-simple-shapes-p7x1: >-
     Finalmente podemos dibujar un rectángulo con dos puntos (la esquina superior
-    izquierda y la esquina superior derecha). El modo en este caso es 
+    izquierda y la esquina superior derecha). El modo en este caso es
   coordinate-system-simple-shapes-p7x2: >-
     . Notar que este ejemplo entrega el mismo resultado en pantalla que el
     ejemplo anterior.
   coordinate-system-simple-shapes-p8x1: >-
     Una vez que nos hemos familiarizado con el concepto de dibujar un
-    rectángulo, una 
+    rectángulo, una
   coordinate-system-simple-shapes-p8x2: ' es muy sencilla de dibujar. De hecho es idéntica al '
   coordinate-system-simple-shapes-p8x3: ' con la diferencia de que la elipse se dibuja donde la caja que contiene al rectángulo debiera estar. El modo por defecto para la '
   coordinate-system-simple-shapes-p8x4: ' es '
@@ -1662,7 +1657,7 @@ learn:
     especificar el tamaño de la ventana.
   curves-description1: >-
     This tutorial is written by J David Eisenberg and ported by Sally Chen. If
-    you see any errors or have comments, 
+    you see any errors or have comments,
   curves-description2: ' please let us know.'
   curves-description3: 'This work is licensed under a '
   curves-description4: ' Creative Commons Attribution-NonCommercial-ShareAlinke 4.0 International License.'
@@ -1777,7 +1772,7 @@ libraries:
     creativas de codificadores, diseñadores y artistas asociados con p5*js.
   p5.createloop: >-
     Crea ciclos de animaciones con ruido y exporta GIF en una sola línea de
-    código. 
+    código.
   p5.dimensions: >-
     p5.dimensions extiende las funciones de vector de p5.js para que funcione
     con cualquier número de dimensiones.
@@ -1786,7 +1781,7 @@ libraries:
     Contribuciones importantes por Thomas Diewald.
   p5.experience: >-
     Biblioteca extensa para p5.js que agrega eventos adicionales para crear
-    aplicaciones web basadas en el canvas. 
+    aplicaciones web basadas en el canvas.
   p5.func: >-
     p5.func es una extensión de p5 que provee nuevos objetos y utilidades para
     generación de funciones en los dominios de tiempo, frecuencia y espacio.
@@ -2061,7 +2056,7 @@ community:
   contributors-conference-title: Conferencia de contribuyentes
   contributors-conference1: >-
     Anque la mayor parte del trabajo sucede en línea, también nos reunimos en
-    persona. Hemos tenido dos conferencias de contribuyentes realizadas en 
+    persona. Hemos tenido dos conferencias de contribuyentes realizadas en
   contributors-conference2: ' en la Universidad Carnegie Mellon en Pittsburgh, PA. Artistas, diseñadores, desarrolladores, y educadores se reunieron para llevar el proyecto p5.js adelante.'
   participants-title: Participantes
   support-title: Apoyo
@@ -2082,7 +2077,7 @@ community:
   2015contributors-conference-date: Mayo 25-31
   2015contributors-conference1: >-
     Un diverso grupo de aproximadamente 30 participantes se reunieron durante
-    una semana en el 
+    una semana en el
   2015contributors-conference2: >-
     , haciendo avances en el código, la documentación y las herramientas de
     extensión para la comunidad en torno al ambiente de programación p5.js. Los
@@ -2127,22 +2122,22 @@ community:
     colores mientras que una estudianta habla al micrófono
   2015cc_8: >-
     Participants sit around a table looking at each others laptops and compare
-    code 
+    code
   2015cc_9: 'Pizarra con notas de distintos colores y notas sobre programación '
   2015cc_10: >-
     Mujer al micrófono habla sobre la importancia de valorar distintas
     habilidades mientras que un grupo de participantes en sus computadoras
-    observan su presentación en un aula 
+    observan su presentación en un aula
   2015cc_11: >-
     Mujer habla desde un podio en un auditorio mientras que tres participantes
-    se sientan en el escenario y otros tres participan en una videollamada 
+    se sientan en el escenario y otros tres participan en una videollamada
   2015cc_12: >-
     Vista aérea de un aula con participantes trabajando en sus computadoras
-    portátiles 
+    portátiles
   2015cc_13: 'Cinco personas discutiendo en un círculo '
   2015cc_14: >-
     Cinco personas en un círculo con sus computadoras portátiles compartiendo
-    notas 
+    notas
   2015cc_15: 'Hombe al micrófono habla a un grupo de participantes dentro de un aula '
   2019contributors-conference-title: Conferencia de contribuyentes 2019
   2019contributors-conference-date: Agosto 13-18
@@ -2207,7 +2202,7 @@ community:
   2019cc_2: Participantes sentados en una mesa larga almorzando y conversando
   2019cc_3: >-
     Participantes en un aula, algunos trabajando en sus computadoras portátiles,
-    otros conversando 
+    otros conversando
   2019cc_4: Aula con participantes trabajando en sus computadoras portátiles
   2019cc_5: Participantes reunidos a oscuras en un un aula
   2019cc_6: Mujer presenta en un aula con participantes diversos
@@ -2215,7 +2210,7 @@ community:
   2019cc_8: Mujer al micrófono habla con participantes en un aula
   2019cc_9: >-
     Participante en el podio habla frente a un texto proyectado sobre el
-    problema de anonimizar datos 
+    problema de anonimizar datos
   2019cc_10: >-
     Person with a microphone speaking to fellow participants in front of text
     that reads p5.js will not add any new features except those that increase
@@ -2224,22 +2219,22 @@ community:
   2019cc_12: Hombre al micrófono habla con participantes
   2019cc_13: >-
     Participantes sentados en un aula escuchando atentamente a quienes
-    presentan 
+    presentan
   2019cc_14: >-
     Participantes sentados en un aula escuchando atentamente a quienes
-    presentan 
+    presentan
   2019cc_15: >-
     Mujer al micrófono habla con participantes sobre los límites sagrados del en
-    proyecto detrás suyo 
+    proyecto detrás suyo
   2019cc_16: >-
     Vista aéra de participantes escuchando un panel y viendo una proyección de
-    una imagen en 3d sobre persona 
+    una imagen en 3d sobre persona
   2019cc_17: >-
     Participantes sentados al rededor de una mesa con sus computadoras
     portátiles observando el código en una pantalla
   2019cc_18: >-
     Mujer sentada al lado de un oso de pelucho del mismo tamaño trabaja en su
-    computadora 
+    computadora
   2019cc_19: 'Participantes de pie sonriendo al aire libre '
   2019cc_20: Cuatro participantes de pie conversan en un círculo
   2019cc_21: Participantes almorzando juntos sentados al aire libre
@@ -2266,7 +2261,7 @@ community:
     and Access  via Translation. It provides space for contributors of p5.js and
     experienced  practitioners from outside OSSTA projects to share their
     knowledge, perspectives,  and dreams for building greater access to
-    technical and arts spaces.  
+    technical and arts spaces.
   2022-p5js-access-day-recap-video: p5.js Access Day 2022 Recap Video
   2022-p5js-access-day-recap-video-asl: p5.js Access Day 2022 Recap Video with ASL Interpretation
   2022-p5js-access-day-moderator: Moderator
@@ -2342,7 +2337,7 @@ books:
     vastly popular JavaScript with the programming library p5.js. The skills you
     will acquire from this book are highly transferable to a myriad of
     industries and can be used towards building web applications, programmable
-    robots, or generative art. 
+    robots, or generative art.
   book-5-order-a: Ordena desde Apress
   book-5-order-b: Ordena desde Amazon
   book-6-title: 'Aesthetic Programming: A Handbook of Software Studies'
@@ -2465,14 +2460,14 @@ showcase:
   project-q-2: ¿Cómo usaste p5.js en este proyecto?
   project-a-2-1-roni-cantor: >-
     Utilicé p5.js en este proyecto para generar las fórmulas de onda sinusoidal
-    y lerp (interpolación lineal) y mostrar las imágenes en el 
+    y lerp (interpolación lineal) y mostrar las imágenes en el
   project-a-2-2-roni-cantor: >-
     . Luego usé una función en mi código que exportaba mi gráfico programado a
-    un archivo 
+    un archivo
   project-a-2-3-roni-cantor: '. Necesitaba un archivo SVG para darle al plotter, un '
   project-a-2-4-roni-cantor: >-
     , para que entendiera dónde dibujar las líneas que programé. ¡Envié esta
-    información al trazador con un programa llamado 
+    información al trazador con un programa llamado
   project-a-2-5-roni-cantor: '!'
   project-q-3: ¿Cuál es tu función favorita de p5.js?
   project-a-3-roni-cantor: ' porque las líneas son divertidas y "lerp" es una palabra divertida para decir!'
@@ -2541,7 +2536,7 @@ showcase:
   creator-from-phuong: 'De Kiev, Ucrania'
   project-a-1-1-phuong: >-
     Soy una programadora y diseñadora creativa, un receptor de la beca de
-    diversidad 
+    diversidad
   link-1-phuong: Juega Airi Flies!
   link-2-phuong: Código para AiriFlies en GitHub
   link-3-phuong: Más info en el portafolio de Phuong Ngo
@@ -2553,7 +2548,7 @@ showcase:
   project-a-2-1-phuong: >-
     Usé p5.js para trabajar en la parte visual del juego. Los sprites de
     animación para Airi y los fantasmas se dibujaron en una aplicación para iPad
-    llamada 
+    llamada
   project-a-2-2-phuong: ' y luego se integraron en el código '
   project-a-2-3-phuong: . Principalmente utilicé ejemplos en p5.play como referencia.
   project-a-2-4-phuong: 'Para el fondo de desplazamiento sin fin, encontré un '
@@ -2568,7 +2563,7 @@ showcase:
   project-a-2-7-phuong: '  (actualmente, hay una versión beta que aún no está disponible en público, ¡pero lo estará muy pronto!). Agregué alrededor de 120 muestras de mis compañeros de clase diciendo la palabra "pew" con diferentes entonaciones y 80 muestras de ruido de fondo para entrenarlo. Luego integré el modelo en el juego con '
   project-a-3-1-phuong: >-
     Realmente me encanta lo fácil que se puede crear, manipular y eliminar
-    bloques y clases HTML con la 
+    bloques y clases HTML con la
   project-a-3-2-phuong: ' a través de '
   project-a-3-3-phuong: ' etc. But my most favorite function is '
   project-a-3-4-phuong: ', etc. Pero mi función favorita es '
@@ -2598,7 +2593,7 @@ showcase:
     Este verano, me di el desafío de hacer carteles tipográficos con
     programación, y este es uno de los carteles que hice. Hasta hace muy poco,
     no sabía que podía usar los datos del sensor de movimiento con p5.js.
-    También estaba viendo los 
+    También estaba viendo los
   dan-shiffman-matterjs-tutorial: video tutoriales de Dan Shiffman matter.js
   project-a-2-2-chung: >-
     , así que pensé ¿por qué no combinar los dos y practicar lo que estaba
@@ -2606,7 +2601,7 @@ showcase:
   project-a-3-1-chung: >-
     Hay muchas cosas que me encantan de p5.js, como la comunidad en línea y la
     amabilidad de los principiantes. Lo que realmente me gusta en este momento
-    es el 
+    es el
   project-a-3-2-chung: >-
     , con el que no solo puedo trabajar en línea para mí, sino también compartir
     el URL rápidamente en el modo actual. Para este proyecto en particular, tuve
@@ -2614,7 +2609,7 @@ showcase:
     comprometerme con GitHub.
   project-a-4-1-chung: >-
     Tuve algunos problemas con el manejo de la fuente, el canal alfa y z-depth
-    en el modo 
+    en el modo
   project-a-4-2-chung: >-
     . Todavía no estoy contento con todas mis decisiones. Pero en general, fue
     útil buscar en el foro y no olvidar dividir los problemas en otros más
@@ -2622,11 +2617,11 @@ showcase:
     archivos de video directamente desde p5.js. La grabación de pantalla no era
     una opción debido a caídas de frecuencia de cuadros intermitentes (mi
     computadora portátil es bastante lenta). Después de investigar un poco,
-    decidí aprender algunos conceptos básicos de 
+    decidí aprender algunos conceptos básicos de
   project-a-4-3-chung: ' y crear una herramienta para mí.'
   project-a-5-1-chung: >-
     Como se mencionó anteriormente, si desea renderizar cuadros y archivos de
-    video a partir de bocetos de p5.js, consulte mi 
+    video a partir de bocetos de p5.js, consulte mi
   project-a-5-2-chung: ' y hazme saber lo que piensas.'
   creator-from-casey-louise: 'De Nueva York, Nueva York'
   project-a-1-1-casey-louise: >-
@@ -2637,7 +2632,7 @@ showcase:
     computacionales y espacios interactivos basados en tecnologías de sensores.
   project-a-1-3-casey-louise: >-
     Casey: Comencé a aprender p5.js en 2018 en mi primer semestre en ITP, aunque
-    había estado incursionando en 
+    había estado incursionando en
   project-a-1-4-casey-louise: ' desde 2012. Mi amigo Pedro me introdujo a Processing cuando estudiaba diseño gráfico, y me impresionó. La idea de crear mis propias herramientas para crear gráficos y arte interactivo despertó mi interés, pero una vez que lo intenté, me enganché. El primer proyecto que puedo recordar fue un ojo que te seguía por la pantalla, y se ponía triste cuando lo dejabas solo.'
   project-a-1-5-casey-louise: >-
     Louise: Inicialmente aprendí p5.js para hacer que un sitio web que ya estaba
@@ -2647,7 +2642,7 @@ showcase:
     Casey: Estuve posponiendo los sombreadores de aprendizaje durante mucho
     tiempo, y también tenía curiosidad por saber si podría usarlos en p5.js.
     Luego escuché acerca de una subvención para proyectos de código abierto,
-    narración de historias y recursos de aprendizaje en ITP llamada 
+    narración de historias y recursos de aprendizaje en ITP llamada
   project-a-2-2-casey-louise: >-
     . Como no encontraba mucho en la documentación de p5.js + shader, decidí
     descubrir cómo se implementan en p5.js y crear un recurso para que otros
@@ -2663,7 +2658,7 @@ showcase:
   project-a-4-1-casey-louise: >-
     Casey: El comienzo del proyecto (descubrir cómo funcionan las cosas) fue que
     contactamos a personas increíbles, les hicimos preguntas y les pedimos
-    permiso para usar sus ejemplos en nuestro proyecto. 
+    permiso para usar sus ejemplos en nuestro proyecto.
   adam-ferris-repo-casey-louise: GitHub repo de Adam Ferriss
   project-a-4-2-casey-louise: ' realmente nos dio las bases para comprender cómo funcionan los shaders en p5.js y proporcionó un marco de ejemplos accesibles para que podamos crear proyectos. Para algunos problemas específicos relacionados con p5.js que teníamos, nos comunicamos con '
   project-a-4-3-casey-louise: ' y '
@@ -2676,7 +2671,7 @@ showcase:
     en GitHub por Adam Ferriss. Nuestro objetivo era hacerlo de manera que un
     principiante pueda entender cómo implementarlo, por lo que fue tanto un
     desafío técnico como un desafío en la enseñanza del código a extraños y
-    principiantes. Aquí nos inspiramos en la forma en que está escrito el 
+    principiantes. Aquí nos inspiramos en la forma en que está escrito el
   openframeworks-book-casey-louise: libro de openFrameworks
   project-a-4-7-casey-louise: >-
     . Creemos en un enfoque divertido de "oye, no es difícil y tú también puedes
@@ -2722,11 +2717,11 @@ teach:
   teach-title2: Enseñar
   teach-intro1: >-
     Cada enseñanza tiene sus propios objetivos, mensajes, condiciones y
-    entornos. 
+    entornos.
   teach-intro2: >-
     Al documentar y compartir talleres, clases y materiales de p5, esperamos
     conectar mejor las comunidades de estudiantes y educadores de p5.js de todo
-    el mundo. 
+    el mundo.
   teach-intro3: Compartir o recomendar
   teach-intro4: 'tus propias experiencias de enseñanza, también!'
   teach-heading: p5 Recursos Didácticos
@@ -2895,7 +2890,7 @@ teach:
   teach-case11-content5: >-
     We used p5.js Web editor and code examples on the website.  We also used
     dice, playing cards and various paper tools to help students learn about
-    coding concepts. 
+    coding concepts.
   teach-case12-title: Digital Weaving & Physical Computing Workshop Series
   teach-case12-lead-name: Qianqian Ye
   teach-case12-image-alt: In-class photo
@@ -2915,7 +2910,7 @@ teach:
   teach-case13-title: p5.js à l'Ubuntu Party!
   teach-case13-lead-name: Basile Pesin
   teach-case13-content1: '2020 Ubuntu Party '
-  teach-case13-content1-1: 'Cité des Sciences et de l''''Industrie, Paris, France'
+  teach-case13-content1-1: "Cité des Sciences et de l''Industrie, Paris, France"
   teach-case13-content2: 'Any age, including children and parents, young and older adults.'
   teach-case13-content3: Advanced
   teach-case13-content4: >-
diff --git a/src/data/hi.yml b/src/data/hi.yml
index 40d06fcf66..a62846c9ab 100644
--- a/src/data/hi.yml
+++ b/src/data/hi.yml
@@ -675,7 +675,7 @@ learn:
     One of the most fundamental differences between working in 2D and working in
     3D is the most obvious: there is one more dimension to work with. In
     addition to the horizontal and vertical position (x and y axes) of an
-    element in our drawing, 3D adds depth, the z-axis. 
+    element in our drawing, 3D adds depth, the z-axis.
   getting-started-in-webgl-coords-and-transform-p6x1: >-
     When drawing in 2D, the point (0,0) is located at the top left corner of the
     screen. In WebGL mode, the origin of the sketch (0,0,0) is located in the
@@ -750,7 +750,7 @@ learn:
     example, if <a class="code">rotate()</a> is called, followed by <a
     class="code">translate()</a>, the direction of that translation will be
     affected by the rotation. The entire coordinate system is rotating and
-    moving, not just the shape itself. 
+    moving, not just the shape itself.
   getting-started-in-webgl-coords-and-transform-p14x1: >-
     Transformations can be performed in any order, but using
     <strong>translate</strong>, <strong>rotate</strong>, and then
@@ -777,7 +777,7 @@ learn:
     places two boxes in our sketch. To position the second box without <a
     class="code">push()</a> and <a class="code">pop()</a>, you have to account
     for the first transformation. This  can be a lot to keep track of in a more
-    complex 3D scene. 
+    complex 3D scene.
   getting-started-in-webgl-coords-and-transform-p16x2: and
   getting-started-in-webgl-coords-and-transform-p16x3: >-
     . <a class="code">push()</a> and <a class="code">pop()</a> make it easier to
@@ -793,7 +793,7 @@ learn:
     Consider this following example, which places two boxes in our sketch. To
     position the second box without <a class="code">push()</a> and <a
     class="code">pop()</a>, you have to account for the first transformation.
-    This  can be a lot to keep track of in a more complex 3D scene. 
+    This  can be a lot to keep track of in a more complex 3D scene.
   getting-started-in-webgl-coords-and-transform-p17x1: >-
     Now, let's try the same code with <a class="code">push()</a> and <a
     class="code">pop()</a>. Now we can just translate the object where we want
@@ -808,7 +808,7 @@ learn:
   getting-started-in-webgl-coords-and-transform-p18x1: >-
     In the below example, try removing <a class="code">push()</a> and <a
     class="code">pop()</a> to see how the transformations affect the second
-    object that is drawn. 
+    object that is drawn.
   getting-started-in-webgl-coords-and-transform-heading5: Basic Shapes in 3D
   getting-started-in-webgl-coords-and-transform-p19x1: >-
     So far we have only been using <a class="code">box()</a> but p5.js has seven
@@ -883,7 +883,7 @@ learn:
     method, which should be used within <a class="code">preload()</a>.
   getting-started-in-webgl-custom-geometry-p2x2: >-
     method, which should be used within <a class="code">preload()</a>. Then you
-    can use the 
+    can use the
   getting-started-in-webgl-custom-geometry-p2x3: 'function to draw the model, as demonstrated in the example below.'
   getting-started-in-webgl-custom-geometry-p3x1: >-
     A common issue that can come up with custom models is scaling. Depending on
@@ -925,11 +925,11 @@ learn:
     href="{{root}}/reference/#/p5/p5.Geometry">p5.Geometry</a>, which p5 uses
     internally for <a class="code">loadModel()</a> but can also be used to
     define custom geometry, offering tools that can be helpful in calculating
-    faces and normals. 
+    faces and normals.
   getting-started-in-webgl-custom-geometry-p6x1_: >-
     , which p5.js uses internally for <a class="code">loadModel()</a> but can
     also be used to define custom geometry, offering tools that can be helpful
-    in calculating faces and normals. 
+    in calculating faces and normals.
   getting-started-in-webgl-custom-geometry-p6x2: >-
     In 3D, a face refers to a collection of three or four points that make up a
     surface, giving our geometry the appearance of being solid. A normal is the
@@ -991,7 +991,7 @@ learn:
     A <em>perspective camera</em> skews objects so they appear to get smaller as
     they get further away, vanishing at a single point in the distance. This is
     in contrast to an <em>orthographic camera</em>, where the  geometry stays
-    the same size as it gets further away and has no vanishing point. 
+    the same size as it gets further away and has no vanishing point.
   getting-started-in-webgl-appearance-p3x1: >-
     One setting that we can change with a perspective camera is the
     <em>field-of-view</em>, or FOV. This is the  term that is used to describe
@@ -1067,7 +1067,7 @@ learn:
   getting-started-in-webgl-appearance-p11x1: >-
     In this interactive example, try selecting each of the different materials
     to see how they affect the appearance of the geometry. You can move your
-    mouse and see the effect that a directional light has on the material. 
+    mouse and see the effect that a directional light has on the material.
   getting-started-in-webgl-appearance-p12x1: 'Try commenting and uncommenting the different lights in this example:'
   getting-started-in-webgl-appearance-p13x1: >-
     More custom materials can be achieved through using <a
@@ -1081,7 +1081,7 @@ learn:
     While they are useful for changing the appearance of your geometry, shaders
     are a bit beyond the scope of this  tutorial, so make sure to check out the
     <a href="{{root}}/learn/introduction-to-shaders.html">Introduction to
-    Shaders</a>  page when you are ready. 
+    Shaders</a>  page when you are ready.
   getting-started-in-webgl-appearance-info1x2: Introduction to Shaders
   getting-started-in-webgl-appearance-info1x3: 'page when you are ready. '
   getting-started-in-webgl-appearance-heading4: Conclusion
@@ -1166,7 +1166,7 @@ learn:
     missing semicolon for example is not allowed and will result in an error
     message. You can't use different types of numbers, like floats or integers
     interchangeably.
-  getting-started-in-webgl-shaders-p6x1: 'First let''s look at a basic vertex shader:'
+  getting-started-in-webgl-shaders-p6x1: "First let's look at a basic vertex shader:"
   getting-started-in-webgl-shaders-p7x1: >-
     This vertex shader begins with an <em>attribute</em>, which p5.js uses to
     share vertex position information with the shader. This attribute is a <a
@@ -1349,17 +1349,12 @@ learn:
     हम नए लिखित शिक्षण योगदानों का स्वागत करते हैं और यह गाइड प्रस्ताव, तैयारी
     और योगदान करने के तरीके की रूपरेखा प्रस्तुत करता है।
   writing-a-tutorial-how-start-title: 'शुरुआत कैसे करें:'
-  writing-a-tutorial-how-start-1: 'जांचें कि आपका प्रस्तावित विषय पहले से ही कवर नहीं किया गया है। '
-  writing-a-tutorial-how-start-2: 'यहां एक वर्किंग स्प्रेडशीट है '
+  writing-a-tutorial-how-start-1: 'सुनिश्चित करें कि आपका चुना हुआ विषय पहले कवर नहीं किया गया है। '
+  writing-a-tutorial-how-start-2: 'उपलब्ध संसाधनों की समीक्षा करें. '
   writing-a-tutorial-how-start-3: >-
-    जो प्रगति शिक्षण में रूपरेखा है। यदि आपके विषय को प्रगति के रूप में सूचीबद्ध
-    किया गया है, तो शायद आप काम करने के लिए जोड़ सकते हैं और प्रकाशन के लिए
-    मौजूदा काम को तैयार करने में योगदान कर सकते हैं ताकि कृपया हमारे पास
-    पहुंचें।
+    यदि आपका विषय पहले से ही प्रगति पर है, तो मौजूदा कार्य में योगदान देने और इसे प्रकाशन के लिए तैयार करने में मदद करने पर विचार करें। मार्गदर्शन के लिए बेझिझक हमसे संपर्क करें।
   writing-a-tutorial-how-start-4: >-
-    यदि आपका विषय पहले से ही कवर नहीं है और प्रगति के रूप में सूचीबद्ध नहीं है,
-    तो कृपया कुछ वाक्यों को लिखें, जो आप हमें इस विवरण को education@p5js.org पर
-    कवर करने और ईमेल करने का प्रस्ताव देते हैं।
+    यदि आपका विषय कवर नहीं किया गया है और वर्तमान में प्रगति पर नहीं है, तो कृपया अपने प्रस्तावित विषय का संक्षिप्त विवरण प्रदान करें। आप यह विवरण हमें education@p5js.org पर भेज सकते हैं।
   writing-a-tutorial-how-prepare-title: 'ऑनलाइन प्रकाशन के लिए एक p5js शिक्षण कैसे तैयार करें:'
   writing-a-tutorial-how-prepare-1: >-
     जब आपका शिक्षण प्रकाशन के लिए तैयार हो जाता है, तो कृपया p5js वेबसाइट के लिए
@@ -1613,7 +1608,7 @@ learn:
     के लिए createCanvas () फ़ंक्शन के उपयोग पर ध्यान दें।
   curves-description1: >-
     This tutorial is written by J David Eisenberg and ported by Sally Chen. If
-    you see any errors or have comments, 
+    you see any errors or have comments,
   curves-description2: ' please let us know.'
   curves-description3: 'This work is licensed under a '
   curves-description4: ' Creative Commons Attribution-NonCommercial-ShareAlinke 4.0 International License.'
@@ -1844,7 +1839,7 @@ libraries:
   p5.xr: p5 के साथ VR और AR रेखाचित्र बनाने के लिए एक पुस्तकालय|
   p5.3D: 'WebGL में 3D पाठ और छवियां। '
   WEBMIDI.js: Easily send and receive MIDI messages from p5.
-  p5.buttons: '''एक पुस्तकालय जिसका उद्देश्य स्क्रिप्टिंग बटन को जटिल बनाना है।'''
+  p5.buttons: "'एक पुस्तकालय जिसका उद्देश्य स्क्रिप्टिंग बटन को जटिल बनाना है।'"
   p5.button: >-
     'p5.js कैनवास में सीधे सरल या स्टाइल वाले बटनों को डिज़ाइन और प्रस्तुत करने
     के लिए छोटा एक फ़ंक्शन लाइब्रेरी।'
@@ -1999,7 +1994,7 @@ community:
   contributors-conference-title: p5.js योगदानकर्ता सम्मेलन
   contributors-conference1: >-
     जबकि अधिकांश कार्य ऑनलाइन होते है, हम IRL भी आयोजित करते हैं। हमने
-    पिट्सबर्ग, पेंसिल्वेनिया में 
+    पिट्सबर्ग, पेंसिल्वेनिया में
   contributors-conference2: >-
     कार्नेगी मेलन विश्वविद्यालय में योगदानकर्ताओं के दो सम्मेलन आयोजित किए।
     कलाकार, डिजाइनर, डेवलपर्स, शिक्षक p5.js परियोजना को आगे बढ़ाने के लिए एक साथ
@@ -2181,7 +2176,7 @@ community:
     and Access  via Translation. It provides space for contributors of p5.js and
     experienced  practitioners from outside OSSTA projects to share their
     knowledge, perspectives,  and dreams for building greater access to
-    technical and arts spaces.  
+    technical and arts spaces.
   2022-p5js-access-day-recap-video: p5.js Access Day 2022 Recap Video
   2022-p5js-access-day-recap-video-asl: p5.js Access Day 2022 Recap Video with ASL Interpretation
   2022-p5js-access-day-moderator: Moderator
@@ -2452,7 +2447,7 @@ showcase:
   project-a-5-1-qianqian: 'I am very excited about '
   project-a-5-2-qianqian: ' in LA.'
   creator-from-phuong: 'From Kyiv, Ukraine'
-  project-a-1-1-phuong: 'I''m a creative coder and designer, a '
+  project-a-1-1-phuong: "I'm a creative coder and designer, a "
   link-1-phuong: Play Airi Flies!
   link-2-phuong: Code for AiriFlies on GitHub
   link-3-phuong: More info in Phuong Ngo's portfolio
@@ -2551,7 +2546,7 @@ showcase:
     great about making sure the project is a learning resource and not just a
     collection of examples.
   project-a-3-1-casey-louise: 'Casey: Does '
-  project-a-3-2-casey-louise: ' count as a feature? I also love having the ability to share my programs on the web so that people don''t have to install special software or come to NYC to see my work.'
+  project-a-3-2-casey-louise: " count as a feature? I also love having the ability to share my programs on the web so that people don't have to install special software or come to NYC to see my work."
   project-a-3-3-casey-louise: 'Louise: My favorite feature is '
   project-a-3-4-casey-louise: ' and '
   project-a-3-5-casey-louise: ' for transformation of the coordinate system to make generative visuals.'
@@ -2575,7 +2570,7 @@ showcase:
   openframeworks-book-casey-louise: openFrameworks book
   project-a-4-7-casey-louise: ' is written. A fun "hey, it’s not hard and you can do it too" approach is what we believe in.'
   project-a-5-1-casey-louise: 'Check out the '
-  project-a-5-2-casey-louise: ' to explore our peers'' amazing grant projects!'
+  project-a-5-2-casey-louise: " to explore our peers' amazing grant projects!"
   pronouns-nonbinary: (they/them)
   creator-from-moon: 'From Athens, Georgia'
   posters-by: Posters By
@@ -2785,7 +2780,7 @@ teach:
   teach-case11-content5: >-
     We used p5.js Web editor and code examples on the website.  We also used
     dice, playing cards and various paper tools to help students learn about
-    coding concepts. 
+    coding concepts.
   teach-case12-title: Digital Weaving & Physical Computing Workshop Series
   teach-case12-lead-name: Qianqian Ye
   teach-case12-image-alt: In-class photo
@@ -2805,7 +2800,7 @@ teach:
   teach-case13-title: p5.js à l'Ubuntu Party!
   teach-case13-lead-name: Basile Pesin
   teach-case13-content1: '2020 Ubuntu Party '
-  teach-case13-content1-1: 'Cité des Sciences et de l''''Industrie, Paris, France'
+  teach-case13-content1-1: "Cité des Sciences et de l''Industrie, Paris, France"
   teach-case13-content2: 'Any age, including children and parents, young and older adults.'
   teach-case13-content3: Advanced
   teach-case13-content4: >-
diff --git a/src/data/it.yml b/src/data/it.yml
index eb533f911d..bc53f088c4 100644
--- a/src/data/it.yml
+++ b/src/data/it.yml
@@ -30,7 +30,7 @@ home:
   blmnamelistending: 'e tanti altri, troppi da elencare qui...'
   blmstatement1: >-
     Questo sito è attualmente offline, come piccolo segno di rispetto e di
-    solidarietà. La 
+    solidarietà. La
   blmstatement2: rimane disponibile.
   blmstatement3: 'Please consider donating to '
   blacklivesmatter: Black Lives Matter
@@ -90,7 +90,7 @@ copyright:
   copyright-title: Informazioni di Copyright
   copyright1: >-
     La libreria p5.js è software libero; lo si può redistribuire e/o modificare
-    in base ai termini della 
+    in base ai termini della
   copyright2: ' come pubblicata dalla Free Software Foundation, versione 2.1.'
   copyright3: 'La sezione Riferimenti è sotto una licenza '
   copyright4: ' il che permette di riusare questo contenuto per fini non commerciali, se si concede il dovuto riconoscimento.'
@@ -110,7 +110,7 @@ get started:
   hosted-title: Utilizzare una versione hosted della libreria p5.js
   download1: >-
     Il modo più semplice per iniziare è usando l&apos;esempio vuoto incluso nel
-    download del 
+    download del
   download2: p5.js completo
   download3: .
   download4: >-
@@ -120,7 +120,7 @@ get started:
   download5: >-
     In alternativa, puoi linkare ad un file p5.js online. Tutte le versioni di
     p5.js sono salvate in un CDN (Content Delivery Network). Puoi trovare la
-    cronologia di queste versioni nel 
+    cronologia di queste versioni nel
   download6: '. In questo caso puoi modificare il link in:'
   download7: 'Una pagina HTML d&apos;esempio potrebbe essere simile a questa:'
   download8: 'Può anche iniziare con questo '
@@ -128,7 +128,7 @@ get started:
   environment-title: Ambiente di sviluppo
   environment1: >-
     Per eseguire p5.js sul tuo computer avrai bisogno di un editor di testo.
-    Puoi usare l&apos; 
+    Puoi usare l&apos;
   environmentlink: 'https://it.wikipedia.org/wiki/Editor_di_testo'
   environment2: ' editor '
   environment3: 'che preferisci. Le istruzioni per la configurazione di '
@@ -136,7 +136,7 @@ get started:
   environment5: ' e '
   environment6: >-
     Se utilizzi uno screen reader e non usi il p5 web editor, ti consigliamo di
-    scegliere 
+    scegliere
   environment7: ' o '
   environment8: >-
     Avvia Sublime. Vai sul menu File e clicca Open... e seleziona la cartella in
@@ -145,7 +145,7 @@ get started:
     nella cartella in basso.
   environment9: >-
     Clicca sul tuo file sketch.js e questo si aprirà sulla destra, dove potrai
-    modificarlo. 
+    modificarlo.
   environment10: il codice di avvio p5 nell&apos;editor sublime.
   environment11: >-
     Apri il file index.html con il tuo browser facendo doppio-click su di esso o
@@ -168,7 +168,7 @@ get started:
   your-first-sketch6: >-
     Se stai usando uno screen reader, devi attivare gli output accessibili
     nell&apos;editor, al di fuori dell&apos;editor devi aggiungere la libreria
-    di accessibilità al tuo html. Per saperne di più visita il 
+    di accessibilità al tuo html. Per saperne di più visita il
   your-first-sketch7: tutorial per usare p5 con uno screen reader
   your-first-sketch8: >-
     Se hai scritto tutto correttamente, ti apparirà questo sulla finestra di
@@ -245,7 +245,7 @@ download:
   complete-library-title: Libreria completa
   complete-library-intro1: >-
     Questo download comprende il file della libreria p5.js, la componente
-    aggiuntiva p5.sound, e un progetto esempio. Non contiene un editor. Visita 
+    aggiuntiva p5.sound, e un progetto esempio. Non contiene un editor. Visita
   complete-library-intro2: Iniziare
   complete-library-intro3: ' per imparare a impostare un progetto p5.js.'
   p5.js-complete: p5.js completo
@@ -271,7 +271,7 @@ download:
   support-1: >-
     We need your help! p5.js è gratuito e open-source. Vogliamo rendere la nostra community il più
     aperta e inclusiva possibile. You can support this work by making a donation to
-    the 
+    the
   support-2: >-
     , the organization that supports p5.js.
     Your donation supports software development for p5.js, education resources
@@ -341,7 +341,7 @@ learn:
   learn-title: Imparare
   learn1: >-
     Questi tutorial forniscono una panoramica più precisa e step-by-step di
-    determinati argomenti. Dai un&apos;occhiata alle 
+    determinati argomenti. Dai un&apos;occhiata alle
   learn2: pagine di esempio"
   learn3: per scoprire brevi dimostrazioni su vari argomenti p5.js.
   introduction-to-p5js-title: Introduzione a p5.js
@@ -382,13 +382,13 @@ learn:
     add labels into your code that instruct the screen reader on how to describe certain elements
     within your canvas.
   labeling-canvases-what-is-labeling-3: >-
-    For more information about p5.js screen reader accessibility, please read 
+    For more information about p5.js screen reader accessibility, please read
   labeling-canvases-available-labels: Screen reader labels for p5.js
   labeling-canvases-available-labels-1: p5.js offers four different functions for labeling your canvas
   labeling-canvases-available-labels-li-1: >-
     <a class = "code" href="https://p5js.org/reference/#/p5/describe">describe()</a> provides an overall description of the canvas contents. This function's parameters include: <span class= "code">text</span>, 
     which affords a string of text for the label; and <span class = "code">display</span>, an optional parameter to set the visibility of the label.
-  labeling-canvases-available-labels-li-2: >- 
+  labeling-canvases-available-labels-li-2: >-
     <a class = "code" href="https://p5js.org/reference/#/p5/describeElement">describeElement()</a> describes a specific element or a specific grouping of elements in a canvas. 
     This function's parameters include: <span class = "code">name</span>, which affords a string naming the element described; <span class = "code">text</span>, which affords a string of text as the label description; 
     and <span class="code">display</span>, an optional parameter to set the visibility of the label.
@@ -528,11 +528,11 @@ learn:
   getting-started-in-webgl-title: Getting Started in WebGL
   getting-started-in-webgl-coords-and-transform-title: Coordinates and Transformations
   getting-started-in-webgl-coords-and-transform: Basics of 3D setup, coordinates, and transformations
-  getting-started-in-webgl-coords-and-transform-p1x1: >- 
+  getting-started-in-webgl-coords-and-transform-p1x1: >-
     p5.js is a powerful tool for creating 2D graphics but it's also capable of 3D graphics.
     To get started in 3D there are some new concepts to learn and this document will introduce some ideas
     that will be important to any 3D sketch.
-  getting-started-in-webgl-coords-and-transform-toc-title: Table of Contents 
+  getting-started-in-webgl-coords-and-transform-toc-title: Table of Contents
   getting-started-in-webgl-coords-and-transform-toc1: What is WebGL
   getting-started-in-webgl-coords-and-transform-toc2: 3D Coordinate Space
   getting-started-in-webgl-coords-and-transform-toc3: Transformations
@@ -540,27 +540,27 @@ learn:
   getting-started-in-webgl-coords-and-transform-toc5: Basic Shapes in 3D
   getting-started-in-webgl-coords-and-transform-toc6: Conclusion
   getting-started-in-webgl-coords-and-transform-heading1: What is WebGL
-  getting-started-in-webgl-coords-and-transform-p2x1: >- 
+  getting-started-in-webgl-coords-and-transform-p2x1: >-
     WebGL is a library that gives us the tools we need to create 3D graphics within a web browser. To put it simply,
     it allows us to do all kinds of math that help arrange and display objects in 3D. p5.js makes it easier to work with WebGL
     through its special WebGL mode.
-  getting-started-in-webgl-coords-and-transform-p3x1: >- 
-      Working in 3D introduces a lot of complexity, especially when a sketch involves motion, texture, lighting, and
-      more. Luckily for us, computers have special hardware that is particularly
-      well suited to performing those calculations, the graphics processing unit (GPU). The GPU is capable of
-      processing many things simultaneously, which is especially important when we're dealing with pixels and many shapes in space.
-  getting-started-in-webgl-coords-and-transform-p4x1: >- 
+  getting-started-in-webgl-coords-and-transform-p3x1: >-
+    Working in 3D introduces a lot of complexity, especially when a sketch involves motion, texture, lighting, and
+    more. Luckily for us, computers have special hardware that is particularly
+    well suited to performing those calculations, the graphics processing unit (GPU). The GPU is capable of
+    processing many things simultaneously, which is especially important when we're dealing with pixels and many shapes in space.
+  getting-started-in-webgl-coords-and-transform-p4x1: >-
     Let's get started by setting up the p5.js to use WebGL, by passing a third parameter into <a class="code">createCanvas()</a>.
   getting-started-in-webgl-coords-and-transform-heading2: >-
     3D Coordinate Space: Positioning in 3D
   getting-started-in-webgl-coords-and-transform-info1x1: >-
     If coordinates systems aren't making sense it might be helpful to revisit the tutorial titled
     <a href="{{root}}/learn/coordinate-system-and-shapes.html">Coordinate System and Shapes</a>.
-  getting-started-in-webgl-coords-and-transform-p5x1: >- 
+  getting-started-in-webgl-coords-and-transform-p5x1: >-
     One of the most fundamental differences between working in 2D and working in 3D is the most obvious: there is
     one more dimension to work with. In addition to the horizontal and vertical position (x and y axes) of an
-    element in our drawing, 3D adds depth, the z-axis. 
-  getting-started-in-webgl-coords-and-transform-p6x1: >- 
+    element in our drawing, 3D adds depth, the z-axis.
+  getting-started-in-webgl-coords-and-transform-p6x1: >-
     When drawing in 2D, the point (0,0) is located at the top left corner of the screen. In WebGL mode, the
     origin of the sketch (0,0,0) is located in the middle of the screen. By default, the x-axis goes left-to-right,
     y-axis goes up-to-down, and the z-axis goes from further-to-closer.
@@ -610,7 +610,7 @@ learn:
   getting-started-in-webgl-coords-and-transform-p13x1: >-
     Something that can feel unpredictable at first is the order of transformations. Each transformation always affects
     the next one. For example, if <a class="code">rotate()</a> is called, followed by <a class="code">translate()</a>, the direction of that translation will
-    be affected by the rotation. The entire coordinate system is rotating and moving, not just the shape itself. 
+    be affected by the rotation. The entire coordinate system is rotating and moving, not just the shape itself.
   getting-started-in-webgl-coords-and-transform-p14x1: >-
     Transformations can be performed in any order, but using <strong>translate</strong>, <strong>rotate</strong>, and then <strong>scale</strong> will be the most intuitive.
     Translation, followed by rotation, produces the effect of moving the shape <em>and then</em> rotating around that new location.
@@ -631,7 +631,7 @@ learn:
     can get complicated
     and difficult to follow. Consider this following example, which places two boxes in our sketch. To position the second box
     without <a class="code">push()</a> and <a class="code">pop()</a>, you have to account for the first transformation. This 
-    can be a lot to keep track of in a more complex 3D scene. 
+    can be a lot to keep track of in a more complex 3D scene.
   getting-started-in-webgl-coords-and-transform-p17x1: >-
     Now, let's try the same code with <a class="code">push()</a> and <a class="code">pop()</a>. Now we can just
     translate the object where we want it, without
@@ -647,13 +647,13 @@ learn:
   getting-started-in-webgl-coords-and-transform-p18x1: >-
     In the below example, try removing <a class="code">push()</a> and <a class="code">pop()</a> to see how the
     transformations affect the second object
-    that is drawn. 
+    that is drawn.
   getting-started-in-webgl-coords-and-transform-heading5: >-
     Basic Shapes in 3D
-  getting-started-in-webgl-coords-and-transform-p19x1: >- 
+  getting-started-in-webgl-coords-and-transform-p19x1: >-
     So far we have only been using <a class="code">box()</a> but p5.js has seven different predefined geometries
     that you can use in your sketch. These basic predefined geometries are often referred to as 'primitives'.
-  getting-started-in-webgl-coords-and-transform-p20x1: >- 
+  getting-started-in-webgl-coords-and-transform-p20x1: >-
     These primitive shape methods are: <a class="code" href="{{root}}/reference/#/p5/box">box()</a>,
     <a class="code" href="{{root}}/reference/#/p5/plane">plane()</a>,
     <a class="code" href="{{root}}/reference/#/p5/sphere">sphere()</a>,
@@ -661,7 +661,7 @@ learn:
     <a class="code" href="{{root}}/reference/#/p5/cone">cone()</a>,
     <a class="code" href="{{root}}/reference/#/p5/cylinder">cylinder()</a>, and
     <a class="code" href="{{root}}/reference/#/p5/torus">torus()</a>.
-  getting-started-in-webgl-coords-and-transform-p21x1: >- 
+  getting-started-in-webgl-coords-and-transform-p21x1: >-
     It is also possible to create custom geometry, either from scratch or from 3D models created in another
     program.
     More information about custom geometry can be found the <a href="{{root}}/learn/getting-started-in-webgl-custom-geometry.html">Custom
@@ -702,7 +702,7 @@ learn:
     If you are new to 3D check out the 
     <a href="{{root}}/learn/getting-started-in-webgl-coords-and-transform.html">
     Coordinates and Transformations</a> tutorial.
-  getting-started-in-webgl-custom-geometry-toc-title: Table of Contents 
+  getting-started-in-webgl-custom-geometry-toc-title: Table of Contents
   getting-started-in-webgl-custom-geometry-toc1: Loading 3D Models from File
   getting-started-in-webgl-custom-geometry-toc2: Creating Basic Procedural Geometry
   getting-started-in-webgl-custom-geometry-toc3: Conclusion
@@ -733,7 +733,7 @@ learn:
     these methods can be used to construct a 3D shape mathematically.
   getting-started-in-webgl-custom-geometry-p6x1: >-
     There is also a powerful class, <a class="code" href="{{root}}/reference/#/p5/p5.Geometry">p5.Geometry</a>, which p5 uses internally for <a class="code">loadModel()</a> but can also be used to
-    define custom geometry, offering tools that can be helpful in calculating faces and normals. 
+    define custom geometry, offering tools that can be helpful in calculating faces and normals.
   getting-started-in-webgl-custom-geometry-p6x2: >-
     In 3D, a face refers to a collection of three or four points that make up a surface, giving our
     geometry the appearance of being solid. A normal is the direction that is perpendicular to the face, which helps p5.js calculate lighting across the surface.
@@ -755,13 +755,13 @@ learn:
     STL (most often standing for "standard tesselation language") is a file format for 3D models. 
     It only stores information about the geometry.
   getting-started-in-webgl-custom-geometry-glossary-term4-title: OBJ
-  getting-started-in-webgl-custom-geometry-glossary-term4-definition: >- 
+  getting-started-in-webgl-custom-geometry-glossary-term4-definition: >-
     OBJ is an open file format that stores geometry data as well as some material and texture data. In p5.js, we
     are limited to its geometry, although an image can still be mapped to the surface using textures.
   getting-started-in-webgl-custom-geometry-glossary-term5-title: Faces
   getting-started-in-webgl-custom-geometry-glossary-term5-definition: The solid surface that is generated between three points.
   getting-started-in-webgl-custom-geometry-glossary-term6-title: Normals
-  getting-started-in-webgl-custom-geometry-glossary-term6-definition: The direction that is perpendicular to a face, which is often needed when calculating lighting or using materials. 
+  getting-started-in-webgl-custom-geometry-glossary-term6-definition: The direction that is perpendicular to a face, which is often needed when calculating lighting or using materials.
   getting-started-in-webgl-custom-geometry-glossary-term7-title: Normalization
   getting-started-in-webgl-custom-geometry-glossary-term7-definition: Changing something so that it fits within a standard range.
   getting-started-in-webgl-appearance-title: Styling and Appearance
@@ -770,7 +770,7 @@ learn:
     Creating in 3D is about more than just geometry. Cameras, lights, and materials are an
     important part of creating a visually interesting 3D scene. p5.js has a number of tools
     that make it possible to transform the appearance of our geometry.
-  getting-started-in-webgl-appearance-toc-title: Table of Contents 
+  getting-started-in-webgl-appearance-toc-title: Table of Contents
   getting-started-in-webgl-appearance-toc1: Camera and View
   getting-started-in-webgl-appearance-toc2: Lighting
   getting-started-in-webgl-appearance-toc3: Materials and Textures
@@ -785,7 +785,7 @@ learn:
   getting-started-in-webgl-appearance-p2x1: >-
     A <em>perspective camera</em> skews objects so they appear to get smaller as they get further away, vanishing
     at a single point in the distance. This is in contrast to an <em>orthographic camera</em>, where the 
-    geometry stays the same size as it gets further away and has no vanishing point. 
+    geometry stays the same size as it gets further away and has no vanishing point.
   getting-started-in-webgl-appearance-p3x1: >-
     One setting that we can change with a perspective camera is the <em>field-of-view</em>, or FOV. This is the 
     term that is used to describe how much our camera can see, measured as an angle. In simple examples it might appear
@@ -841,7 +841,7 @@ learn:
     varied, making objects shiny, rough, or even textured with images.
   getting-started-in-webgl-appearance-p11x1: >-
     In this interactive example, try selecting each of the different materials to see how they
-    affect the appearance of the geometry. You can move your mouse and see the effect that a directional light has on the material. 
+    affect the appearance of the geometry. You can move your mouse and see the effect that a directional light has on the material.
   getting-started-in-webgl-appearance-p12x1: >-
     Try commenting and uncommenting the different lights in this example:
   getting-started-in-webgl-appearance-p13x1: >-
@@ -852,7 +852,7 @@ learn:
   getting-started-in-webgl-appearance-info1x1: >-
     While they are useful for changing the appearance of your geometry, shaders are a bit beyond the scope of this 
     tutorial, so make sure to check out the <a href="{{root}}/learn/introduction-to-shaders.html">Introduction to Shaders</a> 
-    page when you are ready. 
+    page when you are ready.
   getting-started-in-webgl-appearance-heading4: Conclusion
   getting-started-in-webgl-appearance-p14x1: >-
     Being able to have control over the camera, lighting, and materials will give you much more flexibility
@@ -887,7 +887,7 @@ learn:
     generating noise, applying filters like blur, or shading polygons. Shader programming can feel daunting at
     first, requiring a different approach than the 2D drawing of p5.js. This document will outline the basics 
     of shader programming and point you towards other resources.
-  getting-started-in-webgl-shaders-toc-title: Table of Contents 
+  getting-started-in-webgl-shaders-toc-title: Table of Contents
   getting-started-in-webgl-shaders-toc1: Setup
   getting-started-in-webgl-shaders-toc2: Shading Language (GLSL)
   getting-started-in-webgl-shaders-toc3: Uniforms
@@ -1041,7 +1041,7 @@ learn:
   getting-started-in-webgl-shaders-glossary-term12-title: Fragment Shader
   getting-started-in-webgl-shaders-glossary-term12-definition: >-
     The part of a shader program that is responsible for the color and appearance of each pixel output by the
-    shader.    
+    shader.
   color-title: Colore
   color: Una introduzione ai colori digitali.
   coordinate-system-and-shapes-title: Sistema di Coordinate e Figure
@@ -1090,18 +1090,14 @@ learn:
     contribuzione di tutorial.
   writing-a-tutorial-how-start-title: 'Come iniziare:'
   writing-a-tutorial-how-start-1: >-
-    Verifica che l&apos;argomento da te proposto non sia stato già trattato.
-    C&apos;è 
-  writing-a-tutorial-how-start-2: uno spreadsheet
+    Assicurati che l'argomento scelto non sia stato trattato in precedenza.
+
+  writing-a-tutorial-how-start-2: Esaminare le risorse disponibili.
   writing-a-tutorial-how-start-3: >-
-    che tiene traccia dei tutorial in lavorazione. Se l&apos;argomento da te
-    scelto è nella lista dei tutorial già iniziati, puoi sempre arricchire un
-    lavoro in corso d&apos;opera e contribuire preparando un tutorial già
-    esistente alla pubblicazione, quindi non esitare a contattarci.
+    Se il tuo argomento è già in fase di elaborazione, valuta la possibilità di contribuire al lavoro esistente e di aiutarlo a prepararlo per la pubblicazione. Sentiti libero di contattarci per ricevere assistenza.
   writing-a-tutorial-how-start-4: >-
-    Se il tuo argomento non è già stato affrontato o iniziato, scrivi qualche
-    frase per spiegare quale tema proponi di trattare e inviaci questa
-    descrizione per email a education@p5js.org.
+    Se il tuo argomento non è stato trattato e non è attualmente in corso, fornisci una breve descrizione dell'argomento proposto. Puoi inviarci questa descrizione a education@p5js.org.
+
   writing-a-tutorial-how-prepare-title: 'Come preparare un tutorial p5.js per la pubblicazione online:'
   writing-a-tutorial-how-prepare-1: >-
     Quando sei pronto per pubblicare il tuo tutorial, segui i passaggi seguenti
@@ -1113,13 +1109,13 @@ learn:
     come quella qui sotto:
   writing-a-tutorial-how-prepare-5: >-
     La cartella contenente il tuo tutorial verrà verrà posizionata nella
-    cartella "tutorial" del sito p5.js. Il file index.hbs è la 
+    cartella "tutorial" del sito p5.js. Il file index.hbs è la
   writing-a-tutorial-how-prepare-6: 'pagina iniziale dei tutorial p5.js,'
   writing-a-tutorial-how-prepare-7: ' e il file test-tutorial.hbs è il test di prova.'
   writing-a-tutorial-how-prepare-8: Tutto il contenuto deve essere incluso nei tag
   writing-a-tutorial-how-prepare-9: >-
     della pagina, e formattato con i tag &lt;h1&gt;, &lt;h2&gt; e i tag di
-    paragrafo &lt;p&gt; come mostrato nella 
+    paragrafo &lt;p&gt; come mostrato nella
   writing-a-tutorial-how-prepare-10: pagina del tutorial di prova.
   writing-a-tutorial-how-prepare-11: >-
     Se il tuo tutorial contiene immagini, queste devono essere inserite nella
@@ -1148,7 +1144,7 @@ learn:
   writing-a-tutorial-iframe-1: >-
     Un iframe è come creare una finestra attraverso cui puoi vedere
     un&apos;altra pagina, isolata dal resto della tua pagina. In questo caso
-    sarà una finestra sul file index.html che contiene il tuo sketch p5.js. 
+    sarà una finestra sul file index.html che contiene il tuo sketch p5.js.
   writing-a-tutorial-iframe-2: >-
     Metti i tuoi sketch p5 nella cartella /src/assets/learn del sito, in una
     cartella etichettata con il nome del tuo sketch, come mostrato nello
@@ -1156,7 +1152,7 @@ learn:
     collegati all&apos;iframe.
   writing-a-tutorial-iframe-3: >-
     Nelle sottocartelle contenenti il tuo esempio p5 deve esserci un file
-    sketch.js e un file embed.html per lo sketch. 
+    sketch.js e un file embed.html per lo sketch.
   writing-a-tutorial-iframe-4: >-
     Assicurati che il tuo file embed.html abbia i percorsi corretti delle
     librerie p5 del sito. Se la struttura dei tuoi file è uguale a quella di cui
@@ -1165,7 +1161,7 @@ learn:
   writing-a-tutorial-iframe-5: >-
     Una volta verificato questo, puoi includere i file "index" di p5.js come
     iframe nel file .hbs che contiene il contenuto del tuo tutorial. Il codice
-    di incorporamento per l&apos;iframe sarà quindi: 
+    di incorporamento per l&apos;iframe sarà quindi:
   writing-a-tutorial-iframe-6: 'Styling dell&apos;iframe (direttamente nel file o nel foglio di stile):  '
   writing-a-tutorial-iframe-7: 'Qui puoi trovare lo sketch puro in esecuzione: '
   writing-a-tutorial-iframe-8: 'E qui è incorporato nel sito p5 usando il seguente codice:  '
@@ -1180,7 +1176,7 @@ learn:
     chiama embed.html).
   writing-a-tutorial-iframe-11: >-
     Ulteriori informazioni sull&apos;incorporamento di sketch p5.js sono
-    disponibili 
+    disponibili
   writing-a-tutorial-embed-iframe-12: qui.
   writing-a-tutorial-finishing-title: Ultimi dettagli
   writing-a-tutorial-finishing-1: >-
@@ -1193,7 +1189,7 @@ learn:
     Questo tutorial è preso dal libro Learning Processing di Daniel Shiffman,
     pubblicato da Morgan Kaufmann, © 2008 Elsevier Inc. Tutti i diritti
     riservati. È stato trascritto in p5 da Kelly Chang. Se trovi qualche errore
-    o hai commenti, 
+    o hai commenti,
   color-description2: ' faccelo sapere.'
   color-p1x1: >-
     Nel mondo digitale, quando vogliamo parlare di un colore, è necessaria la
@@ -1216,7 +1212,7 @@ learn:
   color-p3x3: >-
     . Istintivamente potremmo pensare di usare "stroke(0)" per eliminare il
     contorno, ma è importante tenere a mente che 0 non significa "niente", bensì
-    indica il colore nero. Inoltre, ricorda di non eliminare entrambi: con 
+    indica il colore nero. Inoltre, ricorda di non eliminare entrambi: con
   color-p3x4: ' e '
   color-p3x5: ', non apparirà nulla!'
   color-p4x1: >-
@@ -1273,7 +1269,7 @@ learn:
     Il modello RGB con valori tra 0 e 255 non è l&apos;unico modo per definire i
     colori in p5.js, che infatti ci permette di utilizzare più metodi. Per
     esempio, potremmo preferire una gamma di colori che va dallo 0 a 100 (come
-    una percentuale). Per fare questo puoi usare 
+    una percentuale). Per fare questo puoi usare
   color-custom-ranges-p2x1: >-
     La funzione qui sopra dice: "OK, dobbiamo usare i valori rosso, verde e blu
     per definire i colori. I loro valori saranno compresi tra 0 e 100"
@@ -1356,7 +1352,7 @@ learn:
   coordinate-system-simple-shapes-p6x1: >-
     Un secondo modo per disegnare un rettangolo consiste nello specificare il
     punto centrale, con la larghezza e l&apos;altezza. Se preferiamo questo
-    metodo, indichiamo innanzitutto che vogliamo usare la modalità 
+    metodo, indichiamo innanzitutto che vogliamo usare la modalità
   coordinate-system-simple-shapes-p6x2: ' prima delle istruzioni per il rettangolo stesso. Si noti che p5 è sensibile al maiuscolo / minuscolo.'
   coordinate-system-simple-shapes-p7x1: >-
     Infine, possiamo anche disegnare un rettangolo con due punti (l&apos;angolo
@@ -1366,11 +1362,11 @@ learn:
     dell&apos;esempio sopra.
   coordinate-system-simple-shapes-p8x1: >-
     Quando avremo preso confidenza con il concetto di disegnare un rettangolo,
-    un 
+    un
   coordinate-system-simple-shapes-p8x2: ' è un gioco da ragazzi. In effetti, è identica a '
   coordinate-system-simple-shapes-p8x3: >-
     con la differenza che l&apos;ellisse è disegnata dove dovrebbe essere la
-    casella contenente il rettangolo. La modalità predefinita per 
+    casella contenente il rettangolo. La modalità predefinita per
   coordinate-system-simple-shapes-p8x4: ' è '
   coordinate-system-simple-shapes-p8x5: ', invece di '
   coordinate-system-simple-shapes-p8x6: .
@@ -1535,7 +1531,7 @@ community:
   in-practice-title: 'In pratica:'
   in-practice1: >-
     Non siamo programmatori snob. Non assumiamo conoscenze preliminari o
-    supponiamo che ci siano cose che tutti dovrebbero sapere. 
+    supponiamo che ci siano cose che tutti dovrebbero sapere.
   in-practice2: >-
     Insistiamo nell&apos;essere attivamente coinvolti nelle richieste di
     feedback, indipendentemente dalla loro complessità.
@@ -1595,7 +1591,7 @@ community:
   contributors-conference-title: Conferenza dei Collaboratori di p5.js
   contributors-conference1: >-
     Sebbene la maggior parte del lavoro avvenga online, ci incontriamo anche di
-    persona. Abbiamo tenuto due conferenze dei contribuenti al 
+    persona. Abbiamo tenuto due conferenze dei contribuenti al
   contributors-conference2: >-
     alla Carnegie Mellon University di Pittsburgh, Pennsylvania. Artisti,
     designer, sviluppatori, e educatori si sono riuniti per promuovere lo
@@ -1644,7 +1640,7 @@ community:
   2015contributors-conference-diversity6: ', '
   2015contributors-conference-diversity7: >-
     il panel si è svolto martedì 25 maggio 2015 nell&apos;auditorium di Kresge
-    alla Carnegie Mellon University. Gli speaker sono stati 
+    alla Carnegie Mellon University. Gli speaker sono stati
   2015contributors-conference-diversity8: e
   2015contributors-conference-diversity9: .
   2015cc_1: >-
@@ -1664,7 +1660,7 @@ community:
     adesive su di essa mentre una studentessa parla al microfono
   2015cc_8: >-
     I partecipanti si siedono intorno a un tavolo a guardare l&apos;altro laptop
-    e confrontare il codice 
+    e confrontare il codice
   2015cc_9: 'Lavagna con note adesive e scritte di colore diverso sulla programmazione '
   2015cc_10: >-
     Donna che parla al microfono della valutazione di diversi set di abilità
@@ -1765,10 +1761,10 @@ community:
   2019cc_14: 'L&apos;aula dei partecipanti di fronte a un oratore ascolta attentamente '
   2019cc_15: >-
     Donna con microfono che parla ai compagni partecipanti con il testo sacred
-    buondaries nella proiezione dietro di lei 
+    buondaries nella proiezione dietro di lei
   2019cc_16: >-
     Vista dall&apos;alto dei partecipanti che ascoltano un pannello e vedono una
-    proiezione di un&apos;immagine 3d sulla persona 
+    proiezione di un&apos;immagine 3d sulla persona
   2019cc_17: >-
     I partecipanti si siedono intorno a un tavolo con i loro laptop e osservano
     il codice su uno schermo
@@ -1816,7 +1812,7 @@ books:
   book-3-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub e Claudius Lazzeroni.'
   book-3-publisher: >-
     Pubblicato 30 ottobre 2018, Princeton Architectural Press; Edizione di
-    ristampa. 
+    ristampa.
   book-3-pages: '255 pagine. '
   book-3-type: Tascabile.
   book-3-description: >-
@@ -1846,10 +1842,10 @@ books:
     usando JavaScript con la libreria di programmazione p5.js. Le competenze che
     acquisirai da questo libro sono altamente trasferibili a una miriade di
     settori e possono essere utilizzate per la costruzione di applicazioni web,
-    robot programmabili o arte generativa. 
+    robot programmabili o arte generativa.
   book-5-order-a: Ordina su Apress
   book-5-order-b: Ordina su Amazon
-  book-6-title: "Aesthetic Programming: A Handbook of Software Studies"
+  book-6-title: 'Aesthetic Programming: A Handbook of Software Studies'
   book-6-authors: 'Winnie Soon, Geoff Cox. '
   book-6-publisher: 'Published  2020, Open Humanities Press. '
   book-6-pages: '298 pages. '
@@ -1968,11 +1964,11 @@ showcase:
     (interpolazione lineare) e visualizzare gli elementi visivi nel
   project-a-2-2-roni-cantor: >-
     . Ho quindi usato una funzione nel mio codice che ha esportato la mia
-    grafica programmata in un file 
+    grafica programmata in un file
   project-a-2-3-roni-cantor: '. Avevo bisogno di un file SVG da dare al plotter (un '
   project-a-2-4-roni-cantor: >-
     ) in modo che capisse dove disegnare le linee che avevo programmato. Ho
-    inviato queste informazioni al plotter con un programma chiamato 
+    inviato queste informazioni al plotter con un programma chiamato
   project-a-2-5-roni-cantor: '!'
   project-q-3: Qual è la tua funzione p5.js preferita?
   project-a-3-roni-cantor: ' perché le linee sono divertenti e "lerp" è una parola divertente da dire!'
@@ -2043,7 +2039,7 @@ showcase:
   creator-from-phuong: 'Da Kyiv, Ukraine'
   project-a-1-1-phuong: >-
     Sono un programmatore creativo e designer, una beneficiaria della borsa di
-    studio per la diversità della 
+    studio per la diversità della
   link-1-phuong: Gioca a Airi Flies!
   link-2-phuong: Codice di AiriFlies su GitHub
   link-3-phuong: Maggiori informazioni sul portfolio di Phuong Ngo
@@ -2055,7 +2051,7 @@ showcase:
   project-a-2-1-phuong: >-
     Ho usato p5.js per lavorare sulla parte visiva del gioco. Gli sprite di
     animazione per Airi e i fantasmi sono stati disegnati su un&apos;app per
-    iPad chiamata 
+    iPad chiamata
   project-a-2-2-phuong: ' e poi integrati nel codice '
   project-a-2-3-phuong: . Ho usato principalmente esempi di p5.play come riferimento.
   project-a-2-4-phuong: 'Per lo sfondo a scorrimento infinito, ho trovato uno '
@@ -2070,7 +2066,7 @@ showcase:
   project-a-2-7-phuong: ' (al momento esiste una versione beta non ancora disponibile al pubblico, ma lo sarà molto presto!). Ho aggiunto circa 120 campioni dei miei compagni di classe che dicevano la parola "pew" con diverse intonazioni e 80 campioni di rumore di fondo per addestrarlo. Quindi ho integrato il modello nel gioco con '
   project-a-3-1-phuong: >-
     Adoro la facilità con cui puoi creare, manipolare ed eliminare blocchi e
-    classi HTML con la 
+    classi HTML con la
   project-a-3-2-phuong: ' tramite '
   project-a-3-3-phuong: ' etc. Ma la mia funzione preferita è '
   project-a-3-4-phuong: ', poiché è qui che avviene la magia.'
@@ -2100,7 +2096,7 @@ showcase:
     Quest&apos;estate mi sono sfidato a realizzare poster tipografici con la
     programmazione, e questo è uno dei poster che ho realizzato. Fino a poco
     tempo fa non sapevo che avrei potuto utilizzare i dati del sensore di
-    movimento con p5.js. Stavo anche guardando 
+    movimento con p5.js. Stavo anche guardando
   dan-shiffman-matterjs-tutorial: i video tutorial di Dan Shiffman sul matter.js
   project-a-2-2-chung: >-
     , al che ho pensato: perché non unire le due cose e mettere in pratica ciò
@@ -2108,7 +2104,7 @@ showcase:
   project-a-3-1-chung: >-
     Ci sono molte cose che amo di p5.js come la community online e
     l&apos;accoglienza e la comprensione riservate ai principianti. Quello che
-    mi piace davvero in questo momento è il 
+    mi piace davvero in questo momento è il
   project-a-3-2-chung: >-
     , con cui non solo posso lavorare online per me stesso, ma anche condividere
     rapidamente gli URL. Per questo progetto, in particolare, ho dovuto fare
@@ -2116,7 +2112,7 @@ showcase:
     ad utilizzare GitHub.
   project-a-4-1-chung: >-
     Ho avuto qualche difficoltà con la gestione di font, canale alfa e
-    profondità z nella modalità 
+    profondità z nella modalità
   project-a-4-2-chung: >-
     . Non sono ancora completamente soddisfatto di tutte le mie decisioni. Ma in
     generale, è stato utile cercare nel forum e non dimenticare di scomporre i
@@ -2124,11 +2120,11 @@ showcase:
     problemi nel rendering dei file video direttamente da p5.js. La
     registrazione dello schermo non era un&apos;opzione a causa di cadute di
     frequenza dei fotogrammi intermittenti (il mio laptop è piuttosto lento).
-    Dopo aver fatto qualche ricerca, ho deciso di imparare i fondamenti di 
+    Dopo aver fatto qualche ricerca, ho deciso di imparare i fondamenti di
   project-a-4-3-chung: ' e costruire un tool da solo.'
   project-a-5-1-chung: >-
     Come accennato in precedenza, se desiderate eseguire il rendering di frame e
-    file video dagli sketch p5.js, consultate il mio 
+    file video dagli sketch p5.js, consultate il mio
   project-a-5-2-chung: ' e fatemi sapere cosa ne pensate.'
   creator-from-casey-louise: 'Da New York, New York'
   project-a-1-1-casey-louise: >-
@@ -2140,7 +2136,7 @@ showcase:
     tecnologie dei sensori.
   project-a-1-3-casey-louise: >-
     Casey: Ho iniziato a studiare p5.js nel 2018 nel mio primo semestre presso
-    ITP, anche se mi dilettavo con 
+    ITP, anche se mi dilettavo con
   project-a-1-4-casey-louise: ' dal 2012. Sono stato introdotto a Processing dal mio amico Pedro mentre studiavo graphic design e mi ha fatto impazzire. L&apos;idea di creare i miei strumenti per la creazione di grafica e arte interattiva ha suscitato il mio interesse, ma una volta che l&apos;ho provato, sono rimasto entusiasta. Il primo progetto che ricordo è un occhio che ti seguiva nello schermo e si intristiva quando lo lasciavi da solo.'
   project-a-1-5-casey-louise: >-
     Louise: Inizialmente ho imparato p5.js per rendere un sito Web che stavo
@@ -2150,7 +2146,7 @@ showcase:
     Casey: Rimandavo l&apos;apprendimento degli shader da molto tempo, ed ero
     anche curioso di poterli usare in p5.js. Poi ho sentito parlare di una
     sovvenzione per progetti open source, di storytelling e di risorse di
-    apprendimento all&apos;ITP chiamata 
+    apprendimento all&apos;ITP chiamata
   project-a-2-2-casey-louise: >-
     . Dato che non trovavo molto sulla documentazione di p5.js + shader, ho
     deciso di capire come sono implementati in p5.js e creare una risorsa dove
@@ -2166,7 +2162,7 @@ showcase:
   project-a-4-1-casey-louise: >-
     Casey: L&apos;inizio del progetto (capire come funzionano le cose) è
     consistito nel raggiungere persone straordinarie, porre domande e chiedere
-    il permesso di utilizzare i loro esempi nel nostro progetto. 
+    il permesso di utilizzare i loro esempi nel nostro progetto.
   adam-ferris-repo-casey-louise: La repository GitHub di Adam Ferriss
   project-a-4-2-casey-louise: ' ci ha davvero dato le fondamenta per capire come funzionano gli shader in p5.js e ci ha fornito un quadro di esempi accessibili su cui basarci. Per alcuni problemi specifici relativi a p5.js che stavamo riscontrando, abbiamo contattato '
   project-a-4-3-casey-louise: ' e '
@@ -2179,7 +2175,7 @@ showcase:
     GitHub di Adam Ferriss. Il nostro obiettivo era farlo in modo che un
     principiante potesse capire come implementarlo, quindi era sia una sfida
     tecnica che una sfida nell&apos;insegnamento del codice a estranei e
-    principianti. Qui abbiamo tratto ispirazione dal modo in cui è scritto il 
+    principianti. Qui abbiamo tratto ispirazione dal modo in cui è scritto il
   openframeworks-book-casey-louise: openFrameworks book
   project-a-4-7-casey-louise: >-
     . Crediamo in un approccio del tipo "ehi, non è difficile e puoi farlo anche
diff --git a/src/data/ko.yml b/src/data/ko.yml
index 0fb623e6c6..aa904e427e 100644
--- a/src/data/ko.yml
+++ b/src/data/ko.yml
@@ -98,10 +98,10 @@ get started:
   download11: 'http://localhost:{당신의-포트(port)-넘버}/empty-example'
   download4: >-
     다운로드 파일 중, index.html 파일에는 p5.js 링크가 적혀있습니다. 로딩 시간을 단축하려면 해당 p5.js 링크를 그 간략
-    버전인 p5.min.js로 아래와 같이 변경하면 됩니다. 
+    버전인 p5.min.js로 아래와 같이 변경하면 됩니다.
   download5: >-
     p5.js 파일의 온라인 링크를 직접 입력하는 방법도 있습니다. p5.js의 모든 버전은 CDN(Content Delivery
-    Network)에 저장되어 있으며, 버전 히스토리는 여기서 확인할 수 있습니다: 
+    Network)에 저장되어 있으며, 버전 히스토리는 여기서 확인할 수 있습니다:
   download6: '. 링크를 다음과 같이 변경해보세요:'
   download7: '아래는 HTML 페이지 샘플입니다:'
   environment-title: 개발 환경
@@ -134,11 +134,11 @@ get started:
   your-first-sketch1: 'After '
   your-first-sketch2: >-
     위의 코드를 설명하자면 다음과 같습니다: "좌측 상단 모서리로부터 아래로 50px, 오른쪽으로 50px 떨어진 점을 중심으로 타원을
-    그린다. 타원의 너비와 높이는 모두 80px로 한다." 
+    그린다. 타원의 너비와 높이는 모두 80px로 한다."
   your-first-sketch3: '스케치를 저장한 뒤 브라우저를 새로고침하면, 입력한 코드에 문제가 없는 한, 다음과 같은 화면을 볼 수 있습니다:'
   your-first-sketch4: >-
     주의: 스크린 리더를 사용하는 경우, p5 웹에디터에서 접근성 모드 출력(Accessible Outputs)을 활성화해야 합니다. 별도의
-    에디터를 사용하는 경우, 접근성 라이브러리를 html 파일에 추가해야 합니다. 자세한 설명은 다음 링크를 참조하세요: 
+    에디터를 사용하는 경우, 접근성 라이브러리를 html 파일에 추가해야 합니다. 자세한 설명은 다음 링크를 참조하세요:
   your-first-sketch5: 스크린 리더에서 p5를 사용하는 방법
   your-first-sketch6: >-
     If you are using a screen reader, you must turn on the accessible outputs in
@@ -187,7 +187,7 @@ get started:
   book1: >-
     본 튜토리얼의 일부는 로렌 맥카시(Lauren McCarthy), 캐시 리스(Casey Reas), 벤 프라이(Ben Fry),
     오라일리(O'Reilly) 저 Getting Started with p5.js 에서 발췌하였습니다. / Make 2015.
-    Copyright 
+    Copyright
 download:
   Download: 다운로드
   download-intro: >-
@@ -224,7 +224,7 @@ download:
     여러분도 p5.js를 지원하는 프로세싱 재단(
   support-2: >-
     )에 후원을 통해 이에 동참할 수 있습니다. 여러분의 소중한 후원금은 p5.js 소프트웨어 개발과 더불어 코드 예제 및 튜토리얼을 비롯한
-    교육 자료 제작에 쓰입니다. 또한, 다음과 같은 커뮤니티 활동을 위해서도 쓰입니다 : 
+    교육 자료 제작에 쓰입니다. 또한, 다음과 같은 커뮤니티 활동을 위해서도 쓰입니다 :
   support-3: 펠로우십
   support-4: ', '
   support-5: 커뮤니티 행사.
@@ -619,7 +619,7 @@ learn:
     One of the most fundamental differences between working in 2D and working in
     3D is the most obvious: there is one more dimension to work with. In
     addition to the horizontal and vertical position (x and y axes) of an
-    element in our drawing, 3D adds depth, the z-axis. 
+    element in our drawing, 3D adds depth, the z-axis.
   getting-started-in-webgl-coords-and-transform-p6x1: >-
     When drawing in 2D, the point (0,0) is located at the top left corner of the
     screen. In WebGL mode, the origin of the sketch (0,0,0) is located in the
@@ -694,7 +694,7 @@ learn:
     example, if <a class="code">rotate()</a> is called, followed by <a
     class="code">translate()</a>, the direction of that translation will be
     affected by the rotation. The entire coordinate system is rotating and
-    moving, not just the shape itself. 
+    moving, not just the shape itself.
   getting-started-in-webgl-coords-and-transform-p14x1: >-
     Transformations can be performed in any order, but using
     <strong>translate</strong>, <strong>rotate</strong>, and then
@@ -721,7 +721,7 @@ learn:
     places two boxes in our sketch. To position the second box without <a
     class="code">push()</a> and <a class="code">pop()</a>, you have to account
     for the first transformation. This  can be a lot to keep track of in a more
-    complex 3D scene. 
+    complex 3D scene.
   getting-started-in-webgl-coords-and-transform-p16x2: and
   getting-started-in-webgl-coords-and-transform-p16x3: >-
     . <a class="code">push()</a> and <a class="code">pop()</a> make it easier to
@@ -737,7 +737,7 @@ learn:
     Consider this following example, which places two boxes in our sketch. To
     position the second box without <a class="code">push()</a> and <a
     class="code">pop()</a>, you have to account for the first transformation.
-    This  can be a lot to keep track of in a more complex 3D scene. 
+    This  can be a lot to keep track of in a more complex 3D scene.
   getting-started-in-webgl-coords-and-transform-p17x1: >-
     Now, let's try the same code with <a class="code">push()</a> and <a
     class="code">pop()</a>. Now we can just translate the object where we want
@@ -752,7 +752,7 @@ learn:
   getting-started-in-webgl-coords-and-transform-p18x1: >-
     In the below example, try removing <a class="code">push()</a> and <a
     class="code">pop()</a> to see how the transformations affect the second
-    object that is drawn. 
+    object that is drawn.
   getting-started-in-webgl-coords-and-transform-heading5: Basic Shapes in 3D
   getting-started-in-webgl-coords-and-transform-p19x1: >-
     So far we have only been using <a class="code">box()</a> but p5.js has seven
@@ -827,7 +827,7 @@ learn:
     method, which should be used within <a class="code">preload()</a>.
   getting-started-in-webgl-custom-geometry-p2x2: >-
     method, which should be used within <a class="code">preload()</a>. Then you
-    can use the 
+    can use the
   getting-started-in-webgl-custom-geometry-p2x3: 'function to draw the model, as demonstrated in the example below.'
   getting-started-in-webgl-custom-geometry-p3x1: >-
     A common issue that can come up with custom models is scaling. Depending on
@@ -869,11 +869,11 @@ learn:
     href="{{root}}/reference/#/p5/p5.Geometry">p5.Geometry</a>, which p5 uses
     internally for <a class="code">loadModel()</a> but can also be used to
     define custom geometry, offering tools that can be helpful in calculating
-    faces and normals. 
+    faces and normals.
   getting-started-in-webgl-custom-geometry-p6x1_: >-
     , which p5.js uses internally for <a class="code">loadModel()</a> but can
     also be used to define custom geometry, offering tools that can be helpful
-    in calculating faces and normals. 
+    in calculating faces and normals.
   getting-started-in-webgl-custom-geometry-p6x2: >-
     In 3D, a face refers to a collection of three or four points that make up a
     surface, giving our geometry the appearance of being solid. A normal is the
@@ -935,7 +935,7 @@ learn:
     A <em>perspective camera</em> skews objects so they appear to get smaller as
     they get further away, vanishing at a single point in the distance. This is
     in contrast to an <em>orthographic camera</em>, where the  geometry stays
-    the same size as it gets further away and has no vanishing point. 
+    the same size as it gets further away and has no vanishing point.
   getting-started-in-webgl-appearance-p3x1: >-
     One setting that we can change with a perspective camera is the
     <em>field-of-view</em>, or FOV. This is the  term that is used to describe
@@ -1011,7 +1011,7 @@ learn:
   getting-started-in-webgl-appearance-p11x1: >-
     In this interactive example, try selecting each of the different materials
     to see how they affect the appearance of the geometry. You can move your
-    mouse and see the effect that a directional light has on the material. 
+    mouse and see the effect that a directional light has on the material.
   getting-started-in-webgl-appearance-p12x1: 'Try commenting and uncommenting the different lights in this example:'
   getting-started-in-webgl-appearance-p13x1: >-
     More custom materials can be achieved through using <a
@@ -1025,7 +1025,7 @@ learn:
     While they are useful for changing the appearance of your geometry, shaders
     are a bit beyond the scope of this  tutorial, so make sure to check out the
     <a href="{{root}}/learn/introduction-to-shaders.html">Introduction to
-    Shaders</a>  page when you are ready. 
+    Shaders</a>  page when you are ready.
   getting-started-in-webgl-appearance-info1x2: Introduction to Shaders
   getting-started-in-webgl-appearance-info1x3: 'page when you are ready. '
   getting-started-in-webgl-appearance-heading4: Conclusion
@@ -1110,7 +1110,7 @@ learn:
     missing semicolon for example is not allowed and will result in an error
     message. You can't use different types of numbers, like floats or integers
     interchangeably.
-  getting-started-in-webgl-shaders-p6x1: 'First let''s look at a basic vertex shader:'
+  getting-started-in-webgl-shaders-p6x1: "First let's look at a basic vertex shader:"
   getting-started-in-webgl-shaders-p7x1: >-
     This vertex shader begins with an <em>attribute</em>, which p5.js uses to
     share vertex position information with the shader. This attribute is a <a
@@ -1243,7 +1243,7 @@ learn:
   getting-started-in-webgl-shaders-glossary-term12-title: Fragment Shader
   getting-started-in-webgl-shaders-glossary-term12-definition: >-
     The part of a shader program that is responsible for the color and
-    appearance of each pixel output by the shader.  
+    appearance of each pixel output by the shader.
   getting-started-in-webgl-framebuffers-title: Layered Rendering with Framebuffers
   getting-started-in-webgl-framebuffers: >-
     Setting up sketches that draw in multiple stages or access 3D depth
@@ -1280,26 +1280,24 @@ learn:
     학습, 프로그래밍 기술, 오픈소스 프로젝트 공헌 방법 등에 대한 내용을 다룹니다.
   writing-a-tutorial-2: '새로운 튜토리얼을 제안하거나, 튜토리얼 준비 및 기여에 대한 가이드라인 제작을 환영합니다.'
   writing-a-tutorial-how-start-title: '커뮤니티 기여 시작하기:'
-  writing-a-tutorial-how-start-1: '우선, 제안하려는 튜토리얼이 현재 진행 중인 내용들과 겹치는 지의 여부를 이 '
-  writing-a-tutorial-how-start-2: 스프레드시트
+  writing-a-tutorial-how-start-1: '선택한 주제가 이전에 다루어지지 않았는지 확인하세요. '
+  writing-a-tutorial-how-start-2: 사용 가능한 리소스를 검토하세요.
   writing-a-tutorial-how-start-3: >-
-    에서 확인하세요. 만약 제안하고자 하는 튜토리얼 주제가 현재 진행 중인 것이라면, 해당 주제의 마무리 작업 또는 p5.js 웹사이트상의
-    공개 작업에 참여할 수 있고 관련해서는 아래의 이메일로 연락주시면 감사하겠습니다. 
+    귀하의 주제가 이미 진행 중이라면 기존 작업에 기여하고 출판 준비를 돕는 것을 고려해 보십시오. 안내를 받으려면 언제든지 문의해 주세요.
   writing-a-tutorial-how-start-4: >-
-    제안하려는 튜토리얼이 스프레드시트 리스트에 포함되지 않는다면, 튜토리얼에 대한 간략한 설명을 education@p5js.org로
-    보내주세요.
+    귀하의 주제가 다루어지지 않았고 현재 진행 중이 아닌 경우 제안한 주제에 대한 간략한 설명을 제공해 주세요. 이 설명을 education@p5js.org로 보내주세요.
   writing-a-tutorial-how-prepare-title: 'p5.js 튜토리얼 온라인 공개 준비하기:'
   writing-a-tutorial-how-prepare-1: '튜토리얼을 p5.js 웹사이트상 공개할 준비가 되었다면, 다음의 단계를 따라주세요.'
   writing-a-tutorial-how-prepare-2: '튜토리얼 콘텐츠를 이 '
   writing-a-tutorial-how-prepare-3: 기본 구조
   writing-a-tutorial-how-prepare-4: '에 따라 tutorial-name.hbs 파일로 변환해주세요. 콘텐츠에는 아래와 같은 헤더(header)가 반드시 포함되어야 합니다:'
-  writing-a-tutorial-how-prepare-5: '튜토리얼을 포함한 폴더는 p5js 웹사이트 상 ''tutorials'' 폴더에 배치됩니다. index.hbs 파일은 '
+  writing-a-tutorial-how-prepare-5: "튜토리얼을 포함한 폴더는 p5js 웹사이트 상 'tutorials' 폴더에 배치됩니다. index.hbs 파일은 "
   writing-a-tutorial-how-prepare-6: p5.js 튜토리얼 랜딩 페이지
   writing-a-tutorial-how-prepare-7: '에 해당하며, test-tutorial.hbs 파일은 테스트 튜토리얼입니다.'
   writing-a-tutorial-how-prepare-8: 모든 콘텐츠는 페이지상
   writing-a-tutorial-how-prepare-9: >-
     태그에 포함되어야하며, &lt;h1&gt; 와 &lt;h2&gt; 태그, 그리고 &lt;p&gt; 문단 태그로서 문서 형식이 정의되어야
-    합니다. 형식 예시는 다음의 페이지에서 확인해보세요:  
+    합니다. 형식 예시는 다음의 페이지에서 확인해보세요:
   writing-a-tutorial-how-prepare-10: 테스트 튜토리얼
   writing-a-tutorial-how-prepare-11: >-
     튜토리얼이 이미지 파일을 포함할 경우, p5 웹사이트의 에셋(assets) 폴더에 배치됩니다. 파일 경로는 아래와 같이
@@ -1323,7 +1321,7 @@ learn:
   writing-a-tutorial-iframe-title: iframe을 사용하여 p5 스케치 임베드하기
   writing-a-tutorial-iframe-1: >-
     iframe은 한 페이지상 다른 페이지를 보기 위해 만드는 창문틀과도 같습니다. 이 창문틀을 따라 페이지상의 다른 내용들로부터 구분되는
-    셈이지요. 이 경우, p5.js 스케치를 포함한 index.html를 보여주는 창문틀의 역할을 합니다. 
+    셈이지요. 이 경우, p5.js 스케치를 포함한 index.html를 보여주는 창문틀의 역할을 합니다.
   writing-a-tutorial-iframe-2: >-
     스크린샷에 보이듯, p5 웹사이트 /src/assets/learn 폴더에 스케치의 이름을 딴 별도의 폴더를 새로이 생성하여 여러분의
     튜토리얼용 p5 스케치를 올리세요. 이 경로를 통해 iframe에서 보여줄 모든 이미지와 p5 스케치가 저장됩니다.
@@ -1333,7 +1331,7 @@ learn:
     라이브러리 경로는 "../../../js/p5.min.js" 일것 입니다.
   writing-a-tutorial-iframe-5: >-
     그리고나면, 튜토리얼 콘텐츠를 담고 있는 .hbs 파일상 p5js index 파일을 iframe의 형태로 임베드할 수 있습니다.
-    iframe 임베드를 위한 코드는 다음과 같습니다: 
+    iframe 임베드를 위한 코드는 다음과 같습니다:
   writing-a-tutorial-iframe-6: 'iframe 서식 바꾸기:  '
   writing-a-tutorial-iframe-7: 'iframe을 이용한 무제 스케치 작동 확인하기: '
   writing-a-tutorial-iframe-8: '위의 스케치가 p5 site에 임베드된 모습:  '
@@ -1353,7 +1351,7 @@ learn:
   color-description1: >-
     이 튜토리얼은 다니엘 쉬프만(Daniel Shiffman) 저, 모건 카우프만(Morgan Kaufmann) 출판 도서 Learning
     Processing에서 발췌하였습니다 © 2008 Elsevier Inc. 또한, 발췌본은 켈리 장(Kelly Chang)에 의해 p5로
-    옮겨졌습니다. 오류를 발견하거나 의견을 남기고 싶다면 
+    옮겨졌습니다. 오류를 발견하거나 의견을 남기고 싶다면
   color-description2: 언제든 알려주세요.
   color-p1x1: >-
     디지털 세상에서 색상에 대해 이야기할 땐, 아주 정밀한 표현이 필요합니다. 아쉽게도, "푸른빛의 초록색 원을 만들 수 있어?" 와 같은
@@ -1373,7 +1371,7 @@ learn:
   color-p3x2: ' 과'
   color-p3x3: >-
     . 본능적으로 우리는 "stroke(0)" 를 통해 윤곽선을 제거할 수 있을 거라 생각하지만, 코딩 언어의 세계에서 0은 "아무것도
-    없음"이 아니라, 검정색을 지칭합니다. 
+    없음"이 아니라, 검정색을 지칭합니다.
   color-p3x4: ' 과 '
   color-p3x5: '를 사용하면 선도 색상도, 아무것도 보이지 않을 거에요!'
   color-p4x1: >-
@@ -1473,11 +1471,11 @@ learn:
     높이(height)를 정하는 숫자들이 필요합니다.
   coordinate-system-simple-shapes-p6x1: >-
     사각형을 그리는 또 다른 방법으로, 중앙값, 너비(width), 높이값(height) 설정하기가 있습니다. 이 경우, 먼저 상단의
-    setup() 함수에 센터 
+    setup() 함수에 센터
   coordinate-system-simple-shapes-p6x2: ' 모드를 불러오고, 그 뒤에 사각형의 중앙값, 너비, 높이값을 지정해야 합니다. p5는 대문자와 소문자 구분에 민감하니 주의하세요!'
   coordinate-system-simple-shapes-p7x1: >-
     마지막으로, 점 두 개 만으로 사각형을 그리는 방법도 있습니다. 바로, 상단 좌측 코너와 하단 우측 코너의 좌표를 지정하는 것이지요.
-    여기서 우리가 setup() 함수에 포함시킬 모드는 코너 
+    여기서 우리가 setup() 함수에 포함시킬 모드는 코너
   coordinate-system-simple-shapes-p7x2: ' 입니다. 그 결과물은 위의 예제와 동일합니다.'
   coordinate-system-simple-shapes-p8x1: '사각형 그리기에 익숙해졌다면, 타원그리기 '
   coordinate-system-simple-shapes-p8x2: ' 는 식은죽 먹기지요. 타원을 그리는 원리는 '
@@ -1490,7 +1488,7 @@ learn:
     createCanvas() 함수를 사용하여 캔버스의 너비(width)와 높이(height)를 설정할 수 있습니다.
   curves-description1: >-
     This tutorial is written by J David Eisenberg and ported by Sally Chen. If
-    you see any errors or have comments, 
+    you see any errors or have comments,
   curves-description2: ' please let us know.'
   curves-description3: 'This work is licensed under a '
   curves-description4: ' Creative Commons Attribution-NonCommercial-ShareAlinke 4.0 International License.'
@@ -1584,11 +1582,11 @@ libraries:
   p5.sound: 'p5.sound는 p5에 웹 오디오 기능(오디오 입력, 재생, 분석 합성 등)을 추가합니다. '
   asciiart: >-
     p5.asciiart는 p5.js를 아스키(ASCII) 아트로 쉽고 간단하게 변환합니다. 한마디로, p5.js를 위한 아스키 아트
-    컨버터입니다. 
+    컨버터입니다.
   p5.ble: 'p5.ble은 BLE 기기와 p5 스케치를 연결합니다. '
   p5.bots: >-
     p5.bots를 통해 브라우저, 아두이노, 마이크로프로세서 간의 인터랙션을 만들 수 있습니다. 센서 데이터로 스케치를 만들거나,
-    스케치에서 LED나 모터를 작동해보세요! 
+    스케치에서 LED나 모터를 작동해보세요!
   p5.bezier: >-
     p5.beizer는 조절점(control point) 개수 제한 없이 정교한 베지에 곡선(Bézier Curve)을 그릴 수 있게 해주는
     라이브러리입니다.
@@ -1626,7 +1624,7 @@ libraries:
   Rotating knobs: 스킨과 반환값을 설정할 수 있는 나만의 노브(knob)를 만들어보세요
   p5.scenemanager: >-
     p5.SceneManager는 스케치를 여러 단계의 씬들로 구성할 수 있도록 합니다. 각각의 씬은 메인 스케치에 포함된 일부 스케치와도
-    같습니다. 
+    같습니다.
   p5.screenPosition: 프로세싱의 screenX 및 screenY 기능을 p5js에 적용합니다.
   p5.scribble: '2D 기본 조형을 손그림으로 표현합니다. 제작: Janneck Wullschleger, 프로세싱 라이브러리 포트 기반 '
   p5.serialport: >-
@@ -1641,7 +1639,7 @@ libraries:
     of a p5 sketch on an interval.
   p5.speech: >-
     p5.speech는 웹 스피치 및 스피치 인식 API에 대한 접근 권한을 제공하여, 음성을 인식하고 출력할 수 있는 스케치를 쉽게 만들
-    수 있게 합니다. 
+    수 있게 합니다.
   p5.start2d.js: '픽셀, 밀리미터, 센티미터 또는 인치 단위의 정적인 2D 아트를 만들기 위한 p5 확장 라이브러리입니다. '
   p5.tiledmap: 'p5.tiledmap은 스케치에 지도를 넣기 위한 드로잉 및 도움 기능을 제공합니다. '
   TiledPlay: >-
@@ -1650,7 +1648,7 @@ libraries:
   p5.touchgui: 'p5.js를 위한 멀티터치 및 마우스 그래픽 유저 인터페이스(GUI) 라이브러리 '
   tramontana: >-
     Tramontana는 인터랙티브 환경 및 공간을 생성하거나, 공간 속 스케일 기능을 프로토타이핑하기 위한 여러가지 기기(iOS,
-    Android, tramontana Board, ...)를 쉽게 쓸 수 있도록 하는 플랫폼입니다. 
+    Android, tramontana Board, ...)를 쉽게 쓸 수 있도록 하는 플랫폼입니다.
   TurtleGFX: >-
     TurtleGFX allows to code with Turtle Graphics in JavaScript.  Great for
     education and creative coding.
@@ -1681,7 +1679,7 @@ libraries:
   p5.timer: >-
     This library performs asynchronous timing functions like countdowns, 
     one-shot timers, % time elapsed and encapsulates the millis() function and 
-    other related calculations that often clog up your code. 
+    other related calculations that often clog up your code.
   c2.js: >-
     c2.js is a JavaScript library for creative coding based on computational 
     geometry, physics simulation, evolutionary algorithm and other modules.
@@ -1717,7 +1715,7 @@ libraries:
   using-a-library-title: 라이브러리 이용하기
   using-a-library1: >-
     라이브러리란 p5.js의 핵심 기능을 확장하거나 추가하는 자바스크립트 코드를 말합니다. 라이브러리에는 크게 두 종류가 있습니다. 주요
-    라이브러리인 
+    라이브러리인
   using-a-library3: '의 경우 p5.js 자체 배포물인 반면, 커뮤니티 라이브러리는 커뮤니티 공헌자에 의해 개발, 소유, 유지됩니다.'
   using-a-library4: >-
     스케치에 라이브러리를 사용하려면 우선 스케치에 p5.js 링크를 걸고, 그 다음 HTML 파일에 라이브러리 링크를 걸면 됩니다. 링크가
@@ -1743,11 +1741,11 @@ community:
   in-practice-title: '실천:'
   in-practice1: >-
     우리는 '고고한' 개발자가 아닙니다. 상대가 이미 어떠한 것을 알고 있을거라 섣불리 가정하거나, 모든 사람이 반드시 알아야 할 지식이
-    있다고 생각하지 않습니다. 
+    있다고 생각하지 않습니다.
   in-practice2: '피드백이 필요한 경우, 언제든 적극적으로 응합니다.'
   in-practice3: >-
     우리는 입문자를 환영하며 타인의 학습을 우선순위에 둡니다. 또, 우리는 모든 업무를 수행할 때 초심자 시절의 열정을 잃지 않습니다. 우리
-    커뮤니티에 있어 입문자는 숙련자만큼이나 중요한 가치를 더하는 존재입니다. 
+    커뮤니티에 있어 입문자는 숙련자만큼이나 중요한 가치를 더하는 존재입니다.
   in-practice4: '우리는 언제나 모든 형태의 기여, 공헌, 참여를 적극적으로 인정하고 인증하고자 합니다.'
   in-practice5: 우리는 언제나 기꺼이 도움과 안내를 제공합니다.
   in-times-conflict-title: '갈등이 발생할 경우:'
@@ -1793,7 +1791,7 @@ community:
   contributors-conference-title: p5.js 공헌자 컨퍼런스
   contributors-conference1: >-
     대부분의 커뮤니티 활동은 온라인에서 진행되지만, 오프라인에서도 일어난답니다! 그동안 두 차례의 공헌자 컨퍼런스가 있었는데요, 미국
-    피츠버그 소재 카네기 멜론 대학교(Carnegie Mellon University)의 
+    피츠버그 소재 카네기 멜론 대학교(Carnegie Mellon University)의
   contributors-conference2: '에서 진행된 것이 그 중 하나입니다. 예술가, 디자이너, 개발자, 교육자들이 모여 p5.js의 개선 방향에 대해 논의하였습니다.'
   participants-title: 참여자
   support-title: 지원
@@ -1931,7 +1929,7 @@ community:
     and Access  via Translation. It provides space for contributors of p5.js and
     experienced  practitioners from outside OSSTA projects to share their
     knowledge, perspectives,  and dreams for building greater access to
-    technical and arts spaces.  
+    technical and arts spaces.
   2022-p5js-access-day-recap-video: p5.js Access Day 2022 Recap Video
   2022-p5js-access-day-recap-video-asl: p5.js Access Day 2022 Recap Video with ASL Interpretation
   2022-p5js-access-day-moderator: Moderator
@@ -2112,14 +2110,14 @@ showcase:
   project-q-2: How did you use p5.js in this project?
   project-a-2-1-roni-cantor: >-
     I used p5.js in this project to generate the sine wave and lerp (linear
-    interpolation) formulas and display the visuals in the 
+    interpolation) formulas and display the visuals in the
   project-a-2-2-roni-cantor: >-
     . I then used a feature in my code that exported my programmed graphic into
-    an 
+    an
   project-a-2-3-roni-cantor: ' file. I needed an SVG file to give to the plotter—an '
   project-a-2-4-roni-cantor: >-
     —so that it understood where to draw the lines that I programmed. I sent
-    this information to the plotter with a program called 
+    this information to the plotter with a program called
   project-a-2-5-roni-cantor: '!'
   project-q-3: What's your favorite p5.js feature?
   project-a-3-roni-cantor: ' because lines are fun and "lerp" is a fun word to say!'
@@ -2185,7 +2183,7 @@ showcase:
   project-a-5-1-qianqian: 'I am very excited about '
   project-a-5-2-qianqian: ' in LA.'
   creator-from-phuong: 'From Kyiv, Ukraine'
-  project-a-1-1-phuong: 'I''m a creative coder and designer, a '
+  project-a-1-1-phuong: "I'm a creative coder and designer, a "
   link-1-phuong: Play Airi Flies!
   link-2-phuong: Code for AiriFlies on GitHub
   link-3-phuong: More info in Phuong Ngo's portfolio
@@ -2196,7 +2194,7 @@ showcase:
   project-a-1-4-phuong: '," mainly taught by '
   project-a-2-1-phuong: >-
     I used p5.js to work on the visual part of the game. The animation sprites
-    for Airi and the ghosts were drawn on an iPad app called 
+    for Airi and the ghosts were drawn on an iPad app called
   project-a-2-2-phuong: ' and then integrated into '
   project-a-2-3-phuong: ' code. I mainly used examples at p5.play as a reference.'
   project-a-2-4-phuong: 'For the endless scrolling background, I found a '
@@ -2210,7 +2208,7 @@ showcase:
   project-a-2-7-phuong: ' (currently, there is a beta version not available in public yet, but it will be very soon!). I added around 120 samples of my classmates saying the word "pew" with different intonations and 80 samples of background noise to train it. Then I integrated the model into the game with '
   project-a-3-1-phuong: >-
     I really love how easily you can create, manipulate, and delete HTML blocks
-    and classes with the 
+    and classes with the
   project-a-3-2-phuong: ' via '
   project-a-3-3-phuong: ' etc. But my most favorite function is '
   project-a-3-4-phuong: ', since this is where you create magic.'
@@ -2240,12 +2238,12 @@ showcase:
     This summer, I gave myself a challenge of making typographic posters with
     coding, and this is one of the posters I made. I didn’t know until very
     recently that I could use motion sensor data with p5.js. I was also
-    watching 
+    watching
   dan-shiffman-matterjs-tutorial: Dan Shiffman’s matter.js tutorial videos
   project-a-2-2-chung: ', so I thought why not combine the two and practice what I was learning?'
   project-a-3-1-chung: >-
     There are many things I love about p5.js such as the online community and
-    beginner friendliness. What I really like right now is the 
+    beginner friendliness. What I really like right now is the
   project-a-3-2-chung: >-
     , with which I can not only work online for myself but also share URLs
     quickly in the present mode. For this project in particular, I had to do a
@@ -2256,7 +2254,7 @@ showcase:
   project-a-4-3-chung: ' and build a tool for myself.'
   project-a-5-1-chung: >-
     As mentioned above, if you want to render out frames and video files out of
-    p5.js sketches, check out my 
+    p5.js sketches, check out my
   project-a-5-2-chung: ' and let me know what you think.'
   creator-from-casey-louise: 'From New York, New York'
   project-a-1-1-casey-louise: >-
@@ -2267,7 +2265,7 @@ showcase:
     interactive spaces based on sensor technologies.
   project-a-1-3-casey-louise: >-
     Casey: I started learning p5.js in 2018 in my first semester at ITP, though
-    I had been dabbling in 
+    I had been dabbling in
   project-a-1-4-casey-louise: ' since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone.'
   project-a-1-5-casey-louise: >-
     Louise: I initially learned p5.js to make a website I was creating more
@@ -2276,7 +2274,7 @@ showcase:
   project-a-2-1-casey-louise: >-
     Casey: I was putting off learning shaders for a long time, and I was also
     curious if I could use them in p5.js. Then I heard about a grant for open
-    source, storytelling, and learning resource projects at ITP called 
+    source, storytelling, and learning resource projects at ITP called
   project-a-2-2-casey-louise: >-
     . Since I wasn't finding much in the way of p5.js + shader documentation, I
     decided to figure out how they're implemented in p5.js and create a resource
@@ -2285,14 +2283,14 @@ showcase:
     great about making sure the project is a learning resource and not just a
     collection of examples.
   project-a-3-1-casey-louise: 'Casey: Does '
-  project-a-3-2-casey-louise: ' count as a feature? I also love having the ability to share my programs on the web so that people don''t have to install special software or come to NYC to see my work.'
+  project-a-3-2-casey-louise: " count as a feature? I also love having the ability to share my programs on the web so that people don't have to install special software or come to NYC to see my work."
   project-a-3-3-casey-louise: 'Louise: My favorite feature is '
   project-a-3-4-casey-louise: ' and '
   project-a-3-5-casey-louise: ' for transformation of the coordinate system to make generative visuals.'
   project-a-4-1-casey-louise: >-
     Casey: The beginning of the project (figuring out how things work) was us
     reaching out to amazing people, asking questions, and asking for permission
-    to use their examples in our project. 
+    to use their examples in our project.
   adam-ferris-repo-casey-louise: Adam Ferriss' GitHub repo
   project-a-4-2-casey-louise: ' really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to '
   project-a-4-3-casey-louise: ' and '
@@ -2305,11 +2303,11 @@ showcase:
     Ferriss. Our aim was to do so in a way that a complete beginner can
     understand how to implement it, so it was as much a technical challenge as
     it was a challenge in teaching code to strangers and beginners. Here we drew
-    inspiration from the way the 
+    inspiration from the way the
   openframeworks-book-casey-louise: openFrameworks book
   project-a-4-7-casey-louise: ' is written. A fun "hey, it’s not hard and you can do it too" approach is what we believe in.'
   project-a-5-1-casey-louise: 'Check out the '
-  project-a-5-2-casey-louise: ' to explore our peers'' amazing grant projects!'
+  project-a-5-2-casey-louise: " to explore our peers' amazing grant projects!"
   pronouns-nonbinary: (they/them)
   creator-from-moon: 'From Athens, Georgia'
   posters-by: Posters By
@@ -2516,7 +2514,7 @@ teach:
   teach-case11-content5: >-
     We used p5.js Web editor and code examples on the website.  We also used
     dice, playing cards and various paper tools to help students learn about
-    coding concepts. 
+    coding concepts.
   teach-case12-title: Digital Weaving & Physical Computing Workshop Series
   teach-case12-lead-name: Qianqian Ye
   teach-case12-image-alt: In-class photo
@@ -2536,7 +2534,7 @@ teach:
   teach-case13-title: p5.js à l'Ubuntu Party!
   teach-case13-lead-name: Basile Pesin
   teach-case13-content1: '2020 우분투 행사(Ubuntu Party),'
-  teach-case13-content1-1: 'Cité des Sciences et de l''''Industrie, Paris, France'
+  teach-case13-content1-1: "Cité des Sciences et de l''Industrie, Paris, France"
   teach-case13-content2: 'Any age, including children and parents, young and older adults.'
   teach-case13-content3: Advanced
   teach-case13-content4: >-
diff --git a/src/data/zh-Hans.yml b/src/data/zh-Hans.yml
index 71312c8aa8..1afb7a812b 100644
--- a/src/data/zh-Hans.yml
+++ b/src/data/zh-Hans.yml
@@ -1002,12 +1002,11 @@ learn:
     开发的完整过程及教程。我们现有的教程含括了各种课题如：学习使用 p5.js、编程技巧及如何帮助开发开源项目。
   writing-a-tutorial-2: 我们欢迎任何人提交全新教程，这份指南将包括新教程的提议、准备和提交的所需步骤。
   writing-a-tutorial-how-start-title: 如何开始：
-  writing-a-tutorial-how-start-1: 先确定您所建议的课题尚未被涵盖，在此链接有
-  writing-a-tutorial-how-start-2: 一个列表
+  writing-a-tutorial-how-start-1: 确保您选择的主题以前没有涉及过。
+  writing-a-tutorial-how-start-2: 查看可用资源。
   writing-a-tutorial-how-start-3: >-
-    列出了正在进行中的教程。如果您想开发的课题被列为正在进行中 (in
-    progress)，您或许能帮助完成该项目或为现有的项目做预备发布的工作，您只需联络我们。
-  writing-a-tutorial-how-start-4: 如果您的课题尚未被涵盖及尚未被列为正在进行中，请寄份电子邮件去 education@p5js.org 并简略的讲述您所建议的教程。
+    如果您的主题已经在进行中，请考虑为现有工作做出贡献并帮助准备出版。请随时联系我们寻求指导。
+  writing-a-tutorial-how-start-4: 如果您的主题尚未涵盖且当前尚未进行，请提供您提议的主题的简要说明。您可以将此描述发送至 education@p5js.org。
   writing-a-tutorial-how-prepare-title: 如何准备网上 p5.js 教程：
   writing-a-tutorial-how-prepare-1: 当您以准备发布您的教程，请按着以下步骤准备您的教程给 p5.js 的网页。
   writing-a-tutorial-how-prepare-2: 将您的教程写在一个命名为 tutorial-name.hbs 的文件并跟从
@@ -1174,7 +1173,7 @@ learn:
     createCanvas() 函数内所设定的画布高度及宽度。
   curves-description1: >-
     This tutorial is written by J David Eisenberg and ported by Sally Chen. If
-    you see any errors or have comments, 
+    you see any errors or have comments,
   curves-description2: ' please let us know.'
   curves-description3: 'This work is licensed under a '
   curves-description4: ' Creative Commons Attribution-NonCommercial-ShareAlinke 4.0 International License.'
@@ -1714,7 +1713,7 @@ showcase:
   project-a-2-1-roni-cantor: 我在这个项目中使用p5.js生成正弦波和Lerp（线性插值）公式，并在
   project-a-2-2-roni-cantor: 中显示可视化效果。然后，我使用我的代码中的一个功能将可编程图形导出为
   project-a-2-3-roni-cantor: ' 文件。我需要一个SVG文件来提供给绘图仪器，'
-  project-a-2-4-roni-cantor: ''''' - 以便它知道如何绘制我编程的线条。我使用了名为'''
+  project-a-2-4-roni-cantor: "'' - 以便它知道如何绘制我编程的线条。我使用了名为'"
   project-a-2-5-roni-cantor: ' 的程序将此信息发送到绘图仪器！'
   project-q-3: 你最喜欢 p5.js 的哪个功能？
   project-a-3-roni-cantor: ' 因为线条很有趣，而“lerp”是一个有趣的词！'
@@ -2018,7 +2017,7 @@ teach:
   teach-case13-content3: 中高级
   teach-case13-content4: 通过有趣和引人注目的示例，向新公众介绍编程。
   teach-case13-content5: 方法：现场工作坊，每次1小时，使用不同的参与者。 学生们使用(Ubuntu)机器与p5.js网络编辑器一起学习。 我使用视频投影机和白板教学。
-  teach-case13-content5-1: '''材料：我给出的练习可以通过p5.js网络编辑器链接获得。'''
+  teach-case13-content5-1: "'材料：我给出的练习可以通过p5.js网络编辑器链接获得。'"
   teach-case14-title: 用p5.js探索生成艺术和设计
   teach-case14-lead-name: Priti Pandurangan & Ajith Ranka
   teach-case14-image-alt: 一组参与者合作使用p5.js网络编辑器在笔记本电脑上创建一些设计。
diff --git a/src/templates/pages/learn/tutorial-guide.hbs b/src/templates/pages/learn/tutorial-guide.hbs
index 8a1cda988f..dccbe309db 100755
--- a/src/templates/pages/learn/tutorial-guide.hbs
+++ b/src/templates/pages/learn/tutorial-guide.hbs
@@ -26,6 +26,7 @@ slug: learn/
       <ul class="list_view">
         <li>
           {{#i18n "writing-a-tutorial-how-start-1"}}{{/i18n}}
+          {{#i18n "writing-a-tutorial-how-start-2"}}{{/i18n}}
           {{#i18n "writing-a-tutorial-how-start-3"}}{{/i18n}}
         </li>
         <li>