To automatically run laravel pint in VS Code when saving PHP files, follow these steps:

1. Install the `emeraldwalk` ["Run on Save"](https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave) extension from the VS Code Extensions Marketplace.

2. In your `settings.json` file, Configure the "Run on Save" extension to run the pint command every time you save a PHP file :
   
```json
   "emeraldwalk.runonsave": {
	  "commands": [
		{
		  "match": "\\.php$",
		  "cmd": "${workspaceFolder}/vendor/bin/pint ${file}"
		}
	  ]
	}
```

3. Open a PHP file in your Laravel project, make a change, and save it (`Ctrl+S`).

4. Witness the `php artisan pint` command's output in the terminal at the bottom of the VS Code window.

Run Laravel Pint on Save with VS Code

In this quick tutorial, we'll show you how to list the recent GitHub branches in your terminal using a simple command, and how to create an alias for that command to save time and streamline your workflow.

### Listing Recent GitHub Branches

To list the 20 most recent branches in your local repository, enter the following command in your terminal:

```console
git for-each-ref --count=20 --sort=-committerdate refs/heads/ --format='%(refname:short)'
```
*This command will display the 20 most recent branches, sorted by the commit date in descending order.*


### Creating an Alias for the Command

To make the process even more efficient, you can create an alias for the command. Add the following line to your `.bashrc`, `.zshrc`, or other relevant shell configuration file:

```console
alias rb="git for-each-ref --count=20 --sort=-committerdate refs/heads/ --format='%(refname:short)'"
```

After saving the changes to the configuration file, restart your terminal or run source ~/.bashrc, from now on you should be able to list your recent branches using the alias `rb`

List Recent GitHub Branches in Terminal

When working with React components, it's important to define the props a component can accept. However, defining every single prop for a component can become tedious and result in a lot of boilerplate code.

One way to reduce the amount of code needed to define props is to inherit props from the HTML element inside the component. For example, instead of defining all the props for a `<button>` element, you can inherit the props from the HTML element and only define the "custom" ones.

Let's take a look at an example component:

```typescript
interface Props {
  onClick: () => void;
  customProp: boolean;
}

function SomeButton({ customProp = false, onClick }: Props): JSX.Element {
  if (customProp) {
    // do something
  }

  return <button onClick={onClick} />;
}
```

In this example, the `SomeButton` component has two props: `onClick` and `customProp`. If we want to add a className prop to the button, we can't do so because we did not define it in the Props interface.

```typescript
// this is not valid because we don't have a `className` prop
<SomeButton customProp onClick={doSomething} className="p-3" />
```

To solve this problem, we can define the props by extending `React.ButtonHTMLAttributes<HTMLButtonElement>`. This means that we can add any prop that a regular button accepts.

```typescript
interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  customProp?: boolean;
}

function SomeButton({ customProp = false, ...props }: Props): JSX.Element {
  if (customProp) {
    // do something
  }

  return <button {...props} />;
}
```

With this updated implementation of `SomeButton`, we can now add the `className` prop, along with any other prop that a regular button accepts.

```typescript
// this works
<SomeButton customProp onClick={doSomething} className="p-3" {...anyOtherProp} />
```

This technique can be applied to any HTML element that a component is based on. For example, if the component is based on a `<div>` element, we can inherit props from `React.HTMLAttributes<HTMLDivElement>` instead.

```typescript
interface Props extends React.HTMLAttributes<HTMLDivElement> {
  customProp?: boolean;
}
```

By inheriting props from the HTML element inside a component, we can reduce the amount of boilerplate code needed to define props, while still allowing us to add any prop that the HTML element accepts.

Efficient Prop Declarations in React Components

If you have a Laravel application that schedules commands to run at specific times using the `app/Console/Kernel.php` file, you may want to add a test that ensures that the scheduled command is running correctly.

First, create a new test file in the tests directory of your Laravel application. In this example, we'll call the file KernelTest.php and the purpose is to test that the `inspire` command is scheduled to run every hour.

_Note: For the example I am using the phppest syntax but you should be able to adapt the code in case you use the built-in syntax:_

```php
use Illuminate\Console\Scheduling\Event;
use Illuminate\Console\Scheduling\Schedule;

it('schedules the `inspire` command correctly', 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 events found');
    }

    $events->each(function (Event $event) {
        $this->assertEquals('0 * * * *', $event->expression);
    });
});
```

In this test, we first get an instance of the Schedule class using the app function. We then use the events method to get an array of all scheduled events.

We then use the filter method to find any events that have the command property containing the word 'inspire'. If no events are found, we fail the test.

If one or more events are found, we use the each method to loop through each event and assert that the expression property is set to `'0 * * * *'`, which indicates that the command is scheduled to run every hour.

To run the test, use the following command:

```console
php artisan test --filter KernelTest
```

This test should pass if the inspire command is scheduled to run every hour in the Kernel class.

That's it! You now have a test to ensure that your scheduled commands are running correctly in your Laravel application.

Test that a laravel command is scheduled

MetaMask is a popular browser extension that allows users to interact with Ethereum-based applications. It is available for Chrome, Firefox, Brave, Edge, and Opera. In this post, we will explore how to detect if a user's browser is compatible with MetaMask.

One way to check for compatibility is to simply check if the `window.ethereum` object is present. This object is only defined in browsers that have MetaMask installed (including the metamask browser on mobile devices), so if it is present, we can assume that the browser is compatible.

```js
if (!!window.ethereum) {
	return true;
}
```

However, we may also want to check for compatibility even if MetaMask is not installed. In this case, we can check the user's browser type and exclude mobile browsers, as MetaMask is not currently available on mobile.

```js
const isCompatible = /chrome|firefox/.test(navigator.userAgent.toLowerCase());
const isMobile = /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());

if (isCompatible && !isMobile) {
	return true;
}
```

Putting it all together, we can create a function that returns a boolean indicating whether the browser is compatible with MetaMask.

```js
function isMetaMaskSupportedBrowser() {
	// If the user has MetaMask installed, we can assume they are on a supported browser
	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;
}
```

This function can be useful for displaying a warning or error message to users who are on an unsupported browser, or for limiting the functionality of an application to only supported browsers.

Posts

Run Laravel Pint on Save with VS Code

List Recent GitHub Branches in Terminal

Efficient Prop Declarations in React Components

Test that a laravel command is scheduled

Detect if Browser Supports MetaMask