From 38545b7898cab48e456c15451863800aebdcf7a6 Mon Sep 17 00:00:00 2001
From: nahuelcoder <nahuelbustos0@protonmail.com>
Date: Fri, 21 Aug 2020 12:32:52 -0300
Subject: [PATCH 01/28] Traslation

---
 2-ui/99-ui-misc/03-event-loop/article.md | 113 +++++++++++------------
 1 file changed, 56 insertions(+), 57 deletions(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 4a1625288..ca5c368d4 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -1,64 +1,63 @@
+# Evento ciclo: microtareas y macrotareas
 
-# Event loop: microtasks and macrotasks
+El flujo de ejecución de JavaScript en el navegador, así como en Node.js, está basado en un *event loop* (evento ciclo).
 
-Browser JavaScript execution flow, as well as in Node.js, is based on an *event loop*.
+Entender como este evento ciclo funciona es importante para optimizaciones y en algunos casos para la arquitecura correcta.
 
-Understanding how event loop works is important for optimizations, and sometimes for the right architecture.
+En este capítulo primero vamos a ver detalles teóricos acerca de como funcionan las cosas y luego veremos aplicaciones prácticas de ese conocimiento.
 
-In this chapter we first cover theoretical details about how things work, and then see practical applications of that knowledge.
+## Evento Ciclo
 
-## Event Loop
+El concepto de *evento ciclo* es muy simple. Existe un ciclo infinito en el que el motor de JavaScript aguarda por una tarea, luego ejecuta la tarea requerida y finalmente vuelve a dormir esperando por una nueva tarea.
 
-The concept of *event loop* is very simple. There's an endless loop, when JavaScript engine waits for tasks, executes them and then sleeps waiting for more tasks.
+EL algoritmo general del motor:
 
-The general algorithm of the engine:
+1. Mientras haya tareas:
+    - ejecutarlas comenzando por la más antigua.
+2. Dormir hasta que aparezca una tarea, luego volver a 1.
 
-1. While there are tasks:
-    - execute them, starting with the oldest task.
-2. Sleep until a task appears, then go to 1.
+Eso es una formalización de lo que vemos cuando navegamos por una página. El motor JavaScript no hace nada la mayoría del tiempo y solo corre cuando un script/handler/evento se activa.
 
-That's a formalization for what we see when browsing a page. JavaScript engine does nothing most of the time, only runs if a script/handler/event activates.
+Ejemplos de tareas:
 
-Examples of tasks:
+- Cuando un script externo `<script src="...">` se carga, la tarea es ejecutarlo.
+- Cuando un usuario mueve el mouse, la tarea es enviar el evento `mousemove` y ejecutar handlers.
+- Cuando llega el momento de un `setTimeout` progrmamado, la tarea es ejecutar su callback.
+- ... y así sucesivamente.
 
-- When an external script `<script src="...">` loads, the task is to execute it.
-- When a user moves their mouse, the task is to dispatch `mousemove` event and execute handlers.
-- When the time is due for a scheduled `setTimeout`, the task is to run its callback.
-- ...and so on.
+Las tareas son programadas --> el motor las ejecuta --> aguarda por más tareas (mientras duerme y prácticamente no consume CPU).
 
-Tasks are set -- the engine handles them -- then waits for more tasks (while sleeping and consuming close to zero CPU).
+Puede ocurrir que una tarea llegue mientras el motor está ocupado, entonces es puesta en lista.
 
-It may happen that a task comes while the engine is busy, then it's enqueued.
-
-The tasks form a queue, so-called "macrotask queue" (v8 term):
+Las tareas de una lista, también llamada "Lista de macrotarea" (Término de v8):
 
 ![](eventLoop.svg)
 
-For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated on the picture above.
+Por ejemplo, mientras el motor está ocupado ejecutando un `script`, un usuario podría mover su mouse causando `mousemove` o también podría ser `setTimeout`, etc. Todas estas tareas forman una fila como se observa en la imagen arriba.
 
-Tasks from the queue are processed on "first come – first served" basis. When the engine browser is done with the `script`, it handles `mousemove` event, then `setTimeout` handler, and so on.
+Las tareas de la fila son ejecutadas según la base "El que primero llega primero se atiende". Cuando el motor del navegador termina con el `script`, se encarga del evento `mousemove`, continúa con `setTimeout`, etc.
 
-So far, quite simple, right?
+Hasta ahora bastante simple no?
 
-Two more details:
-1. Rendering never happens while the engine executes a task. Doesn't matter if the task takes a long time. Changes to DOM are painted only after the task is complete.
-2. If a task takes too long, the browser can't do other tasks, process user events, so after a time it raises an alert like "Page Unresponsive" suggesting to kill the task with the whole page. That happens when there are a lot of complex calculations or a programming error leading to infinite loop.
+Dos detalles más:
+1. El renderizado nunca ocurre mientras el motor ejecuta una tarea. No importa si la tarea ocupa mucho tiempo. Solo se realizan cambios a DOM una vez que la tarea finaliza.
+2. Si una tarea consume demasiado tiempo, el navegador puede hacer otras tareas, procesos o eventos por lo que después de un tiempo muestra una alerta "La página no responde" sugiriendo detener la tarea con la página completa. Esto ocurre cuando hay muchos calculos complejos o un error en la programación que lleva a un bucle infinito.
 
-That was a theory. Now let's see how we can apply that knowledge.
+Esa fue la teoría. Ahora veamos como podemos aplicar ese conocimiento.
 
-## Use-case 1: splitting CPU-hungry tasks
+## Caso de uso 1: dividiendo tareas que demandan alto consumo de CPU
 
-Let's say we have a CPU-hungry task.
+Digamos que tenemos una tarea con un alto consumo de CPU.
 
-For example, syntax-highlighting (used to colorize code examples on this page) is quite CPU-heavy. To highlight the code, it performs the analysis, creates many colored elements, adds them to the document -- for a large amount of text that takes a lot of time.
+Por ejemplo, el resaltado de sintaxis (usado para colorear ejemplos de código en esta página) demanda un alto consumo de CPU. Para resaltar el código, realiza el análisis, crea muchos elementos coloreados, los agrega al documento... para una gran cantidad de texto esto lleva mucho tiempo.
 
-While the engine is busy with syntax highlighting, it can't do other DOM-related stuff, process user events, etc. It may even cause the browser to "hiccup" or even "hang" for a bit, which is unacceptable.
+Mientras el motor está ocupado con el resaltado de sintaxis, no puede hacer otras cosas relacionadas a DOM, procesar eventos de usuario, etc. Podría incluso provocar que el navegador se "congele" por un momento, lo que es inaceptable.
 
-We can avoid problems by splitting the big task into pieces. Highlight first 100 lines, then schedule `setTimeout` (with zero-delay) for the next 100 lines, and so on.
+Podemos evitar problemas dividiendo la tarea en piezas más pequeñas. Resaltar primero 100 líneas, después programar `setTimeout` (con cero delay) para las próximas 100 líneas y así sucesivamente.
 
-To demonstrate this approach, for the sake of simplicity, instead of text-highlighting, let's take a function that counts from `1` to `1000000000`.
+Para demostrar este enfoque y en pos de una mayor simplicidad, en lugar de resaltado de texto tomemos una función que cuenta desde `1` hasta `1000000000`.
 
-If you run the code below, the engine will "hang" for some time. For server-side JS that's clearly noticeable, and if you are running it in-browser, then try to click other buttons on the page -- you'll see that no other events get handled until the counting finishes.
+Si ejecutas el código siguiente, el navegador se va a "congelar" por un instante. Para JS desde el lado del servidor esto es claramente notable y si lo ejecutas en el navegador intenta hacer click en otros botones de la página. Verás que ningún otro evento es procesado hasta que termine el conteo.
 
 ```js run
 let i = 0;
@@ -67,7 +66,7 @@ let start = Date.now();
 
 function count() {
 
-  // do a heavy job
+  // realiza una tarea pesada
   for (let j = 0; j < 1e9; j++) {
     i++;
   }
@@ -78,9 +77,9 @@ function count() {
 count();
 ```
 
-The browser may even show a "the script takes too long" warning.
+Puede que incluso se muestre una alerta "Un script en esta página está provocando que el navegador se ejecute con lentitud".
 
-Let's split the job using nested `setTimeout` calls:
+Dividamos la tarea usando llamadas anidadas a `setTimeout`:
 
 ```js run
 let i = 0;
@@ -89,7 +88,7 @@ let start = Date.now();
 
 function count() {
 
-  // do a piece of the heavy job (*)
+  // realiza una parte de la tarea pesada(*)
   do {
     i++;
   } while (i % 1e6 != 0);
@@ -97,7 +96,7 @@ function count() {
   if (i == 1e9) {
     alert("Done in " + (Date.now() - start) + 'ms');
   } else {
-    setTimeout(count); // schedule the new call (**)
+    setTimeout(count); // programa una nueva llamada (**)
   }
 
 }
@@ -105,21 +104,21 @@ function count() {
 count();
 ```
 
-Now the browser interface is fully functional during the "counting" process.
+Ahora la interfaz del navegador es completamente funcional durante el conteo.
 
-A single run of `count` does a part of the job `(*)`, and then re-schedules itself `(**)` if needed:
+Una solo ejecución de `count` realiza parte del trabajo `(*)` y luego se reprograma a sí misma `(**)` si lo necesita:
 
-1. First run counts: `i=1...1000000`.
-2. Second run counts: `i=1000001..2000000`.
-3. ...and so on.
+1. La primer ejecución cuenta: `i=1...1000000`.
+2. La segunda cuenta: `i=1000001..2000000`.
+3. ...y así sucesivamente.
 
-Now, if a new side task (e.g. `onclick` event) appears while the engine is busy executing part 1, it gets queued and then executes when part 1 finished, before the next part. Periodic returns to the event loop between `count` executions provide just enough "air" for the JavaScript engine to do something else, to react to other user actions.
+Ahora, si una tarea secundaria (e.g. el evento `onclick`) aparece mientras el motor está ocupado ejecutando la parte 1, entonces es puesta en lista y ejecutada cuando la parte 1 termina, antes de la siguiente parte. Retornos periodicos al evento ciclo entre ejecuciones de `count` brinda suficiente "aire" al motor de JavaScript para hacer algo más, para reaccionar  a otras acciones del usuario.
 
-The notable thing is that both variants -- with and without splitting the job by `setTimeout` -- are comparable in speed. There's not much difference in the overall counting time.
+Lo notable es que ambas variantes, con y sin división de la tarea haciendo uso de `setTimeout`, son comparables en velocidad. No hay mucha diferencia en el tiempo de conteo general.
 
-To make them closer, let's make an improvement.
+Para acercar aún más los tiempos, hagamos una mejora.
 
-We'll move the scheduling to the beginning of the `count()`:
+Movamos la programación de `setTimeout` al inicio de `count()`:
 
 ```js run
 let i = 0;
@@ -128,9 +127,9 @@ let start = Date.now();
 
 function count() {
 
-  // move the scheduling to the beginning
+  // movemos la programación al principio
   if (i < 1e9 - 1e6) {
-    setTimeout(count); // schedule the new call
+    setTimeout(count); // programamos la nueva llamada
   }
 
   do {
@@ -146,19 +145,19 @@ function count() {
 count();
 ```
 
-Now when we start to `count()` and see that we'll need to `count()` more, we schedule that immediately, before doing the job.
+Ahora cuando iniciamos `count()` y vemos que necesitaremos más `count()`, lo programamos inmediatamente, antes de hacer el trabajo.
 
-If you run it, it's easy to notice that it takes significantly less time.
+Si lo ejecutas, es fácil notar que lleva bastante menos tiempo.
 
-Why?  
+¿Por qué pasa esto?  
 
-That's simple: as you remember, there's the in-browser minimal delay of 4ms for many nested `setTimeout` calls. Even if we set `0`, it's `4ms` (or a bit more). So the earlier we schedule it - the faster it runs.
+Es simple: como recordarás existe un delay mínimo en el navegador de 4ms para varias llamadas anidadas a `setTimeout`. Si configuramos `0`, es `4ms` (o un poco más). Por lo que mientras antes lo programemos más rápido se ejecutará.
 
-Finally, we've split a CPU-hungry task into parts - now it doesn't block the user interface. And its overall execution time isn't much longer.
+Finalmente hemos dividido una tarea con un alto consumo de CPU en partes y ahora no bloquea la interfaz de usuario. Y el tiempo general de ejecución no es mucho mayor.
 
-## Use case 2: progress indication
+## Caso de uso 2: indicación de progreso
 
-Another benefit of splitting heavy tasks for browser scripts is that we can show progress indication.
+Otro beneficio de dividir tareas pesadas para scripts de navegadores es que podemos indicar el progreso.
 
 Usually the browser renders after the currently running code is complete. Doesn't matter if the task takes a long time. Changes to DOM are painted only after the task is finished.
 

From 6206324606fbdef519c19cae20be780c4f809f79 Mon Sep 17 00:00:00 2001
From: nahuelcoder <nahuelbustos0@protonmail.com>
Date: Fri, 21 Aug 2020 12:48:14 -0300
Subject: [PATCH 02/28] Traslation

---
 2-ui/99-ui-misc/03-event-loop/article.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index ca5c368d4..79678ba53 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -159,11 +159,11 @@ Finalmente hemos dividido una tarea con un alto consumo de CPU en partes y ahora
 
 Otro beneficio de dividir tareas pesadas para scripts de navegadores es que podemos indicar el progreso.
 
-Usually the browser renders after the currently running code is complete. Doesn't matter if the task takes a long time. Changes to DOM are painted only after the task is finished.
+Usualmente el navegador renderiza al terminar la ejecución del código que actualmente se está ejecutando. No importa si la tarea conlleva demasiado tiempo. Los cambios a DOM serán aplicados solo cuando la tarea termine.
 
-On one hand, that's great, because our function may create many elements, add them one-by-one to the document and change their styles -- the visitor won't see any "intermediate", unfinished state. An important thing, right?
+Por un lado eso es genial porque nuestra función puede crear muchos elementos, agregarlos de a uno al documento y cambiar sus estilos... el visitante no verá ningún estado intermedio, sin finalizar. Lo cuál es importante no?
 
-Here's the demo, the changes to `i` won't show up until the function finishes, so we'll see only the last value:
+Acá hay una demostración, los cambios a `i` no se mostrarán hasta que la función finalice, por lo que veremos solo el úlimo valor:
 
 
 ```html run
@@ -182,11 +182,11 @@ Here's the demo, the changes to `i` won't show up until the function finishes, s
 </script>
 ```
 
-...But we also may want to show something during the task, e.g. a progress bar.
+... Pero puede que queramos mostrar algo durante la tarea, e.g. una barra de progreso.
 
-If we split the heavy task into pieces using `setTimeout`, then changes are painted out in-between them.
+Si dividimos la tarea más pesada en piezas pequeñas usando `setTimeout`, entonces los cambios son aplicados entre ellos.
 
-This looks prettier:
+Esto se ve mejor:
 
 ```html run
 <div id="progress"></div>
@@ -196,7 +196,7 @@ This looks prettier:
 
   function count() {
 
-    // do a piece of the heavy job (*)
+    // realiza una pieza del trabajo pesado (*)
     do {
       i++;
       progress.innerHTML = i;
@@ -212,7 +212,7 @@ This looks prettier:
 </script>
 ```
 
-Now the `<div>` shows increasing values of `i`, a kind of a progress bar.
+Ahora el `<div>` muestra el incremento en el valor `i`, una especie de barra de progreso.
 
 
 ## Use case 3: doing something after the event

From 528b61059bac5bb98a4d29064cfb12fd8ca7764b Mon Sep 17 00:00:00 2001
From: nahuelcoder <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 11:40:37 -0300
Subject: [PATCH 03/28] Traslation

---
 2-ui/99-ui-misc/03-event-loop/article.md | 113 ++++++++++++-----------
 1 file changed, 57 insertions(+), 56 deletions(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 79678ba53..3b784320f 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -1,14 +1,14 @@
-# Evento ciclo: microtareas y macrotareas
+# Loop de eventos: microtareas y macrotareas
 
-El flujo de ejecución de JavaScript en el navegador, así como en Node.js, está basado en un *event loop* (evento ciclo).
+El flujo de ejecución de JavaScript en el navegador, así como en Node.js, está basado en un *event loop* (loop de eventos).
 
-Entender como este evento ciclo funciona es importante para optimizaciones y en algunos casos para la arquitecura correcta.
+Entender como este loop de eventos funciona es importante para optimizaciones y en algunos casos para utilizar la arquitectura correcta.
 
 En este capítulo primero vamos a ver detalles teóricos acerca de como funcionan las cosas y luego veremos aplicaciones prácticas de ese conocimiento.
 
-## Evento Ciclo
+## Loop de eventos
 
-El concepto de *evento ciclo* es muy simple. Existe un ciclo infinito en el que el motor de JavaScript aguarda por una tarea, luego ejecuta la tarea requerida y finalmente vuelve a dormir esperando por una nueva tarea.
+El concepto de *loop de eventos* es muy simple. Existe un ciclo infinito en el que el motor de JavaScript aguarda por una tarea, luego ejecuta la tarea requerida y finalmente vuelve a dormir esperando por una nueva tarea.
 
 EL algoritmo general del motor:
 
@@ -16,26 +16,26 @@ EL algoritmo general del motor:
     - ejecutarlas comenzando por la más antigua.
 2. Dormir hasta que aparezca una tarea, luego volver a 1.
 
-Eso es una formalización de lo que vemos cuando navegamos por una página. El motor JavaScript no hace nada la mayoría del tiempo y solo corre cuando un script/handler/evento se activa.
+Eso es una formalización de lo que vemos cuando navegamos por una página. El motor JavaScript no hace nada la mayoría del tiempo y solo corre cuando un script/controlador/evento se activa.
 
 Ejemplos de tareas:
 
 - Cuando un script externo `<script src="...">` se carga, la tarea es ejecutarlo.
-- Cuando un usuario mueve el mouse, la tarea es enviar el evento `mousemove` y ejecutar handlers.
+- Cuando un usuario mueve el mouse, la tarea es enviar el evento `mousemove` y ejecutar el controlador.
 - Cuando llega el momento de un `setTimeout` progrmamado, la tarea es ejecutar su callback.
 - ... y así sucesivamente.
 
 Las tareas son programadas --> el motor las ejecuta --> aguarda por más tareas (mientras duerme y prácticamente no consume CPU).
 
-Puede ocurrir que una tarea llegue mientras el motor está ocupado, entonces es puesta en lista.
+Puede ocurrir que una tarea llegue mientras el motor está ocupado, entonces es puesta en cola.
 
-Las tareas de una lista, también llamada "Lista de macrotarea" (Término de v8):
+Las tareas de una cola, también llamada "Cola de macrotarea" (Término de v8):
 
 ![](eventLoop.svg)
 
-Por ejemplo, mientras el motor está ocupado ejecutando un `script`, un usuario podría mover su mouse causando `mousemove` o también podría ser `setTimeout`, etc. Todas estas tareas forman una fila como se observa en la imagen arriba.
+Por ejemplo, mientras el motor está ocupado ejecutando un `script`, un usuario podría mover su mouse causando `mousemove` o también podría ser `setTimeout`, etc. Todas estas tareas forman una cola como se observa en la imagen arriba.
 
-Las tareas de la fila son ejecutadas según la base "El que primero llega primero se atiende". Cuando el motor del navegador termina con el `script`, se encarga del evento `mousemove`, continúa con `setTimeout`, etc.
+Las tareas de la cola son ejecutadas según la base "El que primero llega primero se atiende". Cuando el motor del navegador termina con el `script`, se encarga del evento `mousemove`, continúa con `setTimeout`, etc.
 
 Hasta ahora bastante simple no?
 
@@ -184,7 +184,7 @@ Acá hay una demostración, los cambios a `i` no se mostrarán hasta que la func
 
 ... Pero puede que queramos mostrar algo durante la tarea, e.g. una barra de progreso.
 
-Si dividimos la tarea más pesada en piezas pequeñas usando `setTimeout`, entonces los cambios son aplicados entre ellos.
+Si dividimos la tarea más pesada en partes más pequeñas usando `setTimeout`, entonces los cambios son aplicados entre ellos.
 
 Esto se ve mejor:
 
@@ -196,7 +196,7 @@ Esto se ve mejor:
 
   function count() {
 
-    // realiza una pieza del trabajo pesado (*)
+    // realiza una parte del trabajo pesado (*)
     do {
       i++;
       progress.innerHTML = i;
@@ -215,37 +215,37 @@ Esto se ve mejor:
 Ahora el `<div>` muestra el incremento en el valor `i`, una especie de barra de progreso.
 
 
-## Use case 3: doing something after the event
+## Caso de uso 3: hacer algo después del evento
 
-In an event handler we may decide to postpone some actions until the event bubbled up and was handled on all levels. We can do that by wrapping the code in zero delay `setTimeout`.
+En un controlador de evento nosotros podemos decidir posponer alguna acción hasta que el evento aparezca y sea controlado en todos los niveles. Podemos hacer esto envolviendo el código en delay cero `setTimeout`.
 
-In the chapter <info:dispatch-events> we saw an example: custom event `menu-open` is dispatched in `setTimeout`, so that it happens after the "click" event is fully handled.
+En el capítulo <info:dispatch-events> vimos un ejemplo: el evento personalizado `menu-open` es distribuído en `setTimeout`, de modo que ocurre después de que el evento "click" se maneja por completo.
 
 ```js
 menu.onclick = function() {
   // ...
 
-  // create a custom event with the clicked menu item data
+  // crea un evento personalizado con los datos del elemento de menú en el que se hizo clic
   let customEvent = new CustomEvent("menu-open", {
     bubbles: true
   });
 
-  // dispatch the custom event asynchronously
+  // envia el evento personalizado de forma asincrónica
   setTimeout(() => menu.dispatchEvent(customEvent));
 };
 ```
 
-## Macrotasks and Microtasks
+## Macrotareas y Microtareas
 
-Along with *macrotasks*, described in this chapter, there exist *microtasks*, mentioned in the chapter <info:microtask-queue>.
+Junto con las *macrotareas* descriptas en este capítulo, existen *microtareas* mencionadas en el capítulo <info:microtask-queue>.
 
-Microtasks come solely from our code. They are usually created by promises: an execution of `.then/catch/finally` handler becomes a microtask. Microtasks are used "under the cover" of `await` as well, as it's another form of promise handling.
+Las microtareas provienen únicamente de nuestro código. Por lo general, se crean mediante promesas: una ejecución del controlador `.then / catch / finally` se convierte en una microtarea. Las microtareas también se utilizan "bajo la cubierta" de "await", ya que es otra forma de manejo de promesas.
 
-There's also a special function `queueMicrotask(func)` that queues `func` for execution in the microtask queue.
+Existe también una función especial `queueMicrotask(func)` que pone en fila `func` para ejecutarla en la cola.
 
-**Immediately after every *macrotask*, the engine executes all tasks from *microtask* queue, prior to running any other macrotasks or rendering or anything else.**
+**Inmediatamente después de cada *macrotarea*, el motor ejecuta todas las tareas desde la cola de *microtareas*, antes de ejecutar cualquier otra macrotarea o renderización o cualquier otra cosa.**
 
-For instance, take a look:
+Por ejemplo:
 
 ```js run
 setTimeout(() => alert("timeout"));
@@ -256,23 +256,24 @@ Promise.resolve()
 alert("code");
 ```
 
-What's going to be the order here?
+¿Cúal será el orden en este caso?
 
-1. `code` shows first, because it's a regular synchronous call.
-2. `promise` shows second, because `.then` passes through the microtask queue, and runs after the current code.
-3. `timeout` shows last, because it's a macrotask.
+1. `code` se muestra primero porque es una llamada sincrónica regular.
+2. `promise` aparece segundo, porque `.then` pasa a través de la cola de microtareas y se ejecuta después del código actual.
+3. `timeout` aparece última, porque es una macrotarea.
+
+La imagen del loop de eventos completa se ve así (el orden es de arriba a abajo, es decir: primero el script, luego las microtareas, el renderizado, etc.):
 
-The richer event loop picture looks like this (order is from top to bottom, that is: the script first, then microtasks, rendering and so on):
 
 ![](eventLoop-full.svg)
 
-All microtasks are completed before any other event handling or rendering or any other macrotask takes place.
+Todas las microtareas se completan antes de que se lleve a cabo cualquier otro manejo o renderizado o cualquier otra macrotarea.
 
-That's important, as it guarantees that the application environment is basically the same (no mouse coordinate changes, no new network data, etc) between microtasks.
+Eso es importante, ya que garantiza que el entorno de la aplicación es básicamente el mismo (sin cambios de coordenadas del mouse, sin nuevos datos de red, etc.) entre las microtareas.
 
-If we'd like to execute a function asynchronously (after the current code), but before changes are rendered or new events handled, we can schedule it with `queueMicrotask`.
+Si quisiéramos ejecutar una función de forma asíncrónica (después del código actual), pero antes de que se procesen los cambios o se manejen nuevos eventos, podemos programarla con `queueMicrotask`.
 
-Here's an example with "counting progress bar", similar to the one shown previously, but `queueMicrotask` is used instead of `setTimeout`. You can see that it renders at the very end. Just like the synchronous code:
+Aquí hay un ejemplo con la "barra de progreso de conteo", similar al que se mostró anteriormente, pero se usa `queueMicrotask` en lugar de` setTimeout`. Puedes ver que se renderiza al final. Al igual que el código sincrónico:
 
 ```html run
 <div id="progress"></div>
@@ -282,7 +283,7 @@ Here's an example with "counting progress bar", similar to the one shown previou
 
   function count() {
 
-    // do a piece of the heavy job (*)
+    // realiza una parte del trabajo pesado (*)
     do {
       i++;
       progress.innerHTML = i;
@@ -300,39 +301,39 @@ Here's an example with "counting progress bar", similar to the one shown previou
 </script>
 ```
 
-## Summary
+## Resumen
 
-The more detailed algorithm of the event loop (though still simplified compare to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
+El algoritmo más detallado del loop de eventos (aunque aún simplificado en comparación con el [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
 
-1. Dequeue and run the oldest task from the *macrotask* queue (e.g. "script").
-2. Execute all *microtasks*:
-    - While the microtask queue is not empty:
-        - Dequeue and run the oldest microtask.
-3. Render changes if any.
-4. If the macrotask queue is empty, wait till a macrotask appears.
-5. Go to step 1.
+1. Retirar de la cola y ejecutar la tarea más antigua de la cola *macrotareas* (por ejemplo, "script").
+2. Ejecutar todas las *microtasks*:
+     - Mientras la cola de microtareas no esté vacía:
+         - Retirar de la cola y ejecutar la microtarea más antigua.
+3. Rendericar los cambios si los hubiera.
+4. Si la cola de macrotareas está vacía, esperar hasta que aparezca una macrotarea.
+5. Ejecutar el paso 1.
 
-To schedule a new *macrotask*:
-- Use zero delayed `setTimeout(f)`.
+Para programar una nueva *macrotarea*:
+- Usar `setTimeout(f)` con cero delay.
 
-That may be used to split a big calculation-heavy task into pieces, for the browser to be able to react on user events and show progress between them.
+Eso puede usarse para dividir una gran tarea de cálculo en partes, para que el navegador pueda reaccionar a los eventos del usuario y mostrar el progreso entre ellos.
 
-Also, used in event handlers to schedule an action after the event is fully handled (bubbling done).
+Además, se utiliza en los controladores de eventos para programar una acción después de que el evento se haya manejado por completo.
 
-To schedule a new *microtask*
-- Use `queueMicrotask(f)`.
-- Also promise handlers go through the microtask queue.
+Para programar una nueva *microtarea*
+- Usar `queueMicrotask(f)`.
+- También realizar una promesa para que los controladores pasen por la cola de microtask.
 
-There's no UI or network event handling between microtasks: they run immediately one after another.
+No hay gestión de eventos de red o de UI entre las microtareas: se ejecutan inmediatamente una tras otra.
 
-So one may want to `queueMicrotask` to execute a function asynchronously, but within the environment state.
+Por lo tanto, es posible que desee `queueMicrotask` para ejecutar una función de forma asincrónica, pero dentro del estado del entorno.
 
 ```smart header="Web Workers"
-For long heavy calculations that shouldn't block the event loop, we can use [Web Workers](https://html.spec.whatwg.org/multipage/workers.html).
+Para cálculos largos y pesados que no deberían bloquear el ciclo de eventos, podemos usar [Web Workers](https://html.spec.whatwg.org/multipage/workers.html).
 
-That's a way to run code in another, parallel thread.
+Esa es una forma de ejecutar código en otro hilo paralelo.
 
-Web Workers can exchange messages with the main process, but they have their own variables, and their own event loop.
+Los Web Workers pueden intercambiar mensajes con el proceso principal, pero tienen sus propias variables y su propio loop de eventos.
 
-Web Workers do not have access to DOM, so they are useful, mainly, for calculations, to use multiple CPU cores simultaneously.
+Los Web Workers no tienen acceso a DOM, por lo que son útiles, principalmente, para los cálculos, para utilizar varios núcleos de CPU simultáneamente.
 ```

From b5c60c171ea9c0335c0ac87df09996eaf6b893c1 Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Mon, 24 Aug 2020 12:17:07 -0300
Subject: [PATCH 04/28] Update article.md

---
 2-ui/99-ui-misc/03-event-loop/article.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 3b784320f..4a97a1d8e 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -1,3 +1,4 @@
+
 # Loop de eventos: microtareas y macrotareas
 
 El flujo de ejecución de JavaScript en el navegador, así como en Node.js, está basado en un *event loop* (loop de eventos).

From 57548ba9a9f0b76300601faf33cefa152c57992a Mon Sep 17 00:00:00 2001
From: joaquinelio <joaquinelio@gmail.com>
Date: Mon, 24 Aug 2020 12:20:45 -0300
Subject: [PATCH 05/28] Update article.md

---
 2-ui/99-ui-misc/03-event-loop/article.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 4a97a1d8e..c6df8b333 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -265,7 +265,6 @@ alert("code");
 
 La imagen del loop de eventos completa se ve así (el orden es de arriba a abajo, es decir: primero el script, luego las microtareas, el renderizado, etc.):
 
-
 ![](eventLoop-full.svg)
 
 Todas las microtareas se completan antes de que se lleve a cabo cualquier otro manejo o renderizado o cualquier otra macrotarea.

From 4b20c58bd2ab390e332a939a679013679753ef32 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:21:31 -0300
Subject: [PATCH 06/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index c6df8b333..165ae9be0 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -5,7 +5,7 @@ El flujo de ejecución de JavaScript en el navegador, así como en Node.js, est
 
 Entender como este loop de eventos funciona es importante para optimizaciones y en algunos casos para utilizar la arquitectura correcta.
 
-En este capítulo primero vamos a ver detalles teóricos acerca de como funcionan las cosas y luego veremos aplicaciones prácticas de ese conocimiento.
+En este capítulo primero vamos a ver detalles teóricos acerca de cómo funcionan las cosas y luego veremos aplicaciones prácticas de ese conocimiento.
 
 ## Loop de eventos
 

From 341261b45ea3b86ca25bca540f0f9bc04b79b8d2 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:21:45 -0300
Subject: [PATCH 07/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 165ae9be0..1714ed575 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -30,7 +30,7 @@ Las tareas son programadas --> el motor las ejecuta --> aguarda por más tareas
 
 Puede ocurrir que una tarea llegue mientras el motor está ocupado, entonces es puesta en cola.
 
-Las tareas de una cola, también llamada "Cola de macrotarea" (Término de v8):
+Las tareas forman una cola, también llamada "Cola de macrotarea" (Término de v8):
 
 ![](eventLoop.svg)
 

From 085344af0e8e0d3f5741faac3528c4c6799703af Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:21:54 -0300
Subject: [PATCH 08/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 1714ed575..c014c7882 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -38,7 +38,7 @@ Por ejemplo, mientras el motor está ocupado ejecutando un `script`, un usuario
 
 Las tareas de la cola son ejecutadas según la base "El que primero llega primero se atiende". Cuando el motor del navegador termina con el `script`, se encarga del evento `mousemove`, continúa con `setTimeout`, etc.
 
-Hasta ahora bastante simple no?
+Hasta ahora bastante simple, ¿no?
 
 Dos detalles más:
 1. El renderizado nunca ocurre mientras el motor ejecuta una tarea. No importa si la tarea ocupa mucho tiempo. Solo se realizan cambios a DOM una vez que la tarea finaliza.

From c4caff7d28554a81757867c5fc376c969f519494 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:22:27 -0300
Subject: [PATCH 09/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index c014c7882..26c6dc223 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -42,7 +42,7 @@ Hasta ahora bastante simple, ¿no?
 
 Dos detalles más:
 1. El renderizado nunca ocurre mientras el motor ejecuta una tarea. No importa si la tarea ocupa mucho tiempo. Solo se realizan cambios a DOM una vez que la tarea finaliza.
-2. Si una tarea consume demasiado tiempo, el navegador puede hacer otras tareas, procesos o eventos por lo que después de un tiempo muestra una alerta "La página no responde" sugiriendo detener la tarea con la página completa. Esto ocurre cuando hay muchos calculos complejos o un error en la programación que lleva a un bucle infinito.
+2. Si una tarea consume demasiado tiempo, el navegador no puede hacer otras tareas, procesos o eventos por lo que después de un tiempo muestra una alerta "La página no responde" sugiriendo detener la tarea con la página completa. Esto ocurre cuando hay muchos cálculos complejos o un error en la programación que lleva a un bucle infinito.
 
 Esa fue la teoría. Ahora veamos como podemos aplicar ese conocimiento.
 

From 0aacae678cb2342221a95a6ee8168e5ebb9506bb Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:23:34 -0300
Subject: [PATCH 10/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 26c6dc223..0bc4ccca2 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -78,7 +78,7 @@ function count() {
 count();
 ```
 
-Puede que incluso se muestre una alerta "Un script en esta página está provocando que el navegador se ejecute con lentitud".
+Puede que incluso se muestre una advertencia: "Un script en esta página está provocando que el navegador se ejecute con lentitud".
 
 Dividamos la tarea usando llamadas anidadas a `setTimeout`:
 

From 22a01d9e12b513dbad3702e5c1b5f27294943d34 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:23:43 -0300
Subject: [PATCH 11/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 0bc4ccca2..9e829a6f6 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -314,7 +314,7 @@ El algoritmo más detallado del loop de eventos (aunque aún simplificado en com
 5. Ejecutar el paso 1.
 
 Para programar una nueva *macrotarea*:
-- Usar `setTimeout(f)` con cero delay.
+- Usar `setTimeout(f)` con un retraso de cero.
 
 Eso puede usarse para dividir una gran tarea de cálculo en partes, para que el navegador pueda reaccionar a los eventos del usuario y mostrar el progreso entre ellos.
 

From 35d6998c04aba0358636f3a604aeffe66cd0b55d Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:23:55 -0300
Subject: [PATCH 12/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 9e829a6f6..a121baa2d 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -306,7 +306,7 @@ Aquí hay un ejemplo con la "barra de progreso de conteo", similar al que se mos
 El algoritmo más detallado del loop de eventos (aunque aún simplificado en comparación con el [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
 
 1. Retirar de la cola y ejecutar la tarea más antigua de la cola *macrotareas* (por ejemplo, "script").
-2. Ejecutar todas las *microtasks*:
+2. Ejecutar todas las *microtareas*:
      - Mientras la cola de microtareas no esté vacía:
          - Retirar de la cola y ejecutar la microtarea más antigua.
 3. Rendericar los cambios si los hubiera.

From 6296716809874685201812f5e2f2b1f7ea783ac5 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:24:13 -0300
Subject: [PATCH 13/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index a121baa2d..3f5fbd204 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -322,7 +322,7 @@ Además, se utiliza en los controladores de eventos para programar una acción d
 
 Para programar una nueva *microtarea*
 - Usar `queueMicrotask(f)`.
-- También realizar una promesa para que los controladores pasen por la cola de microtask.
+- También se usan promesas para que los controladores pasen por la cola de microtareas.
 
 No hay gestión de eventos de red o de UI entre las microtareas: se ejecutan inmediatamente una tras otra.
 

From b31143acac17294308429909332840fd4f55c808 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:27:05 -0300
Subject: [PATCH 14/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 3f5fbd204..8c442e5eb 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -335,5 +335,5 @@ Esa es una forma de ejecutar código en otro hilo paralelo.
 
 Los Web Workers pueden intercambiar mensajes con el proceso principal, pero tienen sus propias variables y su propio loop de eventos.
 
-Los Web Workers no tienen acceso a DOM, por lo que son útiles, principalmente, para los cálculos, para utilizar varios núcleos de CPU simultáneamente.
+Los Web Workers no tienen acceso a DOM, por lo que son útiles principalmente para cálculos, para utilizar varios núcleos de CPU simultáneamente.
 ```

From 5614d299205cd3486f7e6c4aeea6bd36e46836e9 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:28:03 -0300
Subject: [PATCH 15/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 8c442e5eb..cdaac6536 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -113,7 +113,7 @@ Una solo ejecución de `count` realiza parte del trabajo `(*)` y luego se reprog
 2. La segunda cuenta: `i=1000001..2000000`.
 3. ...y así sucesivamente.
 
-Ahora, si una tarea secundaria (e.g. el evento `onclick`) aparece mientras el motor está ocupado ejecutando la parte 1, entonces es puesta en lista y ejecutada cuando la parte 1 termina, antes de la siguiente parte. Retornos periodicos al evento ciclo entre ejecuciones de `count` brinda suficiente "aire" al motor de JavaScript para hacer algo más, para reaccionar  a otras acciones del usuario.
+Ahora, si una tarea secundaria (por ejemplo el evento `onclick`) aparece mientras el motor está ocupado ejecutando la parte 1, entonces es puesta en lista y ejecutada cuando la parte 1 termina, antes de la siguiente parte. Retornos periódicos al ciclo de eventos entre ejecuciones de `count` brinda suficiente "aire" al motor de JavaScript para hacer algo más, para reaccionar a otras acciones del usuario.
 
 Lo notable es que ambas variantes, con y sin división de la tarea haciendo uso de `setTimeout`, son comparables en velocidad. No hay mucha diferencia en el tiempo de conteo general.
 

From 70307f869f911c06f57b0ae47dda7c973301a9cc Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:28:21 -0300
Subject: [PATCH 16/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index cdaac6536..f45b3833d 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -152,7 +152,7 @@ Si lo ejecutas, es fácil notar que lleva bastante menos tiempo.
 
 ¿Por qué pasa esto?  
 
-Es simple: como recordarás existe un delay mínimo en el navegador de 4ms para varias llamadas anidadas a `setTimeout`. Si configuramos `0`, es `4ms` (o un poco más). Por lo que mientras antes lo programemos más rápido se ejecutará.
+Es simple: como recordarás existe un retraso mínimo en el navegador de 4ms para varias llamadas anidadas a `setTimeout`. Si configuramos `0`, es `4ms` (o un poco más). Por lo que mientras antes lo programemos más rápido se ejecutará.
 
 Finalmente hemos dividido una tarea con un alto consumo de CPU en partes y ahora no bloquea la interfaz de usuario. Y el tiempo general de ejecución no es mucho mayor.
 

From c6554dd461b086c0e095f8f66fdf140a5fae7ff6 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:28:32 -0300
Subject: [PATCH 17/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index f45b3833d..cefa2b1a2 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -160,7 +160,7 @@ Finalmente hemos dividido una tarea con un alto consumo de CPU en partes y ahora
 
 Otro beneficio de dividir tareas pesadas para scripts de navegadores es que podemos indicar el progreso.
 
-Usualmente el navegador renderiza al terminar la ejecución del código que actualmente se está ejecutando. No importa si la tarea conlleva demasiado tiempo. Los cambios a DOM serán aplicados solo cuando la tarea termine.
+Usualmente el navegador renderiza al terminar la ejecución del código que actualmente se está ejecutando. No importa si la tarea lleva demasiado tiempo. Los cambios a DOM serán aplicados solo cuando la tarea termine.
 
 Por un lado eso es genial porque nuestra función puede crear muchos elementos, agregarlos de a uno al documento y cambiar sus estilos... el visitante no verá ningún estado intermedio, sin finalizar. Lo cuál es importante no?
 

From f9ed8551ea9039b21cc2b0e05178d944825c9e7c Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:28:47 -0300
Subject: [PATCH 18/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index cefa2b1a2..4cb8b17a0 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -162,7 +162,7 @@ Otro beneficio de dividir tareas pesadas para scripts de navegadores es que pode
 
 Usualmente el navegador renderiza al terminar la ejecución del código que actualmente se está ejecutando. No importa si la tarea lleva demasiado tiempo. Los cambios a DOM serán aplicados solo cuando la tarea termine.
 
-Por un lado eso es genial porque nuestra función puede crear muchos elementos, agregarlos de a uno al documento y cambiar sus estilos... el visitante no verá ningún estado intermedio, sin finalizar. Lo cuál es importante no?
+Por un lado eso es genial porque nuestra función puede crear muchos elementos, agregarlos de a uno al documento y cambiar sus estilos... el visitante no verá ningún estado intermedio, sin finalizar. Lo cuál es importante, ¿no?
 
 Acá hay una demostración, los cambios a `i` no se mostrarán hasta que la función finalice, por lo que veremos solo el úlimo valor:
 

From a10a455f6c5eb3012cd959741883e15e9af7adee Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:29:01 -0300
Subject: [PATCH 19/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 4cb8b17a0..b4d38cd7f 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -183,7 +183,7 @@ Acá hay una demostración, los cambios a `i` no se mostrarán hasta que la func
 </script>
 ```
 
-... Pero puede que queramos mostrar algo durante la tarea, e.g. una barra de progreso.
+... Pero puede que queramos mostrar algo durante la tarea, por ejemplo una barra de progreso.
 
 Si dividimos la tarea más pesada en partes más pequeñas usando `setTimeout`, entonces los cambios son aplicados entre ellos.
 

From f36184b0a27b477060af777451f98908ae0bb9a3 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:29:19 -0300
Subject: [PATCH 20/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index b4d38cd7f..e78779bdd 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -218,7 +218,7 @@ Ahora el `<div>` muestra el incremento en el valor `i`, una especie de barra de
 
 ## Caso de uso 3: hacer algo después del evento
 
-En un controlador de evento nosotros podemos decidir posponer alguna acción hasta que el evento aparezca y sea controlado en todos los niveles. Podemos hacer esto envolviendo el código en delay cero `setTimeout`.
+En un controlador de evento nosotros podemos decidir posponer alguna acción hasta que el evento aparezca y sea controlado en todos los niveles. Podemos hacer esto envolviendo el código en un `setTimeout` con retraso cero.
 
 En el capítulo <info:dispatch-events> vimos un ejemplo: el evento personalizado `menu-open` es distribuído en `setTimeout`, de modo que ocurre después de que el evento "click" se maneja por completo.
 

From 8029cad8038d8ab70b38614cb6a6826e9998a58b Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:29:38 -0300
Subject: [PATCH 21/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index e78779bdd..f3fe95dbf 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -242,7 +242,7 @@ Junto con las *macrotareas* descriptas en este capítulo, existen *microtareas*
 
 Las microtareas provienen únicamente de nuestro código. Por lo general, se crean mediante promesas: una ejecución del controlador `.then / catch / finally` se convierte en una microtarea. Las microtareas también se utilizan "bajo la cubierta" de "await", ya que es otra forma de manejo de promesas.
 
-Existe también una función especial `queueMicrotask(func)` que pone en fila `func` para ejecutarla en la cola.
+Existe también una función especial `queueMicrotask(func)` que pone a `func` en la cola de microtareas.
 
 **Inmediatamente después de cada *macrotarea*, el motor ejecuta todas las tareas desde la cola de *microtareas*, antes de ejecutar cualquier otra macrotarea o renderización o cualquier otra cosa.**
 

From b0791fa7ed7e493b3efdc27fe0d6a61374258fe2 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:29:55 -0300
Subject: [PATCH 22/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index f3fe95dbf..d51fd17af 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -303,7 +303,7 @@ Aquí hay un ejemplo con la "barra de progreso de conteo", similar al que se mos
 
 ## Resumen
 
-El algoritmo más detallado del loop de eventos (aunque aún simplificado en comparación con el [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
+El algoritmo más detallado del loop de eventos (aunque aún simplificado en comparación con la [especificación](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
 
 1. Retirar de la cola y ejecutar la tarea más antigua de la cola *macrotareas* (por ejemplo, "script").
 2. Ejecutar todas las *microtareas*:

From ae3991337858a6f18424aae645fb18b0a66573b5 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Mon, 24 Aug 2020 14:30:22 -0300
Subject: [PATCH 23/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: joaquinelio <joaquinelio@gmail.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index d51fd17af..f7113d141 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -333,7 +333,7 @@ Para cálculos largos y pesados que no deberían bloquear el ciclo de eventos, p
 
 Esa es una forma de ejecutar código en otro hilo paralelo.
 
-Los Web Workers pueden intercambiar mensajes con el proceso principal, pero tienen sus propias variables y su propio loop de eventos.
+Los Web Workers pueden intercambiar mensajes con el proceso principal, pero tienen sus propias variables y su propio ciclo de eventos.
 
 Los Web Workers no tienen acceso a DOM, por lo que son útiles principalmente para cálculos, para utilizar varios núcleos de CPU simultáneamente.
 ```

From dfb402ef4c8dace719c704f0bd5481593b5874de Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Thu, 27 Aug 2020 21:53:18 -0300
Subject: [PATCH 24/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index f7113d141..e59a2e584 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -9,7 +9,7 @@ En este capítulo primero vamos a ver detalles teóricos acerca de cómo funcion
 
 ## Loop de eventos
 
-El concepto de *loop de eventos* es muy simple. Existe un ciclo infinito en el que el motor de JavaScript aguarda por una tarea, luego ejecuta la tarea requerida y finalmente vuelve a dormir esperando por una nueva tarea.
+El concepto de *loop de eventos* es muy simple. Existe un ciclo infinito en el que el motor de JavaScript espera por una tarea, luego ejecuta la tarea requerida y finalmente vuelve a dormir esperando por una nueva tarea.
 
 EL algoritmo general del motor:
 

From 9c41276b7f3d27f57cd7f36710134b1c0655a8ef Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Thu, 27 Aug 2020 21:53:33 -0300
Subject: [PATCH 25/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index e59a2e584..a31bd2c64 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -23,7 +23,7 @@ Ejemplos de tareas:
 
 - Cuando un script externo `<script src="...">` se carga, la tarea es ejecutarlo.
 - Cuando un usuario mueve el mouse, la tarea es enviar el evento `mousemove` y ejecutar el controlador.
-- Cuando llega el momento de un `setTimeout` progrmamado, la tarea es ejecutar su callback.
+- Cuando llega el momento de un `setTimeout` programado, la tarea es ejecutar su callback.
 - ... y así sucesivamente.
 
 Las tareas son programadas --> el motor las ejecuta --> aguarda por más tareas (mientras duerme y prácticamente no consume CPU).

From 67595bc7b0b4eaa938fdde67baa97850a1ec86d8 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Thu, 27 Aug 2020 21:54:06 -0300
Subject: [PATCH 26/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index a31bd2c64..fa2b24be5 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -26,7 +26,7 @@ Ejemplos de tareas:
 - Cuando llega el momento de un `setTimeout` programado, la tarea es ejecutar su callback.
 - ... y así sucesivamente.
 
-Las tareas son programadas --> el motor las ejecuta --> aguarda por más tareas (mientras duerme y prácticamente no consume CPU).
+Las tareas son programadas --&gt; el motor las ejecuta --&gt; <span class="x x-first x-last">espera</span> por más tareas (mientras duerme y prácticamente no consume CPU).
 
 Puede ocurrir que una tarea llegue mientras el motor está ocupado, entonces es puesta en cola.
 

From 4e4110bdc2a0d79bef69af4f1219f0853df266ba Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Thu, 27 Aug 2020 21:57:01 -0300
Subject: [PATCH 27/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index fa2b24be5..27235e90c 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -238,7 +238,7 @@ menu.onclick = function() {
 
 ## Macrotareas y Microtareas
 
-Junto con las *macrotareas* descriptas en este capítulo, existen *microtareas* mencionadas en el capítulo <info:microtask-queue>.
+Junto con las *macrotareas* descritas en este capítulo, existen *microtareas* mencionadas en el capítulo <info:microtask-queue>.
 
 Las microtareas provienen únicamente de nuestro código. Por lo general, se crean mediante promesas: una ejecución del controlador `.then / catch / finally` se convierte en una microtarea. Las microtareas también se utilizan "bajo la cubierta" de "await", ya que es otra forma de manejo de promesas.
 

From 89f08aaef8f8a8e43c86961b2f92d0d83534d8a2 Mon Sep 17 00:00:00 2001
From: Nahuel Bustos <nahuelbustos0@protonmail.com>
Date: Thu, 27 Aug 2020 21:57:10 -0300
Subject: [PATCH 28/28] Update 2-ui/99-ui-misc/03-event-loop/article.md

Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com>
---
 2-ui/99-ui-misc/03-event-loop/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 27235e90c..5689c457b 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -309,7 +309,7 @@ El algoritmo más detallado del loop de eventos (aunque aún simplificado en com
 2. Ejecutar todas las *microtareas*:
      - Mientras la cola de microtareas no esté vacía:
          - Retirar de la cola y ejecutar la microtarea más antigua.
-3. Rendericar los cambios si los hubiera.
+3. Renderizar los cambios si los hubiera.
 4. Si la cola de macrotareas está vacía, esperar hasta que aparezca una macrotarea.
 5. Ejecutar el paso 1.