From 7855b2b4ca750b00212a58703f6454689eb6e4e3 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Fri, 7 Aug 2020 20:35:16 -0300
Subject: [PATCH 01/14] Mutation observer

---
 .../01-mutation-observer/article.md           | 188 +++++++++---------
 1 file changed, 94 insertions(+), 94 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 6a458fa02..e68568c08 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -1,82 +1,82 @@
 
 # Mutation observer
 
-`MutationObserver` is a built-in object that observes a DOM element and fires a callback in case of changes.
+`MutationObserver` es un objeto incorporado que observa un elemento DOM y dispara un callback cuando hay cambios en él.
 
-We'll first take a look at the syntax, and then explore a real-world use case, to see where such thing may be useful.
+Primero veremos su sintaxis, luego exploraremos un caso de la vida real para ver dónde puede ser útil.
 
-## Syntax
+## Sintaxis
 
-`MutationObserver` is easy to use.
+`MutationObserver` es fácil de usar.
 
-First, we create an observer with a callback-function:
+Primero creamos un observador con una función callback:
 
 ```js
 let observer = new MutationObserver(callback);
 ```
 
-And then attach it to a DOM node:
+Y luego lo vinculamos a un nodo DOM:
 
 ```js
 observer.observe(node, config);
 ```
 
-`config` is an object with boolean options "what kind of changes to react on":
-- `childList` -- changes in the direct children of `node`,
-- `subtree` -- in all descendants of `node`,
-- `attributes` -- attributes of `node`,
-- `attributeFilter` -- an array of attribute names, to observe only selected ones.
-- `characterData` -- whether to observe `node.data` (text content),
+`config` es un objeto con opciones booleanas "a qué clase de cambios reaccionar":
+- `childList` -- cambios en los hijos directos de `node`,
+- `subtree` -- en todos los descendientes de `node`,
+- `attributes` -- atributos de `node`,
+- `attributeFilter` -- un array de nombres de atributos, para observar solamente a los seleccionados.
+- `characterData` -- si observar o no a `node.data` (text content),
 
-Few other options:
-- `attributeOldValue` -- if `true`, pass both the old and the new value of attribute to callback (see below), otherwise only the new one (needs `attributes` option),
-- `characterDataOldValue` -- if `true`, pass both the old and the new value of `node.data` to callback (see below), otherwise only the new one (needs `characterData` option).
+Algunas otras opciones:
+- `attributeOldValue` -- si es `true`, tanto el valor viejo como el nuevo del atributo son pasados al callback (ver abajo), de otro modo pasa solamente el nuevo (necesita la opción `attributes`),
+- `characterDataOldValue` -- si es `true`, tanto el valor viejo como el nuevo de `node.data` son pasados al callback (ver abajo), de otro modo pasa solamente el nuevo (necesita la opción `characterData`).
 
-Then after any changes, the `callback` is executed: changes are passed in the first argument as a list of [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects, and the observer itself as the second argument.
+Entonces, después de cualquier cambio, el `callback` es ejecutado: los cambios son pasados en el primer argumento como una lista objetos [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord), y el observador en sí mismo como segundo argumento.
 
-[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects have properties:
+Los objetos [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) tienen como propiedades:
 
-- `type` -- mutation type, one of
-    - `"attributes"`: attribute modified
-    - `"characterData"`: data modified, used for text nodes,
-    - `"childList"`: child elements added/removed,
-- `target` -- where the change occurred: an element for `"attributes"`, or text node for `"characterData"`, or an element for a `"childList"` mutation,
-- `addedNodes/removedNodes`  -- nodes that were added/removed,
-- `previousSibling/nextSibling` -- the previous and next sibling to added/removed nodes,
-- `attributeName/attributeNamespace` -- the name/namespace (for XML) of the changed attribute,
-- `oldValue` -- the previous value, only for attribute or text changes, if the corresponding option is set `attributeOldValue`/`characterDataOldValue`.
+- `type` -- tipo de mutación, uno de:
+    - `"attributes"`: atributo modificado,
+    - `"characterData"`: dato modificado, usado para nodos de texto,
+    - `"childList"`: elementos hijos agregados o quitados,
+- `target` -- dónde ocurrió el cambio: un elemento para `"attributes"`, o un nodo de texto para `"characterData"`, o un elemento para una mutación de `"childList"`,
+- `addedNodes/removedNodes` -- nodos que fueron agregados o quitados,
+- `previousSibling/nextSibling` -- los nodos "hermanos", previos y siguientes a los nodos agregados y quitados,
+- `attributeName/attributeNamespace` -- el nombre o namespace (para XML) del atributo cambiado,
+- `oldValue` -- el valor previo, solamente cambios de atributo o cambios de texto si se establece la opción correspondiente `attributeOldValue`/`characterDataOldValue`.
 
-For example, here's a `<div>` with a `contentEditable` attribute. That attribute allows us to focus on it and edit.
+Por ejemplo, aquí hay un `<div>` con un atributo `contentEditable`. Ese atributo nos permite poner el foco en él y editarlo.
 
 ```html run
 <div contentEditable id="elem">Click and <b>edit</b>, please</div>
 
 <script>
 let observer = new MutationObserver(mutationRecords => {
-  console.log(mutationRecords); // console.log(the changes)
+  console.log(mutationRecords); // console.log(los cambios)
 });
 
-// observe everything except attributes
+// observa todo exceptuando atributos
 observer.observe(elem, {
-  childList: true, // observe direct children
-  subtree: true, // and lower descendants too
-  characterDataOldValue: true // pass old data to callback
+  childList: true, // observa hijos directos
+  subtree: true, // y descendientes inferiores también
+  characterDataOldValue: true // pasa el dato viejo al callback 
 });
 </script>
 ```
 
-If we run this code in the browser, then focus on the given `<div>` and change the text inside `<b>edit</b>`, `console.log` will show one mutation:
+Si ejecutamos este código en el navegador, el foco en el `<div>` dado y el cambio en texto dentro de `<b>edit</b>`, `console.log` mostrará una mutación:
 
 ```js
 mutationRecords = [{
   type: "characterData",
   oldValue: "edit",
   target: <text node>,
-  // other properties empty
+  // otras propiedades vacías
 }];
 ```
 
-If we make more complex editing operations, e.g. remove the `<b>edit</b>`, the mutation event may contain multiple mutation records:
+Si hacemos operaciones de edición más complejas, como eliminar el `<b>edit</b>`, el evento de mutación puede contener múltiples registros de mutación:
 
 ```js
 mutationRecords = [{
@@ -85,75 +85,75 @@ mutationRecords = [{
   removedNodes: [<b>],
   nextSibling: <text node>,
   previousSibling: <text node>
-  // other properties empty
+  // otras propiedades vacías
 }, {
   type: "characterData"
   target: <text node>
-  // ...mutation details depend on how the browser handles such removal
-  // it may coalesce two adjacent text nodes "edit " and ", please" into one node
-  // or it may leave them separate text nodes
+  // ...detalles de mutación dependen de cómo el navegador maneja tal eliminación
+  // puede unir dos nodos de texto adyacentes "edit " y ", please" en un nodo
+  // o puede dejarlos como nodos de texto separados
 }];
 ```
 
-So, `MutationObserver` allows to react on any changes within DOM subtree.
+Así, `MutationObserver` permite reaccionar a cualquier cambio dentro del subárbol DOM.
 
-## Usage for integration
+## Uso para integración
 
-When such thing may be useful?
+¿Cuándo esto puede ser práctico?
 
-Imagine the situation when you need to add a third-party script that contains useful functionality, but also does something unwanted, e.g. shows ads `<div class="ads">Unwanted ads</div>`.
+Imagina la situación cuando necesitas añadir un script de terceros que contiene funcionalidad útil pero que también hace algo no deseado, por ejemplo añadir publicidad `<div class="ads">Unwanted ads</div>`.
 
-Naturally, the third-party script provides no mechanisms to remove it.
+Naturalmente el script de terceras partes no proporciona mecanismos para removerlo.
 
-Using `MutationObserver`, we can detect when the unwanted element appears in our DOM and remove it.
+Usando `MutationObserver` podemos detectar cuándo aparece el elemento no deseado en nuestro DOM y removerlo.
 
-There are other situations when a third-party script adds something into our document, and we'd like to detect, when it happens, to adapt our page, dynamically resize something etc.
+Hay otras situaciones, como cuando un script de terceras partes agrega algo en nuestro documento y quisiéramos detectarlo para adaptar nuestra página y cambiar el tamaño de algo dinámicamente, etc.
 
-`MutationObserver` allows to implement this.
+`MutationObserver` permite implementarlo.
 
-## Usage for architecture
+## Uso para arquitectura
 
-There are also situations when `MutationObserver` is good from architectural standpoint.
+Hay también situaciones donde `MutationObserver` es bueno desde el punto de vista de la arquitectura.
 
-Let's say we're making a website about programming. Naturally, articles and other materials may contain source code snippets.
+Digamos que estamos haciendo un sitio web acerca de programación. Naturalmente, los artículos y otros materiales pueden contener fragmentos de código.
 
-Such snippet in an HTML markup looks like this:
+Tal fragmento en un markup HTML se ve como esto:
 
 ```html
 ...
 <pre class="language-javascript"><code>
-  // here's the code
+  // aquí el código
   let hello = "world";
 </code></pre>
 ...
 ```
 
-Also we'll use a JavaScript highlighting library on our site, e.g. [Prism.js](https://prismjs.com/). A call to `Prism.highlightElem(pre)` examines the contents of such `pre` elements and adds into them special tags and styles for colored syntax highlighting, similar to what you see in examples here, at this page.
+También usaremos una librería JavaScript de "highlighting" para resaltar elementos en nuestro sitio, por ejemplo [Prism.js](https://prismjs.com/). Una llamada a `Prism.highlightElem(pre)` examina el contenido de tales elementos `pre` y les agrega tags y styles especiales para obtener "colored syntax highlighting" (sintaxis destacada por color), similares a los que ves en esta página.
 
-When exactly to run that highlighting method? We can do it on `DOMContentLoaded` event, or at the bottom of the page. At that moment we have our DOM ready, can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
+¿Exactamente cuándo ejecutar tal método de highlighting? Podemos hacerlo en el evento `DOMContentLoaded`, o al final de la página. En el momento en que tenemos nuestro DOM listo, buscamos los elementos `pre[class*="language"]` y llamamos `Prism.highlightElem` en ellos:
 
 ```js
-// highlight all code snippets on the page
+// resaltar todos los fragmentos de código en la página
 document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
 ```
 
-Everything's simple so far, right? There are `<pre>` code snippets in HTML, we highlight them.
+Todo es simple hasta ahora, ¿verdad? Hay fragmentos de código `<pre>` en HTML y los resaltamos.
 
-Now let's go on. Let's say we're going to dynamically fetch materials from a server. We'll study methods for that [later in the tutorial](info:fetch). For now it only matters that we fetch an HTML article from a webserver and display it on demand:
+Continuemos. Digamos que vamos a buscar dinámicamente material desde un servidor. Estudiaremos métodos para ello [luego en el tutorial](info:fetch). Por ahora solamente importa que buscamos un artículo HTML desde un servidor web y lo mostramos bajo demanda:
 
 ```js
-let article = /* fetch new content from server */
+let article = /* busca contenido nuevo desde un servidor */
 articleElem.innerHTML = article;
 ```
 
-The new `article` HTML may contain code snippets. We need to call `Prism.highlightElem` on them, otherwise they won't get highlighted.
+El nuevo elemento HTML `article` puede contener fragmentos de código. Necesitamos llamar `Prism.highlightElem` en ellos, de otro modo no se resaltarían.
 
-**Where and when to call `Prism.highlightElem` for a dynamically loaded article?**
+**¿Dónde y cuándo llamar `Prism.highlightElem` en un artículo cargado dinámicamente?**
 
-We could append that call to the code that loads an article, like this:
+Podríamos agregar el llamado al código que llama un "article", como esto:
 
 ```js
-let article = /* fetch new content from server */
+let article = /* busca contenido nuevo desde un servidor */
 articleElem.innerHTML = article;
 
 *!*
@@ -162,38 +162,38 @@ snippets.forEach(Prism.highlightElem);
 */!*
 ```
 
-...But imagine, we have many places in the code where we load contents: articles, quizzes, forum posts. Do we need to put the highlighting call everywhere? That's not very convenient, and also easy to forget.
+...Pero imagina que tenemos muchos lugares en el código donde cargamos contenido: artículos, cuestionarios, entradas de foros. ¿Necesitamos poner el llamado al "highlighting" en todos lugares? No es muy conveniente, y fácil de olvidar además.
 
-And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads contents dynamically, and we'd like to add syntax highlighting to it. No one likes to patch third-party scripts.
+¿Y si el contenido es cargado por un módulo de terceras partes? Por ejemplo tenemos un foro escrito por algún otro que carga contenido dinámicamente y quisiéramos añadirle sintaxis de highlighting. A nadie le gusta emparchar scripts de terceras partes.
 
-Luckily, there's another option.
+Afortunadamente hay otra opción.
 
-We can use `MutationObserver` to automatically detect when code snippets are inserted in the page and highlight them.
+Podemos usar `MutationObserver` para detectar automáticamente cuándo los fragmentos de código son insertados en la página y resaltarlos.
 
-So we'll handle the highlighting functionality in one place, relieving us from the need to integrate it.
+Entonces manejaremos la funcionalidad de "highlighting" en un único lugar, liberándonos de la necesidad de integrarlo.
 
-### Dynamic highlight demo
+### Demo de highlight dinámico
 
-Here's the working example.
+Aquí el ejemplo funcionando.
 
-If you run this code, it starts observing the element below and highlighting any code snippets that appear there:
+Si ejecutas el código, este comienza a observar el elemento debajo y resalta cualquier fragmento de código que aparezca allí:
 
 ```js run
 let observer = new MutationObserver(mutations => {
 
   for(let mutation of mutations) {
-    // examine new nodes, is there anything to highlight?
+    // examine nodos nuevos, ¿hay algo para resaltar?
 
     for(let node of mutation.addedNodes) {
-      // we track only elements, skip other nodes (e.g. text nodes)
+      // seguimos elementos solamente, salteamos los otros nodos (es decir nodos de texto)
       if (!(node instanceof HTMLElement)) continue;
 
-      // check the inserted element for being a code snippet
+      // verificamos que el elemento insertado sea un fragmento de código
       if (node.matches('pre[class*="language-"]')) {
         Prism.highlightElement(node);
       }
 
-      // or maybe there's a code snippet somewhere in its subtree?
+      // ¿o tal vez haya un fragmento de código en su sub-árbol?
       for(let elem of node.querySelectorAll('pre[class*="language-"]')) {
         Prism.highlightElement(elem);
       }
@@ -207,18 +207,18 @@ let demoElem = document.getElementById('highlight-demo');
 observer.observe(demoElem, {childList: true, subtree: true});
 ```
 
-Here, below, there's an HTML-element and JavaScript that dynamically fills it using `innerHTML`.
+Aquí, abajo, hay un elemento HTML y JavaScript que lo llena dinámicamente usando `innerHTML`.
 
-Please run the previous code (above, observes that element), and then the code below. You'll see how `MutationObserver` detects and highlights the snippet.
+Por favor ejecuta el código anterior (arriba, que observa aquel elemento) y luego el código de abajo. Verás cómo `MutationObserver` detecta y resalta el fragmento.
 
 <p id="highlight-demo" style="border: 1px solid #ddd">A demo-element with <code>id="highlight-demo"</code>, run the code above to observe it.</p>
 
-The following code populates its `innerHTML`, that causes the `MutationObserver` to react and highlight its contents:
+El siguiente código llena su `innerHTML`, lo que causa que `MutationObserver` reaccione y resalte su contenido:
 
 ```js run
 let demoElem = document.getElementById('highlight-demo');
 
-// dynamically insert content with code snippets
+// inserta contenido con fragmentos de código
 demoElem.innerHTML = `A code snippet is below:
   <pre class="language-javascript"><code> let hello = "world!"; </code></pre>
   <div>Another one:</div>
@@ -228,39 +228,39 @@ demoElem.innerHTML = `A code snippet is below:
 `;
 ```
 
-Now we have `MutationObserver` that can track all highlighting in observed elements or the whole `document`. We can add/remove code snippets in HTML without thinking about it.
+Ahora tenemos un `MutationObserver` que puede rastrear todo "highlighting" en los elementos observados del `document` entero. Podemos agregar o quitar fragmentos de código en el HTML sin siquiera pensar en ello.
 
-## Additional methods
+## Métodos adicionales
 
-There's a method to stop observing the node:
+Hay un método para detener la observación del nodo:
 
-- `observer.disconnect()` -- stops the observation.
+- `observer.disconnect()` -- detiene la observación.
 
-When we stop the observing, it might be possible that some changes were not processed by the observer yet.
+Cuando detenemos la observación, algunos cambios todavía podrían quedar sin ser procesados por el observador.
 
-- `observer.takeRecords()` -- gets a list of unprocessed mutation records, those that happened, but the callback did not handle them.
+- `observer.takeRecords()` -- obtiene una lista de registros de mutaciones sin procesar, aquellos que ocurrieron pero el callback no manejó.
 
-These methods can be used together, like this:
+Estos métodos pueden ser usados juntos, como esto:
 
 ```js
-// we'd like to stop tracking changes
+// quisiéramos detener el rastreo de cambios
 observer.disconnect();
 
-// handle unprocessed some mutations
+// manejar algunas mutaciones que no fueron procesadas
 let mutationRecords = observer.takeRecords();
 ...
 ```
 
-```smart header="Garbage collection interaction"
-Observers use weak references to nodes internally. That is: if a node is removed from DOM, and becomes unreachable, then it becomes garbage collected.
+```smart header="Interacción con la recolección de basura"
+Los observadores usan internamente referencias débiles. Esto es: si un nodo es quitado del DOM y se hace inalcanzable, se vuelve basura a ser recolectada.
 
-The mere fact that a DOM node is observed doesn't prevent the garbage collection.
+El mero hecho de que un nodo DOM sea observado no evita la recolección de basura.
 ```
 
-## Summary  
+## Resumen  
 
-`MutationObserver` can react on changes in DOM: attributes, added/removed elements, text content.
+`MutationObserver` puede reaccionar a cambios en el DOM: atributos, elementos añadidos y quitados, contenido de texto.
 
-We can use it to track changes introduced by other parts of our code, as well as to integrate with third-party scripts.
+Podemos usarlo para rastrear cambios introducidos por otras partes de nuestro código o bien para integrarlo con scripts de terceras partes.
 
-`MutationObserver` can track any changes. The config "what to observe" options are used for optimizations, not to spend resources on unneeded callback invocations.
+`MutationObserver` puede rastrear cualquier cambio. `config` permite configurar "qué observar" y se usa para optimización y no desperdiciar recursos en llamados al callback innecesarios.

From 6dbfc333d7879a0516cd0891ffa7bdc75987e4c3 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:33:32 -0300
Subject: [PATCH 02/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index e68568c08..0e456088d 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -26,7 +26,7 @@ observer.observe(node, config);
 - `subtree` -- en todos los descendientes de `node`,
 - `attributes` -- atributos de `node`,
 - `attributeFilter` -- un array de nombres de atributos, para observar solamente a los seleccionados.
-- `characterData` -- si observar o no a `node.data` (text content),
+- `characterData` -- establece si debe observar cambios de texto en `node.data` o no,
 
 Algunas otras opciones:
 - `attributeOldValue` -- si es `true`, tanto el valor viejo como el nuevo del atributo son pasados al callback (ver abajo), de otro modo pasa solamente el nuevo (necesita la opción `attributes`),

From f55cdab000406afb0c3d099ba0cf66824a625f1b Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:34:15 -0300
Subject: [PATCH 03/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 0e456088d..15d58592b 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -99,7 +99,7 @@ Así, `MutationObserver` permite reaccionar a cualquier cambio dentro del subár
 
 ## Uso para integración
 
-¿Cuándo esto puede ser práctico?
+¿Cuándo puede ser práctico esto?
 
 Imagina la situación cuando necesitas añadir un script de terceros que contiene funcionalidad útil pero que también hace algo no deseado, por ejemplo añadir publicidad `<div class="ads">Unwanted ads</div>`.
 

From effe663c7cad665ce2b369b796ff71351e83dee0 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:34:47 -0300
Subject: [PATCH 04/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 15d58592b..914ed6ab5 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -25,7 +25,7 @@ observer.observe(node, config);
 - `childList` -- cambios en los hijos directos de `node`,
 - `subtree` -- en todos los descendientes de `node`,
 - `attributes` -- atributos de `node`,
-- `attributeFilter` -- un array de nombres de atributos, para observar solamente a los seleccionados.
+- `attributeFilter` -- un array de nombres de atributos, para observar solamente a los seleccionados,
 - `characterData` -- establece si debe observar cambios de texto en `node.data` o no,
 
 Algunas otras opciones:

From b633d05500be91b9038994ef18b0a28636f58ebe Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:36:07 -0300
Subject: [PATCH 05/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 914ed6ab5..42c93af58 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -128,7 +128,7 @@ Tal fragmento en un markup HTML se ve como esto:
 ...
 ```
 
-También usaremos una librería JavaScript de "highlighting" para resaltar elementos en nuestro sitio, por ejemplo [Prism.js](https://prismjs.com/). Una llamada a `Prism.highlightElem(pre)` examina el contenido de tales elementos `pre` y les agrega tags y styles especiales para obtener "colored syntax highlighting" (sintaxis destacada por color), similares a los que ves en esta página.
+También usaremos una librería JavaScript de "highlighting" para resaltar elementos en nuestro sitio, por ejemplo [Prism.js](https://prismjs.com/). Una llamada a `Prism.highlightElem(pre)` examina el contenido de tales elementos `pre` y les agrega tags y styles especiales para obtener sintaxis resaltada con color, similares a los que ves en esta página.
 
 ¿Exactamente cuándo ejecutar tal método de highlighting? Podemos hacerlo en el evento `DOMContentLoaded`, o al final de la página. En el momento en que tenemos nuestro DOM listo, buscamos los elementos `pre[class*="language"]` y llamamos `Prism.highlightElem` en ellos:
 

From e28113dfed108d78e751e8ab0ed94b082605f4cc Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:41:45 -0300
Subject: [PATCH 06/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 42c93af58..4d935cacf 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -130,7 +130,7 @@ Tal fragmento en un markup HTML se ve como esto:
 
 También usaremos una librería JavaScript de "highlighting" para resaltar elementos en nuestro sitio, por ejemplo [Prism.js](https://prismjs.com/). Una llamada a `Prism.highlightElem(pre)` examina el contenido de tales elementos `pre` y les agrega tags y styles especiales para obtener sintaxis resaltada con color, similares a los que ves en esta página.
 
-¿Exactamente cuándo ejecutar tal método de highlighting? Podemos hacerlo en el evento `DOMContentLoaded`, o al final de la página. En el momento en que tenemos nuestro DOM listo, buscamos los elementos `pre[class*="language"]` y llamamos `Prism.highlightElem` en ellos:
+¿Exactamente cuándo ejecutar tal método de highlighting? Podemos hacerlo en el evento `DOMContentLoaded`, o al final de la página. En el momento en que tenemos nuestro DOM listo buscamos los elementos `pre[class*="language"]` y llamamos `Prism.highlightElem` en ellos:
 
 ```js
 // resaltar todos los fragmentos de código en la página

From 468f325c7ac457525c518350a80639c7d144d0b8 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:42:42 -0300
Subject: [PATCH 07/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 4d935cacf..666e4275a 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -162,7 +162,7 @@ snippets.forEach(Prism.highlightElem);
 */!*
 ```
 
-...Pero imagina que tenemos muchos lugares en el código donde cargamos contenido: artículos, cuestionarios, entradas de foros. ¿Necesitamos poner el llamado al "highlighting" en todos lugares? No es muy conveniente, y fácil de olvidar además.
+...Pero imagina que tenemos muchos lugares en el código donde cargamos contenido: artículos, cuestionarios, entradas de foros. ¿Necesitamos poner el llamado al "highlighting" en todos lugares? No es muy conveniente, y es fácil de olvidar además.
 
 ¿Y si el contenido es cargado por un módulo de terceras partes? Por ejemplo tenemos un foro escrito por algún otro que carga contenido dinámicamente y quisiéramos añadirle sintaxis de highlighting. A nadie le gusta emparchar scripts de terceras partes.
 

From 82859a98bb5372a98bd87d3cd34d6d8305a30c6f Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:43:11 -0300
Subject: [PATCH 08/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 666e4275a..053669d98 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -164,7 +164,7 @@ snippets.forEach(Prism.highlightElem);
 
 ...Pero imagina que tenemos muchos lugares en el código donde cargamos contenido: artículos, cuestionarios, entradas de foros. ¿Necesitamos poner el llamado al "highlighting" en todos lugares? No es muy conveniente, y es fácil de olvidar además.
 
-¿Y si el contenido es cargado por un módulo de terceras partes? Por ejemplo tenemos un foro escrito por algún otro que carga contenido dinámicamente y quisiéramos añadirle sintaxis de highlighting. A nadie le gusta emparchar scripts de terceras partes.
+¿Y si el contenido es cargado por un módulo de terceras partes? Por ejemplo tenemos un foro, escrito por algún otro, que carga contenido dinámicamente y quisiéramos añadirle sintaxis de highlighting. A nadie le gusta emparchar scripts de terceras partes.
 
 Afortunadamente hay otra opción.
 

From 59392b3cd213a1e6177d27af93476807c7ce83e6 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:43:26 -0300
Subject: [PATCH 09/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 053669d98..8930f6aa0 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -185,7 +185,7 @@ let observer = new MutationObserver(mutations => {
     // examine nodos nuevos, ¿hay algo para resaltar?
 
     for(let node of mutation.addedNodes) {
-      // seguimos elementos solamente, salteamos los otros nodos (es decir nodos de texto)
+      // seguimos elementos solamente, saltamos los otros nodos (es decir nodos de texto)
       if (!(node instanceof HTMLElement)) continue;
 
       // verificamos que el elemento insertado sea un fragmento de código

From e8738cae51501d3c841149d2a9b9728feac4eb98 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:45:24 -0300
Subject: [PATCH 10/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 8930f6aa0..b32eeb8a1 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -139,7 +139,7 @@ document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem)
 
 Todo es simple hasta ahora, ¿verdad? Hay fragmentos de código `<pre>` en HTML y los resaltamos.
 
-Continuemos. Digamos que vamos a buscar dinámicamente material desde un servidor. Estudiaremos métodos para ello [luego en el tutorial](info:fetch). Por ahora solamente importa que buscamos un artículo HTML desde un servidor web y lo mostramos bajo demanda:
+Continuemos. Digamos que vamos a buscar dinámicamente material desde un servidor. Estudiaremos métodos para ello [más adelante](info:fetch) en el tutorial. Por ahora solamente importa que buscamos un artículo HTML desde un servidor web y lo mostramos bajo demanda:
 
 ```js
 let article = /* busca contenido nuevo desde un servidor */

From c57330de3b8736d8a14711b80f61771f07c29641 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:46:04 -0300
Subject: [PATCH 11/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index b32eeb8a1..f7ef95fd8 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -228,7 +228,7 @@ demoElem.innerHTML = `A code snippet is below:
 `;
 ```
 
-Ahora tenemos un `MutationObserver` que puede rastrear todo "highlighting" en los elementos observados del `document` entero. Podemos agregar o quitar fragmentos de código en el HTML sin siquiera pensar en ello.
+Ahora tenemos un `MutationObserver` que puede rastrear todo el "highlighting" en los elementos observados del `document` entero. Podemos agregar o quitar fragmentos de código en el HTML sin siquiera pensar en ello.
 
 ## Métodos adicionales
 

From c1daaf4c000280b9e2a33923dae0db485c1d9b8e Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:48:18 -0300
Subject: [PATCH 12/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index f7ef95fd8..975514913 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -150,7 +150,7 @@ El nuevo elemento HTML `article` puede contener fragmentos de código. Necesitam
 
 **¿Dónde y cuándo llamar `Prism.highlightElem` en un artículo cargado dinámicamente?**
 
-Podríamos agregar el llamado al código que llama un "article", como esto:
+Podríamos agregar el llamado al código que carga un "article", como esto:
 
 ```js
 let article = /* busca contenido nuevo desde un servidor */

From 0dbe2f055481496dd62c8d5fc3a867068b8a3567 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:54:57 -0300
Subject: [PATCH 13/14] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

266 pero falta refinar

Co-authored-by: Maksumi Murakami <maksumimurakami@gmail.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 975514913..92dfef72b 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -263,4 +263,4 @@ El mero hecho de que un nodo DOM sea observado no evita la recolección de basur
 
 Podemos usarlo para rastrear cambios introducidos por otras partes de nuestro código o bien para integrarlo con scripts de terceras partes.
 
-`MutationObserver` puede rastrear cualquier cambio. `config` permite configurar "qué observar" y se usa para optimización y no desperdiciar recursos en llamados al callback innecesarios.
+`MutationObserver` puede rastrear cualquier cambio. Las opciones para `config` permiten establecer qué se va a observar y se usa para optimización y no desperdiciar recursos en llamados al callback innecesarios.

From 2e0cc49984c8501690061a1a18d8255cc50e7bcb Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Sat, 8 Aug 2020 21:59:01 -0300
Subject: [PATCH 14/14] refinando los malos consejos de mis partners

---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 92dfef72b..6bcb4bf35 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -263,4 +263,4 @@ El mero hecho de que un nodo DOM sea observado no evita la recolección de basur
 
 Podemos usarlo para rastrear cambios introducidos por otras partes de nuestro código o bien para integrarlo con scripts de terceras partes.
 
-`MutationObserver` puede rastrear cualquier cambio. Las opciones para `config` permiten establecer qué se va a observar y se usa para optimización y no desperdiciar recursos en llamados al callback innecesarios.
+`MutationObserver` puede rastrear cualquier cambio. Las opciones de `config` permiten establecer qué se va a observar, se usa para optimización y no desperdiciar recursos en llamados al callback innecesarios.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/javascript-tutorial/es.javascript.info/pull/337.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/javascript-tutorial/es.javascript.info/pull/337.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/javascript-tutorial/es.javascript.info/pull/337.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/javascript-tutorial/es.javascript.info/pull/337.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>