> Leading others is leading yourself first. That’s a very big work of self awareness, and you should always do that.

Jerome Poudevigne is a serial CTO who has co-founded multiple startups with multiple successful exits. Recently, he has been working at Google Cloud and AWS to help startups grow and make the most of cloud technologies.

In this very first episode of Tech Lead Journal, Jerome shares with us his startup wisdom from his lessons learned; advice for hiring, building culture, pitching, and managing stakeholders. He also shares with us his “Rule of 50%”, a practical strategy that you can use to build your startup/product from zero scale to planet scale. Moreover, Jerome shares his interesting anecdotes about cultural differences between different regions based on his experience.  

Listen out for:

* Jerome’s career highlights, lowlights, and his lessons learned - [00:04:03]
* How to pitch yourself to (potential) investors, and how to assess good investors - [00:06:49]
* Some tips for hiring, especially in a startup, and how you can assess someone’s personality and culture fit - [00:09:37]
* How to ensure that everyone works towards the same vision of the company - [00:16:37]
* “Jerome’s Rule of 50%” - how to build your startup from zero scale to planet scale - [00:20:49]
* How you should not get distracted by the latest technologies when you’re starting up - [00:21:07]
* Stakeholders management, and how to explain about technology to non-technical stakeholders - [00:28:42]
* Anecdotes about cultural differences between different regions - [00:32:40]
* Jerome’s 3 Tech Lead Wisdom - [00:43:56]

Full notes on : [Tech Lead Journal Website](https://techleadjournal.dev/episodes/1/)

<blockquote>
<p>Leading others is leading yourself first. That’s a very big work of self awareness, and you should always do that.</p>
</blockquote>
<p>Jerome Poudevigne is a serial CTO who has co-founded multiple startups with multiple successful exits. Recently, he has been working at Google Cloud and AWS to help startups grow and make the most of cloud technologies.</p>
<p>In this very first episode of Tech Lead Journal, Jerome shares with us his startup wisdom from his lessons learned; advice for hiring, building culture, pitching, and managing stakeholders. He also shares with us his “Rule of 50%”, a practical strategy that you can use to build your startup/product from zero scale to planet scale. Moreover, Jerome shares his interesting anecdotes about cultural differences between different regions based on his experience.  </p>
<p>Listen out for:</p>
<ul>
<li>Jerome’s career highlights, lowlights, and his lessons learned - [00:04:03]</li>
<li>How to pitch yourself to (potential) investors, and how to assess good investors - [00:06:49]</li>
<li>Some tips for hiring, especially in a startup, and how you can assess someone’s personality and culture fit - [00:09:37]</li>
<li>How to ensure that everyone works towards the same vision of the company - [00:16:37]</li>
<li>“Jerome’s Rule of 50%” - how to build your startup from zero scale to planet scale - [00:20:49]</li>
<li>How you should not get distracted by the latest technologies when you’re starting up - [00:21:07]</li>
<li>Stakeholders management, and how to explain about technology to non-technical stakeholders - [00:28:42]</li>
<li>Anecdotes about cultural differences between different regions - [00:32:40]</li>
<li>Jerome’s 3 Tech Lead Wisdom - [00:43:56]</li>
</ul>
<p>Full notes on : <a href="https://techleadjournal.dev/episodes/1/">Tech Lead Journal Website</a></p>


Tech Lead Journal

#1 - Startup Tech Leadership - Jerome Poudevigne

Before we even begin to use github copilot, first you need to register your email to get beta access. Currently, github copilot is not publicy accessable. You can join the waiting list by accessing its website on [https://copilot.github.com/](https://copilot.github.com/). You will receive email regarding this one including access to collaborate on github.

Now, let's get started to use github copilot ...

## Installing the Visual Studio Code extension

Yes, it can be accessed only throguth visual studio code extension. You can find it inside visual studio code extension tab or go to [Github Copilot extension](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot). 

After you install the extension, you will asked for authorization before using this extension using your github account. 

## Seeing your first suggestion

Github Copilot provides completions for dozen of languages. It works well with Python, JavaScript, TypeScript, Ruby. I'm using it to learn Golang by the way. 

Create a file with any programming languages, in this case we create a javascript file and type a method. Github copilot will automatically suggest a solution to your function.

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/3452bcc7-9269-4af0-adc6-0d5db174ca4e.08)

## Choosing alternate suggestions

It provides multiple suggestions. You can choose another solution in case you are not that interested with the first solution. Instead of pressing `Tab`:

* On MacOS, press `Option + ]` / `Option + [`
* On Windows or Linux, press `Alt + ]` / `Alt + [`

```js
function getTheBestFurniture(
```

## Getting more suggestions

You can even expand the suggestion to show you every possible solution, at max 10 
(By Default) by pressing `Ctrl` + `Enter`.

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/37bbfb8f-4ad3-4a7b-aa35-613e54f08a9f.13)

```js
function getTheBestPrice(
```

## Generating code from a comment

It's getting even more awesome with its ability to generate solution from something as simple as a comment

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/fbef96ec-a57a-4d3b-a3e5-68abbd787a22.15)

```js
// Find the nearest restaurant
function process() {
```

## Using a framework

This part is the one i like most. It works with frameworks ! Heck yeah, i can even initiate any framework with this extension.

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/64a5a7c9-7437-4b48-b761-6df2696fafb3.15)

```js
// Express server on port 3000
```

You may find another example on [https://github.com/github/copilot-preview/tree/main/gallery] (https://github.com/github/copilot-preview/tree/main/gallery).

## Configuring Github Copilot

And you can even configure github copilot with settings like :

* **Iniline Suggestions** : **Enable** (`github.copilot.inlineSuggest.enable`). Turn inline suggestions on or off.
* **Inline Suggestions** : **Count** (`github.copilot.inlineSuggest.count`). Configures the maximum number of inline suggestions to fetch.
* **Autocomplete** : **Enable** (`github.copilot.autocomplete.enable`). Turns the suggestions pane on or off
* **Autocomplete** : **Count** (`github.copilot.autocomplete.count`). Configures the maximum number of suggestions to fetch for the suggestions pane.
* **Languages** (`github.copilot.enable`). Configures the languages that are enabled for Github Copilot. This string is of the form `{ "python": true, "markdown": false, ... }`


<p>Before we even begin to use github copilot, first you need to register your email to get beta access. Currently, github copilot is not publicy accessable. You can join the waiting list by accessing its website on <a href="https://copilot.github.com/">https://copilot.github.com/</a>. You will receive email regarding this one including access to collaborate on github.</p>
<p>Now, let&#39;s get started to use github copilot ...</p>
<h2 id="installing-the-visual-studio-code-extension">Installing the Visual Studio Code extension</h2>
<p>Yes, it can be accessed only throguth visual studio code extension. You can find it inside visual studio code extension tab or go to <a href="https://marketplace.visualstudio.com/items?itemName=GitHub.copilot">Github Copilot extension</a>. </p>
<p>After you install the extension, you will asked for authorization before using this extension using your github account. </p>
<h2 id="seeing-your-first-suggestion">Seeing your first suggestion</h2>
<p>Github Copilot provides completions for dozen of languages. It works well with Python, JavaScript, TypeScript, Ruby. I&#39;m using it to learn Golang by the way. </p>
<p>Create a file with any programming languages, in this case we create a javascript file and type a method. Github copilot will automatically suggest a solution to your function.</p>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/3452bcc7-9269-4af0-adc6-0d5db174ca4e.08" alt="Alt Text"></p>
<h2 id="choosing-alternate-suggestions">Choosing alternate suggestions</h2>
<p>It provides multiple suggestions. You can choose another solution in case you are not that interested with the first solution. Instead of pressing <code>Tab</code>:</p>
<ul>
<li>On MacOS, press <code>Option + ]</code> / <code>Option + [</code></li>
<li>On Windows or Linux, press <code>Alt + ]</code> / <code>Alt + [</code></li>
</ul>
<pre><code class="language-js">function getTheBestFurniture(
</code></pre>
<h2 id="getting-more-suggestions">Getting more suggestions</h2>
<p>You can even expand the suggestion to show you every possible solution, at max 10 
(By Default) by pressing <code>Ctrl</code> + <code>Enter</code>.</p>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/37bbfb8f-4ad3-4a7b-aa35-613e54f08a9f.13" alt="Alt Text"></p>
<pre><code class="language-js">function getTheBestPrice(
</code></pre>
<h2 id="generating-code-from-a-comment">Generating code from a comment</h2>
<p>It&#39;s getting even more awesome with its ability to generate solution from something as simple as a comment</p>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/fbef96ec-a57a-4d3b-a3e5-68abbd787a22.15" alt="Alt Text"></p>
<pre><code class="language-js">// Find the nearest restaurant
function process() {
</code></pre>
<h2 id="using-a-framework">Using a framework</h2>
<p>This part is the one i like most. It works with frameworks ! Heck yeah, i can even initiate any framework with this extension.</p>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/64a5a7c9-7437-4b48-b761-6df2696fafb3.15" alt="Alt Text"></p>
<pre><code class="language-js">// Express server on port 3000
</code></pre>
<p>You may find another example on [<a href="https://github.com/github/copilot-preview/tree/main/gallery%5D">https://github.com/github/copilot-preview/tree/main/gallery]</a> (<a href="https://github.com/github/copilot-preview/tree/main/gallery">https://github.com/github/copilot-preview/tree/main/gallery</a>).</p>
<h2 id="configuring-github-copilot">Configuring Github Copilot</h2>
<p>And you can even configure github copilot with settings like :</p>
<ul>
<li><strong>Iniline Suggestions</strong> : <strong>Enable</strong> (<code>github.copilot.inlineSuggest.enable</code>). Turn inline suggestions on or off.</li>
<li><strong>Inline Suggestions</strong> : <strong>Count</strong> (<code>github.copilot.inlineSuggest.count</code>). Configures the maximum number of inline suggestions to fetch.</li>
<li><strong>Autocomplete</strong> : <strong>Enable</strong> (<code>github.copilot.autocomplete.enable</code>). Turns the suggestions pane on or off</li>
<li><strong>Autocomplete</strong> : <strong>Count</strong> (<code>github.copilot.autocomplete.count</code>). Configures the maximum number of suggestions to fetch for the suggestions pane.</li>
<li><strong>Languages</strong> (<code>github.copilot.enable</code>). Configures the languages that are enabled for Github Copilot. This string is of the form <code>{ &quot;python&quot;: true, &quot;markdown&quot;: false, ... }</code></li>
</ul>


Getting Started with Github Copilot

## Set !important to true

This option will append all the utility classes with the `!important` keyword.

```javascript
// tailwind.config.js
module.exports = {
  important: true,
};
```

Now, all of Tailwind's utility classes will be generated as `!important`:

```css
.mt-1 {
  margin-top: 1px !important;
}
.mt-2 {
  margin-top: 2px !important;
}
.mt-3 {
  margin-top: 3px !important;
}
/* And so on... */
```

## Center and Define Main Container 

Set some settings for your container in your configuration file and it will automatically be applied to all `.container` classes.

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: "1.5rem",
    },
  },
};
```

```html
// instead of this
<div class="container p-6 mx-auto"></div>

// you can do this
<div class="container"></div>
```

## Add Your Utility Class

The `extend` property in the configuration file will automatically generate and add new classes for your project. It is convenient when you need additional classes for a given CSS property.

For instance, when it comes to max-height, you only have access to the following classes:

```css
.max-h-full    /* max-height: 100%; */
.max-h-screen  /* max-height: 100vh; */
```

But, what if you need to control the max-height property with a little bit more precision with classes like: `max-h-xs`, `max-h-sm` or `max-h-md`?

Well, here’s how you can generate them:

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      maxHeight: {
        xs: "20rem",
        sm: "24rem",
        md: "28rem",
        lg: "32rem",
        xl: "36rem",
        "2xl": "42rem",
        "3xl": "48rem",
        "4xl": "56rem",
        "5xl": "64rem",
        "6xl": "72rem",
      },
    },
  },
};
```

## TailwindCSS Debug Screen

The TailwindCSS Debug Screens plugin will let you display the currently active screen in development mode.

```bash
npm install tailwindcss-debug-screens --save-dev
```

```javascript
// tailwind.config.js
module.exports = {
  plugins: [require("tailwindcss-debug-screens")],
};
```

Add the class `debug-screens` to your `<body>` tag.

```html
<body class="debug-screens"></body>
```

## Disable Preflight

In case you want to integrate Tailwind to an existing project and somehow the preflight breaking all the application interfaces, you may disable it :

```javascript
// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
};
```

## Define Your Breakpoint

In case you have different breakpoints from default tailwindcss, then you may define it your own :

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: { min: "640px", max: "767px" },
      md: { min: "768px", max: "1023px" },
      lg: { min: "1024px", max: "1279px" },
      xl: { min: "1280px" },
    },
  },
};
```

## Px Instead of Rem

Margin, width, padding and height are defined using rem in tailwindcss by default. In case you need to use px instead rem, you may do :

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      "1": "8px",
      "2": "12px",
      "3": "16px",
      "4": "24px",
      "5": "32px",
      "6": "48px",
    },
  },
};
```

## Order Flex-Items

There is no `order` property in tailwindcss when using flexbox. A workaround to this is by using [tailwindcss-flexbox-order](https://github.com/035media/tailwindcss-flexbox-order) extension.

By default, here are the utility classes that are generated:

```css
.-order-1 {
  order: -1;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
```

## Extract Everything to Component

Adam Wathan (Tailwind’s creator), said this in a tweet:

> Confession: The `apply` feature in Tailwind only exists to trick people who are put off by long lists of classes into trying the framework. You should almost never use it. Reuse your utility-littered HTML instead.

If you are using a framework like Vue.js or React (where you define everything as components), it will be simple to avoid using the `@apply` feature. I rarely (if ever) use it.

The other reason for not using it: it is easier to debug the code when I only use the utility classes in my code. You can see which style is applied to each tag as you only have one place where your team can control the style (i.e., the classes).

So, use the `@apply` feature carefully so you can save yourself some time in the long run!

## Website for Helping Your Struggle

You can reach other users through the following channels:

* [The Official Discord channel](https://discord.com/invite/7NF8GNe), if you need to chat with other users in real-time.
* [The discussions space on Github](https://github.com/tailwindcss/tailwindcss/discussions), especially if you have some features you think will be essential to implement.
* [Their official Twitter account](https://twitter.com/tailwindcss), to get in touch with new features and other must-read resources about Tailwind.

<h2 id="set-important-to-true">Set !important to true</h2>
<p>This option will append all the utility classes with the <code>!important</code> keyword.</p>
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
  important: true,
};
</code></pre>
<p>Now, all of Tailwind&#39;s utility classes will be generated as <code>!important</code>:</p>
<pre><code class="language-css">.mt-1 {
  margin-top: 1px !important;
}
.mt-2 {
  margin-top: 2px !important;
}
.mt-3 {
  margin-top: 3px !important;
}
/* And so on... */
</code></pre>
<h2 id="center-and-define-main-container">Center and Define Main Container</h2>
<p>Set some settings for your container in your configuration file and it will automatically be applied to all <code>.container</code> classes.</p>
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: &quot;1.5rem&quot;,
    },
  },
};
</code></pre>
<pre><code class="language-html">// instead of this
&lt;div class=&quot;container p-6 mx-auto&quot;&gt;&lt;/div&gt;

