Forem: Jorge Brunal Pérez

Just, Automatizando tus tareas habituales

Jorge Brunal Pérez — Sat, 15 Apr 2023 02:01:38 +0000

Publicado originalmente (2021-11-10) en mi sitio web.

🤖 automatizar!...

En algún punto de nuestros proyectos generamos scripts, para automatizar algunos procesos, ó simplemente tenemos a la mano decenas de comandos (ó alias para ellos) que hacen despliegues, construyen sitios, generan claves aleatorias, consultan el estado del clima, la IP etc...

Y al final del día, tenemos que recordar mil comandos para tareas repetitivas, y es ahí donde brilla Just
un programa para ejecutar tareas, otros programas, un automatizador para dominarlos a todos... 😄

Just provee una sintaxis inspirada en make, para crear las recetas, además de:

funciones predefinidas
uso de variables de entorno
manipulación de strings
manejo de rutas
evaluación de comandos
expresiones condicionales
extender las recetas con scripting en Bash, Python, Ruby, NodeJS, Perl

y un largo etcétera de funcionalidades increibles, para la creación de recetas a tu gusto.

Ejemplo:

nombre-de-tu-receta:
  echo 'Esto es una receta usando Just!'

# esto es un comentario
otra-receta:
  @echo 'Esto es otra receta.'

En Just, los comandos, llamados "recetas", se almacenan en un archivo llamado .justfile, con una sintaxis inspirada en make.

Just se puede utilizar de varias maneras dependendiendo tus necesidades, sin embargo las maneras habituales son:

De forma local, creando un archivo llamado .justfile en la raiz de tu projecto.
De forma global, creando varias tareas de proposito general.

Just de forma local 📌

El archivo .justfile se almacena en la raiz de tu projecto.

Veamos un ejemplo:

Creamos una receta llamada hello que acepta un parámetro llamado guy. Esta receta, invoca a echo y le envía el parámetro establecido.

# .justfile
hello guy:
    @echo "Hello {{ guy }}!"

y al lanzar nuestra receta, tendremos:

$ just hello Tux
Hello Tux!

Un archivo .justfile con recetas en una carpeta de un proyecto de software, puede entre otras cosas, construir el proyecto, lanzar pruebas unitarias, construir la documentación, hacer deploy a un servidor web, etc. Las posibilidades son infinitas.

Just de forma global 🌐

para usar Just de forma global es necesario organizar un archivo, usualmente llamado .user.justfile, con nuestras recetas y alojarlo en la carpeta $HOME de nuestro Sistema Operativo.

Luego, crear un alias (recomendado) para que Just, al ser lanzado cargue ese archivo de recetas.

En nuestro archivo .bashrc ó .zshrc agregar un nuevo alias:

alias .j='just -f ~/.tu_nombre_de_usuario.justfile --working-directory .'

En Windows, el alias se logra con el comando doskey

doskey .j=just -f %USERPROFILE%\.tu_nombre_de_usuario.justfile --working-directory .\ $*

Nuestro alias sera ".j" y podemos utilizarlo como:

$ .j nombre-receta

Esto aplica para cualquier receta ubicada en ~/.user.justfile.

Ejemplo:

Crearemos una receta llamada repo que acepta un parámetro llamado folder. Esta receta, crea una carpeta e inicializa git flow.

# .your_user.justfile
current_path := invocation_directory()

# configurar un nuevo repo usando git flow
repo folder:
    @echo "creando repo en {{ current_path }}/{{ folder }}"
    @echo "directorio de trabajo: {{ folder }}"
    @mkdir -pv {{ folder }}
    @echo
    @echo "iniciando git flow..."
    @cd {{ folder }} && git flow init -fd
    @echo
    @echo "proceso completado en: {{ current_path }}/{{ folder }}"

y al lanzar nuestra receta, tendremos:

$ .j repo awesome-frontend
creando repo en /home/diniremix/dev/awesome-frontend
directorio de trabajo: awesome-frontend
mkdir: se ha creado el directorio 'awesome-frontend'

iniciando git flow...
Inicializado repositorio Git vacío en /home/diniremix/dev/awesome-frontend/.git/
Using default branch names.
No branches exist yet. Base branches must be created now.
Branch name for production releases: [master] 
Branch name for "next release" development: [develop] 

How to name your supporting branch prefixes?
Feature branches? [feature/] 
Bugfix branches? [bugfix/] 
Release branches? [release/] 
Hotfix branches? [hotfix/] 
Support branches? [support/] 
Version tag prefix? [] 
Hooks and filters directory? [/home/diniremix/dev/awesome-frontend/.git/hooks] 

