Keiler Guardo Herrera - freeCodeCamp.org

Cómo instalar Node.js en Ubuntu y actualizar npm a la última versión

Keiler Guardo Herrera — Wed, 03 Aug 2022 21:33:18 +0000

Artículo original: How to Install Node.js on Ubuntu and Update npm to the Latest Version

Si intentas instalar la última versión de Node usando el gestor de paquetes apt, acabarás con la versión 10.19.0. Esta es la última versión en la tienda de aplicaciones de ubuntu, pero no es la última versión liberada de NodeJS.

Esto se debe a que cuando se publican nuevas versiones de un software, el equipo de Ubuntu puede tardar meses en probarlo y publicarlo en la tienda oficial de Ubuntu. Como resultado, para obtener las últimas versiones de cualquier software, es posible que tengamos que utilizar paquetes privados publicados por los desarrolladores.

En este tutorial, lo que queremos hacer es obtener la v12.18.1 (LTS - con soporte a largo plazo) o la v14.4 de Node. Para obtener las últimas versiones, podemos utilizar nodesource o nvm (node version manager). Te mostraré cómo usar ambos.

Todos los comandos aquí serán ejecutados usando el CLI/terminal de Ubuntu.

Usando NVM - mi método preferido

Me gusta nvm porque me permite usar diferentes versiones de node para diferentes proyectos. A veces, puedes estar colaborando en un proyecto con alguien que usa una versión diferente de node y necesitas cambiar las versiones de node a lo que el proyecto requiere. Para esto, nvm es la mejor herramienta.

Instalar NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Para comprobar que nvm está instalado, escriba nvm --version. Si obtienes un número de versión como 0.35.3, entonces sabes que nvm fue instalado con éxito.

Reinicia tu terminal para que los cambios surtan efecto.

Instalar NodeJS

A continuación, vamos a instalar la versión 14.4 de Nodejs.

Simplemente, ejecuta nvm install 14.4.0.

Puedes utilizar un comando similar para instalar cualquier versión de node, por ejemplo nvm install 12.18.1.

Este comando instala automáticamente nodejs, así como la última versión de npm que está en v6.14.5.

Si alguna vez necesitas cambiar de la versión de node, puedes simplemente ejecutar nvm use , por ejemplo nvm use v12.18.1.

Para listar las diferentes versiones de node que tiene instaladas con nvm, ejecute nvm ls.

Instalar Nodesource

Ejecuta el siguiente comando para decirle a Ubuntu que queremos instalar el paquete de Nodejs desde nodesource.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Ten en cuenta que v14.4.0 es la última versión de Node, pero actualmente no tiene LTS - soporte a largo plazo proporcionado para ello. Para instalar la última versión de Node con LTS, cambie 14 en el comando anterior por 12.

Es posible que se te pida que introduzcas la contraseña de tu usuario root. Introduce y pulsa enter/return.

Instalar NodeJS

Una vez que hayamos terminado de configurar Nodesource, podemos instalar Nodejs v14.4. Ejecuta sudo apt-get install -y nodejs.

Después que hayamos terminado, podemos comprobar que tenemos la última versión de Node instalada. Simplemente, escribe nodejs -v en tu terminal y debería devolver la v14.4.0.

En este punto deberías tener npm instalado automáticamente. Para comprobar qué versión de npm tienes, ejecuta npm version. Si no obtiene un objeto que incluya la última versión de npm en 6.14.5, {npm: '6.14.5'}, entonces puedes actualizar npm manualmente ejecutando el siguiente comando:

npm install -g npm@latest.

Si te encuentras con algún problema de que npm no se puede actualizar porque no está instalado, puedes instalar npm primero usando sudo apt-get install -y npm, y luego ejecutar el comando anterior para actualizarlo.

Para que ciertos paquetes de npm se ejecuten, también necesitamos ejecutar el comando sudo apt install build-essential.

Y eso es todo.

Ya tienes las últimas versiones de NodeJS y NPM en tu máquina Ubuntu.

Ve a construir grandes productos :)

Cómo centrar un Div con CSS: 10 maneras diferentes

Keiler Guardo Herrera — Wed, 03 Aug 2022 21:08:09 +0000

Artículo original: How to Center a Div with CSS – 10 Different Ways

Como desarrollador web, a veces centrar un div parece uno de los trabajos más difíciles del planeta Tierra.

Pues bien, ya no. En este artículo, aprenderás 10 formas diferentes de centrar un div. Exploraremos cómo centrar divs utilizando la propiedad position de CSS, CSS Flexbox y CSS Grid.

Después de leer todo este artículo, estoy seguro de que empezarás a centrar divs como un profesional.

Cómo centrar un `Div`

Para este tutorial, utilizaré el mismo HTML para los 10 métodos que discutiremos a continuación. El HTML sólo contiene un div padre y un div hijo dentro de él.

El objetivo principal de este artículo es centrar el div hijo con respecto al padre. Sólo voy a cambiar los archivos CSS, pero podrás ver los efectos de los 10 diferentes métodos.

El archivo HTML principal es así:





  
  
  
  Centrando divs

Con sólo el estilo básico que se da en las siguientes líneas:

#contenedorPadre {
  width: 400px;
  height: 400px;
  background-color: #f55353;
}
#contenedorHijo {
  width: 100px;
  height: 100px;
  background-color: #feb139;
}

Tendremos algo como esto:

What the basic HTML and CSS styling gives us.

Simplemente hacemos un div padre y le damos un width y height de 400px, y un color de #f55353.

Del mismo modo creamos un div hijo dentro de él y le damos un width y un height de 100px y le damos un color de #feb139.

El objetivo final de este artículo será realizar esta transformación:

Cómo centrar un Div usando la propiedad `position` de CSS

1. Cómo usar position: relative, absolute y los valores de desplazamiento top, left

#contenedorPadre {
  position: relative;
}
#contenedorHijo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

La propiedad position en CSS establece cómo se posiciona el elemento en la página. El valor por defecto de la propiedad position es static. Los otros valores que toma la propiedad position son relative, absolute, fixed y sticky.

Ahora bien, cuando damos un position: absolute a un elemento del DOM, éste se vuelve absoluto con respecto a toda la página. Esto sería útil si quisiéramos centrar el div con respecto a toda la página.

Por otro lado, al poner el elemento padre en position: relative, hace que el elemento hijo (con position: absolute) sea absoluto, relativo al elemento padre y no a toda la página.

En el ejemplo anterior hacemos precisamente eso. Le damos al elemento padre una position: relative y al hijo una position: absolute.

Junto con la propiedad position, podemos especificar otras cuatro propiedades: top, right, bottom y left, que determinan la posición final del elemento.

La posición top y bottom especifican la posición vertical del elemento, mientras que left y right especifican la posición horizontal.

2. Cómo usar position: relative, absolute, valores de desplazamiento top, left, right, bottom y margin: auto

#contenedorPadre {
  position: relative;
}
#contenedorHijo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

Continuando con nuestro conocimiento de las posiciones del anterior punto 1, aquí utilizamos la propiedad margin de CSS. margin: auto permite al navegador seleccionar un margen adecuado para el elemento hijo.

En la mayoría de los casos permite que el elemento hijo tome su ancho especificado y el navegador distribuye el espacio restante de forma equitativa entre el par de márgenes izquierdo y derecho o el par de márgenes superior e inferior o entre ambos pares.

Si mencionamos sólo top: 0, bottom: 0 y margin: auto, centra el elemento hijo verticalmente.

Del mismo modo, si mencionamos sólo left: 0, right: 0 y margin: auto, entonces se centrará el elemento hijo horizontalmente.

Y si se mencionan todas las propiedades como se muestra en el bloque de código anterior, entonces se obtiene un div perfectamente centrado tanto horizontal como verticalmente.

Cómo centrar un Div usando CSS Flexbox

3. Cómo usar Flexbox, justify-content y align-item

Los dos métodos anteriores se basan más en un método clásico de alineación de elementos en la página. Los enfoques modernos hacen uso de las propiedades Flexbox (para el modelado de diseño en una dirección) y Grid layout (para el modelado de diseño bidimensional más complejo).

Veamos el enfoque Flexbox:

Flexbox no es una sola propiedad, sino que es un módulo que comprende un conjunto de propiedades. Algunas de estas propiedades son para el contenedor (es decir, el contenedor padre) y otras para los elementos hijos dentro de él.

El siguiente diagrama muestra una lista de propiedades que están destinadas a los elementos padre e hijo con respecto a Flexbox.

Ahora no es posible cubrir todas las propiedades en este artículo. Más bien vamos a ver algunas de las propiedades que vamos a utilizar.

Como se mencionó anteriormente, hay dos entidades diferentes en el modelo Flexbox, el contenedor padre y el elemento hijo.

La propiedad display: flex define un contenedor como un contenedor flex. flex-direction es otra propiedad del contenedor padre que puede tomar cualquiera de los siguientes valores: row (valor por defecto), row-reverse, column y column-reverse.

Cuando se trabaja con Flexbox, necesitamos tener en cuenta dos ejes diferentes, que son el eje principal y el eje transversal.

Para los casos en los que flex-dirección es row o row-reverse, el eje horizontal es el eje principal y el eje vertical es el eje transversal.

Del mismo modo, cuando flex-direction es column o column-reverse, entonces el eje vertical es el eje principal y el eje horizontal es el eje transversal. Para mayor claridad visual, vea los siguientes diagramas:

La propiedad justify-content del contenedor padre define la alineación de sus hijos a lo largo del eje principal. Así, justify-content: center establece la alineación de todos sus elementos hijos en el centro con respecto al eje principal.

Del mismo modo, la propiedad align-items del contenedor padre define la alineación de sus hijos a lo largo del eje transversal. Así, align-items: center establece la alineación de todos sus elementos hijos en el centro con respecto al eje transversal.

Así, el bloque de código siguiente alineará perfectamente nuestro elemento hijo en el centro del elemento padre tanto vertical como horizontalmente.

En este método, no necesitamos especificar nada explícitamente para el elemento hijo. display: flex, justify-content y align-items manejan todo desde el componente padre.

#contenedorPadre {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. Cómo usar Flexbox, justify-content y align-self

Este método es sólo una alternativa al método anterior y es bastante similar a él.

Pero en lugar de usar la propiedad align-items (en la propiedad del contenedor padre), que establece la alineación para todos los elementos hijos con respecto al eje transversal, usamos align-self (en los elementos hijos) que establece la alineación de los elementos flex individuales en el eje transversal.

#contenedorPadre {
  display: flex;
  justify-content: center;
}
#contenedorHijo {
  align-self: center;
}

5. Cómo usar Flexbox y margin: auto

Flexbox nos da una capacidad de alineación y distribución del espacio muy potente. Además, como se mencionó anteriormente, margin: auto permite al navegador seleccionar un margen adecuado para el elemento hijo.

En la mayoría de los casos permite que el elemento hijo tome su ancho especificado, y el navegador distribuye el espacio restante de forma equitativa entre el par de márgenes izquierdo y derecho o el par de márgenes superior e inferior o entre ambos pares.

Esto significa que establecer el contenedor padre como flex y dar al hijo un margin: auto permite al navegador distribuir uniformemente el espacio sobrante a lo largo de las direcciones vertical y horizontal.

#contenedorPadre {
  display: flex;
}
#contenedorHijo {
  margin: auto;
}

Cómo centrar un Div usando CSS Grid

6. Cómo usar Grid, justify-content y align-items

CSS Grid o simplemente Grid se utiliza para el modelado de diseño en dos dimensiones en comparación con Flexbox que se utiliza para el modelado unidimensional.

De forma similar a Flexbox, tenemos el concepto de contenedor de cuadrícula o contenedor padre y elementos de cuadrícula o elementos hijos.

El siguiente diagrama enumera todas las propiedades que se pueden utilizar para el padre y los hijos. Como CSS Grid es un tema enorme en sí mismo, no está en el alcance de este artículo discutir sobre cada una de las propiedades. Así que vamos a discutir las propiedades que estamos utilizando en este artículo.

display: grid hace que un elemento se convierta en un contenedor de cuadrícula.

justify-items y align-items alinean los elementos dentro de la cuadrícula a lo largo del eje de la línea (fila) y del bloque (columna) respectivamente.

Por otro lado, si el tamaño total de la cuadrícula es menor que el contenedor (lo que puede ocurrir si todos los elementos de la rejilla están dimensionados con unidades no flexibles como px), entonces en ese caso podemos controlar la alineación de la cuadrícula dentro del contenedor utilizando justify-content y align-content.

justify-content y align-content alinean la cuadrícula a lo largo del eje de la línea (fila) y del eje del bloque (columna) respectivamente.

En nuestro caso sólo hay una cuadrícula y un solo elemento hijo dentro de ella, por lo que podemos utilizar justify-content o justify-items así como align-content o align-items indistintamente y obtener el mismo resultado.

#contenedorPadre {
  display: grid;
  justify-content: center;
  align-items: center;
}

7. Cómo usar Grid y place-items

Puedes usar place-items para establecer las propiedades align-items y justify-items en la misma declaración. Del mismo modo, place-content establece tanto justify-content como align-content en la misma declaración.

Como se ha mencionado anteriormente, en este caso de uso podemos usar justify-content o justify-items así como align-content o align-items indistintamente. Del mismo modo, también podemos utilizar indistintamente place-items o place-content y obtener el mismo resultado (específicamente para este caso de uso. Para cualquier otro caso de uso hay que analizar qué propiedad se debe utilizar).

#contenedorPadre {
  display: grid;
  place-items: center;
}

8. Cómo usar Grid, align-self y justify-self

Al igual que Flexbox, Grid también soporta la alineación individual de los elementos de la rejilla utilizando las propiedades align-self y justify-self (propiedades que deben ser especificadas en el elemento hijo).

justify-self alinea los elementos de la cuadrícula dentro de una celda a lo largo del eje de la línea (fila) mientras que align-self alinea los elementos de la cuadrícula dentro de la celda a lo largo del eje de la columna.

#contenedorPadre {
  display: grid;
}
#contenedorHijo {
  align-self: center;
  justify-self: center;
}

9. Cómo usar Grid y place-self

La propiedad place-self establece las propiedades justify-self y align-self en una sola declaración. Así que asignar un elemento hijo a place-self: center centra al hijo tanto vertical como horizontalmente.

#contenedorPadre {
  display: grid;
}
#contenedorHijo {
  place-self: center;
}

10. Cómo usar Grid y margin: auto

De forma similar a Flexbox, Grid también nos ofrece potentes capacidades de alineación y distribución del espacio.

Como vimos en el punto 5, podemos hacer un proceso similar con Grid en lugar de usar Flexbox y obtendremos el mismo resultado si asignamos margin: auto al elemento hijo.

#contenedorPadre {
  display: grid;
}
#contenedorHijo {
  margin: auto;
}

Este es el resultado

Pues como era de esperar, siguiendo cualquiera de los métodos anteriores obtendremos esto:

Resumen

En este artículo, vimos cómo centrar un div usando 10 métodos diferentes. Esos métodos fueron:

Usando position: relative, absolute, valores de desplazamiento como top y left
Usando position: relative, absolute, valores de desplazamiento como top, left, right, bottom y margin: auto
Usando flexbox, justify-content y align-item
Usando flexbox, justify-content y align-self
Usando flexbox y margin: auto
Usando grid, justify-content y align-items
Usando grid y place-items
Usando grid, align-self y justify-self
Usando grid y place-self
Usando grid y margin: auto

También vimos lo que significan todas estas propiedades como justify-content, align-items, position y mucho más, además cómo podemos usar algunas de ellas juntas para centrar nuestros divs.

Enlace a GitHub

Puedes encontrar el enlace de GitHub para todos los archivos de todos los métodos mencionados anteriormente aquí: Enlace a Github

Resumen

¡Gracias por leer! Espero que te haya gustado este artículo sobre 10 métodos diferentes para centrar un div y espero que te sean útiles en el futuro.

Considera la posibilidad de compartir este artículo con tus amigos, te lo agradecería mucho. Permanece atento a más contenido increíble. ¡Paz y tranquilidad! ?

Enlaces a redes sociales

Valores falsos en JavaScript

Keiler Guardo Herrera — Mon, 01 Aug 2022 02:44:29 +0000

Artículo original: Falsy Values in JavaScript

Descripción

Un valor falso es algo que se evalúa como FALSE, por ejemplo, cuando se comprueba una variable. Solo hay seis valores falsos en JavaScript: undefined, null, NaN, 0, "" (cadena vacía), y false por supuesto.

Comprobación de valores falsos en las variables

Es posible comprobar un valor falso en una variable con una simple condición:

if (!variable) {
  // Cuando la variable tiene un valor falso la condición es true.
}

Ejemplos generales

var cadena = ""; // <-- falso

var cadenaLlena = "una cadena de texo aquí"; // <-- verdadero

var cero = 0; // <-- falso

var numeroMayorQueCero // <-- verdadero

var arregloVacio = []; // <-- verdadero, exploraremos más sobre esto a continuación

var objetoVacio = {}; // <-- verdadero

Diversión con arreglos

if ([] == false) // <-- verdadero, ejecutará el código del bloque if

if ([]) // <-- verdadero, también ejecutará el código del bloque if

if ([] == true) // <-- falso, NO ejecutará el código del bloque if

if (![]) // <-- falso, tampoco ejecutará el código del bloque if

Advertencia

Ten en cuenta el tipo de datos cuando evalúes un valor en un contexto booleano. Si el tipo de dato del valor es un número, la evaluación verdadero/falso puede dar un resultado inesperado:

const coincidir = { equipoA: 0, equipoB: 1 }
if (coincidir.equipoA)
  // Lo siguiente no se ejecutará debido a la evaluación falsa
  console.log('Equipo A: ' + coincidir.equipoA);
}

Una alternativa al caso de uso anterior es evaluar el valor utilizando typeof:

const coincidir = { equipoA: 0, equipoB: 1 }
if (typeof coincidir.equipoA === 'number')
  console.log('Equipo A: ' + coincidir.equipoA);
}

JavaScript rest vs. operador de propagación (spread): ¿Cuál es la diferencia?

Keiler Guardo Herrera — Mon, 01 Aug 2022 02:37:35 +0000

Artículo original: JavaScript Rest vs Spread Operator – What’s the Difference?

JavaScript utiliza tres puntos (...) tanto para los operadores de rest como para propagación. Pero estos dos operadores no son lo mismo.

La principal diferencia entre rest y el operador propagación es que el operador rest pone el resto de algunos valores específicos suministrados por el usuario en un arreglo de JavaScript. Pero la progración expande los iterables en elementos individuales.

Por ejemplo, considera este código que utiliza rest para encerrar algunos valores en un arreglo:

// Utiliza rest para encerrar el resto de los valores específicos suministrados por el usuario en un arreglo:
function miBiografia(primerNombre, apellido, ...otraInformacion) { 
  return otraInformacion;
}

// Llama la función miBiografia pasando cinco argumentos a sus parámetros:
miBiografia("Oluwatobi", "Sofela", "CodeSweetly", "Desarrollador Web", "Masculino");

// La llamada de arriba devolverá:
["CodeSweetly", "Desarrollador Web", "Masculino"]

Pruébalo en StackBlitz

En el ejemplo anterior, utilizamos el parámetro rest en ...otraInformacion para poner "CodeSweetly", "Desarrollador Web" y "Masculino" en un un arreglo.

Ahora, considera este ejemplo del operador de propagación:

// Define una función con tres parámetros:
function miBiografia(primerNombre, apellido, compania) { 
  return `${primerNombre} ${apellido} dirige ${compania}`;
}

// Utiliza propagación para expandir los elementos de un arreglo de elementos individuales:
miBiografia(...["Oluwatobi", "Sofela", "CodeSweetly"]);

// La llamada de arriba devolverá:
“Oluwatobi Sofela dirige CodeSweetly”

Pruébalo en StackBlitz

En el fragmento anterior, hemos utilizado el operador de propagación (...) para propagar el contenido de ["Oluwatobi", "Sofela", "CodeSweetly"] entre los parámetros de miBiografia().

No te preocupes si aún no entiendes el operador rest o el operador de propagación. ¡Este artículo lo tiene cubierto!

En las siguientes secciones, discutiremos cómo trabaja el operador rest y operador de propagación en JavaScript.

Así que, sin más preámbulos, empecemos con el operador rest.

¿Qué es exactamente el operador rest?

El operador rest se utiliza para poner el resto de algunos valores específicos suministrados por el usuario en un arreglo de JavaScript.

Así, por ejemplo, aquí está la sintaxis de rest:

...tusValores

Los tres puntos (...) en el fragmento anterior simbolizan el operador rest.

El texto que aparece después del operador rest hace referencia a los valores que deseas incluir en un arreglo. Sólo se puede utilizar antes del último parámetro en la definición de una función.

Para entender mejor la sintaxis, veamos cómo funciona rest con las funciones de JavaScript.

¿Cómo funciona el operador rest en una función?

En las funciones de JavaScript, rest se utiliza como antepuesto del último parámetro de la función.

He aquí un ejemplo:

// Define una función con dos parámetros regulares y un parámetro rest:
function miBiografia(primerNombre, apellido, ...otraInformacion) { 
  return otraInformacion;
}

El operador rest (...) le indica al ordenador que añada cualquier argumento en otraInformacion suministrado por el usuario en un arreglo. A su vez, asigna ese arreglo al parámetro otraInformacion.

Como tal, llamamos a ...otraInformacion un parámetro rest.

Nota: Los argumentos son valores opcionales que se pueden pasar al parámetro de una función a través de un invocador.

He aquí otro ejemplo:

// Define una función con dos parámetros regulares y un parámetro rest:
function miBiografia(primerNombre, apellido, ...otraInformacion) { 
  return otraInformacion;
}

// Llama la función miBiografia pasando cinco argumentos a sus parámetros:
miBiografia("Oluwatobi", "Sofela", "CodeSweetly", "Desarrollador Web", "Masculino");

// La invocación anterior devolverá:
["CodeSweetly", "Desarrollador Web", "Masculino"]

Pruébalo en StackBlitz

En el fragmento anterior, observa que la invocación de miBiografia pasó cinco argumentos a la función.

Es decir, "Oluwatobi" y "Sofela" fueron asignados a los parámetros primerNombre y apellido.

Al mismo tiempo, el operador rest añadió los argumentos restantes ( "CodeSweetly", "Desarrollador Web", y "Hombre") en un arreglo y asignó ese arreglo al parámetro otraInformacion.

Por lo tanto, la función miBiografia() devolvió correctamente ["CodeSweetly", "Desarrollador Web", "Hombre"] como contenido del parámetro rest otraInformacion.

¡Cuidado! No puedes utilizar `“use strict”` dentro de una función que contenga un parámetro rest

Tenga en cuenta que no puede utilizar la instrucción “use strict” dentro de ninguna función que contenga un parámetro rest, un parámetro por defecto o un parámetro de desestructuración, or destructuring parameter. De lo contrario, el ordenador lanzará un error de sintaxis.

Por ejemplo, considere el siguiente ejemplo:

// Define una función con un parámetro res:
function imprimirMiNombre(...valor) {
  "use strict";
  return valor;
}

// La definición anterior devolverá:
"Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list"

Pruébalo en CodeSandbox

imprimirMiNombre() devolvió un error de sintaxis porque se utilizó la instrucción “use strict” dentro de una función con un parámetro rest.

Pero supón que necesitas que tu función esté en modo estricto a la vez que utilizas el parámetro rest. En tal caso, escribir la instrucción “use strict” fuera de la función.

He aquí un ejemplo:

// Define la instrucción “use strict” fuera de tu función:
"use strict";

// Define una función con un parámetro rest:
function imprimirMiNombre(...valor) {
  return valor;
}

// Llama la función imprimirMiNombre pasando dos argumentos a sus parámetros:
imprimirMiNombre("Oluwatobi", "Sofela");

// La invocación de arriba devolverá:
["Oluwatobi", "Sofela"]

Pruébalo en CodeSandbox

Nota: Sólo coloca la instrucción “use strict” fuera de tu función si está bien que todo el script o el ámbito que lo encierra esté en modo estricto.

Así que ahora que sabemos cómo funciona rest en una función, podemos hablar de cómo funciona en una asignación de desestructuración.

Cómo funciona el operador Rest en una asignación de desestructuración

El operador rest suele utilizarse como prefijo de la última variable de la asignación de desestructuración.

He aquí un ejemplo:

// Define un arreglo de desestructuración con dos variables regulares y una variable rest:
const [primerNombre, apellido, ...otraInformacion] = [
  "Oluwatobi", "Sofela", "CodeSweetly", "Desarrollador Web", "Masculino"
];

// Consultamos la variable otraInformacion:
console.log(otraInformacion); 

// La llamada de arriba devolverá:
["CodeSweetly", "Desarrollador Web", "Masculino"]

Pruébalo en StackBlitz

El operador rest (...) indica a la computadora que añada el resto de los valores suministrados por el usuario en un arreglo. Luego, asigna ese arreglo a la variable otraInformacion.

Como tal, puedes llamar a ...otraInformacion una variable rest.

Aquí hay otro ejemplo:

// Define un objeto de desestructuración con dos variables regulares y una variable res:
const { primerNombre, apellido, ...otraInformacion } = {
  primerNombre: "Oluwatobi",
  apellido: "Sofela", 
  nombreCompania: "CodeSweetly",
  profesion: "Desarrollador Web",
  genero: "Masculino"
}

// Llama a la variable otraInformacion:
console.log(otraInformacion);

// La llamada de arriba devolverá:
{nombreCompania: "CodeSweetly", profesion: "Desarrollador Web", genero: "Masculino"}

Pruébalo en StackBlitz

En el fragmento anterior, observa que el operador rest asignó un objeto de propiedades - no un arreglo - a la variable otraInformacion.

En otras palabras, siempre que utilice rest en un objeto desestructurado el operador rest producirá un objeto de propiedades.

Sin embargo, si se utiliza rest en un arreglo o función de desestructuración el operador producirá un arreglo literal.

Antes de terminar nuestra discusión sobre rest, debes ser consciente de algunas diferencias entre los arguments de JavaScript y el parámetro rest. Por lo tanto, vamos a hablar de eso a continuación.

Argumentos vs. parámetro Rest: ¿Cuál es la diferencia?

Estas son algunas de las diferencias entre los argumentos de JavaScript y el parámetro rest:

Diferencia 1: El objeto de `argumentos` es un objeto similar a un arreglo - ¡no un arreglo real!

Tenga en cuenta que el objeto de argumentos de JavaScript no es un arreglo de verdad. En su lugar, es un objeto similar a un arreglo que no tiene las características completas de un arreglo regular de JavaScript.

El parámetro rest, sin embargo, es un objeto de arreglo de verdad. Como tal, puedes utilizar todos los métodos de arreglos en él.

Así, por ejemplo, puedes llamar los métodos sort(), map(), forEach(), o pop() Pero no puedes hacer lo mismo con el objeto de argumentos.

Diferencia 2: No se puede utilizar el objeto de `argumentos` en una función de flecha

El objeto argumentos no está disponible dentro de una función de flecha, por lo que no se puede utilizar ahí. Pero puedes usar el parámetro rest dentro de todas las funciones - incluyendo la función flecha.

Diferencia 3: Deja que `rest` sea tu preferido

Es mejor utilizar los parámetros rest en lugar del objeto de argumentos especialmente cuando se escribe código compatible con ES6.

Ahora que sabemos cómo funciona rest, vamos a discutir el operador de propagación para que podamos ver las diferencias.

¿Qué es el operador de `propagación` y cómo funciona en JavaScript?

El operador de propagación (...) ayuda a expandir los iterables en elementos separados.

La sintaxis de propagación funciona dentro de los literales de los arreglos, las llamadas a las funciones y los objetos de propiedad inicializados para expandir los valores de los objetos iterables en elementos separados. Así que, efectivamente, hace lo contrario que el operador rest.

Nota: Un operador de propagación es efectivo sólo cuando se usa dentro de arreglos literales, llamadas a funciones u objetos de propiedades inicializadas.

Entonces, ¿qué significa exactamente esto? Veamos con algunos ejemplos.

Ejemplo 1 de propagación: Cómo funciona la propagación en un arreglo literal

const miNombre = ["Sofela", "es", "mi"];
const sobreMi = ["Oluwatobi", ...miNombre, "nombre."];

console.log(sobreMi);

// La llamada de arriba devolverá:
[ "Oluwatobi", "Sofela", "es", "mi", "nombre." ]

Pruébalo en StackBlitz

El fragmento anterior utilizó la expresión (...) para copiar el arreglo miNombre dentro de sobreMi.

Nota:

Las alteraciones de miNombre no se reflejarán en sobreMi porque todos los valores dentro de miNombre son primitivos. Por lo tanto, el operador de propagación simplemente copió y pegó el contenido de miNombre en sobreMi sin crear ninguna referencia al arreglo original.
Como mencionó @nombrekeff en un comentario aquí, el operador de propagación sólo hace una copia superficial. Así que, ten en cuenta que suponiendo que miNombre contuviera cualquier valor no primitivo, el ordenador habría creado una referencia entre miNombre y sobreMi. Vea la información 3 un poco más abajo, para más información sobre cómo funciona el operador de propagación con valores primitivos y no primitivos.
Supongamos que no utilizamos la sintaxis de propagación para duplicar el contenido de miNombre. Por ejemplo, si hubiéramos escrito const sobreMi = ["Oluwatobi", miNombre, "nombre."]. En tal caso, el ordenador habría asignado una referencia a miNombre. Así, cualquier cambio realizado en el arreglo original se reflejaría en el duplicado.

Ejemplo 2 de propagación: Cómo utilizar propagación para convertir una cadena en elementos individuales de un arreglo

const miNombre = "Oluwatobi Sofela";

console.log([...miNombre]);

// La llamada de arriba devolverá:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]

Pruébalo en StackBlitz

En el fragmento anterior, hemos utilizado la sintaxis de propagación (...) dentro de un arreglo literal ([...]) para expandir el valor de la cadena de miNombre en elementos individuales.

Así, "Oluwatobi Sofela" se expandió en [ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ].

Ejemplo 3: Cómo funciona el operador de propagación en una llamada de función

const numeros = [1, 3, 5, 7];

function agregarNumeros(a, b, c, d) {
  return a + b + c + d;
}

console.log(agregarNumeros(...numeros));

// La llamada de arriba devolverá:
16

Pruébalo en StackBlitz

En el fragmento anterior, hemos utilizado la sintaxis de propagación para distribuir el contenido de un arreglo de numeros entre los parámetros de agregarNumeros().

Supongamos que el arreglo de numeros tiene más de cuatro elementos. En tal caso, el ordenador sólo utilizará los cuatro primeros elementos como argumento de agregarNumeros() e ignorará el resto.

He aquí un ejemplo:

const numeros = [1, 3, 5, 7, 10, 200, 90, 59];

function agregarNumeros(a, b, c, d) {
  return a + b + c + d;
}

console.log(agregarNumeros(...numeros));

// La llamada de arriba devolverá:
16

Pruébalo en StackBlitz

He aquí otro ejemplo:

const miNombre = "Oluwatobi Sofela";

function deletrearNombre(a, b, c) {
  return a + b + c;
}

console.log(deletrearNombre(...miNombre));      // devolverá: "Olu"

console.log(deletrearNombre(...miNombre[3]));   // devolverá: "wundefinedundefined"

console.log(deletrearNombre([...miNombre]));    // devolverá: "O,l,u,w,a,t,o,b,i, ,S,o,f,e,l,aundefinedundefined"

console.log(deletrearNombre({...miNombre}));    // devolverá: "[object Object]undefinedundefined"

Pruébalo en StackBlitz

Ejemplo 4 de propagación: Cómo funciona la propagación en un objeto literal

const misNombres = ["Oluwatobi", "Sofela"];
const biografia = { ...misNombres, dirige: "codesweetly.com" };

console.log(biografia);

// La llamada de arriba devolverá:
{ 0: "Oluwatobi", 1: "Sofela", dirige: "codesweetly.com" }

Pruébalo en StackBlitz

En el fragmento anterior, hemos utilizado la propagación dentro del objeto biografia para expandir los valores de misNombres en propiedades individuales.

Lo que hay que saber sobre el operador de propagación

Tenga en cuenta estos tres datos esenciales siempre que decida utilizar el operador de propagación.

Información 1: Los operadores de propagación no pueden expandir los valores de los objetos literales

Dado que un objecto de propiedades no es un objeto iterable, no puedes utilizar el operador de propagación para expandir sus valores.

Sin embargo, puedes utilizar el operador de propagación para clonar propiedades de un objeto a otro.

He aquí un ejemplo:

const miNombre = { primerNombre: "Oluwatobi", apellido: "Sofela" };
const biografia = { ...miNombre, sitioWeb: "codesweetly.com" };

console.log(biografia);

// La llamada de arriba retornará:
{ primerNombre: "Oluwatobi", apellido: "Sofela", sitioWeb: "codesweetly.com" };

Pruébalo en StackBlitz

El fragmento anterior utilizó el operador de propagación para clonar el contenido de miNombre en el objeto biografia.

Nota:

El operador de propagación sólo puede expandir los valores de los objetos iterables.
Un objeto es iterable sólo si él (o cualquier objeto en su cadena de prototipos) tiene una propiedad con una clave @@iterator.
Array, TypedArray, String, Map, y Set son todos tipos iterables incorporados porque tienen la propiedad @@iterator por defecto.
Un objeto no es un tipo de datos iterable porque no tiene la propiedad @@iterator por defecto.
Puedes hacer que un objeto sea iterable añadiéndole @@iterator.

Información 2: El operador de propagación no clona propiedades idénticas

Supón que utilizas el operador de propagación para clonar propiedades del objeto A en el objeto B. Y supón que el objeto B contiene propiedades idénticas a las del objeto A. En tal caso, las versiones de B anularán las de A.

He aquí un ejemplo:

const miNombre = { primerNombre: "Tobi", apellido: "Sofela" };
const biografia = { ...miNombre, primerNombre: "Oluwatobi", sitioWeb: "codesweetly.com" };

console.log(biografia);

// La llamada de arriba devolverá:
{ primerNombre: "Oluwatobi", apellido: "Sofela", sitioWeb: "codesweetly.com" };

Pruébalo en StackBlitz

Observe que el operador de propagación no ha copiado la propiedad miNombre de primerNombre en el objeto biografia porque biografia ya contiene una propiedad primerNombre.

Información 3: ¡Cuidado con el funcionamiento de propagación cuando se utiliza en objetos que no son primitivos!

Supón que utilizas el operador propagación en un objeto (o arreglo) que contiene sólo valores primitivos. El ordenador no creará ninguna referencia entre el objeto original y el duplicado.

Por ejemplo, considera este código de abajo:

const miNombre = ["Sofela", "es", "mi"];
const sobreMi = ["Oluwatobi", ...miNombre, "nombre."];

console.log(sobreMi);

// La llamada de arriba devolverá:
["Oluwatobi", "Sofela", "es", "mi", "nombre."]

Pruébalo en StackBlitz

Observa que cada elemento de miNombre es un valor primitivo. Por lo tanto, cuando usamos el operador de propagación para clonar miNombre en sobreMi, el ordenador no creó ninguna referencia entre los dos arreglos.

Como tal, cualquier alteración que hagas a miNombre no se reflejará en sobreMi, y viceversa.

Como ejemplo, vamos a añadir más contenido a miNombre:

miNombre.push("verdadero");

Ahora, vamos a comprobar el estado actual de miNombre y sobreMi:

console.log(miNombre); // ["Sofela", "es", "mi", "verdadero"]

console.log(sobreMi); // ["Oluwatobi", "Sofela", "es", "mi", "verdadero."]

Pruébalo en StackBlitz

Observe que el contenido actualizado de miNombre no se reflejó en sobreMi — porque la propagación no creó ninguna referencia entre el arreglo original y el duplicado.

¿Qué pasa si `miNombre` contiene elementos no primitivos?

Supongamos que miNombre contiene elementos no primitivos. En ese caso, la propagación creará una referencia entre el original no primitivo y el clonado.

He aquí un ejemplo:

const miNombre = [["Sofela", "es", "mi"]];
const sobreMi = ["Oluwatobi", ...miNombre, "nombre."];

console.log(sobreMi);

// La llamada de arriba retornará:
[ "Oluwatobi", ["Sofela", "es", "mi"], "nombre." ]

Pruébalo en StackBlitz

Observe que miNombre contiene un valor no primitivo .

Por lo tanto, el uso del operador de propagación para clonar el contenido de miNombre en sobreMi hizo que el ordenador creara una referencia entre los dos arreglos.

Como tal, cualquier alteración que haga en la copia de miNombre se reflejará en la versión de sobreMi, y viceversa.

Como ejemplo, vamos a añadir más contenido a miNombre:

miNombre[0].push("verdadero");

Ahora, vamos a comprobar el estado actual de miNombre y sobreMi:

console.log(miNombre); // [["Sofela", "es", "mi", "verdadero"]]

console.log(sobreMi); // ["Oluwatobi", ["Sofela", "es", "mi", "verdadero"], "nombre."]

Pruébalo en StackBlitz

Observe que el contenido actualizado de miNombre se refleja en sobreMi — porque la propagación creó una referencia entre el arreglo original y el duplicado.

Aquí hay otro ejemplo:

const miNombre = { primerNombre: "Oluwatobi", apellido: "Sofela" };
const biografia = { ...miNombre };

miNombre.primerNombre = "Tobi";

console.log(miNombre); // { primerNombre: "Tobi", apellido: "Sofela" }

console.log(biografia); // { primerNombre: "Oluwatobi", apellido: "Sofela" }

Pruébalo en StackBlitz

En el fragmento anterior, la actualización de miNombre no se reflejó en biografia porque utilizamos el operador de propagación en un objeto que sólo contiene valores primitivos.

Nota: Un desarrollador llamaría a miNombre un objeto profundo porque contiene sólo elementos primitivos.

Aquí hay un ejemplo más:

const miNombre = { 
  nombreCompleto: { primerNombre: "Oluwatobi", apellido: "Sofela" }
};

const biografia = { ...miNombre };

miNombre.nombreCompleto.primerNombre = "Tobi";

console.log(miNombre); // { nombreCompleto: { primerNombre: "Tobi", apellido: "Sofela" } }

console.log(biografia); // { nombreCompleto: { primerNombre: "Tobi", apellido: "Sofela" } }

Pruébalo en StackBlitz

En el fragmento anterior, la actualización de miNombre se refleja en biografia porque hemos utilizado el operador de propagación en un objeto que contiene un valor no primitivo.

Nota:

Llamamos a miNombre objeto profundo porque contiene un elemento no primitivo.
La copia profunda se realiza cuando se crean referencias al clonar un objeto en otro. Por ejemplo, ...miNombre produce una copia profunda del objeto miNombre porque cualquier alteración que hagas en uno se reflejará en el otro.
La copia profunda se realiza cuando se clonan objetos sin crear referencias. Por ejemplo, podría copiar miNombre en biografia haciendo const biografia = JSON.parse(JSON.stringify(miNombre)). Haciendo esto, el ordenador clonará miNombre en biografia sin crear ninguna referencia.
Puedes romper la referencia entre los dos objetos reemplazando el objeto nombreCompleto dentro de miNombre o biografia con un nuevo objeto. Por ejemplo, haciendo miNombre.nombreCompleto = { primerNombre: "Tobi", apellido: "Sofela" } desconectaría el puntero entre miNombre y biografia.

Para terminar

En este artículo se han tratado las diferencias entre los operadores rest y propagación. También hemos utilizado ejemplos para ver cómo funciona cada operador.

Gracias por leerlo!

Cómo formatear fechas en JavaScript con una línea de código

Keiler Guardo Herrera — Sat, 05 Mar 2022 03:12:50 +0000

Artículo original escrito por: Joel Olawanle
Artículo original: How to Format Dates in JavaScript with One Line of Code
Traducido y adaptado por: Keiler Guardo Herrera

Durante mucho tiempo, he utilizado librerías como Date-fns siempre que he necesitado formatear fechas en JavaScript. Pero se hace muy raro cada vez que lo hago en pequeños proyectos que requieren formatos de fecha simples que JavaScript ofrece por defecto.

Descubrí que la mayoría de los desarrolladores lo hacen mucho. Y pensé que era la mejor manera hasta que recientemente descubrí que no siempre necesitamos usar bibliotecas para formatear fechas en JavaScript.

En caso de que tengas curiosidad por probarlo, aquí tienes el código:?

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) 
// "Friday, Jul 2, 2021"

Después de probar esto en tu propio código y ver que funciona, vamos a entender por qué funciona y aprender otras formas de formatear fechas en JavaScript con una sola línea de código.

Cómo formatear fechas en JS

Obtener la fecha en JavaScript no suele ser un problema, pero formatear estas fechas para que se adapten a tu proyecto puede ser engorroso para los principiantes. Por ello, la mayoría de la gente acaba utilizando bibliotecas.

El método más utilizado para obtener la fecha en JavaScript es el objeto new Date().

Por defecto, cuando ejecutas new Date() en tu terminal, utiliza la zona horaria de tu navegador y muestra la fecha como una cadena de texto completa, como Fri Jul 02 2021 12:44:45 GMT+0100 (horario de verano Británico).

Pero tener algo así en tu página web o aplicación no es profesional y no es fácil de leer. Así que esto te obliga a buscar mejores formas de formatear estas fechas.

Veamos algunos métodos que operan sobre el objeto date.

Los métodos de date en JavaScript

Hay muchos métodos que se pueden aplicar al objeto date. Puedes utilizar estos métodos para obtener información de un objeto date. Aquí están algunos de ellos:

getFullYear() – obtiene el año en formato de cuatro dígitos (yyyy)
getMonth() – recibe el mes como un número (0-11)
getDate() – obtiene el día como un número (1-31)
getHours() – obtiene la hora (0-23)

Y mucho más...

Desgraciadamente, la mayoría de estos métodos siguen necesitando mucho código para convertir las fechas al formato que deseamos.

Por ejemplo, new Date().getMonth() dará como resultado 6, que significa julio. Para usar julio en mi proyecto, necesitaré tener un código largo como este que puede ser realmente engorroso:

const mesActual = new Date();
const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Setiembre", "Octubre", "Noviembre", "Diciembre"];
console.log(meses[mesActual.getMonth()]);

Veamos dos métodos que puedes utilizar para formatear tus fechas de la mejor manera para que puedas utilizarlas en tus proyectos.

El método `toDateString()` en JavaScript

El método de JavaScript toDateString() devuelve la parte de la fecha de un objeto date en forma de cadena utilizando el siguiente formato:

Tres primeras letras del nombre del día de la semana
Tres primeras letras del nombre del mes
Dos dígitos del día del mes, rellenados a la izquierda con un cero si es necesario
Año de cuatro dígitos (como mínimo), rellenado a la izquierda con ceros si es necesario

new Date().toDateString();
//"Fri Jul 02 2021"

Una de las principales desventajas de este método es la imposibilidad de manipular la salida de la fecha de la manera que queremos.

Por ejemplo, no nos da la posibilidad de mostrar las fechas según nuestro idioma. Veamos otro método que para mí sigue siendo uno de los mejores.

El método `toLocaleDateString()` en JavaScript

Este método devuelve el objeto date como una cadena utilizando las convenciones locales. También toma opciones como argumentos que le permiten a usted/sus aplicaciones personalizar el comportamiento de la función.

Sintaxis:

toLocaleDateString()
toLocaleDateString(localizaciones)
toLocaleDateString(localizaciones, opciones)

Veamos algunos ejemplos y sus resultados:

const fechaActual = new Date();

const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };

console.log(fechaActual.toLocaleDateString('de-DE', opciones));
//Freitag, 2. Juli 2021

console.log(fechaActual.toLocaleDateString('ar-EG', opciones))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(fechaActual.toLocaleDateString('en-us', opciones));
//Friday, Jul 2, 2021

También puede decidir no utilizar ni locales ni opciones:

new Date().toLocaleDateString()
// "7/2/2021"

Y también puede decidir usar sólo las localizaciones. Esto producirá la misma información que la anterior basada en la zona horaria de mi navegador.

new Date().toLocaleDateString('en-US')
"7/2/2021"

También puedes decidir girar las opciones como quieras. Hay 4 opciones básicas que son:

weekday – Esto produce el día de la semana dependiendo de cómo quieras que aparezca (short or long).
year – Esto hace que el año sea un número
month – Esto genera el mes del año dependiendo de cómo quieras que aparezca (short or long).
day – Por último, esto produce el día como un número

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"}) // "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

Conclusión

El objeto date tiene unos siete métodos de formateo. Cada uno de estos métodos le da un valor específico:

toString() te entrega Fri Jul 02 2021 14:03:54 GMT+0100 (Horario de verano británico)
toDateString() te entrega Fri Jul 02 2021
toLocaleString() te entrega 7/2/2021, 2:05:07 PM
toLocaleDateString() te entrega 7/2/2021
toGMTString() te entrega Fri, 02 Jul 2021 13:06:02 GMT
toUTCString() te entrega Fri, 02 Jul 2021 13:06:28 GMT
toISOString() te entrega 2021-07-02T13:06:53.422Z

Si está buscando formatos de fecha más avanzados, entonces tendrá que crear un formato personalizado por sí mismo.

Juegos de Google Doodle: Béisbol, PacMan y más

Keiler Guardo Herrera — Sat, 05 Mar 2022 03:03:57 +0000

La página de inicio del motor de búsqueda de Google es la página web más vista del mundo. La gente realiza miles de millones de búsquedas cada día.

Al entrar en la página, justo encima del cuadro de búsqueda, verás el logotipo de Google. En muchas ocasiones el logo será diferente y estará acompañado de lo que se llama un Doodle.

Estos Doodles van desde pequeñas, simples y temporales alteraciones del logo tradicional. Pero lo más frecuente es que sean expresiones muy creativas y artísticas.

Destacan temas mundiales, acontecimientos históricos importantes, fiestas mundiales, celebraciones locales, aniversarios y cumpleaños de personajes importantes (incluidos pioneros, artistas y científicos) junto con sus contribuciones a la sociedad.

Cuando se hace clic en la animación del Doodle se puede encontrar más información sobre ese tema específico y un pequeño juego o interacción que a veces acompaña al doodle.

El primer Doodle de Google

El primer doodle se creó cuando los cofundadores de Google, Larry Page y Sergey Brin, asistieron al festival anual Burning Man, en el desierto de Nevada (Estados Unidos), el 30 de agosto de 1998.

Colocaron un icono de una figura de palo, parecido al logotipo de Burning Man, detrás de la segunda "O" como mensaje de "Fuera de la oficina" para avisar a los usuarios de su ausencia de una forma divertida y creativa.

Google era muy joven en ese momento: solo hacía un par de años que el motor de búsqueda había sido construido por estos dos estudiantes de Stanford. Y esto fue poco menos de una semana antes de que se constituyera oficialmente como empresa.

También puede ver que el logotipo era diferente, con un signo de exclamación al final.

El desarrollo de los Doodles de Google

Desde entonces, nació esta nueva idea de alterar el logotipo cuando se celebran acontecimientos notables, y los Doodles progresaron.

Casi dos años después, Page y Brin pidieron a Dennis Hwang, un becario en ese momento, que creara un doodle en honor al Día de la Bastilla, el 14 de julio de 2000. Fue muy bien recibido y Dennis Hwang fue nombrado Jefe de Doodler.

Los Doodles empezaron a aparecer con más regularidad en la página de inicio.

Desde entonces, Google cuenta con todo un equipo de ilustradores de gran talento (llamados doodlers) responsables del doodle que aparece en la página principal de Google para todo el mundo.

Los primeros doodles eran bastante sencillos. Al pasar el ratón por encima del doodle, aparecía un pequeño texto emergente que indicaba lo que se conmemoraba.

Para Halloween del año 2000, la artista invitada Lorie Loeb creó el primer doodle animado. En él aparecían dos linternas en lugar de la "O" y una araña colgando de la "L".

Otro doodle notable relacionado con la tecnología y la nostalgia fue el del 12 de marzo de 2019, en el que Google conmemoró el 30 aniversario de la World Wide Web.

Puedes ver un archivo histórico de todos los Doodles de Google que han aparecido en la página principal, lo que te permite revivir cualquier Doodle y descubrir otros nuevos que quizá no hayas visto.

El primer juego de Google Doodle

La tecnología del doodle siguió mejorando, y el 21 de mayo de 2010 Google lanzó su primer juego interactivo: el primer Doodle Google jugable.

Este lanzamiento celebra el 30º aniversario de uno de los juegos árcade más populares y clásicos, Pac Man, que fue lanzado en 1980.

Fue un gran avance para Google y debió alegrar los días de muchas personas al recuperar un juego tan divertido y adictivo. Se calcula que más de mil millones de personas jugaron al juego en los tres primeros días de su lanzamiento.

El juego PacMan doodle nos trae recuerdos nostálgicos de los 8 bits, ya que utiliza los mismos gráficos y los mismos colores, sonidos y personajes icónicos originales. Incluso incluye la misma lógica y los mismos errores del juego original (!).

Si quieres hacer un viaje al pasado o conocer el juego por primera vez, puedes jugar aquí.

Sólo tienes que pulsar "Insert Coin" y utilizar las teclas de flecha de tu teclado. Eres un héroe amarillo cuyo objetivo es comer todos los puntos sin que te atrapen los fantasmas de diferentes colores.

Prepárate para pasar demasiadas horas en este caso.

Cómo jugar a los juegos de Google Doodle

Desde entonces ha habido muchos más juegos y rompecabezas divertidos e interactivos.

Los doodles y los juegos suelen estar activos durante un día para conmemorar un evento específico. Pero Google archiva todos sus doodles y juegos de doodles antiguos en la página de archivo dedicada, en lugar de deshacerse de ellos.

Gracias a esto, puedes jugar a cualquiera de los juegos que han aparecido en la página principal del buscador.

Jugar con ellos es fácil y sin complicaciones.

Todos ellos están basados en la web y pueden jugarse tanto en el ordenador como en el móvil sin necesidad de descargar nada ni de instalar una consola. No necesitas ningún equipo, solo un navegador y una conexión a Internet.

Haga clic en los enlaces para ir a la página del juego específico y luego haga clic para iniciar el juego.

En la mayoría de los casos, utilizarás el ratón o el trackpad y el teclado. Si juegas desde un móvil, lo harás deslizando o tocando.

Juegos populares de Google Doodle

A continuación se presenta una lista de algunos de los juegos de doodle más conocidos y populares, agrupados en función de diferentes categorías.

Juegos de ingenio de Doodle

El cubo de Rubik

El cubo de Rubik apareció en la página principal el 19 de mayo de 2014 y es uno de los mayores y más fascinantes desafíos mentales.

Los colores se mueven horizontalmente, pero puedes mover sus piezas haciendo clic en cualquier parte del cubo para girarlo en todos sus lados.

Crucigramas

El 21 de diciembre de 2013, Google sacó un homenaje a los crucigramas para conmemorar los 100 años de los mismos.

Con la ayuda de Merl Reagle, uno de los mejores y más conocidos instructores de crucigramas, Google creó su propia versión de un crucigrama con pistas. También compartió trozos de la historia de los crucigramas.

Juegos de codificación de Doodle

Coding for carrots

Coding for carrots introduce a los niños (¡o a ti!) en el mundo de la programación conectando bloques que representan conceptos de codificación. Esto ayuda a guiar a un conejo a través de 6 niveles para llegar a su comida favorita, una zanahoria y recogerla.

El juego se lanzó el 4 de diciembre de 2017 durante la semana de la Educación en Ciencias de la Computación en colaboración con el MIT para celebrar los 50 años de Kids Coding y de los lenguajes de codificación para niños. Está basado en el lenguaje de programación Scratch.

Juegos de Doodle para los aficionados al deporte

Cricket

Cricket se introdujo para celebrar el Trofeo de Campeones de la ICC de 2017 y se juega al cricket como un grillo animado.

Sólo tienes que pulsar sobre el bate para balancearlo cuando veas que la pelota viene hacia ti y quieras golpearla para marcar. Es una inteligente recreación de este deporte.

Béisbol

El béisbol se introdujo en honor al 4 de julio, día de la Independencia de Estados Unidos, en 2019. Los jugadores son los clásicos bocadillos americanos como perritos calientes, patatas fritas y ketchup.

Haz clic para golpear el bate y, si eres como yo, prepárate para escuchar muchas veces "You're Out" (si no, verás muchos fuegos artificiales).

Baloncesto

El baloncesto salió en 2012, en honor a los juegos olímpicos de verano de 2012 con este juego de baloncesto interactivo. Se trata de encestar el mayor número de canastas en 24 segundos.

Además de este juego, para ese periodo Google lanzó otros tres juegos deportivos interactivos por separado, como el Fútbol. En este juego eres un portero, y utilizas la tecla del espacio para evitar que el balón llegue a la red y las teclas de flecha para cambiar tu posición.

Juegos Olímpicos de Tokio 2020

Para celebrar los Juegos Olímpicos de Tokio 2020, Google ha lanzado su juego más ambicioso, elaborado y complejo hasta la fecha: un juego deportivo de anime completo llamado Doodle Champion Island Games.

