MetaMask es una popular extensión del navegador que permite a los usuarios interactuar con aplicaciones basadas en Ethereum. Está disponible para Chrome, Firefox, Brave, Edge y Opera. En esta publicación, exploraremos cómo detectar si el navegador de un usuario es compatible con MetaMask.

Una forma de verificar la compatibilidad es simplemente comprobar si el objeto `window.ethereum` está presente. Este objeto solo está definido en los navegadores que tienen instalado MetaMask (incluido el navegador de MetaMask en dispositivos móviles), por lo que si está presente, podemos asumir que el navegador es compatible.

```js
if (!!window.ethereum) {
	return true;
}
```

Sin embargo, es posible que también queramos verificar la compatibilidad incluso si MetaMask no está instalado. En este caso, podemos verificar el tipo de navegador del usuario y excluir los navegadores móviles, ya que MetaMask no está disponible actualmente en dispositivos móviles.

```js
const isCompatible = /chrome|firefox/.test(navigator.userAgent.toLowerCase());
const isMobile = /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());

if (isCompatible && !isMobile) {
	return true;
}
```

Juntando todo, podemos crear una función que devuelva un valor booleano que indique si el navegador es compatible con MetaMask.

```js
function isMetaMaskSupportedBrowser() {
	// Si el usuario tiene MetaMask instalado, podemos asumir que está en un navegador compatible
	if (!!window.ethereum) {
		return true;
	}

	const isCompatible = /chrome|firefox/.test(navigator.userAgent.toLowerCase());
	const isMobile = /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());

	return isCompatible && !isMobile;
}
```

Esta función puede ser útil para mostrar un mensaje de advertencia o error a los usuarios que utilicen un navegador no compatible, o para limitar la funcionalidad de una aplicación solo a navegadores compatibles.

Detectar si el navegador es compatible con MetaMask.

Las aplicaciones de línea de comandos (CLIs) son una forma útil de interactuar con tu computadora y realizar tareas sin una interfaz gráfica. Son especialmente útiles para automatizar tareas y escribir scripts.

