Código a tener en cuenta al usar CSS

Código  para aplicar a páginas web desde cero

*{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html{

    font-size: 62.5%; /* para usar los rem sin problema*/

    font-family: 'DM Sans', sans-serif ;

}

Información importante usando el Framework Svelte

Instalar Svelte   usando rollup

Mkdir  nomcarpeta

npx degit sveltejs/template svelte

cd nomcarpeta

npm install

npm run dev, alli copiamos la url para  testear la app

Instalar Svelte   usando webpack

Mkdir  nomcarpeta

npm install svelte --save

npm install @babel/core @babel/preset-env @babel/polyfill babel-loader --save-dev   

npm install webpack webpack-cli html-webpack-plugin --save-dev

npm install webpack-dev-server --save-dev

npm install svelte-loader --save-dev

npm run build

npm run start

Crear un proyecto usando Svelte

Mkdir  nombrecarpeta

cd nombrecarpeta

git init

npm init

Code .

Creamos carpeta src  donde va el código de nuestro programa, aquí dentro creamos index.js

Creamos carpeta public

Cómo iniciar composer usando PHPUnit para test de códigos en PHP

 Iniciar proyecto composer con PHPUnit

EN WINDOWS:

composer require --dev phpunit/phpunit

rellenar el composer.json

crear un archivo, a nivel del vendor, phpunit.xml

llenar el phpunit.xml

crear la carpeta test a nivel del vendor

en consola escribir: php vendor/phpunit/phpunit/phpunit

y debe salir “No tests executed”

Si no funciona: composer dump

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: