
## Add an image to a div

Adding a background image to a `<div>` is easy using CSS

```html
<body>
    <div class="image"></div>
</body>
```

```css
#image {
    background-image: url('images/background.jpg');
    background-size: cover;
    width: 1024px;
    height: 450px;
}
```

## Add a gradient overlay to this image

```css
#image {
    background-image: 
        linear-gradient(to bottom, rgba(245, 246, 252, 0.50), rgba(117, 19, 93, 0.75)), 
        url('images/background.jpg');
    background-size: cover;
    width: 1024px;
    height: 450px;
}
```


How to add an image gradient overlay using CSS


## Delete a local Git tag

First, use the `git tag` command to list all your local Git tags.

To delete a local Git tag, use the `git tag` command with the `-d` option.

```bash
git tag -d <tag_name>
```

> Be careful, this command doesn't delete the remote Git tag if it exists.

## Delete a remote Git tag

To delete a remote Git tag, use the `git push` command with the `--delete` option.

```bash
git push --delete origin <tag_name>
```


CRA + Eslint + Prettier


To apply a style to every child element that is **not the first child** :

```css
.parent > *:not(:first-child) {
    ...
}
```
>We can write it in a more shortcut way

```css
.parent > * + * {
    ...
}
```


Apply a style to child elements that is not the first child


Thanks to the very large open-source community around **Node**, it is possible for us to access many features already coded for us and install them very easily as *dependencies* in our projects.

[npm](https://www.npmjs.com/ "npm") is a Node package manager which will allow us to download, install, uninstall or update our packages within a project using its CLI.

`npm ci` is very useful in CI/CD pipelines, but what is the differences with `npm install` ?

****

## npm i 
> This is an alias for `npm install`

The `npm i` command is used to install all `dependencies` or `devDependencies` from a ***package.json*** file.

**Syntax:**
```bash
npm i
```

## npm ci
> **CI** means Continuous Integration

This command is similar to `npm i` , except it's meant to be used in automated environments such as test platforms, continuous integration, and deployment. *(Or any situation where you want to make sure you're doing a clean install of your dependencies)*.  

`npm ci` is used to install all exact versions of `dependencies` or `devDependencies` from a ***package-lock.json*** file.

**Syntax:**
```bash
npm ci
```

****

## Differences between npm i and npm ci

| npm i | npm ci |
| ----- | ------ |
| It is slower in execution | It is **faster** in execution |
| The project just need a *package.json* | The project **must** have an existing *package-lock.json* |
| It may write to *package.json* or *package-lock.json* | It will **never** write to *package.json* or *package-lock.json*: installs are essentially frozen. |
| Individual dependencies can be added | Individual dependencies **cannot** be added |
| If any dependency is not in *package-lock.json*, `npm i` will add it | If dependencies in the *package-lock.json* do not match those in *package.json*, `npm ci` will exit with an error, instead of updating the *package-lock.json* |
| If a **node_modules** is already present, `npm i` doesn’t change anything to it | If a **node_modules** is already present, it will be automatically removed before `npm ci` begins its install |
| It can install global packages | It can not install global packages |

****

See official documentations :
- [npm i](https://docs.npmjs.com/cli/v8/commands/npm-install)
- [npm ci](https://docs.npmjs.com/cli/v8/commands/npm-ci)


Difference between npm i and npm ci


I want to create notes easily using *Markdown* files.  
This is a sandbox's note to design the frontend rendering

## Basic usage

### Text styling

Wrap with backtick quotes to indicate a span of `code`

`_italic_` or `*italic*` ==> _italic_

`__bold__` or `**bold**` ==> __bold__

`___bold italic___` or `***bold italic***` ==> ___bold italic___

`~~strikethrough~~` ==> ~~strikethrough~~

> There is no underline style in Markdown

☝️ This will be a **blockquote** to notify important points, no quotes haha :
```markdown
This is a text
> This is
> a blockquote
>
> > Nested
> > Blockquote
```

****

### Links

```markdown
An explicit link: <http://example.com/>  
This is an inline [link](http://example.com/ "Link").
This is a [link](http://example.com/) without title attribute.
This is a reference-style [link][Reference].

[Reference]: http://example.com/ "Title"
```

An explicit link: <http://example.com/>  
This is an inline [link](http://example.com/ "Link").  
This is a [link](http://example.com/) without `title` attribute.  
This is a reference-style [link][Reference].

[Reference]: http://example.com/ "Title"

****

### Lists

**Unordered list** `ul` :
```markdown
* Item 1        |    - Item 1
* Item 2        |    - Item 2
* Item 3        |    - Item 3
  * Item 3.1    |      - Item 3.1
  * Item 3.2    |      - Item 3.2
* ...           |    - ...
```
result :
* Item 1
* Item 2
* Item 3
  * Item 3.1
  * Item 3.2
* ...

**Ordered list** `ol` :
```markdown
1. Item 1
2. Item 2
3. Item 3
  1. Item 3.1
  2. Item 3.2
```
result :
1. Item 1
2. Item 2
3. Item 3
   1. Item 3.1
   1. Item 3.2
4. ...

**Tasks list** :
```markdown
- [ ] Task 1
- [ ] Task 2
- [x] Task 3 done
```
result :
- [ ] Task 1
- [ ] Task 2
- [x] Task 3 done

****

### Code block

A **Bash** code block

```bash
echo "Hello World"
```

A **Javascript** code block

```js
// This is a comment
(function() {
  alert("Hello World");
})();
```

****

### Table

```markdown
| Firstname   | Lastname | Age |
| ----------- | -------- | --- |
| Danny       | Briant   | 52  |
| Francis     | LLacer   | 42  |
| Jean-Claude | Duss     | 38  |
```
result:
| Firstname   | Lastname | Age |
| ----------- | -------- | --- |
| Danny       | Briant   | 52  |
| Francis     | LLacer   | 42  |
| Jean-Claude | Duss     | 38  |


Notes