Si eres un principiante en JavaScript, puede que estés luchando para entender lo que realmente es una promesa.

Recientemente publiqué esto como un hilo en Twitter y se llenó de respuestas. Entonces decidí expandirlo a este tutorial introductorio de promesas de JavaScript.

He leído un montón de artículos sobre promesas y el problema es que muchas de estas guías no las explican de una forma entendible. La gente no entiende lo que es una promesa en JavaScript porque realmente no saben de qué se trata y como se comporta de una manera simple y en términos entendibles.

Entonces, en este artículo, te estaré contando una historia que explica que son exactamente las promesas y como funcionan exactamente. También te voy a mostrar como usarlas en JavaScript con algunos ejemplos.

¿Qué es una promesa en JavaScript?

Imagina que estás entrevistando gente que busca empleo en tu compañía.

Un hombre joven entra frenéticamente a la entrevista, cuando su turno está a punto de llegar, se da cuenta de que olvidó su currículo.

Sería un fastidio ¿verdad?

Sin embargo, no está intimidado. Por suerte, para él, tiene un compañero que aún está en casa en ese momento.

Lo llama rápidamente y le pide ayuda, le suplica que le ayude a encontrar su currículo. Su compañero le PROMETE enviar un mensaje de texto tan pronto tenga algo para reportar.

Asumiendo que el currículo es encontrado eventualmente, podría escribirle:

“!Listo, encontré tu currículo¡”

Pero si no la encuentra, se supone que mandará un mensaje de texto reportando la razón por la que no pudo encontrar su currículo. Por ejemplo, podría enviar el siguiente mensaje para su amigo que está siendo entrevistado

“Lo siento, no pude encontrar tu currículo porque no encontré la llave de tu caja fuerte.”

Mientras tanto, la entrevista continúa según lo planeado y el entrevistador se aferra a la promesa de encontrar el currículum, no en el currículum. En ese momento, el entrevistador pone el currículo como PENDIENTE por entregar.

El entrevistado responde todas las preguntas que le hacen. Aunque en última instancia, su empleo sigue dependiendo en el ESTADO FINAL de su currículo.

Finalmente su compañero le escribe. Como lo habíamos discutido antes, Si él no encuentra el currículo, te lo dirá junto como la razón de porque no lo encontró.

Si eso sucede, la entrevista podría terminar y el entrevistado sería.

Por otro lado, si su compañero encuentra el currículo, le diría muy felizmente que cumplió con su cometido y que puede seguir adelante y CUMPLIR sus esperanzas de conseguir el trabajo.

¿Entonces como se traslada esto a JavaScript?

El compañero prometiendo encontrar el currículo y escribirle, es sinónimo de como definimos una promesa en JavaScript. El código no devuelve directa o inmediatamente un valor, en vez de eso devuelve una promesa de que eventualmente nos retornará el valor posteriormente.

Una promesa es asincrónica, lo que significa que necesita tiempo para resolverse o finalizar. Justamente como la búsqueda del currículo tomó tiempo.

Por esa razón, el entrevistador decide no perder el tiempo, entonces comienza a entrevistar el candidato basado en su promesa de que su currículo llegará. Estamos utilizando la promesa de traer un currículum en lugar del currículum.

El motor de JavaScript tampoco pierde el tiempo, él comienza a ejecutar otras partes del código, a la espera del valor devuelto de la promesa.

El mensaje de texto contiene el estado de la búsqueda del currículum. Con una promesa de JavaScript, esto también es llamado “valor devuelto”.

Si el mensaje es de “éxito”, procederíamos a contratar el candidato y a concederle el puesto. Si falla, rechazamos su candidatura.

Con las promesas de JavaScript hacemos esto usando una función callback (gestores de promesas). Estas funciones están definidas en el método anidadothen().

Para especificar que callbacks usar, usa las siguientes funciones:

• resolve(value): Esta indica que la tarea asincrónica se realizó correctamente. Esto ejecutará el callback de cumplimiento en el controlador then().
• reject(error): Esta indica un error mientras se intenta realizar la tarea asincrónica. Esta ejecutará el callback de error en el controlador  then().

Si la promesa se cumple, el callback de cumplimiento se ejecutará, de lo contrario se ejecuta el callback de error.

Una promesa es un simple texto provisional para una tarea asincrónica que aún no se ha completado. Cuando defines una promesa en tu script, en vez de devolver un valor inmediatamente, esta devuelve una promesa.

Como escribir una promesa en JavaScript.

Puedes definir una promesa en JavaScript llamando a la clase Promise y construyendo un objeto, así:

const miPromesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('este es el valor que eventualmente devolverá la promesa');
  }, 300);
});

console.log(miPromesa);

Ejecutar esto en la consola, devolverá un objeto Promise:

Aunque, crear un objeto no es la única forma de definir una promesa. También puedes usar la API incorporada Promise para lograr lo mismo:

const otraPromesa = Promise.resolve("este es el valor que eventualmente devolverá la promesa")

console.log(otraPromesa);

Mientras que la promesa en el primer ejemplo esperará 3 segundos antes de cumplir la promesa con el mensaje  este es el mensaje que eventual..., la promesa en el segundo ejemplo cumplirá inmediatamente y con el mismo mensaje.

Promesas rechazadas en JavaScript.

Una promesa también puede ser rechazada. La mayoría del tiempo, se rechazan porque JS encuentra algún tipo de error mientras ejecuta el código asincrónico. En ese escenario, llama la función reject().

Mira un ejemplo simple e inventado de como una promesa puede ser rechazada:

const miPromesa = new Promise((resolve, reject) => {
  let a = false;
  setTimeout(() => {
    return (a) ? resolve('se encontró a'): reject('lo siento, no se encontró a');
  }, 300);
}); 

¿Puedes encontrar la razón por la cual esta promesa es rechazada? Si dijiste “porque a no es falso” !Felicitaciones¡