// you can do this
&lt;div class=&quot;container&quot;&gt;&lt;/div&gt;
</code></pre>
<h2 id="add-your-utility-class">Add Your Utility Class</h2>
<p>The <code>extend</code> property in the configuration file will automatically generate and add new classes for your project. It is convenient when you need additional classes for a given CSS property.</p>
<p>For instance, when it comes to max-height, you only have access to the following classes:</p>
<pre><code class="language-css">.max-h-full    /* max-height: 100%; */
.max-h-screen  /* max-height: 100vh; */
</code></pre>
<p>But, what if you need to control the max-height property with a little bit more precision with classes like: <code>max-h-xs</code>, <code>max-h-sm</code> or <code>max-h-md</code>?</p>
<p>Well, here’s how you can generate them:</p>
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      maxHeight: {
        xs: &quot;20rem&quot;,
        sm: &quot;24rem&quot;,
        md: &quot;28rem&quot;,
        lg: &quot;32rem&quot;,
        xl: &quot;36rem&quot;,
        &quot;2xl&quot;: &quot;42rem&quot;,
        &quot;3xl&quot;: &quot;48rem&quot;,
        &quot;4xl&quot;: &quot;56rem&quot;,
        &quot;5xl&quot;: &quot;64rem&quot;,
        &quot;6xl&quot;: &quot;72rem&quot;,
      },
    },
  },
};
</code></pre>
<h2 id="tailwindcss-debug-screen">TailwindCSS Debug Screen</h2>
<p>The TailwindCSS Debug Screens plugin will let you display the currently active screen in development mode.</p>
<pre><code class="language-bash">npm install tailwindcss-debug-screens --save-dev
</code></pre>
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
  plugins: [require(&quot;tailwindcss-debug-screens&quot;)],
};
</code></pre>
<p>Add the class <code>debug-screens</code> to your <code>&lt;body&gt;</code> tag.</p>
<pre><code class="language-html">&lt;body class=&quot;debug-screens&quot;&gt;&lt;/body&gt;
</code></pre>
<h2 id="disable-preflight">Disable Preflight</h2>
<p>In case you want to integrate Tailwind to an existing project and somehow the preflight breaking all the application interfaces, you may disable it :</p>
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
};
</code></pre>
<h2 id="define-your-breakpoint">Define Your Breakpoint</h2>
<p>In case you have different breakpoints from default tailwindcss, then you may define it your own :</p>
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: { min: &quot;640px&quot;, max: &quot;767px&quot; },
      md: { min: &quot;768px&quot;, max: &quot;1023px&quot; },
      lg: { min: &quot;1024px&quot;, max: &quot;1279px&quot; },
      xl: { min: &quot;1280px&quot; },
    },
  },
};
</code></pre>
<h2 id="px-instead-of-rem">Px Instead of Rem</h2>
<p>Margin, width, padding and height are defined using rem in tailwindcss by default. In case you need to use px instead rem, you may do :</p>
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      &quot;1&quot;: &quot;8px&quot;,
      &quot;2&quot;: &quot;12px&quot;,
      &quot;3&quot;: &quot;16px&quot;,
      &quot;4&quot;: &quot;24px&quot;,
      &quot;5&quot;: &quot;32px&quot;,
      &quot;6&quot;: &quot;48px&quot;,
    },
  },
};
</code></pre>
<h2 id="order-flex-items">Order Flex-Items</h2>
<p>There is no <code>order</code> property in tailwindcss when using flexbox. A workaround to this is by using <a href="https://github.com/035media/tailwindcss-flexbox-order">tailwindcss-flexbox-order</a> extension.</p>
<p>By default, here are the utility classes that are generated:</p>
<pre><code class="language-css">.-order-1 {
  order: -1;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
</code></pre>
<h2 id="extract-everything-to-component">Extract Everything to Component</h2>
<p>Adam Wathan (Tailwind’s creator), said this in a tweet:</p>
<blockquote>
<p>Confession: The <code>apply</code> feature in Tailwind only exists to trick people who are put off by long lists of classes into trying the framework. You should almost never use it. Reuse your utility-littered HTML instead.</p>
</blockquote>
<p>If you are using a framework like Vue.js or React (where you define everything as components), it will be simple to avoid using the <code>@apply</code> feature. I rarely (if ever) use it.</p>
<p>The other reason for not using it: it is easier to debug the code when I only use the utility classes in my code. You can see which style is applied to each tag as you only have one place where your team can control the style (i.e., the classes).</p>
<p>So, use the <code>@apply</code> feature carefully so you can save yourself some time in the long run!</p>
<h2 id="website-for-helping-your-struggle">Website for Helping Your Struggle</h2>
<p>You can reach other users through the following channels:</p>
<ul>
<li><a href="https://discord.com/invite/7NF8GNe">The Official Discord channel</a>, if you need to chat with other users in real-time.</li>
<li><a href="https://github.com/tailwindcss/tailwindcss/discussions">The discussions space on Github</a>, especially if you have some features you think will be essential to implement.</li>
<li><a href="https://twitter.com/tailwindcss">Their official Twitter account</a>, to get in touch with new features and other must-read resources about Tailwind.</li>
</ul>


10 Tips To Boost Your Productivity With Tailwind CSS

> Z-index is a CSS property that allows you to position HTML elements in layers on top of one another.

We're going with example as follow:

* An image of a cat
* A white block with text
* Another image of the same cat

## Elements in the same stacking context will display in order of appearance, with latter elements on top of former elements

```html
<div class="cat-top"></div>
    
<div class="content__block">
  Meow meow meow...
</div>
    
<div class="cat-bottom"></div>
```

We want to make the content block displays above cat top and bottom by adding this code

```css
.cat-top { 
    margin-bottom: -110px;
}  

.cat-bottom {    
    float: right;
    margin-top: -120px;
}
```

You may find this example [Here](https://codepen.io/thecodercoder/pen/XQEyeX).

Instead, we will get a result where the second cat image is positioned on top of the block. The reason for this behavior is due to the **natural stacking order** on the webpage. These guidelines basically determine which elements will be on top and which will be on the bottom.

## The element doesn’t have its position set

Yes, `position`. It is really important to z-index to work if you plant position. To set position for an element, add the CSS position property to anything other than `static`, like `relative` or `absolute`. (You can read more about it in this article that I wrote.)

## Setting some CSS properties like opacity or transform will put the element in a new stacking context

Next, we want to transform the cat image, we’ll add `transform: rotate(180deg)`.

```css
.cat-bottom { 
    float: right;
    margin-top: -120px;
    transform: rotate(180deg);
}
```

it will overwrites the previous behaviour, see below image

![transform-image](https://coder-coder.com/wp-content/uploads/2019/04/z-index-transform.png)

You may not run into this issue often, but another aspect of stacking order is that some CSS properties like `transform` or `opacity` will put the element into its own, new stacking context.

To solve this issue, we set `position: relative` and explicitly set `z-index` on at least the white block. You could go one step further and set `position: relative` and a lower `z-index` on the cat elements, just to be extra safe.

## The element is in a lower stacking context due to its parent’s z-index level

Let's take a look on this code 

```css
.content {
    position: relative;
    z-index: 1;
}

.modal {
    position: fixed;
    z-index: 100;
}

.side-tab {
    position: fixed;
    z-index: 5;
}
```

And the code [result](https://codepen.io/thecodercoder/pen/qwYdZw). All the elements have their position set, and the side tab has a `z-index` of 5, which positions it on top of the content element, which is at `z-index: 1`.

Then, the modal has `z-index: 100` which should put it on top of the side tab at `z-index: 5`. But instead, the modal overlay is underneath the side tab. It caused by **Child stacking context limited by its parent stacking context**

The solution to this problem will be

> Move the modal outside of the content parent, and into the main stacking context of the page

```html
<section class="content"></section>

<div class="modal"></div>

<div class="side-tab"></div>
```

or another one by

> Removing position from the content, so it won’t limit the modal’s z-index

```css
.content {
    // No position set    
}

.modal {
    position: absolute;
    z-index: 100;
}

.side-tab {
    position: absolute;
    z-index: 5;
}
```

<blockquote>
<p>Z-index is a CSS property that allows you to position HTML elements in layers on top of one another.</p>
</blockquote>
<p>We&#39;re going with example as follow:</p>
<ul>
<li>An image of a cat</li>
<li>A white block with text</li>
<li>Another image of the same cat</li>
</ul>
<h2 id="elements-in-the-same-stacking-context-will-display-in-order-of-appearance-with-latter-elements-on-top-of-former-elements">Elements in the same stacking context will display in order of appearance, with latter elements on top of former elements</h2>
<pre><code class="language-html">&lt;div class=&quot;cat-top&quot;&gt;&lt;/div&gt;
    
&lt;div class=&quot;content__block&quot;&gt;
  Meow meow meow...
&lt;/div&gt;
    
&lt;div class=&quot;cat-bottom&quot;&gt;&lt;/div&gt;
</code></pre>
<p>We want to make the content block displays above cat top and bottom by adding this code</p>
<pre><code class="language-css">.cat-top { 
    margin-bottom: -110px;
}  

.cat-bottom {    
    float: right;
    margin-top: -120px;
}
</code></pre>
<p>You may find this example <a href="https://codepen.io/thecodercoder/pen/XQEyeX">Here</a>.</p>
<p>Instead, we will get a result where the second cat image is positioned on top of the block. The reason for this behavior is due to the <strong>natural stacking order</strong> on the webpage. These guidelines basically determine which elements will be on top and which will be on the bottom.</p>
<h2 id="the-element-doesnt-have-its-position-set">The element doesn’t have its position set</h2>
<p>Yes, <code>position</code>. It is really important to z-index to work if you plant position. To set position for an element, add the CSS position property to anything other than <code>static</code>, like <code>relative</code> or <code>absolute</code>. (You can read more about it in this article that I wrote.)</p>
<h2 id="setting-some-css-properties-like-opacity-or-transform-will-put-the-element-in-a-new-stacking-context">Setting some CSS properties like opacity or transform will put the element in a new stacking context</h2>
<p>Next, we want to transform the cat image, we’ll add <code>transform: rotate(180deg)</code>.</p>
<pre><code class="language-css">.cat-bottom { 
    float: right;
    margin-top: -120px;
    transform: rotate(180deg);
}
</code></pre>
<p>it will overwrites the previous behaviour, see below image</p>
<p><img src="https://coder-coder.com/wp-content/uploads/2019/04/z-index-transform.png" alt="transform-image"></p>
<p>You may not run into this issue often, but another aspect of stacking order is that some CSS properties like <code>transform</code> or <code>opacity</code> will put the element into its own, new stacking context.</p>
<p>To solve this issue, we set <code>position: relative</code> and explicitly set <code>z-index</code> on at least the white block. You could go one step further and set <code>position: relative</code> and a lower <code>z-index</code> on the cat elements, just to be extra safe.</p>
<h2 id="the-element-is-in-a-lower-stacking-context-due-to-its-parents-z-index-level">The element is in a lower stacking context due to its parent’s z-index level</h2>
<p>Let&#39;s take a look on this code </p>
<pre><code class="language-css">.content {
    position: relative;
    z-index: 1;
}

.modal {
    position: fixed;
    z-index: 100;
}

.side-tab {
    position: fixed;
    z-index: 5;
}
</code></pre>
<p>And the code <a href="https://codepen.io/thecodercoder/pen/qwYdZw">result</a>. All the elements have their position set, and the side tab has a <code>z-index</code> of 5, which positions it on top of the content element, which is at <code>z-index: 1</code>.</p>
<p>Then, the modal has <code>z-index: 100</code> which should put it on top of the side tab at <code>z-index: 5</code>. But instead, the modal overlay is underneath the side tab. It caused by <strong>Child stacking context limited by its parent stacking context</strong></p>
<p>The solution to this problem will be</p>
<blockquote>
<p>Move the modal outside of the content parent, and into the main stacking context of the page</p>
</blockquote>
<pre><code class="language-html">&lt;section class=&quot;content&quot;&gt;&lt;/section&gt;

&lt;div class=&quot;modal&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;side-tab&quot;&gt;&lt;/div&gt;
</code></pre>
<p>or another one by</p>
<blockquote>
<p>Removing position from the content, so it won’t limit the modal’s z-index</p>
</blockquote>
<pre><code class="language-css">.content {
    // No position set    
}

.modal {
    position: absolute;
    z-index: 100;
}

.side-tab {
    position: absolute;
    z-index: 5;
}
</code></pre>


4 Reasons Z-Index Not Working

## Log level and semantic methods

[📚 Console docs](https://nodejs.org/api/console.html#console_console_log_data_args)

```javascript
console.log("hello world")
console.warn("this is a warning")
console.error("this is an error")
console.info("this is info")
console.debug("this is debug")
console.trace("show trace")
```

⚠️ Original code

```javascript
console.log("Error: API key should not be empty")
```

👉 Refactor

```javascript
console.error("Error: API key should not be empty")
```

## Avoid negative names for boolean variables

😕 It is hard to read double negatives

isStarted 🤜 🤛 isNotStarted

⚠️ Original code

```javascript
const isInvalidApiKey = apiKey === null

if (isInvalidApiKey) {}
```

👉 Refactor

```javascript
const isValidApiKey = apiKey != null

if (!isValidApiKey) {}
```

## Avoid flag params

😕 You don't know what the flag params are used for util you have to read the function declaration

⚠️ Original code

```javascript
renderResult(true)

function renderResult(isAuthenticated) {
    if (isAuthenticated) {
       return <p>App</p>
    } else {
        return <p>Please login</p>
    }

}
```

🐨 Use object params

```javascript
renderResult({isAuthenticated: true})

function renderResult({isAuthenticated}) {
    if (isAuthenticated) {
        return <p>App</p>
    } else {
        return <p>Please login</p>
    }

}
```

🐨 Use 2 functions

```javascript
function renderAuthenticatedApp() {
    return <p>App</p>
}

function renderUnAuthenticatedApp() {
    return <p>Please login</p>
}
```

## Use guard clauses

😕 Nesting hell

🐨 Make our code fail fast 🐨 Natural flow

⚠️ Original code

```javascript
if (statusCode === 200) {
    // success
} else {
    if (statusCode === 500) {
        // Internal Server Error
    } else if (statusCode === 400) {
        // Not Found
    } else {
        // Other error
    }
}
```

👉 Refactor

```javascript
if (statusCode === 500) {
    // Internal Server Error
}

if (statusCode === 400) {
    // Not Found
}

if (statusCode !== 200) {
    // Other error
}

// success
```

## Make code self-explanatory

🐨 Easy to understand 🐨 Reusable 🐨 A long descriptive name is better than a long comment

⚠️ Original code

```javascript
 if (country !== 'finland' &&
    country !== 'germany' &&
    country !== 'vietnam' &&
    country !== 'russia' &&
    type !== '💣'
) {
    return Promise.reject('Not available')
}
```

👉 Refactor

```javascript
const isInAvailableCountries = (
    country === 'finland' ||
    country === 'germany' ||
    country === 'vietnam' ||
    country === 'russia'
)

const hasBoom = type === '💣'

if (!isInAvailableCountries || hasBoom) {
    return Promise.reject('Not available')
}
```

🎁 Create a better condition

```javascript
const availableCountries = ['finland', 'germany', 'vietnam', 'russia']
const isInAvailableCountries = availableCountries.includes(country)

const hasBoom = type === '💣'

if (!isInAvailableCountries || hasBoom) {
    return Promise.reject('Not available')
}
```

## Make impossible states impossible

🐨 Easy to understand

🐨 Prevent lots of bugs

[📚 Stop using isLoading booleans](https://kentcdodds.com/blog/stop-using-isloading-booleans)

⚠️ Original code

```javascript
const [isLoading, setIsLoading] = React.useState(false)
const [error, setError] = React.useState(null)
const [coffee, setCoffee] = React.useState(null)

function handleButtonClick() {
    setIsLoading(true)
    setError(null)
    setCoffee(null)

    getCoffee('cappuccino', 'small', 'finland', true).then(coffee => {
        setIsLoading(false)
        setError(null)
        setCoffee(coffee)
    }).catch(error => {
        setIsLoading(false)
        setError(error)
    })
}
```

👉 Refactor

```javascript
const state = {
    idle: 'idle',
    loading: 'loading',
    error: 'error',
    success: 'success',
}

const [error, setError] = React.useState(null)
const [coffee, setCoffee] = React.useState(null)
const [status, setStatus] = React.useState(state.idle) 

function handleButtonClick() {
    setStatus(state.loading)

    getCoffee('cappuccino', 'small', 'finland', true).then(coffee => {
        setStatus(state.success)
        setCoffee(coffee)
    }).catch(error => {
        setStatus(state.error)
        setError(error)
    })
}
```

## Use object for long argument lists

🐨 Params order won't matter

🐨 Easy to pass optional param

⚠️ Original code

```javascript
export function getCoffee(type, size, country, hasIce) {

getCoffee('cappuccino', 'small', 'finland', true)
}
```

👉 Refactor

```javascript
function getCoffee(options) {
    const {type, size, country, hasIce} = options
}

getCoffee({
    type: 'cappuccino',
    size: 'small',
    country: 'finland',
    hasIce: true
})
```

## Use Objest.assign for defaults

⚠️ Original code

```javascript
export function getCoffee(type, size, country, hasIce) {

    type = type || 'cappuccino'
    size = size || 'small'
    country = country || 'finland'
    hasIce = hasIce || false
}
```

👉 Refactor

```javascript
function getCoffee(customOptions) {
    const defaultOptions = {
        type: 'cappuccino',
        size: 'small',
        country: 'finland',
        hasIce: false
    }

    const options = Object.assign(defaultOptions, customOptions)
}

function getCoffee(options = {}) {
    const {
        type = 'cappuccino',
        size = 'small',
        country = 'finland',
        hasIce = false
    } = options
}

function getCoffee({
    type = 'cappuccino', 
    size = 'small',
    country = 'finland',
    hasIce = false
} = {}) {
}
```

## Replacing switch statements with Object literals

[📚 Replacing switch statements with Object literals](https://ultimatecourses.com/blog/deprecating-the-switch-statement-for-object-literals#object-literal-fall-through)

⚠️ Original code

```javascript
let drink
switch(type) {
    case 'cappuccino':
        drink = 'Cappuccino';
        break;
    case 'flatWhite':
        drink = 'Flat White';
        break;
    case 'espresso':
        drink = 'Espresso';
        break;
    default:
        drink = 'Unknown drink';
}
```

👉 Refactor

```javascript
const menu = {
    'cappuccino': 'Cappuccino',
    'flatWhite': 'Flat White',
    'espresso': 'Espresso',
    'default': 'Unknown drink'
}

const drink = menu[type] || menu['default']
```

## Avoid hasty abstractions

🐨 prefer duplication over the wrong abstraction

🐨 Nothing is free. The code trades the ability to change requirements for reduced duplication, and it is not a good trade - Dan Abramov

[📚 AHA Programming](https://kentcdodds.com/blog/aha-programming)

[📚 Goodbye, Clean Code](https://overreacted.io/goodbye-clean-code/)

[⚠️ My React Boilerplate](https://github.com/vinhlee95/awesome-react-typescript-boilerplate)

```javascript
// Action Type
const FETCH_ORDERS_START = "FETCH_ORDERS_START";
const FETCH_ORDERS_SUCCESS = "FETCH_ORDERS_SUCCESS";
const FETCH_ORDERS_FAILED = "FETCH_ORDERS_FAILED";

// Action
export const fetchOrder = (token) => {
  return (dispatch) => {
    dispatch(fetchOrdersStart);
    axios
      .get("/orders.json?auth=" + token)
      .then((res) => {
        dispatch(fetchOrdersSuccess(res));
      })
      .catch((err) => {
        dispatch(fetchOrdersFailed(err));
      });
  };
};

export const fetchOrdersSuccess = (orders) => {
  return {
    type: FETCH_ORDERS_SUCCESS,
    orders: orders,
  };
};

export const fetchOrdersFailed = (error) => {
  return {
    type: FETCH_ORDERS_FAILED,
    error: error,
  };
};

export const fetchOrdersStart = () => {
  return {
    type: FETCH_ORDERS_START,
  };
};
```

👉️ Abstraction

```javascript
// Action
const moduleName = "order";
const path = "/order";

const { moduleActionTypes, moduleActions } = useModuleActions(moduleName, path);

function fetchOrder() {
  moduleActionTypes.getModel();
}

function updateOrder(data) {
  moduleActionTypes.updateModel(data);
}
```

<h2 id="log-level-and-semantic-methods">Log level and semantic methods</h2>
<p><a href="https://nodejs.org/api/console.html#console_console_log_data_args">📚 Console docs</a></p>
<pre><code class="language-javascript">console.log(&quot;hello world&quot;)
console.warn(&quot;this is a warning&quot;)
console.error(&quot;this is an error&quot;)
console.info(&quot;this is info&quot;)
console.debug(&quot;this is debug&quot;)
console.trace(&quot;show trace&quot;)
</code></pre>
<p>⚠️ Original code</p>
<pre><code class="language-javascript">console.log(&quot;Error: API key should not be empty&quot;)
</code></pre>
<p>👉 Refactor</p>
<pre><code class="language-javascript">console.error(&quot;Error: API key should not be empty&quot;)
</code></pre>
<h2 id="avoid-negative-names-for-boolean-variables">Avoid negative names for boolean variables</h2>
<p>😕 It is hard to read double negatives</p>
<p>isStarted 🤜 🤛 isNotStarted</p>
<p>⚠️ Original code</p>
<pre><code class="language-javascript">const isInvalidApiKey = apiKey === null

if (isInvalidApiKey) {}
</code></pre>
<p>👉 Refactor</p>
<pre><code class="language-javascript">const isValidApiKey = apiKey != null

if (!isValidApiKey) {}
</code></pre>
<h2 id="avoid-flag-params">Avoid flag params</h2>
<p>😕 You don&#39;t know what the flag params are used for util you have to read the function declaration</p>
<p>⚠️ Original code</p>
<pre><code class="language-javascript">renderResult(true)

function renderResult(isAuthenticated) {
    if (isAuthenticated) {
       return &lt;p&gt;App&lt;/p&gt;
    } else {
        return &lt;p&gt;Please login&lt;/p&gt;
    }

}
</code></pre>
<p>🐨 Use object params</p>
<pre><code class="language-javascript">renderResult({isAuthenticated: true})

function renderResult({isAuthenticated}) {
    if (isAuthenticated) {
        return &lt;p&gt;App&lt;/p&gt;
    } else {
        return &lt;p&gt;Please login&lt;/p&gt;
    }

}
</code></pre>
<p>🐨 Use 2 functions</p>
<pre><code class="language-javascript">function renderAuthenticatedApp() {
    return &lt;p&gt;App&lt;/p&gt;
}

function renderUnAuthenticatedApp() {
    return &lt;p&gt;Please login&lt;/p&gt;
}
</code></pre>
<h2 id="use-guard-clauses">Use guard clauses</h2>
<p>😕 Nesting hell</p>
<p>🐨 Make our code fail fast 🐨 Natural flow</p>
<p>⚠️ Original code</p>
<pre><code class="language-javascript">if (statusCode === 200) {
    // success
} else {
    if (statusCode === 500) {
        // Internal Server Error
    } else if (statusCode === 400) {
        // Not Found
    } else {
        // Other error
    }
}
</code></pre>
<p>👉 Refactor</p>
<pre><code class="language-javascript">if (statusCode === 500) {
    // Internal Server Error
}

if (statusCode === 400) {
    // Not Found
}

if (statusCode !== 200) {
    // Other error
}

// success
</code></pre>
<h2 id="make-code-self-explanatory">Make code self-explanatory</h2>
<p>🐨 Easy to understand 🐨 Reusable 🐨 A long descriptive name is better than a long comment</p>
<p>⚠️ Original code</p>
<pre><code class="language-javascript"> if (country !== &#39;finland&#39; &amp;&amp;
    country !== &#39;germany&#39; &amp;&amp;
    country !== &#39;vietnam&#39; &amp;&amp;
    country !== &#39;russia&#39; &amp;&amp;
    type !== &#39;💣&#39;
) {
    return Promise.reject(&#39;Not available&#39;)
}
</code></pre>
<p>👉 Refactor</p>
<pre><code class="language-javascript">const isInAvailableCountries = (
    country === &#39;finland&#39; ||
    country === &#39;germany&#39; ||
    country === &#39;vietnam&#39; ||
    country === &#39;russia&#39;
)

const hasBoom = type === &#39;💣&#39;

if (!isInAvailableCountries || hasBoom) {
    return Promise.reject(&#39;Not available&#39;)
}
</code></pre>
<p>🎁 Create a better condition</p>
<pre><code class="language-javascript">const availableCountries = [&#39;finland&#39;, &#39;germany&#39;, &#39;vietnam&#39;, &#39;russia&#39;]
const isInAvailableCountries = availableCountries.includes(country)

const hasBoom = type === &#39;💣&#39;

if (!isInAvailableCountries || hasBoom) {
    return Promise.reject(&#39;Not available&#39;)
}
</code></pre>
<h2 id="make-impossible-states-impossible">Make impossible states impossible</h2>
<p>🐨 Easy to understand</p>
<p>🐨 Prevent lots of bugs</p>
<p><a href="https://kentcdodds.com/blog/stop-using-isloading-booleans">📚 Stop using isLoading booleans</a></p>
<p>⚠️ Original code</p>
<pre><code class="language-javascript">const [isLoading, setIsLoading] = React.useState(false)
const [error, setError] = React.useState(null)
const [coffee, setCoffee] = React.useState(null)

function handleButtonClick() {
    setIsLoading(true)
    setError(null)
    setCoffee(null)

    getCoffee(&#39;cappuccino&#39;, &#39;small&#39;, &#39;finland&#39;, true).then(coffee =&gt; {
        setIsLoading(false)
        setError(null)
        setCoffee(coffee)
    }).catch(error =&gt; {
        setIsLoading(false)
        setError(error)
    })
}
</code></pre>
<p>👉 Refactor</p>
<pre><code class="language-javascript">const state = {
    idle: &#39;idle&#39;,
    loading: &#39;loading&#39;,
    error: &#39;error&#39;,
    success: &#39;success&#39;,
}

const [error, setError] = React.useState(null)
const [coffee, setCoffee] = React.useState(null)
const [status, setStatus] = React.useState(state.idle) 

function handleButtonClick() {
    setStatus(state.loading)

    getCoffee(&#39;cappuccino&#39;, &#39;small&#39;, &#39;finland&#39;, true).then(coffee =&gt; {
        setStatus(state.success)
        setCoffee(coffee)
    }).catch(error =&gt; {
        setStatus(state.error)
        setError(error)
    })
}
</code></pre>
<h2 id="use-object-for-long-argument-lists">Use object for long argument lists</h2>
<p>🐨 Params order won&#39;t matter</p>
<p>🐨 Easy to pass optional param</p>
<p>⚠️ Original code</p>
<pre><code class="language-javascript">export function getCoffee(type, size, country, hasIce) {

getCoffee(&#39;cappuccino&#39;, &#39;small&#39;, &#39;finland&#39;, true)
}
</code></pre>
<p>👉 Refactor</p>
<pre><code class="language-javascript">function getCoffee(options) {
    const {type, size, country, hasIce} = options
}

getCoffee({
    type: &#39;cappuccino&#39;,
    size: &#39;small&#39;,
    country: &#39;finland&#39;,
    hasIce: true
})
</code></pre>
<h2 id="use-objestassign-for-defaults">Use Objest.assign for defaults</h2>
<p>⚠️ Original code</p>
<pre><code class="language-javascript">export function getCoffee(type, size, country, hasIce) {

    type = type || &#39;cappuccino&#39;
    size = size || &#39;small&#39;
    country = country || &#39;finland&#39;
    hasIce = hasIce || false
}
</code></pre>
<p>👉 Refactor</p>
<pre><code class="language-javascript">function getCoffee(customOptions) {
    const defaultOptions = {
        type: &#39;cappuccino&#39;,
        size: &#39;small&#39;,
        country: &#39;finland&#39;,
        hasIce: false
    }

    const options = Object.assign(defaultOptions, customOptions)
}

function getCoffee(options = {}) {
    const {
        type = &#39;cappuccino&#39;,
        size = &#39;small&#39;,
        country = &#39;finland&#39;,
        hasIce = false
    } = options
}

function getCoffee({
    type = &#39;cappuccino&#39;, 
    size = &#39;small&#39;,
    country = &#39;finland&#39;,
    hasIce = false
} = {}) {
}
</code></pre>
<h2 id="replacing-switch-statements-with-object-literals">Replacing switch statements with Object literals</h2>
<p><a href="https://ultimatecourses.com/blog/deprecating-the-switch-statement-for-object-literals#object-literal-fall-through">📚 Replacing switch statements with Object literals</a></p>
<p>⚠️ Original code</p>
<pre><code class="language-javascript">let drink
switch(type) {
    case &#39;cappuccino&#39;:
        drink = &#39;Cappuccino&#39;;
        break;
    case &#39;flatWhite&#39;:
        drink = &#39;Flat White&#39;;
        break;
    case &#39;espresso&#39;:
        drink = &#39;Espresso&#39;;
        break;
    default:
        drink = &#39;Unknown drink&#39;;
}
</code></pre>
<p>👉 Refactor</p>
<pre><code class="language-javascript">const menu = {
    &#39;cappuccino&#39;: &#39;Cappuccino&#39;,
    &#39;flatWhite&#39;: &#39;Flat White&#39;,
    &#39;espresso&#39;: &#39;Espresso&#39;,
    &#39;default&#39;: &#39;Unknown drink&#39;
}

const drink = menu[type] || menu[&#39;default&#39;]
</code></pre>
<h2 id="avoid-hasty-abstractions">Avoid hasty abstractions</h2>
<p>🐨 prefer duplication over the wrong abstraction</p>
<p>🐨 Nothing is free. The code trades the ability to change requirements for reduced duplication, and it is not a good trade - Dan Abramov</p>
<p><a href="https://kentcdodds.com/blog/aha-programming">📚 AHA Programming</a></p>
<p><a href="https://overreacted.io/goodbye-clean-code/">📚 Goodbye, Clean Code</a></p>
<p><a href="https://github.com/vinhlee95/awesome-react-typescript-boilerplate">⚠️ My React Boilerplate</a></p>
<pre><code class="language-javascript">// Action Type
const FETCH_ORDERS_START = &quot;FETCH_ORDERS_START&quot;;
const FETCH_ORDERS_SUCCESS = &quot;FETCH_ORDERS_SUCCESS&quot;;
const FETCH_ORDERS_FAILED = &quot;FETCH_ORDERS_FAILED&quot;;

// Action
export const fetchOrder = (token) =&gt; {
  return (dispatch) =&gt; {
    dispatch(fetchOrdersStart);
    axios
      .get(&quot;/orders.json?auth=&quot; + token)
      .then((res) =&gt; {
        dispatch(fetchOrdersSuccess(res));
      })
      .catch((err) =&gt; {
        dispatch(fetchOrdersFailed(err));
      });
  };
};

export const fetchOrdersSuccess = (orders) =&gt; {
  return {
    type: FETCH_ORDERS_SUCCESS,
    orders: orders,
  };
};

export const fetchOrdersFailed = (error) =&gt; {
  return {
    type: FETCH_ORDERS_FAILED,
    error: error,
  };
};

export const fetchOrdersStart = () =&gt; {
  return {
    type: FETCH_ORDERS_START,
  };
};
</code></pre>
<p>👉️ Abstraction</p>
<pre><code class="language-javascript">// Action
const moduleName = &quot;order&quot;;
const path = &quot;/order&quot;;

const { moduleActionTypes, moduleActions } = useModuleActions(moduleName, path);

function fetchOrder() {
  moduleActionTypes.getModel();
}

function updateOrder(data) {
  moduleActionTypes.updateModel(data);
}
</code></pre>


10 Tips to Improve Readibility in Javascript

> Design patterns help combine experiences of many developers to structure the codes in an optimized manner that meet the problems we are seeking solutions to, and gives common vocabulary used to describe solutions to our problems than describing the syntax and semantics of our code.

## Constructor

This is a special method that is used to initialize the newly created objects once a memory is allocated.

```javascript
var newObject = {};

var newObject = Object.create(Object.prototype);

var newObject = newObject();
```

## Prototype

The prototype pattern is based on prototypical inheritance whereby objects created to act as prototypes for other objects.

```javascript
var myCat = {
  name: "Ford Escort",
  brake: function () {
    console.log("Stop! I am applying brakes");
  },
  Panic: function () {
    console.log("wait. how do you stop thuis thing?");
  },
};

var yourCar = object.create(myCar);
console.log(yourCar.name);
```

## Module

The Module pattern was originally defined as a way to provide both private and public encapsulation for classes in conventional software engineering.

```javascript
function AnimalContainter() {
  const container = [];

  function addAnimal(name) {
    container.push(name);
  }

  function getAllAnimals() {
    return container;
  }

  function removeAnimal(name) {
    const index = container.indexOf(name);
    if (index < 1) {
      throw new Error("Animal not found in container");
    }
    container.splice(index, 1);
  }

  return {
    add: addAnimal,
    get: getAllAnimals,
    remove: removeAnimal,
  };
}

const container = AnimalContainter();
container.add("Hen");
container.add("Goat");
container.add("Sheep");

console.log(container.get()); //Array(3) ["Hen", "Goat", "Sheep"]
container.remove("Sheep");
console.log(container.get()); //Array(2) ["Hen", "Goat"]
```

## Singleton

It is essential in a scenario where only one instance needs to be created, for example, a database connection.

```javascript
function DatabaseConnection() {
  let databaseInstance = null;

  // tracks the number of instances created at a certain time
  let count = 0;

  function init() {
    console.log(`Opening database #${count + 1}`);
    //now perform operation
  }
  function createIntance() {
    if (databaseInstance == null) {
      databaseInstance = init();
    }
    return databaseInstance;
  }
  function closeIntance() {
    console.log("closing database");
    databaseInstance = null;
  }
  return {
    open: createIntance,
    close: closeIntance,
  };
}

const database = DatabseConnection();
database.open(); //Open database #1
database.open(); //Open database #1
database.open(); //Open database #1
database.close(); //close database
```

## Factory

It is a creational concerned with the creation of objects without the need for a constructor.

```javascript
// Dealer A

DealerA = {};

DealerA.title = function title() {
  return "Dealer A";
};

DealerA.pay = function pay(amount) {
  console.log(
    `set up configuration using username: ${this.username} and password: ${this.password}`
  );
  return `Payment for service ${amount} is successful using ${this.title()}`;
};

//Dealer B

DealerB = {};
DealerB.title = function title() {
  return "Dealer B";
};

DealerB.pay = function pay(amount) {
  console.log(
    `set up configuration using username: ${this.username}
and password: ${this.password}`
  );
  return `Payment for service ${amount} is successful using ${this.title()}`;
};

//@param {*} DealerOption
//@param {*} config

function DealerFactory(DealerOption, config = {}) {
  const dealer = Object.create(dealerOption);
  Object.assign(dealer, config);
  return dealer;
}

const dealerFactory = DealerFactory(DealerA, {
  username: "user",
  password: "pass",
});
console.log(dealerFactory.title());
console.log(dealerFactory.pay(12));

const dealerFactory2 = DealerFactory(DealerB, {
  username: "user2",
  password: "pass2",
});
console.log(dealerFactory2.title());
console.log(dealerFactory2.pay(50));
```

## Observer

The observer design pattern is handy in a place where objects communicate with other sets of objects simultaneously.

```javascript
function Observer() {
  this.observerContainer = [];
}

Observer.prototype.subscribe = function (element) {
  this.observerContainer.push(element);
};

// the following removes an element from the container

Observer.prototype.unsubscribe = function (element) {
  const elementIndex = this.observerContainer.indexOf(element);
  if (elementIndex > -1) {
    this.observerContainer.splice(elementIndex, 1);
  }
};

/**
 * we notify elements added to the container by calling
 * each subscribed components added to our container
 */
Observer.prototype.notifyAll = function (element) {
  this.observerContainer.forEach(function (observerElement) {
    observerElement(element);
  });
};
```

## Command

The command design pattern encapsulates method invocation, operations or requests into a single object so that we can pass method calls at our discretion. The command design pattern gives us an opportunity to issue commands from anything executing commands and delegates responsibility to different objects instead.

```javascript
(function () {
  var carManager = {
    //information requested
    requestInfo: function (model, id) {
      return "The information for " + model + " with ID " + id + " is foo bar";
    },

    // now purchase the car
    buyVehicle: function (model, id) {
      return "You have successfully purchased Item " + id + ", a " + model;
    },

    // now arrange a viewing
    arrangeViewing: function (model, id) {
      return (
        "You have successfully booked a viewing of " +
        model +
        " ( " +
        id +
        " ) "
      );
    },
  };
})();
```

<blockquote>
<p>Design patterns help combine experiences of many developers to structure the codes in an optimized manner that meet the problems we are seeking solutions to, and gives common vocabulary used to describe solutions to our problems than describing the syntax and semantics of our code.</p>
</blockquote>
<h2 id="constructor">Constructor</h2>
<p>This is a special method that is used to initialize the newly created objects once a memory is allocated.</p>
<pre><code class="language-javascript">var newObject = {};

var newObject = Object.create(Object.prototype);

var newObject = newObject();
</code></pre>
<h2 id="prototype">Prototype</h2>
<p>The prototype pattern is based on prototypical inheritance whereby objects created to act as prototypes for other objects.</p>
<pre><code class="language-javascript">var myCat = {
  name: &quot;Ford Escort&quot;,
  brake: function () {
    console.log(&quot;Stop! I am applying brakes&quot;);
  },
  Panic: function () {
    console.log(&quot;wait. how do you stop thuis thing?&quot;);
  },
};

var yourCar = object.create(myCar);
console.log(yourCar.name);
</code></pre>
<h2 id="module">Module</h2>
<p>The Module pattern was originally defined as a way to provide both private and public encapsulation for classes in conventional software engineering.</p>
<pre><code class="language-javascript">function AnimalContainter() {
  const container = [];

  function addAnimal(name) {
    container.push(name);
  }

  function getAllAnimals() {
    return container;
  }

  function removeAnimal(name) {
    const index = container.indexOf(name);
    if (index &lt; 1) {
      throw new Error(&quot;Animal not found in container&quot;);
    }
    container.splice(index, 1);
  }

  return {
    add: addAnimal,
    get: getAllAnimals,
    remove: removeAnimal,
  };
}

const container = AnimalContainter();
container.add(&quot;Hen&quot;);
container.add(&quot;Goat&quot;);
container.add(&quot;Sheep&quot;);

console.log(container.get()); //Array(3) [&quot;Hen&quot;, &quot;Goat&quot;, &quot;Sheep&quot;]
container.remove(&quot;Sheep&quot;);
console.log(container.get()); //Array(2) [&quot;Hen&quot;, &quot;Goat&quot;]
</code></pre>
<h2 id="singleton">Singleton</h2>
<p>It is essential in a scenario where only one instance needs to be created, for example, a database connection.</p>
<pre><code class="language-javascript">function DatabaseConnection() {
  let databaseInstance = null;

  // tracks the number of instances created at a certain time
  let count = 0;

  function init() {
    console.log(`Opening database #${count + 1}`);
    //now perform operation
  }
  function createIntance() {
    if (databaseInstance == null) {
      databaseInstance = init();
    }
    return databaseInstance;
  }
  function closeIntance() {
    console.log(&quot;closing database&quot;);
    databaseInstance = null;
  }
  return {
    open: createIntance,
    close: closeIntance,
  };
}

const database = DatabseConnection();
database.open(); //Open database #1
database.open(); //Open database #1
database.open(); //Open database #1
database.close(); //close database
</code></pre>
<h2 id="factory">Factory</h2>
<p>It is a creational concerned with the creation of objects without the need for a constructor.</p>
<pre><code class="language-javascript">// Dealer A

DealerA = {};

DealerA.title = function title() {
  return &quot;Dealer A&quot;;
};

DealerA.pay = function pay(amount) {
  console.log(
    `set up configuration using username: ${this.username} and password: ${this.password}`
  );
  return `Payment for service ${amount} is successful using ${this.title()}`;
};

//Dealer B

DealerB = {};
DealerB.title = function title() {
  return &quot;Dealer B&quot;;
};

DealerB.pay = function pay(amount) {
  console.log(
    `set up configuration using username: ${this.username}
and password: ${this.password}`
  );
  return `Payment for service ${amount} is successful using ${this.title()}`;
};

//@param {*} DealerOption
//@param {*} config

function DealerFactory(DealerOption, config = {}) {
  const dealer = Object.create(dealerOption);
  Object.assign(dealer, config);
  return dealer;
}

const dealerFactory = DealerFactory(DealerA, {
  username: &quot;user&quot;,
  password: &quot;pass&quot;,
});
console.log(dealerFactory.title());
console.log(dealerFactory.pay(12));

const dealerFactory2 = DealerFactory(DealerB, {
  username: &quot;user2&quot;,
  password: &quot;pass2&quot;,
});
console.log(dealerFactory2.title());
console.log(dealerFactory2.pay(50));
</code></pre>
<h2 id="observer">Observer</h2>
<p>The observer design pattern is handy in a place where objects communicate with other sets of objects simultaneously.</p>
<pre><code class="language-javascript">function Observer() {
  this.observerContainer = [];
}

Observer.prototype.subscribe = function (element) {
  this.observerContainer.push(element);
};

// the following removes an element from the container

Observer.prototype.unsubscribe = function (element) {
  const elementIndex = this.observerContainer.indexOf(element);
  if (elementIndex &gt; -1) {
    this.observerContainer.splice(elementIndex, 1);
  }
};

/**
 * we notify elements added to the container by calling
 * each subscribed components added to our container
 */
Observer.prototype.notifyAll = function (element) {
  this.observerContainer.forEach(function (observerElement) {
    observerElement(element);
  });
};
</code></pre>
<h2 id="command">Command</h2>
<p>The command design pattern encapsulates method invocation, operations or requests into a single object so that we can pass method calls at our discretion. The command design pattern gives us an opportunity to issue commands from anything executing commands and delegates responsibility to different objects instead.</p>
<pre><code class="language-javascript">(function () {
  var carManager = {
    //information requested
    requestInfo: function (model, id) {
      return &quot;The information for &quot; + model + &quot; with ID &quot; + id + &quot; is foo bar&quot;;
    },

    // now purchase the car
    buyVehicle: function (model, id) {
      return &quot;You have successfully purchased Item &quot; + id + &quot;, a &quot; + model;
    },

    // now arrange a viewing
    arrangeViewing: function (model, id) {
      return (
        &quot;You have successfully booked a viewing of &quot; +
        model +
        &quot; ( &quot; +
        id +
        &quot; ) &quot;
      );
    },
  };
})();
</code></pre>


7 Best JavaScript Design Pattern

If you face a heavy lag whenever using inkscape on Mac, you may follow these steps as workaround meanwhile the real fix still on progress :

1. In Finder, Open the info window of inkscape
2. Select "Open in low resolution"
3. Run Inkscape

This should fix the problem, although the font looks a little blurry. But, what choice do we have now. 

<p>If you face a heavy lag whenever using inkscape on Mac, you may follow these steps as workaround meanwhile the real fix still on progress :</p>
<ol>
<li>In Finder, Open the info window of inkscape</li>
<li>Select &quot;Open in low resolution&quot;</li>
<li>Run Inkscape</li>
</ol>
<p>This should fix the problem, although the font looks a little blurry. But, what choice do we have now. </p>


Fix Laggy Inkscape on Mac

> These golang frameworks picked based on their github stars from the highest.

## [Gin](https://github.com/gin-gonic/gin)

Github Stars: **48.4k**

Gin is a HTTP web framework written in Go (Golang). It features a Martini-like API with much better performance -- up to 40 times faster. If you need smashing performance, get yourself some Gin.

```go
package main

import "github.com/gin-gonic/gin"

func main() {
	r := gin.Default()
	r.GET("/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "pong",
		})
	})
	r.Run()
}
```

---

## [Beego](https://github.com/beego/beego)

Github Stars: **26.3k**

beego is an open-source, high-performance web framework for the Go programming language.

```go
package main

import "github.com/beego/beego/v2/server/web"

func main() {
	web.Run()
}
```

---

## [Iris](https://github.com/kataras/iris)

Github Stars: **20.6k**

Iris is a fast, simple yet fully featured and very efficient web framework for Go.

```go
package main

import "github.com/kataras/iris/v12"

type (
  request struct {
    Firstname string `json:"firstname"`
    Lastname  string `json:"lastname"`
  }

  response struct {
    ID      uint64 `json:"id"`
    Message string `json:"message"`
  }
)

func main() {
  app := iris.New()
  app.Handle("PUT", "/users/{id:uint64}", updateUser)
  app.Listen(":8080")
}

func updateUser(ctx iris.Context) {
  id, _ := ctx.Params().GetUint64("id")

  var req request
  if err := ctx.ReadJSON(&req); err != nil {
    ctx.StopWithError(iris.StatusBadRequest, err)
    return
  }

  resp := response{
    ID:      id,
    Message: req.Firstname + " updated successfully",
  }
  ctx.JSON(resp)
}
```

---

## [Kit](https://github.com/go-kit/kit)

Github Stars: **20.2k**

Go kit is a programming toolkit for building microservices (or elegant monoliths) in Go. It solves common problems in distributed systems and application architecture so you can focus on delivering business value.

```go
import (
	"context"
	"encoding/json"
	"log"
	"net/http"

	httptransport "github.com/go-kit/kit/transport/http"
)

func main() {
	svc := stringService{}

	uppercaseHandler := httptransport.NewServer(
		makeUppercaseEndpoint(svc),
		decodeUppercaseRequest,
		encodeResponse,
	)

	countHandler := httptransport.NewServer(
		makeCountEndpoint(svc),
		decodeCountRequest,
		encodeResponse,
	)

	http.Handle("/uppercase", uppercaseHandler)
	http.Handle("/count", countHandler)
	log.Fatal(http.ListenAndServe(":8080", nil))
}

func decodeUppercaseRequest(_ context.Context, r *http.Request) (interface{}, error) {
	var request uppercaseRequest
	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
		return nil, err
	}
	return request, nil
}

func decodeCountRequest(_ context.Context, r *http.Request) (interface{}, error) {
	var request countRequest
	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
		return nil, err
	}
	return request, nil
}

func encodeResponse(_ context.Context, w http.ResponseWriter, response interface{}) error {
	return json.NewEncoder(w).Encode(response)
}
```

---

## [Echo](https://github.com/labstack/echo)

Github Stars: **19.8k**

High performance, minimalist Go web framework

```go
package main

import (
  "net/http"
  "github.com/labstack/echo/v4"
  "github.com/labstack/echo/v4/middleware"
)

func main() {
  // Echo instance
  e := echo.New()

  // Middleware
  e.Use(middleware.Logger())
  e.Use(middleware.Recover())

  // Routes
  e.GET("/", hello)

  // Start server
  e.Logger.Fatal(e.Start(":1323"))
}

// Handler
func hello(c echo.Context) error {
  return c.String(http.StatusOK, "Hello, World!")
}
```

---

## [Fasthttp](https://github.com/valyala/fasthttp)

Github Stars: **15.1**

Fast HTTP package for Go. Tuned for high performance. Zero memory allocations in hot paths. Up to 10x faster than net/http

```go
type MyHandler struct {
	foobar string
}

func (h *MyHandler) HandleFastHTTP(ctx *fasthttp.RequestCtx) {
	fmt.Fprintf(ctx, "Hello, world! Requested path is %q. Foobar is %q",
		ctx.Path(), h.foobar)
}

func fastHTTPHandler(ctx *fasthttp.RequestCtx) {
	fmt.Fprintf(ctx, "Hi there! RequestURI is %q", ctx.RequestURI())
}

myHandler := &MyHandler{
	foobar: "foobar",
}
fasthttp.ListenAndServe(":8080", myHandler.HandleFastHTTP)

fasthttp.ListenAndServe(":8081", fastHTTPHandler)
```

---

## [Mux](https://github.com/gorilla/mux)

Github Stars: **14.3k**

A powerful HTTP router and URL matcher for building Go web servers with 🦍

```go
func main() {
    r := mux.NewRouter()
    r.HandleFunc("/", HomeHandler)
    r.HandleFunc("/products", ProductsHandler)
    r.HandleFunc("/articles", ArticlesHandler)
    http.Handle("/", r)
}
```

---

## [Fiber](https://github.com/gofiber/fiber)

Github Stars: **13.4**

⚡️ Express inspired web framework written in Go

```go
package main

import "github.com/gofiber/fiber/v2"

func main() {
    app := fiber.New()

    app.Get("/", func(c *fiber.Ctx) error {
        return c.SendString("Hello, World 👋!")
    })

    app.Listen(":3000")
}
```

---

## [Kratos](https://github.com/go-kratos/kratos)

Github Stars: **12.6k**

A Go framework for microservices.

```go
import "github.com/go-kratos/kratos/v2"
import "github.com/go-kratos/kratos/v2/transport/grpc"
import "github.com/go-kratos/kratos/v2/transport/http"

httpSrv := http.NewServer(http.Address(":8000"))
grpcSrv := grpc.NewServer(grpc.Address(":9000"))

app := kratos.New(
    kratos.Name("kratos"),
    kratos.Version("latest"),
    kratos.Server(httpSrv, grpcSrv),
)
app.Run()
```

---

## [Micro](https://github.com/micro/micro)

Github Stars: **10k**

Micro is a distributed OS built for the Cloud. Micro addresses the key requirements for building services in the cloud. It leverages the microservices architecture pattern and provides a set of services which act as the building blocks of a platform. Micro deals with the complexity of distributed systems and provides simpler programmable abstractions to build on.

```go
package main

import (
	"context"
	"fmt"
	"time"

	"github.com/micro/micro/v3/service"
	proto "github.com/micro/services/helloworld/proto"
)

func main() {
	srv := service.New()

		client := proto.NewHelloworldService("helloworld", srv.Client())

		rsp, err := client.Call(context.Background(), &proto.Request{
			Name: "John",
		})
		if err != nil {
			fmt.Println("Error calling helloworld: ", err)
			return
		}

		fmt.Println("Response: ", rsp.Msg)
		
		time.Sleep(time.Second * 5)
}
```

---

<blockquote>
<p>These golang frameworks picked based on their github stars from the highest.</p>
</blockquote>
<h2 id="gin"><a href="https://github.com/gin-gonic/gin">Gin</a></h2>
<p>Github Stars: <strong>48.4k</strong></p>
<p>Gin is a HTTP web framework written in Go (Golang). It features a Martini-like API with much better performance -- up to 40 times faster. If you need smashing performance, get yourself some Gin.</p>
<pre><code class="language-go">package main

import &quot;github.com/gin-gonic/gin&quot;

func main() {
    r := gin.Default()
    r.GET(&quot;/ping&quot;, func(c *gin.Context) {
        c.JSON(200, gin.H{
            &quot;message&quot;: &quot;pong&quot;,
        })
    })
    r.Run()
}
</code></pre>
<hr>
<h2 id="beego"><a href="https://github.com/beego/beego">Beego</a></h2>
<p>Github Stars: <strong>26.3k</strong></p>
<p>beego is an open-source, high-performance web framework for the Go programming language.</p>
<pre><code class="language-go">package main

import &quot;github.com/beego/beego/v2/server/web&quot;

func main() {
    web.Run()
}
</code></pre>
<hr>
<h2 id="iris"><a href="https://github.com/kataras/iris">Iris</a></h2>
<p>Github Stars: <strong>20.6k</strong></p>
<p>Iris is a fast, simple yet fully featured and very efficient web framework for Go.</p>
<pre><code class="language-go">package main

import &quot;github.com/kataras/iris/v12&quot;

type (
  request struct {
    Firstname string `json:&quot;firstname&quot;`
    Lastname  string `json:&quot;lastname&quot;`
  }

  response struct {
    ID      uint64 `json:&quot;id&quot;`
    Message string `json:&quot;message&quot;`
  }
)

func main() {
  app := iris.New()
  app.Handle(&quot;PUT&quot;, &quot;/users/{id:uint64}&quot;, updateUser)
  app.Listen(&quot;:8080&quot;)
}

func updateUser(ctx iris.Context) {
  id, _ := ctx.Params().GetUint64(&quot;id&quot;)

  var req request
  if err := ctx.ReadJSON(&amp;req); err != nil {
    ctx.StopWithError(iris.StatusBadRequest, err)
    return
  }

  resp := response{
    ID:      id,
    Message: req.Firstname + &quot; updated successfully&quot;,
  }
  ctx.JSON(resp)
}
</code></pre>
<hr>
<h2 id="kit"><a href="https://github.com/go-kit/kit">Kit</a></h2>
<p>Github Stars: <strong>20.2k</strong></p>
<p>Go kit is a programming toolkit for building microservices (or elegant monoliths) in Go. It solves common problems in distributed systems and application architecture so you can focus on delivering business value.</p>
<pre><code class="language-go">import (
    &quot;context&quot;
    &quot;encoding/json&quot;
    &quot;log&quot;
    &quot;net/http&quot;

    httptransport &quot;github.com/go-kit/kit/transport/http&quot;
)

func main() {
    svc := stringService{}

    uppercaseHandler := httptransport.NewServer(
        makeUppercaseEndpoint(svc),
        decodeUppercaseRequest,
        encodeResponse,
    )

    countHandler := httptransport.NewServer(
        makeCountEndpoint(svc),
        decodeCountRequest,
        encodeResponse,
    )

    http.Handle(&quot;/uppercase&quot;, uppercaseHandler)
    http.Handle(&quot;/count&quot;, countHandler)
    log.Fatal(http.ListenAndServe(&quot;:8080&quot;, nil))
}

func decodeUppercaseRequest(_ context.Context, r *http.Request) (interface{}, error) {
    var request uppercaseRequest
    if err := json.NewDecoder(r.Body).Decode(&amp;request); err != nil {
        return nil, err
    }
    return request, nil
}

func decodeCountRequest(_ context.Context, r *http.Request) (interface{}, error) {
    var request countRequest
    if err := json.NewDecoder(r.Body).Decode(&amp;request); err != nil {
        return nil, err
    }
    return request, nil
}

func encodeResponse(_ context.Context, w http.ResponseWriter, response interface{}) error {
    return json.NewEncoder(w).Encode(response)
}
</code></pre>
<hr>
<h2 id="echo"><a href="https://github.com/labstack/echo">Echo</a></h2>
<p>Github Stars: <strong>19.8k</strong></p>
<p>High performance, minimalist Go web framework</p>
<pre><code class="language-go">package main

import (
  &quot;net/http&quot;
  &quot;github.com/labstack/echo/v4&quot;
  &quot;github.com/labstack/echo/v4/middleware&quot;
)

func main() {
  // Echo instance
  e := echo.New()

  // Middleware
  e.Use(middleware.Logger())
  e.Use(middleware.Recover())

  // Routes
  e.GET(&quot;/&quot;, hello)

  // Start server
  e.Logger.Fatal(e.Start(&quot;:1323&quot;))
}

// Handler
func hello(c echo.Context) error {
  return c.String(http.StatusOK, &quot;Hello, World!&quot;)
}
</code></pre>
<hr>
<h2 id="fasthttp"><a href="https://github.com/valyala/fasthttp">Fasthttp</a></h2>
<p>Github Stars: <strong>15.1</strong></p>
<p>Fast HTTP package for Go. Tuned for high performance. Zero memory allocations in hot paths. Up to 10x faster than net/http</p>
<pre><code class="language-go">type MyHandler struct {
    foobar string
}

func (h *MyHandler) HandleFastHTTP(ctx *fasthttp.RequestCtx) {
    fmt.Fprintf(ctx, &quot;Hello, world! Requested path is %q. Foobar is %q&quot;,
        ctx.Path(), h.foobar)
}

func fastHTTPHandler(ctx *fasthttp.RequestCtx) {
    fmt.Fprintf(ctx, &quot;Hi there! RequestURI is %q&quot;, ctx.RequestURI())
}

myHandler := &amp;MyHandler{
    foobar: &quot;foobar&quot;,
}
fasthttp.ListenAndServe(&quot;:8080&quot;, myHandler.HandleFastHTTP)

fasthttp.ListenAndServe(&quot;:8081&quot;, fastHTTPHandler)
</code></pre>
<hr>
<h2 id="mux"><a href="https://github.com/gorilla/mux">Mux</a></h2>
<p>Github Stars: <strong>14.3k</strong></p>
<p>A powerful HTTP router and URL matcher for building Go web servers with 🦍</p>
<pre><code class="language-go">func main() {
    r := mux.NewRouter()
    r.HandleFunc(&quot;/&quot;, HomeHandler)
    r.HandleFunc(&quot;/products&quot;, ProductsHandler)
    r.HandleFunc(&quot;/articles&quot;, ArticlesHandler)
    http.Handle(&quot;/&quot;, r)
}
</code></pre>
<hr>
<h2 id="fiber"><a href="https://github.com/gofiber/fiber">Fiber</a></h2>
<p>Github Stars: <strong>13.4</strong></p>
<p>⚡️ Express inspired web framework written in Go</p>
<pre><code class="language-go">package main

import &quot;github.com/gofiber/fiber/v2&quot;

func main() {
    app := fiber.New()

    app.Get(&quot;/&quot;, func(c *fiber.Ctx) error {
        return c.SendString(&quot;Hello, World 👋!&quot;)
    })

    app.Listen(&quot;:3000&quot;)
}
</code></pre>
<hr>
<h2 id="kratos"><a href="https://github.com/go-kratos/kratos">Kratos</a></h2>
<p>Github Stars: <strong>12.6k</strong></p>
<p>A Go framework for microservices.</p>
<pre><code class="language-go">import &quot;github.com/go-kratos/kratos/v2&quot;
import &quot;github.com/go-kratos/kratos/v2/transport/grpc&quot;
import &quot;github.com/go-kratos/kratos/v2/transport/http&quot;

httpSrv := http.NewServer(http.Address(&quot;:8000&quot;))
grpcSrv := grpc.NewServer(grpc.Address(&quot;:9000&quot;))

app := kratos.New(
    kratos.Name(&quot;kratos&quot;),
    kratos.Version(&quot;latest&quot;),
    kratos.Server(httpSrv, grpcSrv),
)
app.Run()
</code></pre>
<hr>
<h2 id="micro"><a href="https://github.com/micro/micro">Micro</a></h2>
<p>Github Stars: <strong>10k</strong></p>
<p>Micro is a distributed OS built for the Cloud. Micro addresses the key requirements for building services in the cloud. It leverages the microservices architecture pattern and provides a set of services which act as the building blocks of a platform. Micro deals with the complexity of distributed systems and provides simpler programmable abstractions to build on.</p>
<pre><code class="language-go">package main

import (
    &quot;context&quot;
    &quot;fmt&quot;
    &quot;time&quot;

    &quot;github.com/micro/micro/v3/service&quot;
    proto &quot;github.com/micro/services/helloworld/proto&quot;
)

func main() {
    srv := service.New()

        client := proto.NewHelloworldService(&quot;helloworld&quot;, srv.Client())

        rsp, err := client.Call(context.Background(), &amp;proto.Request{
            Name: &quot;John&quot;,
        })
        if err != nil {
            fmt.Println(&quot;Error calling helloworld: &quot;, err)
            return
        }

        fmt.Println(&quot;Response: &quot;, rsp.Msg)
        
        time.Sleep(time.Second * 5)
}
</code></pre>
<hr>


Top 10 Golang Framework 2021

> These state managements picked based on github stars rating from the highest.

## [Redux](https://github.com/reduxjs/redux)

Github Stars: **56k**

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

```javascript
import { createStore } from 'redux'

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

let store = createStore(counterReducer)

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}
```
---

## [MobX](https://github.com/mobxjs/mobx)

Github Stars: **23.8k**

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react";

// Model the application state.
class Timer {
  secondsPassed = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increase() {
    this.secondsPassed += 1;
  }

  reset() {
    this.secondsPassed = 0;
  }
}

const myTimer = new Timer();

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
  <button onClick={() => timer.reset()}>
    Seconds passed: {timer.secondsPassed}
  </button>
));

ReactDOM.render(<TimerView timer={myTimer} />, document.body);

// Update the 'Seconds passed: X' text every second.
setInterval(() => {
  myTimer.increase();
}, 1000);
```
---

## [Recoil](https://github.com/facebookexperimental/Recoil)

Github Stars: **13k**

Recoil is an experimental set of utilities for state management with React.

```jsx
// Wrap your application
import React from "react";
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil";

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

// Import atom to use recoil on component
const textState = atom({
  key: "textState",
  default: "",
});

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

// Import selector to derive state
const charCountState = selector({
  key: "charCountState",
  get: ({ get }) => {
    const text = get(textState);

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}
```

---

## [Xstate](https://github.com/davidkpiano/xstate)

Github Stars: **16.2k**

JavaScript and TypeScript finite state machines and statecharts for the modern web.

```javascript
import { createMachine, interpret } from "xstate";

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
});

const toggleService = interpret(toggleMachine)
  .onTransition((state) => console.log(state.value))
  .start();
// => 'inactive'

toggleService.send("TOGGLE");
// => 'active'

toggleService.send("TOGGLE");
// => 'inactive'
```

---

## [Easy Peasy](https://github.com/ctrlplusb/easy-peasy)

Github Stars: **4.3k**

Easy Peasy is an abstraction of Redux, providing a reimagined API that focuses on developer experience. It allows you to quickly and easily manage your state, whilst leveraging the strong architectural guarantees and extensive eco-system that Redux has to offer.

* Zero configuration
* No boilerplate
* React hooks based API
* Extensive TypeScript support
* Encapsulate data fetching
* Computed properties
* Reactive actions
* Redux middleware support
* State persistence
* Redux Dev Tools
* Global, context, or local stores
* Built-in testing utils
* React Native supported
* Hot reloading supported

```jsx
// Create Store
const store = createStore({
  todos: {
    items: ["Create store", "Wrap application", "Use store"],
    add: action((state, payload) => {
      state.items.push(payload);
    }),
  },
});

// Wrap your application
function App() {
  return (
    <StoreProvider store={store}>
      <TodoList />
    </StoreProvider>
  );
}

// Use the store
function TodoList() {
  const todos = useStoreState((state) => state.todos.items);
  const add = useStoreActions((actions) => actions.todos.add);
  return (
    <div>
      {todos.map((todo, idx) => (
        <div key={idx}>{todo}</div>
      ))}
      <AddTodo onAdd={add} />
    </div>
  );
}
```

---

## [Jotai](https://github.com/pmndrs/jotai)

Github Stars: **4.1k**

Primitive and flexible state management for React

* Minimalistic API
* No string keys
* TypeScript oriented

```javascript
import { atom, useAtom } from "jotai";

// Create your atoms and derivatives
const textAtom = atom("hello");
const uppercaseAtom = atom((get) => get(textAtom).toUpperCase());

// Use them anywhere in your app
const Input = () => {
  const [text, setText] = useAtom(textAtom);
  return <input value={text} onChange={(e) => setText(e.target.value)} />;
};

const Uppercase = () => {
  const [uppercase] = useAtom(uppercaseAtom);
  return <div>Uppercase: {uppercase}</div>;
};

// Now you have the components
const MyApp = () => (
  <div>
    <Input />
    <Uppercase />
  </div>
);
```

---

## [Rematch](https://github.com/rematch/rematch)

Github Stars: **7.2k**

Rematch is Redux best practices without the boilerplate. No more action types, action creators, switch statements or thunks in less than 1.4 kilobytes.

* No configuration needed
* Reduces Redux boilerplate
* Built-in side-effects support
* React Devtools support
* TypeScript support
* Supports dynamically adding reducers
* Supports hot-reloading
* Allows to create multiple stores
* Supports React Native
* Extendable with plugins
* Many plugins available out of the box (redux-persist, immer.js, reselect, etc.)

```ts
type PlayersState = {
  players: PlayerModel[]
}

export const players = createModel < RootModel > ()({
  state: {
    players: [],
  } as PlayersState,
  reducers: {
    SET_PLAYERS: (state: PlayersState, players: PlayerModel[]) => {
      return {
        ...state,
        players,
      }
    },
  },
  effects: (dispatch) => {
    const { players } = dispatch
    return {
      async getPlayers(): Promise<any> {
        let response = await fetch('https://www.balldontlie.io/api/v1/players')
        let { data }: { data: PlayerModel[] } = await response.json()
        players.SET_PLAYERS(data)
      },
    }
  },
})
```

---

## [Zustand](https://github.com/pmndrs/zustand)

Github Stars: **8.5k**

A small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.

```javascript
import create from "zustand";

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

function BearCounter() {
  const bears = useStore((state) => state.bears);
  return <h1>{bears} around here ...</h1>;
}
```

---

## [Unstated Next](https://github.com/jamiebuilds/unstated-next)

Github Stars: **3.5k**

200 bytes to never think about React state management libraries ever again

```jsx
import React, { useState } from "react";
import { createContainer } from "unstated-next";
import { render } from "react-dom";

function useCounter(initialState = 0) {
  let [count, setCount] = useState(initialState);
  let decrement = () => setCount(count - 1);
  let increment = () => setCount(count + 1);
  return { count, decrement, increment };
}

let Counter = createContainer(useCounter);

function CounterDisplay() {
  let counter = Counter.useContainer();
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
    </div>
  );
}

function App() {
  return (
    <Counter.Provider>
      <CounterDisplay />
      <Counter.Provider initialState={2}>
        <div>
          <div>
            <CounterDisplay />
          </div>
        </div>
      </Counter.Provider>
    </Counter.Provider>
  );
}

render(<App />, document.getElementById("root"));
```

---

## [Unistore](https://github.com/developit/unistore)

Github stars: **2.8k**

350b / 650b state container with component actions for Preact & React

```jsx
import createStore from "unistore";
import { Provider, connect } from "unistore/preact";

let store = createStore({ count: 0, stuff: [] });

let actions = {
  increment(state) {
    return { count: state.count + 1 };
  },

  increment2: ({ count }) => ({ count: count + 1 }),

  incrementBy: ({ count }, incrementAmount) => {
    return { count: count + incrementAmount };
  },
};

const App1 = connect(
  "count",
  actions
)(({ count, increment, incrementBy }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
    <button onClick={() => incrementBy(10)}>Increment by 10</button>
  </div>
));

export const getApp1 = () => (
  <Provider store={store}>
    <App1 />
  </Provider>
);
```

<blockquote>
<p>These state managements picked based on github stars rating from the highest.</p>
</blockquote>
<h2 id="redux"><a href="https://github.com/reduxjs/redux">Redux</a></h2>
<p>Github Stars: <strong>56k</strong></p>
<p>Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.</p>
<pre><code class="language-javascript">import { createStore } from &#39;redux&#39;

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case &#39;counter/incremented&#39;:
      return { value: state.value + 1 }
    case &#39;counter/decremented&#39;:
      return { value: state.value - 1 }
    default:
      return state
  }
}

let store = createStore(counterReducer)

store.subscribe(() =&gt; console.log(store.getState()))

store.dispatch({ type: &#39;counter/incremented&#39; })
// {value: 1}
store.dispatch({ type: &#39;counter/incremented&#39; })
// {value: 2}
store.dispatch({ type: &#39;counter/decremented&#39; })
// {value: 1}
</code></pre>
<hr>
<h2 id="mobx"><a href="https://github.com/mobxjs/mobx">MobX</a></h2>
<p>Github Stars: <strong>23.8k</strong></p>
<p>MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).</p>
<pre><code class="language-jsx">import React from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;
import { makeAutoObservable } from &quot;mobx&quot;;
import { observer } from &quot;mobx-react&quot;;

// Model the application state.
class Timer {
  secondsPassed = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increase() {
    this.secondsPassed += 1;
  }

  reset() {
    this.secondsPassed = 0;
  }
}

const myTimer = new Timer();

// Build a &quot;user interface&quot; that uses the observable state.
const TimerView = observer(({ timer }) =&gt; (
  &lt;button onClick={() =&gt; timer.reset()}&gt;
    Seconds passed: {timer.secondsPassed}
  &lt;/button&gt;
));

ReactDOM.render(&lt;TimerView timer={myTimer} /&gt;, document.body);

// Update the &#39;Seconds passed: X&#39; text every second.
setInterval(() =&gt; {
  myTimer.increase();
}, 1000);
</code></pre>
<hr>
<h2 id="recoil"><a href="https://github.com/facebookexperimental/Recoil">Recoil</a></h2>
<p>Github Stars: <strong>13k</strong></p>
<p>Recoil is an experimental set of utilities for state management with React.</p>
<pre><code class="language-jsx">// Wrap your application
import React from &quot;react&quot;;
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from &quot;recoil&quot;;

function App() {
  return (
    &lt;RecoilRoot&gt;
      &lt;CharacterCounter /&gt;
    &lt;/RecoilRoot&gt;
  );
}

// Import atom to use recoil on component
const textState = atom({
  key: &quot;textState&quot;,
  default: &quot;&quot;,
});

function CharacterCounter() {
  return (
    &lt;div&gt;
      &lt;TextInput /&gt;
      &lt;CharacterCount /&gt;
    &lt;/div&gt;
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) =&gt; {
    setText(event.target.value);
  };

  return (
    &lt;div&gt;
      &lt;input type=&quot;text&quot; value={text} onChange={onChange} /&gt;
      &lt;br /&gt;
      Echo: {text}
    &lt;/div&gt;
  );
}

// Import selector to derive state
const charCountState = selector({
  key: &quot;charCountState&quot;,
  get: ({ get }) =&gt; {
    const text = get(textState);

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return &lt;&gt;Character Count: {count}&lt;/&gt;;
}
</code></pre>
<hr>
<h2 id="xstate"><a href="https://github.com/davidkpiano/xstate">Xstate</a></h2>
<p>Github Stars: <strong>16.2k</strong></p>
<p>JavaScript and TypeScript finite state machines and statecharts for the modern web.</p>
<pre><code class="language-javascript">import { createMachine, interpret } from &quot;xstate&quot;;

const toggleMachine = createMachine({
  id: &quot;toggle&quot;,
  initial: &quot;inactive&quot;,
  states: {
    inactive: { on: { TOGGLE: &quot;active&quot; } },
    active: { on: { TOGGLE: &quot;inactive&quot; } },
  },
});

const toggleService = interpret(toggleMachine)
  .onTransition((state) =&gt; console.log(state.value))
  .start();
// =&gt; &#39;inactive&#39;

toggleService.send(&quot;TOGGLE&quot;);
// =&gt; &#39;active&#39;

toggleService.send(&quot;TOGGLE&quot;);
// =&gt; &#39;inactive&#39;
</code></pre>
<hr>
<h2 id="easy-peasy"><a href="https://github.com/ctrlplusb/easy-peasy">Easy Peasy</a></h2>
<p>Github Stars: <strong>4.3k</strong></p>
<p>Easy Peasy is an abstraction of Redux, providing a reimagined API that focuses on developer experience. It allows you to quickly and easily manage your state, whilst leveraging the strong architectural guarantees and extensive eco-system that Redux has to offer.</p>
<ul>
<li>Zero configuration</li>
<li>No boilerplate</li>
<li>React hooks based API</li>
<li>Extensive TypeScript support</li>
<li>Encapsulate data fetching</li>
<li>Computed properties</li>
<li>Reactive actions</li>
<li>Redux middleware support</li>
<li>State persistence</li>
<li>Redux Dev Tools</li>
<li>Global, context, or local stores</li>
<li>Built-in testing utils</li>
<li>React Native supported</li>
<li>Hot reloading supported</li>
</ul>
<pre><code class="language-jsx">// Create Store
const store = createStore({
  todos: {
    items: [&quot;Create store&quot;, &quot;Wrap application&quot;, &quot;Use store&quot;],
    add: action((state, payload) =&gt; {
      state.items.push(payload);
    }),
  },
});

// Wrap your application
function App() {
  return (
    &lt;StoreProvider store={store}&gt;
      &lt;TodoList /&gt;
    &lt;/StoreProvider&gt;
  );
}

// Use the store
function TodoList() {
  const todos = useStoreState((state) =&gt; state.todos.items);
  const add = useStoreActions((actions) =&gt; actions.todos.add);
  return (
    &lt;div&gt;
      {todos.map((todo, idx) =&gt; (
        &lt;div key={idx}&gt;{todo}&lt;/div&gt;
      ))}
      &lt;AddTodo onAdd={add} /&gt;
    &lt;/div&gt;
  );
}
</code></pre>
<hr>
<h2 id="jotai"><a href="https://github.com/pmndrs/jotai">Jotai</a></h2>
<p>Github Stars: <strong>4.1k</strong></p>
<p>Primitive and flexible state management for React</p>
<ul>
<li>Minimalistic API</li>
<li>No string keys</li>
<li>TypeScript oriented</li>
</ul>
<pre><code class="language-javascript">import { atom, useAtom } from &quot;jotai&quot;;

// Create your atoms and derivatives
const textAtom = atom(&quot;hello&quot;);
const uppercaseAtom = atom((get) =&gt; get(textAtom).toUpperCase());

// Use them anywhere in your app
const Input = () =&gt; {
  const [text, setText] = useAtom(textAtom);
  return &lt;input value={text} onChange={(e) =&gt; setText(e.target.value)} /&gt;;
};

const Uppercase = () =&gt; {
  const [uppercase] = useAtom(uppercaseAtom);
  return &lt;div&gt;Uppercase: {uppercase}&lt;/div&gt;;
};

// Now you have the components
const MyApp = () =&gt; (
  &lt;div&gt;
    &lt;Input /&gt;
    &lt;Uppercase /&gt;
  &lt;/div&gt;
);
</code></pre>
<hr>
<h2 id="rematch"><a href="https://github.com/rematch/rematch">Rematch</a></h2>
<p>Github Stars: <strong>7.2k</strong></p>
<p>Rematch is Redux best practices without the boilerplate. No more action types, action creators, switch statements or thunks in less than 1.4 kilobytes.</p>
<ul>
<li>No configuration needed</li>
<li>Reduces Redux boilerplate</li>
<li>Built-in side-effects support</li>
<li>React Devtools support</li>
<li>TypeScript support</li>
<li>Supports dynamically adding reducers</li>
<li>Supports hot-reloading</li>
<li>Allows to create multiple stores</li>
<li>Supports React Native</li>
<li>Extendable with plugins</li>
<li>Many plugins available out of the box (redux-persist, immer.js, reselect, etc.)</li>
</ul>
<pre><code class="language-ts">type PlayersState = {
  players: PlayerModel[]
}

export const players = createModel &lt; RootModel &gt; ()({
  state: {
    players: [],
  } as PlayersState,
  reducers: {
    SET_PLAYERS: (state: PlayersState, players: PlayerModel[]) =&gt; {
      return {
        ...state,
        players,
      }
    },
  },
  effects: (dispatch) =&gt; {
    const { players } = dispatch
    return {
      async getPlayers(): Promise&lt;any&gt; {
        let response = await fetch(&#39;https://www.balldontlie.io/api/v1/players&#39;)
        let { data }: { data: PlayerModel[] } = await response.json()
        players.SET_PLAYERS(data)
      },
    }
  },
})
</code></pre>
<hr>
<h2 id="zustand"><a href="https://github.com/pmndrs/zustand">Zustand</a></h2>
<p>Github Stars: <strong>8.5k</strong></p>
<p>A small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn&#39;t boilerplatey or opinionated, but still just enough to be explicit and flux-like.</p>
<pre><code class="language-javascript">import create from &quot;zustand&quot;;

const useStore = create((set) =&gt; ({
  bears: 0,
  increasePopulation: () =&gt; set((state) =&gt; ({ bears: state.bears + 1 })),
  removeAllBears: () =&gt; set({ bears: 0 }),
}));

function BearCounter() {
  const bears = useStore((state) =&gt; state.bears);
  return &lt;h1&gt;{bears} around here ...&lt;/h1&gt;;
}
</code></pre>
<hr>
<h2 id="unstated-next"><a href="https://github.com/jamiebuilds/unstated-next">Unstated Next</a></h2>
<p>Github Stars: <strong>3.5k</strong></p>
<p>200 bytes to never think about React state management libraries ever again</p>
<pre><code class="language-jsx">import React, { useState } from &quot;react&quot;;
import { createContainer } from &quot;unstated-next&quot;;
import { render } from &quot;react-dom&quot;;

function useCounter(initialState = 0) {
  let [count, setCount] = useState(initialState);
  let decrement = () =&gt; setCount(count - 1);
  let increment = () =&gt; setCount(count + 1);
  return { count, decrement, increment };
}

let Counter = createContainer(useCounter);

function CounterDisplay() {
  let counter = Counter.useContainer();
  return (
    &lt;div&gt;
      &lt;button onClick={counter.decrement}&gt;-&lt;/button&gt;
      &lt;span&gt;{counter.count}&lt;/span&gt;
      &lt;button onClick={counter.increment}&gt;+&lt;/button&gt;
    &lt;/div&gt;
  );
}

function App() {
  return (
    &lt;Counter.Provider&gt;
      &lt;CounterDisplay /&gt;
      &lt;Counter.Provider initialState={2}&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;CounterDisplay /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Counter.Provider&gt;
    &lt;/Counter.Provider&gt;
  );
}

render(&lt;App /&gt;, document.getElementById(&quot;root&quot;));
</code></pre>
<hr>
<h2 id="unistore"><a href="https://github.com/developit/unistore">Unistore</a></h2>
<p>Github stars: <strong>2.8k</strong></p>
<p>350b / 650b state container with component actions for Preact &amp; React</p>
<pre><code class="language-jsx">import createStore from &quot;unistore&quot;;
import { Provider, connect } from &quot;unistore/preact&quot;;

let store = createStore({ count: 0, stuff: [] });

let actions = {
  increment(state) {
    return { count: state.count + 1 };
  },

  increment2: ({ count }) =&gt; ({ count: count + 1 }),

  incrementBy: ({ count }, incrementAmount) =&gt; {
    return { count: count + incrementAmount };
  },
};

const App1 = connect(
  &quot;count&quot;,
  actions
)(({ count, increment, incrementBy }) =&gt; (
  &lt;div&gt;
    &lt;p&gt;Count: {count}&lt;/p&gt;
    &lt;button onClick={increment}&gt;Increment&lt;/button&gt;
    &lt;button onClick={() =&gt; incrementBy(10)}&gt;Increment by 10&lt;/button&gt;
  &lt;/div&gt;
));

export const getApp1 = () =&gt; (
  &lt;Provider store={store}&gt;
    &lt;App1 /&gt;
  &lt;/Provider&gt;
);
</code></pre>


Top 10 React State Management 2021

## Value and Ref Variable Assignment

> Understanding how JavaScript assigns to variables is foundational to writing bug-free JavaScript. If you don’t understand this, you could easily write code that unintentionally changes values.

```javascript
let var1 = 'My string';
let var2 = var1;

var2 = 'My new string';

console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'
```

comparing to

```javascript
let var1 = { name: 'Jim' }
let var2 = var1;

var2.name = 'John';

console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }
```

You might want to be careful about this, one might create a function that mutate object unintentionaly.

## Closures

> Closure is an important JavaScript pattern to give private access to a variable.

```javascript
function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
  }
}

const sayHello = createGreeter('Hello');
sayHello('Joe');
// Hello, Joe
```

## Destructuring

```javascript
const obj = {
  name: 'Joe',
  food: 'cake'
}

const { name, food } = obj;

console.log(name, food);
// 'Joe' 'cake'
```

if you want to define the properties with different name you may do this

```javascript
const obj = {
  name: 'Joe',
  food: 'cake'
}

const { name: myName, food: myFood } = obj;

console.log(myName, myFood);
// 'Joe' 'cake'
```

## Spread Syntax

```javascript
const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10
```

## Rest Syntax

```javascript
function myFunc(...args) {
  console.log(args[0] + args[1]);
}

myFunc(1, 2, 3, 4);
// 3
```

## Array Methods

> JavaScript array methods can often provide you incredible, elegant ways to perform the data transformation you need.

### map

return array where each element is transformed as specified by the function

```javascript
const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);

console.log(mapped);
// [21, 22, 23, 24, 25, 26]
```

### filter

return array of elements where the function returns true

```javascript
const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);

console.log(filtered);
// [2, 4]
```

### reduce

accumulate values as specified in function

```javascript
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);

console.log(reduced);
// 21
```

### find

return the first instance that matches the specified criteria. Does not progress to find any other matching instances.

```javascript
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);

