Configuraciones para desarrollo Front-End

Idea de repositorio a partir de la charla de Bash de Jorge Aznar que dio en el TheAntiEvent17.

Estructura del README basada en el setup de Tania Rascia.

Contenidos

• Config Library|Framework

• Git

• Navegador

• Editor texto

• Terminal

• Sistema Operativo

• Automatización

• Virtual Box

• Herramientas organización

• Edición imágenes

• Screenshots

• Gifs

• Videoconferencia

• Firma

• Traducción

• Enlaces interesantes

Config

Configuracion de librerias Fronted

• Opciones de Eslint (json format)

Firebase

Multi-hosting by Project.

• Host multiple Apps or Websites on Firebase

Git

Nota: Acordeón para notas de Git

Algunos comandos usados en proyectos

Operaciones locales:
working directory -> staging area -> git repository

Crear rama en local

# Situarte en la rama desde donde quieres crear la rama
git checkout develop

# Comprobar que se tienen los últimos cambios
git fetch
git pull

# Crear la rama
git checkout -b feat/new-feature

Añadir al staging area todos los ficheros

# Ver el estado actual de los cambios (qué está en el índice para subir)
git status

# Comprobar en VS Code las diferencias de los ficheros para asegurar que lo que subes es lo que quieres subir

git add .

Quitar un fichero del staging area

git reset HEAD -- <file>

Deshacer cambios de los ficheros que están en el working directory (todavía no subidos al staging area)

git checkout .

Commit para subir ficheros del staging area al git directory

git commit -m "Commit message"

Subir a la misma rama en remoto

git push origin HEAD

Rebase de master a tu rama

# Asegurarte que estás en tu rama

git status

# Sincronizarte con el remoto

git fetch

git rebase origin/master

# resolver conflictos si los hubiera

git add .

git rebase —continue

# subir la rama rebasada a remoto con -f

git push origin "feature-branch" -f

Squash

http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html

Ejemplo: Combinar los últimos 4 commits tuyos en el primer commit de la lista:

git rebase -i HEAD~4

# Ejemplo (:wq al final para guardar como en vi)
pick 01d1124 Adding license
squash 6340aaa Moving license into its own file
squash ebfd367 Jekyll has become self-aware.
squash 30e0ccb Changed the tagline in the binary, too.

git add <file1> <file2>  # si conflictos

git rebase —continue # si conflictos

git push origin <branchname> -f

Git amend

Ejemplo: quieres añadir algo al último commit

# Haces los cambios

git add <file1> <file2>

git commit --amend

git push origin <branchname> -f

Dejar tu rama como en remoto

git reset —hard origin/rama

ó

git checkout -B master origin/master

Borrar rama remota y local

git push -d origin feat/feature-branch
git branch -D feat/feature-branch

Borrar todas las ramas locales excepto master

git branch | grep -v "master" | xargs git branch -D

Cambiar rama local y remota

https://multiplestates.wordpress.com/2015/02/05/rename-a-local-and-remote-branch-in-git/

git branch -m feat/MHF-725-params
git push origin :feat/MHF-841-params feat/MHF-725-params
git push origin -u  feat/MHF-725-params

Guardar cambios en stash y recuperarlos

# Guardar
git stash

# Recuperar borrando el stash
git stash pop

# Recuperar manteniendo el stash
git stash apply

Buscar git commit por mensaje

git log --all --grep='Build 0051'

Borrar tags

# Remote:
git push --delete origin tagname

# Local:
git tag --delete tagname

Crear tags

git tag -a 3.26.0 -m "Version 3.26.0”

git push origin 3.26.0

Navegador

Uso: Google Chrome

• Wrap your console.log arguments in an object literal to print the variable name along with its value: console.log({ isLoggedIn }).

• Tip: Run keys(object) and values(object) in the Console to see an object's keys and values.

• Tip: Run copy(obj) in the Console to copy an object to your clipboard

