This zen mode setup provides a seamless and focused coding experience by elegantly concealing default UI elements. The typical UI elements, such as sidebars, menus, and toolbars, gracefully fade away, allowing code to take center stage.

## My Zen Workflow

- [Settings Cycler](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler)
- [Settings](#settings)
- [Keybindings](#keybindings)

### Settings Cycler

[Settings Cycler](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler) an extention that allows you to toggle settings with custom keybindings.

### Settings

Paste these in your VSCode [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations)

```json
{
  "settings.cycle": [
    {
      "id": "zenOn",
      "overrideWorkspaceSettings": true,
      "values": [
        {
          "workbench.activityBar.visible": false,
          "workbench.statusBar.visible": false,
          "workbench.editor.showTabs": false,
          "window.menuBarVisibility": "hidden",
          "workbench.layoutControl.enabled": false,
          "breadcrumbs.enabled": false,
          "workbench.tips.enabled": false,
          "editor.overviewRulerBorder": false,
          "window.commandCenter": false,
          "workbench.sideBar.location": "right",
          "window.title": "${folderName}${separator}${profileName}",
          "workbench.startupEditor": "none",
          "editor.minimap.enabled": false,
          "workbench.editor.decorations.colors": false,
          "workbench.editor.decorations.badges": false
        }
      ]
    },
    {
      "id": "zenOff",
      "overrideWorkspaceSettings": true,
      "values": [
        {
          "workbench.activityBar.visible": true,
          "workbench.statusBar.visible": true,
          "workbench.editor.showTabs": true,
          "window.menuBarVisibility": "classic",
          "workbench.layoutControl.enabled": true,
          "breadcrumbs.enabled": true,
          "workbench.tips.enabled": false,
          "editor.overviewRulerBorder": true,
          "window.commandCenter": true,
          "workbench.sideBar.location": "right",
          "window.title": "${folderName}${separator}${profileName}",
          "workbench.startupEditor": "none",
          "editor.minimap.enabled": false,
          "workbench.editor.decorations.colors": false,
          "workbench.editor.decorations.badges": false
        }
      ]
    }
  ]
}
```

### Keybindings

Paste these in your [keybindings.json](https://code.visualstudio.com/docs/getstarted/keybindings#_advanced-customization)

#### Windows
```json
[
  {
    "key": "ctrl+k z",
    "command": "settings.cycle.zenOn"
  },
  {
    "key": "ctrl+k y",
    "command": "settings.cycle.zenOff"
  }
]
```

#### MacOS
```json
[
  {
    "key": "cmd+k z",
    "command": "settings.cycle.zenOn"
  },
  {
    "key": "cmd+k y",
    "command": "settings.cycle.zenOff"
  }
]
```

## Advantages of this Setup

- Two seperate keybindings to turn zen mode on and off allows you to toggle any UI element and still easily revert back to zen mode
- This setup is persistent globally and you don't need to toggle zen mode for every new project

This zen mode setup provides a seamless and focused coding experience by elegantly concealing default...

Minimalistic VSCode: Better Zen Mode in VSCode

Nwanguma Victor

## 1. Install Ant degin and ant design icons for Vue
```sh
yarn add ant-design-vue @ant-design/icons-vue
```

## 2.  Create a new file named `antd.ts` under the plugins folder
Copy and paste this code inside
```ts
import {defineNuxtPlugin} from "#app";
import 'ant-design-vue/dist/antd.css';
import Antd from 'ant-design-vue';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Antd)
})
```

## 3. Register your newly created plugin
```ts
import { defineNuxtConfig } from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    plugins:['@/plugins/antd']
})
```

## 4. Enjoy 🚀
From now you can enjoy Ant design by running your nuxtjs development server:
```sh
yarn dev
```
POV: 
- The current plugin registers all components. If you want to register only a few or want to do any customization please refer to Ant design docs and update your `plugins/antd.ts`
- Yes, it adds typings

## References
https://github.com/nuxt/framework/discussions/1208#discussioncomment-3589542




1. Install Ant degin and ant design icons for Vue      yarn add ant-design-vue...

Using Ant design Vue in Nuxt 3

This ReUsable UseFetch Utility used for API data fetching, it can serialize and deserialize objects on the fly.

## Headers
```c#
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Net.Http.Headers;
using Newtonsoft.Json;
```

## Class
```c#
public static class UseFetch
    {
        public static TResponse Get<TResponse>(string url,
            Dictionary<string, string> headers = null)
            where TResponse : class
        {
            try
            {
                var client = new HttpClient();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                if (headers != null)
                {
                    foreach (var header in headers)
                    {
                        client.DefaultRequestHeaders.Add(header.Key, header.Value);
                    }
                }

                var response = client.GetAsync(url).Result;

                var responseString = response.Content.ReadAsStringAsync().Result;

                var deserializedResponse = JsonConvert.DeserializeObject<TResponse>(responseString);

                return deserializedResponse;
            }
            catch (Exception e)
            {
                throw new Exception(e.ToString());
            }
        }

        public static TResponse Post<TResponse, TRequest>(string url, TRequest request,
            Dictionary<string, string> headers = null)
            where TRequest : class, new()
            where TResponse : class
        {
            try
            {
                var serializeRequest = JsonConvert.SerializeObject(request);

                var content = new StringContent(serializeRequest);
                content.Headers.ContentType = new MediaTypeHeaderValue("application/json");

                var client = new HttpClient();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                if (headers != null)
                {
                    foreach (var header in headers)
                    {
                        client.DefaultRequestHeaders.Add(header.Key, header.Value);
                    }
                }

                var response = client.PostAsync(url, content).Result;

                var responseString = response.Content.ReadAsStringAsync().Result;

                var deserializedResponse = JsonConvert.DeserializeObject<TResponse>(responseString);

                return deserializedResponse;
            }
            catch (Exception e)
            {
                throw new Exception(e.ToString());
            }
        }
    }
```
enjoy 🚀

This ReUsable UseFetch Utility used for API data fetching, it can serialize and deserialize objects...

ReUsable UseFetch Utility in C#

## Enter Into Tinker Environment
On the CLI run artisan command to enter into tinker environment
```bash
php artisan tinker
```

## Adding Columns
Run the suggested code directly from Tinker.
```bash
Schema::table('<YOUR TABLE>', function ($table) {
    $table->string('name')->nullable()
        ->after('<DESIRED COLUMN>'); // add after desired column
});
```

## Renaming Columns
Run the suggested code directly from Tinker.
```bash
Schema::table('<YOUR TABLE>', function ($table) {
    $table->renameColumn('<FROM>', '<TO>');
});
```

## Removing Columns
Run the suggested code directly from Tinker.
```bash
Schema::table('<YOUR TABLE>', function ($table) {
   $table->dropColumn('<DESIRED COLUMN>');
});
```
You may drop multiple columns from a table by passing an array of column names to the dropColumn method:
```bash
Schema::table('<YOUR TABLE>', function ($table) {
   $table->dropColumn(['<DESIRED COLUMN>', '<DESIRED COLUMN 1>']);
});
```

## Note 
You can also use arrow functions 
```php
Schema::table('<YOUR TABLE>', fn($t)=> $t->string('<DESIRED COLUMN>')->nullable());
```

Enter Into Tinker Environment   On the CLI run artisan command to enter into tinker...

Adding, Renaming, & Removing Columns from Existing Tables Using Tinker in Laravel

For those who use applications like [TaskbarX](https://chrisandriessen.nl/taskbarx), and would like the app to run automatically on Windows start-up, this article is for you.

- Step 1: Press `Windows + R` on the keyboard.
![windows+r](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jtbwxawr4xn8wja4b7i.png)

- Step 2: Enter `shell:Common Startup` and run.
![run-command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/es1sxglqyryht2linhhw.png)

- Step 3: Step 2 should open this window, then Copy and paste the program shortcut.
![shortcut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zknmx396zbxggn9miwoi.png)

Enjoy 🚀

For those who use applications like TaskbarX, and would like the app to run automatically on Windows...

How to run an application automatically after startup on Windows

Simplicity & Aesthetics over Complexity
Life is too sweet to be loosing sleep over trying to understand how a library or framework works, as long as a solution or library is working and has long term support I'm okay with it

## Recoil JS
### Example with async queries
#### **using `useRecoilValueLoadable` hook.**
This hook is intended to be used for reading the value of asynchronous selectors. This hook will implicitly subscribe the component to the given state.

This hooks returns a `Loadable` object for the current state with the following interface:
* **state:** Indicates the status of the selector. Possible values are `'hasValue'`, `'hasError'`, `'loading'`.
* **contents:** The value represented by this `Loadable`. If the state is `'hasValue'`, it is the actual value, if the state is `'hasError'` it is the Error object that was thrown, and if the state is `'loading'`, then it is a Promise of the value.

The example code below implements `useRecoilValueLoadable` hook from recoilJS using [Next JS](https://nextjs.org/), in a use-case when implementing private routes using HOC

```js
import { useRouter } from "next/router";
import React from "react";
import { useRecoilValueLoadable } from "recoil";
import getAuthUser from "../store/selectors/getAuthUser";

const withAuthConsumer = (WrappedComponent: any) => {
  return (props: any) => {
    const authUser = useRecoilValueLoadable(getAuthUser);
    const router = useRouter();

    // checks whether we are on client / browser or server.
    if (typeof window !== "undefined") {
      if (authUser.state == "loading") {
        return null;
      }

      if (
        authUser.state == "hasValue" &&
        authUser.contents?.user_type == "consumer"
      ) {
        return <WrappedComponent {...props} />;
      } else if (
        authUser.state == "hasValue" &&
        authUser.contents?.user_type == null
      ) {
        router.push("/auth/login");
        return null;
      } else {
        router.push("/auth/login");
        return null;
      }
    }
    // If we are on server, return null
    return null;
  };
};

export default withAuthConsumer;
```
Check this [useRecoilValueLoadable](https://recoiljs.org/docs/api-reference/core/useRecoilValueLoadable/) for more explanation.

## Html to jsx
https://htmltojsx.in/

Simplicity &amp; Aesthetics over Complexity Life is too sweet to be loosing sleep over trying to...

An Opiniated React Stack

This tutorial assumes you have background or existing knowledge of programming.

## C# CLASSES / OBJECTS
A class is a template for objects, and an object is an instance of a class. Objects are entities inside a class.
**Example:** `color` is an object of `class car`.
```c#
class Car 
{
  string color = "red";
}
```

## C# FIELDS (variables)
A variable declared directly in a class is often referred to as a field (or attribute).
**Example**
```C#
int myNum = 5;               // Integer (whole number)
double myDoubleNum = 5.99D;  // Floating point number
char myLetter = 'D';         // Character
bool myBool = true;          // Boolean
string myText = "Hello";     // String
```

## C# ACCESS MODIFIERS
Access modifiers are keywords which are used to set the access level/visibility for classes, fields, methods and properties.
**Examples**
`public`, `private` & `protected`: Are what you would probably only use, unless you reach god level status 😂.

`internal`: Are for gods.

## C# PROPERTIES
Properties are just fields (variables) with access modifiers, the moment you put "public, etc." on a field (variable) it becomes a property.
**Example**
```c#
class Car
{
  public string model;  // public
  private string year;   // private
  string type; // private
  
  // The `{set; get;}` means you can access and change the property.
  public string model {set; get;} // public
}
```

## C# CONSTRUCTORS
A constructor is a special method that is used to initialize objects. 
> 💡 A constructor is a method that gets called or runs when a class is created. 
> It can be used to set initial values for fields.
> The constructor name must match the class name.
> It cannot have a return type (like void or int).
>
> All classes have constructors by default: if you do not create a class constructor yourself, C# creates one for you. However, then you are not able to set initial values for fields.

```c#
// Create a Car class
class Car
{
  public string model;  // Create a field

  // Create a class constructor for the Car class
  public Car()
  {
    model = "Mustang"; // Set the initial value for model
  }

  static void Main(string[] args)
  {
    Car Ford = new Car();  // Create an object of the Car Class (this will call the constructor)
    Console.WriteLine(Ford.model);  // Print the value of model
  }
}

// Outputs "Mustang"
```

### CONSTRUCTOR PARAMETERS
Constructors can also take parameters, which is used to initialize fields.

```c#
class Car
{
  public string model;
  public string color;
  public int year;

  // Create a class constructor with single or multiple parameters
  public Car(string modelName, string modelColor, int modelYear)
  {
    model = modelName;
    color = modelColor;
    year = modelYear;
  }

  static void Main(string[] args)
  {
    Car Ford = new Car("Mustang", "Red", 1969);
    Console.WriteLine(Ford.color + " " + Ford.year + " " + Ford.model);
  }
}

// Outputs Red 1969 Mustang
```

---
## REFERENCES
[w3schools](https://www.w3schools.com/cs)

This tutorial assumes you have background or existing knowledge of programming.           C# CLASSES...

C# for dummies: Classes / Objects, Fields, Access Modifiers, Properties, Constructors

I will briefly go over this tutorial, with an example `ErrorAlert` component.

## The Problem
When creating reusable components people will naturally feel passing what the component needs as props would be right, but over time that component would become this:
```js
<ErrorAlert
    data={...}
    type={...}
    closeIcon={...}
    className={...}
    onInit={...}
    onClose={...}
/>
```  
You don't need me to tell you the disadvantages of this approach in the long run.

---
## The Solution
```js 
import { IonIcon } from "@ionic/react";
import { alertCircleOutline } from "ionicons/icons";
import React from "react";

interface IEssentials {
  className?: string;
}

const Body: React.FC<IEssentials> = ({ children, className, ...rest }) => {
  return (
    <div className={"p-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" + " " + className} {...rest} role="alert">
      {children}
    </div>
  );
};

const Text: React.FC<IEssentials> = ({ children, className, ...rest }) => {
  return (
    <div className={"flex items-center gap-1" + " " + className} {...rest}>
      <IonIcon icon={alertCircleOutline} />
      <div>{children}</div>
    </div>
  );
};

export const ErrorAlert = { Body, Text };
``` 
**Usage**
```js
import { ErrorAlert } from "./ErrorAlert.tsx"

const data = [...];

const App: React.FC = () => {
    return (
        <div>
            <ErrorAlert.Body>
               {data.map((dataItem) => (
                  <ErrorAlert.Text>
                     {dataItem}
                  </ErrorAlert.Text>
               ))}
            </ErrorAlert.Body>
        </div>
    )
}
```

---
## Advantages of this approach
- Open/Closed principle (SOLID): It should be open to extend but closed for modification.
- Single Responsibility Principle (SOLID): Individual child components should have a single responsibility or perform a single function, this approach makes it easier to extend without having to modify the whole component.
- Decoupling enables adding explicit functionalities based on requirements.
- Easy refactoring.

I will briefly go over this tutorial, with an example ErrorAlert component.           The...

Scalable Reusable Components in React

Have you ever written code and months later you come back to that same code and be like "what the heck was I thinking".

> **💡 Tip:** You can easily put **links** referencing the documentation, site or stack overflow question from where you got that cool and fancy one-liner, solution or concept.

It helps if you think someone else would have a hard time understanding your code 

```php
// https://laravel.com/docs/9.x/collections#method-collapse
// https://stackoverflow.com/questions/62872479/laravel-incorrect-json-response-structure-when-using-unique

$collection = collect([
    $abc,
    $validated['abc']
])->collapse()->unique()->values();
```
## Advantages of this approach
- Team members can easily understand what's going on in the code directly from the source or from other examples.
- It helps Junior developers understand the codebase better.
- It's easy to adopt into any team or project.
- Easy adoption ensures consistent comments across teams.

Have you ever written code and months later you come back to that same code and be like "what the...

#1 Tip for Readable Code Across Teams and Personal Projects

[env-cmd](https://www.npmjs.com/package/env-cmd) provides a simple and efficient method for configuring environmental variables.

## Install
```bash
npm install env-cmd 
or 
npm install -g env-cmd
``` 
## Usage
There are two methods of usage.
### Method 1
It involves using different `.env` files e.g `.env.development`, `.env.staging`, `.env.production`.

**- For an enviroment file `.env` at the root directory.**
```env
./env

# This is a comment

REACT_APP_APPLICATION_NAME=TodoApp
REACT_APP_API_BASEURL=http://api.test.com
```
`Package.json`
```json
{
  "scripts": {
    "start": "env-cmd react-scripts start"
  }
}
```

**- Using custom env file `.env.development` or file path `./abc/def/.env`**
```env
./env.development

# This is a comment

REACT_APP_APPLICATION_NAME=TodoApp
REACT_APP_API_BASEURL=http://api.test.com
```
`Package.json`
```json
{
  "scripts": {
    "start": "env-cmd -f ./env.development react-scripts start"
  }
}
```

### Method 2
Like me, if you like to put all your environments in one file.
Create `.env-cmdrc.json` at the root directory.
```json
./env-cmdrc.json

{
  "development": {
    "REACT_APP_APPLICATION_NAME": "TodoApp",
    "REACT_APP_API_BASEURL": "http://api.test.com"
  },
  "staging": {
    "REACT_APP_APPLICATION_NAME": "TodoApp",
    "REACT_APP_API_BASEURL": "http://staging.test.com"
  },
  "production": {
    "REACT_APP_APPLICATION_NAME": "TodoApp",
    "REACT_APP_API_BASEURL": "http://production.test.com"
  }
}
```
`Package.json`
```json
{
  "scripts": {
    "start": "env-cmd -e development react-scripts start"
  }
}

or

{
  "scripts": {
    "start": "env-cmd -e production react-scripts start"
  }
}
```
Hope you find this helpful !






env-cmd provides a simple and efficient method for configuring environmental variables.          ...

Simple Environmental Variable Setup in React and Node Applications

For quick prototyping I use Tailwind and DaisyUI CDNs.
**Note:** The order of the CDNs.
```html
<link href="https://cdn.jsdelivr.net/npm/daisyui@1.25.4/dist/full.css" rel="stylesheet" type="text/css" />
<link href="./theme.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
```

---

To customize the default theme of DaisyUI, copy and paste the CSS variables into `theme.css`.
**Note:** The colors are in HSL format.
```css
/* theme.css */

:root {
  --p: 140 52% 55%;
  --pf: 120 100% 25%;
  --pc: 0 0% 100%;
  --s: 314 100% 47.1%;
  --sf: 314 100% 37.1%;
  --sc: 0 0% 100%;
  --a: 174 60% 51%;
  --af: 174 59.8% 41%;
  --ac: 0 0% 100%;
  --n: 219 14.1% 27.8%;
  --nf: 222 13.4% 19%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 210 20% 98%;
  --b3: 216 12.2% 83.9%;
  --bc: 215 27.9% 16.9%;
  --in: 207 89.8% 53.9%;
  --su: 174 100% 29%;
  --wa: 36 100% 50%;
  --er: 14 100% 57.1%;
  --border-color: var(--b3);
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-text-case: none;
  --btn-focus-scale: 0.95;
  --navbar-padding: 0.5rem;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}
```
**For Theming**
daisyUI comes with a number of themes, which you can use with no extra effort. Each theme defines a set of colors which will be used on all daisyUI elements. To use a theme, add data-theme attribute to your tag.
```html
<html data-theme="light"></html>
```

For quick prototyping I use Tailwind and DaisyUI CDNs. Note: The order of the CDNs.    &lt;link...

Quick Prototyping with Tailwind and DaisyUI

Hooray! The class property proposal is finished and is avaliable via **babel/plugin-proposal-class-properties**
> This plugin is included in `@babel/preset-env`, in [ES2022](https://github.com/tc39/proposals/blob/master/finished-proposals.md)

> Check it out [here](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)

So you can finally clean that legacy React project in peace

```js
class Foo extends React.Component {
  // Note: this syntax is now standardized.
  handleClick = () => {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

```

Spread the word!

Hooray! The class property proposal is finished and is avaliable via...

The Class Property Proposal is Finished and Avaliable in React

## What is BEM
BEM stands for (**Block-Element-Modifier**) is a naming methodology, which aims to solve many of the problems you’ll commonly encounter when naming classes and structuring your CSS.

## What is SASS
Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. It is truly "CSS with superpowers"

### Block
Standalone entity that is meaningful on its own. 
Below are examples of **block** classes:
```css
/* example 1 */
.button {
  ...
}

/* example 2 */
.nav {
  ...
}
```

### Element
A part of a block that has no standalone meaning and is semantically tied to its block. It is a combination of its block name and element name.
Below are examples of **block-element** classes:
```css
/* example 1 */
.button__primary {
  ...
}

/* example 2 */
.nav__item {
  ...
}
```

### Modifier
A class on a block or element. Used to change appearance or behavior.
```css
/* example 1 */
.button--disabled {
  ...
}

/* example 2 */
.nav--active {
  ...
}
```

---

## Conventional example
```html
<nav class="nav">
  <ul class="nav-list">
    <li class="item">
      <a class="link"></a>
    </li>
    <li class="item active">
      <a class="link"></a>
    </li>
  </ul>
</nav>
```

---

## BEM example
```html
<nav class="nav">
  <ul class="nav__menu">
    <li class="nav__item">
      <a class="nav__link"></a>
    </li>
    <li class="nav__item nav--active">
      <a class="nav__link"></a>
    </li>
  </ul>
</nav>
```

---

## BEM and SASS combination
This is where "BEM becomes the cake and SASS the icing". One of the small but incredibly powerful features you get in SASS, is the ability to nest your class selectors.

```scss
.nav {
  ...

  &__menu {
    ...
  }

  &__item {
    ...
  }

  &__link {
    ...
  }

  &--active {
    ...
  }
}
```

> The `&` essentially saves us rewriting the parent selector over and over. What we end up with is the styles for our nav component encapsulated into a single block. Having the classes in one block like this makes it easy to identify, edit and move around.

---

## Tips when using BEM & SASS (important !)
- **Structure and Naming:**
BEM has some inherit problems, like everything that you style needs to have a class, and BEM don't allow cascading (if you follow the rules strict).

- **BEM Grandchildren - Handling Deeply Nested Elements:**
**Chaining Elements Together - The Typical Grandchild Mistake**
```html
<div class=“nav”>
    <ul class=“nav__menu”>
        <li class=“nav__menu__item”>
            <a class=“nav__menu__item__link”>Home</a>
        </li> 
    </ul>
</div>
```
It makes your class names difficult to read, and it bloats your HTML and CSS files needlessly.

This method also sticks to the DOM structure, limiting your flexibility if the structure of your HTML changes.

Vladimir Grinenko is on the Yandex team (the creators of the BEM methodology) and said this:
> BEM methodology doesn’t recommend to use elements within elements in class names. You don’t need to resemble DOM structure in naming. Having one level structure makes refactoring much easier.
>
> — Vladimir Grinenko, Yandex


**The deeply nested solution**
Instead of chaining elements like `nav__menu__item__link`, simply focus on the block name itself and use that as the main anchor:

```html
<div class=“nav”>
    <ul class=“nav__menu”>
        <li class=“nav__item”>
            <a class=“nav__link”>Home</a>
        </li> 
    </ul>
</div>
```
Taking this approach also makes your code much more readable for other developers, as they can easily see all the elements that have a relationship with the block (in this case: .nav).

And if you need to add or remove HTML elements in the future, no refactoring is required.

---

## Further reading
- [BEM for beginners](https://www.smashingmagazine.com/2018/06/bem-for-beginners/) - Inna Belaya

---

## Refrences
- [getbem](http://getbem.com/introduction/)
- [SASS](https://sass-lang.com/)
- [BEM and SASS a perfect match](https://andrew-barnes.medium.com/bem-and-sass-a-perfect-match-5e48d9bc3894) - Andy Barnes
- [BEM Grandchildren: How To Handle Deeply Nested Elements](https://scalablecss.com/bem-nesting-grandchild-elements/) - Tom Ray

What is BEM   BEM stands for (Block-Element-Modifier) is a naming methodology, which aims to...

BEM and SASS "The Cake and Icing"

### Try to avoid mixing Tabs and Menu for Routing

It introduces extra complexity and reduces flexibility. 
If you really think about it do you really need to mix them both?

---

### Changing Mode
By default, when an app is viewed in the browser, Ionic will apply the md mode. However, since Ionic components adapt according to their platform, it is helpful to be able to view what the app will look like on iOS. To do this, add `?ionic:mode=ios` to the URL where the app is being served. For example, if the app is served on port 8100, the url would be: `http://localhost:8100/?ionic:mode=ios.`

---

### Using a Debugger​
The debugger keyword can be used to debug an app. When most browsers encounters a debugger statement, running of JavaScript is stopped, and the browser will load its debugger. This can be used to set "breakpoints" in the app.

For example, if a function is not returning the correct value, the debugger can be used to step through the code and inspect variables.

```
 function myBrokenFunction() {
  debugger;
  // do other stuff
}
```
When an app runs, it will pause at this function. From there, the developer tools can be used to run pieces of JavaScript, line by line, and inspect where exactly the function breaks.

---

### 💡 One of the most fundamental principles of software architecture

Code that change together should stay together.




Try to avoid mixing Tabs and Menu for Routing   It introduces extra complexity and reduces...

Tips for Ionic Developers React / Vue

## UI Library
**Daisy UI**

---

## Prefixer
[prefixer-tailwind](https://prefixer-tailwindui.netlify.app/)

---

## Components
Tail-kit
Mamba UI
Meraki UI
Hyper UI



UI Library   Daisy UI              Prefixer   prefixer-tailwind             ...

My Tailwind Stack and Workflow

## Introduction
This article would be showing you some nice extensions to boost your overall productivity and workflow in VSCode for C#, .Net and .NetCore development.

---

## Extensions

### 1. C# 
**Microsoft**
C# for Visual Studio Code (powered by OmniSharp).
[Link](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp)

### 2. C# Extensions
**jchannon**
C# IDE Extensions for VSCode.
[Link](https://marketplace.visualstudio.com/items?itemName=jchannon.csharpextensions)

### 3. Auto-Using for C# 
**Fudge**
Provides intellisense for and imports references from all available sources.
[Link](https://marketplace.visualstudio.com/items?itemName=Fudge.auto-using)

### 4. NuGet Package Manager GUI
**aliasadidev**
An extension for Visual Studio Code that lets you easily update/remove/install packages from NuGet server for .NET Core 1.1+/.Net5+ projects.
[Link](https://marketplace.visualstudio.com/items?itemName=aliasadidev.nugetpackagemanagergui)

### 5. Visual Studio IntelliCode
**Microsoft**
AI-assisted development.
[Link](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

---

## Snippets

### 1. .NET Core Snippet Pack
**Adrian Wilczyński**
A snippet pack for .NET Core.
[Link](https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.asp-net-core-snippet-pack)

---

## Refrences
[Visual Studio Code Extensions for .Net development](https://dev.to/moe23/visual-studio-code-extensions-for-net-development-47lc)

Introduction   This article would be showing you some nice extensions to boost your overall...

C#, .Net and .NetCore Extensions for VSCode

## Introduction
Tailwind CSS has given us a lot of freedom in how we design web components. As a result, it has gained widespread acceptability among developers and IT enterprises.

Tailwind CSS is a highly flexible, low-level, utility-first CSS framework for creating user interfaces quickly.

React Native combines the greatest aspects of native development with React, a world-class JavaScript library for developing user interfaces.

---

## Library required
Tailwind React Native Classnames (twrnc) v2. Please check the Library (twrnc) [docs](https://github.com/jaredh159/tailwind-react-native-classnames) For:
- Installation
- API
- Customization
- Enabling Device-Context Prefixes
- Taking Control of Dark Mode
- Customizing Breakpoints
- Adding Custom Classes
- Matching Conditional Prefixes
- JIT-style Arbitrary Values
- Migrating from V1

```bash
npm install twrnc
```

---

## Tips When Using Tailwind in React Native
### Intellisense
For VSCode you can add intellisense by customising the config of [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) through the following options:

- **Option 1:** Adding a custom Regex pattern to the settings.json
```json
"tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw=\"([^\"]*)", // <div tw="..." />
    "tw={\"([^\"}]*)", // <div tw={"..."} />
    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
    "tw\$.*?\$`([^`]*)" // tw(Component)`...`
]
```

- **Option 2:** You could also add `style` in the extensions under TailwindCSS extension Tailwind CSS IntelliSense in VS Code Settings (UI)

![Tailwind CSS IntelliSense VS Code Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmkbeezde5eqmxvpdd8a.png)

---

## Refrences
[Tailwind intellisense support #78](https://github.com/jaredh159/tailwind-react-native-classnames/issues/78)
[Tailwind React Native Classnames 🏄‍♂️](https://github.com/jaredh159/tailwind-react-native-classnames)

Introduction   Tailwind CSS has given us a lot of freedom in how we design web components....

Using Tailwind in React Native

## Introduction
When I started learning React and Javascript I would run into errors because I would be trying to access an object property or data from an async API function call that has not been loaded.

## Statement of Problem
From the example below React would throw an error, because you are trying to access an object property that has not been loaded from the API call

```jsx
import React, {useState, useEffect} from 'react'

export default function App () {
// STATE
const [state, setState] = useState({})

// ONMOUNT
useEffect( async ()=>{
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => setState(json) )
}, [])

return ( 
<div>
{ state.title && 
    <div>
      ...
    </div>
}
</div>
)}
```

## Proposed Solution

###Optional Chaining
The optional chaining operator **`(?.)`** allows you to read the value of a property deep in a chain of related objects without having to validate each reference in the chain.

The **`?.`** operator is similar to the **`.`** chaining operator, except that instead of throwing an error if a reference is null (null or undefined), the expression short-circuits with an undefined return value. 
It returns undefined when used with function calls if the specified function does not exist.

With Optional Chaining the example above would be rewritten to:

```jsx
import React, {useState, useEffect} from 'react'

export default function App () {
// STATE
const [state, setState] = useState({})

// ONMOUNT
useEffect( async ()=>{
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => setState(json) )
}, [])

return ( 
<div>
{ state?.title && 
    <div>
      ...
    </div>
}
</div>
)}
```

### Advantages of Optional Chaining
This results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. It can also be helpful while exploring the content of an object when there's no known guarantee as to which properties are required.

### Conclusion
1. Optional chaining cannot be used on a non-declared root object, but can be used with an undefined root object.

2. Optional chaining with function calls: When attempting to call a method that may or may not exist, you can utilize optional chaining. This can be useful, for example, when utilizing an API when a method is unavailable.

Using optional chaining with function calls causes the expression to automatically return undefined instead of throwing an exception if the method isn't found:

```js
let result = someInterface.customMethod?.();
```

## Refrences
[Optional chaining (?.)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)


Introduction   When I started learning React and Javascript I would run into errors because...

Avoid unnecessary errors when conditionally rendering in React with "Optional Chaining."

Tailwind just released a standalone CLI in a self-contained executable, no Node.js or npm required.

---

## Get started

Download the executable for your platform from the latest [**release**](https://github.com/tailwindlabs/tailwindcss/releases/latest).

Copy it to the root directory of your project.

Rename the executable to `"tailwindcss"`.

Create anywhere in your project an entry point `input.css` and `output.css` destination for the compiled css. Also note the path of both files relative to the `"tailwindcss"` executable

Now you can use it just like the npm-distributed CLI tool:

```bash
# Open a terminal at project root

# Create a tailwind.config.js file
./tailwindcss init

# Start a watcher
./tailwindcss -i <relative-path-to-input.css> -o <relative-path-to-output.css> --watch

# Compile and minify your CSS for production
./tailwindcss -i <relative-path-to-input.css> -o <relative-path-to-output.css> --minify
```

It comes bundled with the latest versions of all of tailwind's first-party plugins, so if you want to use them in your project, just require them in your tailwind.config.js file like you would in a Node-based project:

```js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ]
}
```

## Refrences
[Standalone CLI: Use Tailwind CSS without Node.js](https://tailwindcss.com/blog/standalone-cli) - [Adam Wathan](https://twitter.com/adamwathan)



Tailwind just released a standalone CLI in a self-contained executable, no Node.js or npm...

Tailwind CSS Standalone CLI: Use Tailwind CSS without Node.js

Methods in components could be organized using comments. Common usecases can be broken down into the following comment headers.

1. `// STATES`
2. `// ONMOUNT`
3. `// WATCHERS`
4. `// METHODS`
5. `// COMPUTED`

![comment headers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1quyqkoi6pbizls5o3at.png)

## Conclusion

- The name of a variable or function should tell you what it is and how it is used.

- Comments can lie. They can be wrong to begin with, or they can be originally accurate and then become outdated over time as the related code changes.

- Comments can often be avoided by using clearly named variables and extracting sections of code into clearly named functions.

- Comments that describe what a method does, what arguments it takes, and what it returns are often redundant at best and misleading at worst.

## References
[In Defense of Clean Code](https://dev.to/thawkin3/in-defense-of-clean-code-100-pieces-of-timeless-advice-from-uncle-bob-5flk)

Methods in components could be organized using comments. Common usecases can be broken down into the...

How to structure methods and functions in a React component

## Opting out from tailwind reset (preflight)
Begin, by opting out of Tailwind reset called "preflight" to avoid conflict with existing CSS resets (i.e. mordern-normalize) by setting preflight to `false`
```js
tailwind.config.js


module.exports = {
  mode: 'jit',
  purge: [],
  darkMode: false,
  corePlugins: {
    preflight: false // set preflight to false
  }, 
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
``` 

## Namespacing all tailwind classes with a prefix
Prefixing all tailwind classnames with a prefix (e.g `tw-`) helps prevent clashes with existing classnames

```js
tailwind.config.js


module.exports = {
  mode: 'jit',
  purge: [],
  darkMode: false,
  corePlugins: {
    preflight: false
  },
  prefix: 'tw-', // set prefix to 'tw-'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

**Example**
```html
<div class="bg-blue-500 h-40 w-40">
  ...
<div>
```
becomes
```html
<div class="tw-bg-blue-500 tw-h-40 tw-w-40">
  ...
<div>
```

## Increasing the specificity of tailwind classes
By nature tailwind classnames are low in specificity, so the chances of underlying CSS overriding it is very high. We are going to give more weight to our utilities by flagging them as `!important` in our config file.
**Note !** Using `!important` is bad practice, but its important to know when to use it

``` js
tailwind.config.js


module.exports = {
  mode: 'jit',
  purge: [],
  darkMode: false,
  corePlugins: {
    preflight: false
  },
  prefix: 'tw-',
  important: true, // set important to true
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

## Refrences
* [Adding Tailwind CSS to an Existing Project](https://www.youtube.com/watch?v=oG6XPy1t1KA&ab_channel=TailwindLabs)

Opting out from tailwind reset (preflight)   Begin, by opting out of Tailwind reset called...

Tips when adding Tailwind to an existing project (Bootstrap, etc.)

## Table of content <a name="toc"/>
* 1. [Introduction](#introduction)
* 2. [Packages required](#packages-required)
* 3. [Project setup](#setup)
* 3.1. [Laravel installation](#laravel-install)
* 3.2. [Laravel breeze installation](#laravel-breeze-install)
* 4. [Creating multiple user views or dashboard](#multi-user-views)
* 5. [Creating multiple user roles in the database](#multi-user-roles-db)
* 5.1. [Editing the users migration table](#migration-users-table)
* 5.2. [Editing the registration page](#registration-page)
* 5.3. [Editing the registration controller](#registration-controller)
* 5.4. [Editing the user model](#user-model)
* 6. [Multi-user authentication (main section)](#multi-user-authentication)
* 6.1. [Creating a middleware](#61-creating-a-middleware)
* 6.2. [Registering the middleware at the kernel](#62-registering-the-middleware-at-the-kernel)
* 6.3. [Redirecting users if authenticated](#63-redirecting-users-if-authenticated)
* 6.4. [Configuring routes](#64-configuring-routes)
* 7. [Conclusion](#70-conclusion)
* 8. [Acknowledgements](#80-acknowledgements)

## 1. Introduction <a name="introduction"/>
In this example, you will learn how to implement multi-authentication in laravel 8 and laravel breeze (inertia).

## 2. Package version <a name="packages"/>
* Laravel v8.x
* Laravel breeze v1.4

## 3. Project setup <a name="setup"/>        

### 3.1. Laravel Installation <a name="laravel-install"/>
We would be using composer to install our new laravel package [Laravel installation via composer](https://laravel.com/docs/8.x#installation-via-composer). 
If composer is not installed, install composer [here](https://getcomposer.org/download/).

```
composer create-project laravel/laravel example-app

cd example-app
```
### 3.2. Laravel Breeze installation <a name="#laravel-breeze-install"/>
Now in the project's root directory we would install breeze [Laravel Breeze](https://laravel.com/docs/8.x/starter-kits#laravel-breeze)

```
composer require laravel/breeze --dev

```
For this project I would be using [React](https://reactjs.org), but you can use [Vue](https://vuejs.org) if you want to.

```
php artisan breeze:install vue

// Or...

php artisan breeze:install react

npm install
npm run dev
```
Don't forget to create a database and include the details of the database in the .env file at the root directory

```
// fill all details
DB_CONNECTION=mysql 
DB_HOST=127.0.0.1
DB_PORT=""
DB_DATABASE=laravel
DB_USERNAME=""
DB_PASSWORD=
```
then run 
```
php artisan migrate
```
## 4. Creating Multiple User Views or Dashboard <a name="multi-user-views"/>
In this section we would be creating different views to route our different authenticated users to.
* AdminDashboard.js
* GuestDashboard.js
* UserDashboard.js
* Dashboard.js (The default dashboard created by breeze)


**AdminDashboard.js**
```js
resources/js/Pages/AdminDashboard.js


import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import { Head } from "@inertiajs/inertia-react";

export default function AdminDashboard(props) {
  return (
    <Authenticated
      auth={props.auth}
      errors={props.errors}
      header={
        <h2 className="text-xl font-semibold leading-tight text-gray-800">
          Admin Dashboard
        </h2>
      }
    >
      <Head title="Admin Dashboard" />

      <div className="py-12">
        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
            <div className="p-6 bg-white border-b border-gray-200">
              You're logged in as Admin!
            </div>
          </div>
        </div>
      </div>
    </Authenticated>
  );
}

```

**GuestDashboard.js**
```js
resources/js/Pages/GuestDashboard.js


import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import { Head } from "@inertiajs/inertia-react";

export default function GuestDashboard(props) {
  return (
    <Authenticated
      auth={props.auth}
      errors={props.errors}
      header={
        <h2 className="text-xl font-semibold leading-tight text-gray-800">
          Guest Dashboard
        </h2>
      }
    >
      <Head title="Dashboard" />

      <div className="py-12">
        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
            <div className="p-6 bg-white border-b border-gray-200">
              You're logged in as Guest!
            </div>
          </div>
        </div>
      </div>
    </Authenticated>
  );
}

```

**UserDashboard**

```js
resources/js/Pages/UserDashboard.js


import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import { Head } from "@inertiajs/inertia-react";

export default function Dashboard(props) {
  return (
    <Authenticated
      auth={props.auth}
      errors={props.errors}
      header={
        <h2 className="text-xl font-semibold leading-tight text-gray-800">
          User Dashboard
        </h2>
      }
    >
      <Head title="Dashboard" />

      <div className="py-12">
        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
            <div className="p-6 bg-white border-b border-gray-200">
              You're logged in as User!
            </div>
          </div>
        </div>
      </div>
    </Authenticated>
  );
}

```

**Dashboard (The default dashboard created by breeze)**
```js
resources/js/Pages/Dashboard.js


import React from "react";
import Authenticated from "@/Layouts/Authenticated";
import { Head } from "@inertiajs/inertia-react";

export default function Dashboard(props) {
  return (
    <Authenticated
      auth={props.auth}
      errors={props.errors}
      header={
        <h2 className="text-xl font-semibold leading-tight text-gray-800">
          Default dashboard from Dashboard Breeze //edit here
        </h2>
      }
    >
      <Head title="Dashboard" />

      <div className="py-12">
        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
            <div className="p-6 bg-white border-b border-gray-200">
              You're logged in as User (Default dashboard from breeze)! //edit here
            </div>
          </div>
        </div>
      </div>
    </Authenticated>
  );
}

```


## 5. Creating multiple user roles in the database <a name="multi-user-roles-db"/>

### 5.1. Editing the users migration table <a name="migration-users-table"/>

we are going to create a role column in the users table.

```php
database/migrations/create_users_table.php


public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('role'); //here
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }
```
then run `php artisan migrate:refresh`.

### 5.2. Editing the registration page <a name="registration-page"/>

```js
resources/js/Pages/Auth/Register.js


export default function Register() {
  const { data, setData, post, processing, errors, reset } = useForm({
    name: "",
    email: "",
    role: "", // make sure this is present
    password: "",
    password_confirmation: "",
  });

  ....

  return (
    
        ....

        // put this after the email
        <div className="mt-4">
          <Label forInput="role" value="Role" />

          <select
            name="role" /* make sure this and data.role is the same */
            id="role"
            className="block w-full mt-1 rounded-md"
            onChange={onHandleChange}
          >
            <option value="user">User</option>
            <option value="admin">Admin</option>
            <option value="guest">Guest</option>
          </select>
        </div>

    .... 
  );
}

```

### 5.3. Editing the registration controller <a name="registration-controller"/>

```php
app/Http/Controllers/Auth/RegisteredUserController.php


public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'role' => 'required|string', //edit here
            'password' => ['required', 'confirmed', Rules\Password::defaults()],
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'role' => $request->role //edit here
        ]);
    }
```
### 5.4. Editing the user model <a name="user-model"/>

```php
app/Models/User.php


 protected $fillable = [
        'name',
        'email',
        'password',
        'role' //edit here
    ];

```

## 6. Multi-User Authentication (main-section) <a name="multi-user-authentication"/>

### 6.1. Creating a middleware

Run the command `php artisan make:middleware CheckRole`

```php
app/Http/Middleware/CheckRole.php


public function handle(Request $request, Closure $next, string $role)
    {
        if ($role == 'admin' && auth()->user()->role != 'admin' ) {
            abort(403);
        }
        if ($role == 'user' && auth()->user()->role != 'user' ) {
            abort(403);
        }
        if ($role == 'guest' && auth()->user()->role != 'guest' ) {
            abort(403);
        }
        return $next($request);
    }
```

### 6.2. Registering the middleware at the kernel

```php
app/Http/Kernel.php


protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'checkRole' => \App\Http\Middleware\CheckRole::class, //edit here
    ];
```

### 6.3. Redirecting users if authenticated

#### Create a controller
Run `php artisan make:controller Auth/RedirectAuthenticatedUsersController`

```php
app/Http/Controllers/Auth/RedirectAuthenticatedUsersController.php


class RedirectAuthenticatedUsersController extends Controller
{
    public function home()
    {
        if (auth()->user()->role == 'admin') {
            return redirect('/adminDashboard');
        }
        elseif(auth()->user()->role == 'user'){
            return redirect('/userDashboard');
        }
        elseif(auth()->user()->role == 'guest'){
            return redirect('/guestDashboard');
        }
        else{
            return auth()->logout();
        }
    }
}
```

####  Edit the Route service provider
```php
app/Providers/RouteServiceProvider.php


public const HOME = "/redirectAuthenticatedUsers"; //edit here
```

### 6.4. Configuring routes

```php
routes/web.php


/* Delete this
Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard'); 
*/

Route::group(['middleware' => 'auth'], function() {
    Route::inertia('/dashboard', 'Dashboard')->name('dashboard');

    Route::get("/redirectAuthenticatedUsers", [RedirectAuthenticatedUsersController::class, "home"]);

    Route::group(['middleware' => 'checkRole:admin'], function() {
        Route::inertia('/adminDashboard', 'AdminDashboard')->name('adminDashboard');
    });
    Route::group(['middleware' => 'checkRole:user'], function() {
        Route::inertia('/userDashboard', 'UserDashboard')->name('userDashboard');
    });
    Route::group(['middleware' => 'checkRole:guest'], function() {
        Route::inertia('/guestDashboard', 'GuestDashboard')->name('guestDashboard');
    });
});
```
Make sure you import
```php
use App\Http\Controllers\Auth\RedirectAuthenticatedUsersController;
```

We are directly [rendering](https://inertiajs.com/routing) the components in the file, but you can create a [controller](https://laravel.com/docs/8.x/controllers#introduction) and render the components there, [check example](https://inertiajs.com/responses).

## 7. Conclusion
check the code from [Github](https://github.com/kachidk/multi-auth-laravel-breeze-inertia-demo)

## 8. Acknowledgements
- [Laravel article](https://laravelarticle.com/laravel-breeze)
- [Laravel](https://laravel.com/)
- [Inertia](https://inertiajs.com/)

[Table of Contents](#toc)

Table of content     1. Introduction  2. Packages required  3. Project setup  3.1. Laravel...