Una mañana en el terminal Mac de una desarrolladora de front-end

imagen principal de un mañana en el terminal de una desarrolladora front end

Aprende sobre algunos de los comandos de terminal que una desarrolladora front end utiliza para manejar git y el sistema operativo MAC. Puedes encontrar la versión de esta historia en inglés aquí.

Suena intro del Príncipe de Bel Air:

🎶Y esta es la historia, pongan atención, sobre el terminal de esta desarrolladora y su manifestación. Cambios de arriba a abajo en código se suele hacer, así que narro una mañana en el terminal para aprender.🎶

Un mensaje de Slack apareció. “¿Puedes verificar qué es lo que esta causando este error? Tengo una reunión importante con un cliente a las 3 pm. Quisiera poder mostrar la capacidad del programa”, leía.

Busqué mi listado de música “Escribiendo furiosamente”. Me hice una dona en el pelo. Tomé un poco de café. Accedí “Spotlight” presionando el comando [command + barra espaciadora ] y busqué el terminal. Así accedí a las líneas de comando del sistema operativo Mac ya que mi teclado esta configurado con el alfabeto y comandos en inglés.

Comandos en el terminal Mac

“¿Dónde estoy?” Sonó filosófico cuando lo pensé. En realidad, lo que necesito es entrar el comando [ pwd ] para imprimir en el terminal Mac mi localización en el directorio. [ pwd ] es como un mapa de Google para archivos. Me enseña en cuál directorio estoy.

Terminal MAC imprimiendo directorio actual de una desarrolladora front end — Directorio actual

“!Excelente! Estoy en el directorio que necesito. Pero, no recuerdo el directorio al que quiero navegar,” me dije. Aunque en seguida comenté: “[ ls ] viene como anillo al dedo.”

[ ls ] muestra el listado del contenido dentro del directorio actual.

Terminal MAC imprimiendo archivos dentro del directorio /Users/yari — Archivos dentro del directorio /Users/yari

Mis pensamientos continuaron: “Ya recuerdo en cuál directorio copié el proyecto. Ahora necesito cambiar de directorio hasta llegar a la copia.”

Comencé a cambiar de directorio. Entrando [ cd ] seguido por el nombre del directorio subsiguiente al que quiero navegar. Separando cada nombre con una barra [ / ].

Terminal MAC con instrucciones que cambian de directorio: Projects/practice/woocommerce-app/src/ — Cambiar de directorio al archivo src

Hasta que me encontré en el directorio src (directorio fuente). “¡Espera un momento!, ¿el paquete json (package.json) estará dentro del directorio src? ¡Déjame [ ls ] esta cosa!,” continué.

Terminal MAC imprimiendo contenido del archivo src — Contenido del directorio src

“Nope, no hay forma de que pueda ejecutar el programa desde este directorio,” me dije. Esta vez, en voz alta.

“Shhhhhhhhhh, ¡estoy en una reunión!” dijo Ramona, mi colega.

Regresando al pensamiento: “Necesito subir un nivel en el directorio, pero ¿cómo?”

Para eso es que se utilizan los dos puntitos: [ cd .. ]. Dos puntos luego de cd significa subir un nivel en el directorio.

Terminal MAC con comando para subir un nivel en el directorio — **[ cd ]** sube un nivel en el directorio

Pensé: “Antes de activar el app, déjame aprovechar este momento para abrir el editor de código Visual Studio Code”. Así que ejecuté el comando [ code . ]

Terminal MAC con comando para acceder el editor de código — Comando **[ code . ]** utilizado para abrir el editor de código en el directorio raíz.

“Vale, ahora activemos la aplicación,” pensé. Y con [ npm start ] se inicializó la aplicación.

Momento de comandos git

“Antes de hacer algo, necesito asegurarme de que tengo una copia local de la versión mas actualizada del programa que esta en desarrollo,” me dije.

Así que es momento de: “La rutina git”.

“Pero antes ☝️. Déjame abrir una nueva pantalla,” me dije.

El comando [ command + t ] abre una nueva en el terminal Mac. Así la aplicación sigue corriendo en la pantalla actual.

A continuación, detallo en qué consisten los Casi cuatro pasos de la rutina git. Asumo que tienes conocimiento básico en git. ¡No te preocupes si no sabes! Te comparto una breve introducción.

Casi cuatro pasos de la rutina de comandos git

Primero, verificar el estado de árbol de trabajo local. Porque, francamente, siempre olvido que estaba haciendo. Así que entro el comando [ git status ].

Terminal MAC luego de entrar 'git status' — Terminal luego de entrar **git status**

Guarda los cambios si la rama no esta limpia

Segundo, luego de muchos intentos he aprendido que git no cambia de rama si hay algún cambio en el código y estos cambios no están guardados temporeramente (“stashed”) ó si los incluidos en la rama deseada (“commit”).

Así que, procedí a entrar el comando [ git stash ] para guardar los cambios de forma temporera.

Ahora, intentaré cambiar de la rama actual a la rama local de desarrollo. Tengo que asegurarme de que la rama local de desarrollo tenga la versión más actualizada de la versión remota.

Terminal señalando rama con cambios no "stashed" ni "commited". — Rama con cambios no “stashed” ni “commited”.

Entrada 'git stash' — **git stash –** Cambios son “stashed” (guardados temporeramente)

Terminal luego de entrar git status para verificar el estado de la rama — Verifica el estado de la rama para confirmar que la rama esta limpia

Cambiar rama local

Ahora que la rama esta limpia, necesito cambiar el HEAD a la rama de desarrollo (“development”). [ git checkout development ] hace justo lo que necesito.

Terminal MAC con entrada que apunta la cabeza del árbol (HEAD) hacia la rama de desarrollo — **[ git checkout development ]** cambia el HEAD del árbol de trabajo a la rama de desarrollo (“development”).

Actualizar la rama de desarrollo

Finalmente, actualiza la rama local de desarrollo con la rama de desarrollo del repositorio remoto. Así que entro [ git pull origin development ].

Comando 'git pull origin development' — El comando **[ git pull origin development ]** actualiza el contenido de la rama de desarrollo en el repositorio remoto a la rama de desarrollo local

El comando [ git pull ] busca el contenido de la rama de desarrollo en el repositorio remoto y lo une el contenido remoto con el contenido de la rama local. Por otro lado, [ origin development ] se refiere a la rama que el sistema va a buscar para actualizar. “Origin” se refiere al repositorio de origen, en este caso el remoto. “Development” se refiere al nombre de la rama del árbol de trabajo.

Luego de la rutina de comandos git

De este punto en adelante, mis comandos git varían dependiendo de lo que tengo que hacer en el día. En esta ocasión, tengo que encontrar la causa de un error y solucionar ese problema. Por lo que, tengo que crear una nueva rama para ejecutar los cambios en la nueva rama. Eso require que cambie el HEAD del árbol de trabajo de la rama local de desarrollo (“development”) a la rama creada.

“¿Cómo se va a llamar la rama nueva?” comenzaron pensamientos nuevamente.

“Algo sencillo, directo al grano,” también pensé.

“Me voy con fix/this-feature,” decidí.

Así que hice una entrada del comando [ git checkout -b ‘fix/this-feature’ ].

Terminal MAC creando nueva rama con el comando 'git checkout -b 'fix/this-feature'' — Crea una nueva rama y cambia el HEAD a la nueva rama

Ejecuto el comando [ git status ] para asegurarme de que no estoy en la rama de desarrollo.

Comando que verifica el estado de la rama actual — **[ git status ]** para confirmar si estoy trabajando en la nueva rama

“Sí, estoy en la nueva rama de trabajo,” confirmé.

Luego, necesito unir la rama actualizada con la nueva rama para que la nueva rama de trabajo esta al día con la rama de desarrollo actualizada. El comando [git merge development ] ejecuta esta unión.

Few. Me alegra haber sacado eso del medio. Esos pasos, justo hasta cambiar desde la rama de desarrollo a la rama nueva o retrabajada, siempre me ponen nerviosa.

“¡Ahora, sí estoy lista para capturar ese error!” Y así fui a la aplicación y a mi editor de código a averiguar qué estaba pasando.

Ocurrió un error

Estaba envuelta mientras escribía código y todo estaba funcionando bien. Pero, algo pasó y un error confuso comenzó a aparecer.

“Otra aplicación esta usando ese puerto”, leía pero en inglés.

Como excelente depuradora, detuve el programa de la aplicación con [ control + c ] .

Terminal luego de hacer la entrada de [ control + c ] — Terminal luego de hacer la entrada del comando **[ control + c ]**

Volví a ejecutar el programa, pero no ayudó.

Así que le pedí ayuda a mi amigo Google. Me sugirió localizar y terminar el proceso en el puerto.

El comando en el terminal Mac para localizar y visualizar el listado de procesos trabajando en un puerto específico es [ lsof -i:PORT ]. [ lsof ] significa listado de archivos abiertos. [ -i ] es la lista de procesos. [ PORT ] es el número de puerto a verificar. En este caso, queremos verificar el puerto 3000, por lo que [ lsof -i:PORT ] se entra en el terminal como [ lsof -i:3000 ].

Lista de procesos activos en el puerto 3000

Luego de localizar el proceso que quiero terminar, procedo a entrar el comando [ sudo kill -9 PID ].

Comando que termina el proceso con PID 15010 que esta activo en el puerto 3000 — **[ sudo kill -9 15010 ]** termina el proceso con PID 15010 que esta activo en el puerto 3000

Estoy lista para reinicializar el programa de la aplicación.

“Grrrrrlrllrrlrlr” gruño mi estómago. “Estoy hambrienta. No puedo pensar cuando mi estómago me grita,” pensé.

“¿Almorzamos?” me pregunta Ramona.

“¡Sí!, por favor.” respondí y salí a almorzar así:

¡Gracias por leer!

Puedes obtener notificaciones de nuevos artículos directamente a tu buzón electrónico registrándote en el siguiente enlace.

Punto aparte – Cheat sheets y un listado de reproducción

Disfrute de estas hojas de anotaciones o “cheat sheets” que incluye los comandos usados a través de la historia.

Escribí esta historia escuchando el nuevo álbum de Four Tet, Sixteen Candles de fondo. Fué lanzado recientemente. El principio de la primera canción establece un ánimo increíble y sutil para tener un día productivo. A sido mi álbum a escuchar durante este periodo de cuarentena.