• Tip: Type $_ in the Console to return the value of the last evaluated expression.

• Option + Cmd + J: Open Console JS.

• Local storage: https://developers.google.com/web/tools/chrome-devtools/manage-data/local-storage.

Extensiones

• Octotree.

• Octolinker.

• Wappalyzer.

• CORS extension Chrome.

• 30 seconds of knowledge

• Chrome extensions for quick site redesigns: https://meowni.ca/posts/extensions/.

Editor Texto

Uso: Visual Studio Code

Previamente usé: Atom y Brackets.

• Abrir editor desde consola.

• Mantener varios ficheros abiertos en pestañas: Preferencias -> Configuración: "workbench.editor.showTabs": true

• Atajos de teclado Mac.

  • Cmd + P: Abrir fichero.

  • Control + r: Cambiar de proyecto (workspace).

  • Cmd + d: Seleccionar la palabra y al dar a Cmd + d va al siguiente. Así puedes reemplazar un grupo de palabras a la vez.

  • Cmd + b: Abrir/cerrar menú de la izquierda.

  • Control + g: Ir a la línea.

  • Cmd + F: Buscar.

  • Option + Cmd + F: Reemplazar.

  • Shift + Cmd + F: Buscar en todos los archivos.

  • Shift + Cmd + H: Reemplazar en todos los archivos.

  • Cmd + Shift + p: Buscador de comandos (Command palette).

• Atajos de teclado Windows.

• Atajos de teclado Linux.

• Ejecutar ESLint al guardar un fichero en VS Code: https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461.

• Instalar extensión ESLint

• Habilitar autofix con fix para Vue:

  { "eslint.autoFixOnSave": true, "eslint.validate": [ { "language": "vue", "autoFix": true } ] }

Extensiones

• Markdown Preview Github Styling.

• Bracket pair colorizer.

• Indented block highlighting.

• Markdown TOC: Generate TOC (table of contents) of headlines from parsed markdown file.

• Settings Sync: Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

• eCSStractor, descubierto gracias a Diana Aceves.

• Plugins VS Code Carlos Azaustre:

  • Editor Config for VS Code: regla de sintaxis en los proyectos. Útil también para un equipo y teniendo este plugin.

  • ESLint

  • File-icons para tener iconos para distintos tipos de ficheros.

  • Vetur si se trabaja con Vue. Con snippets de código y resaltados.

  • Prettier: para autoindentar.

  • BEM Expand: te completa el hijo al poner &.

  • Babel ES6/ES7.

• Plugins VS Code Sarah Drasner

Terminal

Inicialmente he usado el terminal de Mac con el tema Homebrew. A partir de ahora quiero usar iTerm2.

• Comandos útiles:

  • touch index.{html,js}

  • Cambiar título pdf: exiftool -Title="New title" path/pdf.pdf

  • ab (test concurrencia)

• Configuración de Joan León: https://github.com/nucliweb/my-terminal.

  • iTerm2

  • Bash-it

• Working effectively with iTerm2

  • Profiles - Open Profiles - Edit Default Profile - Working Directory - "Reuse previous session’s directory".

• zsh para Windows 10, oh my zsh: Personaliza el prompt del terminal, por ejemplo te dice en qué rama de git estás.

  • Instalar: apt-get install zsh

  • Instalar: apt-get install git

  • Ejecutar: sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

  • Lanzar: zsh

  • Para salir: exit

• zsh para Mac

  • Zsh:

    • brew install zsh zsh-completions

  • Oh My Zsh:

    • curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

    • chsh -s /usr/local/bin/zsh

• Volver a entrar en iTerm2 y cuando estás en un repositorio git te dice en qué rama estás por ejemplo git:(fix/max-digits-number-76).

Sistema Operativo

Uso (trabajo): macOS (Apple). Uso (personal): Windows 10

• Bloquear ordenador Mac: Ctrl + Command + Q

Cambios en Windows 10:

• Eliminar todos los programas preinstalados de Windows 10 con Remove-AppxPackage.

• Deshabilitar que las aplicaciones nuevas instaladas se ejecuten al inicio.

• Instalar Linux Bash Shell en Windows 10. Creados los proyectos en /mnt/c/Projects (C:/Projects).

  • Nota @ethomson: Pro-tip: you don't have to use bash in Windows Subsystem for Linux. If you run wsl, it will use your login shell, so you can use zsh!

Automatización

¿Qué cosas repetitivas puedo automatizar?

• Funciones útiles Jorge Aznar: https://github.com/jorgeatgu/setup/blob/master/dotfiles/func/functions.zsh.

• Arrancar front y back de un proyecto: Script abrir varias ventanas Terminal mac.

  • Abre distintas pestañas para ejecutar los scripts que arrancan el proyecto.

  • Para probarlo te creas fichero en local, lo adaptas a tu proyecto, lo haces ejecutable con chmod +x y lo ejecutas con ./front_back.sh.

Virtual box

Para probar IE en un mac (ejemplo generando versión producción y con http-server para probar en local)

• Bajar VirtualBox: https://www.virtualbox.org/wiki/Downloads: VirtualBox 5.1.30 platform packages: OS X hosts

• Seguir pasos https://github.com/magnetikonline/linuxmicrosoftievirtualmachines#ie11---windows-7

  mkdir -p ~/vm/ie11-windows7 && cd ~/vm/ie11-windows7

  wget -ci https://github.com/magnetikonline/linuxmicrosoftievirtualmachines/raw/master/vmarchiveset/ie11-windows7.txt

  cat IE11.Win7.For.Linux.VirtualBox.zip.00? >IE11.Win7.For.Linux.VirtualBox.zip

  rm ie11-windows7.txt IE11.Win7.For.Linux.VirtualBox.zip.00?

  unzip IE11.Win7.For.Linux.VirtualBox.zip

  rm IE11.Win7.For.Linux.VirtualBox.zip

• En Virtual Box: Importar servicio virtualizado (desde ~/vm/ie11-windows7)

• Instalar http-server: https://www.npmjs.com/package/http-server (la primera vez) npm install http-server -g

• Generar versión salida

  • npm run build

• Ejecutar http-server (en dist está la versión de distribución en este caso): http-server dist

• Disponible en virtual box en http://ip-local:8080 (la ip local con ifconfig, te la especifica en la terminal el http-server)

• Copiar y pegar url en Virtual Box, en Windows con Ctrl+V

Herramientas organización

Uso: Evernote, Taiga Kanban

• Evernote para crear notas con el setup de proyectos y organizar tareas de trabajo.

• Taiga para proyectos personales: Organización del aprendizaje, organización de proyectos por áreas.

Edición imágenes

Uso: Gimp, Inkscape

• Gimp for developers.

• Make a logo with Inkscape.

Screenshots

• Carbon.

Gifs

• GiphyCapture.

Videoconferencia

• Meet Google.

• Compartir links online: https://bigtextbox.com/.

Firma

• Editar y firmar documentos PDF con Acrobe Acrobar Reader DC.

• Aplicación móvil firmar PDFs: docusign.

Traducción

• Deepl

Enlaces interesantes

• Setup de trabajo:

  • Jorge Aznar.

  • Enlaces Bash y Gulp TheAntiEvent17.

• Dot files:

  • Getting started.

  • Awesome dotfiles.

  • Jorge Aznar.

  • Viroide.

  • Angel M Miguel.

  • Joan León.

• Gulp:

  • Jon Torrado.

• Inicio proyectos:

  • Jorge Aznar (artículo).

  • Jorge Aznar (GitHub).

  • Generador Jorge Aznar creado por Viroide. Artículo Medium.

• Configurar el terminal:

  • Carlos Azaustre (HyperTerm).

• Vim Sessions:

  • Julia Evans.

  • Handle vim sessions.