diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md index 9cebaa325..8144e1123 100644 --- a/1-js/01-getting-started/3-code-editors/article.md +++ b/1-js/01-getting-started/3-code-editors/article.md @@ -17,7 +17,7 @@ Si aún no has seleccionado un IDE, considera las siguientes opciones: Para Windows, también está "Visual Studio", no lo confundamos con "Visual Studio Code". "Visual Studio" es un poderoso editor pagado sólo para Windows, idóneo para la plataforma .NET. Una versión gratuita es de este editor se llama [Visual Studio Community](https://www.visualstudio.com/vs/community/). -Muchos IDEs son de paga pero tienen un periodo de prueba. Su costo usualmente es pequeño si lo comparamos al salario de un desarrollador calificado, así que sólo escoge el mejor para ti. +Muchos IDEs son de paga, pero tienen un periodo de prueba. Su costo usualmente es pequeño si lo comparamos al salario de un desarrollador calificado, así que sólo escoge el mejor para ti. ## Editores livianos diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md index 0f1e3051e..0a1937462 100644 --- a/1-js/02-first-steps/05-types/article.md +++ b/1-js/02-first-steps/05-types/article.md @@ -180,7 +180,7 @@ El valor especial `undefined` también se distingue. Hace un tipo propio, igual El significado de `undefined` es "valor no asignado". -Si una variable es declarada pero no asignada, entonces su valor es `undefined`: +Si una variable es declarada, pero no asignada, entonces su valor es `undefined`: ```js run let age; @@ -247,7 +247,7 @@ Las últimas tres líneas pueden necesitar una explicación adicional: 1. `Math` es un objeto incorporado que proporciona operaciones matemáticas. Lo aprenderemos en el capítulo . Aquí sólo sirve como ejemplo de un objeto. 2. El resultado de `typeof null` es `"object"`. Esto está oficialmente reconocido como un error de comportamiento de `typeof` que proviene de los primeros días de JavaScript y se mantiene por compatibilidad. Definitivamente `null` no es un objeto. Es un valor especial con un tipo propio separado. -3. El resultado de `typeof alert` es `"function"` porque `alert` es una función. Estudiaremos las funciones en los próximos capítulos donde veremos que no hay ningún tipo especial "function" en JavaScript. Las funciones pertenecen al tipo objeto. Pero `typeof` las trata de manera diferente, devolviendo `function`. Además proviene de los primeros días de JavaScript. Técnicamente dicho comportamiento es incorrecto pero puede ser conveniente en la práctica. +3. El resultado de `typeof alert` es `"function"` porque `alert` es una función. Estudiaremos las funciones en los próximos capítulos donde veremos que no hay ningún tipo especial "function" en JavaScript. Las funciones pertenecen al tipo objeto. Pero `typeof` las trata de manera diferente, devolviendo `function`. Además proviene de los primeros días de JavaScript. Técnicamente dicho comportamiento es incorrecto, pero puede ser conveniente en la práctica. ```smart header="Sintaxis de `typeof(x)`" Se puede encontrar otra sintaxis en algún código: `typeof(x)`. Es lo mismo que `typeof x`. @@ -263,14 +263,16 @@ Algunos prefieren `typeof(x)`, aunque la sintaxis `typeof x` es mucho más comú Hay 8 tipos básicos en JavaScript. -- `number` para números de cualquier tipo: enteros o de punto flotante, los enteros están limitados por ±(253-1). -- `bigint` para números enteros de longitud arbitraria. -- `string` para cadenas. Una cadena puede tener cero o más caracteres, no hay un tipo especial para un único carácter. -- `boolean` para verdadero y falso: `true`/`false`. -- `null` para valores desconocidos -- un tipo independiente que tiene un solo valor nulo: `null`. -- `undefined` para valores no asignados -- un tipo independiente que tiene un único valor "indefinido": `undefined`. -- `object` para estructuras de datos complejas. -- `symbol` para identificadores únicos. +- Siete tipos de datos primitivos + - `number` para números de cualquier tipo: enteros o de punto flotante, los enteros están limitados por ±(253-1). + - `bigint` para números enteros de longitud arbitraria. + - `string` para cadenas. Una cadena puede tener cero o más caracteres, no hay un tipo especial para un único carácter. + - `boolean` para verdadero y falso: `true`/`false`. + - `null` para valores desconocidos -- un tipo independiente que tiene un solo valor nulo: `null`. + - `undefined` para valores no asignados -- un tipo independiente que tiene un único valor "indefinido": `undefined`. + - `symbol` para identificadores únicos. +- Y un tipo de dato no primitivo: + - `object` para estructuras de datos complejas. El operador `typeof` nos permite ver qué tipo está almacenado en una variable. diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md index 5cf61c6c1..541816f4d 100644 --- a/1-js/02-first-steps/07-type-conversions/article.md +++ b/1-js/02-first-steps/07-type-conversions/article.md @@ -98,7 +98,7 @@ Esto ocurre solo si al menos uno de los argumentos es un string, en caso contrar La conversión a boolean es la más simple. -Ocurre en operaciones lógicas (más adelante veremos test condicionales y otras cosas similares) pero también puede realizarse de forma explícita llamando a la función `Boolean(value)`. +Ocurre en operaciones lógicas (más adelante veremos test condicionales y otras cosas similares), pero también puede realizarse de forma explícita llamando a la función `Boolean(value)`. Las reglas de conversión: diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md index ab375467c..14f8bda67 100644 --- a/1-js/02-first-steps/08-operators/article.md +++ b/1-js/02-first-steps/08-operators/article.md @@ -366,7 +366,7 @@ let a = counter++; // (*) cambiado ++counter a counter++ alert(a); // *!*1*/!* ``` -En la línea `(*)`, la forma *sufijo* `counter++` también incrementa `counter` pero devuelve el *antiguo* valor (antes de incrementar). Por lo tanto, el `alert` muestra `1`. +En la línea `(*)`, la forma *sufijo* `counter++` también incrementa `counter`, pero devuelve el *antiguo* valor (antes de incrementar). Por lo tanto, el `alert` muestra `1`. Para resumir: @@ -384,7 +384,7 @@ Para resumir: let counter = 0; alert( ++counter ); // 1 ``` -- Si queremos incrementar un valor pero usamos su valor anterior, necesitamos la forma sufijo: +- Si queremos incrementar un valor, pero usamos su valor anterior, necesitamos la forma sufijo: ```js run let counter = 0; @@ -443,7 +443,7 @@ Estos operadores se usan muy raramente, cuando necesitamos manejar la representa El operador coma `,` es uno de los operadores más raros e inusuales. A veces, es utilizado para escribir código más corto, entonces tenemos que saberlo para poder entender qué está pasando. -El operador coma nos permite evaluar varias expresiones, dividiéndolas con una coma `,`. Cada una de ellas es evaluada pero sólo el resultado de la última es devuelto. +El operador coma nos permite evaluar varias expresiones, dividiéndolas con una coma `,`. Cada una de ellas es evaluada, pero sólo el resultado de la última es devuelto. Por ejemplo: diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index 632959d79..3180f712f 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -186,7 +186,7 @@ En el ejemplo de arriba, se puede decir: "la función `showMessage` es declarada ## Valores predeterminados -Si una función es llamada pero no se le proporciona un argumento, su valor correspondiente se convierte en `undefined`. +Si una función es llamada, pero no se le proporciona un argumento, su valor correspondiente se convierte en `undefined`. Por ejemplo, la función mencionada anteriormente `showMessage(from, text)` se puede llamar con un solo argumento: diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index 7ed714ee2..c16f56e9e 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -48,7 +48,7 @@ alert( sayHi ); // muestra el código de la función */!* ``` -Tenga en cuenta que la última línea no ejecuta la función, porque no hay paréntesis después de `sayHi`. Existen lenguajes de programación en los que cualquier mención del nombre de una función causa su ejecución pero JavaScript no funciona así. +Tenga en cuenta que la última línea no ejecuta la función, porque no hay paréntesis después de `sayHi`. Existen lenguajes de programación en los que cualquier mención del nombre de una función causa su ejecución, pero JavaScript no funciona así. En JavaScript, una función es un valor, por lo tanto podemos tratarlo como un valor. El código de arriba muestra su representación de cadena, que es el código fuente. diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index f690e85d0..519620d57 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -48,7 +48,7 @@ Como puedes ver, `(a, b) => a + b` significa una función que acepta dos argumen alert( double(3) ); // 6 ``` -- Si no hay parámetros, los paréntesis estarán vacíos pero deben estar presentes: +- Si no hay parámetros, los paréntesis estarán vacíos; pero deben estar presentes: ```js run let sayHi = () => alert("¡Hola!"); diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 8c0fccbd6..495aab84b 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -135,7 +135,7 @@ Hay botones para esto en le panel superior derecho. Revisémoslos. Otro clic volverá a ejecutar otro comando, y así uno por uno, a través de todo el script. -- "saltar paso": corre al comando siguiente, pero *no te metas en la función*, hotkey `key:F10`. -: Similar a "siguiente paso" pero se comporta diferente si la siguiente sentencia es un llamado a función. Esto es: no una nativa como alert, sino una función nuestra. +: Similar a "siguiente paso", pero se comporta diferente si la siguiente sentencia es un llamado a función. Esto es: no una nativa como alert, sino una función nuestra. El comando "siguiente" entra y pausa en la primera línea, en cambio "saltar" ejecuta la función anidada de forma invisible, no mostrando el interior de la función. @@ -144,7 +144,7 @@ Hay botones para esto en le panel superior derecho. Revisémoslos. Es útil si no estamos interesados en ver lo que pasa dentro de la función llamada. -- siguiente paso, hotkey `key:F11`. -: Similar a "siguiente" pero se comporta diferente en las llamadas asincrónicas. Si apenas comienzas en javaScript, puedes ignorar esto por ahora pues no tenemos llamados asincrónicos aún. +: Similar a "siguiente", pero se comporta diferente en las llamadas asincrónicas. Si apenas comienzas en javaScript, puedes ignorar esto por ahora pues no tenemos llamados asincrónicos aún. Para el futuro, simplemente recuerda que "Siguiente" ignora las acciones asincrónicas tales como `setTimeout` (llamada a función programada), que se ejecutan después. The "Siguiente dentro" va al interior de su código, esperando por él si es necesario. Puedes ver el [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) para más detalles. diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg index d5d2a0b93..3fe5f124f 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg index 41a3d8784..016708256 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg @@ -1 +1 @@ -213 \ No newline at end of file +213 \ No newline at end of file diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md index 57697ee9b..b10d3a58d 100644 --- a/1-js/03-code-quality/03-comments/article.md +++ b/1-js/03-code-quality/03-comments/article.md @@ -153,7 +153,7 @@ function pow(x, n) { Sin dichos comentarios, las siguientes situaciones son posibles: 1. Tú (o tu compañero) abres el código escrito hace ya algún tiempo, y te das cuenta de que es "subóptimo". 2. Piensas: "Que estúpido que era antes, y que inteligente que soy ahora", y lo reescribes utilizando la variante "más obvia y correcta". - 3. ...El impulso de reescribir era bueno. Pero en el proceso ves que la solución "más obvia" en realidad falla. Incluso recuerdas vagamente el porqué, porque ya lo intentaste hace mucho. Vuelves a la variante correcta pero has estado perdiendo el tiempo. + 3. ...El impulso de reescribir era bueno. Pero en el proceso ves que la solución "más obvia" en realidad falla. Incluso recuerdas vagamente el porqué, porque ya lo intentaste hace mucho. Vuelves a la variante correcta, pero has estado perdiendo el tiempo. Los comentarios que explican la solución correcta son muy importantes. Nos ayudan a continuar el desarrollo de forma correcta. diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md index 63b385900..a5d83cc8d 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -128,7 +128,7 @@ function pow(x, n) { ## Mejoramos el spec -Lo que hemos hecho es una trampa. La función no funciona bien: ejecutar un cálculo diferente como `pow(3,4)` nos devuelve un resultado incorrecto pero el test pasa. +Lo que hemos hecho es una trampa. La función no funciona bien: ejecutar un cálculo diferente, como `pow(3,4)`, nos devuelve un resultado incorrecto, pero el test pasa. ... pero la situación es habitual, ocurre en la práctica. Los tests pasan, pero la función no funciona bien. Nuestra especificación está incompleta. Necesitamos añadir más casos de uso a la especificación. diff --git a/1-js/04-object-basics/02-object-copy/article.md b/1-js/04-object-basics/02-object-copy/article.md index 50a359606..0bf9f5143 100644 --- a/1-js/04-object-basics/02-object-copy/article.md +++ b/1-js/04-object-basics/02-object-copy/article.md @@ -248,7 +248,7 @@ Puede parecer que la linea `(*)` ocasionaría un error, pero no. El valor de `u En otras palabras, `const user` solamente da error cuando intentamos asignar `user=...` como un todo. -Si realmente queremos hacer constantes las propiedades del objeto, es también posible pero usando métodos totalmente diferentes, las veremos después en el capítulo . +Si realmente queremos hacer constantes las propiedades del objeto, también es posible; pero usando métodos totalmente diferentes, los que veremos después en el capítulo . ```` ## Resumen diff --git a/1-js/04-object-basics/07-optional-chaining/article.md b/1-js/04-object-basics/07-optional-chaining/article.md index 6cc02db61..b5db6063e 100644 --- a/1-js/04-object-basics/07-optional-chaining/article.md +++ b/1-js/04-object-basics/07-optional-chaining/article.md @@ -46,7 +46,7 @@ alert(user.address ? user.address.street : undefined); Esto funciona, no hay error... Pero es bastante poco elegante. Como puedes ver, `"user.address"` aparece dos veces en el código. -Aquí, el mismo caso pero con la búsqueda de `document.querySelector`: +El mismo caso, pero con la búsqueda de `document.querySelector`: ```js run let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null; diff --git a/1-js/04-object-basics/08-symbol/article.md b/1-js/04-object-basics/08-symbol/article.md index 5dd0de469..29209b574 100644 --- a/1-js/04-object-basics/08-symbol/article.md +++ b/1-js/04-object-basics/08-symbol/article.md @@ -31,7 +31,7 @@ let id = Symbol("id"); Se garantiza que los símbolos son únicos. Aunque declaremos varios Symbols con la misma descripción, éstos tendrán valores distintos. La descripción es solamente una etiqueta que no afecta nada más. -Por ejemplo, aquí hay dos Symbols con la misma descripción -- pero no son iguales: +Por ejemplo, aquí hay dos Symbols con la misma descripción... pero no son iguales: ```js run let id1 = Symbol("id"); diff --git a/1-js/05-data-types/02-number/9-random-int-min-max/solution.md b/1-js/05-data-types/02-number/9-random-int-min-max/solution.md index 28faf540c..e59ed43c7 100644 --- a/1-js/05-data-types/02-number/9-random-int-min-max/solution.md +++ b/1-js/05-data-types/02-number/9-random-int-min-max/solution.md @@ -1,4 +1,4 @@ -# La solución simple pero equivocada +# La solución simple, pero equivocada La solución más simple, pero equivocada, sería generar un valor entre `min` y `max` y redondearlo: diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index ad205c17b..539b6aed1 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -448,4 +448,4 @@ Para números con decimales: Más funciones matemáticas: -- Revisa el documento del objeto [Math](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math) cuando las necesites. La biblioteca es pequeña pero puede cubrir las necesidades básicas. +- Revisa el documento del objeto [Math](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math) cuando las necesites. La biblioteca es pequeña, pero puede cubrir las necesidades básicas. diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index 7dc43c793..d9497c5be 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -266,7 +266,7 @@ while (true) { } ``` -Podemos escribir el mismo algoritmo pero más corto: +Podemos escribir el mismo algoritmo, pero más corto: ```js run let str = 'Astuto como un zorro, fuerte como un buey'; @@ -296,9 +296,9 @@ if (str.indexOf("Widget")) { } ``` -La `alerta` en el ejemplo anterior no se muestra ya que `str.indexOf("Widget")` retorna `0` (lo que significa que encontró el string en la posición inicial). Correcto pero `if` considera `0` como `falso`. +La `alerta` en el ejemplo anterior no se muestra ya que `str.indexOf("Widget")` retorna `0` (lo que significa que encontró el string en la posición inicial). Eos correcto, pero `if` considera `0` como `falso`. -Por lo que debemos buscar por `-1` como sigue: +Por ello debemos buscar por `-1` como sigue: ```js run let str = "Widget con id"; @@ -353,7 +353,7 @@ Ahora podemos ver este truco solo en código viejo, porque JavaScript moderno pr El método más moderno [str.includes(substr, pos)](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/includes) retorna `true/false` dependiendo si `str` contiene `substr` dentro. -Es la opción correcta si lo que necesitamos es encontrar el `substr` pero no necesitamos la posición. +Es la opción correcta, si lo que necesitamos es encontrar el `substr` pero no necesitamos su posición. ```js run alert('Widget con id'.includes('Widget')); // true diff --git a/1-js/05-data-types/05-array-methods/11-array-unique/solution.md b/1-js/05-data-types/05-array-methods/11-array-unique/solution.md index 66de7a6fd..6ca9f741e 100644 --- a/1-js/05-data-types/05-array-methods/11-array-unique/solution.md +++ b/1-js/05-data-types/05-array-methods/11-array-unique/solution.md @@ -22,7 +22,7 @@ let strings = ["Hare", "Krishna", "Hare", "Krishna", alert( unique(strings) ); // Hare, Krishna, :-O ``` -El código funciona pero tiene un problema potencial de desempeño. +El código funciona, pero tiene un problema potencial de desempeño. El método `result.includes(str)` internamente recorre el array `result` y compara cada elemento con `str` para encontrar una coincidencia. diff --git a/1-js/05-data-types/05-array-methods/9-shuffle/solution.md b/1-js/05-data-types/05-array-methods/9-shuffle/solution.md index a472639c9..11e6be1b5 100644 --- a/1-js/05-data-types/05-array-methods/9-shuffle/solution.md +++ b/1-js/05-data-types/05-array-methods/9-shuffle/solution.md @@ -58,11 +58,11 @@ Un resultado de ejemplo (depende del motor JS): Podemos ver una clara tendencia: `123` y `213` aparecen mucho más seguido que otros. -El resultado del código puede variar entre distintos motores JavaScript pero ya podemos ver que esta forma de abordar el problema es poco confiable. +El resultado del código puede variar entre distintos motores JavaScript, pero ya podemos ver que esta forma de abordar el problema es poco confiable. ¿Por qué no funciona? Generalmente hablando, `sort` es una "caja negra": tiramos dentro un array y una función de ordenamiento y esperamos que el array se ordene. Pero debido a la total aleatoriedad de la comparación, la caja negra se vuelve loca y exactamente en que sentido se vuelve loca depende de la implementación específica, que difiere de un motor a otro. -Existen otra formas mejores de realizar la tarea. Por ejemplo, hay un excelente algorítmo llamado [Algoritmo de Fisher-Yates](https://es.wikipedia.org/wiki/Algoritmo_de_Fisher-Yates). La idea es recorrer el array en sentido inverso e intercambiar cada elemento con un elemento aleatorio anterior: +Existen otra formas mejores de realizar la tarea. Por ejemplo, hay un excelente algoritmo llamado [Algoritmo de Fisher-Yates](https://es.wikipedia.org/wiki/Algoritmo_de_Fisher-Yates). La idea es recorrer el array en sentido inverso e intercambiar cada elemento con un elemento aleatorio anterior: ```js function shuffle(array) { @@ -70,7 +70,7 @@ function shuffle(array) { let j = Math.floor(Math.random() * (i + 1)); // índice aleatorio entre 0 e i // intercambia elementos array[i] y array[j] - // usamos la sintáxis "asignación de desestructuración" para lograr eso + // usamos la sintaxis "asignación de desestructuración" para lograr eso // encontrarás más información acerca de esa sintaxis en los capítulos siguientes // lo mismo puede ser escrito como: // let t = array[i]; array[i] = array[j]; array[j] = t diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index 4db9002cb..7c8c692b4 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -398,7 +398,7 @@ alert(lengths); // 5,7,6 Cuando usamos [arr.sort()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort), este ordena el propio array cambiando el orden de los elementos. -También devuelve un nuevo array ordenado pero éste usualmente se descarta ya que `arr` en sí mismo es modificado. +También devuelve un nuevo array ordenado, pero este usualmente se descarta ya que `arr` en sí mismo es modificado. Por ejemplo: @@ -575,7 +575,7 @@ Cuando necesitamos iterar sobre un array podemos usar `forEach`, `for` o `for..o Cuando necesitamos iterar y devolver un valor por cada elemento podemos usar `map`. -Los métodos [arr.reduce](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce) y [arr.reduceRight](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight) también pertenecen a ese grupo de acciones pero son un poco más complejos. Se los utiliza para calcular un único valor a partir del array. +Los métodos [arr.reduce](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce) y [arr.reduceRight](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight) también pertenecen a ese grupo de acciones, pero son un poco más complejos. Se los utiliza para calcular un único valor a partir del array. La sintaxis es la siguiente: @@ -675,7 +675,7 @@ Por eso `typeof` no ayuda a distinguir un objeto común de un array: ```js run alert(typeof {}); // object -alert(typeof []); // object +alert(typeof []); // object (lo mismo) ``` ...Pero los arrays son utilizados tan a menudo que tienen un método especial para eso: [Array.isArray(value)](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/isArray). Este devuelve `true` si el `valor` es un array y `false` si no lo es. @@ -753,7 +753,7 @@ Veamos el ayudamemoria de métodos para arrays: - `indexOf/lastIndexOf(item, pos)` -- busca por `item` comenzando desde la posición `pos`, devolviendo el índice o `-1` si no se encuentra. - `includes(value)` -- devuelve `true` si el array tiene `value`, si no `false`. - `find/filter(func)` -- filtra elementos a través de la función, devuelve el primer/todos los valores que devuelven `true`. - - `findIndex` es similar a `find` pero devuelve el índice en lugar del valor. + - `findIndex` es similar a `find`, pero devuelve el índice en lugar del valor. - Para iterar sobre elementos: - `forEach(func)` -- llama la `func` para cada elemento, no devuelve nada. @@ -766,7 +766,7 @@ Veamos el ayudamemoria de métodos para arrays: - `reduce/reduceRight(func, initial)` -- calcula un solo valor para todo el array, llamando a la `func` para cada elemento, obteniendo un resultado parcial en cada llamada y pasándolo a la siguiente. - Adicional: - - `Array.isArray(arr)` comprueba si `arr` es un array. + - `Array.isArray(value)` comprueba si `value` es un array. Por favor tener en cuenta que `sort`, `reverse` y `splice` modifican el propio array. @@ -780,6 +780,7 @@ Estos métodos son los más utilizados y cubren el 99% de los casos. Pero existe Podemos usar `every` para comparar arrays: + ```js run function arraysEqual(arr1, arr2) { return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]); diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md index d3ef27938..651c80633 100644 --- a/1-js/05-data-types/12-json/article.md +++ b/1-js/05-data-types/12-json/article.md @@ -27,7 +27,7 @@ Por suerte no hay necesidad de escribir el código para manejar todo esto. La ta ## JSON.stringify -[JSON](https://es.wikipedia.org/wiki/JSON) (Notación de objeto JavaScript) es un formato general para representar valores y objetos. Se lo describe como el estándar [RFC 4627](http://tools.ietf.org/html/rfc4627). En un principio fue creado para Javascript pero varios lenguajes tienen librerías para manejarlo también. Por lo tanto es fácil utilizar JSON para intercambio de información cuando el cliente utiliza JavaScript y el servidor está escrito en Ruby, PHP, Java, lo que sea. +[JSON](https://es.wikipedia.org/wiki/JSON) (Notación de objeto JavaScript) es un formato general para representar valores y objetos. Se lo describe como el estándar [RFC 4627](http://tools.ietf.org/html/rfc4627). En un principio fue creado para Javascript, pero varios lenguajes tienen librerías para manejarlo también. Por lo tanto es fácil utilizar JSON para intercambio de información cuando el cliente utiliza JavaScript y el servidor está escrito en Ruby, PHP, Java, lo que sea. JavaScript proporciona métodos: @@ -484,7 +484,7 @@ alert( meetup.date.getDate() ); // Error! El valor de `meetup.date` es un string, no un objeto `Date`. Cómo puede saber `JSON.parse` que debe transformar ese string a una `Date`? -Le pasemos a `JSON.parse` la función reactivadora como el segundo argumento, esto devuelve todos los valores "tal cual" pero `date` se convertirá en una `Date`: +Le pasemos a `JSON.parse` la función reactivadora como el segundo argumento, esto devuelve todos los valores "tal cual", pero `date` se convertirá en una `Date`: ```js run let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'; diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md index 4817a0818..5dd51e8da 100644 --- a/1-js/06-advanced-functions/04-var/article.md +++ b/1-js/06-advanced-functions/04-var/article.md @@ -20,7 +20,7 @@ var message = "Hola"; alert(message); // Hola ``` -Pero internamente `var` es una bestia diferente, originaria de muy viejas épocas. Generalmente no se usa en código moderno pero aún habita en el antiguo. +Pero internamente `var` es una bestia diferente, originaria de muy viejas épocas. Generalmente no se usa en código moderno, pero aún habita en el antiguo. Si no planeas encontrarte con tal código bien puedes saltar este capítulo o posponerlo, pero hay posibilidades de que esta bestia pueda morderte más tarde. @@ -162,7 +162,7 @@ sayHi(); Este comportamiento también se llama "hoisting" (elevamiento), porque todos los `var` son "hoisted" (elevados) hacia el tope de la función. -Entonces, en el ejemplo anterior, la rama `if (false)` nunca se ejecuta pero eso no tiene importancia. El `var` dentro es procesado al iniciar la función, entonces al momento de `(*)` la variable existe. +Entonces, en el ejemplo anterior, la rama `if (false)` nunca se ejecuta, pero eso no tiene importancia. El `var` dentro es procesado al iniciar la función, entonces al momento de `(*)` la variable existe. **Las declaraciones son "hoisted" (elevadas), pero las asignaciones no lo son.** diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 491738422..71e9bde7b 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -4,7 +4,7 @@ JavaScript ofrece una flexibilidad excepcional cuando se trata de funciones. Se ## Caché transparente -Digamos que tenemos una función `slow(x)`, que es pesada para la CPU pero cuyos resultados son "estables": es decir que con la misma `x` siempre devuelve el mismo resultado. +Digamos que tenemos una función `slow(x)`, que es pesada para la CPU, pero cuyos resultados son "estables": es decir que con la misma `x` siempre devuelve el mismo resultado. Si la función se llama con frecuencia, es posible que queramos almacenar en caché (recordar) los resultados obtenidos para evitar perder tiempo en calcularlos de nuevo. diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index 8521726a0..3b9e81a65 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -118,7 +118,7 @@ alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi ## No es solamente azúcar sintáctica -A veces se dice que `class` es "azúcar sintáctica" (sintaxis que es diseñada para que sea más fácil de leer pero no introduce nada nuevo), porque en realidad podemos declarar lo mismo sin la palabra clave `class` en absoluto: +A veces se dice que `class` es "azúcar sintáctica" (sintaxis que es diseñada para una lectura más fácil, pero que no introduce nada nuevo), porque en realidad podemos declarar lo mismo sin la palabra clave `class` en absoluto: ```js run // reescribiendo la clase User puramente con funciones diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md index 866371158..a53ba2cff 100644 --- a/1-js/11-async/02-promise-basics/article.md +++ b/1-js/11-async/02-promise-basics/article.md @@ -118,7 +118,7 @@ let promise = new Promise(function(resolve, reject) { }); ``` -Por ejemplo, esto puede suceder cuando comenzamos una tarea pero luego vemos que todo ya se ha completado y almacenado en caché. +Por ejemplo, esto puede suceder cuando comenzamos una tarea, pero luego vemos que todo ya se ha completado y almacenado en caché. Está bien. Inmediatamente tenemos una promesa resuelta. ```` @@ -238,12 +238,14 @@ new Promise((resolve, reject) => { .then(result => show result, err => show error) ``` -Sin embargo, note que `finally(f) no es exactamente un alias de `then(f, f)`. Hay varias diferencias importantes: +Sin embargo, note que `finally(f) no es exactamente un alias de `then(f, f)`. + +Hay diferencias importantes: ` 1. Un manejador `finally` no tiene argumentos. En `finally` no sabemos si la promesa es exitosa o no. Eso está bien, ya que usualmente nuestra tarea es realizar procedimientos de finalización "generales". - Por favor observe el ejemplo anterior: como puede ver, el manejador de `finally` no tiene argumentos, y la promesa que sale es manejada en el siguiente manejador. -2. Un manejador `finally` traspasa resultados y errores al siguiente manejador que se adecúe. + Por favor observe el ejemplo anterior: como puede ver, el manejador de `finally` no tiene argumentos, y lo que sale de la promesa es manejado en el siguiente manejador. +2. Resultados y errores pasan "a través" del manejador de `finally`. Estos pasan al siguiente manejador que se adecúe. Por ejemplo, aquí el resultado se pasa a través de `finally` a `then`: ```js run @@ -270,7 +272,7 @@ Sin embargo, note que `finally(f) no es exactamente un alias de `then(f, f)`. Ha 3. Un manejador de `finally` tampoco debería devolver nada. Y si lo hace, el valor devuelto es ignorado silenciosamente. - La única excepción a esta regla es cuando el manejador mismo de `finally` dispara un error. Entonces este error pasa al siguiente manejador en lugar del resultado previo. + La única excepción a esta regla se da cuando el manejador mismo de `finally` dispara un error. En ese caso, este error pasa al siguiente manejador de error en lugar del resultado previo al finally. Para summarizar: diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md index 7c8f78d92..0422ec409 100644 --- a/1-js/11-async/05-promise-api/article.md +++ b/1-js/11-async/05-promise-api/article.md @@ -94,9 +94,9 @@ Aquí la segunda promesa se rechaza en dos segundos. Esto lleva a un rechazo inm ```warn header="En caso de error, las demás promesas son ignoradas" Si una promesa se rechaza, `Promise.all` se rechaza inmediatamente, olvidando completamente las otras de la lista. Aquellos resultados son ignorados. -Por ejemplo, si hay múltiples llamados `fetch`, como en el ejemplo arriba, y uno falla, los demás aún continuarán en ejecución, pero `Promise.all` no las observará más. Ellas probablemente respondan pero sus resultados serán ignorados. +Por ejemplo: si hay múltiples llamados `fetch`, como en el ejemplo arriba, y uno falla, los demás aún continuarán en ejecución, pero `Promise.all` no las observará más. Ellas probablemente respondan, pero sus resultados serán ignorados. -`Promise.all` no hace nada para cancelarlas, no existe un concepto de "cancelación" en las promesas. En [otro capítulo](info:fetch-abort) veremos `AbortController` que puede ayudar con ello pero no es parte de la API de las promesas. +`Promise.all` no hace nada para cancelarlas, no existe un concepto de "cancelación" en las promesas. En [otro capítulo](info:fetch-abort) veremos `AbortController`, que puede ayudar con ello pero no es parte de la API de las promesas. ``` ````smart header="`Promise.all(iterable)` permite valores \"comunes\" que no sean promesas en `iterable` " @@ -196,7 +196,7 @@ Ahora podemos usar `Promise.allSettled` para obtener el resultado de *todas* las ## Promise.race -Similar a `Promise.all` pero espera solamente por la primera respuesta y obtiene su resultado (o error). +Similar a `Promise.all`, pero espera solamente por la primera respuesta y obtiene su resultado (o error). Su sintaxis es: diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index a29ae0d1a..2a2473c56 100644 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -321,7 +321,7 @@ export {default as User} from './user.js'; // reexportar default ¿Por qué se necesitaría eso? Veamos un caso de uso práctico. -Imagínese, estamos escribiendo un "paquete": una carpeta con muchos módulos, con algunas de las funciones exportadas al exterior (herramientas como NPM nos permiten publicar y distribuir dichos paquetes pero no estamos obligados a usarlas), y muchos módulos son solo "ayudantes", para uso interno en otros módulos de paquete. +Imagine que estamos escribiendo un "paquete": una carpeta con muchos módulos, con algunas de las funciones exportadas al exterior (herramientas como NPM nos permiten publicar y distribuir dichos paquetes pero no estamos obligados a usarlas), y muchos módulos son solo "ayudantes", para uso interno en otros módulos de paquete. La estructura de archivos podría ser algo así: ``` @@ -368,7 +368,7 @@ export {User}; Ahora los usuarios de nuestro paquete pueden hacer esto `import {login} from "auth/index.js"`. -La sintaxis `export ... from ...` es solo una notación más corta para tales importación-exportación: +La sintaxis `export ... from ...` es solo una notación más corta para tal importación-exportación: ```js // 📁 auth/index.js diff --git a/1-js/99-js-misc/01-proxy/03-observable/task.md b/1-js/99-js-misc/01-proxy/03-observable/task.md index 5cd84861a..21f5d7229 100644 --- a/1-js/99-js-misc/01-proxy/03-observable/task.md +++ b/1-js/99-js-misc/01-proxy/03-observable/task.md @@ -20,8 +20,8 @@ user.observe((key, value) => { user.name = "John"; // alerta: SET name=John ``` -En otras palabras, un objeto devuelto por `makeObservable` es como el original pero que también tiene el método `observe(handler)` que establece una función `handler` que será llamada en cualquier cambio de propiedad. +En otras palabras: un objeto devuelto por `makeObservable` es como el original, pero que también tiene el método `observe(handler)` que establece una función `handler`, la que será llamada en cualquier cambio de propiedad. -cada vez que una propiedad cambie, `handler(key, value)` es llamado con el nombre y el valor de la propiedad. +Cada vez que una propiedad cambie, `handler(key, value)` es llamada con el nombre y el valor de la propiedad. P.D. En esta tarea, solo toma en cuenta la escritura de una propiedad. Otras operaciones pueden ser implementadas de manera similar. diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md index 444ac51ab..1c0c9ba56 100644 --- a/1-js/99-js-misc/01-proxy/article.md +++ b/1-js/99-js-misc/01-proxy/article.md @@ -790,7 +790,7 @@ Proxy brinda una manera única de alterar o ajustar el comportamiento de objetos Muchos objetos nativos, por ejemplo `Map`, `Set`, `Date`, `Promise`, etc, hacen uso de los llamados "slots internos". -Los slots (hueco, celda) son como propiedades pero están reservados para uso interno, con propósito de especificación únicamente. Por ejemplo, `Map` almacena items en el slot interno `[[MapData]]`. Los métodos nativos los acceden directamente, sin usar los métodos internos `[[Get]]/[[Set]]`. Entonces `Proxy` no puede interceptar eso. +Los slots (hueco, celda) son como propiedades; pero están reservados para uso interno, con propósito de especificación únicamente. Por ejemplo, `Map` almacena items en el slot interno `[[MapData]]`. Los métodos nativos los acceden directamente, sin usar los métodos internos `[[Get]]/[[Set]]`. Entonces `Proxy` no puede interceptar eso. ¿Qué importa? ¡De cualquier manera son internos! diff --git a/1-js/99-js-misc/01-proxy/proxy.svg b/1-js/99-js-misc/01-proxy/proxy.svg index 157e350f4..6b2224cfd 100644 --- a/1-js/99-js-misc/01-proxy/proxy.svg +++ b/1-js/99-js-misc/01-proxy/proxy.svg @@ -1 +1 @@ -test: 5proxytargetget proxy.test5 \ No newline at end of file +test: 5proxytargetget proxy.test5 \ No newline at end of file diff --git a/1-js/99-js-misc/04-reference-type/article.md b/1-js/99-js-misc/04-reference-type/article.md index 99cc4d464..4e0c6b4d9 100644 --- a/1-js/99-js-misc/04-reference-type/article.md +++ b/1-js/99-js-misc/04-reference-type/article.md @@ -72,7 +72,7 @@ Aquí `hi = user.hi` coloca la función dentro de una variable y luego la últim **Para hacer que la llamada `user.hi()` funcione, JavaScript usa un truco: el punto `'.'` no devuelve una función, sino un valor especial del [Tipo de referencia](https://tc39.github.io/ecma262/#sec-reference-specification-type).** -El Tipo de Referencia es un "tipo de especificación". No podemos usarla explícitamente pero es usada internamente por el lenguaje. +El Tipo de Referencia es un "tipo de especificación". No podemos usarla explícitamente, pero es usada internamente por el lenguaje. El valor del Tipo de Referencia es una combinación de triple valor `(base, name, strict)`, donde: diff --git a/2-ui/1-document/02-dom-nodes/domconsole0.svg b/2-ui/1-document/02-dom-nodes/domconsole0.svg index ea0d9141c..eb99f193f 100644 --- a/2-ui/1-document/02-dom-nodes/domconsole0.svg +++ b/2-ui/1-document/02-dom-nodes/domconsole0.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/domconsole1.svg b/2-ui/1-document/02-dom-nodes/domconsole1.svg index d7f32debb..02ef5f0a6 100644 --- a/2-ui/1-document/02-dom-nodes/domconsole1.svg +++ b/2-ui/1-document/02-dom-nodes/domconsole1.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/elk.svg b/2-ui/1-document/02-dom-nodes/elk.svg index 1797a099f..448eea9d1 100644 --- a/2-ui/1-document/02-dom-nodes/elk.svg +++ b/2-ui/1-document/02-dom-nodes/elk.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/2-ui/1-document/02-dom-nodes/inspect.svg b/2-ui/1-document/02-dom-nodes/inspect.svg index a894a5c0e..60696ec0d 100644 --- a/2-ui/1-document/02-dom-nodes/inspect.svg +++ b/2-ui/1-document/02-dom-nodes/inspect.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md index 075c3ea60..e8fb616aa 100644 --- a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md +++ b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md @@ -1,5 +1,5 @@ 1. Sí, verdadero. El elemento `elem.lastChild` siempre es el último, no tiene `nextSibling`. -2. No, falso, porque `elem.children[0]` es el primer hijo *entre elementos* pero pueden existir nodos que no son elementos antes que él. `previousSibling` puede ser un nodo texto. +2. No, falso. `elem.children[0]` es el primer hijo *entre elementos*, pero pueden existir nodos que no son elementos antes que él. `previousSibling` puede ser un nodo texto. Ten en cuenta: para ambos casos, si no hay hijos habrá un error. diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 84e6daac6..69cbca6e1 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -285,7 +285,7 @@ Las tablas son un gran ejemplo de ello, y representan un particular caso importa **El elemento ``** soporta estas propiedades (añadidas a las que hemos dado anteriormente): - `table.rows` -- la colección de elementos`` de la tabla. - `table.caption/tHead/tFoot` -- referencias a los elementos ``, ``. -- `table.tBodies` -- la colección de elementos `` (pueden ser muchos según el estándar pero siempre habrá al menos uno -- aunque no esté en el HTML el navegador lo pondrá en el DOM). +- `table.tBodies` -- la colección de elementos `` (pueden ser muchos según el estándar, pero siempre habrá al menos uno, aunque no esté en el HTML el navegador lo pondrá en el DOM). **``, ``, ``** estos elementos proporcionan las propiedades de las `filas`. - `tbody.rows` -- la colección dentro de ``. diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md index 419ff4565..d8cc452c2 100644 --- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md +++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md @@ -6,4 +6,4 @@ El algoritmo: 2. Crea el objeto date `d = new Date(year, month-1)`. Este es el primer día del mes `month` (tomando en cuenta que los meses en JavaScript comienzan en `0`, no `1`). 3. Las primeras celdas hasta el primer día del mes `d.getDay()` podrían estar vacías. Las completamos con ``. 4. Incrementa el día en `d`: `d.setDate(d.getDate()+1)`. Si `d.getMonth()` no es aún del mes siguiente, agregamos una nueva celda `
`, `
` al calendario. Si es domingo, agregamos un nueva línea"</tr><tr>". -5. Si el mes terminó pero la fila no está completa, le agregamos `` vacíos para hacerlo rectangular. +5. Si el mes terminó, pero la fila no está completa, le agregamos `` vacíos para hacerlo rectangular. diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg index 4ae90b1c7..f5bd9f4f9 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg @@ -1 +1 @@ -(0,0)clientWidth \ No newline at end of file +(0,0)clientWidth \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-all.svg b/2-ui/1-document/09-size-and-scroll/metric-all.svg index a5dadb47f..20a59e18d 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-all.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-all.svg @@ -1 +1 @@ -Introduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997. That Ecma Standard was submitted to ISO/ IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.scrollHeightoffsetHeightscrollTopclientHeightoffsetTopclientLeftclientWidthclientTopoffsetLeftoffsetWidth \ No newline at end of file +Introduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997. That Ecma Standard was submitted to ISO/ IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.scrollHeightoffsetHeightscrollTopclientHeightoffsetTopclientLeftclientWidthclientTopoffsetLeftoffsetWidth \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg index 83864b4c5..2603b05fb 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg @@ -1 +1 @@ -border 25pxpadding 20pxcontent width: 284pxborder 25pxpadding 20pxscrollbar 16pxclientWidth = 20+284+20 = 324pxclientHeight: 240pxheight: 200pxIntroduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with \ No newline at end of file +border 25pxpadding 20pxcontent width: 284pxborder 25pxpadding 20pxscrollbar 16pxclientWidth = 20+284+20 = 324pxclientHeight: 240pxheight: 200pxIntroduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-css.svg b/2-ui/1-document/09-size-and-scroll/metric-css.svg index 13aa62afd..1f2e5f780 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-css.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-css.svg @@ -1 +1 @@ -padding: 20pxheight: 200pxpadding: 20pxborder 25pxpadding 20pxcontent width: 284pxborder 25pxpadding 20pxscrollbar 16pxIntroduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with \ No newline at end of file +padding: 20pxheight: 200pxpadding: 20pxborder 25pxpadding 20pxcontent width: 284pxborder 25pxpadding 20pxscrollbar 16pxIntroduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg index 9e247639b..2d108473e 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg @@ -1 +1 @@ -offsetTop: 180pxoffsetLeft: 180pxIntroduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoftposition: absolute; left: 180px; top: 180px;offsetParent <MAIN> <DIV> \ No newline at end of file +offsetTop: 180pxoffsetLeft: 180pxIntroduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoftposition: absolute; left: 180px; top: 180px;offsetParent <MAIN> <DIV> \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg index 49bdccda7..4d30d90cc 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg @@ -1 +1 @@ -border 25pxpadding 20pxcontent width: 284pxheight: 200pxborder 25pxpadding 20pxscrollbar 16pxoffsetWidth = 25+20+284+20+16+25 = 390pxoffsetHeight: 290pxIntroduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with \ No newline at end of file +border 25pxpadding 20pxcontent width: 284pxheight: 200pxborder 25pxpadding 20pxscrollbar 16pxoffsetWidth = 25+20+284+20+16+25 = 390pxoffsetHeight: 290pxIntroduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg index c6d14d0f3..7f72de422 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg @@ -1 +1 @@ -Introduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997. That Ecma Standard was submitted to ISO/ IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.scrollTopscrollHeight: 723px \ No newline at end of file +Introduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997. That Ecma Standard was submitted to ISO/ IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.scrollTopscrollHeight: 723px \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg index 0c3d29952..75a24e3bc 100644 --- a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg +++ b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg @@ -1 +1 @@ -Introduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997. That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.scrollHeight: 723pxscrollWidth = 324px \ No newline at end of file +Introduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company’s Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997. That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.scrollHeight: 723pxscrollWidth = 324px \ No newline at end of file diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 87f6e4ef2..2dd337871 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -74,7 +74,7 @@ alert('Desplazamiento actual desde la parte izquierda: ' + window.pageXOffset); Estas propiedades son de solo lectura. ```smart header="También disponible como propiedades `window`: `scrollX` y `scrollY`" -Por razones históricas existen ambas propiedades pero ambas son lo mismo: +Por razones históricas existen ambas propiedades, pero ambas son lo mismo: - `window.pageXOffset` es un alias de `window.scrollX`. - `window.pageYOffset` es un alias de `window.scrollY`. ``` diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg index 829d27ee8..18cd37a74 100644 --- a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg +++ b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg @@ -1 +1 @@ -documentElement.clientHeightdocumentElement.clientWidth \ No newline at end of file +documentElement.clientHeightdocumentElement.clientWidth \ No newline at end of file diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg index fc26b023c..2acc6b03e 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg @@ -1 +1 @@ -ball.style.left?fieldCoords.leftevent.clientX \ No newline at end of file +ball.style.left?fieldCoords.leftevent.clientX \ No newline at end of file diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md index 390d49f4d..b41d03cc6 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md @@ -1,6 +1,6 @@ La cinta de imágenes se puede representar como una lista `ul/li` de imágenes ``. -Normalmente dicha cinta es ancha pero colocamos un tamaño fijo `
` alrededor para "cortarla", de modo que solo una parte de la cinta sea visible: +Normalmente dicha cinta es ancha, pero colocamos un tamaño fijo `
` alrededor para "cortarla", de modo que solo una parte de la cinta sea visible: ![](carousel1.svg) diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg index 4ae90b1c7..f5bd9f4f9 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg @@ -1 +1 @@ -(0,0)clientWidth \ No newline at end of file +(0,0)clientWidth \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg index 9ebcffaac..a97d1b47a 100644 --- a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg +++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg @@ -1 +1 @@ -0123 \ No newline at end of file +0123 \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg index 088c71c20..2a8f9aca3 100644 --- a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg +++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg @@ -1 +1 @@ -0123 \ No newline at end of file +0123 \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg index f13c6d74a..32843436d 100644 --- a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg +++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg @@ -1 +1 @@ -startContainer (<p>.firstChild)startOffset (=2)commonAncestorContainer (<p>)endContainer (<b>.firstChild)endOffset (=3) \ No newline at end of file +startContainer (<p>.firstChild)startOffset (=2)commonAncestorContainer (<p>)endContainer (<b>.firstChild)endOffset (=3) \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg index 4bf5b00b0..859f755ce 100644 --- a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg +++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg @@ -1 +1 @@ -0123 \ No newline at end of file +0123 \ No newline at end of file diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index d16fb22c9..94f980648 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -19,7 +19,7 @@ El protocolo `wss://` no solamente está encriptado, también es más confiable. Esto es porque los datos en `ws://` no están encriptados y son visibles para cualquier intermediario. Entonces los servidores proxy viejos que no reconocen el protocolo WebSocket podrían interpretar los datos como cabeceras "extrañas" y abortar la conexión. -En cambio `wss://` es WebSocket sobre TLS (al igual que HTTPS es HTTP sobre TLS), la seguridad de la capa de transporte encripta los datos del que envía y los desencripta el que recibe. Los paquetes de datos pasan encriptados a través de los proxy. Estos servidores no pueden ver lo que hay dentro y los dejan pasar. +En cambio `wss://` es WebSocket sobre TLS (al igual que HTTPS es HTTP sobre TLS), la seguridad de la capa de transporte encripta los datos en el envío y los desencripta en el destino. Así, los paquetes de datos pasan encriptados a través de los proxy, estos servidores no pueden ver lo que hay dentro y los dejan pasar. ``` Una vez que el socket es creado, debemos escuchar los eventos que ocurren en él. Hay en total 4 eventos: diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md index 4f838c787..85770ee37 100644 --- a/6-data-storage/03-indexeddb/article.md +++ b/6-data-storage/03-indexeddb/article.md @@ -277,7 +277,7 @@ db.transaction(store[, type]); - `readonly` -- solo puede leer (es el predeterminado). - `readwrite` -- puede leer o escribir datos (pero no crear/quitar/alterar almacenes de objetos). -También existe el tipo de transacción `versionchange`: tal transacción puede hacer de todo, pero no podemos crearla nosotros a mano. IndexedDB la crea automáticamente cuando abre la base de datos para el manejador `updateneeded`. Por ello, es el único lugar donde podemos actualizar la estructura de base de datos, crear o quitar almacenes de objetos. +También existe el tipo de transacción `versionchange`: tal transacción puede hacer de todo, pero no podemos crearla nosotros a mano. IndexedDB la crea automáticamente cuando abre la base de datos para el manejador `upgradeneeded`. Por ello, es el único lugar donde podemos actualizar la estructura de base de datos, crear o quitar almacenes de objetos. ```smart header="¿Por qué hay diferentes tipos de transacciones?" El rendimiento es la razón por la que necesitamos identificar las transacciones como `readonly` (lectura solamente) o `readwrite` (lectura y escritura). diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md index b3b7c30e7..007e847f3 100644 --- a/7-animation/1-bezier-curve/article.md +++ b/7-animation/1-bezier-curve/article.md @@ -4,7 +4,13 @@ Las curvas de Bézier se utilizan en gráficos por ordenador para dibujar formas En realidad, son algo muy sencillo, vale la pena estudiarlos una vez y luego sentirse cómodo en el mundo de los gráficos vectoriales y las animaciones avanzadas. -## Puntos de control +```smart header="Un poco de teoría, por favor" +Este artículo brinda una base teórica, pero muy necesaria, de lo que son las curvas Bezier; mientras que el [próximo](info:css-animations#bezier-curve) muestra cómo podemos usarlas en animaciones CSS. + +Por favor toma tu tiempo en leer y entender el concepto, te servirá bien. +``` + +## Puntos de Control Una [curva de Bézier](https://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier) está definida por puntos de control. diff --git a/7-animation/1-bezier-curve/bezier3-draw1.svg b/7-animation/1-bezier-curve/bezier3-draw1.svg index fd3ca092f..b3cf15aed 100644 --- a/7-animation/1-bezier-curve/bezier3-draw1.svg +++ b/7-animation/1-bezier-curve/bezier3-draw1.svg @@ -1 +1 @@ -1320.25t = 0.250.25 \ No newline at end of file +1320.25t = 0.250.25 \ No newline at end of file diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 2ac2f64d5..fd48ee6a3 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -254,7 +254,14 @@ Como sabemos, `y` mide "la finalización del proceso de animación". El valor `y Esa es una variante "suave" sin duda. Si ponemos valores `y` como `-99` y `99`, entonces el tren saltaría mucho más fuera del rango. -Pero, ¿cómo hacer la curva de Bézier para una tarea específica? Hay muchas herramientas. Por ejemplo, podemos hacerlo en el sitio . +Pero, ¿cómo hacer la curva de Bézier para una tarea específica? Hay muchas herramientas. + +- Por ejemplo, podemos hacerlo en el sitio . +- El navegador también tiene soporte especial para curvas Bezier en CSS: + 1. Abre las herramientas de desarrollador con `key:F12` (Mac: `key:Cmd+Opt+I`). + 2. Selecciona la pestaña `Elementos` y presta atención al subpanel `Estilos`. + 3. Las propiedades CSS que contengan la palabra `cubic-bezier` tendrán un icono antes de esta palabra. + 4. Haz clic en este icono para editar la curva. ### Pasos @@ -266,7 +273,19 @@ Aquí tenemos una lista de dígitos, sin animaciones, solo como fuente: [codetabs src="step-list"] -Haremos que los dígitos aparezcan de manera discreta haciendo invisible la parte de la lista fuera de la "ventana" roja y desplazando la lista a la izquierda con cada paso. +En el HTML, una línea de dígitos está encerrada en un div de largo fijo`
`: + +```html +
+
0123456789
+
+``` + +El div `#digit`tiene ancho fijo y un borde, entonces se ve como una ventana roja. + +Haremos un temporizador: los dígitos aparecerán uno por uno, de una manera discreta. + +Para lograr esto, ocultaremos el `#stripe` fuera de `#digit` usando `overflow: hidden`, y luego desplazamos el `#stripe` a la izquierda paso a paso. Habrá 9 pasos, un paso para cada dígito: @@ -277,17 +296,17 @@ Habrá 9 pasos, un paso para cada dígito: } ``` -En acción: - -[codetabs src="step"] - El primer argumento de `steps(9, start)` es el número de pasos. La transformación se dividirá en 9 partes (10% cada una). El intervalo de tiempo también se divide automáticamente en 9 partes, por lo que `transition: 9s` nos da 9 segundos para toda la animación: 1 segundo por dígito. El segundo argumento es una de dos palabras: `start` o `end`. El `start` significa que al comienzo de la animación debemos hacer el primer paso de inmediato. -Podemos observar eso durante la animación: cuando hacemos clic en el dígito, cambia a `1` (el primer paso) inmediatamente, y luego cambia al comienzo del siguiente segundo. +En acción: + +[codetabs src="step"] + +Un clic en el dígito lo cambia a `1` (el primer paso) inmediatamente, y luego cambia al comienzo del siguiente segundo. El proceso está progresando así: @@ -297,7 +316,9 @@ El proceso está progresando así: - `8s` -- `-90%` - (el último segundo muestra el valor final). -El valor alternativo 'end' significaría que el cambio debe aplicarse no al principio, sino al final de cada segundo. +Aquí el primer cambio fue inmediato por el`start` en el `steps` + +El valor alternativo 'end' haría que el cambio se aplicara no al principio sino al final de cada segundo. Entonces el proceso para `steps(9, end)` sería así: @@ -307,22 +328,22 @@ Entonces el proceso para `steps(9, end)` sería así: - ... - `9s` -- `-90%` -Aquí está el `step(9, end)` en acción (observa la pausa entre el primer cambio de dígitos): +Aquí está el `step(9, end)` en acción (observa la pausa antes del primer cambio de dígitos): [codetabs src="step-end"] -También hay valores abreviados: +También hay algunas formas abreviadas predefinidas para `steps(...)`: - `step-start` -- es lo mismo que` steps(1, start)`. Es decir, la animación comienza de inmediato y toma 1 paso. Entonces comienza y termina inmediatamente, como si no hubiera animación. - `step-end` -- lo mismo que `steps(1, end)`: realiza la animación en un solo paso al final de `transition-duration`. -Estos valores rara vez se usan, porque eso no es realmente animación, sino un cambio de un solo paso. +Estos valores rara vez se usan porque no representan una verdadera animación sino un cambio de un solo paso. ## Evento transitionend Cuando finaliza la animación CSS, se dispara el evento `transitionend`. -Es ampliamente utilizado para hacer una acción después que se realiza la animación. También podemos unir animaciones. +Es ampliamente utilizado para hacer una acción después de que se realiza la animación. También podemos unir animaciones. Por ejemplo, el barco a continuación comienza a navegar ida y vuelta al hacer clic, cada vez más y más a la derecha: diff --git a/8-web-components/1-webcomponents-intro/web-components-twitter.svg b/8-web-components/1-webcomponents-intro/web-components-twitter.svg index 9d3b0b00b..8f59f789f 100644 --- a/8-web-components/1-webcomponents-intro/web-components-twitter.svg +++ b/8-web-components/1-webcomponents-intro/web-components-twitter.svg @@ -1 +1 @@ -1243567 \ No newline at end of file +1243567 \ No newline at end of file diff --git a/figures.sketch b/figures.sketch index 44c75eb06..104333192 100644 Binary files a/figures.sketch and b/figures.sketch differ