Es un homenaje a los videojuegos japoneses retro de 16 bits, con 7 temas de eventos deportivos de minijuegos olímpicos para elegir (incluyendo tenis de mesa, skate y natación artística, entre otros). Es el juego más grande que ha lanzado Google.

Juegas como un gato guerrero ninja Calico llamado Lucky que llega a la isla donde se celebra el festival. Puedes elegir uno de los 4 equipos: el azul, el rojo, el amarillo o el verde, representados por Ushi, Karasu, Inari o Kappa.

Para jugar, utiliza las teclas de flecha y la barra espaciadora y rinde homenaje celebrando la historia, la cultura y los deportes japoneses a lo largo del juego. Se ha realizado en colaboración con el estudio de animación japonés Studio 4°C.

Juegos de Doodle para los amantes de la música

Celebrando a Oskar Fischinger

Fischinger se creó el 17 de junio de 2017 para celebrar el 117º cumpleaños de Oskar Fischinger.

Para homenajear al cineasta y artista visual, Google lanzó un diseño interactivo con una herramienta de composición de música visual, que permite a los usuarios hacer clic y crear sus propias piezas visuales de música con la amplia variedad de ajustes que puede cambiar.

Celebrando el nacimiento del Hip Hop

Hip Hop fue lanzado para conmemorar el 44º aniversario del nacimiento del hip-hop, el 11 de agosto de 2017.

Con el crossfader podrás mezclar ritmos legendarios, cambiar el volumen y la intensidad de la velocidad al reproducir y elegir pistas. El tocadiscos interactivo de DJ clásico te permitirá cortar y rascar pistas y revivir la historia del hip-hop.

El grafiti fue realizado por el artista Cey Adams, y está narrado por el icono del hip hop Fab Five Freddy. Rinde homenaje a Kool Herc y Coke La Rock, los dos padres fundadores del hip hop.

Rockmore

Rockmore simula la experiencia del Theremin. Se trata de un instrumento musical electrónico que funciona sin contacto físico, sólo mediante controles gestuales.

El juego celebra el aniversario del 105 aniversario de Clara Rockmore, la inventora y la intérprete más conocida del instrumento, el 9 de marzo de 2016.

Te permitirá crear música y experimentar con los diferentes ajustes y replicar diferentes notas. Mueve el cursor o el ratón sobre las notas en la pantalla para crear música utilizando un Theremin virtual.

Juegos de Doodle para creativos

Quick draw

Quick draw! es un juego que tiene su propia página web. En la pantalla se te dan instrucciones sobre lo que tienes que dibujar y un plazo de 20 segundos para hacerlo. La red neuronal de Google adivina y te dice a qué se parece tu dibujo.

El juego está construido con Machine Learning y es uno de los juegos Doodle más populares.

Juegos de Doodle para los amantes de la ciencia ficción

Doctor Who

El juego de doodle de Doctor Who, lanzado el 23 de noviembre de 2013, fue creado para honrar el 50 aniversario del clásico y popular programa de televisión británico, Doctor Who.

Se trata de un sencillo, pero impresionante juego de rompecabezas de aventuras, en el que aparecen los 13 médicos de la época en que se hizo.

El objetivo es recuperar las 6 letras del logotipo de Google que los Daleks robaron a los médicos, superando los 6 niveles del juego.

Juegos de comida con Doodle

Scoville salió a la venta el 22 de enero de 2016 para celebrar el 151º cumpleaños de Wilbur Scoville.

La escala Scoville es un sistema que mide lo picante que es un pimiento. En este juego, eres un helado que lucha contra pimientos picantes lanzándoles cucharadas. Los pimientos empiezan a ser progresivamente más picantes cada vez.

Juegos de Doodle para los amantes de Halloween

La Academia del Gato Mágico

La Academia del Gato Mágico celebró Halloween en 2016 y sigue a una gata llamada Momo que quiere restablecer la paz en la Academia del Gato Mágico donde es alumna para poder rescatar la escuela.

La musa de este juego fue un gato negro que pertenece a la Doodler que construyó el juego, Juliana Chen.

Momo tiene que atravesar 5 niveles en su escuela: la biblioteca, la cafetería, el aula, el gimnasio y la azotea del edificio. Y por el camino tiene que pasar su varita para trazar símbolos sobre las cabezas de los fantasmas que aparecen. De este modo, Momo lanza hechizos y no consigue que los fantasmas que la acechan le quiten su libro de hechizos.

Utiliza el teclado para pasar por encima de las cabezas de los fantasmas y convertirlos en aire.

Juegos de Doodle para los que disfrutan con los juegos de cartas

Loteria

La lotería es un juego de cartas tradicional mexicano. Puedes iniciar una partida con tus amigos o con personas al azar de todo el mundo.

Se lanzó el 9 de diciembre de 2019, celebrando este tradicional juego con una versión virtual. Hay un tutorial antes de tu primera ronda de prueba si nunca has jugado a la Lotería.

Conclusión

Espero que hayas disfrutado de esta reseña de algunos de los Doodle Games más populares de Google para que los pruebes.

Hay muchos más disponibles en la página de archivos dedicada, así que vaya a echar un vistazo y vea lo que le interesa.

Gracias por leer!

Derechos de autor: Todas las imágenes pertenecen a Google

Códigos Alt: Cómo escribir caracteres especiales y símbolos del teclado en Windows utilizando las teclas Alt

Keiler Guardo Herrera — Fri, 04 Mar 2022 20:36:01 +0000

Artículo original escrito por: Quincy Larson
Artículo original: Alt Codes – How to Type Special Characters and Keyboard Symbols on Windows Using the Alt Keys
Traducido y adaptado por: Keiler Guardo Herrera

En Windows, puedes escribir cualquier carácter que tú desees pulsando la tecla ALT, escribiendo una secuencia de números y soltando la tecla ALT.

Puedes escribir un montón de caracteres que quizá no tengan algunas teclas correspondientes en su teclado, como los caracteres alfabéticos de los idiomas europeos, los símbolos ASCII e incluso los caracteres chinos (también conocidos como Hanzi, Kanji o Hanja).

Estos códigos Alt también son útiles si tienes un teclado con una tecla atascada o ausente.

A continuación, desglosaré la lista completa de teclas alt por categorías. Pero primero, aquí está la lista completa. (Nota: esto no incluye muchos de los caracteres de los idiomas europeos o no occidentales, de lo contrario sería 100.000 códigos).

A continuación hay una bonita tabla con formato ASCII de los símbolos y caracteres más utilizados. Me llevó un tiempo reunirlos todos para que se vieran bien.

Como desarrollador, cuando busco estos códigos suelo obtener resultados basados en imágenes. Son inaccesibles para las personas con discapacidades visuales y dificultan que todo el mundo pueda copiar y pegar los códigos.


 Código Alt  Símbolo  
 ---------- -------- 
  alt 1      ☺       
  alt 2      ☻       
  alt 3      ♥       
  alt 4      ♦       
  alt 5      ♣       
  alt 6      ♠       
  alt 7      •       
  alt 8      ◘       
  alt 9      ○       
  alt 10     ◙       
  alt 11     ♂       
  alt 12     ♀       
  alt 13     ♪       
  alt 14     ♫       
  alt 15     ☼       
  alt 16     ►       
  alt 17     ◄       
  alt 18     ↕       
  alt 19     ‼       
  alt 20     ¶       
  alt 21     §       
  alt 22     ▬       
  alt 23     ↨       
  alt 24     ↑       
  alt 25     ↓       
  alt 26     →       
  alt 27     ←       
  alt 28     ∟       
  alt 29     ↔       
  alt 30     ▲       
  alt 31     ▼       
  alt 32             
  alt 33     !       
  alt 34     "       
  alt 35     #       
  alt 36     $       
  alt 37     %       
  alt 38     &       
  alt 39     '       
  alt 40     (       
  alt 41     )       
  alt 42     *       
  alt 43     +       
  alt 44     ,       
  alt 45     -       
  alt 46     .       
  alt 47     /       
  alt 48     0       
  alt 49     1       
  alt 50     2       
  alt 51     3       
  alt 52     4       
  alt 53     5       
  alt 54     6       
  alt 55     7       
  alt 56     8       
  alt 57     9       
  alt 58     :       
  alt 59     ;       
  alt 60     <       
  alt 61     =       
  alt 62     >       
  alt 63     ?       
  alt 64     @       
  alt 65     A       
  alt 66     B       
  alt 67     C       
  alt 68     D       
  alt 69     E       
  alt 70     F       
  alt 71     G       
  alt 72     H       
  alt 73     I       
  alt 74     J       
  alt 75     K       
  alt 76     L       
  alt 77     M       
  alt 78     N       
  alt 79     O       
  alt 80     P       
  alt 81     Q       
  alt 82     R       
  alt 83     S       
  alt 84     T       
  alt 85     U       
  alt 86     V       
  alt 87     W       
  alt 88     X       
  alt 89     Y       
  alt 90     Z       
  alt 91     [       
  alt 91     [       
  alt 92     \       
  alt 92     \       
  alt 93     ]       
  alt 93     ]       
  alt 94     ^       
  alt 95     _       
  alt 96     `       
  alt 97     a       
  alt 98     b       
  alt 99     c       
  alt 100    d       
  alt 101    e       
  alt 102    f       
  alt 103    g       
  alt 104    h       
  alt 105    i       
  alt 106    j       
  alt 107    k       
  alt 108    l       
  alt 109    m       
  alt 110    n       
  alt 111    o       
  alt 112    p       
  alt 113    q       
  alt 114    r       
  alt 115    s       
  alt 116    t       
  alt 117    u       
  alt 118    v       
  alt 119    w       
  alt 120    x       
  alt 121    y       
  alt 122    z       
  alt 123    {       
  alt 124    |       
  alt 125    }       
  alt 126    ~       
  alt 127    ⌂       
  alt 155    ¢       
  alt 156    £       
  alt 157    ¥       
  alt 158    ₧       
  alt 159    ƒ       
  alt 164    ñ       
  alt 165    Ñ       
  alt 166    ª       
  alt 167    º       
  alt 168    ¿       
  alt 169    ®       
  alt 170    ¬       
  alt 171    ½       
  alt 172    ¼       
  alt 173    ¡       
  alt 174    «       
  alt 175    »       
  alt 176    ░       
  alt 177    ▒       
  alt 178    ▓       
  alt 179    │       
  alt 180    ┤       
  alt 181    ╡       
  alt 182    ╢       
  alt 183    ╖       
  alt 184    ╕       
  alt 185    ╣       
  alt 186    ║       
  alt 187    ╗       
  alt 188    ╝       
  alt 189    ╜       
  alt 190    ╛       
  alt 191    ┐       
  alt 192    └       
  alt 193    ┴       
  alt 194    ┬       
  alt 195    ├       
  alt 196    ─       
  alt 197    ┼       
  alt 198    ╞       
  alt 199    ╟       
  alt 200    ╚       
  alt 201    ╔       
  alt 202    ╩       
  alt 203    ╦       
  alt 204    ╠       
  alt 205    ═       
  alt 206    ╬       
  alt 207    ╧       
  alt 208    ╨       
  alt 209    ╤       
  alt 210    ╥       
  alt 211    ╙       
  alt 212    ╘       
  alt 213    ╒       
  alt 214    ╓       
  alt 215    ╫       
  alt 216    ╪       
  alt 217    ┘       
  alt 218    ┌       
  alt 219    █       
  alt 220    ▄       
  alt 221    ▌       
  alt 222    ▐       
  alt 223    ▀       
  alt 224    α       
  alt 225    ß       
  alt 226    Γ       
  alt 227    π       
  alt 228    Σ       
  alt 229    σ       
  alt 230    µ       
  alt 231    τ       
  alt 232    Φ       
  alt 233    Θ       
  alt 234    Ω       
  alt 235    δ       
  alt 236    ∞       
  alt 237    φ       
  alt 238    ε       
  alt 239    ∩       
  alt 240    ≡       
  alt 241    ±       
  alt 242    ≥       
  alt 243    ≤       
  alt 244    ⌠       
  alt 245    ⌡       
  alt 247    ≈       
  alt 248    °       
  alt 249    ·       
  alt 250    ·       
  alt 251    √       
  alt 252    ⁿ       
  alt 254    ■       
  alt 255            
  alt 0128   €       
  alt 0130   ‘       
  alt 0132   „       
  alt 0133   …       
  alt 0134   †       
  alt 0135   ‡       
  alt 0137   ‰       
  alt 0138   Š       
  alt 0139   ‹       
  alt 0140   Œ       
  alt 0142   Ž       
  alt 0145   ‘       
  alt 0146   ’       
  alt 0147   “       
  alt 0148   ”       
  alt 0151   —       
  alt 0153   ™       
  alt 0154   š       
  alt 0155   ›       
  alt 0156   œ       
  alt 0158   ž       
  alt 0159   Ÿ       
  alt 0164   ¤       
  alt 0166   ¦       
  alt 0168   ¨       
  alt 0169   ©       
  alt 0175   ¯       
  alt 0178   ²       
  alt 0179   ³       
  alt 0180   ´       
  alt 0183   ·       
  alt 0184   ¸       
  alt 0185   ¹       
  alt 0188   ¼       
  alt 0189   ½       
  alt 0190   ¾       
  alt 0192   À       
  alt 0193   Á       
  alt 0194   Â       
  alt 0195   Ã       
  alt 0196   Ä       
  alt 0197   Å       
  alt 0198   Æ       
  alt 0199   Ç       
  alt 0200   È       
  alt 0201   É       
  alt 0202   Ê       
  alt 0203   Ë       
  alt 0204   Ì       
  alt 0205   Í       
  alt 0206   Ï       
  alt 0207   Ï       
  alt 0208   Ð       
  alt 0210   Ò       
  alt 0211   Ó       
  alt 0212   Ô       
  alt 0213   Õ       
  alt 0214   Ö       
  alt 0215   ×       
  alt 0216   Ø       
  alt 0217   Ù       
  alt 0218   Ú       
  alt 0219   Û       
  alt 0220   Ü       
  alt 0221   Ý       
  alt 0222   Þ       
  alt 0223   ß       
  alt 0224   à       
  alt 0225   á       
  alt 0226   â       
  alt 0227   ã       
  alt 0228   ä       
  alt 0229   å       
  alt 0230   æ       
  alt 0231   ç       
  alt 0232   è       
  alt 0233   é       
  alt 0234   ê       
  alt 0235   ë       
  alt 0236   ì       
  alt 0237   í       
  alt 0238   î       
  alt 0239   ï       
  alt 0240   ð       
  alt 0242   ò       
  alt 0243   ó       
  alt 0244   ô       
  alt 0245   õ       
  alt 0246   ö       
  alt 0247   ÷       
  alt 0248   ø       
  alt 0249   ú       
  alt 0250   û       
  alt 0251   ü       
  alt 0252   ù       
  alt 0253   ý       
  alt 0254   þ       
  alt 0255   ÿ

Bien, ahora vamos a desglosar esta lista por secciones.

Los códigos Alt de los emojis y otros caracteres divertidos

Los primeros 31 códigos alt están dedicados a personajes divertidos como caras felices, flechas y otros símbolos comunes:

 Código Alt  Símbolo  
 ---------- -------- 
  alt 1      ☺       
  alt 2      ☻       
  alt 3      ♥       
  alt 4      ♦       
  alt 5      ♣       
  alt 6      ♠       
  alt 7      •       
  alt 8      ◘       
  alt 9      ○       
  alt 10     ◙       
  alt 11     ♂       
  alt 12     ♀       
  alt 13     ♪       
  alt 14     ♫       
  alt 15     ☼       
  alt 16     ►       
  alt 17     ◄       
  alt 18     ↕       
  alt 19     ‼       
  alt 20     ¶       
  alt 21     §       
  alt 22     ▬       
  alt 23     ↨       
  alt 24     ↑       
  alt 25     ↓       
  alt 26     →       
  alt 27     ←       
  alt 28     ∟       
  alt 29     ↔       
  alt 30     ▲       
  alt 31     ▼

Los códigos Alt para las letras mayúsculas, minúsculas, números y símbolos del teclado

Como he mencionado antes, puedes utilizar los códigos Alt para escribir caracteres que de otro modo podrías escribir en tu teclado. Esto es útil si una de las teclas de tu teclado no está en funcionamiento.

Los códigos Alt del 32 a 126 están dedicados a estas teclas. Y sí, Alt 32 es el carácter de espacio.

 Código Alt  Símbolo  
 ---------- --------
  alt 32             
  alt 33     !       
  alt 34     "       
  alt 35     #       
  alt 36     $       
  alt 37     %       
  alt 38     &       
  alt 39     '       
  alt 40     (       
  alt 41     )       
  alt 42     *       
  alt 43     +       
  alt 44     ,       
  alt 45     -       
  alt 46     .       
  alt 47     /       
  alt 48     0       
  alt 49     1       
  alt 50     2       
  alt 51     3       
  alt 52     4       
  alt 53     5       
  alt 54     6       
  alt 55     7       
  alt 56     8       
  alt 57     9       
  alt 58     :       
  alt 59     ;       
  alt 60     <       
  alt 61     =       
  alt 62     >       
  alt 63     ?       
  alt 64     @       
  alt 65     A       
  alt 66     B       
  alt 67     C       
  alt 68     D       
  alt 69     E       
  alt 70     F       
  alt 71     G       
  alt 72     H       
  alt 73     I       
  alt 74     J       
  alt 75     K       
  alt 76     L       
  alt 77     M       
  alt 78     N       
  alt 79     O       
  alt 80     P       
  alt 81     Q       
  alt 82     R       
  alt 83     S       
  alt 84     T       
  alt 85     U       
  alt 86     V       
  alt 87     W       
  alt 88     X       
  alt 89     Y       
  alt 90     Z       
  alt 91     [       
  alt 91     [       
  alt 92     \       
  alt 92     \       
  alt 93     ]       
  alt 93     ]       
  alt 94     ^       
  alt 95     _       
  alt 96     `       
  alt 97     a       
  alt 98     b       
  alt 99     c       
  alt 100    d       
  alt 101    e       
  alt 102    f       
  alt 103    g       
  alt 104    h       
  alt 105    i       
  alt 106    j       
  alt 107    k       
  alt 108    l       
  alt 109    m       
  alt 110    n       
  alt 111    o       
  alt 112    p       
  alt 113    q       
  alt 114    r       
  alt 115    s       
  alt 116    t       
  alt 117    u       
  alt 118    v       
  alt 119    w       
  alt 120    x       
  alt 121    y       
  alt 122    z       
  alt 123    {       
  alt 124    |       
  alt 125    }       
  alt 126    ~