La promesa en el tercer ejemplo se resolverá con un rechazo, después de un tiempo de espera de 3 segundos, porque la declaración (a)? se resuelve en falso, lo que desencadenará reject.

Como encadenar promesas con then()

Cuando finalmente la promesa devuelva un valor, normalmente querrás hacer algo con ese valor devuelto.

Por ejemplo, si estabas haciendo una solicitud de red, podrías querer acceder a ese valor y mostrarlo en la página para el usuario.

Puedes definir las dos funciones callback que quieres llamar cuando una promesa se cumple o se rechaza. Estas funciones se definen dentro de un método then() anidado:

const otraPromesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('este es el valor eventual que devolverá la promesa');
  }, 300);
});

// CONTINUACIÓN
otraPromesa
.then(value => { console.log(value) }) 

Ejecutar el código anterior, mostrará el mensaje de cumplimiento en la consola, después de tres segundos:

Ten en cuenta que puedes anidar tantas promesas como quieras. Cada paso se ejecutará después del paso anterior, tomando el valor devuelto de ese paso anterior:

const otraPromesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('este es el valor que eventualmente devolverá la promesa');
  }, 300);
});

otraPromesa
.then(fulfillFn, rejectFn)
.then(fulfilFn, rejectFn)
.then(value => { console.log(value) })

Pero se nos olvidó algo importante.

Mantén siempre en mente que el método then() debe tomar ambos valores, el manipulador de cumplimiento y el de rechazo. De esta forma, el primero es llamado si la promesa se cumple y el segundo si la promesa es rechazada con un error.

Las promesas en los ejemplos cuatro y cinco no incluyen un segundo controlador. Entonces, asumiendo que se encuentra un error, no habrá un manipulador de rechazo para dicho error.

Si solo vas a definir una función callback (también conocida como un manipulador de cumplimiento) en then(), después necesitarás anidar un método catch() en el final de la cadena de promesas para  detectar cualquier posible error.

Como usar el método catch() en JS.

El métodocatch()  siempre será llamado cuando quiera que se encuentre un error en cualquier punto a lo largo de la cadena de promesas:

const miPromesa = new Promise((resolve, reject) => {
  let a = false;
  setTimeout(() => {
    return (a) ? resolve('se encontró a'): reject('lo siento, no se encontró a');
  }, 300);
}); 

myPromise
.then(value => { console.log(value) })
.catch(err => { console.log(err) });

Dado que  myPromise eventualmente se resolverá como un rechazo la función definida en el then() anidado será ignorado. En su lugar el manipulador se ejecutará catch()  lo que debería mostrar el siguiente mensaje de error en la consola:

Para terminar.

Las promesas de JavaScript son una poderosa característica que te ayudarán a ejecutar código asincrónico en JavaScript. En la mayoría, si no en todas las entrevistas para empleos que usen JS, tu entrevistador probablemente hará una pregunta sobre las promesas.

En este artículo, expliqué lo que es una promesa en términos simples, y mostré su uso práctico con algunos ejemplos en código.

Espero que hayas adquirido algo útil de este artículo. Si te gustan los tutoriales con respecto a la programación, deberías ver mi blog (en inglés), Regularmente publico artículos sobre desarrollo de software.

Gracias por leer y nos vemos pronto.

Posdata: Si estás aprendiendo JavaScript, he creado un eBook que te enseña 50 temas en JS con notas digitales dibujadas a mano Miralo aquí. (en inglés)

Artículo original escrito por Joy Shaheb
Artículo original Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨
Traducido y adaptado por Julio Vargas

Hoy vamos a aprender como usar las unidades CSS EM, REM, VW y VH a través de ejemplos prácticos, también veremos como hacer sitios web responsivos con esas unidades.

Comencemos.

Tabla de contenidos

• ¿Por qué aprender unidades relativas de CSS?
• ¿Qué son las unidades REM?
• Como hacer sitios web responsivos con unidades REM  
• ¿Qué son las unidades EM?
• ¿Qué son las unidades VW?
• ¿Qué son las unidades VH?
• Recursos Adicionales

También puedes ver este tutorial en YouTube si quieres (en inglés).

¿Por qué aprender unidades relativas de CSS?

Si tú quieres hacer sitios web responsivos muy fácilmente, rápido y eficientemente, entonces definitivamente deberías aprender unidades relativas de CSS.

REM, EM, VW, VH son unidades relativas, si las combinas con consultas de medios construirás diseños perfectamente escalables. Mira este GIF ? el texto es responsivo en escritorio, tableta y pantallas móviles.

Recuerda que los pixeles son unidades absolutas, no cambiarán cuando modifiques el tamaño de tu ventana. Mira este GIF ? observa que el tamaño de la fuente de 50px no cambia cuando se modifica la ventana.

Consejo: Antes de comenzar el tutorial, te sugiero que no pienses en EM o REM como unidades, sino más bien como multiplicadores de un número base.

Configuración del proyecto.

Primero, copia el código de este link de Code Pen y pégalo en VS Code o en tu editor de código de preferencia, luego sigue estos pasos.

• Crea una carpeta llamada proyecto-1.
• Crea los archivos HTML, CSS y JS y vincúlalos.
• Instala los plugins que necesitamos - px to rem y Live Server
• Ejecuta Live Server

Como puedes ver en el gif ? JavaScript está haciendo los cálculos así que nos enfocaremos en el tutorial. Solo cambiaremos el CSS y experimentaremos con diferentes valores.

¡Empecemos a codificar!

¿Qué son las unidades Rem?

La unidad REM depende del elemento raíz (El elemento HTML). Mira una imagen que muestra como funciona.?

El tamaño por defecto de la fuente del elemento raíz (en HTML) es de 16px. Entonces 1 REM = 16px

Pero si cambiamos el tamaño de fuente del elemento raíz, la unidad REM cambia, así ?

Estamos configurando el tamaño de fuente de HTML en 50px.

