sync27Agosto

1-js/01-getting-started/1-intro/article.md

@@ -113,6 +113,7 @@ Ejemplos de tales lenguajes:
 - [TypeScript](http://www.typescriptlang.org/) se concentra en agregar "tipado estricto" ("strict data typing") para simplificar el desarrollo y soporte de sistemas complejos. Es desarrollado por Microsoft.
 -[FLow](https://flow.org/) también agrega la escritura de datos, pero de una manera diferente. Desarrollado por Facebook.
 - [Dart](https://www.dartlang.org/) es un lenguaje independiente que tiene su propio motor que se ejecuta en entornos que no son de navegador (como aplicaciones móviles), pero que también se puede convertir/transpilar a JavaScript. Desarrollado por Google.
+- [Brython](https://brython.info/) es un transpilador de Python a JavaScript que permite escribir aplicaciones en Python puro sin JavaScript.
 
 Hay mas. Por supuesto, incluso si nosotros usamos alguno de estos lenguajes, deberíamos conocer también JavaScript para realmente entender qué estamos haciendo.
 

1-js/02-first-steps/11-logical-operators/article.md

@@ -1,6 +1,6 @@
 # Operadores Lógicos
 
-Hay tres operadores lógicos en JavaScript: `||` (OR (O)), `&&` (AND (Y)), `!` (NOT (NO)).
+Hay tres operadores lógicos en JavaScript: `||` (O), `&&` (Y), `!` (NO).
 
 Aunque sean llamados lógicos, pueden ser aplicados a valores de cualquier tipo, no solo booleanos. El resultado también puede ser de cualquier tipo.
 
@@ -39,7 +39,7 @@ if (1 || 0) { // Funciona como if( true || false )
 }
 ```
 
-La mayoría de las veces, OR `||` es usado en una declaración `if` para probar si *cualquiera* de las condiciones dadas es `true`.
+La mayoría de las veces, OR `||` es usado en una declaración `if` para probar si *alguna* de las condiciones dadas es `true`.
 
 Por ejemplo:
 
@@ -64,7 +64,7 @@ if (hour < 10 || hour > 18 || isWeekend) {
 }
 ```
 
-## OR encuentra el primer valor verdadero
+## OR "||" encuentra el primer valor verdadero
 
 La lógica descrita arriba es algo clásica. Ahora, mostremos las características "extra" de JavaScript.
 
@@ -90,75 +90,61 @@ Por ejemplo:
 
 ```js run
 alert(1 || 0); // 1 (1 es un valor verdado)
-alert(true || "cualquier valor"); // (true es un valor verdadero)
 
 alert(null || 1); // 1 (1 es el primer valor verdadero)
 alert(null || 0 || 1); // 1 (el primer valor verdadero)
+
 alert(undefined || null || 0); // 0 (todos son valores falsos, retorna el último valor)
 ```
 
 Esto brinda varios usos interesantes comparados al "OR puro, clásico, de solo booleanos".
 
-1. **Consiguiendo el primer valor verdadero de una lista de variables o expresiones.**
+1. **Obtener el primer valor verdadero de una lista de variables o expresiones.**
 
-   Imagina que tenemos múltiples variables que pueden contener datos o bien ser `null/undefined`. ¿Cómo podemos encontrar el primer valor que contenga datos?
+   Por ejemplo, tenemos las variables `firstName`, `lastName` y `nickName`, todas opcionales.
 
-   Podemos usar OR `||`:
+   Usemos OR `||` para elegir el que tiene los datos y mostrarlo (o anónimo si no hay nada configurado):
 
    ```js run
-   let currentUser = null;
-   let defaultUser = "John";
+   let firstName = "";
+   let lastName = "";
+   let nickName = "SuperCoder";
 
    *!*
-   let name = currentUser || defaultUser || "sin nombre";
+   alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder
    */!*
-
-   alert( name ); // selecciona "John" – el primer valor verdadero
    ```
 
-   Si tanto `currentUser` como `defaultUser` hubieran sido valores falsos, `"sin nombre"` hubiera sido el resultado.
-
-2. **Evaluación de cortocircuito.**
+Si todas las variables fueran falsas, aparecería Anónimo. 
 
-   Los operandos no solo pueden ser valores, sino que tambien expresiones arbitrarias. OR los evalua y comprueba de izquierda a derecha. La evaluación termina cuando un valor verdadero es alcanzado, y dicho valor es retornado. Este proceso es llamado "evaluación de cortocircuito" porque avanza lo menos posible de izquierda a derecha.
+2. **Evaluación del camino más corto.**
 
-   Esto se ve claramente cuando la expresión dada como segundo argumento tiene un efecto secundario como una asignación de variable.
+Otra característica de OR || operador es la evaluación de "el camino más corto".
 
-   En el ejemplo debajo, `x` no es asignada:
+Esto significa que `||` procesa sus argumentos hasta que se alcanza el primer valor verdadero, y luego el valor se devuelve inmediatamente, sin siquiera tocar el otro argumento.
 
-   ```js run no-beautify
-   let x;
+La importancia de esta característica se vuelve obvia si un operando no es solo un valor, sino una expresión con un efecto secundario, como una asignación de variable o una llamada a función.
 
-   *!*true*/!* || (x = 1);
-
-   alert(x); // undefined, porque (x = 1) no es evaluado.
-   ```
+En el siguiente ejemplo, solo se imprime el segundo mensaje:
 
-   Si, en cambio, el primer argumento fuera `false`, `||` evaluaría el segundo, realizando la asignación.
-
-   ```js run no-beautify
-   let x;
-
-   *!*false*/!* || (x = 1);
-
-   alert(x); // 1
-   ```
+ ```js run no-beautify
+    *!*true*/!* || alert("not printed");
+    *!*false*/!* || alert("printed");
+ ```
 
-   Una asignación es un caso simple. Puede haber efectos secundarios, los cuales no se notarán si la evaluación no los alcanza.
+En la primera línea, el operador OR `||` detiene la evaluación inmediatamente después de ver que es verdadera, por lo que la alerta no se ejecuta.
 
-   Como podemos ver, tal caso de uso es una "manera más corta de usar `if`". El primer operando es convertido a booleano. Si el primero es falso, el segundo sera evaluado.
-
-   La mayor parte del tiempo, es mejor usar un `if` "normal" para mantener el código fácil de entender, pero a veces esto puede ser útil.
+A veces, las personas usan esta función para ejecutar comandos solo si la condición en la parte izquierda es falsa.
 
 ## && (AND)
 
-El operador AND es representado con `&&`:
+El operador AND es representado con dos ampersands `&&`:
 
 ```js
 result = a && b;
 ```
 
-En la programación clasica, AND retorna `true` si ambos operandos son valores verdaderos y falso en cualquier otro caso.
+En la programación clasica, AND retorna `true` si ambos operandos son valores verdaderos y `false` en cualquier otro caso.
 
 ```js run
 alert(true && true); // true
@@ -186,7 +172,7 @@ if (1 && 0) { // evaluado como true && false
 }
 ```
 
-## AND encuentra el primer valor verdadero
+## AND "&&" encuentra el primer valor falso
 
 Dado múltiples valores aplicados al operador AND:
 
@@ -236,16 +222,18 @@ La precedencia del operador AND `&&` es mayor que la de OR `||`.
 
 Así que el código `a && b || c && d` es básicamente el mismo que si la expresiones `&&` estuvieran entre paréntesis: `(a && b) || (c && d)`
 ```
+```
 
-Justo como en OR, el operador AND `&&` puede reemplazar en ocasiones al `if`.
+````warn header="No remplace *if* con || or &&"
+A veces, la gente usa el operador AND `&&` como una "forma más corta de escribir `if`".
 
 Por ejemplo:
 
 ```js run
 let x = 1;
 
-(x > 0) && alert("Mayor que cero!");
-````
+(x > 0) && alert( 'Greater than zero!' );
+```
 
 La acción en la parte derecha de `&&` sería ejecutada sólo si la evaluación la alcanza. Eso es, solo si `(x > 0)` es verdadero.
 
@@ -258,10 +246,8 @@ if (x > 0) {
 	alert("Mayor que cero!");
 }
 ```
-
-La variante con `&&` parece más corta. Pero `if` es más obvio y tiende a ser un poco más legible.
-
-Así que recomendamos usar cada construcción para su propósito: usar `if` si queremos if y usar `&&` si queremos AND.
+Aunque la variante con `&&` parece más corta, `if` es más obvia y tiende a ser un poco más legible. Por lo tanto, recomendamos usar cada construcción para su propósito: use `if` si queremos si y use` && `si queremos AND.
+````
 
 ## ! (NOT)
 
@@ -302,4 +288,3 @@ alert(Boolean(null)); // false
 ```
 
 La precedencia de NOT `!` es la mayor de todos los operadores lógicos, así que siempre se ejecuta primero, antes que `&&` o `||`.
-

1-js/05-data-types/04-array/article.md

@@ -193,7 +193,7 @@ Un array es una clase especial de objeto. Los corchetes usados para acceder a un
 
 Ellos extienden los objetos proveyendo métodos especiales para trabajar con colecciones ordenadas de datos y también la propiedad `length`. Pero en el corazón es aún un objeto.
 
-Recuerda, hay solo 7 tipos basicos en JavaScript. Array es un objeto y se comporta como un objeto..
+Recuerde, solo hay ocho tipos de datos básicos en JavaScript (consulte el capítulo [Tipos de datos] (https://javascript.info/types) para obtener más información). Array es un objeto y, por tanto, se comporta como un objeto.
 
 Por ejemplo, es copiado por referencia:
 

1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js

@@ -10,7 +10,7 @@ function Calculator() {
     let split = str.split(' '),
       a = +split[0],
       op = split[1],
-      b = +split[2]
+      b = +split[2];
 
     if (!this.methods[op] || isNaN(a) || isNaN(b)) {
       return NaN;

1-js/06-advanced-functions/03-closure/article.md

@@ -1,11 +1,15 @@
 
-# Ámbito de Variable
+# Ámbito de Variable y el concepto "closure" 
 
-JavaScript es un lenguaje muy orientado a funciones. Nos da mucha libertad. Se puede crear una función dinámicamente, pasarla como argumento a otra función y llamarla desde un lugar de código totalmente diferente más adelante.
+JavaScript es un lenguaje muy orientado a funciones. Nos da mucha libertad. Una función se puede crear en cualquier momento, pasar como argumento a otra función y luego llamar desde un lugar de código totalmente diferente más tarde.
 
 Ya sabemos que una función puede acceder a variables fuera de ella.
 
-Ahora ampliemos nuestro conocimiento para incluir escenarios más complejos.
+Pero, ¿qué sucede si estas variables "externas" cambian desde que se crea una función? ¿La función verá los valores nuevos o los antiguos?
+
+Y si una función se pasa como parámetro y se llama desde otro lugar del código, ¿tendrá acceso a las variables externas en el nuevo lugar?
+
+Ampliemos nuestro conocimiento para comprender estos escenarios y otros más complejos.
 
 ```smart header="Hablaremos de las variables let / const aquí"
 En JavaScript, hay 3 formas de declarar una variable: `let`, `const` (las modernas) y `var` (más antigua).

1-js/06-advanced-functions/05-global-object/article.md

@@ -5,7 +5,7 @@ El objeto global proporciona variables y funciones que están disponibles en cua
 
 En un navegador se denomina `window`, para Node.js es` global`, para otros entornos puede tener otro nombre.
 
-Recientemente, `globalThis` se agregó al lenguaje, como un nombre estandarizado para un objeto global, que debería ser compatible con todos los entornos. En algunos navegadores, como Chromium Edge, `globalThis` aún no es compatible, pero se puede usar mediante *polyfill*.
+Recientemente, se agregó `globalThis` al lenguaje, como un nombre estandarizado para un objeto global, que debería ser compatible con todos los entornos al igual que con los principales navegadores.
 
 Aquí usaremos `window`, suponiendo que nuestro entorno sea un navegador. Si su script puede ejecutarse en otros entornos, es mejor usar `globalThis` en su lugar.
 
@@ -83,7 +83,7 @@ if (!window.Promise) {
 
 - El objeto global tiene un nombre universal: `globalThis`.
 
-    ... Pero con mayor frecuencia se hace referencia a nombres específicos del entorno de la "vieja escuela", como `window` (navegador) y `global` (Node.js). Como `globalThis` es una propuesta reciente, no es compatible con Chromium Edge (pero sí mediante *polyfill*).
+    ... Pero con mayor frecuencia se hace referencia a nombres específicos del entorno de la "vieja escuela", como `window` (navegador) y `global` (Node.js). 
 
 - Deberíamos almacenar valores en el objeto global solo si son verdaderamente globales para nuestro proyecto. Y manteniendo  su uso al mínimo.
 - En el navegador, a menos que estemos utilizando [módulos](info:modules), las funciones globales y las variables declaradas con `var` se convierten en una propiedad del objeto global.

1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md

@@ -6,6 +6,8 @@ importance: 5
 
 El resultado del decorador `debounce(f, ms)` es un contenedor que suspende las llamadas a `f` hasta que haya `ms` milisegundos de inactividad (sin llamadas, "período de enfriamiento"), luego invoca `f` una vez con los últimos argumentos.
 
+En otras palabras, `debounce` es como una secretaria que acepta "llamadas telefónicas" y espera hasta que haya `ms` milisegundos de silencio. Y solo entonces transfiere la información de la última llamada al "jefe" (llama a la "f" real).
+
 Por ejemplo, teníamos una función `f` y la reemplazamos con `f = debounce(f, 1000)`.
 
 Entonces, si la función contenedora se llama a 0ms, 200ms y 500ms, y luego no hay llamadas, entonces la 'f' real solo se llamará una vez, a 1500ms. Es decir: después del período de enfriamiento de 1000 ms desde la última llamada.

1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md

@@ -12,6 +12,8 @@ La diferencia con *debounce* es que es un decorador completamente diferente:
 - `debounce` ejecuta la función una vez después del período de `enfriamiento`. Es bueno para procesar el resultado final.
 - `throttle` lo ejecuta no más de lo que se le da en el tiempo `ms`. Es bueno para actualizaciones regulares que no deberían ser muy frecuentes.
 
+En otras palabras, "throttle" es como una secretaria que acepta llamadas telefónicas, pero molesta al jefe (llama a la "f" real) no más de una vez por milisegundos `ms`.
+
 Revisemos una aplicación de la vida real para comprender mejor ese requisito y ver de dónde proviene.
 
 **Por ejemplo, queremos rastrear los movimientos del mouse.**

1-js/08-prototypes/01-prototype-inheritance/article.md

@@ -197,6 +197,9 @@ alert(admin.fullName); // John Smith (*)
 
 // disparadores setter!
 admin.fullName = "Alice Cooper"; // (**)
+
+alert(admin.fullName); // Alice Cooper , estado de admin modificado
+alert(user.fullName); // John Smith , estado de user protegido
 ```
 
 Aquí en la línea `(*)` la propiedad `admin.fullName` tiene un getter en el prototipo `user`, por lo que es llamado. Y en la línea `(**)` la propiedad tiene un setter en el prototipo, por lo que es llamado.

1-js/09-classes/07-mixins/article.md

@@ -154,11 +154,11 @@ let eventMixin = {
    *  this.trigger('select', data1, data2);
    */
   trigger(eventName, ...args) {
-    if (!this._eventHandlers || !this._eventHandlers[eventName]) {
+   if (!this._eventHandlers?.[eventName]) {
       return; // no hay controladores para ese nombre de evento
     }
 
-    // call the handlers
+    // Llama al controlador
     this._eventHandlers[eventName].forEach(handler => handler.apply(this, args));
   }
 };

1-js/11-async/08-async-await/article.md

@@ -67,11 +67,11 @@ f();
 
 La ejecución de la función es pausada en la línea `(*)` y se reanuda cuando la promesa responde, con `result` volviéndose su resultado. Entonces el código arriba muestra "¡Hecho!" en un segundo.
 
-Enfaticemos: `await` literalmente hace que JavaScript espere hasta que la promesa responda, entonces sigue con el resultado. No tiene costo en recursos de CPU, porque mientras tanto el motor puede hacer otros trabajos: ejecutar otros scripts, manejar eventos, etc.
+Enfaticemos: `await` literalmente suspende la ejecución de la función hasta que se establezca la promesa, y luego la reanuda con el resultado de la promesa. Eso no cuesta ningún recurso de CPU, porque el motor de JavaScript puede hacer otros trabajos mientras tanto: ejecutar otros scripts, manejar eventos, etc.
 
 Es simplemente una sintaxis más elegante para tener el resultado de una promesa que `promise.then`, es más facil de leer y de escribir.
 
-````warn header="No se puede usar `await` en funciones regulares"
+````warn header="No se puede usar *await* en funciones regulares"
 Si tratamos de usar `await` en una función no async, habría un error de sintaxis:
 
 ```js run
@@ -83,7 +83,7 @@ function f() {
 }
 ```
 
-Obtendremos este error si no ponemos `async` delante de una función. Como se dijo, `await` solo funciona dentro de una `función async`.
+Es posible que obtengamos este error si olvidamos poner `async` antes de una función. Como se dijo, "await" solo funciona dentro de una función `async`.
 ````
 
 Tomemos el ejemplo `showAvatar()` del capítulo <info:promise-chaining> y rescribámoslo usando `async/await`:
@@ -139,13 +139,12 @@ Pero podemos envolverlo dentro de una función async anónima, como esto:
   ...
 })();
 ```
-
-
 ````
-````smart header="`await` acepta \"thenables\""
+
+````smart header="*await* acepta \"thenables\""
 Tal como `promise.then`, `await` nos permite el uso de objetos "thenable" (aquellos con el método `then`). La idea es que un objeto de terceras partes pueda no ser una promesa, sino compatible con una: si soporta `.then`, es suficiente para el uso con `await`.
 
-Aquí hay una clase `Thenable` de demo; el `await` debajo acepta sus instancias:
+Aquí hay una demostración de la clase `Thenable`; el `await` debajo acepta sus instancias:
 
 ```js run
 class Thenable {

1-js/99-js-misc/04-reference-type/article.md

@@ -107,8 +107,3 @@ Para todas las demás operaciones, el tipo de referencia se convierte automátic
 
 Toda la mecánica está oculta a nuestros ojos. Solo importa en casos sutiles, como cuando un método se obtiene dinámicamente del objeto, usando una expresión.
 
-
-
-
-
-El resultado del punto `.` no es en realidad un método, pero un valor de `` necesita una manera de pasar la información sobre `obj`.

2-ui/1-document/11-coordinates/article.md

@@ -88,8 +88,8 @@ As you can see, `left/top` do not equal `x/y` in such case.
 In practice though, `elem.getBoundingClientRect()` always returns positive width/height, here we mention negative `width/height` only for you to understand why these seemingly duplicate properties are not actually duplicates.
 ```
 
-```warn header="Internet Explorer and Edge: no support for `x/y`"
-Internet Explorer and Edge don't support `x/y` properties for historical reasons.
+```warn header="Internet Explorer: no support for `x/y`"
+Internet Explorer doesn't support `x/y` properties for historical reasons.
 
 So we can either make a polyfill (add getters in `DomRect.prototype`) or just use `top/left`, as they are always the same as `x/y` for positive `width/height`, in particular in the result of `elem.getBoundingClientRect()`.
 ```

2-ui/2-events/02-bubbling-and-capturing/article.md

@@ -181,7 +181,7 @@ The code sets click handlers on *every* element in the document to see which one
 If you click on `<p>`, then the sequence is:
 
 1. `HTML` -> `BODY` -> `FORM` -> `DIV` (capturing phase, the first listener):
-2. `P` (target phrase, triggers two times, as we've set two listeners: capturing and bubbling)
+2. `P` (target phase, triggers two times, as we've set two listeners: capturing and bubbling)
 3. `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
 
 There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

@@ -276,7 +276,7 @@ function onMouseMove(event) {
 }
 ```
 
-In the example below when the ball is dragged over the soccer gate, the gate is highlighted.
+In the example below when the ball is dragged over the soccer goal, the goal is highlighted.
 
 [codetabs height=250 src="ball4"]
 
@@ -300,4 +300,4 @@ We can lay a lot on this foundation.
 - We can use event delegation for `mousedown/up`. A large-area event handler that checks  `event.target` can manage Drag'n'Drop for hundreds of elements.
 - And so on.
 
-There are frameworks that build architecture over it: `DragZone`, `Droppable`, `Draggable` and other classes. Most of them do the similar stuff to what's described above, so it should be easy to understand them now. Or roll your own, as you can see that that's easy enough to do, sometimes easier than adapting a third-part solution.
+There are frameworks that build architecture over it: `DragZone`, `Droppable`, `Draggable` and other classes. Most of them do the similar stuff to what's described above, so it should be easy to understand them now. Or roll your own, as you can see that that's easy enough to do, sometimes easier than adapting a third-party solution.