DEV Community: John

Cómo crear y vincular una llave SSH con GitHub

John — Mon, 23 Nov 2020 22:50:13 +0000

Crear una llave SSH no solo es la forma más rápida de trabajar con tus repositorios en GitHub, es también la forma más segura y recomendada en los entornos de desarrollo profesionales.

¿Que es una llave SSH?

Una llave SSH es una clave que te permitirá autenticarte ante un servicio, en este caso, GitHub. Por lo general vienen 2 llaves: una pública y una privada. Con la pública puedes enviar y recibir información cifrada de la web, mientras que con la privada puedes descifrar esa información para poder su contenido.

Nota: NUNCA compartas tu llave privada.

Antes de crear la llave

Antes de crear la llave, primero debes verificar que no tienes las llaves ya creadas. ¿Cómo lo haces? Simple, ejecuta este comando:

ls -al .ssh

Por lo general tienen estos nombres:

id_rsa.pub
id_dsa.pub

Así que si te topas con uno de ellos, lo más probable es que ya tengas las llaves y solo debes vincular esa llave con GitHub.

En este caso, no tengo llaves. Vamos a crearla.

¿Cómo crear un llave SSH?

Para crear una llave SSH, simplemente ejecuta este comando:

ssh-keygen -t rsa -b 4069 -C "j@ejemplo.com"

Recuerda poner tu correo electrónico.

Una vez corras el comando se te presentarán dos preguntas:

Si deseas que la llave SSH se guarde en el directorio por defecto. De no ser así, puedes poner el directorio donde quieras guardar la llave. Te recomiendo dejar la llave en el directorio por defecto.
Luego de seleccionar el directorio, te pedirá una contraseña extra (passphrase). En lo personal te recomiendo no ponerla debido a que cada vez que quieras usar la llave te pedirá la contraseña, y eso es lo que queremos evitar.

Si haces todo según lo indicado, este sería el resultado:

Verificamos una vez más si tenemos la llave:

Y efectivamente. It´s ready!

Ahora, vamos a vincularla con nuestra cuenta de GitHub. Pero primero un breve paso más.

Guardando la llave en el SSH-Agent

En GitHub existe algo llamado SSH-Agent. Esto nos permite recordar las llaves privadas de cada usuario mientras dura la sesión. De esta manera es que logramos la autenticación. Para lograr esto, vamos a ejecutar este comando en la consola:
eval "$(ssh-agent -s)" && ssh-add ~/.ssh/id_rsa

Este debería ser el resultado:

Con este paso el SSH-Agent recordará las llaves por nosotros.

Vincular llave SSH con GitHub

Para poder vincular la llave SSH con tu cuenta de GitHub debes ir a:
Tu perfil (click en tu avatar) -> Opción settings -> En la barra izquierda seleccionas la opción SHH Keys and GPG Keys

Una vez allí, seleccionas la opción New SSH Key

En la opción title te recomiendo poner un título descriptivo, por ejemplo: PC de John, PC de trabajo (nombre de empresa), etc... Y en la opción Key deberás pegar tu llave pública. Para eso, vamos a la consola y ejecutamos este comando:

cat ~/.ssh/id_rsa.pub

Este comando mostrará tu llave pública:

Copiala y pegala en la opción Key. Así:

Le das en la opción Add SSH Key y por motivos de seguridad GitHub te pedirá hacer login nuevamente. Una vez haga el login, vas nuevamente a la opción SSH and GPG Keys y tendrás tu llave guardada.

Y eso es todo. Ya puedes clonar repositorios mediante llaves SSH sin ningún tipo de problema. Trabajar más rápido y como un/una profesional.

¡Nos vemos en el próximo post! 🚀

Prototype y herencia prototipal en JavaScript

John — Sun, 08 Nov 2020 04:44:24 +0000

El prototype o prototipo es un concepto casi único de JavaScript. Este concepto se aleja de la forma en la cual normalmente se manejan las clases en un lenguaje de programación. En JAVA, por ejemplo, creamos una clase y luego la instanciamos. Pero en JS eso no se puede hacer, porque el pequeño gran detalle es que: en JavaScript no existen las clases.

Al todo ser objetos en este lenguaje de programación debemos instanciarlos a partir de un objeto original, o bien, heredar a otros objetos. Y es aquí donde aparecen los conceptos de prototipo y su modelo de herencia prototipal.

¿Que es un prototipo y la herencia prototipal?

💡 Un prototipo es un objeto que existe como una propiedad en todas las funciones de JavaScript.

¿No recuerdas que es una propiedad? Tranqui, a todos nos pasa. Como ya lo mencioné antes, JavaScript está basado en objetos. Entonces, un objeto es una colección de propiedades, y una propiedad es una llave (key) y un valor para esa llave (value). Aquí un ejemplo:

Siempre que pedimos una propiedad o un método a una función y no se encuentra, se busca en el prototipo del objeto. El prototipo, a su vez es también un objeto llamado _Prototype_ y este objeto _Prototype_ es una propiedad del objeto global: _Object_. Y como a todo objeto en JavaScript, se le pueden agregar nuevas propiedades y métodos.

// En este lenguaje pasan cosas raras... Lo sé. Sigamos:

Esto se le conoce como cadena de prototipos. Y es la razón por la cual otros objetos pueden tener disponibles propiedades y métodos de otros objetos. Veamos unos ejemplos:

Primero, creamos un objeto normal:

      const character = {
        name: "Vegeta",
      };

      character.hi = function () {
        alert(`Me llamo ${this.name} y soy un personaje`);
      };

      character.hi();

Esto con un objeto puede estar bien y no causar problemas. Pero, ¿y si tenemos más de 50 objetos? ¿vamos a crear un función saludar por cada objeto? Esto es muy poco escalable. Busquemos otra forma:

      const characterMethods = {
        hi: function () {
          console.log(`Me llamo ${this.name} y soy un personaje`);
        },
      };

      function Character(name) {
        const character = {
          name: name,
        };

        character.saludar = characterMethods.hi;
        return character;
      }

      const vegeta = Character("Vegeta");
      vegeta.hi();

      const pikachu = Character("Pikachu");
      pikachu.hi();

Más sencillo y más funcional ¿cierto? Simplemente creamos dos objetos, uno donde guardamos los métodos y propiedades (characterMethods) y otro donde guardamos nuestros personajes (Characters). Pero... esto se puede hacer de forma mucho más sencilla con los prototipos y la herencia prototipal.

Y aquí veremos algo nuevo llamado: object.create. Básicamente, es uno de los métodos para crear objetos en JavaScript. Recibe dos argumentos: Object.create(prototypeObject, propertiesObject). El prototipo del objeto y las propiedades del objeto. Veamos su funcionamiento:

      function Character(name) {
        // Iniciamos el uso del Object.create.
        const character = Object.create(Character.prototype);
        character.name = name;

        return character;
      }

      // Iniciamos el uso de Object.prototype
      Character.prototype;

Como lo mencioné al principio de este post en la definición de prototipo, todas las funciones tienen un objeto prototype. Al principio Character.prototype (el objeto de las funciones) es un objeto vacío. Pero, una vez más, como lo dije al principio: a todo objeto se le pueden agregar nuevas propiedades y métodos. Hagamos que prototype deje de estar vacío 👇

      function Character(name) {
        // Iniciamos el uso del Object.create.

        const character = Object.create(Character.prototype);
        character.name = name;

        return character;
      }

      // Iniciamos el uso de Object.prototype
      Character.prototype;

      // Agregamos un método a Character.prototype
      Character.prototype.hi = function () {
        console.log(`Me llamo ${this.name} y soy un personaje`);
      };

      const vegeta = Character("Vegeta");
      // Usamos el método agregado a Character.prototype
      vegeta.hi();

      const pikachu = Character("Pikachu");
      pikachu.hi();

¡Y listo! ¡Funciona! El código en el que trabajamos ahora es mucho más limpio, hay menos código repetido y sobre todo y más importante, es mucho más reutilizable y mantenible. Podemos agregar nuevos métodos y propiedades sin que todo se rompa, simplemente tendríamos que agregar un nuevo método a Character.prototype. No tendremos que crear muchas funciones o hacer que muchas propiedades y métodos dependan de un solo objeto.

¿Qué aprendizaje te puedes llevar de este post?

Todo en JavaScript acaba en el objeto Object, el cual es el objeto global. Todo se hereda de allí y si alguna función no encuentra un método o una propiedad la buscará en el objeto global. Si no la encuentra en el objeto global se imprimirá un error.
La forma en la que un objeto puede acceder a propiedades y métodos de otro objeto hasta llegar al objeto global se llama herencia prototipal.
propotype es un objeto que tienen todas las funciones en JavaScript. Inicia vacío pero se le pueden ir agregando nuevos métodos y propiedades.

Espero que hayas podido comprender un poco más este tema.

Nos vemos en un próximo post. 🚀

Fuentes consultadas:

MDN Web Docs
Platzi

Cómo funciona el motor de JavaScript

