Lo que más me gusta de Netlify es que proporciona un montón de características útiles de forma gratuita, tales como:

• Una forma de desplegar un website estático en segundos.
• Despliegue continuo, lo que significa que cuando conectas tu repositorio de Github/Gitlab/Bitbucket, se activa automáticamente el despliegue cuando se envían nuevos commits al repositorio.
• La garantía de que el website nunca se caerá, incluso durante las nuevas implantaciones.
• Le permite volver fácilmente a cualquier versión anterior de su sitio web con un solo clic.
• Posibilidad de previsualizar rápidamente cualquiera de las versiones de la aplicación previamente desplegadas.
• Cambio de dominio o subdominio al instante.

Y mucho más

Así que vamos a ver cómo desplegar una aplicación React en Netlify.

¿Te gustaría aprender Redux desde el principio y construir una aplicación para pedir comida desde cero? Puedes consultar el curso Mastering Redux.

Arrastrar y soltar la carpeta build en Netlify

La forma más rápida y sencilla de desplegar una aplicación React es, simplemente, arrastrar y soltar la carpeta build en Netlify.

Para crear dicha carpeta, simplemente hay que ejecutar el comando npm run build o yarn build desde la línea de comandos, dentro la carpeta del proyecto.

Una vez creada la carpeta build, sólo hay que soltar la carpeta en el área correspondiente, bajo el menú sites, como se muestra a continuación:

Cómo desplegar una aplicación en Netlify desde un repositorio de GitHub

Esta es, sin duda, mi forma favorita de desplegar aplicaciones en Netlify.

La ventaja de utilizar este método es que cada vez que subas cualquier cambio al repositorio de GitHub, se desplegará automáticamente en Netlify. También se pueden ver todas las versiones desplegadas y retroceder fácilmente a cualquier versión de código que funcione previamente con un solo clic.

Si ya tienes un repositorio subido a GitHub, entonces solo tienes que conectarlo.

Para comenzar, tras iniciar sesión en la cuenta de Netlify, en el panel de control, se hace clic en el botón Nuevo sitio desde Git.

Nuevo clic en el botón GitHub para conectar el repositorio GitHub.

Se abrirá una nueva pestaña. Asegúrate de que la ventana emergente está activada en tu navegador.

Busca el repositorio de GitHub, en la caja de búsqueda Search repos. Si el repositorio no se muestra, haz clic en el botón Configure the Netlify app on GitHub en la parte inferior de la página.

Una vez que hayas hecho clic, desplázate hacia abajo en la página y haz clic en el desplegable Select repositories, busca el repositorio y haz clic en el botón Guardar.

Serás redirigido a la página anterior, que muestra todos los repositorios disponibles.

Busca el repositorio que quieres desplegar. En el ejemplo, está seleccionado el repositorio react-book-management-app que se puede ver cómo se crea en el artículo enlazado.

Una vez  hayas seleccionado el repositorio, podrás ver la siguiente pantalla:

Para esta aplicación, no necesitamos cambiar nada.

Las opciones Build command y Publish directory se rellenarán automáticamente. Asegúrate de introducir estos campos si tienes un comando diferente en package.json para construir tu aplicación o esos campos no se rellenan automáticamente.

Ahora, haz clic en el botón Deploy site. Una vez que hayas hecho clic, verás el mensaje de Site deploy in progress.

Tendrás que esperar un poco mientras se despliega. Una vez completado el despliegue, verás la siguiente pantalla:

Abre el enlace en la nueva pestaña y verás tu aplicación desplegada en vivo.

¡Impresionante! Ahora, si haces algún cambio en el código fuente y subes ese cambio a GitHub, Netlify lo detectará y volverá a desplegar tu aplicación con tus últimos cambios.

Si compruebas la aplicación, verás que la aplicación funciona bien con la navegación y eres capaz de añadir/editar/borrar un libro.

Pero hay un problema. Si accedes directamente a la ruta /add o actualizas dicha ruta, obtendrás un error de página no encontrada como se muestra a continuación:

Obtendrás el mismo error si intentas actualizar la ruta de la página de edición (edit page).

Esto se debe a que, cuando accedemos a cualquier ruta en nuestra máquina local, React Router se encarga del enrutamiento. Pero cuando desplegamos la aplicación en cualquier servidor, al acceder directamente a la ruta, se enviará la petición al propio servidor (Netlify en nuestro caso).

Pero como no hay un manejador de ruta /add en el lado del servidor, se verá un error de página no encontrada. Pero Netlify proporciona una manera de arreglar esto.

Crea un nuevo archivo con el nombre _redirects dentro de la carpeta public de nuestro proyecto y añade el siguiente contenido:

/* /index.html 200

Aquí, le estamos diciendo a Netlify que redirija todas las rutas al archivo index.html.

El archivo index.html contiene todo el código de nuestra aplicación React. Se genera dentro de la carpeta de compilación cuando Netlify  ejecuta el comando de compilación yarn build mientras se despliega la aplicación.

Y como el enrutamiento es manejado por nuestra aplicación React, que está contenida en el archivo index.html, nuestra aplicación funcionará sin un problema de página no encontrada.

Ahora, sube los cambios al repositorio de GitHub para que Netlify despliegue la aplicación de nuevo con estos cambios.

Y una vez desplegada, si compruebas ahora la aplicación desplegada, podrás ver que la aplicación funciona bien y no obtenemos un error de página no encontrada.

Ya está. Ya hemos terminado de desplegar nuestra aplicación en Netlify.

Cómo cambiar, de forma sencilla, el dominio en Netlify

Si compruebas el nombre del sitio desplegado, verás que no es fácil de recordar, especialmente si tiene muchas aplicaciones desplegadas. Pero Netlify proporciona una manera de cambiar eso fácilmente.

Haz clic en el botón Site settings que aparece en la sección de resumen del sitio.

A continuación, haz clic en el botón Change site name e introduce un nuevo nombre. Guarda con el botón Save y ahora se podrá acceder a la aplicación con el nombre modificado.

Por lo general, me gusta dar el mismo nombre que el nombre del repositorio para que sea fácil encontrar una aplicación en particular si tenemos muchas aplicaciones desplegadas en Netlify.

Si quieres saber cómo desplegar una aplicación React + Node.js en producción, consulta este artículo.

¡Gracias por leer este artículo!

Puedes encontrar el código  completo de GitHub junto con este cambio de redirección en este repositorio.

Puede ver la demostración en vivo de la aplicación desplegada aquí.

¿Quieres aprender todas las características de ES6+ en detalle, incluyendo let y const, promesas, varios métodos de promesa, desestructuración de arreglos y objetos, arrow functions, async/await, importación y exportación y mucho más desde cero?

Echa un vistazo al libro Mastering Modern JavaScript. Este libro cubre todos los prerrequisitos para aprender React y te ayuda a mejorar en JavaScript y React.

Puedes consultar una preview gratuita aquí

Además, puedes consultar el curso gratuito de Introducción a React Router para aprender React Router desde cero.

Por último, ¿Quieres estar al día con el contenido regular sobre JavaScript, React, Node.js? Sigue el LinkedIn de Yogesh Chavan.

Traducido del artículo de Yogesh Chavan - How to Deploy a React Router-Based Application to Netlify

En este artículo, vamos a solucionar problemas de arreglos de Leetcode en una sola línea, usando una de las características más interesantes de Python: Comprensión de listas.

¿Qué es Comprensión de listas?

Antes de comenzar con los problemas vamos a estar seguros de que entendemos de qué trata la comprensión de listas:

La comprensión de listas es una construcción sintáctica disponible en algunos lenguajes de programación para crear una lista basada en otras listas existentes.
- Wikipedia -

Veamos cómo funciona la comprensión de listas con un ejemplo.

Consideremos un arreglo de números. Nuestra tarea es la de añadir 1 a los números en los índices impares y añadir 2 a los números en los índices pares

Ahora veremos cómo resolver el problema de arriba usando tanto un for-loop como la comprensión de listas.

Cómo resolver el problema con un bucle for

def addOneAndTwo(nums, n):
    for i in range(n):
        if i % 2 == 1:
            nums[i] += 1 
        else:
            nums[i] += 2 
    return nums

Cómo resolverlo con comprensión de lista

def addOneAndTwo(nums, n):
    return [nums[i] + 1 if i % 2 == 1 else nums[i] + 2 for i in range(n)]

Puedes ver cómo la solución usando comprensión de listas, simplifica esta de 6 líneas a una sola. Este es el poder de comprensión de listas.

Cómo resolver problemas de Leetcode con comprensión de lista.

Ahora, vamos a solucionar los siguientes problemas de Leetcode en una sola línea usando comprensión de lista

1. Mezclar el arreglo.

Este es el enunciado del problema de Leetcode:

Dado el arreglo nums que consiste en 2n elementos en forma

[x1,x2,...,xn,y1,y2,...,yn]. Devolver el arreglo en la forma [x1,y1,x2,y2,...,xn,yn].

Ejemplo:

Input: nums = [2,5,1,3,4,7], n = 3
Output: [2,3,5,4,1,7]

Explicación: Como x1=2, x2=5, x3=1, y1=3, y2=4, y3=7, entonces, la respuesta es [2,3,5,4,1,7].

Solución:

def shuffle(self, nums, n):
    return reduce(lambda a, b: a + b, [[nums[i], nums[j]] for i, j in zip(range(0, n), range(n, 2 * n))])

2. Número de buenas parejas

Dado un arreglo de números enteros nums. Un par (i,j) es llamado bueno si nums[i] == nums[j] y i < j. Devolver el número de buenas parejas

Ejemplo:

Input: nums = [1,2,3,1,1,3]
Output: 4

Explicación: Hay 4 buenas parejas (0,3), (0,4), (3,4), (2,5) de índice 0.

Solución:

def numIdenticalPairs(self, nums):
    return sum([int(i != j and nums[i] == nums[j]) for i in range(0, len(nums)) for j in range(i + 1, len(nums))])

3. Niños con el mayor número de caramelos.

Dado el arreglo candies  y el entero extraCandies, donde candies[i] representa el número de caramelos que tiene el i-ésimo niño.

Por cada niño, chequea si hay alguna forma de distribuir extraCandies entre los niños de forma que puedan tener el mayor número de caramelos entre ellos. Date cuenta de que múltiples niños pueden tener el mayor número de caramelos.

Ejemplo:

Input: candies = [2,3,5,1,3], extraCandies = 3
Output: [true,true,true,false,true]

Explicación: El niño 1 tiene 2 caramelos y, si él recibe todos los caramelos extra (3), él tendrá 5 caramelos, el número mayor de caramelos entre los niños.

El niño 2 tiene 3 caramelos y, si él recibe al menos 2 caramelos extra, entonces, ellos tendrán el número mayor de caramelos entre los niños.

El niño 3 tiene 5 caramelos, que ya es el número mayor de caramelos entre los niños.

El niño 4 tiene 1 caramelo, e incluso recibiendo todos los caramelos extra, tan solo tendrá 4 caramelos.

El niño 5 tiene 3 caramelos, si él recibe al menos 2 caramelos extra entonces ellos tendrán el mayor número de caramelos entre los niños.

Solución:

def kidsWithCandies(self, candies, extraCandies):
    return [candy + extraCandies >= max(candies) for candy in candies]

4. Descompresión de la lista codificada de longitud de ejecución

Estamos dando una lista de enteros denominada nums representando una lista comprimida con la codificación de longitud de ejecución.

Considerando cada par de elementos adyacente [freq, val] = [nums[2*i], nums[2*i+1]] (coni >= 0). Por cada par, existen elementos freq con el valor val concatenado en una sublista. Concatena todas las sublistas de izquierda a derecha para generar la lista descomprimida.

Retorna la lista descomprimida.

Ejemplo:

Input: nums = [1,2,3,4]
Output: [2,4,4,4]

Explicación: El primer par [1,2] significa que tenemos freq = 1 t val = 2, luego generamos el arreglo [2].

El segundo par [3,4] significa que tenemos freq = 3 y val = 4, luego generamos [4,4,4]. Al final la concatenación [2] + [4] es [2,4,4,4].

Solución:

def decompressRLElist(self, nums):
    return reduce(lambda a, b: a + b, [[nums[i + 1]] * nums[i] for i in range(0, len(nums), 2)])

5. La riqueza del cliente más rico.

Dado una cuadrícula de m x n cuentas,  accounts , formada por números enteros donde accounts[i][j] es la cantidad de dinero que el i-ésimo, cliente tiene en el i-ésimo banco. Retornar la riqueza que tiene el cliente más rico.

La riqueza de un cliente es la cantidad de dinero que tiene como suma de todas sus cuentas bancarias. El cliente más rico es aquel que tiene la mayor riqueza

Ejemplo:

Input: accounts = [[1,2,3],[3,2,1]]
Output: 6

Explicación: El primer cliente tiene un valor de riqueza  = 1 + 2 + 3 = 6, el segundo cliente tiene riqueza = 3 + 2 + 1 = 6. Ambos clientes son considerados los más ricos, con un valor 6, luego se retorna 6.

Solución:

def maximumWealth(self, accounts):
    return max([sum(row) for row in accounts])

Conclusión.

Espero que las soluciones anteriores sean útiles. Puedes combinar compresión de listas con otras funciones como map, filter y reduce para hacer que las soluciones sean más simples y efectivas.

Traducido del artículo de Ganesh Kumar Marimuthu - How to Solve Leetcode Problems With Python One-Liners

Gracias ?

Linkedin | Github

Agárrate, porque esto se complica.

¿Eres consciente que en JavaScript podemos añadir { } para sumar un nivel al scope donde queramos?

Por ejemplo, siempre podemos hacer lo siguiente:

{ { { { { { var madness = true } } } } } }

He incluido este detalle para estar seguro de que los siguientes ejemplos tengan sentido (No he querido asumir que todo el mundo lo sabe de antemano).

Antes de ES6 no había otra forma de declarar variables que usar var pero ES6 nos trajo las opciones de let y const.

Las declaraciones let y const son ambas block-scoped, que significa que solo son accesibles dentro de las llaves { } que les rodean. La declaración var, por otro lado, no tiene esa restricción.

Aquí hay un ejemplo:

let babyAge = 1;
let isBirthday = true;

if (isBirthday) {
	let babyAge = 2; 
}

console.log(babyAge); // Hmmmm. Esto imprime un 1

Lo anterior ha ocurrido porque la redeclaración de babyAge a 2 se encuentra solo disponible dentro del bloque if . Más allá, se usa el primer valor de babyAge . ¿Puedes ver que son 2 variables diferentes?

En contraste, la declaración var no está limitada al scope:

var babyAge = 1;
var isBirthday = true;

if (isBirthday) {
	var babyAge = 2; 
}

console.log(babyAge); // Ah! Esto imprime 2

La última diferencia destacada entre let / const y var  es que, si tu accedes a var  antes de que sea declarada, su valor es indefinido, pero si haces lo mismo para let  y const, te saldrá un ReferenceError.

console.log(varNumber); // undefined
console.log(letNumber); // No se registra, lanza un "ReferenceError letNumber is not defined"

var varNumber = 1;
let letNumber = 1;

Lanzan el error debido a lo que se conoce como Zona Muerta Temporal.

La Zona Muerta Temporal, explicada.

Esto es lo que es la TDZ: El término describe el estado donde las variables son inaccesibles. Se encuentran en el scope, pero no han sido declaradas todavía.

Las variables let y const existen en la TDZ desde el inicio de su ámbito de aplicación, su scope, hasta que son declaradas.

También se puede decir que las variables existen en la TDZ desde que se vinculan (cuando la variable se vincula al ámbito o scope en el que está) hasta que se declara (cuando se reserva un nombre en memoria para esa variable).

{
 	// ¡Esta es la Zona muerta temporal para la variable age!
	// ¡Esta es la Zona muerta temporal para la variable age!
	// ¡Esta es la Zona muerta temporal para la variable age!
 	// ¡Esta es la Zona muerta temporal para la variable age!
	let age = 25; // Cuando llegamos aquí, se acabó TDZ.
	console.log(age);
}

Puedes ver arriba que, si se quiere acceder a la variable age, antes de su declaración, nos arrojará un ReferenceError. Por la TDZ.

Pero var no hace eso, var es inicializada como undefined a diferencia de las otras declaraciones, let y const.

¿Cuál es la diferencia entre declarar e inicializar?

Aquí hay un ejemplo de declaración e inicialización de una variable

function scopeExample() {

    let age; // 1
    age = 20; // 2
    let hands = 2; // 3
}

Declarar una variable significa que se reserva el nombre en memoria en el scope actual. En el ejemplo, el etiquetado como 1 en los comentarios.

Inicializar una variable es establecer el valor de la variable. En este caso, etiquetado como 2 en los comentarios.

O siempre se puede hacer ambas tareas en una sola línea. Es la etiquetada como 3 en comentarios.

Repitámoslo otra vez: Las variables let y const existen en la TDZ desde el inicio de su scope hasta que son declaradas.

Entonces, a partir del fragmento de código anterior, ¿dónde se sitúa la TDZ para age? Además, ¿La variable hands tiene TDZ? si es así, ¿Dónde está el inicio y final de la TDZ de hands ? Intenta resolverlo antes de continuar.

Vamos a comprueba tus respuestas:

Tanto hands como age están dentro de la TDZ.

La TDZ para hands finaliza cuando es declarada, la misma línea en que se le pone valor 2.

La TDZ para age finaliza cuando es declarada y el nombre reservado en memoria (En el paso 2).

¿Por qué se crea la TDZ cuando se crea?

Volvamos a nuestro primer ejemplo:

{
    // ¡Esta es la Zona Muerta Temporal para la variable age!
    // ¡Esta es la Zona Muerta Temporal para la variable age!
    // ¡Esta es la Zona Muerta Temporal para la variable age!
    // ¡Esta es la Zona Muerta Temporal para la variable age!
    let age = 25; // Cuando llegamos aquí, se acabó la TDZ
    console.log(age);
}

Si añadimos un console.log dentro de la TDZ veremos el siguiente error:

¿Por qué existe la TDZ entre en inicio del scope y la declaración de la variable? ¿Cuál es la razón específica para ello?

Es por el hoisting (elevación)

El motor de JS que está analizando y ejecutando tu código tiene 2 pasos que realizar:

1. Analizar el código en el Arbol de Sintaxis Abstracto/código de bytes ejecutable, y
2. Ejecución en tiempo real.

En el paso uno es cuando sucede el hoisting, realizado por el motor de JS. Esencialmente, consiste en elevar todas las variables al comienzo del scope. Un ejemplo será como sigue:

console.log(hoistedVariable); // undefined
var hoistedVariable = 1;

Para ser claro, estas variables no se mueven físicamente en el código, pero el resultado funcionalmente es idéntico a lo siguiente:

var hoistedVariable;

console.log(hoistedVariable); // undefined
counter = 1;

La única diferencia con const y let es que, cuando son elevadas, sus valores no toman el valor por defecto undefined.

Para probar que const y let también se elevan, veamos el ejemplo:

{
    // ¡Las 2 variables siguientes van a ser elevadas al inicio del scope!
	console.log(typeof variableQueNoExiste); // Imprime undefined
	console.log(typeof name); // Devuelve error, no puede acceder a 'name' antes de inicializarla

	let name = "Kealan";
}

El fragmento anterior es la prueba de que let es claramente elevada por encima de donde fue declarada, ya que el motor nos avisa de este hecho. Se sabe que name existe (Es declarada), pero no podemos acceder a ella antes de su inicialización.

Si te ayuda a recordarlo, pienso en ello como lo siguiente:

Cuando las variables son elevadas, var obtiene el valor de inicialización undefined por defecto en el proceso de hoisting o elevación. Por su parte let y const también son elevadas, pero no son puestas con el valor undefined en el proceso.

Y este es el único motivo por el que tenemos TDZ. Por eso ocurre con let y const pero no con var.

Más ejemplos de TDZ

La TDZ también fue creada para los parámetros por defecto de las funciones. Luego, algo como lo siguiente:

function createTDZ(a=b, b) {
}

createTDZ(undefined, 1); 

Nos lanza un ReferenceError porque la evaluación de la variable a intenta el acceso a la variable b antes que haya sido analizada por el motor de JS. Los argumentos de la función se encuentran todos dentro de la TDZ hasta que son analizados.

Incluso algo tan sencillo como let tdzTest = tdzTest; deberá lanzar un error debido a la TDZ. En este caso, var creará justo tdzTest  y la pondra a undefined.

Un último ejemplo, bastante avanzado, de Erik Arvindson (el cual está involucrado en la evolución y mantenimiento de las especificaciones de ECMAScript):

let a = f(); // 1
const b = 2;
function f() { return b; } // 2, b está en la TDZ

Puedes seguir los números comentados.

En la primera línea llamamos a la función f, la cual trata de acceder a la variable b , la cual lanzará un ReferenceError ya que b se encuentra en la TDZ.

¿Por qué tenemos TDZ?

El Dr. Alex Rauschmayer tiene un excelente post explicando por qué existe la TDZ y la principal razón que esgrime es la siguiente:

Nos ayuda a atrapar errores.

Intentar acceder a una variable antes de declararla es el camino equivocado, y no debería ser posible.

También da una semántica más esperada y racional para const ya que const es elevada (hoisted), porque ¿qué pasa si un programador intenta usarlo antes de que sea declarada en tiempo de ejecución? ¿Qué variable debería contener en el momento en el que se eleva? Fue el mejor enfoque decidido por el equipo de especificaciones de ECMAScript.

Cómo evitar los problemas que provoca la TDZ

Es relativamente sencillo, siempre asegúrate de definir tus lets y consts en la parte superior del scope.

Traducido del artículo de Kealan Parr - What is the Temporal Dead Zone (TDZ) in JavaScript?

Cómo instalar y configurar un servidor FTP en Linux Redhat/CentOS

Paso 1: Usaremos localhost (127.0.0.1) en nuestro equipo para configurar el servidor ftp.

Paso 2: Instalar el paquete vsftpd (muy seguro FTP daemon).

yum install -y vsftpd

Paso 3: Inicia el servidor FTP cuando el sistema esté encendido.

systemctl enable vsftpd.service

Paso 4: Comprobar el estado del servidor de FTP.

systemctl status vsftpd.service

Paso 5: Configura el paquete vsftpd. Editaremos /etc/vsftpd/vsftpd.conf

// Cambia la línea que contiene anonymous_enable=NO a
anonymous_enable=YES

Esto le permitirá a cualquiera acceder al servidor FTP con autenticación.

// Cambie lo siguiente a YES
local_enable=YES
write_enable=YES<br>

Paso 6: Inicia el servidor FTP.
systemctl start vsftpd.service

Paso 7: Instala el cliente de FTP.
yum install -y lftpd

Paso 8: Conecta el FTP al localhost.
lftp localhost

Traducido del artículo - Install and configure an FTP server in Redhat/Centos Linux

Pero antes de pasar a aprender cómo usar estos comandos, les contaré algo que me dijo una vez un colega mío y que se me ha quedado grabado desde entonces: Todo es posible con Git, nada se pierde en Git.

No sé si la primera parte de su declaración es totalmente cierta, pero la tengo en mente cada vez que intento hacer algo con Git. Sinceramente, creo que voy a encontrar un comando que me ayude a hacer lo que necesito con solo buscar en Google las palabras adecuadas. Si eres nuevo en Git, me gustaría que creyeras en ello también.

En este artículo, aprenderemos a hacer lo siguiente:

1. Agregar repositorios remotos.
2. Cambiar repositorios remotos.
3. Borrar una rama local o remota.
4. Fusionar un archivo de una rama a otra.
5. Deshacer un commit localmente y uno remotamente.

Aunque este artículo está dirigido a personas con, al menos, conocimientos básicos de Git, haré lo posible por explicar los términos lo mejor posible.

1. Agregar Repositorios Remotos

Los repositorios remotos son versiones de nuestros proyectos que se almacenan en Internet o en cualquier otro lugar. Añadir un repositorio remoto es una forma de decirle a Git dónde está almacenado nuestro código.

Esto se puede hacer usando la URL del repositorio. Esta podría ser la URL de nuestro repositorio, el fork de otro usuario, o incluso un servidor completamente diferente.

Cuando clonamos un repositorio, Git implícitamente añade ese repositorio como el origen remoto, denominándose en Git, origin. Para añadir un nuevo repositorio Git, se utiliza este comando:

git remote add <nombre del repositorio> <url>

Donde <nombre del repositorio> es, precisamente, un nombre único que le hemos asignado, y url es la url del repositorio que queremos añadir.

Por ejemplo, si queremos añadir un repositorio denominado upstream, podemos escribir el siguiente comando:

git remote add upstream https://github.com/sarahchima/personal-website.git

Recuerda que tu nombre de repositorio puede ser cualquiera, sólo tiene que ser único, diferente a los nombres de los repositorios remotos que ya tienes. También debe ser algo que puedas recordar fácilmente.

Para ver la lista de URL remotas que has añadido, podemos ejecutar el siguiente comando:

git remote -v

Veremos una lista de los nombres y las URL remotas que hemos añadido.

¿Pero qué pasa si quieres cambiar estas URL remotas? Vamos a ver el siguiente comando de Git.

2. Cambiar los Repositorios Remotos

Hay varias razones por las que podemos querer cambiar una URL remota. Por ejemplo, recientemente tuve que pasar de usar URLs de https a URLs de ssh para un proyecto en el que estuve trabajando.

Para ello, utilizaremos el siguiente comando:

git remote set-url <nombre de repositorio remoto existente> <url>

Para que este comando funcione, el nombre de repositorio remoto tiene que existir previamente. Esto significa que no funcionará si no has añadido ese nombre remoto antes.

Por ejemplo, si queremos cambiar la URL remota de un repositorio denominado upstream, teclearemos:

git remote set-url upstream git@github.com:sarahchima/personal-website.git

Recuerda que debes verificar que el cambio se ha realizado tecleando la sentencia:

git remote -v

Ya tenemos suficiente acerca de repositorios remotos, vayamos con algo completamente diferente.

3. Borrar una rama local o remota

Una rama de trabajo, es una versión del repositorio que es diferente del proyecto principal de trabajo. Si no estás familiarizado con las ramas en Git, a lo mejor te interesa leer sobre ellas en Git antes de continuar.

Cómo borrar una rama local

Para borrar una rama local, lo primero es asegurarse de no estar en la mencionada rama. Si tienes que moverte a una rama diferente, usa el siguiente comando:

git checkout <nombre de la rama adonde mover>

Una vez estés en otra rama diferente, puedes proseguir a borrar la rama con el siguiente con el siguiente comando:

git branch -d <nombre de la rama>

Luego si queremos borrar una rama denominada fix/homepage-changes, haremos lo siguiente:

git branch -d fix/homepage-changes

Podemos teclear el comando git branch en la terminal para confirmar que la rama ha sido borrada satisfactoriamente.

Pero, a veces, lo que queremos borrar es una rama que ya hemos subido a un repositorio remoto, ¿Cómo podemos hacerlo?

Cómo borrar una rama remota

Para borrar una rama remota, usaremos el siguiente comando:

git push <nombre del repositorio remoto> --delete <nombre del branch>

Donde <nombre del repositorio remoto> es el nombre del repositorio donde se encuentra la rama a borrar.

Por ejemplo, si queremos borrar una rama denominada fix/homepage-changes del origin, teclearemos lo siguiente:

git push origin --delete fix/homepage-changes

La rama remota quedará borrada.

4. Fusionar un archivo de una rama a otra

A veces, queremos fusionar el contenido de un archivo específico de una rama a otra, lo que se conoce como fusionar. Por ejemplo, podemos querer fusionar del contenido de un archivo denominado index.html de la rama master de un proyecto a una rama denominada development del mismo proyecto. ¿Cómo lo podemos hacer?

Primero, nos movemos a la rama hacia la que queremos llevar el archivo, para ello usamos la opción checkout. Por ejemplo, para moverse a la rama development:

git checkout development

Ahora, fusionamos el archivo que traemos desde la rama master, usando el comando checkout --patch:

git checkout --patch master index.html

En caso de querer sobrescribir completamente el archivo, se omite la etiqueta --patch

git checkout master index.html

También se omitirá --patch si el archivo index.html no existe en la rama destino development.

5. Deshacer un commit

A veces, ya hemos realizado un commit, es decir, hemos confirmado los cambios, y nos damos cuenta de que es incorrecto por lo que queremos deshacerlo. Incluso hemos podido llevar los cambios a un repositorio remoto, pero queremos revertir la acción. ¿Cómo podemos deshacer o borrar ese commit? Comencemos deshaciendo un commit local.

Cómo deshacer un commit local

Una forma de deshacer un commit local es usando el comando git reset. Por ejemplo, si se quiere deshacer el último commit realizado podemos teclear:

git reset --soft HEAD~1

La etiqueta --soft mantiene los cambios realizados en los ficheros, sólo se revierte el propio commit. Sin embargo, si lo que se quiere es que tampoco se mantengan dichos cambios en los ficheros, se usará el flag --hard en su lugar, por ejemplo:

git reset --hard HEAD~1

Recuerda, usaremos el flag --hard solo cuando estemos seguros de que no necesitamos ninguno de los cambios.

Además, fíjate que HEAD~1 apunta al último commit realizado. Si lo que queremos es deshacer un commit anterior, podemos usar git reflog para obtener un log de todos los commits anteriores. Después, usaremos el comando git reset con el hash del commit a borrar (el hash es el número que está al comienzo de cada línea en el historial del log). Por ejemplo, si el hash del commit es 9157b6910, haremos los siguientes:

git reset --soft 9157b6910 

Cómo deshacer un commit remoto

Hay veces en las que se quiere deshacer un commit que ya hemos subido a un repositorio remoto. En estos casos, podemos usar git revert para deshacerlo de forma local y, posteriormente, subir este cambio a la rama remota.

Primero, buscamos el hash del commit usando git reflog:

git reflog

Luego, lo revertimos. Si asumimos que nuestro hash es 9157b6910, haríamos lo siguiente:

git revert 9157b6910 

Finalmente, subimos el cambio a la rama remota.

Sumario

En este artículo, hemos examinado los comandos para realizar las siguientes tareas en Git:

1. Añadir repositorios remotos.
2. Cambiar repositorios remotos.
3. Borrar una rama.
4. Fusionar un archivo de una rama a otra.
5. Borrar un commit local y remoto.

Tal vez algún día escriba más acerca de más tareas que se pueden realizar con Git.

Espero que hayas disfrutado del artículo, muchas gracias por leerlo.

Traducido del artículo de Sarah Chima Atuonwu - 5 Git Commands You Should Know, with Code Examples