Conectando GitHub a proyectos de JavaScript

Les dejo una Cheat Sheet con algunos de los comando más usados en git.
También les dejo el link al pdf de GitHub training por si lo quieren descargar.

Hola amigos,

Con los conocimientos del curso hasta este momento, pude realizar este proyecto personal de una tabla periódica interactiva.

https://christianlarrabure.github.io/periodic-table/

La información está guardada adentro del Javascript en una variable. Idealmente, estaría en una base de datos o almenos en un CSV (en mi opinión), pero por el momento no sé hacer eso con javascript y quise utilizar los conocimientos del curso.

La web es 100% responsive, adecuandose a las necesidades del usuario en movil (con una animación CSS al hacer click).

La única ayuda externa que utilicé fue para identificar como activar el efecto :hover en móvil, donde descubrí la siguiente función:

document.addEventListener("touchstart", function(){}, true);

La verdad no tengo ni idea por qué ese código funciona (¿algún capo sabe?), pero en resumen hace que el “click” del usuario movil simule el hover.

Las animaciones las aprendí en los cursos de transición que están en la Escuela Web.

Me comentan qué les parece!

Este es el repositorio: https://github.com/christianlarrabure/periodic-table

Perdón por el archivo javascript, es una madre de 1000 lineas porque puse toda la info ahí.

el Curso Profesional de Git y Github de Freddy es tan bueno que me tengo mucha fe 💚

Cosas que debes de saber:
Antes estaba el término “master” (como el Profe. Juan lo tiene en su PC), por cuestiones racismo y evitar el hacer apología a la esclavitud, cambió a “main”.

Puedes utilizar en la terminal los siguientes dos comandos para agregar archivos:

git add . <—esto de aquí es un punto
git add -A
Cualquiera de los dos agregan todos los archivos de esa carpeta.

Según mi investigación de 2 minutos, .DS_store solo sirve en macOS y unix para que el Finder sepa que onda con esa carpeta. En linux y windows es totalmente inservible.

**!OJO! **
Para está clase necesitan ya tener configurado su entorno de trabajo con Git Hub. Por lo menos para WINDOWS necesitan haber instalado previamente Git Bash, que por lo que entiendo en la términal con la que trabaja Git Hub, WINDOWS por defecto trae PowerShell (de hecho esa términal aparece automáticamente en VS Code) y no funciona con Git Hub. En está clase del Curso Profesional de Git Hub explican la instalación: .
También necesitan haber configurado su username y su email, en está clase explican está parte:
Siéntanse libres de corregirme si dije algo incorrecto jaja. ILY

Les comparto una página demasiado útil para aprender git:
https://learngitbranching.js.org/
Les va a yudar muchísimo no solo a utiliza comandos de git si no a entender como se mueve.

Git sigue y seguirá siendo la mejor herramienta para versionar código y recordar lo importante de revisar los cambios antes de agregarlos a staging y enviarlos al push 😉

Hola quise compartir mi enlace ya que no tengo seguidores y se ve muy huerfanito como yo.

https://github.com/GerryMx-Aztrorghea/calculadoraBasicaJavaScript

Muy util para mi el tip del .gitignore:

• Primero crear el .gitignore
• Incluir en el todo lo que se desee ignorar
• Hacer add solo del .gitignore antes de agregar todos los archivos del proyecto!!! De esta manera No se incluiran los archivos no deseados. (No entendia porque a pesar de tener un gitignore me agregaba los files que no queria)

Antes yo hacia $ git init… y luego un $ git add . (Lo cual me anadia todo automaticamente)

😄

Hola amigos, puede que hayan intentado crear el README desde github y luego conectarlo a su repositorio en la terminal, cuando intentan hacer push no les va a dejar debido a que no son historias que no se han relacionado, por lo que para que puedan hacer un push a su repositorio tienen que hacer lo siguiente

• Como aprendimos con el profesor Freddy en el curso profesional de git y github. Primero hay que hacer pull siempre antes de hacer push (por buenas prácticas) para que nuestra versión en nuestro repositorio esté a la par con el repositorio remoto.
• Después de hacer el pull, una vez que ya esté nuestro archivo en nuestro repositorio en la terminal, ahora sí podemos hacer push

Pero hay algo que sucede, cuando hacemos git pull de un repositorio remoto en el cual no hemos trabajado antes, nos da un error, el cual nos rechaza que se haga el pull ya que son historias no relacionadas.

Para arreglar eso lo único que hay que hacer es Permitir el merge de historias no relacionadas con nuestro git usando la siguiente línea de código

git pull origin main --allow-unrelated-histories

Así tal cual, hecho eso verán que sí les permite hacer el pull desde el repositorio remoto y posterior a eso ya pueden hacer push tranquilamente hacia github desde su terminal

Espero les sea de ayuda, un saludo ❤️

Muy recomendado el curso de freddy de git y github, en mi caso prefiero usar la terminal con wsl

Si agregamos un README o gitignore en la creación del repositorio en GitHub, y en nuestro repositorio local ya hicimos un commit, nos puede salir un error como el que menciona Juan, concretamente se reusar a fusionar repositorios con “historias” distintas. Una solución a esto puede ser :

git pull origin master --allow-unrelated-histories

O realizar el pull antes de hacer el commit.

Hola a todos. Si a alguno de ustedes les sale un mensaje como “Permission Denied (Publickey)”, (tal mensaje me apareció a mí la primera vez), tendrán que hacer los siguientes pasos antes de poder publicar el proyecto de javascript a github.

1. Abran Git Bash en la carpeta donde tienen guardado lo realizado hasta el momento, y a partir de ahí tienen que desvincular el correo y usuario y los “exclude-files” que tienen en su repositorio con un “git config”, para cada uno. En este caso esos serían:

- "git config --global --unset core.excludesfile"
- "git config --global --unset user.email"
- "git config --global --unset user.name"

1. Deben registrar su username y su email que usaron al momento de registrarse en GitHub. Antes de ello deben chequear su global list. Para ello deben ejecutar los siguientes comandos.

- "git config --global --list"
- "git config --global user.email" "(tienen que usar el email con el que se registraron en github)"
- "git config --global user.name "(tienen que usar el username con el que se registraron en github)".

1. Tienen que ir al “Disco Local”, con el cual su PC está operando, luego van a usuarios, y seleccionan en donde están ahora. Una vez allí, deben ir a la carpeta “ssh”, y deben borrar el archivo “known-hosts” que se encuentra, y vacíen la carpeta (pero sin borrarla).

2. Vuelvan al Git Bash (donde se encuentra la carpeta donde tienen todo lo avanzado hasta el momento en este curso). A partir de ahí generaremos un nuevo key, el cual se deberá poner en la cuenta de GitHub. Para generarlo deberán ejecutar el comando “ssh-keygen”. NOTA: Si les piden archivo para guardarla, o algún passphrase, pongan enter a todos e ignorenlo.

3. Cuando ya el key está generado, vayan al directorio donde se encuentra en la carpeta “.ssh”.

4. Para copiar el key, vayan a “Windows PowerShell” o abran el “Simbolo del Sistema”, y ejecuten este comando:

Get-Content ~/.ssh/id_rsa.pub | Set-Clipboard

1. Una vez hecho eso, abran el “Portapapeles” pulsando “Windows logo key + V”. El sshrsa deben copiarlo y vayan al Github, y en su cuenta abran “Settings” en la sección “SSH and GPG keys”. Pulsen “New SSH Key”, y copien en “Key” el ssh-rsa obtenido. (Es recomendable que de título pongan Windows), y lo añaden.

2. Una vez hecho eso, ya pueden crear el repositorio o conectar el proyecto que tienen de dos maneras, ya sea SSH o HTTPS.

3. Si en todo caso, les sale mensaje como:
   The authenticity of host can’t be established.
   ECDSA key fingerprint is " “. Are you sure you want to continue connecting (yes/no)?”, simplemente pongan “yes”.

4. Y listo, ya pueden conectar sus proyectos de JavaScript a “GitHub” sin problemas.

Espero haberles ayudado con ello.

Regrese del curso Profesional de Git y Github de Freddy Vega.
Se los recomiendo. Es muy completo.

¡Hola a todos!

Estoy emocionado de presentarles un recurso que he estado desarrollando con mucha dedicación y esfuerzo: un completo y detallado Manual de JavaScript Intermedio que está alojado en GitLab.

Este manual es un recurso increíble para todos los que están buscando elevar sus habilidades en JavaScript al siguiente nivel. No importa si ya tienes algo de experiencia con JavaScript o si eres un principiante entusiasta, este manual cubre una amplia gama de temas que te ayudarán a comprender y dominar aspectos intermedios de este poderoso lenguaje de programación.

¡Y la mejor parte? Este manual es completamente gratuito y abierto a la comunidad. Esto significa que puedes contribuir a su mejora y también compartirlo con otros que podrían beneficiarse de él.

¿Estás listo para llevar tu habilidad en JavaScript a un nuevo nivel? Visita https://gitlab.com/javascript-manuals/intermedio y comienza tu viaje hacia la maestría en JavaScript.

les comparto la pagina de los gitignore:
https://www.toptal.com/developers/gitignore

Les quiero compartir mi experiencia con esta clase en especifico y como solucione un inconveniente que tuve. Partamos de que esta es la primera clase, con un pc nuevo al cual le instale ubuntu y que dedicare solo para aprender a programar… Dicho esto, les cuento, hice todos los pasos descritos en la clase, y al querer hacer push obtenía el siguiente error.

fatal: error remoto:
is not a valid repository name

Verificaba el branch y estaba correcto, al igual que el origin por lo que no lograba obtener una idea clara de que ocurría. Luego recordé que aun no había copiado mi key del nuevo pc al github… por lo que decidí hacerlo, luego volví a intentarlo y obtuve el mismo error, ya confundido y sin saber que hacer, me dí a la tarea de buscar en internet y vi un aporte que me sirvio muchisimo, en el cual se elimina el origin para poder crear uno nuevo, ya que al momento de crear otro me saltaba la alarma de que ya estaba creado. Los comandos son los siguientes:

git remote -v Para listar los remotos que tengo
git remote rm origin Para eliminar mi origin
git remote add origin … Para añadir nuevamente mi origin

Entre la eliminación y la creación es recomendable volver a listar nuestro remoto para corroborar que si se realizó nuestro comando de eliminación, lo mismo después de la creación. Una vez hecho esto volví a hacer push y todo funciono de maravilla, espero esto les sea de utilidad a personas que se puedan encontrar con el mismo error.

Recuerdo que cuando empecé con git tenía guardado una imagen como esta porque siempre se me olvidaba cómo era. Por si alguien le sirve:

Muchos pro tips en esta clase. Espero recordar todo

🔄 Archivos del Proyecto 🔄

Pasos 📌

• • En la terminal, dentro de la carpeta del proyecto llamado curso-js-practico (para devolverse a esa carpeta estando en el otro mini-proyecto se ejecuta: cd ..), se crea otra carpeta para el mini-proyecto llamada manipulacion-dom-basica ejecutando:

take  manipulacion-dom-basica

• • Abrir el editor VS Code ejecutando:

code .

• • En el menú izquierdo de VS Code, crear un nuevo archivo llamado index.html, el código queda:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Manipulación del DOM básica - Curso Práctico de JavaScript</title>
</head>

<body>
	<h1>Manipulación del DOM básica</h1>
	<form id="form">
		<input id="calculo1" placeholder="Escribe algo aquí" />
		<input id="calculo2" placeholder="Escribe algo aquí" />
		<button type="button" id="btnCalcular">Calcular</button>
		<p id="result"></p>
	</form>
	<script src="./script.js"></script>