John — Mon, 05 Oct 2020 20:58:37 +0000

Hoy vas a entender de una vez por todas cómo funciona el JavaScript Engine para que sepas que pasa con cada línea de código que escribes en tu proyecto.

¡Comencemos! 👩‍💻

Motores

Los motores son esas programas que se encargan de convertir código de alto nivel (JavaScript, Python, C) a código de bajo nivel (Machine Code, Bytecode). Cada navegador tiene su propio motor para compilar e interpretar JavaScript:

V8 Engine (Google Chrome), el cual también es motor de Node.js (En este nos basaremos para la explicación).
Spider Monkey (Mozilla Firefox).
Chakra (Microsoft Edge).
JavaScriptCore (Apple Safari).

La llegada de V8 y su importancia

El día 2 de septiembre de 2008 se lanzó la primera versión del motor V8, sin saber del todo que iban a ser el gran cambio en la interpretación de JavaScript en el navegador, este dejaría de ser tan lento como lo era.

¿Cómo lo hicieron?
Entre todas las razones, la principal está en los conceptos compilador e intérprete.

El compilador es el programa encargado de convertir código escrito en un lenguaje de programación a otro lenguaje de programación de bajo nivel. Por ejemplo, el compilador del V8 es el encargado de transformar JavaScript a Bytecode y luego a Machine Code.

Por otra parte, el intérprete es el encargado de revisar el código línea por línea y ejecutarlo directamente en la máquina de destino. Cabe resaltar que los intérpretes también realizan algún trabajo de traducción al igual que los compiladores.

Entendiendo como funciona V8

Imagen tomada del Curso Profesional de JavaScript en Platzi.

Cuando llega un script al navegador el motor V8 inicia un proceso el cual consta de:

Recibir el código JavaScript como un flujo de bytes UTF-16 y pasarlo a un decodificador de flujo de bytes (el cual hace parte del motor).
Parsear (transformar) el código y descomponerlo en tokens (los tokens son elementos de js como: let, new, símbolos de operaciones, functions, promises).
Gracias a el anterior parseo se genera una estructura de datos en forma de árbol, o bien, Abstract Syntax Tree (AST). V8 cuenta con dos tipos de parseo que verás más abajo.
El intérprete recorre el AST y va generando el bytecode.
Luego de interpretar todo el código, el profiling data va evaluando el bytecode varias veces más y de esta forma descubre que puede enviarle al optimizing compiler, el cual se encarga de optimizar el código bytecode a machine code y así se reemplaza el código base para ejecutar el código JavaScript más rápido y usar menos recursos.

El optimizing compiler encuentra los puntos donde el código se puede optimizar. Normalmente optimiza el código que se repite varias veces. En caso de que la operación cambie por alguna razón, el código vuelve a la versión anterior (la des-optimizada). Esto se hace para consumir menos recursos y por lo tanto ejecutar el código más rápido.

Por ejemplo, este código puede ser optimizado:

function add(a, b) {
   return a + b;
}

for(let i = 0; i < 1000; i++) {
   add(i, i)
}

Cuando ese código se ejecute unas 50 veces, estará listo para ser optimizado porque el profiling data sabe que no cambiará.

Si se cambia el código por alguna razón:

function add(a, b) {
   return a + b;
}

for(let i = 0; i < 1000; i++) {
   add(i, i)
}

add(1, "uno")

Volverá a su versión anterior.

Tipos de parseo

Eager Parsing:
- Encuentra errores de sintaxis.
- Crea el AST.
- Construye scopes.
Lazy Parsing:
- Doble de rápido que el eager.
- No crea el AST.
- Construye scopes parcialmente.

El proceso de parsing hace parte del 15% — 20% del proceso de ejecución así que hay que tenerlo muy en cuenta.

Diferencias entre motores

Los motores de los demás navegadores tienen casi el mismo proceso de ejecución del V8 Engine ya que fueron creados a partir de este. Cuentan solo con algunas pequeñas diferencias. Como por ejemplo en las capas de optimización:

V8 Engine (Chrome): 1 Sola capa de optimización.
Spider Monkey (Firefox): Tiene 2 capas de optimización.
Chakra (Edge): Tiene 2 capas de optimización.
JavaScriptCore (Safari): Tiene 3 capas de optimización.

Los de 2–3 capas se ejecutan un poco más lento pero se optimizan más rápido.

Concluyendo

¡Eso es todo! Así funciona el motor V8 de JavaScript desarrollado para el navegador Chrome.

No olvides practicar y nos vemos en el próximo post 🚀

Cover image courtesy of midu.dev. For more credits, please contact me.