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

 

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.ūüé∂

Nota: Historia escrita con un teclado configurado con el alfabeto, y comandos, en inglés.

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, y quisiera poder mostrar la capacidad del programa”, le√≠a.

Busqu√© mi listado de m√ļsica “escribiendo furiosamente”, me hice una dona en el pelo, me tom√© un poco de caf√©, y le di a las teclas de acceso directo a hacer b√ļsqueda en “Spotlight” [command + barra espaciadora ] para buscar “Terminal” y poder accesar las l√≠neas de comando del sistema operativo Mac.

Terminal al abrir

Note: Comandos van a estar entre corchetes ( [ ] ).

Comentario que no tiene que ver. Puedes encontrar la versión en inglés de esta historia aquí.

¬°Vamos a mandar!

“¬ŅD√≥nde estoy?” Son√≥ filos√≥fico cuando lo pens√©, pero en realidad, al entrar [ pwd ] ( Imprimir Directorio de Trabajo. pwd por sus siglas en ingl√©s) tengo una mejor idea de mi localizaci√≥n en el directorio. [ pwd ] es como mi mapa de Google para archivos, me ense√Īa en cu√°l directorio estoy.

Directorio actual

“!Excelente! Estoy en el directorio que quiero estar. Ahora, no recuerdo el directorio al que quiero navegar,” pens√© instant√°neamente.

Pero me contest√©: “[ ls ] (Listado del contenido del directorio) viene como anillo al dedo”. [ ls ] muestra el contenido dentro del directorio actual.

Archivos dentro del directorio /Users/yari

Mis pensamientos continuaron: “Ahora que recuerdo en cu√°l directorio copi√© el proyecto, necesito [ cd ] (cambiar de directorio) hasta llegar al a la copia.”

Entrando [ cd ], seguido por el nombre del directorio subsiguiente al que quiero navegar, separando cada nombre con una barra [ / ] continué y comencé a cambiar de directorio.

Cambiar de directorio al archivo src

Hasta que me encontr√© adentro del directorio src (directorio fuente). “¬°Espera un momento!, ¬Ņel paquete json (package.json) estar√° dentro del directorio src? ¬°D√©jame [ ls ] esta cosa!,” continu√©.

Contenido del directorio src

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

“Shhhhhhhhhh, ¬°estoy en una reuni√≥n!” dijo Ramona, mi colega.

Susurrado: “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.

[ cd ] sube un nivel en el directorio

Mi pensamiento dijo: “Antes de ejecutar el app, d√©jame aprovechar este momento para abrir el editor de c√≥digo Visual Studio Code”. As√≠ que ejecut√© el comando [ code . ] .

Comando [ code . ] utilizado para abrir el editor de código en el directorio raíz.

“Vale, ahora ejecutemos la aplicaci√≥n,” pens√©. Y con [ npm start ] se inicializ√≥ la aplicaci√≥n.

Momento de 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,” continuaron mis pensamientos.

As√≠ que es momento para: “La rutina git”.

“Pero antes ‚ėĚÔłŹ, d√©jame abrir una nueva pantalla, entrando [ command + t ] para abrir una pantalla nueva en el terminal, para que la aplicaci√≥n siga siendo ejecutada en la pantalla actual,” me dije.

Déjame decirte, lectora (or) de mi pensamientos, en qué consisten los Casi cuatro pasos de la rutina git. Eso sí, asumo que tienes conocimiento de lo básico en git. ¡No te preocupes si no sabes! Te comparto una breve introducción.

Casi cuatro pasos de la rutina git

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

Terminal luego de entrar git status

Si la rama no esta limpia, guarda los cambios

Segundo, he aprendido, luego de muchos intentos, 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 incluir√°s eventualmente en la rama m√°ster (“commit”).

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

Ahora, intentaré cambiar de la rama actual a la rama local de desarrollo para asegurarme de que tengo el contenido actualizado de la version remota de la rama de desarrollo.

Rama con cambios no “stashed” ni “commited”.
git stash – Cambios son “stashed” (guardados temporeramente)
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 del √°rbol de trabajo a la rama de desarrollo (“development”). [ git checkout development ] hace justo eso.

[ 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. sí que entro [ 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. El comando [ 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 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,” se√Īal√≥ un pensamiento con la voz del l√≠der del equipo.

“Me voy con fix/this-feature,” decid√≠. As√≠ que hice una entrada del comando [ git checkout -b ‘fix/this-feature’.

Crea una nueva rama y cambia el HEAD a la nueva rama

Para asegurarme de que no estoy en la rama de desarrollo, comando [ git status ].

[ git status ] para confirmar si estoy trabajando en la nueva rama

“S√≠, estoy en la nueva rama de trabajo,” me 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 que estaba pasando.

Ocurrió un error

Estaba envuelta mientras escribía código, y todo estaba funcionando bien hasta que algo pasó que 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 del comando [ control + c ]

… y volv√≠ a ejecutar el programa, pero no ayud√≥.

Así que le pedí ayuda a mi amigo Google, y me sugirió que localizara y matara el proceso en el puerto. Para lograr esto, necesito identificar el id del proceso que intentaba matar, y pues, terminarlo.

El comando para localizar y visualizar el listado de procesos trabajando en un puerto espec√≠fico es [ lsof -i:PORT ], donde [ lsof ] significa listado de archivos abiertos, [ -i ] es la lista de procesos y [ PORT ] es el n√ļmero de puerto a verificar. En este caso, queremos verifiar el puerto 3000, por lo que [ lsof -i:PORT ] realmente 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 ] para matar el proceso.

[ 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, y no puedo pensar cuando mi est√≥mago me grita,” pens√©.

“¬ŅAlmorzamos?” me pregunta Ramona.

“¬°Por favor!” respond√≠ y sal√≠ a almorzar como que sintiendome as√≠:

¬°Gracias por leer!

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

Artículos relacionados:

Los siguientes art√≠culos de CTRL-Y est√°n relacionados a este escrito. ¬°Deber√≠as de echarles un vistazo!:

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *