Cómo subir proyecto desde consola a Gitghub

Para subir proyecto desde consola a github:

    git init

  git add .

git commit -m "first commit"

git remote add origin https://github.com/NOMBRE_USUARIO/NOMBRE_PROYECTO.git

git push -u origin master




Comandos útiles en Git

Master  es ahora main

$git    Comandos  útiles

$git --version versión git 

$git init  Inicia git

$git add  <file> Añade archivo

$git commit -m "msj"  mensaje para mantener versiones de proyecto

$git add .  agrega todos los archivos de la carpeta   (se hace  cuando se realiza cambio en archivo)

$git commit -m "cambios a v1"

git commit -am "cambios"   así no se pierde cambios

$git status  Status de la base de datos

$git show  Muestra todos los cambios hechos   $git show <archivo>

$git log <file>   Historia entera (cambios) de un archivo 

$git  push   Paso final  para llevar este a un archivo remoto

$git fetch    trae al repositorio local peor no lo copia

$git merge copia en archivos en versión actual

$git pull copio repositorio local bd y directorio (fetch y merge se resumen en este)

$ git config -l   lista  para ver usu y  correo

git config --global user.email "miemail"  configura el correo

Comandos útiles en terminal GIT

cd/mnt/e   cambia  ruta  de directorio

cd..  retrocede una carpeta

cd  U(la letra que queramos) + boton tab  busca archivos por inicial de la letra   este sirve en GIT bash

mkdir <nomproyecto>   crea carpeta

touch <nombre> crea archivo  vacío  .txt por ej

cat <nombre>  muestra contenido

history  muestra historial de comandos escritos . Luego  !#  para seleccionar el numero (# el num que uno decida  escoger para comando)

rm    borra archivo  

rm --help  muestra lista comandos (aplica para todos)

esc+shift+z+z  guarda  cambio  cuando doy  git commit  para  añadir un mensaje

git diff  commitcode   commitcode (se compara los dos códigos  de versiones de git deseadas)

git rm: este comando necesita alguno de los siguientes argumentos para poder ejecutarse correctamente: - git rm --cached: Mueve los archivos que le indiquemos al estado Untracked.

 - git rm --force: Elimina los archivos de Git y del disco duro. Git guarda el registro de la existencia de los archivos, por lo que podremos recuperarlos si es necesario (pero debemos usar comandos más avanzados).

git reset <code> --hard  todo vuelve al estado anterior

git reset <code> --soft  volvemos a versión anterior  pero no borra lo que esta en stage

git reset HEAD Saca archivos del área de staging

git log --stat  cambio especifico

q   sirve para salir cuando  queda  :

git checkout main para pasar a master en git o git checkout cabecera por ejemplo pasa a otra branch

Github

git remote add origin <url proyecto github>  añade url a git

git  remote   (debe salir origin)

 git remote -v   para ver url fetch y push

git push origin main  enviar  rama master    de ahí  ingreso token

git pull origin main --allow-unrelated-histories   así permite fusionar lo que vi con rama local

git branch -m main   renombra  la  rama por main en caso de que arroje error 

Creación llave SHH

ssh-keygen -t rsa -b 4096 -C "tu@email.com"    Genera llave SSH privada

eval $(ssh-agent -s)   para verificar que  corra el ssh

ssh-add ~/.ssh/id_rsa   Añade llave

~  para ver la ruta  

git remote set-url origin <ruta shh proyecto>   agrega ruta ssh github

 

Comandos útiles

git log --all muestra todos los commits

git log --all --graph  miestra los comits con grafica

git log --all --graph --decorate --oneline

alias arbolito="git log --all --graph --decorate --oneline"  atajo para nombrar comando largo

Tags para versiones

git tag  mira que tags hay

git tag -a <nombretag>  -m "Resultado de las primeras clases del curso" <codigo commit>   reviso versiones

git show-ref --tags  miro en que commit  esta conectado

git pull origin main  antes  para  traer los archivos

git push origin --tags envia  el tag a github

$ git tag -d <nombretag>    borra  el tag creado

$ git push origin :refs/tags/<nombretag>   borra tag

$ git show-branch  muestra ramas existentes

 git show-branch --all  muestra ramas existentes pero con mas datos

gitk  muestra historia  visual en un software

git branch <nombre>  crea un branch

git  remote add upstream <url github>  apuntador al repositorio maestro. fuente de origen

Rebase

El comando rebase es una mala práctica, nunca se debe usar, pero para efectos del curso te lo vamos a enseñar para que hagas tus propios experimentos. Con rebase puedes recoger todos los cambios confirmados en una rama y ponerlos sobre otra.

 # Cambiamos a la rama que queremos traer los cambios 

git checkout experiment 

# Aplicamos rebase para traer los cambios de la rama que queremos 

 git rebase master

Stash