Ahora, si escribimos 3 rem, nos mostrará 3*50px = 150px así ?

Recreemos los resultados con código y veamos sus casos de uso en la práctica.?

Primero experimentemos con el tamaño por defecto de fuente de todo sitio web, el cual es 16 pixeles y configuraremos la clase .texto con un tamaño de fuente de 1 rem.

html {
  font-size: 16px;
}

.texto {
  font-size: 1rem;
}

/** Cálculos 
 1 rem * 16px = 16px
**/

El resultado sería el siguiente. ?

Ahora incrementemos el tamaño de fuente de .texto a 2 rem:

html {
  font-size: 16px;
}

.texto {
  font-size: 2rem;
}

/** Cálculos
 2 rem * 16px = 32px
**/

Así se vería el resultado.?

Como puedes ver, el tamaño de fuente se hace más grande, pero el ancho continúa igual (1536px).

Como cambiar el tamaño de fuente de la raíz.

Ahora experimentemos cambiando el tamaño de fuente de la raíz, el cual, está dentro de HTML. Primero escribe este código para obtener el resultado por defecto. ?

html {
  font-size: 16px;
}

.texto {
  font-size: 1rem;
}

/** Cálculos
 1 rem * 16px = 16px
**/

Se vería así. ?

Ahora cambiemos el tamaño de fuente de la raíz a 40px.

html {
  font-size: 40px;
}

.texto {
  font-size: 1rem;
}

/** Cálculos
 1 rem * 40px = 40px
**/

Mira el resultado. ?

Ahora cambiemos  el tamaño de fuente de .texto a 2 rem. ?

html {
  font-size: 40px;
}

.texto {
  font-size: 2rem;
}

/** Cálculos
 2 rem * 40px = 80px
**/

Y el resultado sería el siguiente.?

Como cambiamos el tamaño de fuente de la raíz a 40px cuando cambiamos el tamaño de texto de .texto a 2 rem, obtenemos: 2*40 = 80px.

Como hacer sitios web responsivos con unidades REM

Hacer sitios web responsivos con REM es muy fácil. Solamente escribe tus estilos en unidades rem en vez de pixeles y cambia elementos raíz en diferentes breakpoints usando consultas de medios.

Te dejo una demostración para que veas como se hace y como agregar consultas de medios.?

// Pantallas grandes

@media (max-width: 1400px) {
  html {
    font-size: 25px;
  }
}

// Tabletas 

@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}

// Celulares 

@media (max-width: 450px) {
  html {
    font-size: 12px;
  }
}

Ahora configura la clase .texto a 3 rem, así.?

.texto{
	font-size : 3rem;
}

Resultado.?

Mira los cálculos

• Pantallas grandes  -> 3 rem * 25px = 75px
• Tabletas        -> 3 rem * 18px = 54px
• Celulares      -> 3 rem  * 12px = 36px
• Por defecto           -> 3rem * 16px = 48px

¿Qué son las unidades EM?

EM es lo mismo que REM, pero depende del tamaño de fuente del padre. Así.? Nota: asegúrate de remover todas las consultas de medios.

html {
  font-size: 16px;
}

.texto {
  font-size: 3em;
}

/** Cálculos
  font-size should be 
  3 em * 16px = 48px
**/

Resultado.?

Ahora intentemos agregar 3 em de padding a la clase .texto.

html {
  font-size: 16px;
}

.texto {
  font-size: 3em;
  padding: 3em;
}

/** Cálculos
text    => 3em * 16px = 48px
padding => 3em * 3em * 16px = 144px
**/

En vez de tener 48px de relleno, obtenemos 144px de relleno. Como puedes ver, es multiplicado por los números previos.

Aquí está la parte calculada de la consola del desarrollador: ?

No uses EM .?❌

Usar EM no vale el esfuerzo porque:

• Tienes un alto probabilidad de cometer error de cálculo.
• Tienes que escribir un montón de código en las consultas de medios mientras intentas hacer que un sitio web sea responsivo en todos los tamaños de pantallas.
• Consume mucho tiempo.

VW significa Viewport Width (ancho del dispositivo). Funciona como las unidades de porcentaje, especificar 10vw es equivalente a ocupar 10% del ancho visible de la pantalla.

Para experimentar con resultados, haz estos cambios en tu código CSS.?

Nota: comenta la última línea en la clase .caja.

.text {
  display: none;
}

.caja {
  width: 50vw;
  
  height: 300px;
  /* display: none; */
}

Si observas con cuidado, puedes ver que 50vw significa 50%, lo cual cubrirá la mitad del ancho de la pantalla.

En JavaScript, descomenta esta línea al final.?

  // Caja ancho y alto

  caja.innerHTML = "Width : " + caja_width;
  
  // caja.innerHTML = "Height : " + caja_height;

El resultado sería el siguiente.?

Como podrás ver, ese elemento siempre cubrirá ese espacio incluso si cambiamos el tamaño de la ventana.

¿Qué son las unidades VH?

VH significa viewport height (altura del dispositivo). También funciona como porcentaje, especificar 10vh es equivalente a ocupar 10% de la altura visible de la pantalla.

Mira esta demostración.?

.texto {
  display: none;
}

.caja {
  width: 300px;
  
  height: 50vh;
   /* display: none; */
}

Si miras cuidadosamente puedes ver que 50vh significa 50%, lo que cubrirá el 50% de la altura de la pantalla.

En JavaScript, descomenta esta línea al final.?

//Caja ancho y alto

  // caja.innerHTML = "Width : " + Caja_width;
  
  caja.innerHTML = "Height : " + Caja_height;

También cambia esto.?

  // Tamaño de la pantalla (ancho y alto)

  // tamaño.innerHTML = "Width : " + Width + " px";
  tamaño.innerHTML = "Height : " + Height + " px";

Resultado.?

Como puedes ver, siempre cubrirá ese espacio incluso si cambiamos el tamaño de la pantalla.

! Eso es todo¡

Conclusión

