The Take Away - Recetas rápidas para crear una aplicación con React

Sabemos que hay muchas tecnicas y herramientas para crear aplicaicones con React, y a veces puede ser un poco dificil elegir por donde empezar. 

Dejo aqui una coleccion de tutoriales simples y cortos que arme cuando aprendi a dar los primeros pasos en el mundo de React:

• Parte 1, form con un solo campo https://youtu.be/DaGoa5ehHxY
• Parte 2, form con objeto con varias propiedades, por ahora todo en un mismo componente: https://youtu.be/ge0pcd3Qo1E
• Parte 3, todo en un mismo componente: https://youtu.be/ug-lSqX3lzw
• Parte 4, subiendo a un repo: https://youtu.be/eZE_RJI4Tcs
• Parte 5: Routing & SPA: https://youtu.be/E--rvv7RUXg
• Parte 6: Comunicación entre componentes: https://youtu.be/CIefcXm1N9Y

Espero sirva de pantallazo general.

Happy coding!

Angular-Cli sobre Ubuntu 20

Por alguna razón, la experiencia de instalar Angular Cli sobre Ubuntu 20 fue diferente a la qur tuve con Ubuntu 18. Tuve algunas complicaciones, y quisiera compartirles la forma en la que la resolví.

Primero, instalar Angular Cli

npm install -g @angular/cli@latest

Después, por una cuestion de permisos, cambiar el directorio de npm.

 mkdir ~/.npm-global

 npm config set prefix '~/.npm-global'

 export PATH=~/.npm-global/bin:$PATH

 source ~/.profile

Y en este punto me funcionó unos minutos para arrancar a crear la app, pero al momento de correr mi segundo serve, ng dejó de ser reconocido por alguna razón. Repetí el segundo paso y volvió a funcionar, pero con el pasar de los minutos volvía a desvincularse.

La solución que me funciona, al menos por hoy, es crear un alias. Para ello, primero hayq ue ver donde esta ng.

npm link @angular/cli

Esto devuelve algo parecido a esto

/home/youruser/dev/mabo/cortes-vines/node_modules/@angular/cli -> /home/youruser/.npm-global/lib/node_modules/@angular/cli

Tomamos uno solo de los paths y, si no esta la ruta hasta ng, la completamos. Es decir, usamos

/home/youruser/.npm-global/lib/node_modules/@angular/cli/bin/ng

Y copiamos eso para crear el alias

alias ng="/home/youruser/.npm-global/lib/node_modules/@angular/cli/bin/ng"

Si por alguna razon esto fallara o es necesario repetirlo, copiar esa linea directamente en el bashrc y recargarlo:

gedit ~/.bashrc

source ~/.bashrc

Espero les sea de utilidad :)

#HappyCoding

Code linter: usando ESLint con estilo Airbnb en SublimeText 3

¿Qué es un code linter?

Un linter es una herramienta que te ayuda a mejorar tu código en términos de espaciado, errores de sintaxis, estandares de codigo, code smells, etc.

Instalándolo 

Primero, instalá ESLint globalmente:

npm install -g eslint

Luego, dentro del proyecto en el que quieras usar esto, hay que crear un archivo .eslintrc, y eso lo lugramos corriendo:

eslint --init

Para poder utilizarlo desde Sublime, abrí el instalador de paquetes (CTRL+SHIFT+P) e instalá:

• SublimeLinter
• SublimeLinter-eslint

Reiniciá SublimeText.

Utilizándolo

Abrí cualquier archivo Javascript. Si hay errores, deberías ver las advertencias abajo.

#HappyCoding

Un tutorial muy bien explicado: https://www.youtube.com/watch?list=PLMWjeRChIK6bnp6qaS3rxLGCpc9aQYzEE&v=nxxl2H_TOTc&feature=emb_logo

 

Instalando Python 3, Miniconda y Jupyter en Ubuntu para Ciencia de Datos

Anaconda es una distro que proporciona un instalador y gestión de paquetes para PyDataScience y, aunque es gratuito, incluye código binario precompilado (no es completamente open source). Vamos a ver qué nos ofrece.

Instalación

Vamos a instalar una versión "minified" de Anaconda: Miniconda. Para ello, bajamos el .sh desde este link, versión 3.
Cambiamos los permisos:

sudo chmod +x ./Miniconda3-latest-Linux-x86_64.sh 

Lo corremos:

./Miniconda3-latest-Linux-x86_64.sh 

El instalador nos pregunta si queremos incluir el path. Le decimos que si. Cerramos la terminal, abrimos otra y probamos si funciona: 

conda list

Verificamos tener la última versión instalada: 

conda update conda

También vamos a instalar una IDE: 

conda install jupyter

Ejemplo de uso

En primer lugar, vamos a levantar el server de nuestra IDE con el siguiente comando:

jupyter notebook

Una vez abierto el entorno, hacemos click en el combo (en la esquina superior derecha) "Nuevo > Python3" y se nos abre un nuevo entorno con el archivo. Le damos un nombre.

En la primera línea de nuestro archivo, importamos pandas:

import pandas

Le damos click en "run" y nos advierte que no tenemos el paquete. Entonces vamos a una terminal y ejecutamos:

conda install pandas matplotlib

Si, tenemos instalado pip pero lo recomendable es intentar primero con "conda install packane_name". Si no lo encuentra, recién ahí usar pip.

Ahora volvemos a Jupyter, hacemos click en la línea que escribimos y le damos "run" de nuevo. Esta vez deebría pasar .

Creamos un archivo llamado "demo-data.csv" con este contenido: 

Nationality,Age,Height,Study-Level,Exam-Rank

Italian,21,1.56,High school,6

French,23,1.88,Degree,3

Spanish,37,1.92,Postdegree,8

Italian,23,1.23,High school,10

French,45,1.56,Degree,3

Spanish,54,1.88,Postdegree,6

Italian,25,1.92,Degree,7

French,42,1.23,Degree,9

Spanish,24,1.56,High school,2

Italian,26,1.88,Degree,8

French,26,1.92,Postdegree,7

Spanish,36,1.23,High school,5

Spanish,28,1.55,Degree,4

 Y, de nuevo desde jupyter, escribimos estas líneas, una por cuadradito:

import pandas
myData = pandas.read_csv("/home/gabi/dev/miniconda3_docs/demo-data.csv")
print(myData.columns)
print(myData.shape)
import matplotlib.pyplot as plot
plot.hist(myData["Age"])
myData.corr('pearson')['Exam-Rank']
myData.corr('spearman')['Exam-Rank']

A jugar! 

Instalando Docker y Docker Compose en Ubuntu

¿Qué son Docker y Docker Compose?

Docker es sistema que hace virtualización a nivel de sistema operativo (containerization). Docker permite crear contenedores sobre los que las aplicaciones pueden ejecutarse sin importar qué sistema operativo, frameworks, dependencias, etc. la máquina tenga corriendo por debajo.

Docker Compose es una herramienta que permite ejecutar aplicaciones en múltiples contenedores.

Instalando Docker CE

sudo apt-get install apt-transport-https ca-certificates curl software-properties-common

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository    "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"

sudo apt-get update

sudo apt-get install docker-ce

Probando el test ofrecido por Docker CE:
sudo docker run hello-world

Instalando docker compose

Bajar docker compose: 

sudo curl -L "https://github.com/docker/compose/releases/download/1.23.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Darle permisos de ejecución:

sudo chmod +x /usr/local/bin/docker-compose

Verificar que se instaló:

docker-compose --version

Extra

Para detener los contenedores y eliminar contenedores, redes, volúmenes e imágenes creadas por el comando up:
sudo docker-compose down

Como el servicio de Docker inicia automáticamente, en caso de querer deshabilitarlo:
sudo systemctl stop docker
sudo systemctl disable docker.service

Fuentes de información

https://docs.docker.com/install/linux/docker-ce/ubuntu/

https://docs.docker.com/compose/install/#install-compose 

Instalando Pyton, Anaconda y Pip en Ubuntu 18

Anaconda es una distribución de los lenguajes Python y R para hacer data science y machine learning. Para esto es recomendado tener mucha memoria, 8 o 16 GB.

Descargar Anaconda versión 3 desde https://www.anaconda.com/download
Si estás desde Ubuntu, como yo, basta con bajar el .sh y:

1. sudo chmod +x Anaconda3-5.3.0-Linux-x86_64.sh
2. bash ./Anaconda3-5.3.0-Linux-x86_64
1. Al final del proceso, te pregunta "Do you wish the installer to prepend the Anaconda3 install location to PATH in your /home/sammy/.bashrc ? [yes|no]". Eligiendo "yes", podremos usar el comando conda.
2. También te va a preguntar si querés instalar Visual Studio Code. Yo lo instalé para probarlo. Actualmente es gratis y open source.
3. Activá la instalación: source ~/.bashrc
4. Testeá la instalación: conda list
5. Creá el launcher: code ~/.local/share/applications/anaconda-navigator.desktop
6. Escribí en el archivo:
   
   
   [Desktop Entry]

   Version=1.0

   Type=Application

   Exec=/home/gabi/dev/anaconda3/bin/anaconda-navigator

   Name=Anaconda Navigator

   Icon=/home/gabi/dev/anaconda3/share/icons/spyder3.png

   StartupNotify=true

Listo, con esto tenés Python + la IDE Anaconda. Aún si hubioesemos instalado solo Python, PIP ya viene instalado por defecto, aunque quizas sea necesario actualizarlo. Para lo cual corremos:
pip install --upgrade pip

Si no quisieras usar Anaconda, simplemente instalá https://www.python.org/downloads/latest

Para instalar una librería con PIP: pip install pandas
Para probar que se haya instalado correctamente, el siguiente comando no debería arrojar error: python -c "import pandas"

Borrar commits del historial de un repositorio git

Borrando todo el historial

Algunas veces necesitamos "reiniciar" un repo. Por ejemplo, supongamos que nos olvidamos de incluir la licencia en el primer commit y no queremos dejar código sin ella.

Primero, asegurate de tener una copia extra de todo tu repo aparte. Luego, desde la carpeta original donde tenés el repo:

1. Eliminá el historial
   rm -rf .git
2. Inicializá tu repo
   git init
3. Agregá todo lo que quieras tener en tu primer commit y luego
   git add .
4. Creá el commit inicial
   git commit -m "Initial commit"
5. Agregá el origen remoto a tu repo local
   git remote add origin https://github.com/........git
6. Hacé push al repo remoto
   git push -u --force origin master

Borrando el último commit remoto

Algunas veces nos equivocamos o nos faltó algún detalle que no queremos que esté publicado por si solo. Por ejemplo, escribiste una clase y olvidaste ponerle licencia.

git push https://github.com/........git +xxxxxxxxxxx^:master

Donde 

• https://github.com/........git es tu repo 
• xxxxxxxxxxx = el numero de commit

Accedé a tu repo desde la Web y vas a ver que ese último commit ya no está. Podés repetir la oepración cuantas veces sea necesaria, aunque reemplazando el número de commit. 

Tené en cuenta que aunque borraste los commits remotos, aún los tenés localmente. Podés borrarlos localmente o simplemente clonar el repo de nuevo.