console.log(found);
// 6
```

### findIndex

This works almost identically to find, but rather than returning the first matching element it returns the index of the first matching element. Take the following example, which uses names instead of numbers for clarity.

```javascipt
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');

console.log(foundIndex);
// 1
```

### indexOf

Works almost identically to findIndex, but instead of taking a function as an argument it takes a simple value. You can use this when you have simpler logic and don’t need to use a function to check whether there is a match.

```javascript
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');

console.log(foundIndex);
// 1
```

### push

This is a relatively simple method that adds an item to the end of an array. It modifies the array in-place and the function itself returns the item added to the array.

```javascript
let arr = [1, 2, 3, 4];
const pushed = arr.push(5);

console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5
```

### pop

This removes the last item from an array. Again, it modifies the array in place. The function itself returns the item removed from the array.

```javascript
let arr = [1, 2, 3, 4];
const popped = arr.pop();

console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4
```

### shift

This removes the first item from an array. Again, it modifies the array in place. The function itself returns the item removed from the array.

```javascript
let arr = [1, 2, 3, 4];
const shifted = arr.shift();

console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1
```

### unshift

This adds one or more elements to the beginning of an array. Again, it modifies the array in place. Unlike a lot of the other methods, the function itself returns the new length of the array.

```javascript
let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);

console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7
```

### splice

Change the contents of an array by removing or replacing existing elements and/or adding new elements. This method modifies the array in place.

```javascript
let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')
```

### slice

returns a shallow copy of an array from a specified start position and before a specified end position. If no end position is specified, the rest of the array is returned. Importantly, this method does not modify the array in place but rather returns the desired subset.

```javascript
let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);

console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']
```

### sort

sorts an array based on the provided function which takes a first element and second element argument. Modifies the array in place. If the function returns negative or 0, the order remains unchanged. If positive, the element order is switched.

```javascript
let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);

console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]
```

## Generators

> The generator function specifies what value is yielded next time next() is called. Can either have a finite number of yields, after which next() returns an undefined value, or an infinite number of values using a loop.

```javascript
function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
}

const greet = greeter();

console.log(greet.next().value);
// 'Hi'
console.log(greet.next().value);
// 'How are you?'
console.log(greet.next().value);
// 'Bye'
console.log(greet.next().value);
// undefined
```

## Callback Functions

```javascript
function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}

myFunc('Hello world!', console.log);
// 'Hello world!'
```

## Promises

```javascript
const myPromise = new Promise(function(res, rej) {
  setTimeout(function(){
    if (Math.random() < 0.9) {
      return res('Hooray!');
    }
    return rej('Oh no!');
  }, 1000);
});

myPromise
  .then(function(data) {
    console.log('Success: ' + data);
   })
   .catch(function(err) {
    console.log('Error: ' + err);
   });

// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"
```

## Async Await

```javascript
const greeter = new Promise((res, rej) => {
  setTimeout(() => res('Hello world!'), 2000);
})

async function myFunc() {
  const greeting = await greeter;
  console.log(greeting);
}

myFunc();
// 'Hello world!'
```

<h2 id="value-and-ref-variable-assignment">Value and Ref Variable Assignment</h2>
<blockquote>
<p>Understanding how JavaScript assigns to variables is foundational to writing bug-free JavaScript. If you don’t understand this, you could easily write code that unintentionally changes values.</p>
</blockquote>
<pre><code class="language-javascript">let var1 = &#39;My string&#39;;
let var2 = var1;

var2 = &#39;My new string&#39;;

console.log(var1);
// &#39;My string&#39;
console.log(var2);
// &#39;My new string&#39;
</code></pre>
<p>comparing to</p>
<pre><code class="language-javascript">let var1 = { name: &#39;Jim&#39; }
let var2 = var1;

var2.name = &#39;John&#39;;

console.log(var1);
// { name: &#39;John&#39; }
console.log(var2);
// { name: &#39;John&#39; }
</code></pre>
<p>You might want to be careful about this, one might create a function that mutate object unintentionaly.</p>
<h2 id="closures">Closures</h2>
<blockquote>
<p>Closure is an important JavaScript pattern to give private access to a variable.</p>
</blockquote>
<pre><code class="language-javascript">function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + &#39;, &#39; + name);
  }
}

const sayHello = createGreeter(&#39;Hello&#39;);
sayHello(&#39;Joe&#39;);
// Hello, Joe
</code></pre>
<h2 id="destructuring">Destructuring</h2>
<pre><code class="language-javascript">const obj = {
  name: &#39;Joe&#39;,
  food: &#39;cake&#39;
}

const { name, food } = obj;

console.log(name, food);
// &#39;Joe&#39; &#39;cake&#39;
</code></pre>
<p>if you want to define the properties with different name you may do this</p>
<pre><code class="language-javascript">const obj = {
  name: &#39;Joe&#39;,
  food: &#39;cake&#39;
}

const { name: myName, food: myFood } = obj;

console.log(myName, myFood);
// &#39;Joe&#39; &#39;cake&#39;
</code></pre>
<h2 id="spread-syntax">Spread Syntax</h2>
<pre><code class="language-javascript">const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10
</code></pre>
<h2 id="rest-syntax">Rest Syntax</h2>
<pre><code class="language-javascript">function myFunc(...args) {
  console.log(args[0] + args[1]);
}

myFunc(1, 2, 3, 4);
// 3
</code></pre>
<h2 id="array-methods">Array Methods</h2>
<blockquote>
<p>JavaScript array methods can often provide you incredible, elegant ways to perform the data transformation you need.</p>
</blockquote>
<h3 id="map">map</h3>
<p>return array where each element is transformed as specified by the function</p>
<pre><code class="language-javascript">const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el =&gt; el + 20);

console.log(mapped);
// [21, 22, 23, 24, 25, 26]
</code></pre>
<h3 id="filter">filter</h3>
<p>return array of elements where the function returns true</p>
<pre><code class="language-javascript">const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el =&gt; el === 2 || el === 4);

console.log(filtered);
// [2, 4]
</code></pre>
<h3 id="reduce">reduce</h3>
<p>accumulate values as specified in function</p>
<pre><code class="language-javascript">const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) =&gt; total + current);

console.log(reduced);
// 21
</code></pre>
<h3 id="find">find</h3>
<p>return the first instance that matches the specified criteria. Does not progress to find any other matching instances.</p>
<pre><code class="language-javascript">const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el =&gt; el &gt; 5);

console.log(found);
// 6
</code></pre>
<h3 id="findindex">findIndex</h3>
<p>This works almost identically to find, but rather than returning the first matching element it returns the index of the first matching element. Take the following example, which uses names instead of numbers for clarity.</p>
<pre><code class="language-javascipt">const arr = [&#39;Nick&#39;, &#39;Frank&#39;, &#39;Joe&#39;, &#39;Frank&#39;];
const foundIndex = arr.findIndex(el =&gt; el === &#39;Frank&#39;);

console.log(foundIndex);
// 1
</code></pre>
<h3 id="indexof">indexOf</h3>
<p>Works almost identically to findIndex, but instead of taking a function as an argument it takes a simple value. You can use this when you have simpler logic and don’t need to use a function to check whether there is a match.</p>
<pre><code class="language-javascript">const arr = [&#39;Nick&#39;, &#39;Frank&#39;, &#39;Joe&#39;, &#39;Frank&#39;];
const foundIndex = arr.indexOf(&#39;Frank&#39;);

console.log(foundIndex);
// 1
</code></pre>
<h3 id="push">push</h3>
<p>This is a relatively simple method that adds an item to the end of an array. It modifies the array in-place and the function itself returns the item added to the array.</p>
<pre><code class="language-javascript">let arr = [1, 2, 3, 4];
const pushed = arr.push(5);

console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5
</code></pre>
<h3 id="pop">pop</h3>
<p>This removes the last item from an array. Again, it modifies the array in place. The function itself returns the item removed from the array.</p>
<pre><code class="language-javascript">let arr = [1, 2, 3, 4];
const popped = arr.pop();

console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4
</code></pre>
<h3 id="shift">shift</h3>
<p>This removes the first item from an array. Again, it modifies the array in place. The function itself returns the item removed from the array.</p>
<pre><code class="language-javascript">let arr = [1, 2, 3, 4];
const shifted = arr.shift();

console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1
</code></pre>
<h3 id="unshift">unshift</h3>
<p>This adds one or more elements to the beginning of an array. Again, it modifies the array in place. Unlike a lot of the other methods, the function itself returns the new length of the array.</p>
<pre><code class="language-javascript">let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);

console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7
</code></pre>
<h3 id="splice">splice</h3>
<p>Change the contents of an array by removing or replacing existing elements and/or adding new elements. This method modifies the array in place.</p>
<pre><code class="language-javascript">let arr = [&#39;a&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;];
arr.splice(1, 0, &#39;b&#39;)
</code></pre>
<h3 id="slice">slice</h3>
<p>returns a shallow copy of an array from a specified start position and before a specified end position. If no end position is specified, the rest of the array is returned. Importantly, this method does not modify the array in place but rather returns the desired subset.</p>
<pre><code class="language-javascript">let arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;];
const sliced = arr.slice(2, 4);

console.log(sliced);
// [&#39;c&#39;, &#39;d&#39;]
console.log(arr);
// [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;]
</code></pre>
<h3 id="sort">sort</h3>
<p>sorts an array based on the provided function which takes a first element and second element argument. Modifies the array in place. If the function returns negative or 0, the order remains unchanged. If positive, the element order is switched.</p>
<pre><code class="language-javascript">let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) =&gt; firstEl - secondEl;
arr.sort(sorter);

console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]
</code></pre>
<h2 id="generators">Generators</h2>
<blockquote>
<p>The generator function specifies what value is yielded next time next() is called. Can either have a finite number of yields, after which next() returns an undefined value, or an infinite number of values using a loop.</p>
</blockquote>
<pre><code class="language-javascript">function* greeter() {
  yield &#39;Hi&#39;;
  yield &#39;How are you?&#39;;
  yield &#39;Bye&#39;;
}

const greet = greeter();

console.log(greet.next().value);
// &#39;Hi&#39;
console.log(greet.next().value);
// &#39;How are you?&#39;
console.log(greet.next().value);
// &#39;Bye&#39;
console.log(greet.next().value);
// undefined
</code></pre>
<h2 id="callback-functions">Callback Functions</h2>
<pre><code class="language-javascript">function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}

myFunc(&#39;Hello world!&#39;, console.log);
// &#39;Hello world!&#39;
</code></pre>
<h2 id="promises">Promises</h2>
<pre><code class="language-javascript">const myPromise = new Promise(function(res, rej) {
  setTimeout(function(){
    if (Math.random() &lt; 0.9) {
      return res(&#39;Hooray!&#39;);
    }
    return rej(&#39;Oh no!&#39;);
  }, 1000);
});

myPromise
  .then(function(data) {
    console.log(&#39;Success: &#39; + data);
   })
   .catch(function(err) {
    console.log(&#39;Error: &#39; + err);
   });

// If Math.random() returns less than 0.9 the following is logged:
// &quot;Success: Hooray!&quot;
// If Math.random() returns 0.9 or greater the following is logged:
// &quot;Error: On no!&quot;
</code></pre>
<h2 id="async-await">Async Await</h2>
<pre><code class="language-javascript">const greeter = new Promise((res, rej) =&gt; {
  setTimeout(() =&gt; res(&#39;Hello world!&#39;), 2000);
})

async function myFunc() {
  const greeting = await greeter;
  console.log(greeting);
}

myFunc();
// &#39;Hello world!&#39;
</code></pre>


10 Javascript Essentials To Boost Your Skill

If in any case you concern about your nextjs application bundle size, perhaps you may want to switch from react to preact. Preact can boost your application in terms of performance and bundle size. It's not that hard to integrate, as a matter of fact, even nextjs has provided a library to integrate nextjs with preact.

All you have to do is add below library to your `package.json` 

* [next-plugin-preact](https://github.com/preactjs/next-plugin-preact)
* preact
* react@npm:@preact/compat
* react-dom@npm:@preact/compat
* react-ssr-prepass@npm:preact-ssr-prepass
* preact-render-to-string

and add these lines to your `next.config.json`

```javascript
// next.config.js
const withPreact = require('next-plugin-preact');

module.exports = withPreact({
    /* regular next.js config options here */
});
```

There is quite improvement when switching from react to preact. 

### Using React

![Next Build Using React](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/1c2028f8-9649-4fa6-a322-89ece65f7f2b.26)

### Using Preact

![Next Build Using Preact](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/8020f362-3e49-4adb-bdb7-3b0e158afba6.14)

<p>If in any case you concern about your nextjs application bundle size, perhaps you may want to switch from react to preact. Preact can boost your application in terms of performance and bundle size. It&#39;s not that hard to integrate, as a matter of fact, even nextjs has provided a library to integrate nextjs with preact.</p>
<p>All you have to do is add below library to your <code>package.json</code> </p>
<ul>
<li><a href="https://github.com/preactjs/next-plugin-preact">next-plugin-preact</a></li>
<li>preact</li>
<li>react@npm:@preact/compat</li>
<li>react-dom@npm:@preact/compat</li>
<li>react-ssr-prepass@npm:preact-ssr-prepass</li>
<li>preact-render-to-string</li>
</ul>
<p>and add these lines to your <code>next.config.json</code></p>
<pre><code class="language-javascript">// next.config.js
const withPreact = require(&#39;next-plugin-preact&#39;);

module.exports = withPreact({
    /* regular next.js config options here */
});
</code></pre>
<p>There is quite improvement when switching from react to preact. </p>
<h3 id="using-react">Using React</h3>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/1c2028f8-9649-4fa6-a322-89ece65f7f2b.26" alt="Next Build Using React"></p>
<h3 id="using-preact">Using Preact</h3>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/8020f362-3e49-4adb-bdb7-3b0e158afba6.14" alt="Next Build Using Preact"></p>


Switching from React to Preact On NextJS

When you want to fetch data or authenticate on Nextjs with either `getInitialProps` or `getServerSideProps` using cookies, the chance of failed to get current cookies will happen. Take a look on the following code :

```js
export const getServerSideProps = async (ctx) => {
  const response = await axios.get(`${app.apiUrl}/users/session`);

  return {
    response,
  };
};
```

The solution will be to add the cookies manually into the header request

```js
export const getServerSideProps = async (ctx) => {
  const headers = ctx.req ? { cookie: ctx.req.headers.cookie } : undefined;

  const response = await axios.get(`/api/users/session`, {
    headers: headers,
  });

  return {
    response,
  };
};
```



<p>When you want to fetch data or authenticate on Nextjs with either <code>getInitialProps</code> or <code>getServerSideProps</code> using cookies, the chance of failed to get current cookies will happen. Take a look on the following code :</p>
<pre><code class="language-js">export const getServerSideProps = async (ctx) =&gt; {
  const response = await axios.get(`${app.apiUrl}/users/session`);

  return {
    response,
  };
};
</code></pre>
<p>The solution will be to add the cookies manually into the header request</p>
<pre><code class="language-js">export const getServerSideProps = async (ctx) =&gt; {
  const headers = ctx.req ? { cookie: ctx.req.headers.cookie } : undefined;

  const response = await axios.get(`/api/users/session`, {
    headers: headers,
  });

  return {
    response,
  };
};
</code></pre>


Get Cookies Server-Side In Next.js

Match could be the best alternative of using Switch. It provides simpler syntax and stricter definition, heck even it provides throw error. It would be good to reduce unknown bug.

Here's an example of match code:

```php
$message = match ($statusCode) {
    200, 300 => null,
    400 => 'not found',
    500 => 'server error',
    default => 'unknown status code',
};
```

No need break statement and returns value and you can define multi condition. There are more features that you may find on this match such 

### No Type Coercion

Doing strict type checks instead a loose one ( === instead of ==)

```php
$statusCode = '200';

$message = match ($statusCode) {
    200 => null,
    default => 'unknown status code',
};

// $message = 'unknown status code'
```

### Unknown Value Cause Errors

If no value matches expression and no default, it will throw error `UnhandledMatchError `. 

```php
$statusCode = 400;

$message = match ($statusCode) {
    200 => 'perfect',
};

// UnhandledMatchError
```

### Single Line Expressions

You can only write single expression.

```php
// Wrong
$message = match ($statusCode) {
    200 => $this->statusOk(); $this->printExpression(),
};
```

### Combining Conditions

```php
$message = match ($statusCode) {
    200, 300, 301, 302 => 'combined expressions',
};
```

### Complex Conditions and Peformance

```php
$message = [
    $this->matchesRegex($line) => 'match A',
    $this->matchesOtherRegex($line) => 'match B',
][$line] ?? 'no match';
```

### Throwing Exceptions

```php
$message = match ($statusCode) {
    200 => null,
    500 => throw new ServerError(),
    default => 'unknown status code',
};
```

Match will only be possible to use on PHP 8.0. Be sure to check out your php version before using match.

<p>Match could be the best alternative of using Switch. It provides simpler syntax and stricter definition, heck even it provides throw error. It would be good to reduce unknown bug.</p>
<p>Here&#39;s an example of match code:</p>
<pre><code class="language-php">$message = match ($statusCode) {
    200, 300 =&gt; null,
    400 =&gt; &#39;not found&#39;,
    500 =&gt; &#39;server error&#39;,
    default =&gt; &#39;unknown status code&#39;,
};
</code></pre>
<p>No need break statement and returns value and you can define multi condition. There are more features that you may find on this match such </p>
<h3 id="no-type-coercion">No Type Coercion</h3>
<p>Doing strict type checks instead a loose one ( === instead of ==)</p>
<pre><code class="language-php">$statusCode = &#39;200&#39;;

$message = match ($statusCode) {
    200 =&gt; null,
    default =&gt; &#39;unknown status code&#39;,
};

// $message = &#39;unknown status code&#39;
</code></pre>
<h3 id="unknown-value-cause-errors">Unknown Value Cause Errors</h3>
<p>If no value matches expression and no default, it will throw error <code>UnhandledMatchError </code>. </p>
<pre><code class="language-php">$statusCode = 400;

$message = match ($statusCode) {
    200 =&gt; &#39;perfect&#39;,
};

// UnhandledMatchError
</code></pre>
<h3 id="single-line-expressions">Single Line Expressions</h3>
<p>You can only write single expression.</p>
<pre><code class="language-php">// Wrong
$message = match ($statusCode) {
    200 =&gt; $this-&gt;statusOk(); $this-&gt;printExpression(),
};
</code></pre>
<h3 id="combining-conditions">Combining Conditions</h3>
<pre><code class="language-php">$message = match ($statusCode) {
    200, 300, 301, 302 =&gt; &#39;combined expressions&#39;,
};
</code></pre>
<h3 id="complex-conditions-and-peformance">Complex Conditions and Peformance</h3>
<pre><code class="language-php">$message = [
    $this-&gt;matchesRegex($line) =&gt; &#39;match A&#39;,
    $this-&gt;matchesOtherRegex($line) =&gt; &#39;match B&#39;,
][$line] ?? &#39;no match&#39;;
</code></pre>
<h3 id="throwing-exceptions">Throwing Exceptions</h3>
<pre><code class="language-php">$message = match ($statusCode) {
    200 =&gt; null,
    500 =&gt; throw new ServerError(),
    default =&gt; &#39;unknown status code&#39;,
};
</code></pre>
<p>Match will only be possible to use on PHP 8.0. Be sure to check out your php version before using match.</p>


PHP8 : Match or Switch ?

It's one of the important factor that you provide an explanation about your package through readme file. But sometimes, it's hard to decide on what to write on the file. This file need to be as clear as possible and concise so that the user may find our package easy to understand. Lucky us, there is a website that so called [Readme.so](https://readme.so/).

[Readme.so](https://readme.so/) is a online simple editor that allow us to quickly add and customize all section that we need for our project's readme. It provides three section that display what needs to be added, write what you need and preview it.

Sections
--------

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/0189e7f9-9476-42b8-83be-2a071cfcb6f6.jpg)

This section provides you with so many pre-built template that usually exist on a project's readme. There are :

*   Acknowledgments
*   API Reference
*   Appendix
*   Authors
*   Badges
*   Contributing
*   Demo
*   Deployment
*   Documentation
*   Environment Variables
*   FAQ
*   Features
*   Feedback
*   Installation
*   Lessons
*   License
*   Logo
*   Optimizations
*   Related
*   Roadmap
*   Run Locally
*   Screenshots
*   Support
*   Tech
*   Running Tests
*   Title and Description
*   Usage/Examples
*   Used By

Editor
------

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/069b8e49-1831-4d55-ad82-15e958b632ff.jpg)

This section is the editor itself. After you choose a section, you will be provided an editor to write whatever content that this section will be.

Preview
-------

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/3f54b09b-443b-48e4-887e-73c588081a0c.jpg)

This section is the preview on what content you just wrote on the editor section.

<p>It&#39;s one of the important factor that you provide an explanation about your package through readme file. But sometimes, it&#39;s hard to decide on what to write on the file. This file need to be as clear as possible and concise so that the user may find our package easy to understand. Lucky us, there is a website that so called <a href="https://readme.so/">Readme.so</a>.</p>
<p><a href="https://readme.so/">Readme.so</a> is a online simple editor that allow us to quickly add and customize all section that we need for our project&#39;s readme. It provides three section that display what needs to be added, write what you need and preview it.</p>
<h2 id="sections">Sections</h2>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/0189e7f9-9476-42b8-83be-2a071cfcb6f6.jpg" alt="Alt Text"></p>
<p>This section provides you with so many pre-built template that usually exist on a project&#39;s readme. There are :</p>
<ul>
<li>  Acknowledgments</li>
<li>  API Reference</li>
<li>  Appendix</li>
<li>  Authors</li>
<li>  Badges</li>
<li>  Contributing</li>
<li>  Demo</li>
<li>  Deployment</li>
<li>  Documentation</li>
<li>  Environment Variables</li>
<li>  FAQ</li>
<li>  Features</li>
<li>  Feedback</li>
<li>  Installation</li>
<li>  Lessons</li>
<li>  License</li>
<li>  Logo</li>
<li>  Optimizations</li>
<li>  Related</li>
<li>  Roadmap</li>
<li>  Run Locally</li>
<li>  Screenshots</li>
<li>  Support</li>
<li>  Tech</li>
<li>  Running Tests</li>
<li>  Title and Description</li>
<li>  Usage/Examples</li>
<li>  Used By</li>
</ul>
<h2 id="editor">Editor</h2>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/069b8e49-1831-4d55-ad82-15e958b632ff.jpg" alt="Alt Text"></p>
<p>This section is the editor itself. After you choose a section, you will be provided an editor to write whatever content that this section will be.</p>
<h2 id="preview">Preview</h2>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/3f54b09b-443b-48e4-887e-73c588081a0c.jpg" alt="Alt Text"></p>
<p>This section is the preview on what content you just wrote on the editor section.</p>


Readme.so an Easy way to create readme

Now, you've already mastered tailwind. But, you don't like the choice of default color given from tailwind. You need something custom yet still using tailwind as its core, **Tailwind Shades** may be the solution here.

You may access the website by going to [Here](https://www.tailwindshades.com/). First you have to select the very base color that you want to customize, i choose `#0984e3` which is electron blue.

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/cr29prlg9ms6ql0xutq2.jpg)