!Felicitaciones¡ Ahora puedes usar REM, EM, VW y VH con confianza para hacer sitios web responsivos.

Aquí está tu medalla ?️ por haber leído hasta el fin.  ❤️

Recursos adicionales

Tutorial completo de consulta de medios.

Créditos

• Imágenes de Freepik

Sugerencias y críticas. ❤️️

• YouTube / JoyShaheb
• LinkedIn / JoyShaheb
• Twitter / JoyShaheb
• Instagram / JoyShaheb

Digamos que tienes planes en construir un sitio web. Antes de empezar, debes configurar algunas herramientas para hacer tu vida más fácil. Pero, ¿Cuáles herramientas deberías tener?

El ecosistema JavaScript cambia tan rápido que puede ser abrumador elegir las mejores herramientas para usar. Para resolver este problema, en este artículo voy a explicarte como configurar un proyecto front end desde cero.

Veremos cosas como extensiones del editor que deberías tener, como agregar librerías de JavaScript a tu proyecto,  por qué deberías usar Node.js incluso si lo que deseas es hacer desarrollo de front end,  y como configurar un paquete de aplicaciones que generara una vista previa en vivo a medida que vas escribiendo código en tu navegador.

Ahora, adentrémonos en ello.

Como elegir editor de código.

Comencemos con los fundamentos. Como desarrollador Web, principalmente escribirás y o editarás  texto, entonces necesitas un buen editor. Así que, ¿Cuál deberías usar?

Elegir un editor es altamente basado en tus preferencias personales, ya que la mayoría de editores tienen características similares.

Si no tienes preferencia personal, te recomiendo mucho VS Code. Últimamente, VS Code se ha vuelto el editor estándar de facto para desarrollo web.

Aquí tenemos un gráfico de la última edición de la encuesta State of JS. En esta encuesta, se le preguntó a más de 23.000 desarrolladores sobre sus preferencias con respecto a desarrollo web. La inmensa mayoría eligió VS Code en lo que a editores se refiere.

Si no has visto las encuestas de State of JS antes, te recomiendo mucho que lo hagas. Te puede brindar una excelente descripción general de las últimas tendencias con JavaScript. Puedes ver cuáles librerías y herramientas usa la gente y cuáles podrían abandonar pronto.

Una de las principales características de los editores convencionales es que puedes agregarles extensiones. Veamos dos extensiones que son imprescindibles.

Como darle formato a tu código automáticamente en VS Code.

Prettier es una extensión que hace que tu código sea más consistente y fácil de leer.

Digamos que copiaste algo de Stack Overflow y es difícil de leer. La tabulación está desactivada, una línea es demasiado larga y etc. Luego solo debes guardar el archivo, y mágicamente, todo luce como debería.

Esto es lo que hace Prettier. Le da formato al código basado en buenas prácticas. No solo corrige la tabulación y ajusta las líneas, también agrega paréntesis para mejorar la legibilidad del código, se asegura  de que seas consistente con las comillas y mucho más.

Para hacer que funciones, primero debes instalar la extensión de Prettier. En VS Code vamos al panel de extensiones, escribe Prettier y luego instálalo.

Instalar la extensión no le da formato a tus archivos automáticamente al guardar por defecto. El funcionamiento por defecto es que una vez instalada la extensión, puedes presionar clic derecho dentro de tu archivo y luego seleccionar formato de documento. O seleccionar parte del archivo y luego selecciona seleccion de formato.

La primera vez que haces esto deberás seleccionar el formateador por defecto. Actualmente VS Code tiene un formateador, pero no es tan poderoso como Prettier. Entonces ahora que tenemos dos formateadores, tenemos que hacerle saber a VS Code que en el futuro, cuando se trate de dar formato a nuestro código, queremos usar Prettier.

Si quieres darle formato automáticamente a tus archivos cuando guardes, debes cambiar una configuración.

Ve a configuraciones en las preferencias de tu VS Code y busca Format On Save (dar formato al guardar). Por defecto, esto es falso entonces asegúrate de marcar la casilla de verificación. Después de eso cada vez que guardes tus archivos, el formateo debería hacerse automáticamente.

Formatear puede ser controversial, sin embargo, en la mayoría de los casos, especialmente para principiantes, recomiendo mucho las configuraciones por defecto. Pero si prefieres un estilo diferente puedes personalizar cosas.

Puedes indicar comentarios para ignorar líneas específicas y puedes crear un archivo rc donde puedes listar tus preferencias.

En la carpeta principal de tu proyecto, puedes crear un archivo llamado .prettierrc y agregar algunas opciones. Una opción típica sería si prefieres comillas sencillas en lugar de dobles en tu archivo. O si no quieres agregar punto y coma al final de tus líneas de código.

Con esta configuración, una vez que guardés tus archivos deberías ver un resultado diferente.

Hay muchas opciones por supuesto. Si quieres investigar más a fondo, puedes hacerlo en Prettier's documentation. (en inglés)

¿Por qué necesitas Node para un proyecto de desarrollo de front end?

Antes de adentrarnos en la segunda extensión que deberíamos tener, necesitamos configurar un par de cosas más. Primero debemos hablar de Node.js. ¿Qué es Node y por qué lo necesitas incluso si trabajas como un desarrollador de front end?

Node es a menudo asociado con el desarrollo back end, pero eso no es del todo cierto. Si ves la descripción de un trabajo donde estén buscando un desarrollador de Node, entonces probablemente estén buscando un desarrollador Back End.

Aun así usaras Node incluso si haces desarrollo de front end.

Entonces qué es Node, ¿Por qué la gente piensa que es para desarrollo Back-End y por qué la necesitas incluso como desarrollador de front end?

Node es un tiempo de ejecución de JavaScript. Ejecuta archivos de JavaScript fuera de un navegador. Hay dos formas de ejecutar código de JavaScript. Lo tienes como parte de un sitio web y lo ejecutas en todo el sitio web en un navegador, o lo ejecutas solamente en el archivo JavaScript con Node.

En este ejemplo tenemos un simple archivo JavaScript que imprime Hola Mundo en la consola.

Si tenemos Node instalado, podemos ir a la terminal, buscar la carpeta donde está el archivo y luego ejecutarlo con Node, así, puedes ver como se ejecuta el archivo y el resultado está en la consola.

Eso es Node en realidad, una herramienta que ejecuta archivos JavaScript por sí mismos.

JavaScript se comporta principalmente de la misma manera en ambos casos. Pero hay algunas diferencias en lo que puede hacer en un navegador y lo que puede hacer cuando se ejecuta con Node.

Por ejemplo, cuando se ejecuta en el navegador, JavaScript puede acceder a los elementos HTML y  modificarlos. Esa es el punto principal de tener JavaScript en primer lugar.

En Node, no hay archivo HTML circundante al cual JavaScript pueda acceder. JavaScript se ejecuta por sí mismo.

Por otro lado, en Node JavaScript puede acceder a tus archivos del sistema, leerlos y escribirlos.

Por ejemplo, puedes ejecutar scripts que generen el esqueleto de tu proyecto en tu computadora por ti. Puedes ejecutar comprobaciones en tus archivos y automáticamente corregir los errores. O puedes ejecutar tus archivos de prueba.

En resumen, Node te deja ejecutar algunos scripts que hacen tu vida más fácil.

Para instalar node ve a nodejs.org e instala la última versión estable, marcada con LTS. Si aún no estás seguro de que ya tienes Node, también puedes ir a tu terminal y ejecutar el código node-v para comprobarlo. Si obtienes un número de versión, tienes Node.

Entonces, para responder a la pregunta, ¿Por qué la gente asocia Node con el desarrollo Back End? Porque si el código back end es escrito en JavaScript, los servidores necesitan una forma de ejecutarlo sin el navegador. Entonces sí, si tú eres un desarrollador back end usando JavaScript, vas a usar Node. Pero Node es muchísimo más que eso.

Como ejecutar tu proyecto.

Ahora que tenemos Node instalado podemos instalar un empaquetador. ¿Qué es un empaquetador? Un empaquetador es una herramienta que toma todos tus archivos y los convierte en paquetes ordenados que podrás ejecutar en el navegador.

¿Por qué no podrías ejecutar  tus archivos en el navegador? Si usas HTML, CSS y JavaScript simple entonces tienes razón, puede que ni siquiera necesites un empaquetador.

Pero las herramientas de desarrollo web han evolucionado, y en el momento en que utilices algo más avanzado tu navegador no entenderá tus archivos.

¿Estás usando React? La sintaxis de React JSX que se ve como HTML, no es parte de la sintaxis de JavaScript. Necesitas una herramienta que lo convierta en JavaScript simple. De otro modo, no se ejecutará en el navegador.

¿Estás usando SCSS o algún otro dialecto de CSS? Entonces, de nuevo, tienes que convertirlo a CSS simple para que el navegador lo entienda.

Otra razón por la que quieres usar un empaquetador es que puede generar una previsualización en vivo de tu sitio web mientras lo creas. Cada vez que guardes verás el resultado de inmediato en tu navegador

Entonces, ¿cómo elegir empaquetador? Hay muchas opciones. Actualmente, el empaquetador más usado es webpack. Webpack es una herramienta poderosa con un montón de opciones de configuración. Pero todo este montón de opciones son también sus debilidades. Configurarla no es algo fácil si eres nuevo en la herramienta.

Otra  opción que ganó popularidad recientemente es Parcel. Parcel tiene características similares a Webpack. De alguna manera, es incluso mejor.

Lo realmente genial es que una vez instalado, no necesita una sola configuración. Parcel automáticamente se da cuenta de lo que usas e interpreta tus archivos.

¿Estás usando React? No hay problema, Parcel lo reconoce e interpreta JSX. ¿Estás usando SCSS? No hay problema. Parcel sabe qué hacer.

Para instalar Parcel tienes que ejecutar un comando en tu terminal. Vamos a usar npm (node package manager) para instalarlo. npm es una herramienta que viene con Node. Si instalaste Node ya tienes npm.

Con npm puedes instalar librerias de JavaScript en tu computador global o específicamente para un proyecto.

Ve a tu terminal y ejecuta el siguiente comando. La etiqueta -g significa global. Una vez que hayas instalado Parcel en tu computador, serás capaz de ejecutar cualquier proyecto con él. No tienes que instalar Parcel para cada proyecto que crees, solo lo haces una vez.

npm install -g parcel-bundler

Nota: El comando de arriba instalará Parcel 1. Al momento de escribir este articulo, Parcel 2 está en fase Beta y tambien lo puedes instalar con npm install -g parcel.

Después de instalar Parcel globalmente, veamos como lo usamos para ejecutar un proyecto.

Digamos que tenemos un sitio web con archivos HTML, CSS y JavaScript. Podemos usar Parcel para crear una previsualización en vivo.

Abre la terminal y asegúrate de estar en la carpeta en la que tienes tu proyecto. Si usas VS Code puedes usar la terminal incorporada que comenzará automáticamente a la derecha de la pantalla.

Una vez que estemos seguros de estar en la carpeta correcta podemos ejecutar parcel con el siguiente comando. Este te dará una URL donde puedes ver los resultados. Y cada vez que editemos un archivo podemos ver el resultado guardado en vivo en el navegador.

parcel index.html

Una vez que inicies con el código este ejecutará y generará una vista previa en vivo de tu sitio hasta que cierres o pares la ventana de la terminal. En general, la puedes ejecutar mientras estás desarrollando tu sitio. Entonces  una vez que hayas terminado puedes presionar Ctrl+C para pararla.

Si se desincroniza o la interrumpes con un error, entonces puedes reiniciarla presionando Ctrl+C para pararla y después ejecutarla en el mismo script de nuevo.

Por supuesto, Parcel es mucho mas que eso. Ahora en vez de CSS simple, también puedes usar SCSS por ejemplo. Esto te permite usar muchas características diferentes como declaraciones anidadas, usar mixins o llamar funciones y mucho más. Es como CSS con superpoderes. O incluso puedes reemplazar HTML y usar Pug en su lugar.

Como añadir librerias a tu proyecto de JavaScript.

Ahora que tenemos Node instalado y  una vista previa de npm, veamos como podemos añadir librerías a nuestro proyecto

En el pasado los desarrolladores usaban una CDN para agregar librerias. Tu podrías  importar una librería teniendo la etiqueta script en tu código HTML apuntando a una URL.

Eso está bien y sigue funcionando bien, pero hoy en día muchos desarrolladores usan npm o node package manager para agregar libraries a sus proyectos. Entonces ¿cómo funciona?

Primero tienes que inicializar el proyecto con el siguiente comando en tu terminal. De nuevo, necesitas ejecutar este comando en el directorio raíz de tu proyecto (consejo: Usa la terminal incorporada de VS Code para comenzar en la carpeta correcta).

npm init —yes

Este comando inicializó un archivo package.json en tu raíz con algunos metadatos. Tiene cosas como: nombre del proyecto, descripción, número de versión y etc. Cuando agregas el indicador si, todos estos valores tendrán un valor por defecto.

Ahora podemos agregar librerías a nuestro paquete con el comando de instalación de npm. En un artículo previo, usamos Three.js para renderizar cajas 3d en el navegador.

Así que como ejemplo instalemos Three.js. Ve a tu terminal de nuevo, asegurate de estar en la carpeta correcta y ejecuta el siguiente código:

npm install three

Esto instalará Three.js. ¿Cómo  sabes que la palabra clave aquí es Three y no threejs?

Cuando no sabes el nombre de tu paquete puedes googlear "npm"  y el nomre de la librería que necesitas. O en caso de que incluso no sepas el nombre de la librería también puedes buscar  "npm librería 3D" y ver que encuentra Google.

Podemos mirar estos resultados uno por uno y elegir uno basado en sus capacidades y otras informaciones. La mayoría de estos paquetes vienen con descripciones y ejemplos rápidos para darte una idea de lo que puede hacer la librería.

Otro indicador que puedes mirar son las descargas semanales y su última actualización para asegurarte que sea una librería activa que la gente sigue usando.

Una vez que encuentres el paquete que estás buscando, puedes ver el comando de instalación en la esquina superior derecha: npm i three. La i aquí no es más que un diminutivo de instalar.

Cuando ejecutemos este comando, sucederán tres cosas.

Primero, agregará la última versión de Three.js a tu archivo  package.json como una dependencia del proyecto. Después también crea un archivo package-lock. Ambas cosas nunca deberías editarlas manualmente. Para añadir, quitar o actualizar paquetes, deberías usar comandos como npm install, npm uninstall y etc.

Lo tercero que sucederá una vez que ejecutes npm install es que se creara una carpeta llamada node_modules. Esta es la carpeta donde estará el código fuente de Three.js.

Entonces, cuando importes Three.js en tu proyecto, lo buscarás en esta carpeta. No debes modificarla de forma manual como dijimos anteriormente.

Ahora que tenemos instalado Three.js podemos crear un sitio web simple que muestre una caja en 3D. Es un simple archivo HTML y JavaScript con el código para una Caja 3D.

La clave aquí es que en tu archivo JavaScript importes Three.js con la declaración de importar. Y usará el paquete que instalaste.

Luego podemos ejecutar el proyecto con Parcel. Usar importar significa que ahora usamos el módulo del sistema. Ejecutar un proyecto con la sitaxis del módulo puede ser un poco complicado, pero como estamos usando Parcel para ejecutar nuestro proyecto, funciona sin problemas y sin preguntas. Esa es una de las razones por la cual usamos Parcel.

Si quieres aprender más sobre crear juegos en 3D con Three.js puedes ver mi artículo sobre como construir un carro minimalístico en el navegador.

Cómo obtener consejos de codificación mientras codifica.

La segunda extensión que deberías tener para VS Codde es ESLint. Mientras que Prettier es para darle formato a tu código, ESLint puede darte consejos de codificación.

Existen muchos patrones en JavaScript que pueden causar  un error o que pueden ser engañosos cuando tratas de entender el código.

En este ejemplo declaramos una variable pero luego tenemos un error de escritura y tratamos de usar otra variable que no existe.

ESLint lo resaltará. Te mostrará una advertencia en ambos, en la declaración diciendo que creaste una variable que no usas, y en el uso donde te dirá que tratas de usar una variable que no está declarada.

Después de estas advertencias, es fácil encontrar donde tuviste el error. Por supuesto, ESLint es mucho más complejo que solo tratar de encontrar este  simple error. También hay otros menos obvios donde podrías no entender al principio, porque te muestra una advertencia.

En ese punto, también puedes dar clic en el enlace para ver una explicación más detallada de por qué  este patrón es malo y que puedes hacer para evitarlo.

¿Cómo puedes usar ESLint en tu proyecto? Configurarlo requiere algunos pasos más allá de instalarlo. Por suerte, la mayoría de estos pasos los tienes que hacer una sola vez.

Primero, como hiciste con Prettier, tienes que instalar la extensión de ESLint. Ve a extensiones, busca ESLint e instálala.

Luego necesitas generar una configuración de ESLint. Aunque antes de hacer esto, debes asegurarte de que tu proyecto está inicializado con npm init.

Si aún no tienes un archivo package.json entonces primero tienes que ejecutar npm init. Sí, para inicializar tu proyecto.

Luego puedes generar una configuración para ESLint con el siguiente comando.

npx eslint —-init

npx es otra herramienta que viene con Node. Puede ejecutar scripts que ni siquiera están en tu computador.

