Cuando trabajas con componentes de React, es importante definir las props que un componente puede aceptar. Sin embargo, definir cada prop individualmente para un componente puede volverse tedioso y resultar en mucho código repetitivo.

Una forma de reducir la cantidad de código necesario para definir las props es heredar las props del elemento HTML dentro del componente. Por ejemplo, en lugar de definir todas las props para un elemento `<button>`, puedes heredar las props del elemento HTML y solo definir las "props" personalizadas.

Echemos un vistazo a un componente de ejemplo:

```typescript
interface Props {
  onClick: () => void;
  customProp: boolean;
}

function SomeButton({ customProp = false, onClick }: Props): JSX.Element {
  if (customProp) {
    // hacer algo
  }

  return <button onClick={onClick} />;
}
```

En este ejemplo, el componente `SomeButton` tiene dos props: `onClick` y `customProp`. Si queremos agregar una prop className al botón, no podemos hacerlo porque no la hemos definido en la interfaz Props.

```typescript
// esto no es válido porque no tenemos una prop `className`
<SomeButton customProp onClick={doSomething} className="p-3" />
```

Para resolver este problema, podemos definir las props extendiendo `React.ButtonHTMLAttributes<HTMLButtonElement>`. Esto significa que podemos agregar cualquier prop que acepte un botón regular.

```typescript
interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  customProp?: boolean;
}

function SomeButton({ customProp = false, ...props }: Props): JSX.Element {
  if (customProp) {
    // hacer algo
  }

  return <button {...props} />;
}
```

Con esta implementación actualizada de `SomeButton`, ahora podemos agregar la prop `className`, junto con cualquier otra prop que acepte un botón regular.

```typescript
// esto funciona
<SomeButton customProp onClick={doSomething} className="p-3" {...anyOtherProp} />
```

Esta técnica se puede aplicar a cualquier elemento HTML en el que se base un componente. Por ejemplo, si el componente se basa en un elemento `<div>`, podemos heredar las props de `React.HTMLAttributes<HTMLDivElement>` en su lugar.

```typescript
interface Props extends React.HTMLAttributes<HTMLDivElement> {
  customProp?: boolean;
}
```

Al heredar props del elemento HTML dentro de un componente, podemos reducir la cantidad de código repetitivo necesario para definir las props, al tiempo que nos permite agregar cualquier prop que acepte el elemento HTML.

Declaraciones eficientes de props en componentes de React.

Si tienes una aplicación de Laravel que programa comandos para que se ejecuten en momentos específicos utilizando el archivo `app/Console/Kernel.php`, es posible que desees agregar una prueba que garantice que el comando fue programado correctamente.

Primero, crea un nuevo archivo de prueba en el directorio de pruebas de tu aplicación de Laravel. En este ejemplo, llamaremos al archivo KernelTest.php y su objetivo será probar que el comando `inspire` se programa para ejecutarse cada hora.

_Nota: Para el ejemplo, estoy utilizando la sintaxis de Pest, pero deberías poder adaptar el código en caso de que utilices phpunit u otro:_

```php
use Illuminate\Console\Scheduling\Event;
use Illuminate\Console\Scheduling\Schedule;

it('schedules the `inspire` command' , function () {
    $schedule = app()->make(Schedule::class);

    $events = collect($schedule->events())->filter(function (Event $event) {
        return stripos($event->command, 'inspire');
    });

    if ($events->count() == 0) {
        $this->fail('No se encontraron eventos');
    }

    $events->each(function (Event $event) {
        $this->assertEquals('0 * * * *', $event->expression);
    });
});
```

En esta prueba, primero obtenemos una instancia de la clase Schedule utilizando la función `app()`. Luego, utilizamos el método `events()` para obtener un array de todos los eventos programados.

Luego, utilizamos el método `filter()` para encontrar cualquier evento cuya propiedad `command` contenga la palabra 'inspire'. Si no se encuentran eventos, fallamos la prueba.

Si se encuentra uno o más eventos, utilizamos el método `each()` para recorrer cada evento y comprobar que la propiedad `expression` esté configurada como `'0 * * * *'`, lo cual indica que el comando está programado para ejecutarse cada hora.

Para ejecutar la prueba, utiliza el siguiente comando:

```console
php artisan test --filter KernelTest
```

Esta prueba debería pasar si el comando inspire se programa para ejecutarse cada hora en la clase Kernel.

¡Eso es todo! Ahora tienes una prueba para asegurarte de que tus comandos programados se estén ejecutando correctamente en tu aplicación de Laravel.

Prueba que un comando de Laravel está programado

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 ✌️.

Publicaciones / Página 2

Declaraciones eficientes de props en componentes de React.

Prueba que un comando de Laravel está programado

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.