Then you will get several code colors. At the right below corner, you just need to enter the custom color of yours.

![Alt Text](https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/w0booga1ssukrz6gcyff.jpg)

Then the last step will be to update `tailwind.config.js`, just put the code above

```js
module.exports = {
    theme: {
        colors: {
            "blue-awesome": {
                DEFAULT: "#0984E3",
                50: "#D4EBFD",
                100: "#BCE0FC",
                200: "#8BCAFA",
                300: "#5AB3F8",
                400: "#299DF6",
                500: "#0984E3",
                600: "#0767B2",
                700: "#054B81",
                800: "#032E50",
                900: "#01121F",
            },
        },
    },
};
```

and you're good to go !

You may use the color for text like : `text-blue-awesome-100` or for background : `bg-blue-awesome-100`

<p>Now, you&#39;ve already mastered tailwind. But, you don&#39;t like the choice of default color given from tailwind. You need something custom yet still using tailwind as its core, <strong>Tailwind Shades</strong> may be the solution here.</p>
<p>You may access the website by going to <a href="https://www.tailwindshades.com/">Here</a>. First you have to select the very base color that you want to customize, i choose <code>#0984e3</code> which is electron blue.</p>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/cr29prlg9ms6ql0xutq2.jpg" alt="Alt Text"></p>
<p>Then you will get several code colors. At the right below corner, you just need to enter the custom color of yours.</p>
<p><img src="https://telinga-digital.s3-ap-southeast-1.amazonaws.com/web/clip/w0booga1ssukrz6gcyff.jpg" alt="Alt Text"></p>
<p>Then the last step will be to update <code>tailwind.config.js</code>, just put the code above</p>
<pre><code class="language-js">module.exports = {
    theme: {
        colors: {
            &quot;blue-awesome&quot;: {
                DEFAULT: &quot;#0984E3&quot;,
                50: &quot;#D4EBFD&quot;,
                100: &quot;#BCE0FC&quot;,
                200: &quot;#8BCAFA&quot;,
                300: &quot;#5AB3F8&quot;,
                400: &quot;#299DF6&quot;,
                500: &quot;#0984E3&quot;,
                600: &quot;#0767B2&quot;,
                700: &quot;#054B81&quot;,
                800: &quot;#032E50&quot;,
                900: &quot;#01121F&quot;,
            },
        },
    },
};
</code></pre>
<p>and you&#39;re good to go !</p>
<p>You may use the color for text like : <code>text-blue-awesome-100</code> or for background : <code>bg-blue-awesome-100</code></p>


Tailwind Shades -Tailwind Color Generator

Let's say we want to create an endpoint regarding user, then we will have seperate REST API for :

### Resource

```bash
GET /users - retrieve all users
POST /users - create a new user
GET /users/:userId - retrieve a specific user
PUT /users/:userId - update a specific user
DELETE /users/:userId - delete a specific user
```

### Filtering

```bash
GET /users?param1=value1&param2=value2...
```

### Sorting

```bash
GET /users?sort=value
```

### Searching

```bash
GET /users?q=value
```

### Pagination

```bash
GET /users?page=1&limit=100
```

### Miscellaneous

```bash
GET /user/:subject/:value
```

<p>Let&#39;s say we want to create an endpoint regarding user, then we will have seperate REST API for :</p>
<h3 id="resource">Resource</h3>
<pre><code class="language-bash">GET /users - retrieve all users
POST /users - create a new user
GET /users/:userId - retrieve a specific user
PUT /users/:userId - update a specific user
DELETE /users/:userId - delete a specific user
</code></pre>
<h3 id="filtering">Filtering</h3>
<pre><code class="language-bash">GET /users?param1=value1&amp;param2=value2...
</code></pre>
<h3 id="sorting">Sorting</h3>
<pre><code class="language-bash">GET /users?sort=value
</code></pre>
<h3 id="searching">Searching</h3>
<pre><code class="language-bash">GET /users?q=value
</code></pre>
<h3 id="pagination">Pagination</h3>
<pre><code class="language-bash">GET /users?page=1&amp;limit=100
</code></pre>
<h3 id="miscellaneous">Miscellaneous</h3>
<pre><code class="language-bash">GET /user/:subject/:value
</code></pre>


REST API Naming Conventions

TLDR

*   Seperate business logic and API routes
*   Use a service layer
*   Use a config folder to organize configuration files
*   Establish a scripts folder for long npm scripts
*   Use dependency injection
*   Conduct unit testing
*   Use linter
*   Use style guid
*   Comment your code
*   Small file size
*   Using compression
*   Use promises
*   Handle promises error

<p>TLDR</p>
<ul>
<li>  Seperate business logic and API routes</li>
<li>  Use a service layer</li>
<li>  Use a config folder to organize configuration files</li>
<li>  Establish a scripts folder for long npm scripts</li>
<li>  Use dependency injection</li>
<li>  Conduct unit testing</li>
<li>  Use linter</li>
<li>  Use style guid</li>
<li>  Comment your code</li>
<li>  Small file size</li>
<li>  Using compression</li>
<li>  Use promises</li>
<li>  Handle promises error</li>
</ul>


Node.js Best Project Structure

### Possible Error 1

Somehow the docker cli daemon is not starting. So, no matter how many times you try to turn on the service it wont work.

### Solution

```shell
cd "C:\Program Files\Docker\Docker" 
./DockerCli.exe -SwitchDaemon
```

<h3 id="possible-error-1">Possible Error 1</h3>
<p>Somehow the docker cli daemon is not starting. So, no matter how many times you try to turn on the service it wont work.</p>
<h3 id="solution">Solution</h3>
<pre><code class="language-shell">cd &quot;C:\Program Files\Docker\Docker&quot; 
./DockerCli.exe -SwitchDaemon
</code></pre>


Can't Start Docker Desktop on Windows 10

When you try to run valet on Mac and got this error

### Error

```bash
Warning: file_get_contents(/var/root/.valet/config.json): 
failed to open stream: Permission denied in 
/Users/Username/.composer/vendor/laravel/valet/server.php on line 23
    
Warning: Invalid argument supplied for foreach() in 
/Users/Username/.composer/vendor/laravel/valet/server.php on line 47
404 - Not Found
```

the solution is as simple as

### Solution

```bash
cd ~/.composer/
sudo chown -R $(whoami) vendor
```

<p>When you try to run valet on Mac and got this error</p>
<h3 id="error">Error</h3>
<pre><code class="language-bash">Warning: file_get_contents(/var/root/.valet/config.json): 
failed to open stream: Permission denied in 
/Users/Username/.composer/vendor/laravel/valet/server.php on line 23
    
Warning: Invalid argument supplied for foreach() in 
/Users/Username/.composer/vendor/laravel/valet/server.php on line 47
404 - Not Found
</code></pre>
<p>the solution is as simple as</p>
<h3 id="solution">Solution</h3>
<pre><code class="language-bash">cd ~/.composer/
sudo chown -R $(whoami) vendor
</code></pre>


Valet - Not Found Error

Go is an open source programming language that makes it easy to build simple, reliable, and efficient software. It was created for the sake of simplicity, code effieciency and advanced performance.

When you decide to use golang, there are several advantages that you may get on using golang such as

*   Speed
*   Concurrent
*   Lot of Support
*   Simple
*   Extensions on IDE

Go offers lot of packages, framework choices, cloud integration.

<p>Go is an open source programming language that makes it easy to build simple, reliable, and efficient software. It was created for the sake of simplicity, code effieciency and advanced performance.</p>
<p>When you decide to use golang, there are several advantages that you may get on using golang such as</p>
<ul>
<li>  Speed</li>
<li>  Concurrent</li>
<li>  Lot of Support</li>
<li>  Simple</li>
<li>  Extensions on IDE</li>
</ul>
<p>Go offers lot of packages, framework choices, cloud integration.</p>


Golang

## Error

```bash
(/Library/Developer/CommandLineTools), missing xcrun at: 
/Library/Developer/CommandLineTools/usr/bin/xcrun
```

## Solution

```bash
xcode-select --install
```

<h2 id="error">Error</h2>
<pre><code class="language-bash">(/Library/Developer/CommandLineTools), missing xcrun at: 
/Library/Developer/CommandLineTools/usr/bin/xcrun
</code></pre>
<h2 id="solution">Solution</h2>
<pre><code class="language-bash">xcode-select --install
</code></pre>


Posts