
A lot of people find `this` keyword in Javascript very confusing. Depending on where is it used and defined it can have different value.

## This In Functions

In normal Javascript functions `this` refers to global object. It will be `window` object in browser and `global` object in node. 

```jsx
function simpleFunction () {
  console.log(this === window); 
  //prints true to console
}
```

If `strict mode` will be enabled - `this` inside normal function will be `undefined`.

```js
function withStrict () {
  'use strict';
  console.log(this);
  // prints undefined to console
}
```

## This In Constructor Functions

When a function is invoked with `new` keyword then the function is known as constructor function and returns a new instance. In such cases, the value of “this” refers to newly created instance.

```js
function Person() {
    this.name = "Maksim"

    this.logName = function(){
        console.log(this.name)
    }
}

const person = new Person();
person.logName() // Will output `Maksim`
```

## This In Methods

In Javascript object fields can be simple values like `string` or `number` but it can also be a `function`.
 
In this case this `function` will be a `method` of an object. And when object `method` is invoked - `this` will refer to that paren object.

```js
const user = {
    name: 'Maksim',
    logName: function(){
        console.log(this.name)
        // will log `Maksim`
    }
}
```

But `method` can loose reference to it's parent object. In this example if we assign `logName` to an external variable and then call it - `this` inside of it will be global object (or `undefined` in **strict** mode).

```js
const user = {
    name: 'Maksim',
    logName: function(){
        'use strict'
        console.log(this)
        console.log(this.name)
    }
}

const brokenLogName = user.logName
brokenLogName() // Will give `TypeError: this is undefined`
```

## This In Browser Event Handlers

In event handlers callbacks, this refers to the HTML element that received the event:

```js
document.querySelector('#button').addEventListener('click', function(e) {
  console.log(this) //HTMLElement
}
```

Javascript `this`


There are many ways to have conditional expressions in your JSX code. Let's look at them.

## If Statement

The easiest way to have condition in your render code is to use `if` statement in `render()` method of your component.

```jsx
function ToDoList({ items }) {
  if (!items.length) {
    return <p>You don't have any TODO items.</p>;
  }

  return <div>{items.map(item => <ToDoItem item={item} />)}</div>;
}
```

You can also use this method to prevent component from rendering, by returning `null` early in render code.

```jsx
function ErrorMessage({ error }) {
  if (!error) {
    return null;
  }

  return <div class="error">{error.message}</div>;
}
```

In this example if the prop `error` will be false component won't render.

It is the most simple way, often used for early return from your component rendering code.

## Ternary Operator

More compact option is to use [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).

```js
condition ? expr1 : expr2;
```

Here is an example.

```jsx
function Greeting({ user }) {
  return <div>{user ? <p>Hello {user.name}!</p> : <p>Please log in.</p>}</div>;
}
```

Ternary operators can be nested. Let's have a look at this modified example for `ToDoList`. Now it is also accepting the `isLoading` prop.

```jsx
function ToDoList({ items, isLoading}) {
    return isLoading ? <p>Loading...</p> : (
        items.length ? <div>{items.map(item => <ToDoItem key={item.id} item={item} />}</div> : <p>ToDo list is empty</p>  )
    )
}
```

In general I would recommend to avoid that as it makes code less readable.

Overall ternary operator is a great way to have conditions in your **JSX**. I recommend using them over `if/else` statements.

## Logical AND

Often times you don't need the `else` part of your ternary operator. Instead of returning `null` there you can use `&&`. It works like this:

```jsx
<div>{isLoading && <p>Loading...</p>}</div>
```

If `isLoading` is `false`, this code will result in just empty `<div/>`.

## Switch Case

You can use `switch` statements inside your component `render()` method. It can be useful when you have multiple options to render.

```jsx
function Notification({ message, type }) {
  switch (type) {
    case "info":
      return <Info text={message} />;
    case "warning":
      return <Warning text={message} />;
    case "error":
      return <Error text={message} />;
    default:
      return null;
  }
}
```

It's important to always have the `default` in your `switch` statements.

## ENUMs

If Javascript you can use an object consisting of key-value parts as an ENUM.

For example here is a size ENUM:

```jsx
const sizes = {
  small: 1,
  medium: 2,
  large: 3
};
```

This opens great possibilities for conditional rendering in React, because you can use **components** as values in your ENUM and then access them by their keys.

```jsx
function Notification({ message, type }) {
  return (
    <div>
      {
        {
          INFO: <Info text={message} />,
          MESSAGE: <Warning text={message} />,
          ERROR: <Error text={message} />
        }[type]
      }
    </div>
  );
}
```

This way you can use ENUMs instead of `switch-case` statements.


Conditional Rendering In JSX