En este caso ejecutamos el script ESLint, pero en realidad nunca instalamos ESLint. Instalamos  la extensión de ESLint, pero no es el script que estamos ejecutando aquí.

Este script te preguntará alguna cosas. La mayoría obvias excepto la primera.

¿Cómo te gustaría usar ESLint?

¿Quieres ESLint solo para comprobar los errores de  sintaxis,  quieres que también encuentre posibles problemas o incluso quieres que compruebe errores de estilo?

Si también usas Prettier, necesitas seleccionar la segunda opción. Porque ambos te recomendaran estilos, lo que hará que entren en conflicto.

Entonces si usas Prettier no necesitas ESLint para comprobar los estilos, solo para la sintaxis y posibles problemas.

¿Qué tipo de módulos usa tu proyecto?

En un proyecto de desarrollo de front end probablemente usas importar y exportar por lo que seleccionarás la primera opción.

¿Qué framework usa tu proyecto?

Si usas React o Vue.js selecciona la opción apropiada, de otra forma no selecciones nada.

¿Tu proyecto usa Typescript?

Si usas Typescript selecciona si, si no presiona enter y continua.

¿Dónde ejecutas tu proyecto?

¿Tu proyecto se  ejecutará en un navegador o con Node? Aquí configuramos proyectos de desarrollo de front end entonces seleccionamos Navegador.

¿En qué formato quieres que esté tu archivo de configuración?

Esto realmente no importa,  pero si quieres personalizar la configuración más tarde probablemente tienes que escoger entre JavaScript o JSON.

Finalmente, el script pregunta si debería instalar ESLint como dependencia de desarrollo, deberías pulsar si, esto instalará ESLint entonces estará disponible en tu carperta node_modules.

Después de este paso, podrás tener tu configuración y podrás encontrar ESLint en tu archivo package.json como dependencia de desarrollo.

Dependencia de desarrollo significa que ESLint no es parte del código fuente de tu sitio web, pero las herramientas lo requieren. En este caso la extensión  ESLint requiere que el paquete esté instalado en tu proyecto.

Ahora que tenemos ESLint instalado, configurado y su paquete instalado, también necesitamos garantizarle acceso a este paquete.

Esto es un requerimiento de seguridad que tendrás que hacer solo una vez. En la parte de abajo del editor, una vez que ESLint esté instalado, encontrarás un botón con un círculo atravesado por una línea. Dale clic y selecciona Permitir en todos lados, esto permite que ESLint funcione apropiadamente en cualquier proyecto futuro.

Después de todos estos pasos, ESLint debería funcionar por fin. Si vamos a un archivo JavaScript y tratamos de usar una variable sin declarar, luego al guardarla la señalará.

ESLint también podría mostrarte errores en lugares donde todo está bien. Irónicamente si seleccionaste que la configuración de ESLint debería estar en un archivo JavaScript, entonces te podrá arrojar un error de configuración por sí mismo.

Esto es porque configuramos que el entorno para nuestros proyectos sea el navegador y esta configuración se basa en una variable global que no existe en el navegador.

Sin embargo, este archivo no es parte del sitio web exactamente. Es un archivo de configuración que no será parte del código fuente definitivo y su entorno natural es el navegador sino más bien de Node.js y en Node esta variable global existe. Por lo tanto este archivo está bien y no debería haber un error.

Una forma de arreglarlo es establecer una lista de archivos que ESLint debería ignorar. En la carpeta raíz de la aplicación, puedes crear un archivo llamado .eslintignore y agregarle .eslintrc.js, una vez que guardemos, ESLint no ejecutara ninguna verificación en el archivo de configuración nunca más.

ESLint es también altamente personalizable. Para más detalles puedes ver la documentación de ESLint.

Como configurar un proyecto en React o Vue.

¿Planeas crear un sitio web con React o Vue.js? Esencialmente harás los mismos pasos.

Inicializa un proyecto con npm init, instala las dependencias, configura ESLint y luego ejecuta tu proyecto con Parcel.

Mira mis videos en YouTube en los cuales veremos paso a paso de lo que hicimos antes y un ejemplo rápido con React y Vue.js (en inglés).

Próximos pasos.

Estas son las herramientas básicas  que puedes usar cuando trabajes en un proyecto de desarrollo de front end con JavaScript. Añade librerías con npm, mantén tu código ordenado con Prettier, evita dolores de cabeza innecesarios con ESLint y ejecuta tu proyecto con Parcel.

Ahora que configuramos un proyecto, estás listo para construir tu Sitio web.

¿Qué pasa una vez que termines? Necesitas empaquetarlo en una compilación final que puedas subir a la web, si usas Parcel puedes crear un paquete final con el siguiente comando.

parcel build index.html —public-url '.'

Esto creará un paquete en la carpeta raíz que tú puedes ejecutar en el navegador, puedes simplemente ejecutar tu nuevo index.html en la carpeta raíz para verlo en el navegador.

¡Y eso es todo! Gracias por Leer:)

Suscribete para más tutoriales de desarrollo web:

Hoy  aprenderemos todo lo que necesitas saber sobre la propiedad posición (position) de CSS con ejemplos. Comencemos?️

Tabla de contenidos

• ¿Qué es la propiedad posición de CSS?
• ¿Qué es la posición estática en CSS?
• ¿Qué son las posiciones Relativa y Absoluta  en CSS?
• ¿Qué la posición Fija en CSS?
• ¿Qué es la posición Pegadiza en CSS?

Puedes ver este tutorial (en inglés) en YouTube si quieres.

¿Qué es la propiedad posición en CSS?

Si quieres hacer sitios web impresionantes que se vean artísticos, únicos y bonitos, entonces definitivamente debes aprender como usar la propiedad posición de CSS. Veamos como funciona.

Usando Flexbox o Grid, puedes hacer un sitio web simétrico como este: ?

Con la propiedad posición, puedes hacer sitios web asimétricos como este:?

