Para ejecutar automáticamente el comando "pint" de Laravel en VS Code al guardar archivos PHP, sigue estos pasos:

1. Instala la extensión "Run on Save" de "emeraldwalk" desde el [Marketplace de Extensiones de VS Code](https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave).

2. Configura la extensión para correr el comando `pint` cada vez que guardas un archivo php en  `settings.json`:

```json
   "emeraldwalk.runonsave": {
	  "commands": [
		{
		  "match": "\\.php$",
		  "cmd": "${workspaceFolder}/vendor/bin/pint ${file}"
		}
	  ]
	}
```

3. Abre un archivo PHP en tu proyecto de Laravel, realiza un cambio y guárdalo (`Ctrl+S`).

4. Observa la salida del comando `php artisan pint` en la terminal en la parte inferior de la ventana de VS Code.

Corre Laravel Ping al guardar un archivo PHP con VS Code

En este breve tutorial, te mostraré cómo listar las ramas recientes de GitHub en tu terminal utilizando un comando sencillo, y cómo crear un alias para ese comando que te permitirá ahorrar tiempo y optimizar tu flujo de trabajo.

### Listar las ramas recientes de GitHub

Para listar las 20 ramas más recientes en tu repositorio local, ingresa el siguiente comando en tu terminal:

```console
git for-each-ref --count=20 --sort=-committerdate refs/heads/ --format='%(refname:short)'
```
*Este comando mostrará las 20 ramas más recientes, ordenadas por la fecha del commit en orden descendente.*


### Crear un alias para el comando

Para hacer el proceso aún más eficiente, puedes crear un alias para el comando. Agrega la siguiente línea a tu archivo de configuración de shell `.bashrc`, `.zshrc` u otro archivo relevante:

```console
alias rb="git for-each-ref --count=20 --sort=-committerdate refs/heads/ --format='%(refname:short)'"
```

Después de guardar los cambios en el archivo de configuración, reinicia tu terminal o ejecuta el comando `source ~/.bashrc`. A partir de ahora, podrás listar tus ramas recientes utilizando el alias `rb`.

Listar ramas recientes de Git en la terminal.

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.

Publicaciones

Corre Laravel Ping al guardar un archivo PHP con VS Code

Listar ramas recientes de Git en la terminal.

Declaraciones eficientes de props en componentes de React.

Prueba que un comando de Laravel está programado

Detectar si el navegador es compatible con MetaMask.