Merge #533 from javascript-tutorial/sync-ef8d5768

Sync with upstream @ ef8d576 *nevermore*

Author: joaquinelio

1-js/02-first-steps/04-variables/article.md

@@ -24,7 +24,7 @@ Ahora podemos introducir datos en ella al utilizar el operador de asignación `=
 let message;
 
 *!*
-message = 'Hola'; // almacena la cadena
+message = 'Hola'; // almacenar la cadena 'Hola' en la variable llamada message
 */!*
 ```
 

1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md

@@ -4,7 +4,7 @@ importance: 2
 
 # Dos funciones – un objeto
 
-Es posible crear las funciones `A` y `B` como `new A()==new B()`?
+¿Es posible crear las funciones `A` y `B` para que se cumpla `new A() == new B()`?
 
 ```js no-beautify
 function A() { ... }

1-js/05-data-types/05-array-methods/12-reduce-object/task.md

@@ -4,7 +4,7 @@ importance: 4
 
 # Crea un objeto a partir de un array
 
-Supongamos que recibimos un array de usuarios con la forma `{id:..., name:..., age... }`.
+Supongamos que recibimos un array de usuarios con la forma `{id:..., name:..., age:... }`.
 
 Crea una función `groupById(arr)` que cree un objeto, con `id` como clave (key) y los elementos del array como valores.
 

1-js/07-object-properties/01-property-descriptors/article.md

@@ -194,7 +194,7 @@ alert(Object.keys(user)); // name
 
 Los indicadores no configurables (`configurable:false`) a veces es un preajuste para los objetos propiedades incorporadas.
 
-Una propiedad no configurable no puede ser eliminada ni cambiada por `defineProperty`.
+Una propiedad no configurable no puede ser eliminada, sus atributos no pueden ser modificados.
 
 Por ejemplo, `Math.PI` es de solo lectura, no enumerable y no configurable:
 
@@ -214,20 +214,23 @@ alert( JSON.stringify(descriptor, null, 2 ) );
 Así que, un programador es incapaz de cambiar el valor de `Math.PI` o sobrescribirlo.
 
 ```js run
-Math.PI = 3; // Error
+Math.PI = 3; // Error, porque tiene writable: false
 
 // delete Math.PI tampoco funcionará
 ```
 
-Convertir una propiedad en no configurable es hacer una calle de una vía. No podremos cambiarla de vuelta, porque `defineProperty` no funciona en propiedades no configurables.
+Tampoco podemos cambiar `Math.PI`a `writable` de vuelta:
 
-Para ser precisos, la no configurabilidad impone varias restricciones a `defineProperty`:
-1. No se puede cambiar el indicador `configurable`.
-2. No se puede cambiar el indicador `enumerable`.
-3. No se puede cambiar `writable: false` a `true` (al revés funciona).
-4. No se puede cambiar `get/set` por una propiedad accesoria (pero puede asignarlos si está ausente).
+```js run
+// Error, porque configurable: false
+Object.defineProperty(Math, "PI", { writable: true });
+```
+
+No hay nada en absoluto que podamos hacer con `Math.PI`.
 
-**La idea de "configurable: false" es prevenir cambios en los indicadores de la propiedad y su eliminación mientras que permite el cambio de su valor.**
+Convertir una propiedad en no configurable es una calle de un solo sentido. No podremos cambiarla de vuelta con `defineProperty`.
+
+**Nota que "configurable: false" impide cambios en los indicadores de la propiedad y su eliminación, pero permite el cambio de su valor.**
 
 Aquí `user.name` es "non-configurable", pero aún puede cambiarse (por ser "writable"):
 
@@ -244,7 +247,7 @@ user.name = "Pete"; // funciona
 delete user.name; // Error
 ```
 
-Y aquí hacemos `user.name` una constante "sellada para siempre":
+Y aquí hacemos `user.name` una constante "sellada para siempre", tal como la incorporada `Math.PI`:
 
 ```js run
 let user = {
@@ -263,6 +266,11 @@ delete user.name;
 Object.defineProperty(user, "name", { value: "Pedro" });
 ```
 
+```smart header="Único cambio de atributo posible: writable true -> false"
+Hay una excepción menor acerca del cambio de indicadores.
+
+Podemos cambiar `writable: true` a `false` en una propiedad no configurable, impidiendo en más la modificación de su valor (sumando una capa de protección). Aunque no hay vuelta atrás.
+```
 
 ## Object.defineProperties
 

2-ui/3-event-details/6-pointer-events/article.md

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="style.css">
+
+<div id="slider" class="slider">
+  <div class="thumb"></div>
+</div>

2-ui/3-event-details/6-pointer-events/slider-html.view/index.html

@@ -0,0 +1,19 @@
+.slider {
+  border-radius: 5px;
+  background: #E0E0E0;
+  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+  width: 310px;
+  height: 15px;
+  margin: 5px;
+}
+
+.thumb {
+  width: 10px;
+  height: 25px;
+  border-radius: 3px;
+  position: relative;
+  left: 10px;
+  top: -5px;
+  background: blue;
+  cursor: pointer;
+}

2-ui/3-event-details/6-pointer-events/slider-html.view/style.css

@@ -5,19 +5,30 @@
   <div class="thumb"></div>
 </div>
 
+<p style="border:1px solid gray" onmousemove="this.textContent = new Date()">Mouse over here to see the date</p>
+
 <script>
   let thumb = slider.querySelector('.thumb');
   let shiftX;
 
-  thumb.onpointerdown = function(event) {
+  function onThumbDown(event) {
     event.preventDefault(); // prevent selection start (browser action)
 
     shiftX = event.clientX - thumb.getBoundingClientRect().left;
 
     thumb.setPointerCapture(event.pointerId);
+
+    thumb.onpointermove = onThumbMove;
+
+    thumb.onpointerup = event => {
+      // dragging finished, no need to track pointer any more
+      // ...any other "drag end" logic here...
+      thumb.onpointermove = null;
+      thumb.onpointerup = null;
+    }
   };
 
-  thumb.onpointermove = function(event) {
+  function onThumbMove(event) {
     let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
 
     // if the pointer is out of slider => adjust left to be within the bounaries
@@ -32,6 +43,8 @@
     thumb.style.left = newLeft + 'px';
   };
 
+  thumb.onpointerdown = onThumbDown;
+
   thumb.ondragstart = () => false;
 
 </script>

2-ui/3-event-details/6-pointer-events/slider.view/index.html

@@ -3,7 +3,7 @@
 El ciclo de vida de una página HTML tiene tres eventos importantes:
 
 - `DOMContentLoaded` -- el navegador HTML está completamente cargado y el árbol DOM está construido, pero es posible que los recursos externos como `<img>` y hojas de estilo aún no se hayan cargado.
-- `load` -- no solo se carga el HTML, sino también todos los recursos externos: imágenes, estilos, etc.
+- `load` -- no solo se cargó el HTML, sino también todos los recursos externos: imágenes, estilos, etc.
 - `beforeunload/unload` -- el usuario sale de la pagina.
 
 Cada evento puede ser útil:
@@ -114,7 +114,7 @@ El siguiente ejemplo muestra correctamente los tamaños de las imágenes, porque
 
 ```html run height=200 refresh
 <script>
-  window.onload = function() { // similar a window.addEventListener('load', (event) => {
+  window.onload = function() { // también puede usar window.addEventListener('load', (event) => {
     alert('Página cargada');
 
     // la imagen es cargada al mismo tiempo

2-ui/5-loading/01-onload-ondomcontentloaded/article.md

@@ -168,7 +168,7 @@ El servidor lee el formulario `form-data` y el archivo tal como si de un formula
 
 Los objetos [FormData](https://xhr.spec.whatwg.org/#interface-formdata) son utilizados para capturar un formulario HTML y enviarlo utilizando `fetch` u otro método de red.
 
-Podemos crear el objeto con `new FormData(form)` desde un formulario HTML, o crearlo sin un formulario en absoluto, y agregar los campos con los siguientes métodos:
+Podemos crear el objeto con `new FormData(form)` desde un formulario HTML, o crear un objeto sin un formulario en absoluto y agregar los campos con los siguientes métodos:
 
 - `formData.append(nombre, valor)`
 - `formData.append(nombre, blob, nombreDeArchivo)`