proceso completado en: /home/diniremix/dev/awesome-frontend

Extendiendo Just con Scripts 🚀

En algunas ocasiones queremos ir un poco más allá con nuestras recetas, Just provee un mecanismo sencillo para extenderlas, usando Bash, Python, y otros lenguajes de script.

Lo único que tienes que hacer, es iniciar la receta con "#! (el famoso shebang)

Ejemplo:

# .justfile

receta-python:
  #!/usr/bin/env python3
  print('Hola desde python!')

receta-js:
  #!/usr/bin/env node
  console.log('Saludos desde JavaScript!')

receta-perl:
  #!/usr/bin/env perl
  print "Larry Wall dice Hola!\n";

receta-sh:
  #!/usr/bin/env sh
  set -euxo pipefail
  hello='Yo'
  echo "$hello desde un shell script!"

receta-ruby:
  #!/usr/bin/env ruby
  puts "Hola desde ruby!"

Algunas de las recetas habituales son:

crear una aplicacion/libreria en Rust
crear un proyecto con Python, virtualenv y pip
generar claves de SSH
desplegar un backend de servicios en GAE/Fly/Heroku
ver el clima 😄
la IP actual 😉
mostrar estadisticas de un proyecto, y la cantidad de lineas de código, con tokei.

Referencias

NodeJS, Express y ES6

Jorge Brunal Pérez — Tue, 21 Mar 2023 02:01:16 +0000

Publicado originalmente (2021-01-11) en mi sitio web.

Configurando Express para utilizar ES6 con nodeJS y no morir en el intento.

TL;DR

ECMAScript 2015 ó ES2015 es una importante actualización del lenguaje de programación JavaScript.

Es la primera actualización importante del lenguaje desde ES5, que se estandarizó en 2009.
Por lo tanto, ES2015 suele llamarse ES6.

ES6 permite entre otras cosas:

let -> declarar variables con alcance de bloque utilizando la palabra clave let y las diferencias entre let y var.
const -> definir constantes, usando la palabra clave const.
Establecer el valor por defecto de los parámetros de una función.
Operador de propagación (...).
for...of -> para iterar sobre los elementos de un objeto iterable.
Template literals -> ().
Módulos de ES6(lo que nos compete principalmete en esta entrada) 😄
y un largo etc...

Comenzando

Para este tutorial necesitamos:

nodeJS versión 12.x
npm versión 6.x ó superior

Creando los archivos necesarios.

$ mkdir -pv express-es6/src

$ cd express-es6
$ touch package.json .babelrc .prettierrc src/server.js

La estructura del proyecto deberá lucir como:

├── .babelrc
├── .prettierrc
├── package.json
└── src
    └── server.js

En el archivo .prettierrc agregamos lo siguiente:

{
  "singleQuote": false,
  "printWidth": 80,
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSpacing": false,
  "jsxBracketSameLine": false,
  "parser": "babel",
  "semi": true,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "useTabs": true,
  "tabWidth": 4,
  "endOfLine": "lf"
}

Para más info consulta: Prettier Configuration File

En el archivo .babelrc agregamos lo siguiente:

{
    "presets": [
        ["@babel/preset-env",{
            "targets": {
                // specify supported browsers (ES2015+ Features to transpile)
                "node": "current"
            },
            // no module transpilation to CJS (!important)
            "modules": false
        }]

    ],
    "plugins": [
        ["babel-plugin-module-resolver",
            {
                "root": ["."],
                "extensions": [".js"],
                // some alias
                "alias":
                {
                    "@middlewares": "./src/middlewares",
                    "@modules": "./src/modules",
                    "@routes": "./src/routes"
                }
            }
        ],
        [
            "@babel/plugin-transform-modules-commonjs",
            {
                "allowTopLevelThis": true
            }
        ],
        [
            "@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ]
    ]
}

El en apartado de referencias, al final del post, se encuentran enlaces para continuar la lectura, acerca de la configuración para Babel.

En el archivo package.json agregamos lo siguiente:

{
  ...
  "engines": {
    "node": ">=12.0.0"
  },
  "dependencies": {
    "express": "^4.17.1",
    "module-alias": "^2.2.2"
  },
  "devDependencies": {
    "rimraf": "^3.0.2",
    "@babel/cli": "^7.13.14",
    "@babel/core": "^7.13.14",
    "@babel/node": "^7.13.13",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "babel-plugin-module-resolver": "^4.1.0",
    "prettier": "^2.2.1"
  }
}

Instalando las depedencias

npm install

Utilizando ES6

Ingresamos al directorio src y editamos el archivo server.js

import express from "express";
let server = express();

const port = process.env.PORT || 8080;
const api = "/api";
const version = 0.1;

server.use(function (req, res, next) {
    res.header("Content-Type", "application/json");
    next();
});

server.get("/", async (req, res) => {
    res.status(200).json({
        status: "OK",
        message: `welcome to Server, use ${api} instead`,
    });
});

server.get(api, async (req, res) => {
    res.status(200).json({
        status: "OK",
        message: `Welcome to Server, version: ${version}`,
    });
});

server.get("*", async (req, res) => {
    res.status(404).json({
        status: "Fail",
        message: "Not Found",
    });
});

server.listen(port, function () {
    console.log("server app listening on port:", port);
    console.log("version:", version);
});

Finalizando

Ahora agregamos unas tareas al package.json para facilitar las cosas.

{
  ...

  "scripts": {
    "clean": "rimraf dist",
    "build": "babel src -d dist",
    "dev": "NODE_ENV=development babel-node src/server.js",
    "serve": "NODE_ENV=production node dist/server.js",
    "start": "node server.js",
    "lint": "prettier --config .prettierrc --check \"src/**/*.js\"",
    "lint:fix": "prettier --config .prettierrc --check \"src/**/*.js\" --write"
  },
}

Pruebas

Iniciando el servidor...

$ npm run dev

> ServerWithES6@0.0.1 dev /Users/diniremix/Develop/express-es6
> NODE_ENV=development babel-node src/server.js

server app listening on port: 8080
version: 0.1

curl es tu amigo....

$ curl --request GET \
  --url http://localhost:8080/api \
  --header 'Content-Type: application/json'

{"status":"OK","message":"Welcome to Server, version: 0.1"}%

Construyendo...

$ npm run build

> ServerWithES6@0.0.1 build /Users/diniremix/Develop/express-es6
> babel src -d dist

Successfully compiled 1 file with Babel (527ms).

Chequeando el código con prettier...

$ npm run lint

> ServerWithES6@0.0.1 lint /Users/diniremix/Develop/express-es6
> prettier --config .prettierrc --check "src/**/*.js"

Checking formatting...
[warn] jsxBracketSameLine is deprecated.
All matched files use Prettier code style!

Corrigiendo posibles inconsistencias con prettier...

$ npm run lint:fix

> ServerWithES6@0.0.1 lint:fix /Users/diniremix/Develop/express-es6
> prettier --config .prettierrc --check "src/**/*.js" --write

Checking formatting...
[warn] jsxBracketSameLine is deprecated.
All matched files use Prettier code style!

Todo lo necesario, en este snippet.

Todo esto hace parte de la configuración de Knot, un Proyecto de HomeInside, para construir APIs RESTful y microservicios usando Node.js, Express y Firestore.

Referencias

Limpiar la pantalla en Rust

Jorge Brunal Pérez — Tue, 21 Mar 2023 01:58:00 +0000

Publicado originalmente (2021-10-11) en mi sitio web.

Muchas maneras, el mismo efecto?

Mientras desarrollamos una aplicación que utiliza la línea de comandos, una de las tareas más triviales y necesaria (en muchos casos) es limpiar la pantalla....

Rust provee un par de opciones para tal fin.

Utilizando std:

use std::process;

fn clear_screen() {
    process::Command::new("clear").status().unwrap();    
}

funciona muy bien en sistemas Gnu/Linux y Mac OS.

En sistemas Windows, basta con cambiar "clear" por "cls"

Usando códigos de escape ANSI.

Todos los códigos de escape comienzan por los caracteres ESC (carácter ASCII número 27 decimal, 1B en hexadecimal) seguido del carácter [, tienen cero o más parámetros delimitados por ;

ejemplo:

fn clear_screen() {
    print!("\x1B[2J");
}

Una variante del anterior, que posiciona el cursor en la fila 0, columna 0.

fn clear_screen() {
    print!("\x1B[2J \x1B[0;0f");
}

Otro ejemplo casteando el número 27 como char.

fn clear_screen() {
    print!("{}[2J", 27 as char);
}

Donde:

'\x1B' es el código de escape, que indica que lo que sigue es una secuencia de control.
'[' indica el comienzo de una secuencia de control.
'2' indica el tipo de secuencia de control. En este caso, '2' indica que la pantalla debe ser borrada.
'J' indica cómo se borrará la pantalla. En este caso, 'J' indica que se borrará todo el contenido de la pantalla.

Referencias

notas sobre IndexedDB

Jorge Brunal Pérez — Tue, 21 Mar 2023 01:09:32 +0000

publicado originalmente (2020-11-21) en mi sitio web

IndexedDB es una API de javaScript de bajo nivel que ofrece almacenamiento del lado del cliente.

Permitiendo además almacenar de cantidades significativas de datos estructurados, incluyendo archivos y blobs.

Para búsquedas de alto rendimiento en esos datos, se usa índices, permitiendo busquedas más veloces sobre los datos guardados.
Mientras DOM Storage es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.

Qué tiene que ver esto de IndexedDB con localStorage/sessionStorage?

En la superficie, las dos tecnologías pueden parecer directamente comparables, sin embargo, si pasa algo de tiempo con ellas, pronto se dará cuenta de que no lo son. Fueron diseñados para lograr un objetivo similar, el almacenamiento del lado del cliente, pero abordan la tarea en cuestión desde perspectivas significativamente diferentes y funcionan mejor con diferentes cantidades de datos.

localStorage, o más precisamente Web Storage, fue diseñado para cantidades más pequeñas de datos. Básicamente, se trata de una cadena solo para almacenamiento de valor, con una API síncrona simplista.

indexedDB, por otra parte, fue diseñado para trabajar con cantidades de datos significativamente mayores. Primero, en teoría, proporciona tanto una API síncrona como una asíncrona. Sin embargo, en la práctica, todas las implementaciones actuales son asíncronas y las solicitudes no bloquearán la carga de la interfaz de usuario.

En una reciente revisión de la documentación nos dice:

Las operaciones realizadas con IndexedDB se hacen de forma asíncrona, para no bloquear las aplicaciones. IndexedDB incluía originalmente APIs síncronas y asíncronas. La API sincrónica estaba pensada para ser utilizada únicamente con Web Workers, pero se eliminó de la especificación porque no estaba claro si era necesaria. Sin embargo, la API sincrónica podría reintroducirse si hay suficiente demanda por parte de los desarrolladores web.
MDN Web Docs

Qué navegadores lo soportan?

can I use IndexedDB?

Para qué me sirve esto?

sesiones
perfiles de usuario
almacen de datos (funciona como una base de datos local)
PWA's como la de Pokedex

Hay Límites de almacenamiento?

No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de un navegador a otro.

Aunque por lo general cada navegador maneja diferentes tipos de almacenamiento de datos, el almacenamiento viene en dos tipos:

Temporal: Son datos que no necesitan persistir durante mucho tiempo. Serán eliminados bajo una política de uso menos reciente, cuando se alcancen los límites de almacenamiento.
Persistente: Estos son datos que están destinados a mantenerse durante mucho tiempo. Sólo se desalojarán si el usuario lo decide.

Por ejemplo, en Firefox el espacio máximo de almacenamiento del navegador es dinámico, se basa en el tamaño de su disco duro. El límite global se calcula como el 50% del espacio libre en disco. Cuando se utiliza el almacenamiento persistente, el usuario recibe una ventana emergente de la interfaz de usuario para avisarle de que estos datos van a persistir, y le pregunta si está conforme con ello. El almacenamiento temporal de datos no provoca ninguna pregunta al usuario.

Mientras que en Chrome, el almacenamiento temporal se comparte entre todas las aplicaciones web que se ejecutan en el navegador. El pool compartido puede ser de hasta 1/3 del espacio de disco disponible. Y una aplicación puede tener una cuota mayor para el almacenamiento persistente que para el temporal, pero debe solicitarlo mediante la API de gestión de cuotas y el usuario debe concederle permiso para utilizar más espacio.

Empezando:

Librerías?

Referencias

DockerFile para aplicaciones en Rust

Jorge Brunal Pérez — Tue, 21 Mar 2023 00:08:32 +0000

publicado originalmente (2018-05-01) en mi sitio web

Creando una imagen de Docker para una aplicación en Rust.

Este archivo, se extrajo del repositorio rocket-rust facilitando la creación de una imagen de Docker para aplicaciones en Rust, usando Rocket como Web framework.

FROM ubuntu:16.04

MAINTAINER Awesome User <awesome-user@example.como>

RUN apt-get update \
    && apt-get install -y curl nano file net-tools build-essential

RUN curl https://sh.rustup.rs -s > /home/install.sh && \
    chmod +x /home/install.sh && \
    sh /home/install.sh -y --verbose --default-toolchain nightly

ENV PATH "/root/.cargo/bin:$PATH"

ENV SOURCES=/sources

RUN mkdir -p $SOURCES

ADD ./ $SOURCES

WORKDIR $SOURCES

RUN rustup update

RUN cargo update

RUN cargo build --release

EXPOSE 80
EXPOSE 8080

# CMD ROCKET_ENV=development ./target/release/rocket-rust

CMD ROCKET_ENV=production ./target/release/rocket-rust

referencias

Instalar Kazam en Korora 24 (2016)

Jorge Brunal Pérez — Mon, 20 Mar 2023 23:59:34 +0000

publicado originalmente (2016-09-07) en mi sitio web

Kazam proporciona una interfaz bien diseñada y muy fácil de usar para grabar y hacer capturas de pantalla.

Se puede grabar vídeo y audio del escritorio en múltiples canales simultáneamente. Cuenta con un control de los niveles de audio y permite también seleccionar una región de la pantalla para ser capturada.

El Soporte para códecs H264 y VP8 está integrado por defecto.

Aunque existen numerosos programas para realizar esta labor en Gnu/Linux, Kazam brilla por su simplicidad y potencia a la hora de hacer un screencast de tu escritorio.

Instalando Kazam en Korora 24:

Agregamos el repositorio de home:Kenzy:packages/kazam para Fedora 24.

dnf config-manager --add-repo http://download.opensuse.org/repositories/home:Kenzy:packages/Fedora_24/home:Kenzy:packages.repo

Realizamos la instalación:

dnf install kazam

A la hora de escribir estas líneas, Kazam se encuentra en su versión 1.4.5

listo!.

Usando Kazam en Korora 24

Problemas comunes

En el caso de Korora 24, Kazam puede no funcionar bien y lanzar un error al iniciar, como se aprecia en la siguiente imagen.

Esto es debido posiblemente a un cambio en la versión de python usada (3.5.1 para este caso), para solucionar esto, basta con editar los archivos:

/usr/bin/kazam y seguidamente
/usr/lib/python3.5/site-packages/kazam/backend/config.py

Con tu editor favorito editamos primeramente, el archivo /usr/bin/kazam y agregar las siguientes líneas antes de:

...
from gi.repository import Gtk
...

Quedando de la siguiente manera:

...
import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk
...

Guardamos los cambios y a continuación editamos el archivo /usr/lib/python3.5/site-packages/kazam/backend/config.py

Ubicamos el metodo get y lo reescribiremos.

Antes:

def get(self, section, key):
    try:
        return ConfigParser.get(self, section, key)

Después:

def get(self, section, key, raw=True, fallback='rest'):
    try:
        return super(KazamConfig,self).get(section, key, raw=raw, fallback=fallback)

Estos cambios funcionan bien en Korora 24.

El fallo expuesto aquí, fué reportado y solucionado en la sección bugs del proyecto, estamos atentos a una actualización proximamente.

World of Goo

Jorge Brunal Pérez — Mon, 20 Mar 2023 23:06:34 +0000

World of Goo es un videojuego de lógica, con un fuerte énfasis en la física, Producido por 2D Boy, una desarrolladora de videojuegos independiente compuesta por Kyle Gabler y Ron Carmel, ambos exempleados de Electronic Arts.

No hablaremos del juego en sí, sino de unos curiosos y fascinantes mensajes que aparecen cuando el juego va iniciando, hemos hecho una recopilacion de estos (no sé si están todos) e hicimos una función en Javascript que genera mensajes de Goo aleatorios. 😄

var messages = [
  'Excediendo la capacidad de la CPU',
  'Construyendo capacidad emocional',
  'Comprobando ozono',
  'Cargando',
  'Agitando',
  'Extrayendo',
  'Girando con violencia alrededor del eje de las Y',
  'Debatiendo el arte de los videojuegos',
  'Despreocupandose de los problemas de pareja',
  'Metiendo espectativas en sacos de arena',
  'Licuando Bytes',
  'Yodizando',
  'Probando la perfección',
  'Revolviendo la independencia',
  'Filtrando la moral',
  'Diagramando meticulosamente la diversión',
  'Homogeneizando Goo',
  'Aplacando los editores',
  'Destilando belleza',
  'Autofirmando',
  'Cambiando tiempo por espacio',
  'Fabricando responsabilidad social',
  'Reimaginando con exactitud',
  'Doblando la cuchara',
  'Construyendo una narración no lineal',
  'Aplicando innovación'
];

var tot = messages.length;

function getGoo (max=26) {
  for (i = 0; i < max; i++) {
    var pos = Math.floor(Math.random() * tot);
    var message = messages[pos];
    console.info(message, '...OK');
  }
}

getGoo(7);

referencias

publicado originalmente (2016-02-07) en mi sitio web