En este tutorial, aprenderemos cómo crear una aplicación de línea de comandos en Rust que *hipotéticamente* lee una ruta de archivo dada y guarda su contenido en una base de datos. Para hacer esto, utilizaremos el [crate clap](https://docs.rs/clap/latest/clap/). clap es un analizador de argumentos de línea de comandos que simplifica el proceso de analizar los argumentos y opciones pasados a tu CLI.

Primero, necesitaremos agregar clap a nuestro archivo Cargo.toml. Para hacerlo, ejecuta el siguiente comando en tu consola:

```console
cargo add clap --features derive
```

Alternativamente, puedes agregar manualmente la dependencia de esta forma:

```toml
[dependencies]
clap = { version = "4.0.32", features = ["derive"] }
```

A continuación, crea un nuevo archivo Rust (`main.rs`) y agrega el siguiente código:

```rust
use clap::Parser;

/// Lee el archivo de entrada y guarda el contenido en una base de datos
#[derive(Parser, Debug)]
#[command(author = "Alfonso Bribiesca", version, about, long_about = None)]
struct Args {
    /// Ruta del archivo a leer
    input_file: String,

    /// Crea una nueva tabla
    #[arg(short, long, default_value = "false")]
    create_table: bool,

    /// Elimina la tabla
    #[arg(short, long, default_value = "false")]
    drop_table: bool,

    /// Nombre de la tabla
    #[arg(short, long="table", default_value = "")]
    table_name: String,
}
```

Este código es para un CLI que lee un archivo de entrada y guarda su contenido en una base de datos.

Define una estructura llamada `Args` que representa los argumentos y opciones pasados al CLI. El atributo `#[derive(Parser, Debug)]` genera código para analizar los argumentos y opciones de la línea de comandos y para imprimir los valores de la estructura Args. El atributo `#[command(author = "Alfonso Bribiesca", version, about, long_about = None)]` proporciona metadatos sobre el CLI, como el nombre del autor y una breve descripción del CLI.

La estructura `Args` contiene cuatro campos:

- `input_file`: un `String` que representa el archivo de entrada pasado como primer argumento al CLI.
- `create_table`: un `bool` que representa si la opción create_table está configurada. Si se establece esta opción, hipotéticamente se creará una nueva tabla en la base de datos.
- `drop_table`: un `bool` que representa si la opción drop_table está configurada. Si se establece esta opción, hipotéticamente se eliminará la tabla de la base de datos.
- `table_name`: un `String` que representa el nombre de la tabla que hipotéticamente se utilizará para nombrar la tabla de la base de datos.

Para definir los argumentos y opciones para nuestro CLI, utilizamos el atributo `#[arg(short, long, value_name = "VALUE", index = INDEX, default_value = "DEFAULT")]`. Los argumentos `short` y `long` definen las formas abreviadas y completas de la opción, respectivamente. El argumento `default_value` especifica un valor predeterminado para la opción si no se proporciona.

Ahora agreguemos la función principal a nuestro código:

```rust
fn main() {
    let args = Args::parse();

    // Imprime todos los argumentos
    println!("{:#?}", args);
}
```

En la función principal, llamamos al método `Args::parse()` para analizar los argumentos y opciones de la línea de comandos. Este método devuelve una estructura Args que contiene los valores de los argumentos y opciones pasados al CLI.

Luego, podemos imprimir los valores de la estructura Args utilizando la macro `println!`. Esto es útil para depurar y comprender los valores pasados al CLI.

Con esto, tendrás un CLI básico. Ahora depende de ti agregar la funcionalidad real.

Puedes probar la aplicación ejecutando el comando:

```console
cargo run -- <arguments>
```

Reemplaza `<arguments>` con los argumentos y opciones que desees pasar al CLI. Por ejemplo:

`cargo run -- --drop-table --table=my-table /ruta/al/archivo.xls`

Debería mostrar la siguiente salida:

```console
Args {
    input_file: "/ruta/al/archivo.xls",
    create_table: false,
    drop_table: true,
    table_name: "my-table",
}
```

También puedes usar la opción `--help` para ver una lista de las opciones disponibles y un resumen de tu aplicación.

`cargo run -- --help`

```console
Lee el archivo de entrada y guarda el contenido en una base de datos

Uso: parser [OPTIONS] <INPUT_FILE>

Argumentos:
  <INPUT_FILE>  El primer argumento posicional es el archivo de entrada

Opciones:
  -c, --create-table        Crea una nueva tabla
  -d, --drop-table          Elimina la tabla
  -t, --table <TABLE_NAME>  Nombre de la tabla [por defecto: ]
  -h, --help                Mostrar información de ayuda
  -V, --version             Mostrar información de versión
```

¡Espero que esto te ayude! Avísame si tienes alguna pregunta.

Construyendo una Aplicación de Línea de Comandos en Rust

Estaba seguro de algo cuando decidí comenzar este sitio: escribiría todo el contenido en inglés, a pesar de que 1. no es mi lengua materna y 2. digamos que los idiomas en general nunca han sido mi mayor fortaleza y el inglés no es una excepción.

El inglés es el idioma más hablado en todo el mundo, y aunque no tengo fuentes para demostrarlo, estoy seguro de que en el campo de la tecnología y el software, el porcentaje total de personas que hablan inglés es aún mayor, sumado al hecho de que uno de mis intereses con este sitio es alcanzar y conectar con personas de todo el mundo.

![](https://alfonsobries.s3.amazonaws.com/blog/pKVjU2EZG2hdDT9JHP1uc84MBrH0gcKN9koSwWQZ.png)

Si escribir ya es un desafío, escribir en otro idioma pone a prueba tu paciencia. Tienes que revisar el contenido muchas veces para asegurarte de que se entienda, y aún así puedes cometer errores. En mi caso y tal vez en el caso de otros, esos errores pueden convertirse en inseguridades sobre la calidad de mi contenido y desalentarme a continuar con este proyecto.

De todos modos..., algo que me funcionó para superar mi miedo a hablar (o escribir) en inglés fue darme cuenta de que no debería sentirme mal por no dominar completamente un idioma diferente y que la mejor manera de mejorar es practicar, cometer errores y recibir retroalimentación. Bajo esa premisa, decidí agregar una función a este sitio para permitir que mis lectores me brinden esa retroalimentación, para que pueda corregir el error y aprender.

### ¿Cómo funciona este formulario?

En la esquina inferior izquierda, agregué un avatar basado en el meme [Winnie the Pooh Reading](https://knowyourmeme.com/memes/winnie-the-pooh-reading) que parecía representar la sensación que se experimenta cuando no se entiende algo. Aparece cuando comienzas a desplazarte por el sitio, ya que lo tomo como una señal de que el usuario está leyendo la publicación.

![](https://alfonsobries.s3.amazonaws.com/blog/8CLlmBh1tgSgspKYTI04ambitbkYzuQkcWECqDJE.png)

![](https://alfonsobries.s3.amazonaws.com/blog/mAMez8z4Is0fT425KL5jsSgdCR3cUX8SJJtMtdfA.gif)

Cuando haces clic, aparece un pequeño formulario para que puedas informarme rápidamente sobre el error que notaste sin salir de la página.

![](https://alfonsobries.s3.amazonaws.com/blog/3BTMpFqco3Oi75ATWTSeemyubSJcfpHEZHrFFP4k.gif)

El formulario se puede ocultar temporalmente en caso de que desees copiar y pegar algo o volver a leer el texto.

![](https://alfonsobries.s3.amazonaws.com/blog/7H9wfj5iXw7c84VvWnLbGp6QIcEWZHVpf1qSylfE.gif)

Utilicé la API de Telegram para que cuando se envíe un nuevo informe, reciba de inmediato una notificación con un enlace para ver o editar la publicación y así resolver el problema lo antes posible.

![](https://alfonsobries.s3.amazonaws.com/blog/Q5EMOm8xKQ9vRRO578d9NGjwushOTuCokxvnXeni.png)

¿Qué opinas? Puedes usar el "formulario de errores tipográficos" para dejar algunos comentarios.

Hasta la próxima actualización del blog ✌️.

Actualización del blog: Agregué una forma de informar sobre artículos confusos o errores gramaticales.

Cuando utilizas Vercel para proyectos monolíticos que pueden contener archivos que no forman parte del frontend, es posible que te encuentres en una situación en la que cada vez que modificas algo que no es necesariamente parte del frontend, Vercel inicia un "despliegue" que reconstruye el sitio automáticamente.

En esos casos, es posible que necesites asegurarte de que el proceso de "despliegue" solo se active cuando sea necesario.

Afortunadamente, Vercel tiene una configuración de "Ignored Build Step" que te permite deshabilitar el este paso para escenarios específicos. El problema es que los ejemplos explican cómo activar el paso de construcción en una carpeta en particular, pero no cómo ignorar la carpeta (por ejemplo, supongamos que no deseas reconstruir todo el sitio si solo cambiaste la carpeta `/api`).

Para hacer eso, sigue estos pasos:

1. Ve a la configuración del proyecto:

![](https://api.alfonsobries.com/storage/DoaxRUowmHYORuYYPPHxA1QPNxNdVrzqMyf2SuRt.png)

2. Selecciona la pestaña Git:

![](https://api.alfonsobries.com/storage/zBzfT3bjk0JKDbn6YgSNKsMqwBonTEvQKotEs6DA.png)

3. Ve a "Ignored Build Step":

![](https://api.alfonsobries.com/storage/w1ZobWcgwRIpq7ScJbRChZQ0H3kEOnnBVcFBJMcG.png)

4. Agrega el siguiente código:

```console
# Cambia `./api` por la ruta de la carpeta que deseas ignorar
git diff HEAD^ HEAD --quiet ':!./api'
```

![](https://api.alfonsobries.com/storage/bJ1DqeQrMQrbkARePI4pJi30LGFQ0ZXT1Mv4r0Q5.png)


También es posible que desees ignorar ciertos tipos de archivos. Para esos casos, modifica el código de la siguiente manera:

```console
# Reemplaza `'php'` por las extensiones de archivo que deseas ignorar.
git diff HEAD^ HEAD --quiet ':!*.php'
```

También puedes agregar múltiples tipos de archivo:

```console
git diff HEAD^ HEAD --quiet ':!*.php' ':!*.png'
```

O un solo archivo:

```console
git diff HEAD^ HEAD --quiet ':!config.ts'
```

Como ignorar el  "build step" de Vercel para ciertos archivos

Hace unas semanas, decidí dejar de usar Twitter temporalmente, a pesar de que Twitter es, con mucho, mi red social favorita por varias razones. Entre ellas, sigo a personas que admiro y que me motivan a hacer cosas. Además, como desarrollador, es una excelente manera de saber sobre nuevas tecnologías y proyectos antes que nadie y siempre encuentras algo nuevo para aprender. Los memes son divertidos y, en general, siempre se encuentran cosas interesantes. Por último, es un gran lugar para conectar con personas de intereses comunes en todo el mundo.

Entonces, ¿cuál es el problema? Creo que Twitter no ha hecho un gran trabajo ayudándote a evitar el contenido que no deseas ver o que, en mi caso, me genera cierto grado de estrés y ansiedad. La guerra, la pandemia y la política en mi país, entre otros. En resumen, una bomba de información no deseada que no hace más que afectar mi estado mental y, por lo tanto, mi bienestar.

Durante el tiempo que he estado de vacaciones de Twitter, he estado tratando de encontrar una alternativa para no desconectarme del mundo. Pensé que un blog podría ser una excelente manera de lograrlo. Un par de razones:

- Un blog tiene la ventaja de ser un medio unidireccional para crear contenido, lo que significa que compartes información, pero no necesariamente recibes una respuesta inmediata, ni tienes que unirte a la conversación.
- Te permite generar contenido que no caduca tan rápidamente como en otras redes sociales y puede ser útil para más personas durante más tiempo.
- Si lo necesitas, puede ser una excelente manera de tener algo de contenido para compartir en tus redes sociales.
- Y finalmente (y tal vez lo más importante), necesitaba un sitio personal para compartir parte de mi trabajo.

Además, crear un blog fue uno de esos proyectos que tenía en mente desde hace mucho tiempo (creo que es algo de los desarrolladores de software 😅). Quería hacer algo muy personal y flexible en caso de que quisiera agregar más características.

Como no soy diseñador, pero esperaba tener un sitio bien diseñado y muy personal, pasé algo de tiempo tratando de encontrar inspiración y desarrollar ideas de cómo quería que se viera mi blog. Por ejemplo, una de las cosas que quería era poder agregar algunos "easter eggs" (solo porque puedo 🤷‍♂️). ;e pareció que agregar memes sería una forma de lograrlo, y a todos les encantan los memes, ¿verdad? Finalmente, pensé, ¡hey! ¿Y si yo mismo soy el meme?

Para hacer esto, primero tuve que crear un personaje y, como me gustan las tiras cómicas, intenté inspirarme en ilustradores como [Sarah Andersen](https://sarahcandersen.com/), [Quino](https://www.quino.com.ar/), [Fowls comics](https://www.fowllanguagecomics.com/), [The Oatmeal](https://theoatmeal.com/) y muchos más que me gustan.

![](https://alfonsobries.s3.amazonaws.com/blog/2gPLkPZWNh5ZpWoYk6F1IXNzJT0whHvGSwUTyfQ0.png)

Así que me puse manos a la obra y comencé a hacer bocetos rápidos de este personaje "Alfonso" que puedes ver en todas partes de este sitio.

![](https://alfonsobries.s3.amazonaws.com/blog/k0rwhFpAc6jOr7sm2n2K1daNAhTBkUygOlFbC0Vn.jpg)

![](https://alfonsobries.s3.amazonaws.com/blog/7byCozUsTB2QYD6Bwxoro7AHYpm2Bf7pg9i9rR11.jpg)

Utilicé una mezcla de paciencia, una tableta Wacom y algo de magia con Affinity Photo y Affinity Designer hasta obtener lo que sería mi avatar (y quién sabe, tal vez un personaje de mi webcómic en el futuro).

![](https://alfonsobries.s3.amazonaws.com/blog/eLRzw8X7gfl2umbnsy4xMNYHS5X47d4OJ0RDlaTk.png)

En cuanto al diseño, mi objetivo era crear un sitio minimalista pero divertido y lleno de memes. Estas son algunas de las cosas que dibujé en mi cuaderno:

![](https://alfonsobries.s3.amazonaws.com/blog/5P0kSPDgd8QjKecOKKVb5TputQXcKhR2wsLd0chK.png)

El diseño evolucionó a medida que avanzaba con el sitio web. No utilicé todos los elementos que inicialmente había ideado y agregué algunos nuevos que dieron como resultado el sitio web que estás viendo.

### Tecnología

En cuanto a la tecnología, a pesar de considerarme un "Vue-boy", opté por hacer mi sitio en React + Next.js en esta ocasión. Algunas de las razones:

1. Debido a la integración que tiene con Vercel.
2. Porque quería aumentar mi portafolio con React.
3. Quería experimentar con la tecnología de sitio estático de Next.js.

Por supuesto, elegí TailwindCSS para el estilo, que básicamente es lo mejor que me ha pasado como desarrollador web en mucho tiempo.

### Sobre la generación de sitios estáticos

Quería que este sitio fuera rápido y obtuviera una puntuación del 100% en Lighthouse, y la mejor manera de lograrlo era con un sitio estático. El problema con los sitios estáticos es que no es fácil actualizar el contenido, ya que tienes que recompilar el sitio cada vez que ajustas algo. Además, el contenido no es exactamente dinámico (como se esperaría de un blog) ya que no realiza llamadas al servidor.

Aquí tienes un resumen rápido de lo que hice para resolver el problema:

Creé un administrador de contenido con [Laravel Nova](https://nova.laravel.com/) donde puedo agregar proyectos, publicaciones de blog y ajustar mi currículum (que también está alojado en este sitio). Configuré los distintos modelos de base de datos para marcar el sitio como "caducado" cada vez que modifico algo y agregué un cron-job que verifica cuándo vence el contenido y, si es así, llama a un [deploy hook de Vercel](https://vercel.com/docs/concepts/git/deploy-hooks) que le indica a Vercel que necesita recompilar.

En el peor de los casos, el sitio estará desincronizado durante 2 minutos, pero tampoco soy CNN, así que no me importa ¯\_(ツ)_/¯

¿Qué te pareció el sitio?

¿Pudiste encontrar todos los memes ocultos?

Me encantaría leer tus comentarios. Escríbeme a través de [Twitter](https://twitter.com/alfonsobries) o utiliza el [formulario de contacto](/contacto). Prometo añadir una forma de comentar directamente en este sitio pronto.

– Alfonso

Publicaciones / Página 2

Detectar si el navegador es compatible con MetaMask.

Construyendo una Aplicación de Línea de Comandos en Rust

Actualización del blog: Agregué una forma de informar sobre artículos confusos o errores gramaticales.

Como ignorar el "build step" de Vercel para ciertos archivos

Bienvenido a mi nuevo sitio personal