[Watch the video on YouTube](https://www.youtube.com/watch?v=3R9Yekajvl8)

In Javascript Promises are special sort of objects that serve as a proxy for data that is initially unknown.

The concept is not unique for Javascript, similar constructs exist in other languages as well.

They exist in Java, Python, Lisp, C++ and other languages and depending on language are known there by different names, like **futures**, **deferreds**, **delays** and other.

> The term **Promise** was proposed in 1976 by Daniel P. Friedman and David Wise in paper called "The Impact of Applicative Programming on Multiprocessing."

Promises are used to process results of asynchronous operations.

## Convert Callback to Promise

Let's say we have some code that uses callback to perform an operation asynchronously:

```js
setTimeout(() => {
  console.log("Async operation.");
}, 1000);
```

We can remake it to use **Promise**.

```js
const promiseSetTimeout = ms => new Promise(resolve => setTimeout(resolve, ms));

promiseSetTimeout(1000).then(() => console.log("Async operation"));
```

Here we used method `then` of the **Promise** instance to perform operation after the **Promise** was resolved.

Coolest part here is that since **ES6** you can use `async/await` syntax to handle promises.

```js
const promiseSetTimeout = ms => new Promise(resolve => setTimeout(resolve, ms));

await promiseSetTimeout(1000)
console.log("Async operation");
// Will be executed after 1000 ms delay
```

## Promise Object

Essentially **Promises** can be in three different states:

* Pending - initial state of any **Promise**
* Resolved - when operation was performed successfully
* Rejected - when operation failed

**Promises** can't change state arbitary. After some **Promise** was resolved or rejected it can't become **Pending** again.

When instantiated **Promise** accepts an `executor` function.

> Executor function is executed immediately after **Promise** is instantiated.

```js
const promise = new Promise(executor);
```

This function accepts two callbacks `resolve` and `reject`.

```js
const promise = new Promise((resolve, reject) => {
  // Some asynchronous code
});
```

If the asynchronous operation was performed successfully you should call `resolve`.

```js
const promise = new Promise((resolve, reject) => {
  resolve("Async success!");
});
```

After calling `resolve` inside `executor` **Promise** will change state to **resolved**.

**Promise** provides method `then` to get result of successful execution.

```js
promise.then(result => console.log(result));
```

You can also call `reject` inside `executor`.

```js
const promise = new Promise((resolve, reject) => {
  reject("Async failed!");
});
```

In this case **Promise** will become **rejected**.

**Promise** provides method `catch` to handle rejection.

```js
promise.catch(result => console.log(result));
```

**Promise** instance also provides method `finally` that will be called regardless whether it was fulfilled or rejected.

```js
promise.finally(result => console.log(result));
```

## Chaining Promises

As methods `then` and `catch` return promises - they can be chained.

```js
new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then(result => {
    console.log(result); // 1
    return result + 1;
  })
  .then(result => {
    console.log(result); // 2
    return result + 1;
  })
  .then(result => {
    console.log(result); // 3
    return result + 1;
  });
```

In this example every call to `then` returns a new **Promise**. So next call to `then` is performed on this returned **Promise**. So each callback is executed sequentially, after previous **Promise** is resolved.

We can also add multiple `then` callbacks to single promise. In this case they won't be chained.

```js
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

promise.then(result => {
  console.log(result); // 1
  return result + 1;
});

promise.then(result => {
  console.log(result); // 1
  return result + 1;
});

promise.then(result => {
  console.log(result); // 1
  return result + 1;
});
```

In this example all calls to `then` are performed on original **Promise** so they are performed independently.

## Promise Static Methods

**Promise** also provides static methods.

### Promise.resolve

Returns resolved promise with given value:

```js
const resolvedPromise = Promise.resolve("Success");
```

This method is used when you need to wrap an already known value into a promise.

### Promise.reject

Returns rejected promise with an error:

```js
const rejectedPromise = Promise.reject("Failure");
```

### Promise.all

Accepts an iterable container of promises (usually an array) and returns a new promise that resolves when all promises in container resolve.

The resolved promise will contain an array of results of passed promises.

```js
const allPromises = Promise.all([promise1, promise2, promise3]);
```

The resolved values will keep the order in which their promises were passed to `Promise.all`:

```js
Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3
]).then(console.log); // [1,2,3]
```

Here even though first promise has the longest delay and will be resolved last, its result will still be the first in the array of values.

### Promise.race

Takes an iterable container of promises (usually an array) and returns a new promise that resolves when the first promise in this container resolves.

`Promise.race` will resolve with first resolved promise value.

```js
Promise.race([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3
]).then(console.log); // 3
```



Promises In Javascript


You know that `git add` adds files to index. But did do you know that it can add **specific&nbsp;lines** of files? Or even add files, ignoring their contents? Let's check this out!

First let's get familiar with `git add --patch` command or it's shorthand `git add -p`. What does it do?

Let's imagine that you've been working on some task. During the process you've got carried away and introduced some changes not related to your current task.

Now it's time to commit the changes, but some of them are irrelevant. It would be wrong to put everything in that commit.

This is where `git add --patch` comes into play.

## See The Example

Imagine we had a file _poem.txt_ with two unfinished couplets:

```bash
Roses are red
Violets are blue

Roses are red
Violets are blue
```

After a full day of dedicated hard work we've completed both:

```diff
➜  git_add_patch (master) ✗ git diff

diff --git a/poem.txt b/poem.txt
index 39f13e6..f4b70ab 100644
--- a/poem.txt
+++ b/poem.txt
@@ -1,5 +1,9 @@
 Roses are red
 Violets are blue
+Sugar is sweet
+And so are you

 Roses are red
 Violets are blue
+Onions stink
+And so do you.
```

But now we are a bit concerned about the second couplet and want to commit only the first part.

```diff
➜  git_add_patch (master) ✗ git add -p

diff --git a/poem.txt b/poem.txt
index 39f13e6..f4b70ab 100644
--- a/poem.txt
+++ b/poem.txt
@@ -1,5 +1,9 @@
 Roses are red
 Violets are blue
+Sugar is sweet
+And so are you

 Roses are red
 Violets are blue
+Onions stink.
+And so do you.
Stage this hunk [y,n,q,a,d,/,s,e,?]?
```

See the last line, **Stage this hunk [y,n,q,a,d,/,s,e,?]**? Here it gives you some options where the most important are:

* **y** - stage this hunk
* **n** - do not stage this hunk
* **q** - quit; do not stage this hunk or any of the remaining ones
* **a** - stage this hunk and all later hunks in the file
* **d** - do not stage this hunk or any of the later hunks in the file
* **s** - split the current hunk into smaller hunks
* **e** - manually edit the current hunk

There are some more options, you can see them by choosing the **?** option.

Here we want only the first part about the sugar and sweetness, so we choose the option&nbsp;**s**.

```diff
Stage this hunk [y,n,q,a,d,/,s,e,?]? s
Split into 2 hunks.
@@ -1,5 +1,7 @@
 Roses are red
 Violets are blue
+Sugar is sweet
+And so are you

 Roses are red
 Violets are blue
Stage this hunk [y,n,q,a,d,/,j,J,g,e,?]? y
```

We chose to stage that hunk, and now it asks if we want to stage the second one:

```diff
Stage this hunk [y,n,q,a,d,/,j,J,g,e,?]? y
@@ -3,3 +5,5 @@

 Roses are red
 Violets are blue
+Onions stink
+And so do you.
Stage this hunk [y,n,q,a,d,/,K,g,e,?]? n
```

And we don't want to stage this one, so we choose **n**.

Great, let's see what we have now.

```bash
➜  git_add_patch (master) ✗ git status
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	modified:   poem.txt

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   poem.txt
```

Cool beans, time to commit this thing.

```bash
➜  git_add_patch (master) ✗ git commit -m "Complete the first couplet"
```

Git splits hunks by the empty lines, but what if you really need to stage only **specific&nbsp;lines**.

## Behold The Power Of E

Imagine you have a `diff` like this:

```diff
➜  git_add_patch (master) ✗ git diff

diff --git a/poem.txt b/poem.txt
index 9737e9f..a2baecd 100644
--- a/poem.txt
+++ b/poem.txt
@@ -5,3 +5,6 @@ And so are you

 Roses are red
 Violets are blue
+Flowers smell good
+Onions stink
+And so do you.
```

And you are really concerned about that onion part, but you don't want to remove it. So you want to stage only the _"Flowers smell good"_ and _"And so do you"_ lines.

Now the **s** option won't help us, because those lines aren't separated by empty lines, and git considers them as one hunk.

**e** option to the rescue.

```bash
➜  git_add_patch (master) ✗ git add -p
diff --git a/poem.txt b/poem.txt
index 9737e9f..a2baecd 100644
--- a/poem.txt
+++ b/poem.txt
@@ -5,3 +5,6 @@ And so are you

 Roses are red
 Violets are blue
+Flowers smell good.
+Onions stink.
+And so do you.
Stage this hunk [y,n,q,a,d,/,e,?]? e
```

It will open the default text editor and you'll be able to manually edit that hunk.

![editor](/edit_hunk.png)

Just remove the part about onions and here you go:

```diff
➜  git_add_patch (master) ✗ git add --staged

diff --git a/poem.txt b/poem.txt
index 9737e9f..a2baecd 100644
--- a/poem.txt
+++ b/poem.txt
@@ -5,3 +5,6 @@ And so are you

 Roses are red
 Violets are blue
+Flowers smell good
+And so do you.
```

Nice, now you can decide what to do about those stinky onions later.

But what if you need to add some specific lines from the new file?

## Use The Intent To Add

Use `git add --intent-to-add` or `git add -N` to add specific file, but not its contents.

Imagine that we had our poem written from scratch.

Now `git diff` shows nothing, and if we'll use `git add -p` it will say `No changes.`

No problem, let's tell git that the file exists.

```bash
➜  git_add_patch (master) ✗ git add -N poem.txt
```

Now we can use `git add -p` and then edit the hunk to remove the lines about onions.

[Watch the video on YouTube](https://www.youtube.com/watch?v=b0t8XL6ZoeQ)




Add Specific Lines With Git Patch


Absolutely CRAZY combo!

In this tutorial we'll learn how to build a **CLI** Snake game using **React** and Javascript.

One of the most powerful features of React is that it supports different renderers. That means you aren't limited with browser and DOM.

Most famous example is ReactNative, but there are other technologies as well. React is actively being used in game dev to build UI (Battlefield V UI, Minecraft launcher, e.t.c)

My mind was blown away though when I saw [Ink](https://github.com/vadimdemedes/ink) - react renderer that outputs to console!

## Create New Ink App

Let's begin by bootstrapping our console application.

- Create a new directory for your project. Open that directory and run `create-ink-app`:

  ```sh
  mkdir snake-game
  cd snake-game
  npx create-ink-app
  ```

- (Optional) I prefer using spaces for indentation - so I open `.editorconfig` and switch `indent_style` to `space`

## Display The Game Field

Ink provides a bunch of components to display. We'll use `Text` and `Box`. `Box` is somewhat similar to `div` in HTML.

- Define the field size:

  ```js
  const FIELD_SIZE = 16
  const FIELD_ROW = [...new Array(FIELD_SIZE).keys()]
  ```

  Then we create an array that we'll use to generate cells of our game field.

- Change the return value of the `App` component to this:

  ```jsx
  <Box flexDirection="column" alignItems="center">
    <Text>
      <Color green>Snake</Color> game
    </Text>
    <Box flexDirection="column">
      {FIELD_ROW.map(y => (
        <Box key={y}>
          {FIELD_ROW.map(x => (
            <Box key={x}> . </Box>
          ))}
        </Box>
      ))}
    </Box>
  </Box>
  ```

  By default `Box` components have `display: flex`. And you can also specify other `flex` attributes as their props.

* You can run the game to see what it renders:

  ```sh
  snake-game
  ```

  You should see this:

  ![snake game field](./snake-game-0.png)

## Add Food And Snake

Time to add items to our game.

- Define `foodItem` to hold current position of food. Add this to global scope:

  ```js
  let foodItem = {
    x: Math.floor(Math.random() * FIELD_SIZE),
    y: Math.floor(Math.random() * FIELD_SIZE),
  }
  ```

- Define `snakeSegments` as a `useState` hook inside our `App` component to hold our snake position. It will be an array of snakes body segments.

  ```js
  const [snakeSegments, setSnakeSegments] = useState([
    { x: 8, y: 8 },
    { x: 8, y: 7 },
    { x: 8, y: 6 },
  ])
  ```

- Define `getItem` function with following content:

  ```jsx
  const getItem = (x, y, snakeSegments) => {
    if (foodItem.x === x && foodItem.y === y) {
      return <Color red></Color>
    }

    for (const segment of snakeSegments) {
      if (segment.x === x && segment.y === y) {
        return <Color green>■</Color>
      }
    }
  }
  ```

* Now update the return value of our `App` to use `getItem` instead of rendering dots.

  ```jsx
  <Box flexDirection="column" alignItems="center">
    <Text>
      <Color green>Snake</Color> game
    </Text>
    {intersectsWithItself ? (
      <EndScreen size={FIELD_SIZE} />
    ) : (
      <Box flexDirection="column">
        {FIELD_ROW.map(y => (
          <Box key={y}>
            {FIELD_ROW.map(x => (
              <Box key={x}> {getItem(x, y, snakeSegments) || "."} </Box>
            ))}
          </Box>
        ))}
      </Box>
    )}
  </Box>
  ```

  Now if there is food or snake segment in specific point - we render it instead of the dot.

* After you run the game this time - you should see this:

  ![snake game](./snake-game-1.png)

## Make Snake Move

Now we'll need to add a game timer that will update the status of our game every 50ms so we can move our snake.

Using timers in React is not that straightforward and there is an article [by Dan Abramov about that](https://overreacted.io/making-setinterval-declarative-with-react-hooks/). We'll use `useInterval` hook iplementation from it.

- Create file `useInterval.js` with following content:

  ```js
  "use strict"
  const { useEffect, useRef } = require("react")

  module.exports = function useInterval(callback, delay) {
    const savedCallback = useRef()

    useEffect(() => {
      savedCallback.current = callback
    }, [callback])

    // Set up the interval.
    useEffect(() => {
      function tick() {
        savedCallback.current()
      }
      if (delay !== null) {
        let id = setInterval(tick, delay)
        return () => clearInterval(id)
      }
    }, [delay])
  }
  ```

* Create `DIRECION` constant to hold directions our snake can go:

  ```
  const DIRECTION = {
    RIGHT: { x: 1, y: 0 },
    LEFT: { x: -1, y: 0 },
    TOP: { x: 0, y: -1 },
    BOTTOM: { x: 0, y: 1 }
  };
  ```

* Create new variable `direction` using `useState` hook inside of our `App` component:

  ```jsx
  const [direction, setDirection] = useState(DIRECTION.LEFT)
  ```

* Create new function, called `newSnakePosition`

  ```js
  function newSnakePosition(segments, direction) {
    const [head] = segments
    return segments.map(segment => ({
      x: limitByField(segment.x + direction.x),
      y: limitByField(segment.y + direction.y),
    }))
  }
  ```

* `newSnakePosition` uses `limitByField` function to handle off-board positions of our snake. Implement this function:

  ```js
  const limitByField = x => {
    if (x >= FIELD_SIZE) {
      return 0
    }
    if (x < 0) {
      return FIELD_SIZE - 1
    }
    return x
  }
  ```

* Now we can use `setInterval` to call `setSnakeSegments` using `newSnakePosition` in our `App` component:

  ```jsx
  useInterval(() => {
    setSnakeSegments(segments => newSnakePosition(segments, direction))
  }, 50)
  ```

* At this point your game should look like this:

  ![snake gif](./snake-game-2.gif)

## Make Snake Move Properly

Now the snake is moving sideways. We need to update the `newSnakePosition` function to fix it.

- Update the contents of `newSnakePosition` function to match the following:

  ```js
  function newSnakePosition(segments, direction) {
    const [head] = segments
    const newHead = {
      x: limitByField(head.x + direction.x),
      y: limitByField(head.y + direction.y),
    }
    return [newHead, ...segments.slice(0, -1)]
  }
  ```

## Implement Eating And Growing

It's time to implement eating and growing. To do this we'll need to detect collision of snakes head with food.

- Implement `collidesWithFood` function:

  ```js
  function collidesWithFood(head, foodItem) {
    return foodItem.x === head.x && foodItem.y === head.y
  }
  ```

  Here we check if `foodItem` and `head` of the snake have same position.

- Now use it inside of the `newSnakePosition` function:

  ```js
  function newSnakePosition(segments, direction) {
    const [head] = segments
    const newHead = {
      x: limitByField(head.x + direction.x),
      y: limitByField(head.y + direction.y),
    }
    if (collidesWithFood(newHead, foodItem)) {
      foodItem = {
        x: Math.floor(Math.random() * FIELD_SIZE),
        y: Math.floor(Math.random() * FIELD_SIZE),
      }
      return [newHead, ...segments]
    } else {
      return [newHead, ...segments.slice(0, -1)]
    }
  }
  ```

  Here we always return `newHead` position and then if we have collided with food - we teleport food to a new position.

## Add End Of Game

At this point the game should be playable. But it's impossible to loose. Let's fix this.

- Add this code before you use `useInterval` inside `App` component:

  ```js
  const [head, ...tail] = snakeSegments
  const intersectsWithItself = tail.some(
    segment => segment.x === head.x && segment.y === head.y
  )
  ```

- We need to stop the game when snake bites itself. Add this ternary operator inside of `useInterval` call.

  ```jsx
  useInterval(
    () => {
      setSnakeSegments(segments => newSnakePosition(segments, direction))
    },
    intersectsWithItself ? null : 50
  )
  ```

  It will disable interval by setting timeout to `null` when snake intersects with itself.

- Now add the end screen. Create new file `EndScreen.js` with following contents:

  ```jsx
  "use strict"

  const React = require("react")
  const { Color, Box } = require("ink")

  module.exports = ({ size }) => (
    <Box
      flexDirection="column"
      height={size}
      width={size}
      alignItems="center"
      justifyContent="center"
    >
      <Color red>You died</Color>
    </Box>
  )
  ```

- Use `importJsx` to import `EndScreen` in `ui.js`:

  ```js
  const EndScreen = importJsx("./EndScreen")
  ```

- Update return value of the `App` component to match this:

  ```jsx
  <Box flexDirection="column" alignItems="center">
    <Text>
      <Color green>Snake</Color> game
    </Text>
    {intersectsWithItself ? (
      <EndScreen size={FIELD_SIZE} />
    ) : (
      <Box flexDirection="column">
        {FIELD_ROW.map(y => (
          <Box key={y}>
            {FIELD_ROW.map(x => (
              <Box key={x}> {getItem(x, y, snakeSegments) || "."} </Box>
            ))}
          </Box>
        ))}
      </Box>
    )}
  </Box>
  ```

  Here you go - CLI React-based Snake game!

  ![snake final](./snake-final.png)

## Conclusion

Even though Ink is not intended to make games - as you can see even this is totally possible.

I like how easy it is now to create cli apps of any level of complexity, yay!

Here is a [repo with all the code](https://github.com/satansdeer/snake-game). Ping me in [telegram](https://t.me/satansdeer) if you have any questions.


Command Line Applications Using React - Snake Game Tutorial


In this tutorial, we'll learn how to create a VSCode extension that will communicate with Node Inspector to collect execution data - basically a Quokka.js clone.

For those who don't know what Quokka.js is - it's a live scratchpad for Javascript/Typescript that allows you to see the results of code execution right in your editor.

![vscode animation](vsc1.gif)

The extension that we'll build will be called Wombat.js because wombats are cool and they poop cubes.

![wombat picture](./wombat.jpg)

I'll be using Typescript because I like to have type annotations and smart code completion when I work with unfamiliar modules/libs.

## Bootstrap New VSCode Extention

We'll start by creating our VSCode extension first.

VSCode provides a Yeoman generator to bootstrap new extensions.

* Make sure you have Yeoman installed globally.

    ```sh
    npm i -g yeoman
    ```
* Run vscode extention generator:

    ```
    yo code .
    ```

    It will ask you a bunch of questions about your project. Answer them and it will create the file structure.

    Here I will assume that you'll also choose Typescript as the preferred language.

* Open the project in VSCode:

    ```
    code <project name>
    ```

    Here you need to put your actual project name instead of `<project name>`.

    > Here I assume that you have a console command installed that allows you to launch VSCode from your terminal.
    > If not - do this: 
    >
    > * Launch VSCode regular way.
    > * Open the Command Palette (`⇧⌘P` on Mac) and type `shell command` to find the _Shell Command: Install 'code' command in PATH command._

* Change command title in `package.json`. It is located in `contributes.commands` block.

    ```json
    "contributes": {
      "commands": [
        {
          "command": "extension.<your extension name>",
          "title": "Run wombat"
        }
      ]
    },
    ```

## Get Data From Node Inspector

Since version 6.3 node provides a built-in inspector which API we are gonna use to get runtime information about our code.


* Open the file `src/extention.ts` and add the following imports:

    ```ts
    import * as path from "path";
    import * as util from "util";
    import * as inspector from "inspector";
    ```

* Make the activation function asynchronous we'll need this to use promises and `async/await` instead of callback API that `inspector` provides by default.

    ```ts
    export async function activate(context: vscode.ExtensionContext) { // ...
    ```

* Launch inspector:

    ```ts
    export async function activate(context: vscode.ExtensionContext) { 
        inspector.open();
    
        // ...
    ```

    This is an equivalent of running `node --inspector somefile.js`.

    Read more [here](https://nodejs.org/api/inspector.html)

* Start new client session. Add these lines after you activate the `inspector`.

    ```ts
    const session = new inspector.Session();
    session.connect();
    ```

* Wrap `session.post` into `promisify`.

    ```ts
    const post = <any>util.promisify(session.post).bind(session);
    ```

    Unfortunately, we'll have to use type `any` here. Usually, I avoid using `any` as much as I can, but here it will use the wrong type because of how `session.post` function is typed.

    This is because `session.post` is overloaded and has different arity for different actions it calls and the fact that by default typescript will pick the last function definition it finds.

    In the case with `post` - it would be:
    ```ts
        post(method: "HeapProfiler.stopSampling", callback?: (err: Error | null, params: HeapProfiler.StopSamplingReturnType) => void): void;
    ```

    As you can see this type allows only `HeapProfiler.stopSampling` as `method`, and we want to use just regular `string` type.

    I didn't want to deal with complex type annotations in this tutorial. Alternatively, you could create your custom `promisify` function that will overcome that limitation.

* Make the `registedCommand` callback - asynchronous.

    To do this search for `vscode.commands.registerCommand` and add `async` before callback definition.

    ```ts
    let disposable = vscode.commands.registerCommand(
    "extension.wombat",
    async () => { // ...
    ```

* Our app will need to get the text from the currently open file, so get the `activeTextEditor` instance.

    ```ts
    const activeEditor = vscode!.window!.activeTextEditor;
    if (!activeEditor) {
      return;
    }
    ```

    We instantly stop the execution if we can't get the editor instance.

    Here is the second time I cut the corners with Typescript here.

    See those `!.` - it tells Typescript that there definitely, 100% certainly, I swear by god is a be a value in the previous field.

    It is called [non-null assertion operator](https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#non-null-assertion-operator). It's important that it is not the same as `?.` that is [optional chaining operator](https://tc39.es/proposal-optional-chaining/) (that might be familiar to Ruby, C# and probably other language users) and is not currently available neither in Typescript nor in Javascript.

* Get `document` and `fileName` for later use:

    ```ts
    const document = activeEditor!.document;
    const fileName = path.basename(document.uri.toString())
    ```
* Compile the script from the editor:

    ```ts
    const { scriptId } = await post("Runtime.compileScript", {
      expression: document.getText(),
      sourceURL: fileName,
      persistScript: true
    });
    ```

    Here we use `document.getText()` to obtain the source code. We get `scriptId` that we will need in the next step.

* Run the script:

    ```ts
    await post("Runtime.runScript", {
      scriptId
    });
    ```

* Get all the variables in global namespace:

    ```ts
    const data = await post("Runtime.globalLexicalScopeNames", {
      executionContextId: 1
    });
    ```

    Here I've hardcoded the `executionContextId`. Alternatively, you could get it by subscribing to `Runtime.executionContextCreated` event.

    It will return an array with a list of `var`, `let` or `const` definitions available in the global namespace.

    In the next steps, we'll get their values.

    Of course, this is not how Quokka.js does that, but for this tutorial, it's just enough.

*  Map through the variable names and get their values: 

    ```ts
    data.names.map(async (expression: string) => {
        const {
          result: { value }
        } = await post("Runtime.evaluate", {
          expression,
          contextId: 1
        });
    })
    ```

    We do it by executing variable names as expressions in the same context we run our script.

* Get variable locations. Add this to `map` function.

    ```ts
    const { result } = await post("Debugger.searchInContent", {
      scriptId,
        query: expression
      });
    ```

## Display Info In UI

Now we need to display this information somehow.

I wanted to find out how did Quokka.js do it.

It was surprisingly cumbersome to find the API that allows you to display info on top of the text in VSCode because it wasn't mentioned in the `API` section among the capabilities. So I had to jump directly to the `references` section.

It was mentioned in the API docs as `decorators`, which I find a bit non-intuitive name. I was looking for something like "overlay API" - of course with zero success.

Back to the tutorial:

* Define the `addDecorationWithText` function:

  ```ts
  const addDecorationWithText = (
      contentText: string,
      line: number,
      column: number,
      activeEditor: vscode.TextEditor
  ) => {
      const decorationType = vscode.window.createTextEditorDecorationType({
        after: {
          contentText,
          margin: "20px"
        }
      });
  
      const range = new vscode.Range(
        new vscode.Position(line, column),
        new vscode.Position(line, column)
      );
  
      activeEditor.setDecorations(decorationType, [{ range }]);
  };
  ```

  Due to how those decorations work we need to create a separate `decorationType` for each case because we want to have different `contextText` values.

  Then we define range - in our case, it's just one line so start and end sections of this range are the same.

  And finally, we apply created a decoration to the `activeEditor`.

* Time to use `addDecorationWithText`. Call this function inside of the names `map` we've defined earlier:

    ```ts
    addDecorationWithText(
      `${value}`,
      result[0].lineNumber,
      result[0].lineContent.length,
      activeEditor
    );
    ```

    Add it at the end of that function.

## Launch The Extention

Time to check how our extension works.

* Press `F5` or `Debug -> Start Debugging`.

    It will launch a new VSCode window in debug mode.

* Open some simple Javascript file:

    ```js
    const x = 10;

    let y = x;

    let z = 2 + 2;

    let foo = 'bar';

    const test = 42;
    ```

    This is the file that I've used.

* Run the `wombat` command.

    Open `Command Pallete` (`⇧⌘P` on Mac) and type `wombat`. Then press enter.

    ![wombat animation](./wombat.gif)

## Publishing Your Extention

Publishing VSCode extensions is done using `vsce` tool.

There is a [guide](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) in VSCode docs that explains how to do that.

You'll need to obtain your personal `publishedID` and then just run `vsce publish`.

## Final Words

Of course, this extension we've made is very basic and is missing 99.9999999% functionality that is needed to use it for real.

In reality, I believe you would have to also get the AST tree of the script to know exact locations of all the variables you want to track.

Also, you would have to have some state management to store values along with the script execution.

I believe that you also would have to pause the execution in the beginning and then execute the script step by step, recording current state on every iteration.

But all that wasn't the point of this tutorial. I wanted to play around with the available APIs and make a fun project.

The source code is available on [github](https://github.com/satansdeer/wombat). The extension itself is available in [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=satansdeer.wombat). Ping me [on telegram](https://t.me/satansdeer) if you have any questions.

Quokka Clone In 10 Minutes - VSCode Extention Tutorial


[Watch the video on YouTube](https://www.youtube.com/watch?v=uj_e_tGPfPE)

In this article I'll list 5 git tools that you must use today.

## Hub

[Hub](https://hub.github.com/) is my favourite tool and I use it a lot. If you use GitHub to store your repositories - this tool will save you a ton of time.

It automates creating new repos, making new pull requests, forking repos and filing issues. 

There are a ton of other features and options - so definitely check it out.

## Husky

I already have a video on my channel about [Husky](https://github.com/typicode/husky), but I'll still mention it here.

If you need to run scripts locally before you commit or push your changes - this tool will cover you.

You can use it to run tests or lints before or after you commit push or pull changes to and from your repository.

Husky allows you to define git-hooks in a simple config file and share them across the team.

## Commitizen

Yesterday I've read a blog post where some dude said that he set up a simple script that simplifies making git commit for him, by automatically adding message "Update".

Honestly I think it's a very bad idea, and if you do this - eventually you'll have a hard time navigating though history to find some bug introduced awhile ago.

A better option is to use [Commitizen](http://commitizen.github.io/cz-cli/).

It's a command line tool that automatically formats commits for you using conventional commits convention.

### Conventional Commits

[This convention](https://www.conventionalcommits.org) describes commit message format. 

Simply the format is as follows: `type`, ` scope` that is optional, then `descripion` and then you can have more details in commit `body` and `footer`.

Besides making your commit history tidy and easy to read it also unlocks two neat features: semantic versioning and automatic changelog generation.

### Semantic Versioning

For those who don't know [semantic versioning ](https://semver.org) is a system of versioning your packages in a `MAJOR.MINOR.PATCH` form.

Where you bump `MAJOR` when you make incompatible API changes, `MINOR` - when you add backwards compatible features and `PATCH` - when you make backwards compatible bug-fixes.

The opposite of that is [sentimental versioning](http://sentimentalversioning.org/). Where you have whatever inconsistent rules you can come up with. And you don't even have stick to one schema with sentimental versioning you bumb your numbers however you feel like.

### Automatic changelog

Another neat feature of having you commits well organized and having descriptive messages - is that you'll now be able to generate your [changelog](https://keepachangelog.com/en/1.0.0/) automatically.

So you'll be able to track notable changes to your project at basically zero cost.

## CommitLint

If you don't want to have your commits automated, but still want to have them tidy and organized - use [CommitLint](https://commitlint.js.org/#/) instead.

CommitLint can be run manually or using git hooks, remember Husky. And it will check if your messages conform to chosen format.

## gitignore.io

And last tool I want to share is [gitignore.io](https://gitignore.io) that allows you to easily generate `.gitignore` fily for any type of project.

It will save you from forgetting to add sensitive files and folders to your project.

Also there is a collection of `.gitignore` files [on Github](https://github.com/github/gitignore). 

## Final

Thank you for reading this far. If you know any other great tools - drop me a message in my [Telegram](https://t.me/satansdeer)


5 Git Tools You Must Use Today


[Watch the video on YouTube](https://www.youtube.com/watch?v=ki6yr9aYsTk)

This is a tutorial on [react-window](https://github.com/bvaughn/react-window), at the end of the article there is a link to a Github repo with code examples.

Rendering lists in React is simple, I would say trivial. You just map through an array of items and output elements.

Like here:

```jsx
<ul>
  {items.map(item => (
    <li key={item.id}>{item.text}</li>
  ))}
</ul>
```

Oh, just don't forget to specify the `key`. Read more about it in [article about lists and keys in React](https://maksimivanov.com/posts/react-lists-and-keys/).

But what if you need to render a couple of thousand items at once?

## The Problem

I'm going to use `create-react-app` bootstrapped application in all my examples in this tutorial.

First, let's try to render 3000000 items as usual and see what happens.

```jsx
export default () => (
  <ul>
    {[...Array(3000000).keys()].map(item => (
      <li key={item}>Row {item}</li>
    ))}
  </ul>
)
```

The browser just hangs and prompts us to stop the script.

![simple list in react](./lists.png)

## How To Solve It?

We need to optimize rendering. The technique to do is with lists is called **windowing**.

You show only the content that is currently inside of the view boundaries of the user.

In react here is a package [react-window](https://github.com/bvaughn/react-window)

## React Window Simple Example

Here is a simple tutorial on how to use **react-window**.

We'll use the code from the docs as an example.

- Create a new application using `create-react-app`.

```
create-react-app react-window-example
```

- Install dependencies. We'll use `react-window` and also `react-virtualized-auto-sizer` in our example.

```
yarn add react-window react-virtualized-auto-sizer
```

- Go to `App.js`, and import needed packages.

```jsx
import React from "react"
import { FixedSizeList as List } from "react-window"
import AutoSizer from "react-virtualized-auto-sizer"
```

- Add these styles to `index.css`:

      ```css
      html {
        font-family: sans-serif;
        font-size: 12px;
      }

      body {
        margin: 0;
      }

      html,
      body,
      #root {
        height: 100%;
        overflow-x: hidden;
       }

      .List {
        border: 1px solid #d9dddd;
      }

      .ListItemEven,
      .ListItemOdd {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ListItemEven {
        background-color: #f8f8f0;
      }

  ````

  Make sure you have it imported in `App.js`:

  ```jsx
  import 'index.css'
  ````

- Define the list component.

  ```jsx
  export default () => (
    <AutoSizer>
      {({ height, width }) => (
        <List
          className="List"
          height={height}
          itemCount={1000}
          itemSize={35}
          width={width}
        >
          {Row}
        </List>
      )}
    </AutoSizer>
  )
  ```

  Here we pass `height` and `width` from `AutoSizer` to our `List` component. We do it so `List` takes all the horizontal and vertical space available.

  We pass `itemSize` - in our case, it's the height of our rows.

* Define the `Row` component:

  ```jsx
  const Row = ({ index, style }) => (
    <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
      Row {index}
    </div>
  )
  ```

  Here we just display current `index`. Also, we apply even or odd class to the element.

* Run your application:

    ```
    yarn start
    ```

    You should see the list with 1000 items in it.

    ![numbers list](./numlist.png)

It was an example with generated items. Not it's time to learn how to add data to it.

## React Window Example With Data

In this example, we will display a list of cities with their population. We will use the code from the previous example as our base.

- Install `react-window-infinite-loader`

  ```
  yarn add react-window-infinite-loader
  ```

- Import `InfiniteLoader`

  ```jsx
  import InfiniteLoader from "react-window-infinite-loader"
  ```

- Wrap your `List` into `InfinineLoader`

  ```jsx
  export default () => (
    <AutoSizer>
      {({ height, width }) => (
        <InfiniteLoader
          isItemLoaded={isItemLoaded}
          loadMoreItems={loadMoreItems}
          itemCount={1000}
        >
          {({ onItemsRendered, ref }) => (
            <List
              className="List"
              height={height}
              itemCount={1000}
              itemSize={35}
              width={width}
              ref={ref}
              onItemsRendered={onItemsRendered}
            >
              {Row}
            </List>
          )}
        </InfiniteLoader>
      )}
    </AutoSizer>
  )
  ```

  Here I've hardcoded the `itemCount`, you could get this number from the API instead.

  Pass `onItemsRendered` and `ref` to `List` as props. We'll also have to define `isItemLoaded` and `loadMoreItems` functions.

- Define `items` and `requestCache` objects. You don't have to define them inside of the component, because we don't need them to be observable.

  ```jsx
  let items = {}
  let requestCache = {}
  ```

- Define the `isItemLoaded` function.

  ```jsx
  const isItemLoaded = ({ index }) => !!items[index]
  ```

  As you can tell by the name, `InfiniteLoader` uses this function to determine if a particular item was loaded. Here we just check that an item with specified `index` exists in our `items` object.

  We use double negation `!!` to transform object stored in `items` to `boolean`.

- Define the `getUrl` function

  ```jsx
  const getUrl = (rows, start) =>
    `https://public.opendatasoft.com/api/records/1.0/search/?dataset=worldcitiespop&sort=population&fields=population,accentcity&rows=${rows}&start=${start}&facet=country`
  ```

  We'll use this function inside our `loadMoreItems` implementation.

  We get `rows` and `start` as arguments and pass them as `queryParams` in our URL.

- Define the `loadMoreItems`

  ```jsx
  const loadMoreItems = (visibleStartIndex, visibleStopIndex) => {
    const length = visibleStopIndex - visibleStartIndex

    return fetch(getUrl(length, visibleStartIndex))
      .then(response => response.json())
      .then(data => {
        data.records.forEach((city, index) => {
          items[index + visibleStartIndex] = city.fields
        })
      })
      .catch(error => console.error("Error:", error))
  }
  ```

  We need to know the size of the portion of items we want to get. So we calculate the `length` first.

  Then we generate the URL using `getUrl` function and fetch the data.

  After we get the response we iterate through records and save them in our `items` object.

  This function is being called every time you scroll your list, so we'll have to implement some sort of caching.

- Add caching to `loadMoreItems`:

  ```jsx
  const loadMoreItems = (visibleStartIndex, visibleStopIndex) => {
    const key = [visibleStartIndex, visibleStopIndex].join(":") // 0:10
    if (requestCache[key]) {
      return
    }

    const length = visibleStopIndex - visibleStartIndex
    const visibleRange = [...Array(length).keys()].map(
      x => x + visibleStartIndex
    )
    const itemsRetrieved = visibleRange.every(index => !!items[index])

    if (itemsRetrieved) {
      requestCache[key] = key
      return
    }

    // Fetching ...
  }
  ```

  Here we first cache the specific range by converting it to string and storing it in `requestCache` object.

  So for instance, if we try to fetch items from `0` to `10` - we convert this range to string `"0:10"` and store it. Then if we try to fetch the same range again - we'll abort the operation.

  Then we need to check if any items from the range we want to fetch weren't yet fetched before.

  So we generate the whole range of indices. For range `2-8` it will be `2,3,4,5,6,7,8`.

  Next, we map through those numbers and check if all of the indices were already fetched.

  If that is true - we cache the range and abort the operation.

- The last step - update the `Row` component.

  ```jsx
  const Row = ({ index, style }) => {
    const item = items[index]
    return (
      <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
        {item ? `${item.accentcity}: ${item.population}` : "Loading..."}
      </div>
    )
  }
  ```

  If we have the `item` for the `index` - we display it's `accentcity` field, that holds name and `population`. Otherwise, we show `Loading...` label.

- Run the app.

  ```
  yarn start
  ```

  Open the page in the browser - you should see the cities list.

  ![cities](./cities.png)

## Conclusion

Thank you for following through this tutorial, you can find the source code for it in [this repo](https://github.com/satansdeer/react-window)

Render HUGE Lists In React - React Window Tutorial

[Open the Glitch example](https://glitch.com/embed/#!/embed/zdog-webpack-logo?path=index.html&previewSize=100&attributionHidden=true)

Usually `create-react-app` is enough to create new React applications, and if you need to have some specific settings - you can always `eject` and alter its webpack configuration. But sometimes you just need to set up a project from scratch.

In this tutorial, you will learn how to setup Webpack with Babel and React support. We'll also configure a dev server.

## Step 1: Initialize Project

- Create new folder `webpack-react` and open it:

  ```sh
  mkdir webpack-react && cd $_
  ```

  `$_` is a reference to the last argument to the previous command.

- Initialize a new npm project:

  ```sh
  npm init -y
  ```

  This command will create `package.json` file in your directory. We pass the `y` option to skip the questions.

- Create file `src/index.html` with following contents:

  ```html
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>How to set up React, Webpack, and Babel</title>
    </head>
    <body>
      <div id="root">
        
      </div>
    </body>
  </html>
  ```

## Step 2: Set Up Webpack

- Install `webpack`, `webpack-cli`, `webpack-dev-server`, `html-webpack-plugin` and `html-loader` as dev dependencies:

  ```sh
  npm i webpack webpack-dev-server html-webpack-plugin --save-dev
  ```

  Here's why they are needed:

  * `webpack` is core dependency
  * `webpack-dev-server` will allow us to run dev server
  * `html-webpack-plugin` simplifies working with `html` files

- Create `webpack.config.js` with following content:

  ```js
  const HtmlWebPackPlugin = require("html-webpack-plugin");
  const path = require('path');

  module.exports = {
    entry: "./src/App.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
    },
    plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })]
  };
  ```

- Add `build` and `start` commands to `scripts` section of `package.json`:

  ```json
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development",
  }
  ```

## Step 3: Set Up Babel

- Install Babel dependencies:

  ```sh
  npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
  ```

  We've installed babel and two presets here:

  * `@babel/preset-react` to compile JSX down to Javascript
  * `@babel/preset-env` to compile Javascript ES6 code down to ES5

- Create `.babelrc` with following contents:

  ```json
  {
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }
  ```

- Add `babel-loader` to your webpack configuration:

  ```js
  const HtmlWebPackPlugin = require("html-webpack-plugin");
  const path = require('path');

  module.exports = {
    entry: "./src/App.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
    },
    plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })]
  };
  ```

## Step 4: Set Up React

- Install React dependencies:

  ```sh
  npm i react react-dom
  ```

  * `react` - provides us with API to work with components
  * `react-dom` - allows to render to HTML DOM

- Create file `src/App.js` with following code:

  ```jsx
  import React from "react"
  import ReactDOM from "react-dom"

  const App = () => (
    <>
      <h1>Hello React</h1>
      <p>Minimal React configuration.</p>
    </>
  )

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

## Step 5: Run The App

Start `webpack-dev-server` by running `npm start`:

```sh
npm start
```

It should open a browser window and you should see this:

![Running React App](./hello-app.png)

> You can find code for this tutorial [in webpack-react-tutorial github repo](https://github.com/satansdeer/webpack-react-tutorial).

Basic Webpack React Setup


DOM (Document Object Model) is a programming api for your HTML (or XML) documents. Basically it is an object representing parsed code of your page.

It has tree-like structure and allows you to traverse, access and modify its nodes.

You are probably familiar with DOM API methods:

```js
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)

// ... etc.
```

## Why Updating DOM Is Expensive

When you update DOM it can cause browser to run two expensive operations: **reflow** and **repaint**.

**Reflow** happens where there is a change to DOM layout. It calculates dimensions and positions of page elements. And it does it for every element and it's children.

**Repaint** goes through elements and determines visual changes (opacity, color, outline, visibility) and then updates pixels on the screen.

> Because of how updating DOM is expensive - React is using technique called [Virtual DOM](https://maksimivanov.com/posts/virtual-dom/).

What Is DOM

[Watch the video on YouTube](https://www.youtube.com/watch?v=MY-xI06yPHI)

In this tutorial, we'll build a simple Instagram clone using React and GraphQL. In our version, it will only contain cat pictures.

GraphQL allows you to fetch data using **Queries** and update it using **Mutations**. Today we'll focus on fetching data. We'll create both backend and frontend.

We'll get a list of images with comments and display them as a feed.

Here's how it will look:



[Open the Glitch example](https://glitch.com/embed/#!/embed/kittengram-client?path=README.md&previewSize=100&attributionHidden=true)

## Why Use GraphQL

Over the years, [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) has become the standard for designing web APIs. It offers some great ideas, such as **stateless servers** and **structured access to resources**.

But designing a good **REST API** is a challenging task. It requires a good understanding of both **REST** architectural style and solid knowledge of **HTTP** protocol.

One of the usual problems with **REST APIs** is inefficient fetching.

For example, it can be **under-fetching**. When you don't have enough data from one endpoint and it requires you to do multiple round-trips to collect everything that is needed

Let's consider a blog example. It has posts and each post can have multiple comments.

In **REST API**, one has to gather the required information from multiple endpoints. In order to fetch the content of a blog post and its comments, a client would have to first fetch a particular post and then request another endpoint for comments based on post `id` for every post.

Here we first get the post with `id` 1 to get its title (and maybe other fields, like `content` or `text`).

```js
GET someblog.com/posts/1;

// Which will return
{
  id: 1,
  title: "Hello, it's my first post";
  //... maybe other fields
}
```

Now to get comments we make another call to our API:

```js
GET someblog.com/posts/1/comments;

// Which will return
[
  {
    id: 1,
    text: "Great post!"
  },
  {
    id: 2,
    text: "First one!"
  }
]
```

In **GraphQL**, this can be achieved with a single instance query.

```js
GET /graphql?query={ post(id: "1") { title, comments { text } } }

{
  "title": "Hello, it's my first post",
  "comments": [
    {
      text: "Great post!"
    },
    {
      text: "First one!"
    }
  ]
}
```

Using **GraphQL** it's way easier to design a good API. It requires less thinking upfront and allows you to work on your queries and optimize them as you go.

Now let's get back to our **Kittengram** example, and we'll start with backend.

## Making Backend

There are a bunch of Javascript libraries to write your GraphQL backend.

Among them [GraphQL.js](https://graphql.org/graphql-js/), [express-graphql](https://graphql.org/graphql-js/running-an-express-graphql-server/) and [apollo-server](https://www.apollographql.com/docs/apollo-server/).

We'll use [apollo-server](https://www.apollographql.com/docs/apollo-server/) to build our GraphQL backend.

### Step 1: Initialize project

In this step, we'll use your terminal create a directory `kittengram-server` and initialize simple **Node.js** app there.

* First, create a folder `kittengram-server` using the `mkdir` command.

  ```
  mkdir kittengram-server
  ```

* Enter the directory.

  ```
  cd kittengram-server
  ```

* Initialize new **Node.js** project using `npm`.

  ```
  npm init --yes
  ```

If everything is fine you should see the `package.json` file in your directory.

### Step 2: Install dependencies

Next, we'll install two dependencies which are necessary for responding to GraphQL requests:

* `apollo-server`: The Apollo server library. Does all the heavy lifting. Allows us to focus on defining the shape of our data.
* `graphql`: The library used to build a schema and to execute queries on that schema.

Run the following command to install both of these dependencies and save them in the project:

```
npm i --save apollo-server graphql
```

### Step 3: Create the server

* Open the `kittengram-server` directory using your IDE/editor.
* Create a new file called `index.js` in the root of the project directory.
* "Copy" and "Paste" the following code into the `index.js` file:

  ```js
  const { ApolloServer, gql } = require("apollo-server");

  const photos = [
    {
      author: "🐈 Nala",
      url:
        "https://cataas.com/cat/cute/says/Apollo%20is%20awesome?size=50&color=magenta",
      comments: [
        {
          author: "Coco",
          text: "Meow meow"
        },
        {
          author: "Gracie",
          text: "Meow meow meow"
        }
      ]
    },
    {
      author: "🐱 Loki",
      url:
        "https://cataas.com/cat/cute/says/GraphQL%20is%20awesome?size=50&color=magenta",
      comments: [
        {
          author: "Jasper",
          text: "Meow"
        },
        {
          author: "Oreo",
          text: "Meow meow"
        },
        {
          author: "Tiger",
          text: "Meow"
        }
      ]
    }
  ];

  const typeDefs = gql`
    type Comment {
      author: String
      text: String
    }

    type Photo {
      author: String
      url: String
      comments: [Comment]
    }

    type Query {
      photos: [Photo]
    }
  `;

  const resolvers = {
    Query: {
      photos: () => photos
    }
  };

  const server = new ApolloServer({ typeDefs, resolvers });

  server.listen().then(({ url }) => {
    console.log(`🐱  Server ready at ${url}`);
  });
  ```

### Step 4: Start the server

Our application is ready to start.

* Run the `index.js` file we created in the previous step using Node.js

  ```
  node index.js
  ```

  You should see the following output:

  ```
  🐱  Server ready at http://localhost:4000/
  ```

* Open the address provided in your web browser.

  If everything is working, you should see the **GraphQL Playground explorer tool**, similar to one below

  _The GraphQL Playground below is interactive so you can use it to play around_



[Open the Glitch example](https://glitch.com/embed/#!/embed/kittengram-server?path=.gitignore&previewSize=100&attributionHidden=true)

### Step 5: Run your first query

At this point, you'll be able to start sending queries to the GraphQL server using GraphQL Playground, which is split into two parts:

* The request (on the left)
* The response (on the right)

There is also a play button in the middle that makes it look like a video player, but it's used to perform requests.

Enter the following query on the left side of the window, and press that **Play** button.

```js
{
  photos {
    url
    author
    comments {
      author
      text
    }
  }
}
```

This query asks for a list of posts, including the url, author and list of comments for each post.

Now it's time to work on the frontend.

## Making Frontend

There are several libraries available to work with GraphQL on a client. Most popular of them are [Relay](https://facebook.github.io/relay/) and [Apollo](https://www.apollographql.com/).

We'll use Apollo with `apollo-boost` to simplify the setup.

### Step 1: Application setup

In this tutorial, we'll set up our application using `create-react-app`.

* Create `kittengram-client` application.

  ```
  npx create-react-app kittengram-client
  ```

  Here I've used `npx` command to run `create-react-app`. You can run `create-react-app` directly if you have it installed locally.

  > `npx` is an npm package runner. It is available with `NodeJS` installation since version `6.0`. It's often being used to run one-time commands without installing them first. But it can be used for other tasks too, read more about it [here](https://www.npmjs.com/package/npx)

### Step 2: Install dependencies

As I've mentioned earlier we'll use `apollo-boost` in this project. We'll also use `react-apollo` to integrate GraphQL with React and `graphql` to parse queries.

Let's install these packages.

```
npx i --save apollo-boost react-apollo graphql
```

### Step 3: Create client

After we have all the dependencies installed - we need to initialize GraphQL client. The only argument it requires is the endpoint of your GraphQL server we've set up earlier (in our case `http://localhost:4000`).

* Open your `index.js` file, import `ApolloClient` from `apollo-boost` and initialize the new client passing `http://localhost:4000` as `url` property.

  ```js
  import ApolloClient from "apollo-boost";

  const client = new ApolloClient({
    uri: "https://localhost:4000"
  });
  ```

* You can verify that `client` is set up properly by sending a test query.

  ```js
  import { gql } from "apollo-boost";

  client
    .query({
      query: gql`
        {
        photos {
          url
          author
          comments {
            author
            text
          }
        }
      `
    })
    .then(result => console.log(result));
  ```

### Step 4: Integrate React

To connect Apollo Client to React, we'll use the `ApolloProvider`. It works just like React Context provider, you can read more about React Context API [here](https://maksimivanov.com/posts/react-context-api/)

* In `index.js`, wrap your `App` with an `ApolloProvider`.

  ```jsx
  import { ApolloProvider } from "react-apollo";

  render(
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>,
    document.getElementById("root")
  );
  ```

### Step 5: Request data

Now you're ready to start requesting data with `Query` components!

`Query` component uses the render prop pattern to share GraphQL data with your UI.

* Add the following code to your `App.js` file.

  ```jsx
  import React from "react";
  import { Query } from "react-apollo";
  import { gql } from "apollo-boost";
  import "./App.css";

  const App = () => (
      <Query
        query={gql`
          {
            photos {
              url
              author
              comments {
                author
                text
              }
            }
          }
        `}
      >
        {({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error :(</p>;

          return data.photos.map(photo => (
            <div key={photo.url}>
              {photo.author}
              <img src={photo.url} alt={photo.author} />
              {photo.comments.map(comment => (
                <div>
                  {comment.author}: {comment.text}
                </div>
              ))}
            </div>
          ));
        }}
      </Query>
  );

  export default App;
  ```

  Here we pass a GraphQL query parsed by `gql` to `Query` component as `query` prop.

  Then we pass a function as `children` to `Query` component. This function expects to get `loading` state, `error` if it exists and `data` as props.

  We use destructuring assignment to get specific prop fields.
 
  And finally we map through photos to display cat images, and comments.

**You should see something like this:**


[Open the Glitch example](https://glitch.com/embed/#!/embed/kittengram-client-unstyled?path=src/App.js&previewSize=100&attributionHidden=true)

### Step 6: Styling it up

In my example, I've used `styled-components` to add styles to my application. You can find the code for them in [this repo](https://github.com/satansdeer/kittengram-client)

## Conclusion

At this point, you should have functioning backend and frontend for a simple React GraphQL application. In this example, we used only `Queries` to fetch the data.

* [Frontend code](https://github.com/satansdeer/kittengram-client)
* [Backend code](https://github.com/satansdeer/kittengram-server)

In one of the next tutorials, we'll take a look at `Mutations` as a way to update data on the backend.

Fullstack GraphQL Beginner Tutorial - Instagram Clone


[Watch the video on YouTube](https://www.youtube.com/watch?v=qod6E738cc4)

Git provides an interface to run some code as reaction on specific triggers. Those triggers are called githooks (hooks used by git). You can run code on every commit, push, pull or other actions.

> Hooks are programs you can place in a hooks directory to trigger actions at certain points in git’s execution.

You can check out the whole list on [git documentation page](https://git-scm.com/docs/githooks).

It might be quite cumbersome to manage githooks and make them available for the whole team.

Luckily there is a tool called [Husky](https://github.com/typicode/husky) that provides nice interface to manage githooks.

It is an **npm** package so it's usually used with Javascript projects.

## Install Husky

To start using [Husky](https://github.com/typicode/husky) you need to install it as def dependency first:

```sh
npm install husky --save-dev
```

Then you need to add husky configuration section to `package.json`:

```json
// package.json
{
  "husky": {
    "hooks": {
      "pre-push": "npm test",
    }
  }
}
```

In this config specify that we want to run `npm test` before every `push` to remote repo.

Alternatively you can specify your settings in `.huskyrc`, `.huskyrc.json` or `.huskyrc.js` file

```json
// .huskyrc
{
  "hooks": {
    "pre-commit": "npm test"
  }
}
```

## Supported Hooks

Husky supports all Git hooks except server side hooks (`pre-receive`, `update` and `post-receive`).

* `applypatch-msg` - This hook is invoked by `git-am`. It takes a single parameter, the name of the file that holds the proposed commit log message. Exiting with a non-zero status causes git am to abort before applying the patch.

* `pre-applypatch` - This hook is invoked by `git-am`. It takes no parameter, and is invoked after the patch is applied, but before a commit is made.

* `post-applypatch` - This hook is invoked by `git-am`. It takes no parameter, and is invoked after the patch is applied and a commit is made.

* `pre-commit` - This hook is invoked by `git-commit`, and can be bypassed with the `--no-verify` option. It takes no parameters, and is invoked before obtaining the proposed commit log message and making a commit. 

* `prepare-commit-msg` - This hook is invoked by `git-commit` right after preparing the default log message, and before the editor is started.

* `commit-msg` - This hook is invoked by `git-commit` and `git-merge`, and can be bypassed with the `--no-verify` option. It takes a single parameter, the name of the file that holds the proposed commit log message. 

* `post-commit` - This hook is invoked by `git-commit`. It takes no parameters, and is invoked after a commit is made.

* `pre-rebase` - This hook is called by `git-rebase` and can be used to prevent a branch from getting rebased.

* `post-checkout` - This hook is invoked when a `git-checkout` is run after having updated the worktree.

* `post-merge` - This hook is invoked by git-merge, which happens when a git pull is done on a local repository. 

* `pre-push` - This hook is called by `git-push` and can be used to prevent a push from taking place.

* `pre-auto-gc` This hook is invoked by `git gc --auto`. 

    `git-gc` runs a number of housekeeping tasks within the current repository, such as compressing file revisions (to reduce disk space and increase performance), removing unreachable objects which may have been created from prior invocations of git add, packing refs, pruning reflog, rerere metadata or stale working trees.  

* `post-rewrite` - This hook is invoked by commands that rewrite commits (`git-commit` when called with `--amend` and `git-rebase`.

There are other less popular hooks, you can check them in [git documentation](https://git-scm.com/docs/githooks)

## Access Git params and stdin

Git hooks can access parameters via command-line arguments and stdin.

Husky makes them accessible via `HUSKY_GIT_PARAMS` and `HUSKY_GIT_STDIN` environment variables.

```json
{
  "husky": {
    "hooks": {
      "commit-msg": "echo $HUSKY_GIT_PARAMS"
    }
  }
}
```

## Using In Monorepos

If you have a multi-package repository, it's recommended to use tools like [lerna] and have husky installed **ONLY** in the root `package.json` to act as the source of truth.

## Running Multiple Commands

By design, husky will run hook scripts as a single command. Just like scripts defined in `package.json` are run.

```json
{
  "pre-commit": "cmd && cmd && cmd"
}
```

Improve Your Frontend Skills

Recommended Articles