Hoy vamos a construir una tienda de helados y aprenderemos asincronismo con JavaScript al mismo tiempo. A lo largo del camino aprenderemos:

• Callbacks
• Promesas
• Async/Await

Aquí podremos ver que cubriremos en este artículo:

• ¿Qué es asíncrono en JavaScript?
• Síncrono vs asíncrono
• Como trabajan los callbacks en JavaScript
• Como Trabajan las promesas en JavaScript
• Como trabaja Async/Await en JavaScript

Entonces, vamos con esto.

Si prefieres puedes ver esté tutorial en YouTube

¿Qué es asíncrono en JavaScript?

Si quieres construir proyectos eficientemente, entonces esté concepto es para ti.
La teoría de asincronismo en JavaScript nos ayuda a dividir un proyecto complejo en tareas más pequeñas.
Podemos usar cualquiera de estas tres técnicas- callback, promesas o async/await para ejecutar estas pequeñas tareas de la manera de obtener los mejores resultados.
Vamos a empezar ?️

Síncrono vs asíncrono

¿Qué es un sístema síncrono?

En un sístema síncrono una tarea es terminada después de otra. Pensemos que tienes 10 tareas por completar, Debemos completar una tarea a la vez.

Observa el GIF ? - Una cosa está ocurriendo a la vez.

Veríamos que mientras la primera imagen no está cargada completamente, la segunda imagen no está cargando.
Bueno, JavaScript por defecto es síncrono (posee un solo hilo de ejecución). Pensemos que eso es - un hilo significa que tienes una sola mano para hacer las cosas.

¿Qué es un sistema asíncrono?

En este sistema, las tareas son completadas independientemente.
Aquí, imagina que 10 tareas, tú tienes 10 manos. Entonces, cada mano puede hacer una tarea independientemente de las otras manos.

Echa un vistazo al siguiente GIF ? - puedes ver que cada imagen carga al mismo tiempo.

otra vez, todas las imágenes son cargadas a su propio ritmo. Ninguna de ellas estás esperando por alguna otra.

Para resumir síncrono vs asíncrono JS:

Cuando tres imágenes están en un maratón, en un:

• Sistema síncrono: tres imágenes están en el mismo carril, ninguno puede adelantar al otro. La carrera es terminada uno a la vez, Si la imagen número dos se detiene, las siguientes imágenes se detienen.

• Sistema asíncrono: Las tres imágenes están en diferentes carriles. Ellas finalizarían la carrera en su propio carril. Ninguna se detiene por otra.

Ejemplos de código síncrono y asíncrono

Antes de empezar este proyecto, vamos a ver algunos ejemplos para resolver algunas dudas.

Vamos a probar un sistema asíncrono, escribe este código en JavaScript:

console.log(" Yo ");

console.log(" como ");

console.log(" Helado ");

Este es el resultado en la consola: ?

Vamos a tomarnos dos segundos para comernos el helado. Ahora, vamos a probar un sistema asíncrono. Escribe el siguiente código en JavaScript.
Observa: No te preocupes, discutiremos setTimeout() luego en este artículo.

console.log("Yo");

// Veremos esto en 2 segundos

setTimeout(()=>{
  console.log("como");
},2000)

console.log("Helado")

Este es el resultado en la consola: ?

Ahora sabes la diferencia entre operaciones síncronas y asíncronas, vamos a construir nuestra tienda de helados.

Para este proyecto puedes abrir codepen.io y empezar a programar, o puedes hacerlo en VS code y editar tu archivo de elección.

Abre la sección de JavaScript y también abre la consola de desarrollador. Escribiremos nuestro código y vemos los resultados en la consola.

Cuando pasamos una función a otra función como un argumento, esto lo llamamos callback.
Aquí podemos ver un ejemplo de una función callback:

No te preocupes, vamos a ver algunos ejemplos de funciones callback en un minuto.

¿Por qué usamos funciones callback?

Cuando hacemos una tarea compleja, dividimos esa tarea en pasos más pequeños. Para ayudarnos a establecer una relación entre estos pasos según el tiempo (opcional) y el orden, utilizamos devoluciones de llamada.

Estos son los pequeños pasos que debes tomar para hacer helado. También ten en cuenta que en este ejemplo, el orden de los pasos y el tiempo son cruciales. No puedes cortar la fruta y servir helado.

Al mismo tiempo, si un paso anterior no se completa, no podemos pasar al siguiente paso.

Para explicarlo con más detalle, comencemos nuestro negocio de heladerías.

Pero espera...

La tienda tendrá dos partes:

• El almacén tendrá todos los ingredientes [Nuestro Backend]
• Vamos a producir helado en tu cocina [el frontend]

Almacenemos nuestros datos

Ahora, vamos a almacenar nuestros ingredientes dentro de un objeto. ¡Empecemos!

Puedes almacenar los ingredientes dentro de objetos como este:

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }

Nuestros otros ingredientes están aquí: ?

Puedes almacenar estos otros ingredientes en objetos JavaScript como este: ?

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };

Todo el negocio depende de lo que un cliente ordene. Una vez que tenemos un pedido, comenzamos la producción y luego servimos helado. Por lo tanto, vamos a crear dos funciones ->

• order (orden)
• production (producción)

Así es como funciona todo: ?

Hagamos nuestras funciones. Usaremos funciones de flecha aquí:

let order = () =>{};

let production = () =>{};

Ahora, vamos a establecer una relación entre estas dos funciones usando una función callback, como esta: ?

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

Vamos a hacer una pequeña prueba

Usaremos la función console.log() para realizar pruebas para aclarar cualquier duda que podamos tener sobre cómo establecimos la relación entre las dos funciones.

let order = (call_production) =>{

console.log("Order placed. Please call production")

// function ? is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};

Para ejecutar la prueba, llamaremos a la función order. Y agregaremos la segunda función llamada production como su argumento.

// name ? of our second function
order(production);

Aquí está el resultado en nuestra consola ?

Tómate un descanso

Hasta ahora todo bien: ¡tómate un descanso!

Despeja la consola console.log

Mantén este código y elimina todo [no elimines nuestra variable de acciones]. En nuestra primera función, pasa otro argumento para que podamos recibir la orden [Nombre de la fruta]:

// Function 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// Function 2

let production = () =>{};


// Trigger ?

order("", production);

Estos son nuestros pasos, y el tiempo que tardará cada paso en ejecutarse.

En este gráfico, puedes ver que el paso 1 es realizar el pedido, que tarda 2 segundos. Luego, el paso 2 es cortar la fruta (2 segundos), el paso 3 es agregar agua y hielo (1 segundo), el paso 4 es encender la máquina (1 segundo), el paso 5 es seleccionar el recipiente (2 segundos), el paso 6 es seleccionar los ingredientes (3 segundos) y el paso 7, el paso final, es servir el helado que toma 2 segundos.

Para establecer el tiempo, la función setTimeout() es excelente, ya que también utiliza una función callback tomando una función como argumento.

Ahora, vamos a seleccionar nuestra fruta y utilizar esta función:

// 1st Function

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// Order placed. Call production to start
   call_production();
  },2000)
};

// 2nd Function

let production = () =>{
  // blank for now
};

// Trigger ?
order(0, production);

Y aquí está el resultado en la consola: ?

Ten en cuenta que el resultado se muestra después de 2 segundos.

Si te estás preguntando cómo recogimos la fresa de nuestra variable de stock, aquí está el código con el formato.?

No borres nada. Ahora comenzaremos a escribir nuestra función de producción con el siguiente código.? Usaremos funciones de flecha:

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};

Y aquí está el resultado?

Anidaremos otra función setTimeout en nuestra función setTimeout existente para picar la fruta. Así: ?

let production = () =>{
  
  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};

Y aquí está el resultado?

Si lo recuerdas, aquí están nuestros pasos:

Completemos nuestra producción de helados anidando una función dentro de otra función: Esto también se conoce como función callback, ¿recuerdas?

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};

Y aquí está el resultado en la consola ?

¿Te sientes confundido?

Esto se llama infierno de función callback. Se ve algo como esto (¿recuerdas ese código justo arriba?): ?

¿Cuál es la solución a esto?

Cómo usar promesas para escapar del infierno de función callback

Las promesas se inventaron para resolver el problema del infierno de devolución de llamada y para manejar mejor nuestras tareas.

Tómate un descanso

¡Pero primero, tómate un descanso!

Así es como se ve una promesa:

Diseccionemos las promesas juntos.

Como muestran los gráficos anteriores, una promesa tiene tres estados:

• Pendiente: Esta es la etapa inicial. Aquí no pasa nada. Piensa en ello de esta manera, tu cliente se está tomando su tiempo para darte un pedido. Pero aún no han pedido nada.
• Resuelto: Esto significa que su cliente ha recibido su comida y está feliz.
• Rechazado: Esto significa que su cliente no recibió su pedido y abandonó el restaurante.

Adoptemos promesas para nuestro estudio de caso de producción de helados.

Pero espera...

Necesitamos entender cuatro cosas más primero ->

• Relación entre el tiempo y el trabajo
• Encadenamiento de promesas
• Manejo de errores
• El controlador .finally

Comencemos nuestra heladería y entendamos cada uno de estos conceptos uno por uno dando pequeños pasos.

Relación entre el tiempo y el trabajo

Si lo recuerdas, estos son nuestros pasos y el tiempo que cada uno tarda en hacer helado

Para que esto suceda, vamos a crear una variable en JavaScript: ?

let is_shop_open = true;

Ahora cree una función llamada order y pasa dos argumentos llamados time, work:

let order = ( time, work ) =>{

  }

Ahora, vamos a hacerle una promesa a nuestro cliente, "Te serviremos helado" Así ->

let order = ( time, work ) =>{

  return new Promise( ( resolve, reject )=>{ } )

  }

Nuestra promesa tiene 2 partes:

• Resuelto [ helado entregado ]
• Rechazado [ el cliente no recibió helado ]

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      resolve( )

    }

    else{

      reject( console.log("Our shop is closed") )

    }

  })
}

Agreguemos los factores de tiempo y trabajo dentro de nuestra promesa usando una función setTimeout() dentro de nuestra sentencia if. Sígueme ?

Nota: En la vida real, también puede evitar el factor tiempo. Esto depende completamente de la naturaleza de su trabajo.

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      setTimeout(()=>{

       // work is ? getting done here
        resolve( work() )

// Setting ? time here for 1 work
       }, time)

    }

    else{
      reject( console.log("Our shop is closed") )
    }

  })
}

Ahora, vamos a usar nuestra función recién creada para comenzar la producción de helados.

// Set ? time here
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
//    pass a ☝️ function here to start working

Resultado ? después de 2 segundos se ve así:

¡Buen trabajo!

Encadenamiento de promesas

En este método, definimos lo que necesitamos hacer cuando se completa la primera tarea utilizando el manejador .then. Se ve algo como esto ?

El manejador .then deveuelve una promesa cuando se resuelve nuestra promesa original.

Aquí hay un ejemplo:

Déjame hacerlo más simple: es similar a dar instrucciones a alguien. Le dices a alguien que " Primero haga esto, luego haga aquello, luego esta otra cosa, luego.., entonces.., entonces..."y así sucesivamente.

• La primera tarea es nuestra promesa original.
• El resto de las tareas devuelven nuestra promesa una vez que se complete un pequeño trabajo.

Vamos a implementar esto en nuestro proyecto. En la parte inferior de su código escriba las siguientes líneas. ?

Nota: no te olvides de escribir la palabra return dentro de tu manejador .then. De lo contrario, no funcionará correctamente. Si tienes curiosidad, intenta eliminar la devolución una vez que terminemos los pasos:

order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

Y aquí está el resultado: ?

Usando el mismo sistema, terminemos nuestro proyecto:?

// step 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

// step 2
.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
  return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
  return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})

// step 5
.then(()=>{
  return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
  return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})

// step 7
.then(()=>{
  return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})

// Step 8
.then(()=>{
  return order(2000, ()=>console.log("Serve Ice Cream"))
})

Aquí está el resultado: ?

Manejo de errores

Necesitamos una manera de manejar los errores cuando algo sale mal. Pero primero, necesitamos entender el ciclo de promesas:

Para atrapar nuestros errores, cambiemos nuestra variable a falso false.

let is_shop_open = false;

Lo que significa que nuestra tienda está cerrada. Ya no vendemos helados a nuestros clientes.

Para manejar esto, usamos el manejador .catch. igual que .then, también devuelve una promesa, pero solo cuando nuestra promesa original es rechazada.

Un pequeño recordatorio aquí:

• .then funciona cuando se resuelve una promesa
• .catch funciona cuando se rechaza una promesa

Ir hasta el fondo y escribir el siguiente código:?

Solo recuerda que no debe haber nada entre tu anterior manejador .then y el manejador .catch.

.catch(()=>{
  console.log("Customer left")
})

Aquí está el resultado:?

Un par de cosas a tener en cuenta sobre este código:

• El 1.er mensaje viene de la parte reject() de nuestra promesa
• El segundo mensaje viene de manejador .catch

Cómo usar el manejador .finally()

Hay algo llamado el manejador finally el cual funciona sin importar si nuestra promesa fue resulta o rechazada.

Por ejemplo: Ya sea que atendamos a cero clientes o 100 clientes, nuestra tienda cerrará al final del día.

Si tienes curiosidad por probar esto, ven al fondo y escribe este código: ?

.finally(()=>{
  console.log("end of day")
})

El resultado:?

Todos, por favor den la bienvenida a Async / Await~

¿Cómo funciona Async / Await en JavaScript?

Se supone que esta es la mejor manera de escribir promesas y nos ayuda a mantener nuestro código simple y limpio.

Todo lo que tienes que hacer es escribir la palabra async antes de cualquier función regular y se convierte en una promesa.

Pero primero, tomate un descaso

Echemos un vistazo?

Promesas vs Async/Await en JavaScript

Antes de async/await, para hacer una promesa escribimos esto:

function order(){
   return new Promise( (resolve, reject) =>{

    // Write code here
   } )
}

Ahora usando async/await, escribimos uno como este:

//? the magical keyword
 async function order() {
    // Write code here
 }

Pero espera....

Necesitas entender ->

• Como usar las palabras clave try y catch
• Como usar la palabra clave await.

Cómo usar las palabras clave Try and Catch

Usamos la palabra clave try para ejecutar nuestro código mientras usamos catch para detectar nuestros errores. Es el mismo concepto que vimos cuando con promesas.

Hagamos una comparación. Veremos una pequeña demostración del formato, luego comenzaremos a programar.

Promesas en JS -> resolver resolve o rechazar reject

We used resolve and reject in promises like this:

function kitchen(){

  return new Promise ((resolve, reject)=>{
    if(true){
       resolve("promise is fulfilled")
    }

    else{
        reject("error caught here")
    }
  })
}

kitchen()  // run the code
.then()    // next step
.then()    // next step
.catch()   // error caught here
.finally() // end of the promise [optional]

Async / Await en JS -> try, catch

Cuando usamos async/await, usamos este formato:

//? Magical keyword
async function kitchen(){

   try{
// Let's create a fake problem      
      await abc;
   }

   catch(error){
      console.log("abc does not exist", error)
   }

   finally{
      console.log("Runs code anyways")
   }
}

kitchen()  // run the code

No te asustes, hablaremos de la palabra clave await a continuación.

Now hopefully you understand the difference between promises and Async / Await.

Cómo usar la palabra clave await de JavaScript

La palabra clave await hace que JavaScript espere hasta que una promesa se establezca y devuelva su resultado.

Cómo usar la palabra clave await en JavaScript

Volvamos a nuestra heladería. No sabemos qué relleno prefiere un cliente, chocolate o cacahuetes. Así que tenemos que detener nuestra máquina e ir y preguntar a nuestro cliente lo que les gustaría en su helado.

Observe aquí que solo nuestra cocina está detenida, pero nuestro personal fuera de la cocina seguirá haciendo cosas como:

• lavar los platos
• limpiar las mesas
• tomando órdenes, y así sucesivamente

Un ejemplo de código de palabra clave await

Vamos a crear una pequeña promesa para preguntar qué relleno usar. El proceso dura tres segundos.

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

Ahora, vamos a crear nuestra función de cocina con la palabra clave async primero.

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")
  
  await toppings_choice()
  
  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();

Agreguemos otras tareas debajo de la función llamada kitchen().

console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

Y aquí está el resultado:

Literalmente, estamos saliendo de nuestra cocina para preguntarle a nuestro cliente: "¿cuál es su opción de cobertura?" Mientras tanto, otras cosas todavía se hacen.

Una vez que tengamos su elección, entramos en la cocina y terminamos el trabajo.

Nota pequeña

Al usar Async / Await, también puede usar el .then, .catch, y .finally, los manejadores también son una parte central de las promesas.

Abramos nuestra heladería de nuevo

Vamos a crear dos funciones ->

• kitchen: para hacer helado
• time: para asignar la cantidad de tiempo que tomará cada pequeña tarea.

¡Empecemos! Primero, cree la función de tiempo:

let is_shop_open = true;

function time(ms) {

   return new Promise( (resolve, reject) => {

      if(is_shop_open){
         setTimeout(resolve,ms);
      }

      else{
         reject(console.log("Shop is closed"))
      }
    });
}

Ahora, vamos a crear nuestra cocina:

async function kitchen(){
   try{

     // instruction here
   }

   catch(error){
    // error management here
   }
}

// Trigger
kitchen();

Vamos a dar pequeñas instrucciones y probar si nuestra función de cocina está funcionando o no:

async function kitchen(){
   try{

// time taken to perform this 1 task
     await time(2000)
     console.log(`${stocks.Fruits[0]} was selected`)
   }

   catch(error){
     console.log("Customer left", error)
   }

   finally{
      console.log("Day ended, shop closed")
    }
}

// Trigger
kitchen();

El resultado se ve así cuando la tienda está abierta:?

El resultado se ve así cuando la tienda está cerrada: ?

Hasta ahora todo bien.

Completemos nuestro proyecto.

Aquí está la lista de nuestras tareas de nuevo: ?

Primero, abre nuestra tienda

let is_shop_open = true;

Ahora escribe los pasos dentro de nuestra función kitchen(): ?

async function kitchen(){
    try{
	await time(2000)
	console.log(`${stocks.Fruits[0]} was selected`)

	await time(0000)
	console.log("production has started")

	await time(2000)
	console.log("fruit has been chopped")

	await time(1000)
	console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

	await time(1000)
	console.log("start the machine")

	await time(2000)
	console.log(`ice cream placed on ${stocks.holder[1]}`)

	await time(3000)
	console.log(`${stocks.toppings[0]} as toppings`)

	await time(2000)
	console.log("Serve Ice Cream")
    }

    catch(error){
	 console.log("customer left")
    }
}

Y aquí está el resultado: ?

Conclusión

¡Felicitaciones por leer hasta el final! En este artículo has aprendido:

• La diferencia entre sistemas síncronos y asíncronos
• Mecanismos de JavaScript asíncrono usando 3 técnicas (funciones callbacks, promesas, y Async / Await)

Aquí está tu medalla por leer hasta el final. ❤️

Las sugerencias y críticas son muy apreciadas ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Créditos

• Collection of all the images used
• Unicorns, kitty avatar
• tabby cat, Astrologist Woman, girl-holding-flower
• Character emotions

Si estás leyendo este artículo, ya debes conocer que abundan los beneficios de ser un contribuidor de proyectos de código abierto (Puedes saltarte este artículo y navegar hasta el final si estás aquí por la hoja de trucos).

El problema común al que se enfrenta un aspirante a contribuidor de proyecto de código abierto es como realizar el primer paso desde el fork hasta el pull request. Luego de leer este artículo, estarás equipado con todo lo que necesitas para realizar el primer pull request a un proyecto de código abierto.

Aparte de hacerse fácil este proceso para ti, el flujo de trabajo definido en git también hará que tu contribución se vea profesional. Esto será en el caso que quieras agregar tu contribución a tu portafolio.

Pre-requisitos

Este artículo asume que ya conoces los pasos para contribuir a un proyecto de código abierto. Si no los conoces, quizás te gustaría leer este artículo escrito por Maryna. También asumimos que tienes instalado Git en tu computadora, Si no lo tienes, quizas quieras revisar instalación de Git en este artículo y hacerlo antes.

Paso 1: Fork del proyecto

Esto es tan simple como hacer click en un botón de GitHub. Navega al repositorio del proyecto que desees contribuir, luego haz click en el botón fork en la parte superior izquierda como se puede observar en la siguiente imagen.

Luego de usar el botón fork tendrás el repositorio en tu cuenta de GitHub.

Paso 2: Clonar el proyecto en tu máquina local

Esta es la parte más simple de Git. Navega hasta el repositorio forked (El repositorio ahora se encuentra en tu lista de proyectos en GitHub). Luego del paso 1 y 2 como puedes ver en la imagen siguiente debes copiar la ruta url clonar el repositorio. Esta url debe verse: https:github.com/suretrust.com/freeCodeCamp.git

Luego debes clonar el proyecto con el comando git clone <la url copiada> en la linea de comandos como en el siguiente ejemplo:

git clone https://github.com/suretrust/freeCodeCamp.git

Paso 3: Crea upstream

Upstream es necesario para mantener el seguimiento desde tu repositorio al repositorio del proyecto original. Esto es muy útil si deseas contribuir a un repositorio popular.

Algunos repositorios aceptan los pull request cada hora o menos, así que debes asegurarte que tu rama tiene los ultimos cambios del repositorio original.

Debes tener en cuenta que upstream apunta al repositorio freeCodeCamp y no a tu repositorio. Siguiendo los pasos 1 y 2 debes copiar la url de upstream.

Para crear un link al repositorio original, copia y pega el siguiente comando en tu terminal:

git remote add upstream <upstream address>

Puedes usar git pull upstream master para confirmar que no ha habido ningún cambio hasta este momento (desde que realizamos el fork del repositorio hasta ahora)-

Step 4: Crea la rama dónde vas a trabajar

Es bueno crear una nueva rama cada vez que quieras contribuir, esto nos permite identificar que la rama es para la contribución que se está a punto de hacer, podría ser tan pequeño como corregir un error tipográfico o tan largo como la implementación de una nueva funcionalidad. De cualquier manera, es buena práctica crear una rama.

Otra parte importante de la creación de ramas es el nombrado, es agradable usar un nombre que un extraño que no sabe nada del repositorio pueda entender fácilmente. Si quieres añadir una funcionalidad de inicio de sesión, por ejemplo, debes crear una rama llamado add-login-feature o login-feature.

Para crear una rama debes escribir el siguiente comando en tu terminal:

git checkout -b <el nombre de tu rama>

Este comando creará una rama y apuntará a ella, si el nombre de la rama es login-feature entonces puedes usar el siguiente comando:

git checkout -b login-feature

Añade tu contribución y después muévete al paso 5.

Paso 5: Git add y hacer commit de tu contribución

Esto también es bastante simple. Puedes hacerstage y commit de tus cambios escribiendo lo siguiente en la terminal:

// Para hacer stage de los cambios
git add .

//Para hacer commit de los cambios
git commit -m 'Mensaje del commit'

Ahora ya has realizado tu commit, ¿Cúal es el siguiente paso?

Paso 6: Hacer Pull desde upstream a nuestra rama local

Como lo vimos en el paso 4, este paso es mezclar cualquier diferencia en upstream en nuestra local para prevenir conflictos.

git pull upstream <nombre-de-rama>

Esto mezcla los cambios de upstream en nuestra rama actual.

Paso 7: Push de la rama en la que estamos trabajando

Ahora, casi estás ahí.
Para hacer push de los cambios en los que has estado trabajando debes ejecutar:

git push origin <nombre-de-rama>

Paso 8: Crear un pull request

Este es el paso final para cualquier contribución a un proyecto abierto, estaras diciendo "He realizado algunos cambios, ¿Le importaría agregarlos al proyecto?".

Al abrir una solicitud de pull request, esperaras que el propietario del proyecto o los miembros les guste lo que ven y los mezclen. De lo contrario, podrían realizar cambios o solicitar que tu los realices antes de hacer la mezcla con la rama estable del proyecto.

Para abrir un pull request, navega hasta el repositorio principal como puedes ver en la siguiente imagen. Podrás ver la última rama que subiste 'login-feature', entonces debes hacer click en 'compare and pull request'.

Explica claramente los cambios que has realizado y luego crea el pull request como puedes verlo en la imágen:

Esto es todo. Ahora puedes ir y contribuir a un proyecto ¡como todo un profesional!

Hoja de comando de Git para contribuir a un proyecto

¡Hasta luego y feliz contribución!

Traducido del artículo de Saheed Oladele - A simple Git guide and cheat sheet for open source contributors

Tabla de contenidos

• Todas las propiedades
• background-image
• background-size
• background-repeat
• background-position
• background-origin
• background-clip
• background-attachment
• background-color
• Atajos y combinaciones
• Conclusión

También puedes ver este tutorial en YouTube:

Todas las propiedades

Esta es la lista de todas las propiedades que vamos a revisar. El texto rojo al final es la taquigrafía.

¿Qué son las propiedades de fondo CSS?

Las propiedades de fondo CSS nos dejan controlar el tamaño y las propiedades de las imágenes, lo que nos permite hacer imágenes responsive para pequeñas y grandes pantallas. Esto, a su vez, nos ayuda a crear sitios web responsive.
Por ejemplo,

• La propiedad background-size nos permite asignar un nuevo valor de ancho y alto para nuestras imágenes de acuerdo al tamaño de la pantalla.
• background-position nos permite decir al navegador donde poner la imagen en la pantalla.

Y hay mucho más.

¿Cómo configurar el proyecto?

Antes de programar, necesitas saber un poco sobre HTML, CSS y cómo usar VScode.
Para probar las propiedades y sus valores, sigue los siguientes pasos ?

1. Crea una nueva carpeta llamada 'BACKGROUND-PROJECT'. Abre la carpeta en VScode.
2. Crea los archivos index.html y style.css.
3. Instala 'live server' en VScode.
4. Inicia live server.

HTML

Crea un div con el nombre de la clase 'container' dentro del body tag en el archivo HTML.

<div class="container"></div>

CSS

En CSS, tú debes incluir el tamaño para el 'container', de lo contrario nosotros no seremos capaces de ver la imagen. En nuestro caso, estableceremos 100vh, igual a:

.container{
  height : 100vh;
}

Descargar las imagenes del proyecto

Las imágenes están en mi GitHub repository. Te explico cómo descargarlas:

1. Copia el link anterior ☝️
2. Ve a downgit y pega el link que ya copiaste.
3. Sigue los pasos del siguiente video ?

y... ¡estamos listos!

Vamos a programar ?

La propiedad background-image

Usando esta propiedad, podemos añadir imágenes a lo largo de nuestra hoja de estilos.

Escribimos la sintaxis después de escribir el selector, igual a:?

.container{
// El path/URL de la imagen va dentro de las comillas simples ? 
   background-image  :  url(' ');
}

Podemos usar bakbroung-image de dos maneras:

• Con el path del directorio local.
• Especificando la URl de la imagen.

¿Comó usar background-image a través del directorio

Aquí tenemos la sintaxis para background-image cuando usamos el directorio ?.

.container{
// Coloca la ruta dentro de las comillas simples ? 
   background-image  :  url(' ');
}

Hay tres casos donde necesitamos especificar la ruta de la imagen en nuestro CSS:

1. Cuando la imagen y style.css están en la misma carpeta.
2. Cuando la imagen está en la siguiente carpeta.
3. Cuando la imagen está en la carpeta anterior.

Cuando la imagen y style.css están en la misma carpeta, se va ver de la siguiente manera. ?

Observa que kitty.png y style.cssestán en la misma carpeta padre llamada BACKGROUND-PROJECT:

Para localizar la ruta de kitty.png, escribe el siguiente código en style.css:

.container{
   background-image : url("kitty.png");
   
   height: 100vh;
// establecer el tamaño y no permitir repetición de la imagen
   background-repeat : no-repeat;
   background-size : contain;
 }

Cuando la imagen está en la carpeta siguiente y style.css en la carpeta anterior. Observa como la imagen debajo kitty.png' está en la carpeta Assets mientras que style.css está en la carpeta anterior.

Para continuar y encontrar el archivo kitty.png, debemos escribir un punto y un slash igual a (./) luego de la comilla en style.css. Entonces escribimos el nombre de la carpeta y luego slash (/) para finalmente colocar el nombre de la imagen, igual a: ?

 .container{
   background-image : url("./Assets/kitty.png");

   height: 100vh;
// establecer el tamaño y no permitir repetición de la imagen
   background-repeat : no-repeat;
   background-size : contain;
 }

Si la imagen está en la carpeta anterior, entonces necesitamos volver. Observa en la imagen abajo ? que style.css está en la carpeta src y kitty.png esta fuera de la carpeta src.

Para volver a la carpeta anterior y encontrar el archivo kitty.png, necesitamos escribir dos puntos seguidos y un slash (../) luego de las comillas en el archivo style.css. Entonces escribimos el nombre de la imagen, igual a: ?

 .container{
   background-image : url("../kitty.png");

   height: 100vh;
// establecer el tamaño y no permitir repetición de la imagen
   background-repeat : no-repeat;
   background-size : contain;
 }

¿Cómo usar background-image con link directo?

Esto es bastante sencillo. Escribimos la propiedad y colocamos en link dentro link().

Para trabajar con una imagen como link directo, necesitamos escribir el siguiente código.

 .container{
    background-image : url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxp3jqyjyksrep1ep82.png");

  height: 100vh;
// establecer el tamaño y no permitir repetición de la imagen
   background-repeat : no-repeat;
   background-size : contain;
 }

Tomemos un descanzo

La propiedad background-size

Podemos ajustar el tamaño de una imagen usando la propiedad background-size.

Podemos escribir la sintaxis luego de escribir el nombre del selector, igual a ?

.container{
// Podremos escribir ? aquí
  background-size  : cover;
}

Podemos usar background-size de 3 maneras:

• Usar los valores cover/contain
• Establecer el alto y ancho de la imagen
• usar auto

Vamos a empezar revisando los valores cover & contain con tamaño de [718px X 614px].

Valor cover

Para este trabajo debemos incluir una imagen, establecer altura y detener la repetición de la imagen. Podemos hacer esto en CSS: ?

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;
  background-size : cover;

// Debe incluir la altura
  height : 100vh;
}

Cuando usamos esta propiedad, estirará la imagen a toda la pantalla incluso cuando cambiamos el tamaño de la ventana. Mira el ejemplo a continuación ?

Este valor conservará el tamaño de la imagen [Responsive Image] incluso cuando cambiamos el tamaño de la ventana. Mira el video a continuación para ver como funciona ?

Tamaño de ancho y alto

Podemos establecer el ancho y la altura de la imagen usando la propiedad background-size.

Aquí esta la sintaxis en CSS: ?

.container{
// Aquí, podemos ver ancho?  &  ? alto
  background-size : 200px   200px;
}

No olvidemos insertar la imagen, establecer el alto de la imagen y detener la repetición de la imagen. El código se vería así:

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;

// Aquí, podemos ver ancho?  &  ? alto
  background-size : 200px  200px;

// Debe incluir la altura
  height : 100vh;
}
}

tamaño automático

Cuando usamos este valor, la imagen estaría en su tamaño original. No cambiaria cuando hacemos cambiamos el tamaño de la ventana. Esto se vería así:

La propiedad background-repeat

Esta propiedad nos permite repetir la imagen múltiples veces.

Escribimos la sintaxis luego del selector, igual a ?

.container{
// Podemos cambiar el valor ? aquí
  background-repeat : repeat;
}

Esta propiedad tiene seis valores posibles:

• repeat
• repeat-x
• repeat-y
• no repeat
• space
• round

Aquí podemos ver el resultado de cada uno de los posibles valores. Observemos que el tamaño de la imagen ejemplo es de [200px X 200px].

Ahora, vamosa investigar que ocurre con cada valor. Pero, antes de esto, observemos que necesitamos insertar una imagen usando la propiedad `background-image.

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat :  ; //Aquí colocaremos las opciones

   height : 100vh;
}

El valor repeat

Usando este valor, podemos repetir la misma imagen múltiples veces a lo largo de los ejes X y Y tanto como el tamaño de la pantalla lo permita. En el ejemplo siguiente el tamaño de la imagen es de 200px x 200px.

Para duplicar este resultado, escribimos ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat;

   height : 100vh;
}

El valor repeat-x

Este valor nos permite repetir la misma imagen múltiples veces a lo largo del eje x tanto como el tamaño de la pantalla lo permita. En el ejemplo siguiente el tamaño de la imagen es de 200px x 200px.

Para que esto ocurra, escribimos ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat-x;

   height : 100vh;
}

El valor repeat-y

Este valor funciona de la misma manera que "repeat-x" pero a lo largo del eje y tanto como el tamaño de la pantalla lo permita. En el ejemplo siguiente el tamaño de la imagen es de 200px x 200px.

Para esta salida, escribimos ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat-y ;

   height : 100vh;
}

El valor no-repeat

Podemos tener el tamaño original de nuestra imagen sin repeticiones usando este valor. En el ejemplo siguiente el tamaño de la imagen es de 200px x 200px.

Para este resultado, escribimos ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : no-repeat ; 

   height : 100vh;
}

El valor space

Trabaja con los ejes X y Y. Podemos ver la principal diferencia en los espacios cuando cambiamos el tamaño de la ventana. Observa que obtenemos espacio en blanco cuando cambiamos el tamaño de la pantalla:

Para experimentar con este valor debemos escribir ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : space ;

   height : 100vh;
}

El valor round

Esto funciona tanto para el eje x como el eje y. Observa que la imagen es expandida cuando nosotros cambiamos el tamaño de la pantalla.

Solo debemos escribir ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : round ; 

   height : 100vh;
}

La propiedad background-position

Esta propiedad es usada para cambiar la posición de la imagen en la pantalla.

Aquí tenemos la sintaxis: ?

.container{
// Esta es       eje x?  &  ? eje y
background-position : 300px  200px;
}

No podemos olvidar insertar la imagen, establecer la altura y evitar la repetición de la imagen. Podemos establecer el tamaño de la imagen a 300px x 200px usando la propiedad background-size:

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// Este es       eje x?  &  ? eje y
  background-position : 300px 200px;
  height: 100vh;
}

Como resultado:

Podemos usar una combinación de estos valores:

• top
• left
• right
• bottom
• percentage values

Por ejemplo, vamos a establecer nuestra imagen abajo a la derecha. Aquí está el código para esto:

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// Este es           eje x?  &  ? eje y
  background-position : bottom right;
  height: 100vh;
}

Calculando el espacio permitido de la pantalla, el valor porcentaje determina la posición de la imagen. Aquí lo vemos en código:

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// Este es           eje x?  &  ? eje y
  background-position : 25% 15%;
  height: 100vh;
}

Y esté es el resultado:

La propiedad background-origin

Esta propiedad nos permite establecer el origen de nuestra imagen a través del CSS box model.

Escribimos la sintaxis luego de escribir el selector, igual a ?

container{
// Escribiremos el valor ? aquí
  background-origin: border-box;
}

Tiene cuatro posibles valores:

• border-box
• padding-box
• content-box
• inherit

En el standard CSS box model, la parte exterior es border. entonces luego tenemos el padding y finalmente tenemos el content en el centro.

Aquí tenemos el resultado de cada una de las propiedades:

Para recrear estos resultados:

• Primero necesitamos una imagen; necesitamos detener la repetición de la imagen, y establecer el alto y el ancho al tamaño del contenedor de la imagen.
• Una vez hecho, insertariamos 40px de padding, de lo contrario no podremos ver la diferencia entre padding-box y content-box.
• Entonces, insertamos un borde rojo de 25px. Establecemos la propiedad border-style a dashed para obtener el borde de línea discontinua en la pantalla.
• Establecemos la propiedad background-size a 400px & 400px.

Aquí podemos ver esto en código:

.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;


// Escribiremos el valor ? aquí para ver diferencia
  background-origin: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// ancho y alto del contenedor ?
  width : 400px;
  height : 400px;
}

Tomamos un descanso

La propiedad background-clip

Esta propiedad es igual a background-origin. Pero la principal diferencia es que background-clip CORTA la imagen para que quepa dentro del cuadro, mientras background-origin EMPUJA el contenido dentro del cuadro para que quepa.

Podemos escribir la sintaxis luego de escribir el selector, igual a ?

.container{
// Podremos escribir los valores ? aquí
  background-clip  : border-box;
}

Tiene cuatro valores posibles:

• border-box
• padding-box
• content-box
• inherit

Aquí tenemos el resultado de cada una de las propiedades

Para recrear estos resultados debemos:

• Primero necesitamos una imagen, necesitamos detener la repetición, y necesitamos establecer el alto y el ancho ambos como el contenedor de la imagen.
• Una vez hecho, podremos insertar 40px de padding, de lo contrario no podremos observar la diferencia entre padding-box y content-box.
• Entonces, insertamos un borde rojo de 25px. Establecemos la propiedad border-style a dashed para obtener el borde de linea discontinua en la pantalla.
• Establecemos la propiedad background-size a 400px & 400px.

El código se vería así:

.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;

// Cambiamos los valores aquí ?  para ver las diferencias 
  background-clip: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// Alto y ancho para el contenedor ?
  width : 400px;
  height : 400px;
}

La propiedad background-attachment

Esta propiedad nos permite manejar el comportamiento de nuestro contenido e imagen cuando hacemos scroll.

Nosotros escribimos la sintaxis luego del selector, igual a ?

.container{
// Podremos escribir los valores ? aquí
background-attachment: scroll;
}

Hay tres valores posibles:

• scroll
• fixed
• local

Cuando usamos scroll la imagen se fija y podemos desplazarnos libremente por nuestro contenido. El valor fijo nos da un efecto de paralaje en el desplazamiento del mouse y produce múltiples imágenes siempre que nuestro contenido no termine.

Podemos ver los resultados en vivo aquí ?

La propiedad background-color

Podemos usar esta propiedad para establecer el background con color.

Debemos escribir la sintaxis luego de escribir el selector, igual a ?

.container{
// Podemos escribir el valor ?  aquí
   background-color :  red;
}

Existen muchas opciones pero las más populares son:

• Color sólido usando nombre o el valor hexadecimal
• Usando la función RGB()
• Usando la función `linear-gradient()``

¿Cómo obtener un color sólido de fondo utilizando el nombre o el valor hexadecimal?

Podemos usar el nombre del color para establecer el color de fondo haciendo:

.container{
   background-color : red;

   height : 100vh;
}

O, podemos usar el color hexadecimal de la siguiente manera:

.container{
   background-color : #ff0000; //color rojo

   height : 100vh;
}

Puedes revisar estos recursos para más colores.

coolors.co
flatuicolors.com

¿Cómo usar la función RGB() para establecer el color de fondo?

Podemos usar la función RGB() para establecer el color de fondo haciendo:

.container{
// Nombre del color "American River"
   background-color : rgb(99, 110, 114);

   height : 100vh;
}

También podemos usar RGBA() para establecer el color y la opacidad

.container{
.container{
// El 0.5 al final representa        50% ? opacity 
   background-color :  rgba(99, 110, 114, 0.5);

   height : 100vh;
}
}

Este es un experimento con el color 'Eton blue' con varios niveles de opacidad.

Puedes visitar la página para más códigos usando CSS.

Vamos a recrear el siguiente color de fondo:

'#22c1c3'representa el color a la izquierda y '#fdbb2d' representa el color a la derecha. '90deg' nos dice como se inclinaran estos dos colores para generar el degradado.

El código se ve así:

.container{
 
   background: linear-gradient(90deg, #22c1c3, #fdbb2d);  

   height : 100vh;
}

Resumen de las propiedades

Este es el resumen de las propiedades de background:

Para este experimento, vamos a colocar kitty.png en nuestro navegador usando un color de fondo azul con 200px en el eje X y 200px en el eje Y. El código referencia sería:

.container{
 
   background-color : skyblue;
   background-image : url('kitty.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 200px 200px;

   height : 100vh;
}

Y este sería el código usando una sola sentencia:

.container{
 
   background: skyblue url('kitty.png) no-repeat fixed 200px 200px;

   height : 100vh;
}

Usarlo en una sola sentencia nos ahorra tiempo. Si quieres saltar uno de los valores, puedes hacerlo siempre que se mantenga el orden de las propiedades.

Conclusión

Aquí tienes una medalla por leerlo todo hasta el final ❤️
Las quejas y las sugerencias son muy bien apreciadas ❤️

Creditos

• Cute Girl I have a crush on ?
• kitty Avatar
• Cute panda
• Cute cat with duck
• Cute girl illustration
• Rabbit with duck
• CSS-Tricks

YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Traducido del artículo de Joy Shaheb - Every CSS Background Property Illustrated and Explained with Code Examples ?️

Cuando se trata del ancho y el alto de la página ¿Sabes qué configurar del elemento html? ¿Y del elemento body? ¿Simplemente colocas los estilos en ambos elementos y esperas lo mejor? Si lo haces, no estás solo.

Las respuestas a esas preguntas no son intuitivas, Soy culpable de aplicar estilos a ambos elementos en el pasado sin considerar exactamente cuál propiedad debe ser aplicada a qué elemento ?‍. No es raro ver las propiedades CSS aplicadas tanto al elemento html como al elemento body de la siguiente manera:

html, body {
     min-height: 100%;
}

¿Acaso importa?

Si, si importa.

La definición de estilos anterior crea un problema:

Establece la altura mínima al 100% en ambos elementos, y esto no permite que el bodyllene la página como se esperaría. Cuando verificamos los estilos en las herramientas del desarrollador, el body tiene una altura cero. Mientras tanto, el elemento html tiene una altura igual a la parte visible de la página del navegador.

Miremos la siguiente captura de pantalla de herramientas del desarrollador de Chrome:

El body tiene por defecto un margen de 8px indicado por la barra en la parte superior, pero la altura tiene de valor 0.

¿Por qué esto ocurre?

El uso de un porcentaje como tamaño necesita usar como referencia el elemento padre en el que basar el porcentaje. El elemento html hace referencia a la ventana gráfica que tiene un valor de altura igual a la altura de la ventana gráfica visible. Sin embargo, nosotros solo establecemos el min-value del elemento html... NO un valor a la propiedad height. Por lo tanto, el elemento bodyno tiene un elemento padre al que hacer referencia cuando establece la propiedad igual al 100%.

El problema puede estar oculto

Si comenzamos con suficiente contenido para el cuerpo de la página web, es posible que no notemos el problema. Y para hacerlo más difícil de observar, si establecemos background-color en ambos elementos o incluso en uno solo de ellos, la ventana gráfica estará llena de ese color. Esto da la impresión que el elemento body es tan grande como la ventana gráfica. Pero no, todavía está en cero.

La imagen anterior fue tomada de una página con el siguiente CSS:

html, body {
    min-height: 100%;
}
body { background-color: dodgerblue; }

¿Herencia inversa?

En un giro extraño, el elemento htmlasume el background-colordel elemento bodysi no se establece un background-color separado para el elemento html.

Entonces, ¿cuál es la configuración de altura ideal para una página full responsive?

Por años, la respuesta fue la siguiente:

html {
    height: 100%;
}
body {
    min-height: 100%;
}

Esto permite al elemento html hacer referencia a la ventana gráfica y tenga un valor de altura igual al 100%. Con el elemento html recibiendo un valor de altura, el min-height asignado al elemento body le da una altura inicial que coincide con el elemento html. Esto también permite que el bodycrezca más alto si el contenido supera el tamaño de lo visible de la página.

El único inconveniente es que el elemento html no crezca más allá de la altura de la ventana gráfica visible. Sin embargo, se ha permitido que el elemento bodysupere el elemento html.

La solución actual está simplificada

body { min-height: 100vh; }

En este ejemplo usamos como unidad vh(altura de la ventana gráfica) para permitir que el body establezca una altura mínima basada en la altura completa de la ventana gráfica.

Al igual que la discusión anterior de background-color, si nosotros no seteamos el valor de la altura máxima del elemento html, asumirá el mismo valor de la altura del elemento body.

Por lo tanto, esta solución evita el desbordamiento del elemento htmlpresente en la solución anterior y ambos elementos crecen con su contenido.

El uso de la unidad vh causó algunos problemas con el navegador móvil en el pasado, pero parece que Chrome y Safary son consistentes con las unidades de visualización ahora.

Tamaño de página puede causar un scroll horizontal

Espera... ¿qué? ¿No debería decir "Ancho de página?
¡No!

En otra extraña serie de eventos, la altura de tu página puede activar el scroll horizontal en tu navegador. Cuando el contenido de tu página web es más alto que la altura de la ventana gráfica, se activa la barra del scroll vertical a la derecha. Esto puede causar que tu página tenga instantáneamente una barra de scroll horizontal.

¿Cómo podemos solucionar esté problema?

Podemos dormir mejor sabiendo que comenzamos con una configuración del ancho de la página. Este problema surge cuando cualquier elemento, no solo los elementos html o body- se establecen con 100vw (ancho de la ventana gráfica).

Las unidades de la ventana gráfica no tienen en cuenta los 10 píxeles aproximados que ocupa la barra de desplazamiento vertical. Por lo tanto, cuando se activa la barra de desplazamiento vertical, también se obtiene una barra de desplazamiento horizontal.

¿Cómo configuramos la página para el tamaño completo?

Si no establecemos un ancho en los elementos htmly body, el tamaño predeterminado de la pantalla será el tamaño completo de la pantalla. Si establecemos un valor de ancho que no sea automático, consideremos restablecer primero el CSS. Recordemos, por defecto el elemento bodytiene 8 píxeles de margen en todos los lados.

Reestablecer el CSS elimina esto. De lo contrario, establecer el ancho al 100% antes de eliminar los márgenes hará que el elemento del body desborde. Aquí está el restablecimiento de CSS que uso:

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

¿Cómo establecemos el ancho de nuestra preferencia?

Si bien puede que no siempre sea necesario establecer un ancho, generalmente lo hago. Puede ser simplemente un hábito.

Si establecemos el ancho al 100% en el elemento body, tendrá un ancho de página completo. Esto es equivalente a no establecer un valor de ancho y permitir el valor predeterminado.

Si deseamos utilizar el elemento del body como un contenedor más pequeño y dejar que el elemento HTML llene la página, podemos establecer un valor de ancho máximo en el body.

Aquí un ejemplo:

html { background-color: #000; } 
body {
    min-height: 100vh;
    max-width: 400px;
    background-color: papayawhip; 
    margin: 0 auto;
}

Conclusión

Sin una altura proporcionada para el elemento html, establecer height y/o min-height del elemento body no da como resultado la altura (antes de agregar el contenido). Sin embargo, sin un ancho para el elemento html, establecer el ancho del elemento body en 100% da como resultado el ancho de la página completa. Esto puede parecer contra intuitivo y confuso.

Para una página responsive, establezca el min-height del elemento body en 100vh. Si estableces el ancho de página, elije el 100% sobre 100vw para evitar el scroll horizontal.

Les dejo un tutorial de mi canal de YouTube demostrando como configurar el ancho y el alto para una página web que crece con el contenido que contiene:

HTML Page Width and Height Settings | CSS Full Screen Size

¿Tienes una manera diferente de establecer el ancho y el alto que te guste más?

¡Dejame saber tu método!

Traduccion del articulo - HTML vs Body: How to Set Width and Height for Full Page Size por Dave Gray

¿Cómo funcionará esto?

Hay un link debajo de cada uno de los layouts para ver el código HTML y CSS en CodePen. Puedes darte cuenta que uso SASS para la definición de estilos, si quieres hacerlo en tu local, debes instalar SASS usando:

npm i sass -g

Plantilla de una tarjeta básica

Utilicé la tarjeta anterior como base del diseño del layout. Está compuesto por tres elementos en dirección vertical, por lo que los bloques div funcionan bastante bien. Sin embargo, necesitaré hacer que el elemento central (el párrafo) se estire.

Ganador: Flexbos

CodePen Flexbox CodePen Grid

Empecemos creando nuestros diferentes layouts.

#1 Tarjeta verticalmente y horizontalmente centrados

Con Flexbox, necesitamos un elemento centrado horizontalmente, y otro (el elemento hijo) que sea centrado verticalmente. El orden de los elementos es definido por flex-direction. La forma en que el elemento se posiciona en el espacio disponible se establece mediante align-self en el elemento o align-items en el elemento padre.

Con Grid, necesitamos tres columnas y tres filas. Con esto podemos posicionar la tarjeta en la celda del medio. Centrar horizontalmente es sencillo. Definimos tres columnas y su tamaño usando grid-template-columns: auto 33% auto ya que la tarjeta debe ser tan ancha como 1/3 del área visible.

El problema es que nosotros no sabemos la dimensiones verticales, queremos que las filas superior e inferior ocupen el espacio restante que no es posible con la cuadrícula. La tarjeta está centrada, pero su altura depende de la altura de la ventana. Sin embargo, podemos solucionar esto con un elemento adicional alrededor de la tarjeta y centrarlo usando margin.

Ganador: Flexbos

CodePen Flexbox CodePen Grid

#2 Dos tarjetas vertical y horizontalmente centradas

A menudo necesitamos centrar más de un elemento. Estas dos tarjetas también deben mantener la misma altura si una u otra contiene un texto más largo.

Con Flexblox, necesitamos agrupar ambas tarjetas en otro elemento y usarlo para centrar ambas a la vez. No podemos usar align-items aquí ya que se aplica al eje Y en este caso. Necesitamos definir como el espacio restante en el eje X debe ser distribuido usando justify-content: center. Esto asegura que ambas tarjetas estén centrados horizontalmente.

Si omitimos el problema de la altura variable de Grid, podemos alcanzar el mismo resultado incluso sin ningún elemento agrupador adicional. En esta ocasión definimos un cuadrícula con cinco columnas con rid-template-columns: auto 33% 50px 33% auto. El resto permanece como el ejemplo anterior.

Ganador: Flexbos

CodePen Flexbox CodePen Grid

#3 Multiples tarjetas con el mismo tamaño

Este es otro caso de uso típico para blogs, sitios de comercio electrónico (e-commerce), o en general, cualquier sitio que muestre algún tipo de listado. Queremos que las tarjetas tengan el mismo ancho y alto. La altura se debe inferir del elemento más grande en la lista.

Esto se puede hacer en Flebox usando flex-wrap:wrap. Los elementos pasan a la siguiente línea si su ancho excede el espacio restante de cada línea. Sin embargo, la misma altura sólo se conserva en el ámbito de una sola línea, a menos que se defina explícitamente.

Grid muestra su verdadero poder aquí. Este diseño se puede crear usando grid-auto-rows: 1fr que aplica la misma altura a todas las líneas.

Ganador: Grid

CodePen Flexbox CodePen Grid

#3 Alternando entre textos e imagenes centrados horizontalmente y verticalmente

En este ejemplo, tenemos texto con botones CTA acompañados con imágenes del otro lado. Ambos componentes deben ser centrados verticalmente, ya que su tamaño puede variar.

Esto es pan comido para Flexbox. Cada fila es un elemento de un artículo dividido en dos contenedores, .imgy .content. Son necesarios para una distribución uniforme (flex-basis: 50%). El centrado vertical del contenido interno es definido usando align-items: center. La alternancia se logra invirtiendo la dirección de Flexbox usando flex-direction: row-reverse en cada artículo impar.

Grid maneja este caso bastante bien también. No necesitamos definir un gran grid, sino más bien uno por cada artículo. Define columnas igualmente anchas que están verticalmente centradas usando align-items: center y la alternancia se define a nivel de celda mediante valores conmutados grid-column.

Ganador: Empate

CodePen Flexbox CodePen Grid

#5 Cabecera horizontal con menú

Para lograr este diseño usando Flexbox, ambos lados de la cabecera necesitan ser representados como un solo elemento.

El logo y el nombre de la compañía como un solo elemento anchor a la izquierda, y el menú es un elemento nav a la derecha. Flexbox los posiciona con justify-content: space-between.

Con Grid, necesitamos dos columnas - una para el logo y otra para el menú. El menú es otro grid que distribuye el tamaño de las columnas usando grid-template-columns: repeat(4, minmax(0, 1fr)). El problema aquí es que si queremos añadir otro elemento al menú, también necesitamos modificar el CSS.

Ganador: Flexbox

CodePen Flexbox CodePen Grid

Y el ganador es ....

El puntaje final es 5:2 a favor de Flexbox, pero esto no significa que esto lo convierta en el mejor. Hay situaciones donde se necesita usar uno u otro, algunas ocasiones usarlos juntos para alcanzar lo que se necesita.

Si necesitas flexibilidad y posiciones condicionadas trabajar con Flexbox. Si quieres crear listas o estructuras similares que requieran elementos de tamaños iguales o tener una forma de tabla trabajar con Grid.

Como programador front-end, no te saldrás con la tuya sin saber ambos.

Guía de Flexbox Guía de Grid

Traducido del artículo de Ondrej Polesny - Flexbox vs Grid - How to Build the Most Common HTML Layouts

Crear una cuenta de MongoDB Atlas

MongoDB Atlas es una DaaS (Base de datos como servicio) de MongoDB, lo que significa que ellos configuran y alojan la base de datos por nosotros. Entonces, nuestra única responsabilidad sería llenar la BD con lo que importa: los datos.

• Crea tu cuenta en MongoDB Atlas.
• Llena el formulario con tu información y haz clic en Sign up

Crear un nuevo cluster

• En la página siguiente, llena los campos nombre de la organización, nombre del proyecto, selecciona JavasScript como lenguaje de programación preferido y haz clic en el botón verde para continuar.
• Clic en el botón Crear un Cluster debajo de clusters compartidos. Esta debe ser la única opción libre.
• En la sección Proveedor de la nube y región, deja la opción por defecto (Normalmente es AWS).
• La sección Nivel de Cluster, deja la opción por defecto, M0 Sandbox (Shared RAM 512 MB Storage).
• En la sección de Nombre del Cluster, puedes seleccionar el nombre del cluster, o dejar por defecto, Cluster 0.
• CLic en el botón verde Create Cluster en la parte superior de la pantalla.
• Debes poder ver el mensaje Your cluster is being created. New clusters take 1-3 minutes to provision Tu cluster ha sido creado. Los nuevos clusters toman entre 1-3 minutos para ser aprovisionados. Espera hasta que el cluster sea creado para ir al siguiente paso.

Crear un nuevo usuario para la base de datos

• En la parte izquierda de la pantalla, clic en Acceso a la base de datos.
• Clic en el botón verde Agregar un nuevo usuario a la base de datos.
• En la modal, ingresar un nuevo usuario y contraseña.
• En la sección Privilegios del usuario. deja las opciones por defecto, Leer y escribir en cualquier base de datos.
• CLic en el botón Agregar usuario para crear tu nuevo usuario.

Permitir conexión desde cualquier IP

• En la parte izquierda de la pantalla, clic en Acceso de red.
• Clic en el botón verde Añadir dirección IP.
• En la modal, click en el botón Permitir conexión desde cualquier lugar. Debes ver 0.0.0.0/0 en la lista de accesos.
• Clic en el botón Confirmar.

Connectarte a tu cluster

• Clic en el botón verde Empezar en la parte inferior izquierda de tu pantalla y ahora deberías ver el paso final, Connectate a tu cluster, clic en él.
• En la parte izquierda de la pantalla, clic en Clusters.
• Clic en el botón Conectar a tu cluster.
• En la modal, clic en Conecta tu aplicación.
• Debes poder ver el URI, lo que debes usar para conectar tu base de datos y tiene la estructura: mongodb+srv://<username>:<password>@<cluster-name>.mongodb.net/<db-name>?retryWrites=true&w=majority.
• CLic en botón Copiar tu URI al portapapeles.

Observa que los campos <username>, <cluster-name> y <db-name> de la URI ya están completados para ti. Todo lo que necesitas hacer es reemplazar el campo <password> con el creado en el paso anterior.

Esto es todo, ahora tienes el URI para añadir a tu aplicación y conectarte a tu base de datos. Mantén esta URI en un lugar seguro para que puedas usarlo luego.

Traducción del artículo MongoDB Atlas Tutorial – How to Get Started

Complejidad

La complejidad es un factor involucrado en un proceso complejo. Con respecto a los algoritmos y las estructuras de datos; esto puede ser por tiempo o espacio (espacio en disco) necesario para realizar una tarea específica (buscar, clasificar o acceder a los datos) en una estructura de datos determinada. La eficiencia del rendimiento de una tarea depende del número de operaciones requeridas para completarla.

Sacar la basura puede requerir 3 pasos (atar, sacar y tirar en el basurero). Sacar la basura puede ser simple, pero si la vas a sacar después de una larga semana, es posible que no puedas completar la tarea debido a la falta de espacio en el basurero.

Aspirar una habitación puede requerir muchos pasos repetitivos (encender la aspiradora, aspirar repetidamente los espacios de la habitación y apagarla). Mientras más grande sea la habitación, más tiempo llevará aspirar la habitación.

Entonces, existe una relación entre el número de operaciones realizadas y el número de elementos operados. Tener mucha basura (elementos) requiere sacarla muchas veces. Esto puede generar un problema de complejidad espacial (space complexity). Tener una gran cantidad metros cuadrados (elementos) requiere aspirar muchas veces. Esto puede dar lugar a un problema de complejidad en tiempo (time complexity).

Ya sea que esté sacando la basura o aspirando una habitación, podría decir que el orden de la operación (O) incrementa exactamente con el número de elementos (n). Si tengo 1 bolsa de basura, tengo que sacar la basura una vez. Si tengo 2 bolsas de basura, tengo que hacer la misma tarea dos veces, asumiendo que físicamente no puedo levantar más de una bola a la vez. Entonces, the Big-O de estas tareas es O = n o O = function(n) o O(n). Esto es una complejidad lineal (linear complexity) (una línea recta entre 1 operación: 1 elemento). Entonces, 30 operaciones equivalen a 30 elementos (línea amarilla del gráfico anterior).

Esto es similar a lo que sucede cuando se consideran algoritmos y estructuras de datos

Búsquedas

Búsqueda lineal

origen

El mejor caso para buscar un elemento en una lista ordenada, es uno después del otro. Es una constante O(1), asumiendo que es el primer elemento en tu lista. Por lo tanto, si el elemento que estás buscando siempre aparece primero en la lista, independientemente del tamaño de la lista, encontrarás el elemento inmediatamente. La complejidad de la búsqueda es constante con el tamaño de la lista. El peor caso de este tipo de busqueda es de complejidad lineal o O(n). En otras palabras, para n elementos, tengo que buscar n veces antes de encontrar mi elemento, por eso es una búsqueda lineal.

Búsqueda binaria

origen

Para búsqueda binaria, el mejor caso es O(1), esto significa que el elemento que buscas se encuentra en el centro. El peor caso es log base 2 of n o:

Logaritmo o log es la manera de expresar un exponente a una base dada. Entonces, si hay 16 elementos (n = 16), esto tomará, en el peor caso, 4 pasos para encontrar el número 15 (exponente = 4).

o simplemente: O(log n)

Ordenamiento

Ordenamiento Burbuja (Bubble)

origen

En el ordenamiento burbuja, cada elemento es comparado con el resto de la colección para determinar el máximo valor. Por esta razón, el peor caso es de complejidad O(n²). Pensemos en un bucle dentro de otro bucle.

Entonces, por cada elemento necesitas compararlo con el resto de la colección, un total de 16 comparaciones para 4 elementos (4² = 16). En el mejor de los casos la colección ya esta ordenada, excepto por un solo elemento. Esto equivale a una sola ronda de comparaciones. Es decir, se requiren cuatro comparaciones, que es una complejidad de O(n).

Selección

origen

A diferencia del ordenamiento burbuja, en lugar de intercambiar el valor más alto, intercambia el valor más bajo. El ordenamiento por selección selecciona el valor más bajo para intercambiarlo con las primeras posiciones. Pero, como requiere comparar cada elemento con el resto de la colección también tiene una complejidad O(n²).

Inserción

origen

A diferencia de los ordenamientos burbuja y selección, el ordenamiento por inserción inserta los elementos en su posición correcta. Pero, igual que el ordenamiento anterior requiere comparar cada elemento con el resto de la colección, por lo tanto, tiene una complejidad de orden O(n²). Al igual que el ordenamiento burbuja, si solo queda un elemento por ordenar, solo se requiere una ronda de comparaciones para insertar el elemento en su posición correcta. Es decir, en su mejor caso tiene una complejidad O(n).

Estructuras de datos

Arreglos

Debido a que se necesita un solo paso para acceder a los elementos de un arreglo usando su índice, o agregar/eliminar un elemento al final del arreglo, la complejidad para acceder, añadir o eliminar un valor de un arreglo es O(1). Considerando, buscar linealmente a través de un arreglo usando su índice, como lo vimos antes, tiene una complejidad de O(n).

Además, debido a que un cambio de un valor hacia o desde el inicio de una matriz (shift o unshift) requiere volver a generar los índices(es decir, eliminar un elemento en el índice 0 requiere volver a etiquetar el elemento del índice 1 como índice 0, y así sucesivamente). Tiene una complejidad O(n) ya que la generación de los índices se realiza desde el inicio hasta el final del arreglo.

clave — Valor

Acceder, insertar o remover un valor usando la clave es instantáneo, por lo que se entiende complejidad O(1). Buscando en un "depósito" un elemento específico usando todas las claves disponibles es en esencia una busqueda lineal, y tiene una complejidad O(n).

Conclusión

Complejidad es más que un tema para discutir en algoritmos y estructuras de datos. Si se usa con prudencia, puede ser útil para medir la eficiencia del trabajo que se realiza y el código que se crea para resolver problemas.

Referencia

https://www.udemy.com/js-algorithms-and-data-structures-masterclass/

Traducido del artículo de Yung L. Leung - The complexity of simple algorithms and data structures in JS

¿Alguna vez te has encontrado con Git solicitando username y contraseña cada vez que intenta interactuar con github incluso después de configurarlo? Bueno, este es un problema muy común entre los usuarios que clonan un repositorio usando HTTPS. En este artículo mostraré cómo solucionarlo.

Se puede clonar un repositorio usando URL con https:// desde todos los repositorios tanto públicos como privados. Estas URL funcionan en todas partes, incluso si se está detrás de un firewall o un proxy.

Cuando se interactúa con un repositorio remoto usando una url HTTPS en la línea de comandos, tu debes validar tu username y contraseña, ¿Estoy en lo correcto?

El uso de url con HTTPS tiene algunas ventajas: es más fácil de configurar que SSH :D, y usualmente funciona a través de servidores de seguridad y proxies estrictos. Sin embargo, también te solicita que ingrese tus credenciales de Github cada vez que realiza un pull o un push :(.

Tu puedes solucionar esto configurando git para que guarde su información

Se realiza así:

• Actualiza la URL de origin remote usando SSH en lugar de HTTPS;

git remote set-url origin git@github.com:username/repo.git

o

• Haciendo que git almacena el username y la contraseña, luego de esto no volverá a solicitar la información.

git config --global credential.helper store

• Guardar username y contraseña en la sesión (cache it)

git config --global credential.helper cache

• Puedes guardar por un tiempo específico

git config --global credential.helper 'cache --timeout=600'

Listo, has solucionado esto, Git no volverá a solicitar las credenciales nuevamente.

Traducido del artículo de Bolaji Ayodeji - How to fix Git always asking for user credentials

Si bien Git es una herramienta poderosa, su poder está bien escondido. Hay algunos conceptos esenciales que se deben comprender para llegar a ser realmente competente con Git. La buena noticia es que una vez que las aprendas, casi nunca tendrás problemas de los que no puedas escapar.

El flujo normal de trabajo

En un flujo normal de trabajo con Git, usarás un repositorio local (local repository), y un repositorio remoto (remote repository), y una o más ramas de trabajo (branch). Los repositorios almacenan toda la información sobre el proyecto, incluyendo su historial completo de cambios y sus branches. Un branch es básicamente una colección de cambios que van desde un proyecto vacío hasta el estado actual.

Después de clonar un repositorio, trabajarás en su copia local e introducir nuevos cambios. Mientras no envíes los cambios locales a repositorio remoto, todo el trabajo estará disponible solo en la máquina local.

Cambios locales

Todo está bien cuando tú y el resto de tu equipo están trabajando en archivos totalmente diferentes. Pase lo que pase, no entrarán en conflicto sus cambios. Sin embargo, hay ocasiones en las que tú y tus compañeros introducen cambios simultáneamente en el mismo archivo. Ahí es donde suelen empezar los problemas.

¿Alguna vez has ejecutado git pull solo para ver el temido error: Your local changes to the following files would be overwritten by merge:? Tarde o temprano, todos nos topamos con este problema.

Lo que es más confuso aquí es que nosotros no deseamos fusionar nada, solo es traer los cambios del repositorio remoto. En realidad, el comando git pull es un poco más complicado de lo que se piensa.

¿Cómo trabaja exactamente git pull?

git pull no es una operación simple. Consiste en traer datos del repositorio remoto y luego mezclar los cambios con el repositorio local. Estas dos operaciones pueden ser realizadas manualmente si lo deseas con:

git fetch
git merge origin/$CURRENT_BRANCH

La sentencia origin/$CURRENT_BRANCH significa que:

• Git mezclará los cambios del repositorio remoto llamado origin(
  el que clonaste)
• Serán añadidos a $CURRENT_BRANCH
• No serán visibles si no estás parado en el branch

Dado que Git solo realiza funciones cuando no hay cambios no confirmados (uncommitted), cada vez que ejecuta git pull con cambios uncommitted podría meterse en problemas. Afortunadamente, ¡hay formas de salir de este problema de una sola pieza!

Diferentes acercamientos

Cuando tienes cambios locales uncommitted y aun así deseas obtener una nueva versión desde el repositorio remoto, el caso de uso generalmente cae en uno de los siguientes escenarios.

• No importan los cambios locales y desea sobrescribirlos,
• Te importan los cambios y te gustaría mantenerlos después de traer los cambios remotos,
• Deseas descargar los cambios remotos pero aún no aplicarlos.

Cada uno de estos enfoques requiere una solución diferente.

No quieres mantener los cambios locales

En este caso, deseas eliminar todos los cambios locales uncommitted. Quizás modificaste un archivo para probar, pero ya no necesitas la modificación. Lo único que importa es estar al día con los cambios.

Esto significa que agrega un paso más entre buscar los cambios remotos y mezclarlos en local. Este paso restablecerá el branch a su último estado committed, lo que permitirá que git merge funcione.

git fetch
git reset --hard HEAD
git merge origin/$CURRENT_BRANCH

Si no quieres escribir el nombre del branch todo el tiempo puedes correr este comando. Git tiene un atajo que apunta al upstream branch @{u}. upstream branch es el branch en repositorio remoto al que se le hace git pull o git push.

Así es como se vería el comando anterior usando el atajo.

git fetch
git reset --hard HEAD
git merge '@{u}'

Estamos citando el atajo en el ejemplo para evitar que el shell lo interprete.

Te importan los cambios locales

Cuando tus cambios uncommitted son importantes, hay dos opciones. Tú puedes hacer un commit y luego realizar git pull, o puedes guardarlos temporalmente con git stash.

git stash significa guardar los cambios por un momento para traerlos nuevamente más tarde. Para ser más preciso, git stash crea un commit que no es visible en el branch actual, pero que son accesibles para Git.

Para recuperar los cambios guardados en el último stash, se debe usar el comando git stash pop. Después de aplicar con éxito los cambios este comando también elimina el stash commit, ya que no es necesario mantenerlo.

El flujo de trabajo podría verse así:

git fetch
git stash
git merge '@{u}'
git stash pop

Por defecto, los cambios en stash se convertiran en staged. Si deseas eliminarlos usa el comando git restore --staged (si usas una versión mayor de Git 2.25.0)

Solo quieres cambiar los cambios remotos

El último escenario es un poco diferente a los anteriores. Digamos que estás en medio de una refactorización muy complicada, donde perder los cambios ni guardarlos es una opción. Sin embargo, aún deseas tener los cambios remotos disponibles para ejecutar git diff contra ellos.

Como probablemente hayas descubierto, ¡descargar los cambios remotos no requiere git pull en absoluto! git fetch es suficiente. Una cosa a tener en cuenta es que, de forma predeterminada, git fetch solo traerá cambios del branch actual. Para obtener los cambios de todos los branches debes usar git fetch --all. Y si desea limpiar algunas de las ramas que ya no existen en el repositorio remoto, git fetch --prune hará la limpieza

Algo de automatización

¿Has oído hablar del archivo Git Config? Es un archivo donde Git guarda todas las configuraciones creadas por el usuario. Se encuentra en el directorio de inicio: ya sea ~/.gitconfig o ~/.config/git/config, podemos agregar algunos alias personalizados que se entenderán como comandos de Git.

Por ejemplo, para tener un alias equivalente a git diff --cached (que muestra la diferencia entre la rama actual y los archivos en etapas), agregaremos lo siguiente:

[alias]
  dc = diff --cached

Después de esto puede ejecutar git dc siempre que desee revisar los cambios. De esta manera, podemos configurar algunos alias relacionados con los casos de uso anteriores.

[alias]
  pull_force = !"git fetch --all; git reset --hard HEAD; git merge @{u}"
  pf = pull_force
  pull_stash = !"git fetch --all; git stash; git merge @{u}; git stash pop"

De esta manera, git pull_force puede sobre escribir los cambios locales, mientras git pull_stash permite mantenerlos.

El otro Git Pull Force

Es posible que las mentes curiosas ya hayan descubierto que existe el comando git pull --force. Sin embargo, esta bestia es muy diferente a lo que se presenta en este artículo.

Puede sonar como algo que nos ayudaría a sobrescribir los cambios locales. En cambio, nos permite buscar los cambios de un branch remoto a un branch local diferente. git pull --force solo modifica el comportamiento. Por lo tanto, es equivalente a git fetch --force.

Al igual que git push, git fetch nos permite especificar en qué branch local y remoto deseamos operar. git fetch origin/feature-1:my-feature significa que los cambios en el branch feature-1en el repositorio remoto serán visibles en el branch local my-feature. Cuando un commit modifica el histórico existente, no es permitido por git sin el uso explícito del parámetro --force.

git push --force permite sobrescribir los branches remotos, git fetch --force (or git pull --force) permite sobreescribir los branches locales. Siempre se usa con los branches origen y destino mencionados como parámetros. Una alternativa para sobreescribir cambios locales usando git pull --force podría ser git pull force "@{u}:HEAD.

Conclusión

El mundo de git es gigantesco. Esté artículo cubrió solo una de las facetas del mantenimiento del repositorio: incorporar cambios remotos en un branch local. Incluso este escenario cotidiano requería que analicemos un poco más en profundidad los mecanismos internos de esta herramienta de control de versiones.

Aprender casos de uso reales te ayuda a comprender mejor cómo funciona Git internamente. Esto, a su vez, te hará sentir empoderado cada vez que te metas en problemas. Todos hacemos eso de vez en cuando.

Traducido del artículo de Piotr Gaczkowski - Git Pull Force – How to Overwrite Local Changes With Git

¿Qué es un Namespace?

En pocas palabras, un Namespace es una sección de código que tiene su propio espacio. Cuando comienzas a escribir aplicaciones con JS, generalmente escribes el códgio y lo ejecutas. Esto coloca todo el código en lo que conocemos como global namespace, que contiene todo el código en el que estas trabajando.

Sin embargo, si mantienes todo tu código en el global namespace, puedes tener conflictos, por ejemplo en el nombre de las variables. Se presenta principalmente en aplicaciones grandes .

Veamos un ejemplo de porque usar global namespace para desarrollor aplicaciones es una mala idea.

Digamos que tenemos un juego que realiza un seguimiento de los puntos que tiene el jugador:

var puntos = 0;

Muchos juegos registran puntos para agregar una ventaja al juego. Simplemente escribiendo esta linea de código, hemos creado una variable llamada puntos que puede llevar el total de puntos ganados por un usuario.

Y eso está muy bien, pero digamos que tenemos un usuario avanzado jugando. Este usuario sabe cómo mirar el código fuente de nuestra página web, por lo que esta persona echa un vistazo al código y se da cuenta que la variable puntos esta seteada en el global namespace. ¡Una sonrisa malvada se dibuja en sus rostros mientras contemplan los puntos que pueden lograr! Deciden que no quieren esperar para vencer a algunos malos, o aplastar algunos hongos, o lo que sea necesario para obtener un montón de puntos. ¡Quieren sus puntos ahora! Bueno, ¿Comó suena un billón de billones de puntos? Entonces, abren la consola en el navegador y simplemente escribe:

puntos = 34750925489459203859095480917458059034;

Una vez el usuario presiona Enter, la variable de puntos se actualiza en el juego. Ahora, el usuario tiene una cantidad de puntos enorme, y probablemente poco realistico en el juego, y puede presumir ante sus amigos que nadie puede superar su increíble puntiación.

¿Cómo evitamos que esto ocurra? Aquí es donde entran en juego private namespaces

Private Namespaces

Private namespaces permiten a los desarrolladores poner su código en secciones(or namespaces). Estas secciones operan de forma independiente entre sí, pero aún pueden leer y escribir desde el global namespace.

Para visualizar esto en términos más simples usemos un escenario de la vida real, digamos que estás trabajando en un edificio de oficinas. Tienes tu propia oficina y puedes ver que el resto tambien tienen la suya. Cada oficina está cerrada con llave y solo el dueño de la ofician tiene la llave. Supongamos que tiene algún tipo de super cerradura que hace que su oficina sea impenetrable para cualquier otra persona en el edificio.
Consideremos el edificio como el global namespace. y cada oficina como un private namespaces. No tienes acceso a la oficina de nadie más ni ellos tienen acceso a la tuya. Pero, cada uno tiene acceso al resto del edificio, ya sea para tomar café, tomar un refrigerio, etc. Cada uno puede tomar algo del global namespace(crear/modificar algo allí), pero no puenen crear/modificar/tomar nada de las oficinas de los demás; solo pueden crear/modificar/tomar de su private namespaces/oficina privada.

Conseguir un private namespace

Entonces, ¿cómo logramos conseguir este private namespace en JavaScript? Usando una función anónima auto-ejecutable.

Revisemos el ejemplo anterior pero separando en un private namespace:

//La forma más común en que verás una función anónima de ejecución automática
(function () {
    var puntos = 0;
})();

//Esta es solo una de las muchas formas más alternativas de usar una función anónima de ejecución automática
/*
!function () {
    var puntos = 0;
}();
*/

Ahora, cuando el usuario llegue a la página, no podrá abrir la consola en su navegador y cambiar el valor de la variable puntos como desee. ¡Increíble!

Namespace y la interacción con document

El código anterior fue solo uno de los usos de anonymous self-executing function para darle al código su propio private namespace. Tengamos en cuenta que los namespaces solo afectan al código JS (varables/arreglos/objectos/etc), no al código que pertenece al document en sí.

Cualquier código dentro de un namespace todavía tiene el mismo acceso al docmuento HTML y CSS, coomo lo haría normalmente en el global namespace. Veamos los siguientes dos ejemplos de código. Ambos realizan la misma funcionalidad y ninguno es más beneficioso ni más eficiente que el otro.

<script type="text/javascript">
    (function () {
        document.querySelector('body').style.background = 'azul';
    })();
</script>

Es igual a

<script type="text/javascript">
    document.querySelector('body').style.background = 'azul';
</script>

Tenga en cuenta que esta es solo una forma de utilizar espacios de nombres en aplicaciones JavaScript. Adapta tu código a la situación que se este presentando.

Traducido del artículo How to Use Anonymous Functions for Private Namespacing in Your JavaScript Apps

Construí esta lista para mi propio uso como programador y quiero compartirla contigo.

Antes de revisar la lista me gustaría mostrarte cómo generarlos utilizando un lenguaje de programación.

Como crear una lista de números primos utilizando Criba de Eratóstenes

Aquí el código en Javascript genera una lista arbitraria de números primos.

function getPrimes(max) {
    var sieve = [];
    var i;
    var j;
    var primes = [];
    for (i = 2; i <= max; ++i) {
        if (!sieve[i]) {
            primes.push(i);
            for (j = i << 1; j <= max; j += i) {
                sieve[j] = true;
            }
        }
    }
    return primes;
}
getPrimes(1000);

Lista Completa de números primos entre 0 y 20000

Aquí tenemos la lista completa de números primos. Pueden observar que he omitido intencionalmente las comas, por lo que los programadores no tendrán que eliminarlas antes de copiarlas y pegarlas en su código.

2
3
5
7
11
13
17
19
23
29
31
37
41
43
47
53
59
61
67
71
73
79
83
89
97
101
103
107
109
113
127
131
137
139
149
151
157
163
167
173
179
181
191
193
197
199
211
223
227
229
233
239
241
251
257
263
269
271
277
281
283
293
307
311
313
317
331
337
347
349
353
359
367
373
379
383
389
397
401
409
419
421
431
433
439
443
449
457
461
463
467
479
487
491
499
503
509
521
523
541
547
557
563
569
571
577
587
593
599
601
607
613
617
619
631
641
643
647
653
659
661
673
677
683
691
701
709
719
727
733
739
743
751
757
761
769
773
787
797
809
811
821
823
827
829
839
853
857
859
863
877
881
883
887
907
911
919
929
937
941
947
953
967
971
977
983
991
997
1009
1013
1019
1021
1031
1033
1039
1049
1051
1061
1063
1069
1087
1091
1093
1097
1103
1109
1117
1123
1129
1151
1153
1163
1171
1181
1187
1193
1201
1213
1217
1223
1229
1231
1237
1249
1259
1277
1279
1283
1289
1291
1297
1301
1303
1307
1319
1321
1327
1361
1367
1373
1381
1399
1409
1423
1427
1429
1433
1439
1447
1451
1453
1459
1471
1481
1483
1487
1489
1493
1499
1511
1523
1531
1543
1549
1553
1559
1567
1571
1579
1583
1597
1601
1607
1609
1613
1619
1621
1627
1637
1657
1663
1667
1669
1693
1697
1699
1709
1721
1723
1733
1741
1747
1753
1759
1777
1783
1787
1789
1801
1811
1823
1831
1847
1861
1867
1871
1873
1877
1879
1889
1901
1907
1913
1931
1933
1949
1951
1973
1979
1987
1993
1997
1999
2003
2011
2017
2027
2029
2039
2053
2063
2069
2081
2083
2087
2089
2099
2111
2113
2129
2131
2137
2141
2143
2153
2161
2179
2203
2207
2213
2221
2237
2239
2243
2251
2267
2269
2273
2281
2287
2293
2297
2309
2311
2333
2339
2341
2347
2351
2357
2371
2377
2381
2383
2389
2393
2399
2411
2417
2423
2437
2441
2447
2459
2467
2473
2477
2503
2521
2531
2539
2543
2549
2551
2557
2579
2591
2593
2609
2617
2621
2633
2647
2657
2659
2663
2671
2677
2683
2687
2689
2693
2699
2707
2711
2713
2719
2729
2731
2741
2749
2753
2767
2777
2789
2791
2797
2801
2803
2819
2833
2837
2843
2851
2857
2861
2879
2887
2897
2903
2909
2917
2927
2939
2953
2957
2963
2969
2971
2999
3001
3011
3019
3023
3037
3041
3049
3061
3067
3079
3083
3089
3109
3119
3121
3137
3163
3167
3169
3181
3187
3191
3203
3209
3217
3221
3229
3251
3253
3257
3259
3271
3299
3301
3307
3313
3319
3323
3329
3331
3343
3347
3359
3361
3371
3373
3389
3391
3407
3413
3433
3449
3457
3461
3463
3467
3469
3491
3499
3511
3517
3527
3529
3533
3539
3541
3547
3557
3559
3571
3581
3583
3593
3607
3613
3617
3623
3631
3637
3643
3659
3671
3673
3677
3691
3697
3701
3709
3719
3727
3733
3739
3761
3767
3769
3779
3793
3797
3803
3821
3823
3833
3847
3851
3853
3863
3877
3881
3889
3907
3911
3917
3919
3923
3929
3931
3943
3947
3967
3989
4001
4003
4007
4013
4019
4021
4027
4049
4051
4057
4073
4079
4091
4093
4099
4111
4127
4129
4133
4139
4153
4157
4159
4177
4201
4211
4217
4219
4229
4231
4241
4243
4253
4259
4261
4271
4273
4283
4289
4297
4327
4337
4339
4349
4357
4363
4373
4391
4397
4409

1223
1229
1231
1237
1249
1259
1277
1279
1283
1289
1291
1297
1301
1303
1307
1319
1321
1327
1361
1367
1373
1381
1399
1409
1423
1427
1429
1433
1439
1447
1451
1453
1459
1471
1481
1483
1487
1489
1493
1499
1511
1523
1531
1543
1549
1553
1559
1567
1571
1579
1583
1597
1601
1607
1609
1613
1619
1621
1627
1637
1657
1663
1667
1669
1693
1697
1699
1709
1721
1723
1733
1741
1747
1753
1759
1777
1783
1787
1789
1801
1811
1823
1831
1847
1861
1867
1871
1873
1877
1879
1889
1901
1907
1913
1931
1933
1949
1951
1973
1979
1987
1993
1997
1999
2003
2011
2017
2027
2029
2039
2053
2063
2069
2081
2083
2087
2089
2099
2111
2113
2129
2131
2137
2141
2143
2153
2161
2179
2203
2207
2213
2221
2237
2239
2243
2251
2267
2269
2273
2281
2287
2293
2297
2309
2311
2333
2339
2341
2347
2351
2357
2371
2377
2381
2383
2389
2393
2399
2411
2417
2423
2437
2441
2447
2459
2467
2473
2477
2503
2521
2531
2539
2543
2549
2551
2557
2579
2591
2593
2609
2617
2621
2633
2647
2657
2659
2663
2671
2677
2683
2687
2689
2693
2699
2707
2711
2713
2719
2729
2731
2741
2749
2753
2767
2777
2789
2791
2797
2801
2803
2819
2833
2837
2843
2851
2857
2861
2879
2887
2897
2903
2909
2917
2927
2939
2953
2957
2963
2969
2971
2999
3001
3011
3019
3023
3037
3041
3049
3061
3067
3079
3083
3089
3109
3119
3121
3137
3163
3167
3169
3181
3187
3191
3203
3209
3217
3221
3229
3251
3253
3257
3259
3271
3299
3301
3307
3313
3319
3323
3329
3331
3343
3347
3359
3361
3371
3373
3389
3391
3407
3413
3433
3449
3457
3461
3463
3467
3469
3491
3499
3511
3517
3527
3529
3533
3539
3541
3547
3557
3559
3571
3581
3583
3593
3607
3613
3617
3623
3631
3637
3643
3659
3671
3673
3677
3691
3697
3701
3709
3719
3727
3733
3739
3761
3767
3769
3779
3793
3797
3803
3821
3823
3833
3847
3851
3853
3863
3877
3881
3889
3907
3911
3917
3919
3923
3929
3931
3943
3947
3967
3989
4001
4003
4007
4013
4019
4021
4027
4049
4051
4057
4073
4079
4091
4093
4099
4111
4127
4129
4133
4139
4153
4157
4159
4177
4201
4211
4217
4219
4229
4231
4241
4243
4253
4259
4261
4271
4273
4283
4289
4297
4327
4337
4339
4349
4357
4363
4373
4391
4397
4409
4421
4423
4441
4447
4451
4457
4463
4481
4483
4493
4507
4513
4517
4519
4523
4547
4549
4561
4567
4583
4591
4597
4603
4621
4637
4639
4643
4649
4651
4657
4663
4673
4679
4691
4703
4721
4723
4729
4733
4751
4759
4783
4787
4789
4793
4799
4801
4813
4817
4831
4861
4871
4877
4889
4903
4909
4919
4931
4933
4937
4943
4951
4957
4967
4969
4973
4987
4993
4999
5003
5009
5011
5021
5023
5039
5051
5059
5077
5081
5087
5099
5101
5107
5113
5119
5147
5153
5167
5171
5179
5189
5197
5209
5227
5231
5233
5237
5261
5273
5279
5281
5297
5303
5309
5323
5333
5347
5351
5381
5387
5393
5399
5407
5413
5417
5419
5431
5437
5441
5443
5449
5471
5477
5479
5483
5501
5503
5507
5519
5521
5527
5531
5557
5563
5569
5573
5581
5591
5623
5639
5641
5647
5651
5653
5657
5659
5669
5683
5689
5693
5701
5711
5717
5737
5741
5743
5749
5779
5783
5791
5801
5807
5813
5821
5827
5839
5843
5849
5851
5857
5861
5867
5869
5879
5881
5897
5903
5923
5927
5939
5953
5981
5987
6007
6011
6029
6037
6043
6047
6053
6067
6073
6079
6089
6091
6101
6113
6121
6131
6131
6133
6143
6151
6163
6173
6197
6199
6203
6211
6217
6221
6229
6247
6257
6263
6269
6271
6277
6287
6299
6301
6311
6317
6323
6329
6337
6343
6353
6359
6361
6367
6373
6379
6389
6397
6421
6427
6449
6451
6469
6473
6481
6491
6521
6529
6547
6551
6553
6563
6569
6571
6577
6581
6599
6607
6619
6637
6653
6659
6661
6673
6679
6689
6691
6701
6703
6709
6719
6733
6737
6761
6763
6779
6781
6791
6793
6803
6823
6827
6829
6833
6841
6857
6863
6869
6871
6883
6899
6907
6911
6917
6947
6949
6959
6961
6967
6971
6977
6983
6991
6997
7001
7013
7019
7027
7039
7043
7057
7069
7079
7103
7109
7121
7127
7129
7151
7159
7177
7187
7193
7207
7211
7213
7219
7229
7237
7243
7247
7253
7283
7297
7307
7309
7321
7331
7333
7349
7351
7369
7393
7411
7417
7433
7451
7457
7459
7477
7481
7487
7489
7499
7507
7517
7523
7529
7537
7541
7547
7549
7559
7561
7573
7577
7583
7589
7591
7603
7607
7621
7639
7643
7649
7669
7673
7681
7687
7691
7699
7703
7717
7723
7727
7741
7753
7757
7759
7789
7793
7817
7823
7829
7841
7853
7867
7873
7877
7879
7883
7901
7907
7919
7927
7933
7937
7949
7951
7963
7993
8009
8011
8017
8039
8053
8059
8069
8081
8087
8089
8093
8101
8111
8117
8123
8147
8161
8167
8171
8179
8191
8209
8219
8221
8231
8233
8237
8243
8263
8269
8273
8287
8291
8293
8297
8311
8317
8329
8353
8363
8369
8377
8387
8389
8419
8423
8429
8431
8443
8447
8461
8467
8501
8513
8521
8527
8537
8539
8543
8563
8573
8581
8597
8599
8609
8623
8627
8629
8641
8647
8663
8669
8677
8681
8689
8693
8699
8707
8713
8719
8731
8737
8741
8747
8753
8761
8779
8783
8803
8807
8819
8821
8831
8837
8839
8849
8861
8863
8867
8887
8893
8923
8929
8933
8941
8951
8963
8969
8971
8999
9001
9007
9011
9013
9029
9041
9043
9049
9059
9067
9091
9103
9109
9127
9133
9137
9151
9157
9161
9173
9181
9187
9199
9203
9209
9221
9227
9239
9241
9257
9277
9281
9283
9293
9311
9319
9323
9337
9341
9343
9349
9371
9377
9391
9397
9403
9413
9419
9421
9431
9433
9437
9439
9461
9463
9467
9473
9479
9491
9497
9511
9521
9533
9539
9547
9551
9587
9601
9613
9619
9623
9629
9631
9643
9649
9661
9677
9679
9689
9697
9719
9721
9733
9739
9743
9749
9767
9769
9781
9787
9791
9803
9811
9817
9829
9833
9839
9851
9857
9859
9871
9883
9887
9901
9907
9923
9929
9931
9941
9949
9967
9973
10007
10009
10037
10039
10061
10067
10069
10079
10091
10093
10099
10103
10111
10133
10139
10141
10151
10159
10163
10169
10177
10181
10193
10211
10223
10243
10247
10253
10259
10267
10271
10273
10289
10301
10303
10313
10321
10331
10333
10337
10343
10357
10369
10391
10399
10427
10429
10433
10453
10457
10459
10463
10477
10487
10499
10501
10513
10529
10531
10559
10567
10589
10597
10601
10607
10613
10627
10631
10639
10651
10657
10663
10667
10687
10691
10709
10711
10723
10729
10733
10739
10753
10771
10781
10789
10799
10831
10837
10847
10853
10859
10861
10867
10883
10889
10891
10903
10909
10937
10939
10949
10957
10973
10979
10987
10993
11003
11027
11047
11057
11059
11069
11071
11083
11087
11093
11113
11117
11119
11131
11149
11159
11161
11171
11173
11177
11197
11213
11239
11243
11251
11257
11261
11273
11279
11287
11299
11311
11317
11321
11329
11351
11353
11369
11383
11393
11399
11411
11423
11437
11443
11447
11467
11471
11483
11489
11491
11497
11503
11519
11527
11549
11551
11579
11587
11593
11597
11617
11621
11621
11633
11657
11677
11681
11689
11699
11701
11717
11719
11731
11743
11777
11779
11783
11789
11801
11807
11813
11821
11827
11831
11833
11839
11863
11867
11887
11897
11903
11909
11923
11927
11933
11939
11941
11953
11959
11969
11971
11981
11987
12007
12011
12037
12041
12043
12049
12071
12073
12097
12101
12107
12109
12113
12119
12143
12149
12157
12161
12163
12197
12203
12211
12227
12239
12241
12251
12253
12263
12269
12277
12281
12289
12301
12323
12329
12343
12347
12373
12377
12379
12391
12401
12409
12413
12421
12433
12437
12451
12457
12473
12479
12487
12491
12497
12503
12511
12517
12527
12539
12541
12547
12553
12569
12577
12583
12589
12601
12611
12613
12619
12637
12641
12647
12653
12659
12671
12689
12697
12703
12713
12721
12739
12743
12757
12763
12781
12791
12799
12809
12821
12823
12829
12841
12853
12889
12893
12899
12907
12911
12917
12919
12923
12941
12953
12959
12967
12973
12979
12983
13001
13003
13007
13009
13033
13037
13043
13049
13063
13093
13099
13103
13109
13121
13127
13147
13151
13159
13163
13171
13177
13183
13187
13217
13219
13229
13241
13249
13259
13267
13291
13297
13309
13313
13327
13331
13337
13339
13367
13381
13397
13399
13411
13417
13421
13441
13451
13457
13463
13469
13477
13487
13499
13513
13523
13537
13553
13567
13577
13591
13597
13613
13619
13627
13633
13649
13669
13679
13681
13687
13691
13693
13697
13709
13711
13721
13723
13729
13751
13757
13759
13763
13781
13789
13799
13807
13829
13831
13841
13859
13873
13877
13879
13883
13901
13903
13907
13913
13921
13931
13933
13963
13967
13997
13999
14009
14011
14029
14033
14051
14057
14071
14081
14083
14087
14107
14143
14149
14153
14159
14173
14177
14197
14207
14221
14243
14249
14251
14281
14293
14303
14321
14323
14327
14341
14347
14369
14387
14389
14401
14407
14411
14419
14423
14431
14437
14447
14449
14461
14479
14489
14503
14519
14533
14537
14543
14549
14551
14557
14561
14563
14591
14593
14621
14627
14629
14633
14639
14653
14657
14669
14683
14699
14713
14717
14723
14731
14737
14741
14747
14753
14759
14767
14771
14779
14783
14797
14813
14821
14827
14831
14843
14851
14867
14869
14879
14887
14891
14897
14923
14929
14939
14947
14951
14957
14969
14983
15013
15017
15031
15053
15061
15073
15077
15083
15091
15101
15107
15121
15131
15137
15139
15149
15161
15173
15187
15193
15199
15217
15227
15233
15241
15259
15263
15269
15271
15277
15287
15289
15299
15307
15313
15319
15329
15331
15349
15359
15361
15373
15377
15383
15391
15401
15413
15427
15439
15443
15451
15461
15467
15473
15493
15497
15511
15527
15541
15551
15559
15569
15581
15583
15601
15607
15619
15629
15641
15643
15647
15649
15661
15667
15671
15679
15683
15727
15731
15733
15737
15739
15749
15761
15767
15773
15787
15791
15797
15803
15809
15817
15823
15859
15877
15881
15887
15889
15901
15907
15913
15919
15923
15937
15959
15971
15973
15991
16001
16007
16033
16057
16061
16063
16067
16069
16073
16087
16091
16097
16103
16111
16127
16139
16141
16183
16187
16189
16193
16217
16223
16229
16231
16249
16253
16267
16273
16301
16319
16333
16339
16349
16361
16363
16369
16381
16411
16417
16421
16427
16433
16447
16451
16453
16477
16481
16487
16493
16519
16529
16547
16553
16561
16567
16573
16603
16607
16619
16631
16633
16649
16651
16657
16661
16673
16691
16693
16699
16703
16729
16741
16747
16759
16763
16787
16811
16823
16829
16831
16843
16871
16879
16883
16889
16901
16903
16921
16927
16931
16937
16943
16963
16979
16981
16987
16993
17011
17021
17027
17029
17033
17041
17047
17053
17077
17093
17099
17107
17117
17123
17137
17159
17167
17183
17189
17191
17203
17207
17209
17231
17239
17257
17291
17293
17299
17317
17321
17327
17333
17341
17351
17359
17377
17377
17383
17387
17389
17393
17401
17417
17419
17431
17443
17449
17467
17471
17477
17483
17489
17491
17497
17509
17519
17539
17551
17569
17573
17579
17581
17597
17599
17609
17623
17627
17657
17659
17669
17681
17683
17707
17713
17729
17737
17747
17749
17761
17783
17789
17791
17807
17827
17837
17839
17851
17863
17881
17891
17903
17909
17911
17921
17923
17929
17939
17957
17959
17971
17977
17981
17987
17989
18013
18041
18043
18047
18049
18059
18061
18077
18089
18097
18119
18121
18127
18131
18133
18143
18149
18169
18181
18191
18199
18211
18217
18223
18229
18233
18251
18253
18257
18269
18287
18289
18301
18307
18311
18313
18329
18341
18353
18367
18371
18379
18397
18401
18413
18427
18433
18439
18443
18451
18457
18461
18481
18493
18503
18517
18521
18523
18539
18541
18553
18583
18587
18593
18617
18637
18661
18671
18679
18691
18701
18713
18719
18731
18743
18749
18757
18773
18787
18793
18797
18803
18839
18859
18869
18899
18911
18913
18917
18919
18947
18959
18973
18979
19001
19009
19013
19031
19037
19051
19069
19073
19079
19081
19087
19121
19139
19141
19157
19163
19181
19183
19207
19211
19213
19219
19231
19237
19249
19259
19267
19273
19289
19301
19309
19319
19333
19373
19379
19381
19387
19391
19403
19417
19421
19423
19427
19429
19433
19441
19447
19457
19463
19469
19471
19477
19483
19489
19501
19507
19531
19541
19543
19553
19559
19571
19577
19583
19597
19603
19609
19661
19681
19687
19697
19699
19709
19717
19727
19739
19751
19753
19759
19763
19777
19793
19801
19813
19819
19841
19843
19853
19861
19867
19889
19891
19913
19919
19927
19937
19949
19961
19963
19973
19979
19991
19993
19997

Traducido del artículo - Prime Numbers List – A Chart of All Primes Up to 20,000 de Quincy Larson