Merge pull request #556 from joaquinelio/susy211011

Susy211011

Author: joaquinelio

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

@@ -24,11 +24,11 @@ El navegador tiene un motor embebido a veces llamado una "Máquina virtual de Ja
 
 Diferentes motores tienen diferentes "nombres en clave". Por ejemplo:
 
-- [V8](https://es.wikipedia.org/wiki/Chrome_V8) -- en Chrome y Opera.
+- [V8](https://es.wikipedia.org/wiki/Chrome_V8) -- en Chrome, Opera y Edge.
 - [SpiderMonkey](https://es.wikipedia.org/wiki/SpiderMonkey) -- en Firefox.
 - ...Existen otros nombres en clave como "Chakra" para IE , "JavaScriptCore", "Nitro" y "SquirrelFish" para Safari, etc.
 
-Los términos anteriores es bueno recordarlos porque son usados en artículos para desarrolladores en internet. También los usaremos. Por ejemplo, si "la característica X es soportada por V8", entonces probablemente funciona en Chrome y Opera.
+Es bueno recordar estos términos porque son usados en artículos para desarrolladores en internet. También los usaremos. Por ejemplo, si "la característica X es soportada por V8", entonces probablemente funciona en Chrome, Opera y Edge.
 
 ```smart header="¿Como trabajan los motores?"
 

1-js/01-getting-started/3-code-editors/article.md

@@ -31,7 +31,6 @@ En la práctica, los editores livianos pueden tener montones de plugins incluyen
 
 Las siguientes opciones merecen tu atención:
 
-- [Visual Studio Code](https://code.visualstudio.com/) (multiplataforma, gratuito) 
 - [Atom](https://atom.io/) (multiplataforma, gratuito).
 - [Sublime Text](http://www.sublimetext.com) (multiplataforma, shareware).
 - [Notepad++](https://notepad-plus-plus.org/) (Windows, gratuito).

1-js/02-first-steps/09-comparison/article.md

@@ -6,7 +6,7 @@ En Javascript se escriben así:
 
 - Mayor/menor que: <code>a &gt; b</code>, <code>a &lt; b</code>.
 - Mayor/menor o igual que: <code>a &gt;= b</code>, <code>a &lt;= b</code>.
-- Igual: `a == b` (ten en cuenta el doble signo `==`. Un solo símbolo `a = b` significaría una asignación).
+- Igual: `a == b` (ten en cuenta que el doble signo `==` significa comparación, mientras que un solo símbolo `a = b` significaría una asignación).
 - Distinto. En matemáticas la notación es <code>&ne;</code>, pero en JavaScript se escribe como una asignación con un signo de exclamación delante: <code>a != b</code>.
 
 En este artículo, aprenderemos más sobre los diferentes tipos de comparaciones y de cómo las realiza JavaScript, incluidas las peculiaridades importantes.

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

@@ -123,7 +123,7 @@ Otra característica de OR || operador es la evaluación de "el camino más cort
 
 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.
 
-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.
+    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.
 
 En el siguiente ejemplo, solo se imprime el segundo mensaje:
 

1-js/03-code-quality/02-coding-style/article.md

@@ -301,9 +301,9 @@ Lo mejor de ellos es que la comprobación de estilo también puede encontrar alg
 
 Aquí hay algunas herramientas de linting conocidas:
 
-- [JSLint](http://www.jslint.com/) -- uno de los primeros linters.
-- [JSHint](http://www.jshint.com/) -- mas ajustes que JSLint.
-- [ESLint](http://eslint.org/) -- probablemente el mas reciente.
+- [JSLint](https://www.jslint.com/) -- uno de los primeros linters.
+- [JSHint](https://www.jshint.com/) -- más ajustes que JSLint.
+- [ESLint](https://eslint.org/) -- probablemente el más reciente.
 
 Todos ellos pueden hacer el trabajo. El autor usa [ESLint](http://eslint.org/).
 
@@ -335,7 +335,7 @@ Aquí un ejemplo de un archivo `.eslintrc`:
 
 Aquí la directiva `"extends"` denota que la configuración se basa en el conjunto de configuraciones "eslint: recomendado". Después de eso, especificamos el nuestro.
 
-También es posible descargar conjuntos de reglas de estilo de la web y extenderlos en su lugar. Consulte <http://eslint.org/docs/user-guide/getting-started> para obtener más detalles sobre la instalación.
+También es posible descargar conjuntos de reglas de estilo de la web y extenderlos. Consulte <https://eslint.org/docs/user-guide/getting-started> para obtener más detalles sobre la instalación.
 
 También algunos IDE tienen linting incorporado, lo cual es conveniente pero no tan personalizable como ESLint.
 

1-js/05-data-types/01-primitives-methods/article.md

@@ -48,7 +48,7 @@ La solución es algo enrevesada, pero aquí está:
 2. El lenguaje permite el acceso a métodos y propiedades de strings, numbers, booleans y symbols.
 3. Para que esto funcione, se crea una envoltura especial, un "object wrapper" (objeto envoltorio) que provee la funcionalidad extra y luego es destruido.
 
-Los "object wrappers" son diferentes para cada primitivo y son llamados: `String`, `Number`, `Boolean` y `Symbol`.  Así, proveen diferentes sets de métodos.
+Los "object wrappers" son diferentes para cada primitivo y son llamados: `String`, `Number`, `Boolean`, `Symbol` y `BigInt`.  Así, proveen diferentes sets de métodos.
 
 Por ejemplo, existe un método [str.toUpperCase()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase) que devuelve un string en mayúsculas.
 

1-js/11-async/03-promise-chaining/article.md

@@ -32,19 +32,19 @@ new Promise(function(resolve, reject) {
 });
 ```
 
-La idea es que el resultado pase a través de la cadena de controladores `.then`.
+La idea es que el resultado pase a través de la cadena de manejadores `.then`.
 
 Aquí el flujo es:
 1. La promesa inicial se resuelve en 1 segundo `(*)`,
-2. Entonces se llama el controlador `.then`  `(**) `.
-3. El valor que devuelve se pasa al siguiente controlador `.then` `(***)`
-4. ...y así.
+2. Entonces se llama el manejador `.then`  `(**) `, que a su vez crea una nueva promesa (resuelta con el valor `2`).
+3. El siguiente `.then` `(***)` obtiene el resultado del anterior, lo procesa (duplica) y lo pasa al siguiente manejador.
+4. ...y así sucesivamente.
 
 A medida que el resultado se pasa a lo largo de la cadena de controladores, podemos ver una secuencia de llamadas de alerta: `1` -> `2` -> `4`.
 
 ![](promise-then-chain.svg)
 
-Todo funciona, porque una llamada a `promise.then` devuelve una promesa, para que podamos llamar al siguiente `.then`.
+Todo funciona, porque cada llamada a `promise.then` devuelve una nueva promesa, para que podamos llamar al siguiente `.then` con ella.
 
 Cuando un controlador devuelve un valor, se convierte en el resultado de esa promesa, por lo que se llama al siguiente `.then`.
 

2-ui/4-forms-controls/3-events-change-input/article.md

@@ -58,38 +58,57 @@ Por lo tanto no podemos usar `event.preventDefault()` aquí, es demasiado tarde
 
 Estos eventos ocurren al cortar/copiar/pegar un valor.
 
-Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y dan acceso a los datos copiados/pegados.
+Estos pertenecen a la clase [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) y dan acceso a los datos cortados/copiados/pegados.
 
-Podemos usar `event.preventDefault()` para cancelar la acción y que nada sea copiado/pegado.
+También podemos usar `event.preventDefault()` para cancelar la acción y que nada sea cortado/copiado/pegado.
 
-El siguiente código también evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar:
+El siguiente código también evita todo evento `cut/copy/paste` y muestra qué es los que estamos intentando cortar/copiar/pegar:
 
 ```html autorun height=40 run
 <input type="text" id="input">
 <script>
-  input.oncut = input.oncopy = input.onpaste = function(event) {
-    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
-    return false;
+  input.onpaste = function(event) {
+    alert("paste: " + event.clipboardData.getData('text/plain'));
+    event.preventDefault();
+  };
+
+  input.oncut = input.oncopy = function(event) {
+    alert(event.type + '-' + document.getSelection());
+    event.preventDefault();
   };
 </script>
 ```
 
-Ten en cuenta que no solo es posible copiar/pegar texto, sino cualquier cosa. Por ejemplo, podemos copiar un archivo en el gestor de archivos del SO y pegarlo.
+Nota que dentro de los manejadores `cut` y `copy`, llamar a `event.clipboardData.getData(...)` devuelve  un string vacío. Esto es porque el dato no está en el portapapeles aún. Y si usamos `event.preventDefault()` no será copiado en absoluto.
 
-Esto es porque `clipboardData` implementa la interfaz `DataTransfer`, usada comúnmente para "arrastrar y soltar" y "copiar y pegar". Ahora esto está fuera de nuestro objetivo, pero puedes encontrar sus métodos [en la especificación](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
+Por ello el ejemplo arriba usa `document.getSelection()` para obtener el texto seleccionado. Puedes encontrar más detalles acerca de selección en el artículo <info:selection-range>.
 
-```warn header="ClipboardAPI: restricciones para seguridad del usuario"
-El portapapeles es algo a nivel "global" del SO.  Por cuestiones de seguridad, la mayoría de los navegadores dan acceso al portapapeles solamente bajo determinadas acciones del usuario, por ejemplo al manejar eventos `onclick`.
+No solo es posible copiar/pegar texto, sino cualquier cosa. Por ejemplo, podemos copiar un archivo en el gestor de archivos del SO y pegarlo.
 
-Además está prohibido generar eventos "personalizados" del portapapeles con `dispatchEvent` en todos los navegadores excepto Firefox.
-```
+Esto es porque `clipboardData` implementa la interfaz `DataTransfer`, usada comúnmente para "arrastrar y soltar" y "copiar y pegar". Ahora esto está fuera de nuestro objetivo, pero puedes encontrar sus métodos [en la especificación DataTransfer](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
+
+Hay además una API asincrónica adicional para acceso al portapapeles: `navigator.clipboard`. Más en la especificación [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [no soportado en Firefox](https://caniuse.com/async-clipboard).
+
+### Restricciones de seguridad
+
+El portapapeles es algo a nivel "global" del SO. Un usuario puede alternar entre ventanas, copiar y pegar diferentes cosas, y el navegador no debería ver todo eso.
+
+Por ello la mayoría de los navegadores dan acceso al portapapeles únicamente bajo determinadas acciones del usuario, como copiar y pegar.
+
+Está prohibido generar eventos "personalizados" del portapapeles con `dispatchEvent` en todos los navegadores excepto Firefox. Incluso si logramos enviar tal evento, la especificación establece que tal evento "sintético" no debe brindar acceso al portapapeles.
+
+Incluso si alguien decide guardar `event.clipboardData` en un manejador de evento para accederlo luego, esto no funcionará.
+
+Para reiterar, [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata) funciona únicamente en el contexto de manejadores de eventos iniciados por el usuario.
+
+Por otro lado, [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h-navigator-clipboard) es una API más reciente, pensada para el uso en cualquier contexto. Esta pide autorización al usuario cuando la necesita. No soportada en Firefox.
 
 ## Resumen
 
 Eventos de modificación de datos:
 
 | Evento | Descripción | Especiales |
 |---------|----------|-------------|
-| `change`| Un valor fue cambiado. | Para ingreso de texto, ocurre al perderse el enfoque |
-| `input` | Para entrada de texto en cada cambio | Ocurre inmediatamente a diferencia de `change`. |
-| `cut/copy/paste` | Acciones cortar/copiar/pegar | La acción puede ser cancelada. La propiedad `event.clipboardData` brinda acceso a leer/escribir del portapeles. |
+| `change`| Un valor fue cambiado. | En ingreso de texto, se dispara cuando el elemento pierde el foco |
+| `input` | Cada cambio de entrada de texto | Se dispara de inmediato con cada cambio, a diferencia de `change`. |
+| `cut/copy/paste` | Acciones cortar/copiar/pegar | La acción puede ser cancelada. La propiedad `event.clipboardData` brinda acceso al portapeles. Todos los navegadores excepto Firefox también soportan `navigator.clipboard`. |

2-ui/5-loading/02-script-async-defer/article.md

@@ -193,7 +193,7 @@ En la práctica, `defer` es usado para scripts que necesitan todo el DOM y/o el
 Y `async` es usado para scripts independientes, como contadores y anuncios donde el orden de ejecución no importa.
 
 ```warn header="La página sin scripts debe ser utilizable"
-Por favor ten en cuenta que si estas usando `defer` o `async`, el usuario verá la página antes de que el script sea cargado.
+Ten en cuenta: si usas `defer` o `async`, el usuario verá la página *antes* de que el script sea cargado.
 
 En tal caso algunos componentes gráficos probablemente no estén listos.
 

4-binary/02-text-decoder/article.md

@@ -2,7 +2,7 @@
 
 ¿Qué pasa si los datos binarios son en realidad un string? Por ejemplo, recibimos un archivo con datos textuales.
 
-El objeto incorporado [TextDecoder](https://encoding.spec.whatwg.org/#interface-textdecoder) nos permite leer el texto de un conjunto de datos binarios y convertirlo en un dato de tipo string de JavaScript, dados el búfer y la codificación.
+El objeto incorporado [TextDecoder](https://encoding.spec.whatwg.org/#interface-textdecoder) nos permite leer el valor y convertirlo en un string de JavaScript, dados el búfer y la codificación.
 
 Primero necesitamos crearlo:
 ```js