</body>

</html>

• • Crear otro archivo llamado script.js, el código queda:

const h1 = document.querySelector('h1');
const form = document.querySelector('#form');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');
const pResult = document.querySelector('#result');

// form.addEventListener('submit', sumarInputValues);

// function sumarInputValues(event) {
// // console.log({event});
// event.preventDefault();
// const sumaInputs = input1.value + input2.value;
// pResult.innerText = "Resultado: " + sumaInputs;
// }

btn.addEventListener('click', sumarInputValues);

function sumarInputValues(event) {
	// console.log({event});
	// event.preventDefault();
	const sumaInputs = input1.value + input2.value;
	pResult.innerText = "Resultado: " + sumaInputs;
}

• • Al momento de subir los archivos a github, debemos primero determinar qué archivos se tiene en la carpeta del proyecto, para ello ejecutamos:

ls -lf

• • En VS Code se crea el archivo .gitignore y se agregan con un punto antes del nombre del archivo que se quiere ignorar, por ejemplo si se quiere ignorar el archivo DS_Strore, dentro de .gitignore se coloca:

.DS_Store

• • Hay un sitio web que genera plantillas de .gitignore (enlace: aquí), se puede poner en el buscador antes de crear la plantilla palabras como el SO: macOS, Windows, Linux,el editor que se está usando: VisualStudioCode, otros importantes como: Node. Luego se da en el botón verde de “Create”. Aparece una plantilla con los requerimientos que enviamos, ese código del .gitignore quedó como aparece en el enlace: aquí.
   
• • Para conectar gitHub con el proyecto local, se debe tener una cuenta en gitHub (enlace: aquí).
   
• • En github creamos un nuevo repositorio (buscar el menú desplegable al lado derecho y seleccionar “Create a new repository”), se va agregando las configuraciones como el nombre, la descripción, seleccionar de tipo público, la licencia de tipo MIT y finalmente se da click al botón verde para crear el repositorio.
   
• • En la terminal dentro del proyecto a subir a github, ejecutamos los siguientes comandos:

      echo “# manipulacion-dom-basica” » README.md
      git init
      git add README.md
      git commit -m “first comiit”
      git add .gitignore
      git status

• • Si después de dar git status aparecen archivos que no se quiera subir, se debe asegurar dentro del .gitignore que después del nombre del archivo a ignorar no tenga /*, por ejemplo si se tenía primero .vscode/* queda así: .vscode
   
• • ◦ Luego se procede agregar de nuevo el .gitignore ejecutando en la terminal: git add .gitignore
     
• • Una vez confirmados los archivos a subir, se ejecuta:

      git add -A
      git commit -m “Agregar .gitignore y primeros archivos del proyecto”
      git branch -M main
      git remote add origin git@github.com:nombreUsuario/nombre-proyecto.git
      git push -u origin main

• • En gitHub debe aparecer el repositorio al recargar la página.
   

Agregando proyectos de JavaScript a GitHub:

1 - Crear un Repositorio en GitHub:

• Inicia sesión en tu cuenta de GitHub y crea un nuevo repositorio llamado “mi-proyecto-js”.
• Selecciona las opciones adecuadas, como si el repositorio será público o privado, y si deseas agregar un archivo README o una licencia.
  
  

2 - Clonar el Repositorio en tu Máquina Local:

Abre tu terminal o línea de comandos:

# Navega al directorio donde deseas clonar el repositorio
cd ruta/del/directorio

# Clona el repositorio
git clone https://github.com/tu-usuario/mi-proyecto-js.git

3 - Desarrollo y Confirmación de Cambios:

Supongamos que tienes un archivo llamado app.js donde realizas cambios.

// app.js
console.log("Hola, mundo!");

# Verifica el estado de los archivos
git status

# Agrega los cambios para la confirmación
git add app.js

# Realiza una confirmación
git commit -m "Agregado mensaje de saludo en app.js"

4 - Subir Cambios a GitHub:

# Obtén los últimos cambios del repositorio remoto (para evitar conflictos)
git pull origin main

# Sube tus cambios al repositorio remoto
git push origin main

5 - Colaboración:

Invita a un colaborador a tu repositorio y sigue los pasos anteriores para que puedan clonar el repositorio, hacer cambios y enviar solicitudes de extracción.

6. Actualización del Repositorio Local:

# Obtén los últimos cambios del repositorio remoto
git pull origin main

Estos ejemplos te guían a través del proceso de conectar tu proyecto de JavaScript a GitHub, hacer cambios, confirmarlos, subirlos y colaborar con otros desarrolladores. Recuerda que los comandos y las URL específicas pueden variar según tu configuración y tu proyecto.

Espero que les haya sido de utilidad. 👨‍💻

En mi caso mi repositorio local tiene por defecto la rama main y no master, no se si es por la versión de git instalada

Mas que un aporte una felicitación al Profe JuanDC que clase maestra por favor, una de las mejores que he visto hasta ahora en Platzi

Mijito, mijita eres un poquito …. No sé por que te gusta sufrir 🤣🤣🤣🤣🤣

Git ignore.io (Palabras clave)

les comparto una pagina para usar GIT
https://www.gitfluence.com/

Apuntes / Resumen / Notas Git y GitHub

Link resumen en GitHub 🔥🐺

Al 16 enero del 2023, las instrucciones han cambiado a :

echo “# manipulacion-DOM-basic” >> READM…
git init
git add READM…
git commit -m "first commit"
git branch -M master
git remote add origin …
git push -u origin master

Si que se aprende con el profesor…

para subir nuestro proyecto a github como esta clase es necesario descargar e instalar git aquí hay un tutorial https://platzi.com/clases/1557-git-github/19933-instalando-git-y-gitbash-en-windows/

Me siento muy bien al subir mi primer proyecto a GitHub, en esta clase aprendí muchísimo . gracias juan DC y gracias platzi

Que los Dioses del Internet te acompañen. Jajaja santo Gpt-3.

Paré aquí mi aprendizaje, tomé el curso profesional de Git y GitHub de Freddy, y buuuuuum, todo muuuucho más fácil!!

git push set upstream flag

Que buen dato te pasaste con el gitignore!!!

Les dejo mis apuntes personales sobre GIT, por si acaso 😉💚:
https://www.evernote.com/client/web?login=true#?n=ec019eca-743d-04cd-cd09-b555ad7cd096&

🚀 Hola platzinautas! 💚
Bienvenidos a este bonito camino, yo ya lo he terminado.
Este es mi github donde estuve trabajando este proyecto, espero les sirva!
Hay apuntes con todo el cariño. Deja tu estrellita 💫

Muy buenos tips tiene esta clase, varios de ellos los habia aprendido a la mala, como subir la carpeta de node_modules, ya despues no la pude quitar del repositiorio, lo impotante es aprender de los errores.

Jajaj una vez no ignore el node_modules y si que se tardó la terminal en agregar toditos esos archivos xdxd

Dejo este video para aquellos (es mi caso)se les paso que para hacer push debiamos generar un token para lograr hacer push y conectar en definitiva Git y Github https://www.youtube.com/watch?v=2nzOI-ynXF4&ab_channel=TodoCode

Espero les sirva 😄

Me gusta usar GitHub para que mis proyectos se almacenen en la nube y no ocupen espacio en mi computadora

les recomiendo hacer el curso de github de acuerdo a lo que he escuchado , se usa muchísimo

Genial esta clase. Desde que vi el curso de Git lo he venido aplicando full 💚

Me agrada mucho saber que he estado haciendo las cosas correctamente, porque he venido subiendo todas mis actividades a repositorios especificos en mi github de cada curso. En esta clase aprendí como es un .gitignore 😄

Hola a todos mi terminal dice que se niega a fusionar historias no relacionadas cuando hago el push. algún comando que force esta tarea.

UUy mi gente casi no la logro, había olvidado mi contraseña para hacer push :v

Simplemente crea un .gitignore xd

Me perdí un poco… voy a repasr las notas del Curso de Git y GitHub😂

**Hola! **La carpeta “.DS_Store” es un archivo oculto que se utiliza en el sistema operativo macOS para almacenar información sobre el aspecto y la configuración de una carpeta.

Cuando abres una carpeta en una Mac, el sistema operativo puede crear automáticamente un archivo “.DS_Store” en la carpeta para almacenar información como la posición y tamaño de la ventana de la carpeta, la ubicación de los iconos y las vistas personalizadas. Esta información ayuda a mantener la apariencia y configuración de la carpeta consistente cada vez que se abre.

Aunque el archivo .DS_Store no es esencial para el funcionamiento del sistema operativo macOS, puede ser útil para los usuarios que desean personalizar la forma en que se muestran los archivos y carpetas en su computadora. Sin embargo, en la mayoría de los casos, los usuarios no necesitan interactuar con estos archivos y pueden ignorarlos sin problema.

Hola comunidad!
Al realizar el Curso Profesional de Git y GitHub creé un repositorio completo con los comandos más importantes que debemos saber para saber usar esta herramienta esencial en nuestra carrera como desarrolladores. A continuación se las dejo y espero les sea de gran utilidad (no duden en contactarme si tienen cualquier duda al respecto, aunque sé que no lo necesitarás hacer porque ya tomaste el curso y eres un/una crack!):

https://github.com/andrescaro16/Comandos-Git-GitHub

Si te ha sido de utilidad, agradecería que le dejaras una estrellita al repositorio 🤍

Aún no he tenido la oprtunidad de ver el curso de Git pero tenía conocimientos básicos de crear y subir un repositorio en Github, pero el profesor mostró unos detalles que no los tomaba en cuenta como el .gitignore y verificar que archivos son los que se debería subir a un repositorio. Mis respetos y gracias por compartir tus conocimientos.

Con el profesor, Juandc es diversion pura aprender a programar, excelente…

Tendré que dejar de posponer el curso de git…
Nos vemos cuando lo termine 😃

Algo muy bueno que pueden hacer es crear muchos aliases para git en la terminal, a mi me ha servido mucho para agilizar mi trabajo y mi work flow en git, aquí les dejo la referencia que yo usé

https://github.com/Bash-it/bash-it/blob/master/aliases/available/git.aliases.bash

creando un gitgnore completo

git!

JAJA.
No se porque te gusta sufrir, dice Juan, papi, respeta el Flow.
Si ubicas que estamos estudiando programación.

Si en caso creaste el README en el GitHub

Cuando hagas pull, quizás te de un problema, así que el código que siempre me saca de esa es:

git pull origin main --allow-unrelated-histories

Excelente dato de agregar primero el .gitignore.

https://gilbertoesp.github.io/
Los invito a pasar por mi primer portafolio, próximo a renovarse agregando el nuevo proyecto.

git add .
agrega todo

Me agrada este tipo… jejeje

Mis apuntes! 😄

APUNTES

Dejo mi repo de Github con el trabajo hecho hasta el momento en este curso. Incluido el test de inicio con todas sus respuestas en una carpeta interna:

https://github.com/Mgobeaalcoba/JavaScript_Practico

La herramienta Gitignore no la uso cuando voy a subir los repositorios, creia que entre mas archivos subía a GitHub de mi proyecto era mejor.

Dejo este video para aquellos (es mi caso)se les paso que para hacer push debiamos generar un token para lograr hacer push y conectar en definitiva Git y Github https://www.youtube.com/watch?v=2nzOI-ynXF4&ab_channel=TodoCode

Espero les sirva 😄