WEBos endiablados. El recetario web

Este es un repo de práctica para que las alumnas de la especialización web podamos practicar git y a trabajar con GitHub en modo colaborativo.

Contribuciones

Para participar en este repositorio, escribe a Clara por Discord o por el grupo, indicándole tu usuario de GitHub, para que te añada como colaboradora y puedas subir tu código.

Puedes ir viendo cómo va el recetario visitando el enlace en la sección about o pinchando en el icono de los huevos:

Inicio

Si en el futuro añadimos JavaScript, para poder ejecutar la aplicación será necesario tener instalado Node JS e instalar las dependencias locales ejecutando este comando en la terminal npm install.

Una vez hemos instalado las dependencias, el proyecto se arrancará ejecutando npm start, que abrirá una ventana del navegador y mostrará la página web (como haría el plugin de VSCode Live Server).

De momento podemos omitir este paso, porque sólo vamos a utilizar html y css para simplificar el las cosas.

Proceso

Abre VSCode y clónate el repo en tu Madre de los repos 😉 con git clone https://github.com/KeepCoding-BC-Glovo-Mujeres-en-tech/recetario-alumnas-web.git. Verás que tiene una carpeta images, otra de estilos, un archivo README y un index.html. La estructura principal ya está desarrollada.
Cuando quieras trabajar en el repo, empieza SIEMPRE haciendo git pull. Esto asegurará que te traes todos los cambios hechos por las compañeras antes que tú.
Crea una rama nueva con git branch <nombre-de-tu-rama> y siguiendo la estructura rama-de-nombre. Sitúate en esa rama con git checkout <nombre-de-la-rama>.
Edita el html siguiendo la estructura dada, poniéndole clases propias a tus elementos para ponerle un css a tu elección. Sobra decir que es imprescindible que tu receta tenga buena pinta.
Cuando hayas terminado, guarda los cambios y añádelos al staging area con git add <nombre del fichero> o git add -A (para añadir todos los cambios de una vez).
Haz un commit con git commit que siga unas buenas prácticas:

Que sea en inglés.
Que comience con un verbo en infinitivo.
Que sea descriptivo pero no excesivamente largo.
Que tenga una descripción más larga, en caso de ser necesaria.

Por ejemplo, Add new recipe o Write the recipe of paella.

Vuelve a hacer git pull, porque nunca se hace suficiente git pull antes de git push cuando se trabaja en equipo xD
Haz git push. Ya está subida tu receta a tu rama.

Ahora toca mergear.

PERO.

Si alguna compañera más ha trabajado en el repo a la vez que tú y ha pusheado a main y tú no te has dado cuenta, a lo mejor vuestras recetas se solapan y eso puede generar conflictos en el merge. Te recomiendo hacer git rebase main antes de nada para que, si alguien ha subido más cosas a main que no se han actualizado correctamente en tu rama, te los puedas traer.

Acuérdate de leer bien todo lo que te indique la terminal, suele darte las soluciones a errores y conflictos (y si sigues con dudas, ¡escribe a las compañeras! Siempre estamos ahí y seguro que alguna sabe ayudarte).

Merge

Existen numerosos tutoriales para enseñarnos a mergear, lo hemos visto en clase... Pero ponerlo en práctica da algo de miedo. "¡No me quiero cargar nada!" Da igual. Para eso está este repo, para practicar y poder cargarnos cosas. Mejor que se rompa este repo que el proyecto final. Recuerda que el merge ocurre en la rama en la que estemos posicionadas, por lo tanto, antes de mergear debemos volver a main con git checkout main. Y no olvides que los merges también son commits.

En modo rápido se puede resumir en dos acciones principales (tras haber creado una rama, escrito una receta y pusheado):

git checkout main

git merge <nombre-de-la-rama>

git push

Si, a pesar de haber hecho git rebase main desde tu rama y haberlo arreglado todo ahí, sigue habiendo conflictos, se abortará la acción y tendrás que solucionar el problema manualmente, aceptando o rechazando los cambios que vienen y subes. Puedes repasar esta parte revisando la sección 10 del curso de Alberto. Si estás en la terminal integrada de VSCode y hay conflictos, es posible que se abra el editor para que aceptes los cambios que desees. Léelos bien para no pisar el código de ninguna compañera y simplemente añadir tu receta a la lista, esto requiere práctica y para eso está este proyecto. Si no ves los cambios en el repositorio, quizá no hayas hecho git push tras el merge, revísalo.

Disclaimer

Esta web NO es responsive (para mantener el código lo más simple y corto posible, por el momento).
Las instrucciones de este README se irán actualizando para mejorar la experiencia de usuaria.