Cuando necesitamos regresar en el tiempo porque borramos alguna línea de código pero no queremos pasarnos a otra rama porque nos daría un error ya que debemos pasar ese “mal cambio” que hicimos a stage, podemos usar git stash para regresar el cambio anterior que hicimos.

 git stash es típico cuando estamos cambios que no merecen una rama o no merecen un rebase si no simplemente estamos probando algo y luego quieres volver rápidamente a tu versión anterior la cual es la correcta.

Git clean

Limpia proyecto de archivos no deseados

git clean --dry-run    para saber que archivos vamos a borrar

git clean -f   borrar archivos que nos son carpetas

Git cherry pick

Existe un mundo alternativo en el cual vamos avanzando en una rama pero necesitamos en master uno de esos avances de la rama, para eso utilizamos el comando git cherry-pick IDCommit. 

 cherry-pick es una mala práctica porque significa que estamos reconstruyendo la historia, usa cherry-pick con sabiduría. Si no sabes lo que estás haciendo ten mucho cuidado.

git commit --ammend  los cambios que haremos los manda al commit anterior

git reflog    se ve todo   hash  head  (cuando se desea recuperar algo)

¿Qué pasa cuando todo se rompe y no sabemos qué está pasando? Con git reset HashDelHEAD nos devolveremos al estado en que el proyecto funcionaba. 

 git reset --soft HashDelHEAD te mantiene lo que tengas en staging ahí. 

git reset --hard HashDelHEAD resetea absolutamente todo incluyendo lo que tengas en staging.

 git reset es una mala práctica, no deberías usarlo en ningún momento; debe ser nuestro último recurso.

Buscar en archivos git

git grep color -->use la palabra color

git grep la --> donde use la palabra la

git grep -n color–> en que líneas use la palabra color

git grep -n platzi --> en que líneas use la palabra platzi

git grep -c la --> cuantas veces use la palabra la

git grep -c platzi --> cuantas veces use la palabra platzi

git grep -c “<p>”–> cuantas veces use la etiqueta <p>

git log-S “cabecera” --> cuantas veces use la palabra cabecera en

todos los commits.

grep–> para los archivos

log --> para los commits. 

Comandos y recursos colaborativos Git y Github

git shortlog -sn = muestra cuantos commit han hecho cada miembros del equipo.

git shortlog -sn --all = muestra cuantos commit han hecho cada miembros del equipo hasta los que han sido eliminado

git shortlog -sn --all --no-merge = muestra cuantos commit han hecho cada miembros quitando los eliminados sin los merges

git blame ARCHIVO = muestra quien hizo cada cosa linea por linea

git COMANDO --help = muestra como funciona el comando.

git blame ARCHIVO -Llinea_inicial,linea_final= muestra quien hizo cada cosa linea por linea indicándole desde que linea ver ejemplo -L35,50

**git branch -r **= se muestran todas las ramas remotas

git branch -a = se muestran todas las ramas tanto locales como remotas

https://git-scm.com/docs/git-blame

Webpack

¿Qué es Webpack? 

Webpack es un module bundler. Los module bundlers son herramientas para frontend devs que suelen usarlo para empaquetar los JS modules en un único archivo de JS que pueda ser ejecutado por el navegador. 

 Las razones principales por que se usan webpack son: Algunos navegadores no soportan el sistema de modulos. 

Te ayudan a manejar las relaciones de dependencias con tu código. Ayudan a cargar assets en orden de dependencias, imágenes, css, etc. 

Tener en cuenta que webpack es una filosofía que nos va permitir trabajar de forma modular. Es como menter todo lo que vamos a necesitar en un proyecto en una caja y después poder sacar todo listo para producción.

link https://webpack.js.org/concepts/

Una forma de usar webpack https://createapp.dev/webpack/no-library

mkdir nomcarpeta

cd nomcarpeta

git init Iniciamos repositorio git

npm -y   iniciamos npm en el proyecto

code .  Abrimos el codigo en  VSC

npm install webpack webpack-cli -D  instala en terminal dentro del proyecto el webpack

npx webpack  ejecuta el webpack  el proyecto

npx webpack --mode development modo desarrollo

npx webpack --mode production   modo produccion

para automatizar   vamos a package.json  y  añadimos 

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack --mode production"

  },

Luego en la terminal ejecutamos npm run build

Para clonar un proyecto   git clone   https://pag.com

---------------------

Babel

Sirve para tranformar nuestro código JS a un código que cualquier navegador o Node.js pueda entender

npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime   instalo babel loader -D

/\.m?js$/ es una expresión regular que indica; los archivos que terminen con mjs o js

npm build  para correr programa

--------------

html 

 npm install html-webpack-plugin -D

----------------

CSS

npm install mini-css-extract-plugin css-loader -D

npm run dev luego de editar en el codigo html quitando la ruta css, el main.js y el webpack.config.js

npm install stylus -D   instala stylus   

npm install stylus stylus-loader -D

---------------------------------------

Para saas

npm i -D node-sass sass-loader

Añadimos el loader al arreglo de loaders y modificamos un poco la expresion regular

{
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"]
      },

npm i copy-webpack-plugin -D   plugin para copia en webpack

Metodología BEM para CSS

 BEM: Bloques, elementos, modificadores

Link útil para BEM: https://9elements.com/bem-cheat-sheet/

Dividir lógicamente las piezas de las que se compone una web

.bloque{}

.bloque__elemento{}

.bloque--modificador{}

Ejemplo:

Taller de oratoria en inglés (tips)

Tongue twisters: https://www.engvid.com/english-resource/50-tongue-twisters-improve-pronunciation/

Tips by  Taller de oratoria  in Platzi

Tips

-Make a list of 5 topics of your interest. Analyze them and select 1 to be main topic of your speech

-Ask yourself WHAT do I want my audience to remember or learn about my speech?

-Express WHY your audience needs to learn about this topic

-Draft your ideas and prepare your speech

-Find a nice place to record practice!

-Record your speech

Speech 

1.    Focus on one major idea

2.    Give people a reason to care

3.    Build your idea with familiar concepts

4.    Make your idea worth sharing

Voice volume must be tempered

emotion, message, space, noise, distance

Use these 5 key points to start structuring your presentation.

-What does the audience need to hear?

-Structure the flow of your message. It does not have to be the definitive version. Create a first draft.

-Style: make it unique

-Memorize the flow, not the whole script!

-Delivery: organize the topic and your ideas. Make them clear to you so you can deliver the message effectively

 

How to put your ideas together

-What do you want the audience to remember/ understand/ believe?

-Support your message with evidence and information to validate your claims

-Make sure you include anecdotes, metaphors and opinions in your presentation.

Key points sugestions and recommendations (claims,support, connectors)

-Definition or explanation

-Elements

-Functions

-Social context

-Measurements

-Time references

-Strengths

-Consequences

-Benefits

Communication media

-Conversation and public speaking

-Messages, documents and publications

-Images and music

-Video, broadcast and social media

-Physichal environment

-Virtual and mixed reality

Concrete evidence

1.    Facts, statistics and testimonials

2.    Examples and illustrations

3.    Metaphors and analogies

Key points, suggestions and recommendations

Definitions or explanations, elements, functions, social context, measurements, time references, strengths, consequences, benefits

Get on the right mindset

-What are you good at? Acknowledge the positive!

-Accept that you make mistakes

-Have a backup plan

-Interact with the audience!

How to provide speech structure and flow

-Deliver previews in the introduction

-Highlight the transitions between the main ideas in our speech

-Supply reviews in the conclusion

The 10 minute rule

Prepare to engage your audience

- Ask provocative questions

- Provide troubling, amusing or remarkable facts

- Explain your own interest in the topic

-Tel listeners what the topic has to do with them

Example about speech

Intro:Today I will be discussing

Outline: I want to begin by.. and then I’ll move on to

Intro to the first point: I will first cover… /to get started, let’s look at

Similar points: in the same  way/ this is similar to

Disagreeing points: however/ even so / on the other hand

Transition: fundamentally/ a major issue is

Emphasizing: more importantly/ primarily /mainly

Conclude: finally, I want to say / I’d like to leave you with this

Find your public speaking voice

 -Speak slowly

 -Include different kinds of pauses in your speech

 -Read out loud   (Practice with music or poetry)

 -Record yourself!

Comandos de Terminal de Ubuntu

 Comandos útiles para npm windows terminal, react y  uso de git  

pwd  dirección actual

cd (change directory)

cd .. retrocede dos carpetas

cd/carpeta/carpeta   va directamente al directorio objetivo

cd /   directorio raiz

ls   archivos en el directorio .  listar items

cd mnt  archivos   c

cd  ~ vuelve a la raiz de carpeta  (alt gr +)

mkdir      crea una carpeta ej: mkdir carpeta

touch     crea archivo    ej: touch index .html

mv  mover archivo  de un sitio a otro ej: mv index.html  Carpeta

code.    abre el visual studio del archivo

wsl--shutdown  cada que se deje de trabajar en ubuntu

cat   muestra datos del archivo. ej: cat index.html

man   es manual  ej:  man cat

sudo apt-get update   actualiza  ubuntu

sudo apt-get upgrade  aplica los cambios de actualizacion

sudo apt install nodejs    instalar node desde terminal

clear   limpiar  código

npx  corre  programas sin instalar   npx create-react-app test

npm start inicia el proyecto

ctlr c   detiene ejecucion para react

npm start  desde new terminal en vsc  o  windows terminal para ejecutar programa

sudo chown -R miusuario micarpeta   cambia propietario de archivo

rm   borra archivo  ej: rm  index.txt

rm -d nomcarpetavacia  borra carpeta vacía

rm -rf  test    borra carpeta test

git --version  versión github

sudo apt-get update  actualiza paquetes  git

sudo apt-get upgrade actualiza paquetes git

sudo apt intall  instala git

Vincular con github desde terminal

ssh-keygen -t -rsa -b 4096 -C   tucorreo   llave para usar con github

https://t.co/6yKToNLs84

https://t.co/6yKToNLs84

— Julian (@juli6464) Sep 25, 2021

from Twitter https://twitter.com/juli6464