No puedes poner tu contenido en cualquier lugar que desees usando Flexbox y Grid. Estás limitado alrededor de los ejes (Axis) X e Y. Mira este diagrama para entender lo que quiero decir: ?

Tus cajas seguirán estas medidas exactas. ?

Pero, usando la propiedad posición, puedes ubicar tu contenido donde quiera que lo desees, separando los elementos uno del otro.

Puedes colocar tus cajas donde lo desees con este tipo de diseño.? En otras palabras, te podrás mover libremente alrededor de tu pantalla.

Aquí tenemos otro ejemplo de lo que puedes hacer con la propiedad posición:

Puedes mover o colocar esos patrones de puntos y ondas y la imagen de la rosquilla alrededor de la página ☝ donde quieras, usando la propiedad posición.

Organización del proyecto.

Para este, puedes usar cualquier editor de código que tenga el plugin emmet instalado. Yo voy a usar CodePen.io.

HTML

Dentro de la etiqueta body, escribe este código: ?

<div class="caja-1"> </div>

CSS

Reinicia las configuraciones por defecto de tu navegador y agrega este código CSS:?

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

Estiliza la clase: caja-1 así:?

.caja-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

Nuestra propiedad posición, tiene 5 valores:

1. relative (relativa)
2. absolute (absoluta)
3. static (estática)
4. fixed (fija)
5. sticky (pegadiza)

Para mover nuestras cajas, usaremos 4 propiedades:

• Top (arriba)
• Bottom (abajo)
• Left (izquierda)
• Right (derecha)

¿Qué es la posición estática en CSS?

Esta no tiene casos de uso. Este es el valor por defecto de todo elemento.

¿Qué son las posiciones relativas y absolutas en CSS?

Ambas posiciones, la relativa y la absoluta, funcionan de la misma manera excepto en un campo. Usamos relative para identificar las clases padre. Y usamos absolute para identificar las clases hijo.

Miremos estos dos ejemplos. ?

Primero, experimentemos con el valor relative. Intenta este código:

.caja-1{
/* Aquí irían otros códigos*/

   position: relative;
   left: 100px;
}

Esto es lo que obtendrías:?

Podemos duplicar el mismo resultado usando el valor absolute así: ?

.caja-1{
/* Aquí irían otros códigos*/
    
   position: absolute;
   left: 100px;
}

Investiguemos la principal diferencia entre las posiciones relativas y absolutas.

Posición relativa vs. absoluta en CSS.

HTML

Escribe esto dentro de tu código HTML: ?

<body>
   <div class="caja-1">
    
       <div class="caja-2"> </div>	
        
   </div>
</body>

CSS

Dale estilo a tus cajas con los siguientes códigos CSS:?

.caja-1{
	width: 300px;
	height: 300px;
	background-color: skyblue;
	border: 2px solid black;
    margin: auto;
}

.caja-2{
	width: 100px;
	height:100px;
	background-color: pink;
	border: 2px solid black;
}

Debería verse así:?

Ahora, seleccionamos nuestras clases así: ?

body{ }

.caja-1{ }

.caja-2{ }

Ahora, escribe esto en tu código CSS: ?

body{
	
}

.caja-1{
/* Este es el padre ? */
	position: relative;
}
.caja-2{
/* Este es el hijo ? */
	position: absolute;
	left: 100px;
}

Aquí está el resultado: ?

Observa que la .caja-2 se movió 100px a partir .caja-1.

Esto es porque .caja-1 es el padre y .caja-2 es el hijo.

Cambiémoslo otra vez. Escribe esto en tu código CSS:

body{
/* Este es el padre ? */
   position: relative;	
}

.caja-1{

}
.caja-2{
/* Este es el hijo ? */
   position: absolute;
    left: 100px;
}

Aquí tenemos el resultado: ?

Observa que .caja-2 se movió 100px a partir el elemento body.

Esto es porque el body es el padre y .caja-2 es el hijo.

¿Qué es la posición fija en CSS?

Este valor fijará la posición de tu elemento en la pantalla incluso cuando te desplaces en el navegador.                                                       Miremos algunos ejemplos para ver como funciona.

Ejemplo de posición fija.

Escribe esto en tu código HTML. ? Una vez que escribas lorem200, asegúrate de presionar la tecla Tab en tu teclado:

<div class="contenedor">
	
	<p>lorem200</p>
    
	<div class="caja-1"> fixed </div>
    
	<p>lorem200</p>		

</div>

Y aquí tenemos el código CSS:

.contenedor{
	height: 3000px;
}

.caja-1{
	height: 120px;
	width: 120px;
	background-color: skyblue;
	border: 2px solid black;
	
	display: grid;
	place-content: center;
}

Luego añade este código CSS al final:

.caja-1{

	position: fixed;
	top: 100px;
	left: 200px;
}

Aquí está el resultado:?

Puedes ver que el elemento se mantiene fijo incluso cuando nos desplazamos en nuestro navegador.

¿Qué es la posición pegadiza en CSS?

Después de desplazarnos a cierto punto de nuestra pantalla este valor, podrá fijar la posición de nuestro elemento en la pantalla entonces no se moverá.

Ejemplo de posición pegadiza.

No cambies nada en tu HTML actual ni en CSS excepto por este valor:

.caja-1{
/*  Juega Con ? este valor */
   position: sticky;
   top: 30px;
   left: 200px;
}

El resultado será: ?

Como puedes ver, después de desplazarnos hasta cierto punto, el elemento se mantiene fijo exactamente arriba de navegador en pantalla.

Puedes mirar estos sitios web para ver como funciona la posición pegadiza en sitios web de verdad.

• AwakeBoards
• Ferme
• LATORRE

Conclusión

Ahora puedes hacer sitios web hermosos con confianza, y resolver problemas simples de diseño usando la propiedad posición.

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

Sugerencias y críticas son muy apreciadas. ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Créditos.

• Cute Girl Illustration
• Kitty Avatar