Códigos Alt para las monedas

Los siguientes códigos Alt se centran en las monedas, con algunos caracteres específicos del español también. Son útiles si necesitas escribir la letra ñ (española) o hacer signos de interrogación o exclamación al revés.

 Alt Code   Symbol  
 ---------- --------
  alt 127    ⌂       
  alt 155    ¢       
  alt 156    £       
  alt 157    ¥       
  alt 158    ₧       
  alt 159    ƒ       
  alt 164    ñ       
  alt 165    Ñ       
  alt 166    ª       
  alt 167    º       
  alt 168    ¿       
  alt 169    ®       
  alt 170    ¬       
  alt 171    ½       
  alt 172    ¼       
  alt 173    ¡       
  alt 174    «       
  alt 175    »

Códigos Alt para símbolos ASCII, para construir interfaces de línea de comandos y arte ASCII

Esta es mi sección favorita, hay muchos símbolos ASCII que puedes usar para hacer menús de línea de comandos y arte ASCII.

Una captura de pantalla de Dwarf Fortress, un videojuego con gráficos realizados enteramente con caracteres ASCII.

 Código Alt  Símbolo  
 ---------- --------
  alt 176    ░       
  alt 177    ▒       
  alt 178    ▓       
  alt 179    │       
  alt 180    ┤       
  alt 181    ╡       
  alt 182    ╢       
  alt 183    ╖       
  alt 184    ╕       
  alt 185    ╣       
  alt 186    ║       
  alt 187    ╗       
  alt 188    ╝       
  alt 189    ╜       
  alt 190    ╛       
  alt 191    ┐       
  alt 192    └       
  alt 193    ┴       
  alt 194    ┬       
  alt 195    ├       
  alt 196    ─       
  alt 197    ┼       
  alt 198    ╞       
  alt 199    ╟       
  alt 200    ╚       
  alt 201    ╔       
  alt 202    ╩       
  alt 203    ╦       
  alt 204    ╠       
  alt 205    ═       
  alt 206    ╬       
  alt 207    ╧       
  alt 208    ╨       
  alt 209    ╤       
  alt 210    ╥       
  alt 211    ╙       
  alt 212    ╘       
  alt 213    ╒       
  alt 214    ╓       
  alt 215    ╫       
  alt 216    ╪       
  alt 217    ┘       
  alt 218    ┌       
  alt 219    █       
  alt 220    ▄       
  alt 221    ▌       
  alt 222    ▐       
  alt 223    ▀

Códigos Alt para símbolos matemáticos y otros caracteres no ingleses

Y, por supuesto, puedes escribir las letras griegas utilizando códigos alt. Estos son muy útiles para escribir formatos matemáticos donde quiera que los necesites. Para cualquier trabajo realmente pesado, probablemente querrás usar algo como TeX, pero si solo estás tratando de enviar una expresión matemática a través de un mensaje instantáneo, estos códigos alt pueden ser muy útiles.

 Código Alt  Símbolo  
 ---------- --------
  alt 224    α       
  alt 225    ß       
  alt 226    Γ       
  alt 227    π       
  alt 228    Σ       
  alt 229    σ       
  alt 230    µ       
  alt 231    τ       
  alt 232    Φ       
  alt 233    Θ       
  alt 234    Ω       
  alt 235    δ       
  alt 236    ∞       
  alt 237    φ       
  alt 238    ε       
  alt 239    ∩       
  alt 240    ≡       
  alt 241    ±       
  alt 242    ≥       
  alt 243    ≤       
  alt 244    ⌠       
  alt 245    ⌡       
  alt 247    ≈       
  alt 248    °       
  alt 249    ·       
  alt 250    ·       
  alt 251    √       
  alt 252    ⁿ       
  alt 254    ■       
  alt 255            
  alt 0128   €       
  alt 0130   ‘       
  alt 0132   „       
  alt 0133   …       
  alt 0134   †       
  alt 0135   ‡       
  alt 0137   ‰       
  alt 0138   Š       
  alt 0139   ‹       
  alt 0140   Œ       
  alt 0142   Ž       
  alt 0145   ‘       
  alt 0146   ’       
  alt 0147   “       
  alt 0148   ”       
  alt 0151   —       
  alt 0153   ™       
  alt 0154   š       
  alt 0155   ›       
  alt 0156   œ       
  alt 0158   ž       
  alt 0159   Ÿ       
  alt 0164   ¤       
  alt 0166   ¦       
  alt 0168   ¨       
  alt 0169   ©       
  alt 0175   ¯       
  alt 0178   ²       
  alt 0179   ³       
  alt 0180   ´       
  alt 0183   ·       
  alt 0184   ¸       
  alt 0185   ¹       
  alt 0188   ¼       
  alt 0189   ½       
  alt 0190   ¾       
  alt 0192   À       
  alt 0193   Á       
  alt 0194   Â       
  alt 0195   Ã       
  alt 0196   Ä       
  alt 0197   Å       
  alt 0198   Æ       
  alt 0199   Ç       
  alt 0200   È       
  alt 0201   É       
  alt 0202   Ê       
  alt 0203   Ë       
  alt 0204   Ì       
  alt 0205   Í       
  alt 0206   Ï       
  alt 0207   Ï       
  alt 0208   Ð       
  alt 0210   Ò       
  alt 0211   Ó       
  alt 0212   Ô       
  alt 0213   Õ       
  alt 0214   Ö       
  alt 0215   ×       
  alt 0216   Ø       
  alt 0217   Ù       
  alt 0218   Ú       
  alt 0219   Û       
  alt 0220   Ü       
  alt 0221   Ý       
  alt 0222   Þ       
  alt 0223   ß       
  alt 0224   à       
  alt 0225   á       
  alt 0226   â       
  alt 0227   ã       
  alt 0228   ä       
  alt 0229   å       
  alt 0230   æ       
  alt 0231   ç       
  alt 0232   è       
  alt 0233   é       
  alt 0234   ê       
  alt 0235   ë       
  alt 0236   ì       
  alt 0237   í       
  alt 0238   î       
  alt 0239   ï       
  alt 0240   ð       
  alt 0242   ò       
  alt 0243   ó       
  alt 0244   ô       
  alt 0245   õ       
  alt 0246   ö       
  alt 0247   ÷       
  alt 0248   ø       
  alt 0249   ú       
  alt 0250   û       
  alt 0251   ü       
  alt 0252   ù       
  alt 0253   ý       
  alt 0254   þ       
  alt 0255   ÿ

Gracias por hacer uso de esta guía de códigos Alt

Espero que esta pequeña guía te haya resultado útil. Si lo ha sido, te animo a vincularla y compartirla con tus amigos, para que más personas puedan beneficiarse de ella.

Ejemplo de stringify JSON: Cómo analizar un objeto JSON con JS

Keiler Guardo Herrera — Wed, 23 Feb 2022 17:02:53 +0000

Artículo original escrito por: Kris Koishigawa
Artículo original: JSON Stringify Example – How to Parse a JSON Object with JS
Traducido y adaptado por: Keiler Guardo Herrera

JSON, o JavaScript Object Notation, está por todas partes. Si alguna vez has utilizado una aplicación web, es muy probable que hayas hecho uso de JSON para estructurar, almacenar y transmitir datos entre sus servidores y tu dispositivo.

En este artículo, repasaremos brevemente las diferencias entre JSON y JavaScript, y luego pasaremos a las diferentes formas de analizar JSON con JavaScript en el navegador y en los proyectos de Node.js.

Diferencias entre JSON y JavaScript

Aunque JSON se parece a un JavaScript común, es mejor pensar en JSON como un formato de datos, similar a un archivo de texto. Sucede que JSON se inspira en la sintaxis de JavaScript, y por eso se parecen tanto.

Veamos los objetos JSON y los arreglos JSON y comparémoslos con sus homólogos de JavaScript.

Objetos JSON frente a objetos literales de JavaScript

En primer lugar, aquí hay un objeto JSON:

{
  "nombre": "Jane Doe",
  "juego-favorito": "Stardew Valley",
  "suscriptor": false
}

perfil-jane.json

La principal diferencia entre un objeto JSON y un objeto JavaScript normal -también llamado objeto literal - se reduce a las comillas. Todas las claves y valores de tipo cadena de un objeto JSON tienen que ir entre comillas dobles (").

Los objetos literales de JavaScript son un poco más flexibles. Con los objetos literales, no es necesario encerrar las claves y las cadenas entre comillas dobles. En su lugar, puedes utilizar comillas simples ('), o no utilizar ningún tipo de comillas para las claves.

Este es el aspecto del código anterior como un objeto literal de JavaScript:

const perfil = {
  nombre: 'Jane Doe',
  'juego-favorito': 'Stardew Valley',
  suscriptor: false
}

Ten en cuenta que la clave 'favorite-game' va entre comillas simples. En el caso de los objetos literales, tendrás que encerrar entre comillas las palabras separadas por guiones (-).

Si quieres evitar las comillas, puedes reescribir la clave para usar camel case (juegoFavorito) o separar las palabras con un guion bajo (juego_favorito) en su lugar.

Arreglos JSON vs. Arreglos JavaScript

Los arreglos JSON funcionan prácticamente igual que los arreglos en JavaScript, y pueden contener cadenas, booleanos, números y otros objetos JSON. Por ejemplo:

[
  {
    "nombre": "Jane Doe",
    "juego-favorito": "Stardew Valley",
    "suscriptor": false
  },
  {
    "nombre": "John Doe",
    "juego-favorito": "Dragon Quest XI",
    "suscriptor": true
  }
]

perfiles.json

Esto es lo que se podrías ver en JavaScript:

const perfiles = [
  {
    nombre: 'Jane Doe',
    'juego-favorito': 'Stardew Valley',
    suscriptor: false
  },
  {
    nombre: 'John Doe',
    'juego-favorito': 'Dragon Quest XI',
    suscriptor: true
  }
];

JSON como cadena

Tal vez te preguntes, si hay objetos JSON y arreglos, ¿no podrías usarlo en tu programa como un objeto literal de JavaScript normal o un arreglo?

La razón por la que no se puede hacer esto es que JSON es realmente una cadena.

Por ejemplo, cuando se escribe JSON en un archivo separado como con perfil-jane.json o perfiles.json, ese archivo en realidad contiene texto en forma de un objeto o arreglo JSON, que resulta ser como JavaScript.

Y si haces una petición a una API, te retornará algo así:

{"nombre":"Jane Doe","juego-favorito":"Stardew Valley","suscriptor":false}

Al igual que con los archivos de texto, si quieres usar JSON en tu proyecto, tendrás que analizarlo o cambiarlo a algo que tu lenguaje de programación pueda entender. Por ejemplo, el análisis de un objeto JSON en Python creará un diccionario.

Una vez entendido esto, veamos diferentes formas de analizar JSON en JavaScript.

Cómo analizar JSON en el navegador

Si estás trabajando con JSON en el navegador, probablemente estés recibiendo o enviando datos a través de una API.

Veamos un par de ejemplos.

Cómo analizar JSON con `fetch`

La forma más sencilla de obtener datos de una API es con fetch, que incluye el método .json() para parsear las respuestas JSON en un objeto literal o arreglo JavaScript que pueda utilizarse de forma automática.

Este es un código que utiliza fetch para hacer una petición GET de un chiste con temática de desarrollo de la API gratuita Chuck Norris Jokes:

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // el método .json() analiza la respuesta JSON en un objeto literal JS
  .then(data => console.log(data));

Si ejecutas ese código en el navegador, verás algo así en la consola:

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

Aunque parece un objeto JSON, en realidad es un objeto literal de JavaScript, y puedes usarlo libremente en tu aplicación.

Cómo encadenar JSON con `JSON.stringify()`

¿Pero qué pasa si quieres enviar datos a una API?

Por ejemplo, digamos que quieres enviar un chiste de Chuck Norris a la API de Chistes de Chuck Norris para que otras personas puedan leerlo después.

En primer lugar, escribirías tu broma como un objeto literal de JS:

const nuevoChiste = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

Entonces, como estás enviando datos a una API, tendrías que convertir tu objeto literal nuevoChiste en una cadena JSON.

Afortunadamente, JavaScript incluye un método superútil para hacer precisamente eso: JSON.stringify():

const nuevoChiste = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(nuevoChiste)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(nuevoChiste)); // string

Aunque en este ejemplo estamos convirtiendo un objeto literal en una cadena JSON, JSON.stringify() también funciona con arreglos.

Por último, sólo tendría que enviar su chiste JSON a la API con una petición POST. POST.

Tenga en cuenta que la API de Chuck Norris Jokes no tiene esta función. Pero si la tuviera, este es el aspecto que tendría el código:

const nuevoChiste = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // endpoint falso - API
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(nuevoChiste), // convertir el objeto literal JS en una cadena JSON
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

Y así, has analizado el JSON entrante con fetch y has utilizado JSON.stringify() para convertir un objeto literal JS en una cadena JSON.

Cómo trabajar con archivos JSON locales en el navegador

Lamentablemente, no es posible (ni recomendable) cargar un archivo JSON local en el navegador.

fetch arrojará un error si intentas cargar un archivo local. Por ejemplo, digamos que tienes un archivo JSON con algunos chistes:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

chistes.json

Y quieres analizarlo y crear una lista de chistes en una página HTML sencilla.

Si creas una página con lo siguiente y la abres en tu navegador:



  
    
    
    
    Obtener JSON local

index.html

Verás esto en la consola:

Fetch API cannot load file:///chistes.json. URL scheme "file" is not supported

Por defecto, los navegadores no permiten el acceso a los archivos locales por razones de seguridad. Esto es algo bueno, y no deberías hacer nada para evitar este comportamiento.

En su lugar, lo mejor es convertir el archivo JSON local en JavaScript. Afortunadamente, esto es bastante fácil, ya que la sintaxis de JSON es muy similar a la de JavaScript.

Todo lo que necesitas hacer es crear un nuevo archivo y declarar tu JSON como una variable:

const chistes = [
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

chistes.js

Y añádelo a tu página como un script por separado:



  
    
    
    
    Obtener JSON local

Podrás utilizar el arreglo de chistes libremente en tu código.

También podrías usar modulos de JavaScript para hacer lo mismo, pero eso está un poco fuera del alcance de este artículo.

¿Pero qué pasa si quieres trabajar con archivos JSON locales y tienes Node.js instalado? Echemos un vistazo a como hacerlo ahora.

Cómo analizar JSON en Node.js

Node.js es un runtime de JavaScript que permite ejecutar JavaScript fuera del navegador. Puedes leer todo sobre Node.js aquí.

Tanto si usas Node.js para ejecutar código localmente en tu ordenador, como si quieres ejecutar aplicaciones web completas en un servidor, es bueno saber cómo trabajar con JSON.

Para los siguientes ejemplos, utilizaremos el mismo archivo chistes.json:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

chistes.json

Cómo analizar un archivo JSON con `require()`

Empecemos con el método más sencillo.

Si tienes un archivo JSON local, todo lo que necesitas hacer es usar require() para cargarlo como cualquier otro módulo de Node.js:

const chistes = require('./chistes.json');

El archivo JSON será analizado por ti automáticamente y podrás empezar a utilizarlo en tu proyecto:

const chistes = require('./chistes.json');

console.log(chistes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

Ten en cuenta que esto es síncrono, lo que significa que su programa se detendrá hasta que analice todo el archivo antes de continuar. Los archivos JSON muy grandes pueden hacer que tu programa se ralentice, así que ten cuidado con eso.

Además, debido a que el análisis de JSON de esta manera carga todo en la memoria, es mejor utilizar este método para los archivos JSON estáticos. Si el archivo JSON cambia mientras tu programa está ejecutándose, no tendrás acceso a esos cambios hasta que reinicies tu programa y analices el archivo JSON actualizado.

Cómo analizar un archivo JSON con `fs.readFileSync(`) y `JSON.parse()`

Esta es la forma más tradicional (a falta de un término mejor) de analizar archivos JSON en proyectos Node.js – leer el archivo con el módulo fs (file system), y luego analizarlo con JSON.parse().

Veamos cómo hacer esto con el método fs.readFileSync(). Primero, añade el módulo fs a tu proyecto:

const fs = require('fs');

Luego, crea una nueva variable para almacenar la salida del archivo chistes.json y establécela igual a fs.readFileSync():

const fs = require('fs');
const archivoChistes = fs.readFileSync();

fs.readFileSync() toma un par de argumentos. El primero es la ruta del archivo que quieres leer:

const fs = require('fs');
const archivoChistes = fs.readFileSync('./chistes.json');

Pero si ahora registras archivoChistese en la consola, verías algo como esto:

Eso sólo significa que el módulo fs está leyendo el archivo, pero no sabe la codificación o el formato del archivo. fs se puede utilizar para cargar casi cualquier archivo, y no sólo los basados en texto como JSON, por lo que tenemos que decirle cómo está codificado el archivo.

Para los archivos basados en texto, la codificación suele ser utf8:

const fs = require('fs');
const archivoChistes = fs.readFileSync('./chistes.json', 'utf8');

Ahora bien, si se registra archivoChistes en la consola, se verá el contenido del archivo.

Pero hasta ahora sólo estamos leyendo el archivo, y sigue siendo una cadena. Necesitaremos utilizar otro método para convertir archivoChistes en un objeto o arreglo JavaScript utilizable.

Para ello, utilizaremos JSON.parse():

const fs = require('fs');
const archivoChistes = fs.readFileSync('./chistes.json', 'utf8');
const chistes = JSON.parse(archivoChistes);

console.log(chistes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

Como su nombre indica, JSON.parse() toma una cadena JSON y la convierte en un objeto literal o arreglo de JavaScript.

Al igual que con el método anterior require, fs.readFileSync() es un método síncrono, lo que significa que podría hacer que su programa se ralentice si está leyendo un archivo grande, JSON o de otro tipo

Además, sólo lee el archivo una vez y lo carga en la memoria. Si el archivo cambia, tendrá que leerlo de nuevo en algún momento. Para hacer las cosas más fáciles, es posible que desee crear una función simple para leer los archivos.

Así es cómo podría verse:

const fs = require('fs');
const leerArchivo = path => fs.readFileSync(path, 'utf8');

const archivoChistes1 = leerArchivo('./chistes.json');
const chistes1 = JSON.parse(archivoChistes1);

console.log(chistes1[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

// el archivo chistes.json cambia en algún momento

const archivoChistes2 = leerArchivo('./chistes.json');
const chistes2 = JSON.parse(archivoChistes2);

console.log(chistes2[0].value); // "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."

Cómo analizar JSON con `fs.readFile(`) y `JSON.parse()`

El método fs.readFile() es muy similar a fs.readFileSync(), excepto que funciona de forma asíncrona. Esto es genial si tienes un archivo grande que leer y no quieres que retenga el resto de tu código.

Este es un ejemplo básico:

const fs = require('fs');

fs.readFile('./chistes.json', 'utf8');

Hasta ahora esto se parece a lo que hicimos con fs.readFileSync(), excepto que no lo estamos asignando a una variable como archivoChistes. Como es asíncrono, cualquier código posterior a fs.readFile() se ejecutará antes de que termine de leer el archivo.

En su lugar, usaremos una función calback y analizaremos el JSON dentro de ella:

const fs = require('fs');

fs.readFile('./chistes.json', 'utf8', (err, data) => {
  if (err) console.error(err);
  const chistes = JSON.parse(data);

  console.log(chistes[0].value);
});

console.log("Esto se ejecutará primero");

Que imprime lo siguiente en la consola:

Esto se ejecutará primero
Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris.

Al igual que con fs.readFileSync(), fs.readFile() carga el archivo en la memoria, lo que significa que tendrá que leer el archivo de nuevo si cambia.

Además, aunque fs.readFile() es asíncrona, al final carga todo el archivo que está leyendo en la memoria. Si tienes un archivo masivo, puede ser mejor buscar en Node.js streams en su lugar.

Cómo encadenar JSON con `JSON.stringify()` en Node.js

Por último, si estás analizando JSON con Node.js, es muy probable que necesites retornar JSON en algún momento, tal vez como una respuesta de la API.

Por suerte, esto funciona de la misma manera que en el navegador - sólo tienes que utilizar JSON.stringify() para convertir los objetos literales de JavaScript o arreglos en una cadena JSON:

const nuevoChiste = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(nuevoChiste)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

Y eso es todo. Hemos cubierto casi todo lo que necesitas saber sobre cómo trabajar con JSON en el navegador y en los proyectos de Node.js.

Ahora sal a la pista y analiza o encadena los JSON a tu gusto.

¿Se me ha olvidado algo? ¿Cómo analizas JSON en tus proyectos? Hacemelo saber atravez de Twitter.

forEach en JavaScript: Cómo recorrer un arreglo en JS

Keiler Guardo Herrera — Tue, 22 Feb 2022 02:44:42 +0000

Artículo original escrito por: Cem Eygi
Artículo original: JavaScript forEach – How to Loop Through an Array in JS
Traducido y adaptado por: Keiler Guardo Herrera

El método forEach de JavaScript es una de las varias formas de recorrer un arreglo. Cada método tiene diferentes características, y depende de ti, dependiendo de lo que estés haciendo, decidir cuál usar.

En este post, vamos a echar un vistazo más de cerca al método forEach de JavaScript.

Teniendo en cuenta que tenemos el siguiente arreglo a continuación:

const numeros = [1, 2, 3, 4, 5];

Utilizando el tradicional "bucle for" para recorrer el arreglo sería así:

for (i = 0; i < numeros.length; i++) {
  console.log(numeros[i]);
}

¿Qué hace diferente al método forEach( )?

El método forEach también se utiliza para recorrer un arreglo, pero utiliza una función diferente a la del clásico "bucle for".

El método forEach pasa una función callback para cada elemento del arreglo junto con los siguientes parámetros:

Valor actual (requerido) - El valor del elemento actual del arreglo
Index (opcional) - El número de índice del elemento actual
Arreglo (opcional) - El objeto del arreglo al que pertenece el elemento actual

Permítame explicar estos parámetros paso a paso.

En primer lugar, para recorrer un arreglo utilizando el método forEach, se necesita una función callback (o función anónima):

numeros.forEach(function() {
    // código
});

La función se ejecutará para cada elemento del arreglo. Debe tomar al menos un parámetro que represente los elementos del arreglo:

numeros.forEach(function(numero) {
    console.log(numero);
});

Eso es todo lo que tenemos que hacer para recorrer el arreglo:

Como alternativa, puede utilizar la representación de la función de flecha de ES6 para simplificar el código:

numeros.forEach(numero => console.log(numero));

Representación de la función flecha

Parámetros opcionales

Index

Bien, ahora continuemos con los parámetros opcionales. El primero es el parámetro "index", que representa el número de índice de cada elemento.

Básicamente, podemos ver el número de índice de un elemento si lo incluimos como segundo parámetro:

numeros.forEach((numero, index) => {
    console.log('Indice: ' + index + ' Valor: ' + numero);
});

Arreglo

El parámetro del arreglo es el propio arreglo. También es opcional y se puede utilizar si es necesario en varias operaciones. En caso contrario, si lo llamamos, simplemente se imprimirá tantas veces como el número de elementos del arreglo:

numeros.forEach((numero, index, arreglo) => {
    console.log(arreglo);
});

Puedes ver el ejemplo de uso del método forEach( ) en este vídeo:

Soporte para navegadores

El método Array.forEach es compatible con todos los navegadores, excepto con la versión 8 o anterior de IE:

caniuse.com

Si quieres aprender más sobre desarrollo web, no dudes en visitar el canal de Youtube del autor original de este artículo.

Gracias por leer.

Funciones callback en JavaScript: Qué son los callbacks en JS y cómo usarlos

Keiler Guardo Herrera — Tue, 22 Feb 2022 02:23:07 +0000

Artículo original escrito por: Cem Eygi
Artículo original: JavaScript Callback Functions – What are Callbacks in JS and How to Use Them
Traducido y adaptado por: Keiler Guardo Herrera

Si estás familiarizado con la programación, ya sabes lo que hacen las funciones y cómo utilizarlas. Pero, ¿qué es una función callback? Las funciones callback son una parte importante de JavaScript y una vez que entiendas cómo funcionan los callbacks, mejorarás mucho en JavaScript.

Así que en este post, me gustaría ayudarte a entender lo que son las funciones callback y cómo usarlas en JavaScript a través de algunos ejemplos.

¿Qué es una función callback?

En JavaScript, las funciones son objetos. ¿Podemos pasar objetos a las funciones como parámetros? Sí.

Así, también podemos pasar funciones como parámetros a otras funciones y llamarlas dentro de las funciones externas. ¿Suena complicado? Permítanme mostrarlo en un ejemplo a continuación:

function imprimir(callback) {  
    callback();
}

La función imprimir( ) toma otra función como parámetro y la llama en su interior. Esto es válido en JavaScript y lo llamamos "callback". Así que una función que se pasa a otra función como parámetro es una función callback. Pero eso no es todo.

También puede ver la versión en vídeo de las funciones callback a continuación:

video en inglés

¿Por qué necesitamos funciones callback?

JavaScript ejecuta el código secuencialmente en orden descendente. Sin embargo, hay algunos casos en los que el código se ejecuta (o debe ejecutarse) después de que ocurra otra cosa y también de forma no secuencial. Esto se llama programación asíncrona.

Los callbacks aseguran que una función no se va a ejecutar antes de que se complete una tarea, sino que se ejecutará justo después de que la tarea se haya completado. Nos ayuda a desarrollar código JavaScript asíncrono y nos mantiene a salvo de problemas y errores.

En JavaScript, la forma de crear una función callback es pasándola como parámetro a otra función, y luego llamarla de vuelta justo después de que haya ocurrido algo o se haya completado alguna tarea. Veamos cómo...

Cómo crear un callback

Para entender lo que he explicado arriba, déjame empezar con un ejemplo sencillo. Queremos registrar un mensaje en la consola, pero debe aparecer después de 3 segundos.

const mensaje = function() {  
    console.log("Este mensaje se muestra después de 3 segundos");
}
 
setTimeout(mensaje, 3000);

Hay un método incorporado en JavaScript llamado "setTimeout", que llama a una función o evalúa una expresión después de un período de tiempo determinado (en milisegundos). Así que aquí, la función "mensaje" está siendo llamada después de que hayan pasado 3 segundos. (1 segundo = 1000 milisegundos)

En otras palabras, la función de mensaje está siendo llamada después de que algo sucedió (después de que pasaron 3 segundos para este ejemplo), pero no antes. Así que la función de mensaje es un ejemplo de una función callback.

¿Qué es una función anónima?

También podemos definir una función directamente dentro de otra función, en lugar de llamarla. Se verá así:

setTimeout(function() {  
    console.log("Este mensaje se muestra después de 3 segundos");
}, 3000);

Como podemos ver, la función callback aquí no tiene nombre y una definición de función sin nombre en JavaScript se llama "función anónima". Esto hace exactamente la misma tarea que el ejemplo anterior.

Callback en forma de función de flecha

Si lo prefiere, también puede escribir la misma función callback como una función de flecha ES6, que es un tipo de función más reciente en JavaScript:

setTimeout(() => { 
    console.log("Este mensaje se muestra después de 3 segundos");
}, 3000);

¿Qué pasa con los eventos?

JavaScript es un lenguaje de programación basado en eventos. También utilizamos funciones callbacks para las declaraciones de eventos. Por ejemplo, digamos que queremos que los usuarios hagan clic en un botón:

Esta vez veremos un mensaje en la consola solo cuando el usuario haga clic en el botón:

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("El usuario ha hecho clic en el botón.");
});

Así que aquí seleccionamos el botón primero con su id, y luego añadimos un receptor de eventos con el método addEventListener. Toma 2 parámetros. El primero es su tipo, "click", y el segundo parámetro es una función callback, que registra el mensaje cuando el botón es pulsado.

Como puedes ver, las funciones callback también se utilizan para las declaraciones de eventos en JavaScript.

Conclusión

Los callbacks se utilizan a menudo en JavaScript, y espero que este post te ayude a entender lo que realmente hacen y cómo trabajar con ellos más fácilmente. A continuación, puedes aprender sobre promesas en JavaScript que es un tema similar que he explicado en mi nuevo post.

Si quieres aprender más sobre desarrollo web, ¡no dudes en seguirme en Youtube!

Gracias por leer.

Cómo utilizar imágenes SVG en CSS y HTML: Un tutorial para principiantes

Keiler Guardo Herrera — Tue, 22 Feb 2022 02:01:42 +0000

Artículo original escrito por: Edidiong Asikpo
Artículo original: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners
Traducido y adaptado por: Keiler Guardo Herrera

SVG son las siglas de gráficos vectoriales escalables (Scalable Vector Graphics). Es un tipo único de formato de imágenes para gráficos basados en vectores escrito en el lenguaje de marcado extensible (XML).

En este tutorial, explicaré por qué querrías usar imágenes SVG y cómo puedes usarlas en CSS y HTML.

¿Por qué utilizar imágenes SVG?

Hay varias razones para utilizar imágenes SVG, algunas de las cuales son:

Las imágenes SVG no pierden su calidad al ampliarlas o cambiarlas de tamaño.
Se pueden crear y editar con un IDE o un editor de texto.
Son accesibles y animables.
Tienen un tamaño de archivo pequeño y son altamente escalables.
Y se pueden buscar, indexar, programar y comprimir.

Ahora vamos a ver cómo se puede trabajar realmente con las imágenes SVG.

Cómo descargar la imagen SVG utilizada en este tutorial

Si quieres trabajar con la imagen SVG que he utilizado en este tutorial, sigue los pasos (y el esquema) de abajo para descargarla.

Ve a unDraw.
Cambia el color de fondo a amarillo.
En el cuadro de búsqueda, busca la palabra happy.

Haz clic en la imagen llamada "Happy news".
En la ventana emergente, has clic en el botón "Download SVG for your projects".

Si seguiste los pasos anteriores correctamente, la imagen SVG debe estar ahora en tu ordenador.

Ahora, abre la imagen SVG en tu IDE o editor de texto favorito. Cámbiale el nombre a happy.svg o el que prefieras.

Cómo utilizar imágenes SVG en CSS y HTML

Hay varias maneras diferentes de utilizar imágenes SVG en CSS y HTML. En este tutorial exploraremos seis métodos diferentes.

1. Cómo utilizar un SVG con

Este método es la forma más sencilla de añadir imágenes SVG a una página web. Para utilizar este método, añade el elemento a tu documento HTML y haz referencia a él en el atributo src, así:

Suponiendo que hayas descargado la imagen SVG de unDraw y la hayas renombrado como happy.svg, puedes seguir adelante y añadir el fragmento de código anterior en tu documento HTML.

Si lo has hecho todo correctamente, tu página web debe tener el mismo aspecto que la siguiente demostración. ?

Cuando se añade una imagen SVG mediante la etiqueta sin especificar el tamaño, se asume el tamaño del archivo SVG original.

Por ejemplo, en la demostración anterior, no modifiqué el tamaño de la imagen SVG, por lo que asumió su tamaño original (que era un ancho de 915.11162px y una altura de 600.53015px).

Nota: para cambiar el tamaño original, tienes que especificar el width y height con CSS como puedes ver en la demo de abajo. También puede actualizar el width y height originales directamente.

Aunque podemos cambiar el tamaño de las imágenes SVG añadidas a través de la etiqueta siguen existiendo algunas restricciones si quieres hacer cambios de estilo importantes en la imagen SVG.

2. Cómo utilizar SVG con `background-image` en CSS

Esto es similar a añadir SVG a un documento HTML utilizando la etiqueta . Pero esta vez lo hacemos con CSS en lugar de HTML, como puedes ver en el siguiente fragmento de código.

body {
  background-image: url(happy.svg);
}

Cuando se utiliza un SVG como imagen de fondo con CSS, tiene limitaciones similares a las de utilizar . Aun así, permite un poco más de personalización.

Echa un vistazo a la demostración que aparece a continuación y siéntete libre de hacer modificaciones en ella utilizando CSS.

3. Cómo utilizar imágenes SVG inline

Las imágenes SVG pueden escribirse directamente en el documento HTML mediante la etiqueta .

Para ello, abre la imagen SVG en VS code o en tu IDE preferido, copia el código y pégualo dentro del elemento en tu documento HTML.


 // Pegua aquí el código SVG.

Si lo has hecho todo correctamente, tu página web debe ser exactamente igual que la demostración de abajo.

Cuando se utiliza el SVG inline en el documento HTML, se reduce el tiempo de carga porque sirve como una solicitud HTTP.

El uso de este método te permite realizar una mayor personalización en comparación con el uso de o background-image.

4. Cómo utilizar un SVG con

También puedes utilizar un elemento HTML para añadir imágenes SVG a una página web utilizando la siguiente sintaxis de código:

El atributo data se utiliza para especificar la URL del recurso que utilizará el objeto, que en nuestro caso es la imagen SVG.

El width y el height se utilizan para especificar el tamaño de la imagen SVG.

De nuevo, a continuación se muestra una demostración para que la explore. ?

El uso de es compatible con todos los navegadores que soportan SVG.

5. Cómo utilizar SVG con

Aunque esto no es aconsejable, también puedes añadir una imagen SVG usando un como se ve en la demostración de abajo.

Sin embargo, tenga en cuenta que los pueden ser difíciles de mantener y serán malos para la optimización de su sitio en los motores de búsqueda (SEO).

El uso de también anula el propósito de escalables en el nombre gráficos vectoriales escalables porque las imágenes SVG añadidas con este formato no son escalables.

6. Cómo utilizar SVG con `

El elemento HTML es otra forma de utilizar una imagen SVG en HTML y CSS utilizando esta sintaxis: .

Sin embargo, tenga en cuenta que este método también tiene limitaciones. Según MDN, la mayoría de los navegadores modernos han dejado de ser compatibles con los plug-ins del navegador. Esto significa que depender de no es generalmente buena idea si quieres que tu sitio sea operable en el navegador del usuario promedio.

A continuación se muestra una demostración del uso del elemento HTML para añadir una imagen SVG.

Conclusión

Espero que hayas podido conocer las diferentes maneras de emplear imágenes SVG en CSS y HTML. Espero que esto te guíe hacia la elección del método correcto a la hora de añadir imágenes SVG a un sitio web.

Si tienes alguna pregunta, puedes enviarme un mensaje en Twitter , y estaré encantada de responder a cada una de las preguntas.

var, let y const: ¿Cuál es la diferencia?

Keiler Guardo Herrera — Thu, 10 Feb 2022 17:46:30 +0000

Artículo original escrito por Sarah Chima Atuonwu
Artículo original Var, Let, and Const – What's the Difference?
Traducido y adaptado por Keiler Guardo Herrera

Con ES2015 (ES6) aparecieron muchas características nuevas y llamativas. Ahora, desde el año 2020, se supone que muchos desarrolladores de JavaScript se han familiarizado con estas características y han empezado a utilizarlas.

Aunque esta suposición podría ser parcialmente cierta, todavía es posible que algunas de estas características sigan siendo un misterio para algunos desarrolladores.

Una de las características que llegaron con ES6 es la adición de let y const, que se pueden utilizar para la declaración de variables. La pregunta es, ¿qué las hace diferentes del viejo var que hemos venido utilizando? Si todavía no lo tienes claro, este artículo es para ti.

En este artículo, hablaremos de var, let y const con respecto a su ámbito (alcance), uso y hoisting. A medida que leas, toma nota de las diferencias entre ellos que señalaré.

Var

Antes de la llegada de ES6, las declaraciones var eran las que mandaban. Sin embargo, hay problemas asociados a las variables declaradas con var. Por eso fue necesario que surgieran nuevas formas de declarar variables. En primer lugar, vamos a entender más sobre var antes de discutir esos problemas.

Ámbito de var

El ámbito, significa esencialmente dónde están disponibles estas variables para su uso. Las declaraciones var tienen un ámbito global o un ámbito de función/local.

El ámbito es global cuando una variable var se declara fuera de una función. Esto significa que cualquier variable que se declare con var fuera de una función está disponible para su uso en toda la pantalla.

var tiene un ámbito local cuando se declara dentro de una función. Esto significa que está disponible y solo se puede acceder a ella dentro de esa función.

Para entenderlo mejor, mira el siguiente ejemplo.

    var saludar = "hey, hola";
    
    function nuevaFuncion() {
        var hola = "hola";
    }

Aquí, saludar tiene un ámbito global porque existe fuera de la función mientras que hola tiene un ámbito local. Así que no podemos acceder a la variable hola fuera de la función. Así que si realizamos esto:

    var tester = "hey, hola";
    
    function nuevaFuncion() {
        var hola = "hola";
    }
    console.log(hola); // error: hola is not defined

Obtendremos un error que se debe a que hola no está disponible fuera de la función.

Las variables con var se pueden volver a declarar y modificar

Esto significa que podemos hacer esto dentro del mismo ámbito y no obtendremos un error.

    var saludar = "hey, hola";
    var saludar = "dice Hola tambien";

y esto también

    var saludar = "hey, hola";
    saludar = "dice Hola tambien";

Hoisting de var

Hoisting es un mecanismo de JavaScript en el que las variables y declaraciones de funciones se mueven a la parte superior de su ámbito antes de la ejecución del código. Esto significa que si hacemos esto:

    console.log (saludar);
    var saludar = "dice hola"

se interpreta así:

    var saludar;
    console.log(saludar); // saludar is undefined
    saludar = "dice hola"

Entonces las variables con var se elevan a la parte superior de su ámbito y se inicializan con un valor de undefined.

Problema con var

Hay una debilidad que viene con var. Usaré el ejemplo de abajo para explicarlo:

    var saludar = "hey, hola";
    var tiempos = 4;

    if (tiempos > 3) {
        var saludar = "dice Hola tambien"; 
    }
    
    console.log(saludar) // "dice Hola tambien"

Por lo tanto, como tiempos > 3 devuelve true, saludar se redefine para "dice Hola tambien". Aunque esto no es un problema si quieres redefinir saludar a conciencia, se convierte en un problema cuando no te das cuenta de que la variable saludar ha sido definida antes.

Si has utilizado saludar en otras partes de tu código, puede que te sorprenda la salida que puedes obtener. Esto probablemente causará muchos errores en tu código. Por eso son necesarios let y const.

Let

let es ahora preferible para la declaración de variables. No es una sorpresa, ya que es una mejora de las declaraciones con var. También resuelve el problema con var que acabamos de cubrir. Consideremos por qué esto es así.

let tiene un ámbito de bloque

Un bloque es un trozo de código delimitado por {}. Un bloque vive entre llaves. Todo lo que está dentro de llaves es un bloque.

Así que una variable declarada en un bloque con let solo está disponible para su uso dentro de ese bloque. Permíteme explicar esto con un ejemplo:

   let saludar = "dice Hola";
   let tiempos = 4;

   if (tiempos > 3) {
        let hola = "dice Hola tambien";
        console.log(hola);// "dice Hola tambien"
    }
   console.log(hola) // hola is not defined

Vemos que el uso de hola fuera de su bloque (las llaves donde se definió) devuelve un error. Esto se debe a que las variables let tienen un alcance de bloque.

let puede modificarse pero no volver a declararse.

Al igual que var, una variable declarada con let puede ser actualizada dentro de su ámbito. A diferencia de var, una variable let no puede ser re-declarada dentro de su ámbito. Así que mientras esto funciona:

    let saludar = "dice Hola";
    saludar = "dice Hola tambien";

esto devolverá un error:

    let saludar = "dice Hola";
    let saludar = "dice Hola tambien"; // error: Identifier 'saludar' has already been declared

Sin embargo, si la misma variable se define en diferentes ámbitos, no habrá ningún error:

    let saludar = "dice Hola";
    if (true) {
        let saludar = "dice Hola tambien";
        console.log(saludar); // "dice Hola tambien"
    }
    console.log(saludar); // "dice Hola"

¿Por qué no hay ningún error? Esto se debe a que ambas instancias son tratadas como variables diferentes, ya que tienen ámbitos diferentes.

Este hecho hace que let sea una mejor opción que var. Cuando se utiliza let, no hay que preocuparse de sí se ha utilizado un nombre para una variable antes, puesto que una variable solo existe dentro de su ámbito.

Además, como una variable no puede ser declarada más de una vez dentro de un ámbito, entonces el problema discutido anteriormente que ocurre con var no sucede.

Hoisting de let

Al igual que var, las declaraciones let se elevan a la parte superior. A diferencia de var que se inicializa como undefined, la palabra clave let no se inicializa. Sí que si intentas usar una variable let antes de declararla, obtendrás un Reference Error.

Const

Las variables declaradas con const mantienen valores constantes. Las declaraciones const similitudes con las declaraciones let.

Las declaraciones const tienen un ámbito de bloque

Al igual que las declaraciones let, solamente se puede acceder a las declaraciones const dentro del bloque en el que fueron declaradas.

const no puede modificarse ni volver a declararse

Esto significa que el valor de una variable declarada con const s el mismo dentro de su ámbito. No se puede actualizar ni volver a declarar. Así que si declaramos una variable con const, no podemos hacer esto:

    const saludar = "dice Hola";
    saludar = "dice Hola tambien";// error: Assignment to constant variable.

ni esto:

    const saludar = "dice Hola";
    const saludar = "dice Hola tambien";// error: Identifier 'saludar' has already been declared

Por lo tanto, toda declaración const, debe ser inicializada en el momento de la declaración.

Este comportamiento es algo diferente cuando se trata de objetos declarados con const. Mientras que un objeto const no se puede actualizar, las propiedades de este objeto sí se pueden actualizar. Como resultado, si declaramos un objeto const como este:

    const saludar = {
        mensaje: "dice Hola",
        tiempos: 4
    }

mientras que no podemos hacer esto:

    saludar = {
        palabras: "Hola",
        numero: "cinco"
    } // error:  Assignment to constant variable.

podemos hacer esto:

    saludar.mensaje = "dice Hola tambien";

Esto actualizará el valor de saludar.mensaje sin devolver errores.

Hoisting de const

Al igual que let, const las declaraciones const se elevan a la parte superior, pero no se inicializan.

En caso de que no hayas notado las diferencias, aquí están:

Las declaraciones var tienen un ámbito global o un ámbito función/local, mientras que let y const tienen un ámbito de bloque.
Las variables var pueden ser modificadas y re-declaradas dentro de su ámbito; las variables let pueden ser modificadas, pero no re-declaradas; las variables const no pueden ser modificadas ni re-declaradas.
Todas ellas se elevan a la parte superior de su ámbito. Pero mientras que las variables var se inicializan con undefined, let y const no se inicializan.
Mientras que var y let pueden ser declaradas sin ser inicializadas, const debe ser inicializada durante la declaración.

¿Tienes alguna pregunta o adición? Por favor, hágamelo saber.

Gracias por leer :)

¿Qué es el DOM? El significado del modelo de objeto de documento en JavaScript

Keiler Guardo Herrera — Fri, 04 Feb 2022 19:32:36 +0000

Artículo original escrito por Jessica Wilkins
Artículo original What is the DOM? Document Object Model Meaning in JavaScript
Traducido y adaptado por Keiler Guardo Herrera

Si acabas de empezar a aprender JavaScript, es posible que hayas oído hablar del DOM. Pero, ¿qué es exactamente?

En este artículo, te explicaré qué es el DOM y te proporcionaré algunos ejemplos con código JavaScript.

Veremos cómo seleccionar elementos de un documento HTML, cómo crear elementos, cómo cambiar estilos CSS en línea y cómo escuchar eventos.

¿Qué es el DOM?

DOM son las siglas de Document Object Model. Es una interfaz de programación que nos permite crear, cambiar o eliminar elementos del documento. También podemos añadir eventos a estos elementos para hacer nuestra página más dinámica.

El DOM visualiza el documento HTML como un árbol de nodos. Un nodo representa un elemento HTML.

Echemos un vistazo a este código HTML para entender mejor la estructura de árbol del DOM.



  
    
    
    
    Estructura de arbol del DOM
  
  
    Estructura de árbol del DOM
    Aprender sobre el DOM

Nuestro documento se llama nodo raíz y contiene un nodo hijo que es el elemento . El elemento contiene dos hijos que son los elementos y .

Tanto el elemento como el elemento tienen hijos propios.

Esta es otra forma de visualizar el árbol de nodos.

Podemos acceder a estos elementos en el documento y hacer cambios en ellos usando JavaScript.

Veamos algunos ejemplos de cómo podemos trabajar con el DOM utilizando JavaScript.

Cómo seleccionar elementos en el documento

Hay varios métodos distintos para seleccionar un elemento en el documento HTML.

En este artículo, nos centraremos en tres de esos métodos:

getElementById()
querySelector()
querySelectorAll()

`getElementById()`

En el HTML, los id se utilizan como identificadores únicos para los elementos HTML. Esto significa que no se puede tener el mismo nombre del id para dos elementos diferentes.

Esto sería incorrecto:

Este es mi primer párrafo.
Este es mi segundo párrafo.

Tendrías que asegurarte de que esos ids son únicos, como este:

Este es mi primer párrafo.
Este es mi segundo párrafo.

En JavaScript, podemos tomar una etiqueta HTML haciendo referencia al nombre del id.

document.getElementById("el nombre del id va aquí")

Este código le dice a la computadora que obtenga el elemento

con el id de para1 e imprima el elemento en la consola.

const parrafo1 = document.getElementById("para1");
console.log(parrafo1);

Si quisiéramos solo leer el contenido del párrafo, entonces podemos utilizar la propiedad textContent dentro del console.log().

const parrafo1 = document.getElementById("para1");
console.log(parrafo1.textContent);

`querySelector()`

Puedes utilizar este método para encontrar elementos con uno o más selectores CSS.

He creado este ejemplo HTML de mis programas de televisión favoritos:

Programas de televisión favoritos

  Golden Girls
  Archer
  Rick and Morty
  The Crown

Si quisieras obtener e imprimir en la consola el elemento h1, entonces podrías usar el nombre de la etiqueta dentro del querySelector().

const elementoH1 = document.querySelector("h1");
console.log(elementoH1);

Si quiero apuntar a class="list" para imprimir la lista desordenada en la consola, entonces usaría .list dentro del querySelector().

El . antes de list le dice a la computadora que apunte al nombre de la clase. Si quieres apuntar a un id entonces utilizarías un símbolo # antes del nombre.

const lista = document.querySelector(".list");
console.log(lista);

`querySelectorAll()`

Este método encuentra todos los elementos que coinciden con el selector CSS y devuelve una lista de todos esos nodos.

Si quisiera encontrar todos los elementos

en nuestro ejemplo, podría utilizar el combinador > para encontrar todos los hijos del

const listaElementos = document.querySelectorAll("ul > li");
console.log(listaElementos);

Si quisiéramos imprimir los elementos

con los programas de televisión, podemos utilizar un forEach() para hacer un bucle sobre el NodeList e imprimir cada elemento.
```
const listaElementos = document.querySelectorAll("ul > li");

listaElementos.forEach((elemento) => {
  console.log(elemento);
});
```
Cómo añadir nuevos elementos al documento
Podemos utilizar document.createElement() para añadir nuevos elementos al árbol del DOM.
Veamos este ejemplo:
```
Razones por las que me encanta freeCodeCamp:
```
Ahora mismo, solo tengo una etiqueta
en la página. Pero quiero añadir una lista de razones por las que me gusta freeCodeCamp debajo de esa etiqueta
utilizando JavaScript.
Primero podemos crear un elemento

¿Qué son los Bookmarklets? Cómo usar JavaScript para hacer un Bookmarklet en Chromium y Firefox

Keiler Guardo Herrera — Fri, 28 Jan 2022 03:35:21 +0000

Artículo original escrito por Seth Falco
Artículo original What are Bookmarklets? How to Use JavaScript to Make a Bookmarklet in Chromium and Firefox
Traducido y adaptado por Keiler Guardo Herrera

Bookmarklets son marcadores del navegador que ejecutan JavaScript en lugar de abrir una página web. También se conocen como applets de marcadores, favlets o marcadores de JavaScript.

Los Bookmarklets están disponibles de forma nativa en los principales navegadores, incluyendo Mozilla Firefox y navegadores basados en Chromium como Chrome o Brave.

Scripting con JavaScript

Aprender a escribir scripts ofrece muchas ventajas, sobre todo el enorme ahorro de tiempo que supone automatizar tareas repetitivas o tediosas.

Si no eres un desarrollador, la idea de aprender a codificar puede ser intimidante, sin embargo, el scripting no requiere conocimientos de ingeniería de software o patrones de diseño. El objetivo no es hacer software escalable, sino automatizar tareas especializadas o triviales.

Independientemente de la profesión, incluso si nunca has escrito código antes, considera lo que haces en tu navegador. Si alguna vez sientes que lo que haces es repetitivo o robótico, considera la posibilidad de delegar la tarea a un robot real.

Casos de uso de los Bookmarklets

Con los bookmarklets, puedes manipular la página actual, ya que la función tendrá el contexto de la pestaña actual. Esto significa que puedes:

Hacer clic en los botones virtualmente
Modificar el contenido
Utilizar el contenido de la página para abrir una nueva página
Eliminar elementos de la página

También puedes hacer marcadores que no utilicen el contexto en absoluto, como abrir condicionalmente una URL o generar HTML para una nueva pestaña.

Encontrarás algunos bookmarklets que se realizaron para este artículo en la sección de Ejemplos de Bookmarklets. Son solo para demostración, pero deberían hacer evidentes las capacidades e implementaciones.

Como crear Bookmarklets

La creación de un bookmarklet es casi idéntica a la de un marcador normal. La única diferencia es que escribirás JavaScript en el campo de URL en lugar de una URL HTTP/HTTPS.

Navegar hasta el menú de marcadores

Mozilla Firefox

Ya sea en la barra de marcadores o en la barra lateral de marcadores (CTRL + B), puedes hacer clic con el botón derecho del ratón y luego hacer clic en "Añadir marcador...":

Chromium

Puedes hacer clic con el botón derecho del ratón en la barra de marcadores y luego hacer clic en "Añadir página...". También puedes ir a tu administrador de marcadores, hacer clic con el botón derecho del ratón y pulsar "Añadir nuevo marcador":

Como escribir un Bookmarklet

En el campo URL del marcador, escriba una función JavaScript con el siguiente formato.

javascript: (() => {
  // Tu código aquí!
})();

javascript: es el protocolo de la URL. Indica que el navegador debe ejecutar el marcador como JavaScript.

(() => { }) define una función anónima (lambda). Debes escribir el código que quieres ejecutar entre las llaves.

(); ejecutará la función anónima que acabas de crear.

javascript: (() => {
  alert('Hola, Mundo!');
})();

"Hola, Mundo!", como un marcador del navegador.

También puedes hacer que genere HTML y abrirlo como un documento HTML:

javascript: (() => {
  return 'Hola, Mundo!';
})();

Espacio para los Bookmarklets

La mayoría de los navegadores no permiten un campo de entrada de varias líneas en la URL de los marcadores, por lo que normalmente tendrás que hacer un uso estricto de llaves ({ y }), también puntos y comas (;) cuando escribas bookmarklets. Esto es especialmente importante cuando se trata de construcción de condicionales (if/for/while).

Aparte de esto, el espaciado no importa. No tengas miedo de tener mucho código en una línea porque es todo lo que tienes:

javascript: (() => {   const documentoHTML = document.documentElement.outerHTML;   const coincidencias = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);   const coincidenciasFijas = Array.from(coincidencias).map((elemento) => elemento[0]);   const coincidenciasUnicas
 = Array.from(new Set(coincidenciasFijas));      if (coincidenciasUnicas.length > 0) {     const resultado = coincidenciaFija.join('\n');     alert(resultado);   } else {     alert('No se han encontrado correos electrónicos.');   } })();

Ejemplo de una función JavaScript escrita en una línea.

Si tu script es complejo, será más fácil mantener tu bookmarklet en un editor de código como Visual Studio Code. Puedes copiarlo y pegarlo en tu navegador cuando esté listo.

Cómo interactuar con los sitios web

Lo más habitual es que los bookmarklets sirvan para manipular o interactuar con los sitios web que tienes abiertos.

El Global Document Object

Como el bookmarklet tiene el contexto de la página en la que se encuentra, tiene acceso al document object.

Las funciones ideales para seleccionar elementos para nuestro caso de uso son:

querySelector para seleccionar un solo elemento por el selector CSS.
querySelectorAll para seleccionar todos los elementos que coincidan por el selector CSS.
evaluate para seleccionar todos los elementos coincidentes por XPath.

Existen otras funciones como getElementById y getElementsByClassName, pero queremos evitar los falsos positivos, por lo que siempre haremos una selección estricta utilizando múltiples atributos de elementos.

Selectores CSS y XPath

Si solamente está seleccionando elementos basados en nombres de los elementos, IDs, clases y otros atributos, usar un selector CSS será simple y eficiente.

Los selectores CSS se emplean para seleccionar elementos en documentos HTML para aplicar estilos. Si estás familiarizado con el desarrollo web o con CSS en general, entonces ya sabes cómo utilizar los selectores CSS. (Más información: MDN)

Si también necesita hacer coincidir el contenido de texto de un elemento, entonces tendrá que usar XPath en su lugar.

XPath se emplea para atravesar documentos XML, proporciona todas las capacidades de los selectores de CSS y más, incluida la comparación del contenido de los elementos o el uso de una expresión regular para que coincida. (Más información: MDN , Wikipedia).

Cómo seleccionar elementos de la página web

Uno de los usos más comunes de los bookmarklets es la manipulación de páginas web. Para interactuar, manipular o eliminar elementos de la página, siempre tendrá que seleccionar los elementos primero.

Primero abra las herramientas de desarrollo del navegador presionando, F12o CTRL+ SHIFT+I .
Haga clic en Inspector de página / Elementos, que muestra el documento HTML completo de la página que tiene abierta.
Utilice la herramienta de selección de elementos (CTRL+ SHIFT+ C) y haga clic en el elemento con el que desea interactuar. El visor de documentos se desplazará hasta el elemento en el que hizo clic en el documento HTML. Verá el ID del elemento, las clases y los atributos.
Comprueba si estás en el elemento correcto. Los elementos se pueden anidar donde es más fácil navegar manualmente en el HTML. Por ejemplo, es posible que haya hecho clic en un elemento svg, pero en realidad necesitaba el button o un div dentro del mismo.
Defina un selector de CSS o XPath que coincida con todo lo que desea, es posible que desee que sea más estricto de lo necesario para evitar posibles falsos positivos.

Por ejemplo, supongamos que quisiera descartar todas las sugerencias de temas en Twitter porque son molestas. Así es como se ve un elemento en el que se puede hacer clic para descartar un tema.

Sugerencias de temas de Twitter, con un botón X para marcarlo como "No me interesa".

Un selector apropiado es div[aria-label=Dismiss][role=button].

Necesitamos usar la función querySelectorAll del Global Document Object , luego llamar el método click para simular un clic.

Se puede implementar un bookmarklet para seleccionar cada botón de eliminar y activar un evento clic para todos ellos, con un intervalo de 250 ms.

javascript: (() => {
  const selector = 'div[aria-label=Dismiss][role=button]';
  const temas = document.querySelectorAll(selector);
    
  for (let i = 0; i < temas.length; i++) {
    let tema = temas[i];
    setTimeout(() => tema.click(), i * 250);
  }
})();

Marca todos los temas sugeridos en Twitter como "No me interesa".

Cómo redistribuir marcadores

Para "instalar" un bookmarklet, los usuarios crean un marcador en su navegador, copian y pegan el código en él.

Esto puede ser inconveniente, por lo que es común vincular bookmarklets al compartir. Esto es tan simple como ponerlo en el atributo href del enlace.


  Hola, Mundo!

Ahora los usuarios pueden hacer clic derecho y "Agregar enlace", o arrastrarlo a la barra de marcadores para un fácil acceso.

Al hacer clic en el enlace de la página web, se ejecutará el script inmediatamente. Asegúrese de que no obstruya lo que un usuario está tratando de lograr en su sitio si accidentalmente hace clic en él.

Por ejemplo, el siguiente enlace mostrará una alerta con un "¡Hola, mundo!.

Omisión de política de seguridad de contenido y contenido de usuario

Si gestionas un servicio que permite que el contenido generado por el usuario contenga HTML personalizado, es importante limpiar los enlace (a).

El bookmarklet se ejecuta como código en la consola de herramientas para desarrolladores y omite la Política de seguridad de contenido (CSP) configurada.

El link de "¡Hola, mundo!" puede enviar datos con la misma facilidad a otro servidor, incluida la entrada de campos de formulario o cookies.

Como proveedor de servicios, es importante tener cuidado de que los usuarios puedan explotar esto para compartir código malicioso en su plataforma. Si su enlace se ejecuta en una página bajo su dominio, puede acceder a información confidencial en la página y document.cookies.

Puede probarlo usted mismo en un entorno de pruebas:


  ScriptMalicioso

Ejecute solo código en el que confíe

Como usuario, es importante tener en cuenta que cualquier código puede ser malicioso, sólo hay que hacer clic o añadir marcadores cuando al menos una de las siguientes cosas sea cierta:

Provino de una fuente confiable.
Conoce JavaScript y revisó lo que hace.
Alguien en quien confía conoce JavaScript y lo revisó por usted.

Privacidad y seguridad

Los bookmarklets pueden ser útiles, pero también tenemos extensiones web y scripts de usuario . ¿Qué los hace diferentes?

Las extensiones web son increíblemente fáciles de usar y flexibles. Los marcadores no pueden bloquear solicitudes de red, actualizar contenido a medida que cambia la página ni administrar pestañas.

Sin embargo, hay algunos beneficios en el uso de bookmarklets sobre cualquier otra cosa, a saber, para la privacidad y la seguridad.

Una extensión que modifica la fuente en todas las páginas debe obtener permiso para acceder a todos los datos en todas las páginas web. En Firefox y Chrome, esto incluye todos los campos de entrada y contraseña. (Más información: Mozilla , Google )

Por el contrario, un bookmarklet solo tiene acceso a la página en el momento en que se ejecuta y solo cuando el usuario lo activa manualmente.

Esto da como resultado un menor riesgo de malware, un empleado deshonesto no puede enviar una actualización maliciosa y los datos no se enviarán silenciosamente a otros servidores.

Chrome Web Store ha tenido previamente varias extensiones maliciosas que tuvieron que eliminarse. Algunos de los cuales tenían millones de instalaciones antes de ser eliminados. ( Más Información )

Ejemplo de Bookmarklets

Aquí hay una lista de ideas de bookmarklet, junto con el código que lo implementa. Puede copiarlos y pegarlos en nuevos marcadores para probarlos.

javascript: (() => {
  const documentHTML = document.documentElement.outerHTML;
  const coincidencias = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);
  const coincidenciasFijas = Array.from(coincidencias).map((elemento) => elemento[0]);
  const coincidenciasUnicas = Array.from(new Set(coincidenciasFijas));
  
  if (coincidenciasUnicas.length > 0) {
    const resultado = coincidenciasUnicas.join('\n');
    alert(resultado);
  } else {
    alert('o se han encontrado correos electrónicos.');
  }
})();

Busca enlaces como "Empleados", "Carreras" o "Contratación" en la página y hace clic en él.

javascript: (() => {
  const todoLosElementos = document.querySelectorAll('*');

  for (let elemento of todoLosElementos) {
    elemento.style.fontFamily = 'Comic Sans MS';
  }
})();

Establezca la fuente de todo el texto en la página actual en "Comic Sans MS".

javascript: (() => {
  const destino = "https://www.freecodecamp.org/";
  const alternativa = "https://tenor.com/Y6jj.gif";
  
  const fecha = new Date();
  const horas = fecha.getHours();
    
  if (horas < 3 || horas >= 6) {
    window.open(destino);
  } else {
    window.open(alternativa);
  }
})();

Abra freeCodeCamp, pero abra un GIF en su lugar si es entre las 03:00 y las 06:00.

javascript: (() => {
  const destino = "https://www.freecodecamp.org/";
  const alternativa = "https://tenor.com/Y6jj.gif";
  
  const fecha = new Date();
  const horas = fecha.getHours();
    
  if (horas < 3 || horas >= 6) {
    window.open(destino);
  } else {
    window.open(alternativa);
  }
})();

Abre freeCodeCamp, pero si la hora actual marca entre 03:00 y las 06:00 abre un GIF en su lugar.

¡Gracias por leer! Ahora ve y crea tus propios bookmarklets.

JavaScript Splice: Como utilizar el metodo .splice() de arreglo en JS

Keiler Guardo Herrera — Mon, 30 Aug 2021 02:49:08 +0000

Artículo original escrito por Nathan Sebhastian
Artículo original JavaScript Splice – How to Use the .splice() JS Array Method
Traducido y adaptado por Keiler Guardo Herrera

El método splice() es un método incorporado en los arreglos de JavaScript. Que permite cambiar el contenido del arreglo eliminando o sustituyendo los elementos existentes por otros nuevos.

Este método modifica el arreglo original y retorna los elementos eliminados como un nuevo arreglo.

En este tutorial, aprenderás cómo puedes eliminar, añadir o reemplazar elementos de un arreglo utilizando el método splice(). Vamos a empezar con la eliminación de los elementos de un arreglo en primer lugar. Este método modifica el arreglo original y retorna los elementos eliminados como un nuevo arreglo.

Cómo eliminar elementos de un arreglo con splice()

Por ejemplo, supongamos que tenemos un arreglo llamado meses, pero que tiene algunos nombres de los días en el arreglo como los siguientes:

let meses = ["enero", "febrero", "lunes", "martes"];

Un conjunto mixto de nombres de meses y de días

Puedes utilizar el método splice() para eliminar los nombres de los días del arreglo meses y añadirlos a un nuevo arreglo al mismo tiempo:

let meses = ["enero", "febrero", "lunes", "martes"];
let dias = meses.splice(2);

console.log(dias); // ["lunes", "martes"]

Creación del arreglo días

El método splice() necesita al menos un parámetro, que es el índice de inicio donde comienza la operación. En el código anterior, se pasa el número 2 al método, lo que significa que splice() empezará a eliminar elementos desde el índice 2.

También puedes definir cuántos elementos quieres eliminar del arreglo pasando un segundo argumento numero conocido como eliminaConteo. Por ejemplo, para eliminar solo un elemento, puede pasar el número 1 de esta manera:

let meses = ["enero", "febrero", "lunes", "martes"];
let dias = meses.splice(2, 1);

console.log(dias); // ["lunes"]
console.log(meses); // ["enero", "febrero", "martes"]

Eliminando sólo un elemento del arreglo

Si se omite el parámetro eliminaConteo, splice() eliminará todos los elementos desde el índice inicial hasta el final del arreglo.

Cómo eliminar y añadir elementos de un arreglo con splice()

El método también permite añadir nuevos elementos justo después de la operación de borrado. Solo tienes que pasar los elementos que quieres añadir al arreglo después de la cuenta de borrado.

La sintaxis completa del método splice() es la siguiente:

Array.splice(inicio, eliminaConteo, nuevoElemento, nuevoElemento, nuevoElemento, ...)

Sintaxis completa del método splice()

El siguiente ejemplo muestra cómo puede eliminar "lunes" y "martes" y añadir "marzo" y "abril" al arreglo de meses:

let meses = ["enero", "febrero", "lunes", "martes"];
let dias = meses.splice(2, 2, "marzo", "abril");

console.log(dias); // ["lunes", "martes"]
console.log(meses); // ["enero", "febrero", "marzo", "abril"]

Uso de splice() para eliminar y añadir elementos a un arreglo

Cómo añadir nuevos elementos al arreglo sin eliminar ninguno

Por último, puedes añadir nuevos elementos sin eliminar ninguno pasando el número 0 al parámetro eliminaConteo. Si no se elimina ningún elemento, el método splice devolverá un arreglo vacío. Puede elegir si desea almacenar el arreglo vacío retornado en una variable o no.

El siguiente ejemplo muestra cómo se puede añadir un nuevo elemento "marzo" junto a "febrero" sin eliminar ningún elemento. Como el método splice() retorna un arreglo vacío, no es necesario almacenar el arreglo retornado:

let meses = ["enero", "febrero", "lunes", "martes"];
meses.splice(2, 0, "marzo");

console.log(meses); 
// ["enero", "febrero", "marzo", "abril", "lunes", "martes"]

El método splice() llamado sin retornar ningún elemento

Conclusión

Acabas de aprender cómo funciona el método splice(). ¡Buen trabajo!

El método splice() se utiliza principalmente cuando necesitas eliminar o añadir nuevos elementos a un arreglo. En algunas situaciones, también puedes utilizarlo para separar un arreglo que tiene contenido mixto como en el caso anterior.

Si eliminas 0 elementos del arreglo, el método simplemente devolverá un arreglo vacío. Siempre eres libre de asignar el arreglo retornado a una variable o ignorarlo.

Gracias por leer este tutorial

Si quieres aprender más sobre JavaScript, puedes visitar mi sitio en sebhastian.com, donde he publicado más de 100 tutoriales sobre programación con JavaScript.

Los tutoriales incluyen manipulación de cadenas, manipulación de fechas, métodos de arreglos y objetos, soluciones de algoritmos de JavaScript y mucho más.

Asegúrate de comprobarlo ? .

Keiler Guardo Herrera - freeCodeCamp.org

Cómo instalar Node.js en Ubuntu y actualizar npm a la última versión

Usando NVM - mi método preferido

Instalar NVM

Instalar NodeJS

Instalar Nodesource

Instalar NodeJS

Cómo centrar un Div con CSS: 10 maneras diferentes

Cómo centrar un Div

Cómo centrar un Div usando la propiedad position de CSS

1. Cómo usar position: relative, absolute y los valores de desplazamiento top, left

2. Cómo usar position: relative, absolute, valores de desplazamiento top, left, right, bottom y margin: auto

Cómo centrar un Div usando CSS Flexbox

3. Cómo usar Flexbox, justify-content y align-item

4. Cómo usar Flexbox, justify-content y align-self

5. Cómo usar Flexbox y margin: auto

Cómo centrar un Div usando CSS Grid

6. Cómo usar Grid, justify-content y align-items

7. Cómo usar Grid y place-items

8. Cómo usar Grid, align-self y justify-self

9. Cómo usar Grid y place-self

10. Cómo usar Grid y margin: auto

Este es el resultado

Resumen

Enlace a GitHub

Resumen

Enlaces a redes sociales

Valores falsos en JavaScript

Descripción

Comprobación de valores falsos en las variables

Ejemplos generales

Diversión con arreglos

Advertencia

JavaScript rest vs. operador de propagación (spread): ¿Cuál es la diferencia?

¿Qué es exactamente el operador rest?

¿Cómo funciona el operador rest en una función?

¡Cuidado! No puedes utilizar “use strict” dentro de una función que contenga un parámetro rest

Cómo funciona el operador Rest en una asignación de desestructuración

Argumentos vs. parámetro Rest: ¿Cuál es la diferencia?

Diferencia 1: El objeto de argumentos es un objeto similar a un arreglo - ¡no un arreglo real!

Diferencia 2: No se puede utilizar el objeto de argumentos en una función de flecha

Diferencia 3: Deja que rest sea tu preferido

¿Qué es el operador de propagación y cómo funciona en JavaScript?

Ejemplo 1 de propagación: Cómo funciona la propagación en un arreglo literal

Ejemplo 2 de propagación: Cómo utilizar propagación para convertir una cadena en elementos individuales de un arreglo

Ejemplo 3: Cómo funciona el operador de propagación en una llamada de función

Ejemplo 4 de propagación: Cómo funciona la propagación en un objeto literal

Lo que hay que saber sobre el operador de propagación

Información 1: Los operadores de propagación no pueden expandir los valores de los objetos literales

Información 2: El operador de propagación no clona propiedades idénticas

Información 3: ¡Cuidado con el funcionamiento de propagación cuando se utiliza en objetos que no son primitivos!

¿Qué pasa si miNombre contiene elementos no primitivos?

Para terminar

Cómo formatear fechas en JavaScript con una línea de código

Cómo formatear fechas en JS

Los métodos de date en JavaScript

El método toDateString() en JavaScript

El método toLocaleDateString() en JavaScript

Conclusión

Juegos de Google Doodle: Béisbol, PacMan y más

El primer Doodle de Google

El desarrollo de los Doodles de Google

El primer juego de Google Doodle

Cómo jugar a los juegos de Google Doodle

Juegos populares de Google Doodle

Juegos de ingenio de Doodle

El cubo de Rubik

Crucigramas

Juegos de codificación de Doodle

Coding for carrots

Juegos de Doodle para los aficionados al deporte

Cricket

Béisbol

Baloncesto

Juegos Olímpicos de Tokio 2020

Juegos de Doodle para los amantes de la música

Celebrando a Oskar Fischinger

Celebrando el nacimiento del Hip Hop

Rockmore

Juegos de Doodle para creativos

Cómo centrar un `Div`

Cómo centrar un Div usando la propiedad `position` de CSS

¡Cuidado! No puedes utilizar `“use strict”` dentro de una función que contenga un parámetro rest

Diferencia 1: El objeto de `argumentos` es un objeto similar a un arreglo - ¡no un arreglo real!

Diferencia 2: No se puede utilizar el objeto de `argumentos` en una función de flecha

Diferencia 3: Deja que `rest` sea tu preferido

¿Qué es el operador de `propagación` y cómo funciona en JavaScript?

¿Qué pasa si `miNombre` contiene elementos no primitivos?

El método `toDateString()` en JavaScript

El método `toLocaleDateString()` en JavaScript

Cómo analizar JSON con `fetch`

Cómo encadenar JSON con `JSON.stringify()`

Cómo analizar un archivo JSON con `require()`

Cómo analizar un archivo JSON con `fs.readFileSync(`) y `JSON.parse()`

Cómo analizar JSON con `fs.readFile(`) y `JSON.parse()`

Cómo encadenar JSON con `JSON.stringify()` en Node.js

2. Cómo utilizar SVG con `background-image` en CSS