Forem: Raúl Martín

Personaliza tu terminal de 0 a PRO 😎

Raúl Martín — Sat, 26 Dec 2020 08:37:00 +0000

Ten por seguro que personalizar la terminal no te hará un hacker ni mejor desarrollador pero te prometo que vas a sentirte como uno.

A todo desarrolladores nos gusta la personalización de nuestras herramientas y que mejor que empezar con la que probablemente más interactuamos, la terminal.

Esta guía puede servir para Linux, MacOS y WSL (Windows Subsystem for Linux) por lo tanto pueden usar cualquier terminal que tengan, ya sea la terminal por defecto de MacOS, iterm 2.0, GNOME terminal, Terminator, la nueva terminal de Windows etc.

Visita mi sitio raulmar.com para más información

Comparación visual 👀

Antes

Después

Lo que haremos 🧰

Cambiaremos la shell por defecto (BASH) por ZSH
Instalaremos GIT para clonar repositorios desde la nube
Instalaremos Oh My ZSH que es un administrador de configuración para ZSH el cual nos hará la vida más fácil
Instalaremos algunos plugins sobre Oh My ZSH
Instalaremos el tema powerlevel10k con Oh My ZSH que permite una gran cantidad de combinaciones gracias a su configuration wizard
Agregaremos algunos alias que es como configurar comando personalizados
Cambiaremos el prompt por defecto de nuestra terminal

Cambiar BASH por ZSH 💱

ZSH es una mejor alternativa al shell por defecto que es BASH, principalmente por sus addons que nos facilitan todo, desde plugins hasta un framework para temas.

Instalamos ZSH
```
sudo apt install zsh
```

Seleccionamos ZSH como shell por defecto

chsh -s $(which zsh)

#Otra alternativa es:
#chsh -s `which zsh`

Reiniciamos la consola
Revisamos que estemos usando ZSH, si nos sale un error hay que verficar la instalación
```
echo $SHELL

#nos debe responder con
#/usr/bin/zsh
```
Si nos sale el siguiente menú seleccionamos (2) para desktop y (0) para conexiones SSH

Instalamos git 💻

Además de ser una excelente herramienta para desarrollo también la usaremos para que OhMyZSH se pueda instalar correctamente

Instalamos los paquetes de git
```
sudo apt-get install git
```
Comprobamos la instalación
```
git --version
```

Instalamos Oh My ZSH 🔧

Este framework creado por la comunidad nos ayuda a configurar nuestro ZSH.
No confundir ZSH y OhMyZSH, OhMyZSH actúa sobre el archivo de configuración de ZSH (.zshrc)

Instalamos Oh My ZSH

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Oh My ZSH nos modifica el archivo .zshrc y nos crea la carpeta .oh-my-zsh donde encontraremos los plugins, temas, plantillas etc.
```
nano ~/.zshrc
#para ver la configuración de ZSH
```
Por defecto nos selecciona el tema robbyrussell

Instalamos plugins 🔨

Los paquetes que vamos a instalar son:
- zsh-syntax-highlighting: Si estas escribiendo los comando correctos en la terminal, les pone colores
```
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
```
- zsh-autosuggestions: Para obtener sugerencias basadas en tu historial
```
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
```
- fzf: Con "ctrl + t" te da un explorador de carpeta, con "ctrl + r" te da un explorador de historial de comandos y con "ctrl + c" salimos
```
git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf && ~/.fzf/install
```
  Aceptamos todo lo que nos pida

Vamos a nuestro archivo de configuración ZSH
```
nano ~/.zshrc
```
Aquí nos vamos a la parte de abajo del archivo hasta donde veamos plugins (por defecto viene con el plugin de git) y agregamos lo siguiente
```
plugins=(
git
zsh-syntax-highlighting
zsh-autosuggestions
)
```
Reiniciamos la consola y listo 😉

Power level 10k 🖌️

Fuente

Fuente regular

Fuente nerd

Descargar una fuente con soporte para iconos.
- Mi recomendación es descargar la fuente de https://www.nerdfonts.com/font-downloads
- La fuente que uso es la de JetBrainsMono Nerd Font

Descomprimir el zip a la carpeta .fonts (~/.fonts o ~/.local/share/fonts) y movernos a ella

# En caso de no tener la carpeta fonts
# mkdir ~/.fonts && cd ~/.fonts
unzip ~/Descargas/[fuente_descargada].zip

Cambiar la fuente de la terminal, normalmente es click derecho sobre el área de comandos > Preferencias > Apariencia/Perfiles > Fuente
- Aquí elegimos la fuente que hayamos descargado

Powerlevel10k

Nos da muchas opciones de personalización visual como las siguientes

Descargamos powelevel10k

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Declaramos el tema en el archivo de configuración de zsh

ZSH_THEME="powerleve10k/powerlevel10k"
POWERLEVEL10K_MODE="nerdfont-complete"

Reiniciamos la terminal para que aparezca el configurador o en su defecto teclear p10k configure
Terminando el instalador tendremos nuestra terminal totalmente personalizada

Colores

Para cambiar los colores damos click derecho sobre el área de comandos > Preferencias > Apariencia/Perfiles > colores
Para paletas de colores random puedes visitar coolors.co
Mis colores principales son:

Fondo: #302F4D

Texto: #FFFFFF

Morado de prompt: #B816B8

Blanco de prompt: #FFFFFF

Aliases 🕵️‍♂️

Los aliases son una herramienta para crear atajos para los comando que más usamos o para los que más nos equivocamos

Abrimos la configuración zsh y nos movemos a la parte de abajo

Aquí en la configuración nos da unos ejemplos

La sintaxis para agregar alias es:

alias atajo="comando regular para el atajo"

Los atajos que tengo configurados son

alias zshconfig="nano ~/.zshrc"
alias ohmyzsh="cd ~/.oh-my-zsh"
alias sl="ls" #por si lo escribo al revés XD

Cambiando el prompt 👩‍💻

Personalmente prefiero que solo me muestre el directorio actual en lugar de todo el path. Queremos pasar de esto

A esto, con ayuda de una configuración del tema powerlevel10k

Primero tendremos que abrír el archivo de configuración con nuestro editor favorito, en mi caso utilizaré nano
```
nano ~/.p10k.zsh
```
Después buscamos el parámetro (en nano podemos usar "Ctrl + w" para buscar)
```
POWERLEVEL9K_SHORTEN_STRATEGY=truncate_to_unique
```

Sustituimos el valor por defecto

POWERLEVEL9K_SHORTEN_STRATEGY=truncate_to_last

Reiniciar la terminal 😃

Gracias por leer!

No olvides compartir esta guía para que mas gente tenga terminales de otro mundo y compartir el conocimiento.
No dudes en mandarme un screenshot de tu terminal por twitter como @__raulmar

Recursos 📔

Instalación de Terminator terminal

Utilidades Terminator terminal

Your terminal can be much more productive

OhMyZSH official repo

ZSH installation guide

Power level 10k & OhMyZSH

OhMyZSH plugins

OhMyZSH website

🐧🛠️Armando una GUI para Debian (RPi OS lite)

Raúl Martín — Mon, 14 Dec 2020 23:34:00 +0000

¿Por qué no instalar una distro con GUI directamente?

Las distros populares por lo general tienen un entorno de escritorio por defecto, sea GNOME, KDE, XFCE etc. sin embargo si queremos comenzar en el mundo de la personalización en linux debemos de empezar desde cero ya que muchas veces l os entornos por defecto están intrínsecamente unidos con el sistema operativo lo que hace que sea un poco más difícil la personalización

Recientemente adquirí una Raspberry Pi 4 en su versión de 4GB de RAM para jugar con la configuración y personalización de linux. Así que lo primero que hice fue crear los cimientos de la personalización que es la GUI (Graphical User Interface)

Visita mi sitio raulmar.com para más información

Un repaso de lo que vamos a instalar

Escritorio: XFCE
Window manager: XFWM (incluído con XFCE)
Display server: Xorg
Login manager: LightDM

Aunque también veremos otras opciones populares

Antes de comenzar debemos tener lista la instalación limpia de Raspberry Pi OS lite e ingresar con el usuario "pi" y contraseña "raspberry"

Instalación limpia de RPi OS lite (CLI)

Configurando el Wi-Fi

Esto lo hacemos para poder actualizar paquetes y tener una conexión SSH sin tener que usar Ethernet ya que sin conexión a internet muchos de los comandos no funcionarían

Hacemos cd al directorio boot
Creamos un archivo llamado wpa_supplicant.conf
```
sudo nano wpa_supplicant.conf
```

Llenamos el archivo con la siguiente información

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=<Código ISO 3166-1 de nuestro país (MX en mi caso)>

network={
 ssid="[Nombre de la red]"
 psk="[Constraseña de la red]"
}

Configurando la conexión SSH

Nos facilita el uso de la tarjeta para no tener que estar cambiando nuestros periféricos entre nuestra PC y la Raspberry Pi así como también poder copiar los siguientes comandos desde nuestra PC

Habilitamos la interfaz SSH
- El comando que nos llevará al menú de configuración de Raspberry es:
```
raspi-config
```
- Hacemos el siguiente recorrido dentro del menú
```
-Interface Options
-SSH
-Enable
```

Obtenemos la dirección IP de la Raspberry Pi dentro de nuestra red
```
hostname -I
```

Desde el cliente (Linux/Mac) nos conectamos a la Raspberry Pi

ssh [usuario]@[ip]
# El usuario por lo general es "pi"
# la ip fue generada en el paso anterior

Para Windows podemos usar PuTTY

Conexión SSH desde Ubuntu

Expandir el sistema

Esto lo hacemos con la finalidad de poder usar la tarjeta SD en su totalidad

Entramos al menú de Raspberry
```
raspi-config
```
Hacemos el siguiente recorrido
```
-Advanced Options
-Expand Filesystem
```

Actualizar paquetes

Actualizamos los repositorios
```
sudo apt-get update
```
Actualizamos los paquetes
```
sudo apt-get upgrade
```
Agregamos actualizaciones importantes
```
sudo apt-get dist-upgrade
```
Limpiamos paquetes que no usaremos
```
sudo apt-get clean
```

Ajustamos las configuraciones geográficas

Entramos al menú de Raspberry
```
raspi-config
```
Entramos al menú "Localization Options"
Entramos al menú "Change Locale"
Seleccionamos nuestro locale y tipo de encoding
- Por defecto tiene seleccionado
```
en_GB.UTF-8 UTF8
```
- Deseleccionamos con la barra espaciadora
- Seleccionamos el nuestro, en mi caso es:
```
es.MX.UTF-8 UTF8
# idioma.país.tipo_de_encoding
# UTF8 es lo más amigable
```
  - Seleccionamos la misma opción cuando nos pida "default locale"
Cambiamos nuestra zona horaria dentro del menú "Change Timezone"
Cambiamos el layout del teclado en el menú "Change Keyboard Layout" si es que algunas de tus teclas no funcionan correctamente
- Seleccionamos nuestro modelo de teclado (si no estás seguro elige "Generic 105-key (Intl) PC")
- Entra a keyboard layout, en mi caso uso "Spanish Latin American"
- Nos pregunta si nuestro teclado tiene la tecla Alt Gr, yo seleccioné "Right Alt Gr"
- Nos pregunta si tenemos una compose key (Si no sabes que es, lo más seguro es que no la tengas)

Instalar el display server

Basicamente un display server habilita el uso de una GUI coordinando los inputs y outputs con el sistema operativo

No confundir con entorno de escritorio. El entorno de escritorio usa el display server por debajo

Instalamos Xorg por su estabilidad

sudo apt-get install —no-install-recommends xserver-xorg

Si no usamos un login manager comenzaremos directo en la línea de comando. Así que para iniciar el entorno gráfico con un comando deberemos instalar xinit. Este paso no es necesario si tenemos planeado usar un login manager

Desktop enviroment

XFCE

Personalmente prefiero usar este escritorio debido a que lo respalda una gran comunidad, es muy ligero y permite personalizar facilmente

Instalaremos el XFCE GUI, la XFCE4 Terminal y LightDM login manager. Vienen incluidos el XFWM Window Manager, File Manager y los ajustes

sudo apt-get install xfce xfce4-terminal

Otros

Estos no los he probado pero pueden servir bien

Raspberry Pi Desktop (RPD)

Está basado en LXDE y está optimizado para la Raspberry Pi.

Incluye terminal, file manager, configuración y window manager

Instalamos RPD

sudo apt-get install raspberrypi-ui-mods

LXDE

Es un entorno que consume poca memoria, ideal para algunas Raspberries pi.

Incluye, configuración, terminal, file manager y Openbox window manager.

Instalamos LXDE y LXAppearance

sudo apt-get install lxde-core lxappearance

MATE

Un fork de GNOME que activamente incluye nuevas tecnologías preservando la experiencia tradicional de un escritorio

Incluye configuración, terminal, file manager y Marco Window Manager

Instalamos MATE

sudo apt-get install mate-desktop-enviroment-core

Login manager

Instalando XFCE se instala LightDM login manager pero si no se instala por defecto o instalamos otro entorno de escritorio podemos hacerlo con:

sudo apt-get install lightdm

Si no queremos login manager podemos usar el comando de xinit para iniciar el display server

startx

Por último, reiniciamos nuestra Raspberry Pi

sudo reboot

Resultado

RPi OS lite con XFCE

Extras

Conexión SSH con X11 Forwarding

Esto sirve para ejecutar aplicaciones en la Raspberry Pi pero que la GUI de estas se muestre en el cliente.

En la Raspberry Pi

Abrimos el archivo "etc/ssh/ssh_config" con nano
```
sudo nano etc/ssh/ssh_config
```

Agregamos lo siguiente al final para configurar X11 forwarding

X11Forwarding yes
X11DisplayOffset 10
PrintMotd no
PrintLastLog yes
TCPKeepAlive yes

En consola reiniciamos el servicio ssh
```
sudo service ssh restart
```
sudo systemctl restart ssh
Hacemos un test con gvim
```
sudo apt-get install vim-gtk
```

En el cliente (Linux)

Nos conectamos vía ssh con X11 forwarding
```
ssh -X [usuario]@[ip]
```

Creamos un archivo txt de prueba

echo "Este es un archivo de prueba" > prueba.txt

Abrimos el archivo para verificar que la GUI de gvim nos aparece en el cliente
```
gvim prueba.txt
```

Recursos

Foro Raspberry Pi

Configuración del wpa_supplicant.conf

Conexión SSH

Conexión SSH con X11 forwarding.

Qué es un display server

UTF vs ISO.

XFCE vs LXDE

🎃 No tengas miedo a dibujar con CSS

Raúl Martín — Sun, 04 Oct 2020 07:51:00 +0000

La temporada de Halloween está a la vuelta de la esquina es por eso que dibujaremos una decoración escalofríante a tu página web con CSS.

Visita mi sitio raulmar.com para más información

Este dibujo está compuesto por solo tres < div >



<div class="stem"></div>
<div class="face"></div>
<div class="pumpkin"></div>

Sin embargo, se usarán los pseudo-elementos

::before
::after

Así como también la propiedad "box-shadow" para dibujar más figuras de la calabaza sin crear más < div >

Otras propiedades importantes que vamos a utilizar son:

border-radius
clip-path
animaciones
position
transform
variables nativas de CSS

Paso inicial, variables y preparativos

Con CSS vanilla podemos usar variables para que si en un futuro queremos cambiar algo no tengamos que ir buscando que cambiar a lo largo de todo el código

Cuando las declaramos en :root lo que estamos haciendo que es estén disponibles de manera global



:root {
  --main-bg-color: #422261;
  --face: #422261;
}

Otra cosa que podemos hacer antes de comenzar es poner márgenes y padding a 0 para que no nos molesten dibujando así como también definimos un borde rojo que nos ayudará a ver el tamaño y forma de los < div >



* {
  border: 5px solid red;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Por último antes de comenzar usaremos CSS flexbox para alinear nuestro elementos sin importar el tamaño de pantalla



body {
  display: flex; 
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--main-bg-color);
}

Paso 1, dibujar la calabaza

Puede que te preguntes como a partir de un "<div" que tiene forma de caja pudimos crear un óvalo irregular. Con "clip-path" tendría que salir un óvalo perfecto lo que haría que el dibujo perdiera la esencia. Es por eso que usamos "border-radius".

No te preocupes si no conoces la sintaxis que usa "/" para definir base y altura de las esquinas ya que existe fancy-border-radius que es una herramienta que nos ayuda a generar el código para formar figuras irregulares.



.pumpkin {
  position: relative;
  height: 300px;
  width: 170px;
  background-color: #f8931f;
  border-radius: 28% 72% 33% 67% / 21% 83% 17% 79% ;
  transform: rotate(13deg);
  box-shadow:
    -80px 5px 0px -2px #f8931f,   /*BS 1*/
    -40px 4px 0px -1px #fbb03b,   /*BS 2*/
    40px -15px 0px  0px #f87700,  /*BS 3*/
    80px -35px 0px -2px #f8931f;  /*BS 4*/

}

Por otro lado, usamos "box-shadow" para crear copias identicas del elemento ya que nuestra calabaza esta formada por cinco elementos identicos.

Con box-shadow podemos modificar la posición en X y Y con respecto al elemento original, el desenfoque, la escala y el color

El resultado sería el siguiente (BS se refiere a box-shadow)

Paso 2, dibujar el tallo

Aquí usamos position: relative para colocar el tallo en relación a la calabaza.



.stem {
  position: relative;
  bottom: 180px;
  background-color: #8cc63e;
  left: 210px;
  z-index: -1;
  width: 75px;
  height: 150px;
  transform: rotate(30deg);
  border-radius: 58% 42% 69% 31% / 44% 100% 0% 56% ;
}

Position relative vs position absolute

La diferencia más importante a la hora de dibujar es que position relative respeta la posición del elemento dentro del flujo de la página mientras que position absolute no.

position: relative

position: absolute

Paso 2.1, crear máscara para el tallo

Para que el tallo tenga curvatura tenemos que usar una técnica que es usar máscaras para esconder ciertas partes de los elementos, en este caso usaremos una máscara circular.

Esta máscara circular pudo haber sido dibujada con "border-radius: 50%" pero para practicar otra propiedad preferí usar "clip-path: circle(50% at 50% 50%)"



.stem::before {
  content: '';
  border: 20px solid red;
  position: absolute;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: var(--main-bg-color);
  clip-path: circle(50% at 50% 50%);
}

Aquí fue utilizado un pseudo-elemento de tallo ya que la máscara que vamos a usar forma parte del mismo tallo y así nos ahorramos un < div >

También por primera vez usamos una variable de CSS

Paso 3, dibujar la cara

Para dibujar la cara usamos un elemento y sus dos pseudo-elementos

Dibujando los ojos

Ojo izquierdo

Vemos el uso de la varible "—face" que es de especial utilidad aquí por si queremos usar otro color no tener que cambiarlo en cada ojo y boca.



.face {
  width: 75px;
  height: 30px;
  background-color: var(--face);
  position: relative;
  left: 60px;
  bottom: 40px;
  transform: rotate(10deg);
  z-index: 1;
  border-radius: 
    100% 0% 50% 50% / 0% 0% 100% 100%;
}

Ojo derecho

Aquí se uso una rotación de -20deg, que son -10deg para compensar los del ojo izquiero que fuero heredamos por usar el pseudo-elemento y -10deg para girarlo a la posición que buscamos



.face::after {
  content: '';
  position: absolute;
  background-color: var(--face);
  top: -25px;
  left: 120px;
  width: 75px;
  height: 30px;
  transform: rotate(-20deg);
  border-radius: 
    100% 0% 50% 50% / 0% 0% 100% 100%;
}

Dibujando la boca

Aquí usamos específicamente "clip-path" gracias a su opción de crear polígonos personalizados para nuestras necesidades que en esta ocasión era crear la boca más tenebrosa posible



.face::before {
  content: '';
  position: absolute;
  top: 75px;
  left: 15px;
  background-color: var(--face);
  transform: rotate(-10deg);
  width: 200px;
  height: 50px;
  clip-path: polygon(0% 35%, 17% 2%, 21% 37%, 31% 17%, 36% 32%, 49% 6%, 63% 34%, 86% 8%, 85% 30%, 100% 30%, 94% 60%, 79% 98%, 66% 62%, 63% 94%, 53% 76%, 42% 100%, 31% 62%, 17% 96%, 14% 66%);
}

Se usan pares ordenados de coordenadas de cada punto del polígono lo cual es muy complicado sin embargo, gracias a la herramienta clippy podemos generar el código automáticamente

¡Listo!

Una vez terminado podemos eliminar el borde rojo



* {
border: 1px solid red;
}

Bonus, animación

Dentro del elemento .face::before definimos los parámetros iniciales de la animación que son: el nombre de la animación, la duración (que es como la velocidad) y el número de veces que queremos que se repita la animación además de los que ya teníamos



.face::before {
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

Luego creamos los keyframes de la animación que son las guías para que CSS interprete lo que queremos hacer



@keyframes pulse {
  0% {transform: scale(1) rotate(-10deg);}
  50% {transform: scale(1.1) rotate(-10deg);}
  100% {transform: scale(1) rotate(-10deg);}
}

Se mantuvo una rotación de -10deg para que se quedara recta la sonrisa

Recursos