
When working on UI development, one problem that I faced a lot was the Animating header.
To be precise, do some animations for the header when the user scrolls down, scrolls up, stops the scroll, or reaches the top or bottom of the page,...
Even though I have done it 4-5 times now, but still can't remember how I do it. But, then, sure, searching all over the source code I have access to.
I'm tired of it, so I wrote this post about how I do this kind of animation.

## Defined the variables

No words, it's easier when looking at the code:

```ts
enum DIRECTION {
  INIT,
  UP,
  DOWN,
}'
```

```ts
const prevScroll = useRef(0)
const curScroll = useRef(0)
let timeout: ReturnType<typeof setTimeout>

const [direction, setDirection] = useState<DIRECTION>(DIRECTION.INIT)
const [isScrolling, setIsScrolling] = useState(false)

/**
 * Check the scroll direction and get the corresponding state.
 */
const scrollListener = useCallback(() => {
  setIsScrolling(true)

  curScroll.current = window.scrollY || document.documentElement.scrollTop
  //   80 is the height of header
  if (curScroll.current < 80) return

  if (curScroll.current > prevScroll.current) {
    setDirection(DIRECTION.DOWN)
  } else if (curScroll.current < prevScroll.current) {
    setDirection(DIRECTION.UP)
  }

  prevScroll.current = curScroll.current
  clearTimeout(timeout)
  timeout = setTimeout(() => {
    setIsScrolling(false)
  }, 500)
}, [])

useEffect(() => {
  prevScroll.current = window.scrollY || document.documentElement.scrollTop
  document.addEventListener('scroll', scrollListener)
  return () => {
    document.removeEventListener('scroll', scrollListener)
  }
}, [scrollListener])
```

## Using the state

For example:

```ts
<header
  className={clsx(
    'fixed z-50 w-full bg-white',
    'transition-all duration-500 ease-in-out',
    direction === DIRECTION.DOWN && '-top-20',
    direction === DIRECTION.UP && 'top-0',
    isScrolling && 'some-css-for-scroll'
  )}
>
  // some code
</header>
```


Animate header when scrolling


`position: sticky` is a new CSS property that allows you to make an element sticky.
The idea is that as you scroll, an element can "stick" to the edge. At that moment, it transitions from being relatively-positioned to being fixed-positioned.

In addition to setting position: sticky, you also need to pick at least one edge to stick to (top, left, right, bottom).

## Stay in the box

Unlike other positioned layout, sticky position will never follow the scroll outside of its parent element.
Sticky elements only stick while their container is in the view.

## Offset

As we've seen, every position value changes the way top/left/right/bottom work:

- With relative positioning, the element is shifted from its natural, in-flow position
- With absolute positioning, the element is distanced from its containing block's edge
- With fixed positioning, the element is adjusted based on the viewport

With sticky positioning, the value controls the minimum gap between the element and the edge of the viewport while the container is in-frame.

## Not incorporeal

Sticky elements are like relative or static elements, they're laid out in-flow. They take up real space, and that space remains taken even when the element is stuck to an edge during scrolling.

Sticky elements are considered "in-flow", while fixed elements aren’t.

## Horizontal stickiness

Sticky positioning is almost always used with vertical scrolling, but it also works with horizontal scrolling.

## Browser support

Happily, position: sticky is [supported across all major browsers](https://caniuse.com/css-sticky).


CSS Position Sticky


`overflow` is a condition that happens when content doesn't fit into its parent's content box.

## Accepted values

`overflow` default value is `visible`. It can also be set to other values:

- `scroll`: add scroll bar
- `auto`: adds a scrollbar when one is required
- `hidden`: remove scroll bar no matter what

`overflow` is a shorthand for 2 distinct properties:

- `overflow-x`
- `overflow-y`

## Scroll container

A scroll container is a scrollable box that exists within a webpage. When we set either `overflow-x` or `overflow-y`, we turn the selected element into a scroll container.

Children of a scroll container are essentially locked inside that box. They can't ever spill outside its parent's bounds. They can't be used to allow "normal" visible overflow in one axis.

## Horizontal Overflow

By default, in flow layout, browser will break the line when the next element can't fit in the current line.
So we don't have the horizontal scroll bar.
To fix that, we can opt in the `white-space: nowrap` property.

## Overflow with absolute positioned elements

Absolutely-positioned elements act just like static-positioned elements when it comes to overflow. If the parent sets `overflow: auto`, _as long as that parent is the containing block_, it will allow that child to be scrolled into view.

## Overflow with fixed positioned elements

When it's come to fixed positioned elements, we need to remember that the fixed elements is contained by the viewport. It's doesn't care about the parent's overflow.
So even when the parent has `overflow: auto`, the child will still out of flow and doesn't have any effect to the parent.


CSS Overflow


- Fixed positioning is a cousin of absolute positioning.
- Fixed positioning can only contain by the viewport, no matter what the containing block is.
- Fixed positioning is immune to scroll.

### Fixed without anchor points?

It'll do the same as absolute positioning, **the element sit in their in-flow position** but, the different is, it won't be affected by the scroll.

### The transform exception

If parent or grandparent uses the `transform` property, **it becomes the containing block for the fixed element**.
Also, the `will-change: transform` declaration has the same effect.


CSS Fixed Positioning


How does the browser decide which element to render "on top" when elements overlap?

## Default Behavior

- When all siblings are rendered in Flow layout, the DOM order controls how the background elements overlap, but the content will always float to the front.
- If one sibling uses positioned layout, it will appear above its non-positioned sibling, no matter what the DOM order is.
- If both siblings use positioned layout, the DOM order controls which element will be on top. Unlike in Flow layout, the content does not float to the front.

## Using z-index

- `z-index` is a CSS property that allows you to control the order of elements in the stacking context.
- `z-index` only works with positioned elements.
- `z-index` can also be used with flex/grid children.
- The `z` in `z-index` refers to the `z` axis in 3D space.
- Default value of `z-index` is `auto`, which equates to `0`.

### Negative z-indexes

`z-index` values must be integers, and they are allowed to be negative.
Even though it won't offer much benefit.

## Stacking Contexts

`z-index` isn't a global value, it's a value applied to a stacking context.
An website is collection of stacking contexts. Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.

- Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
- Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

### Creating new contexts

Here are some declarations that create a new stacking context:

- Setting `opacity` to a value less than `1`
- Setting `position` to `absolute` or `relative` and `z-index` value other than auto.
- Setting `position` to `fixed` or `sticky` (No `z-index` needed for these values!)
- Applying a `mix-blend-mode` other than `normal`
- Adding a `z-index` to a child inside a display: `flex` or display: `grid` container
- Using `transform`, `filter`, `clip-path`, or `perspective`
- Explicitly creating a context with `isolation: isolate`

More info on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)

### Debugging stacking contexts

Here is a super awesome tool to help you debug stacking contexts: [Stacking Contexts Inspector](https://github.com/andreadev-it/stacking-contexts-inspector)


CSS Stacking Contexts


Some notes about containing blocks and positioned elements.
In CSS, every HTML element has a “containing block”. A containing block is a rectangle that forms the bounds of the element's container.

## Flow Layout

In Flow layout, containing block of an element is the parent element.

## Absolute positioning

In Absolute positioning, containing block isn't the parent element.
**Absolute elements can only be contained by other elements using the Positioned layout.**

Here's how the algorithm works: When deciding where to place an absolutely-positioned element, it crawls up through the tree, looking for a Positioned ancestor. The first one it finds will provide the containing block.
If it doesn't find one, it uses the viewport as the containing block.

When deciding the containing block, the containing block can be any value that is a valid CSS position value, including: `relative`, `absolute`, `fixed`, `sticky`.

### Small note

When applying positioned layout, the padding will be ignored. Padding is used in Flow layout calculations, and absolute elements are taken out-of-flow. Those rules don't apply.


CSS Containing Blocks


Some notes about CSS Position Absolute.

Normally, elements will be ordered follow the order of the HTML. This is referred to as Flow layout.
These days, it's also can be referred to as Flex layout, because Flex is too popular.

But when we want to break the rules, take elements out of flow, in these cases, `absolute position` is the option.

## Placement based on the frame

When applying `position: absolute`, we can place the element based on **the box it's being constrained by** and **ignore its "natural" position**.

The placement based on 4 properties: `top`, `left`, `right`, `bottom`.
These properties can be set to `px`, `%`.

## Default Placement

When we setting `position: absolute`, and doesn't apply any anchor `top`, `left`,... The element will **sit in its default in-flow position**.
We can think of it as "inheriting" the position from the Flow layout.

## Effect on layout

When setting `position: absolute`, we pull the element **out of the flow**.
When the browser laying out elements, it will ignore the absolute elements. The absolute elements kind of a ghost, stick in specificed spot.

## Collapsing parents

It can be quite annoying when we need to setting up the parents and the child.
When we set `position: absolute`, the parent will ignore the child, and sometimes can cause collapse.
Example:

```html
<style>
  .parent {
    border: 4px solid;
  }

  .child {
    position: absolute;
    width: 200px;
    height: 200px;
    background: green;
    opacity: 0.5;
  }
</style>

<div class="parent">
  <div class="child"></div>
</div>
```

## Absolute sizes

The thing is, when we apply absolute positioning, the display value will be ignored. The same happen for position `fixed`, `sticky`,.. except the `relative` and `static`, which is the default position.
And to determine the size of the element, `absolute` position will try to fit the content as small as it can and also still fit in the containing block. It will try its best to follow the rules defined in the CSS spec.

## Centering Trick

Because the `absolute` position is trying the best to follow the rules in CSS spec, so we can center element with the following spec:

```css
.box {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100px;
  height: 100px;
  margin: auto;
  background: lightgreen;
}
```

The trick works by 4 following properties:

- Absolute position `position: absolute`
- equal distance from each edge `top`, `left`, `right`, `bottom`
- a fixed size
- Hungry margins `margin: auto`


CSS Position Absolute


Some notes about CSS Position Relative.

`relative` is the most subtle position, you can slap `position: relative` on any element, and see zero difference. It looks like to have no effect.

What `relative` does?

- Constrains certain children
- Enables additional CSS properties to be used.

New CSS properties can be used with `relative` position:

- top
- left
- right
- bottom

We can use these properties to shift elements around **without impacting the layout** (That the different compared to shift elements using margin).
These properties accept negative values too.
Relative positioning also works with both _block and inline elements_.

Relative positioning really opens some interesting doors for us 💯


CSS Position Relative


Normally, when start working with HTML and CSS, the default Flow Layout will be applied.
But there are multiple other layout modes, and this post talked about: **Positioned Layout**.
The Flow Layout algorithm tries very hard to make sure that multiple elements never occupy the same pixels (Unless you use negative margins).
With the positioned layout, we can break through it.

To use Positioned Layout, we need to use `position` property. This property can be set to: `relative`, `absolute`, `fixed` or `sticky`. There are a few more values, but these 4 values are the values that can change the way layout works.
Each of them works in a unique way, like a _mini layout algorithm_ within the layout algorithm.

## Static Positioning

`static` is the default value of `position` property.
That means that all these elements with the `static position` _not_ use Positioned Layout; they're using some other layout mode, like Flow Layout, Flexbox or Grid.
When referring to `static` elements, they are also called `statically-positioned` elements.

If an element currently using Positioned Layout, you can cancel it by changing the `position` property to `static` or `initial`

```css highlight=2
.box {
  position: initial;
}
```

There are the values `unset`, `revert` and `inherit`

- `unset` will cancel the current position property and change to parent position or initial position.
- `revert` to reset to user-agent stylesheet
- `inherit` to make the value same as the parent value

Although these values are rarely used.


Positioned Layout - Static


Some notes about margin collapse.

## What is Margin Collapse?

When think about margin, you can think it as a "personal space". Each object has they own personal space.
For example, we have 2 persons, one named "p1" and another named "p2", each person has 6 feet of space.
When you think about it, 6 feet can be "shared", because it's doesn't violate the 6 feet rule.

Margin works similar, and sometime they can collapse, or overlap. This can lead to surprising behavior if we not understand it correctly.

## Rules of Margin Collapse

To understand the rules of margin collapse, we need to consider many cases.

### Only vertical margins collapse

For example, we have 2 boxes A and B and place it vertially:

<div style="display: inline-block; background-color: #f6d088">
    <div style="padding: 12px; margin: 24px; display: inline-block; background-color: white; border: 2px solid black;">box 1</div>
    <div style="padding: 12px; margin: 24px; display: inline-block; background-color: white; border: 2px solid black;">box 2</div>
</div>

You can see that the distance between 2 boxes is far away, but the distance between the boxes and the container is close.
If we place it vertically, the distance between the boxes will the same as the distance between the container.

<div style="display: inline-block; background-color: #f6d088">
    <div style="padding: 12px; margin: 24px; display: block; background-color: white; border: 2px solid black;">box 1</div>
    <div style="padding: 12px; margin: 24px; display: block; background-color: white; border: 2px solid black;">box 2</div>
</div>

That when margin collapse happens, you can try inspect to see the weird behavior.

## Only conllapse in Flow Layout

The web have many layout modes, for example: flexbox, grid, positioned layout. But the margin collapse only happens in flow layout.
For example, below is the flexbox layout:

<div style="display: flex; flex-direction: column; background-color: #f6d088">
    <div style="padding: 12px; margin: 24px; display: block; background-color: white; border: 2px solid black;">box 1</div>
    <div style="padding: 12px; margin: 24px; display: block; background-color: white; border: 2px solid black;">box 2</div>
</div>

The margin didn't collapse.

## Collapse between siblings

There the weird things happen. Try inspect the web to see:

<div style="display: inline-block; flex-direction: column; background-color: #f6d088">
    <div>
        <p style="padding: 12px; margin: 24px; display: block; background-color: white; border: 2px solid black;">box 1</p>
    </div>
    <div>
        <div>
            <p style="padding: 12px; margin: 24px; display: block; background-color: white; border: 2px solid black;">box 2</p>
        </div>
    </div>
</div>

There are many `div`s between 2 boxes, but somehow the margin collapse still happens. Turns out, the collapse **happen for siblings element, even if it means transferring margin to the parent element!**
But we do experiment some time margin can use to increase the distance between elements. That because margin collapse only works when the siblings element are _touching_ each other.

There are some example of not touched siblings:

### Blocked by <br/>

Putting a `<br>` between 2 elements and the collapse go away.

<div style="display: inline-block; flex-direction: column; background-color: #f6d088">
    <p style="padding: 12px; margin: 24px; display: block; background-color: white; border: 2px solid black;">box 1</p>
    <br />
    <p style="padding: 12px; margin: 24px; display: block; background-color: white; border: 2px solid black;">box 2</p>
</div>

The `<br/>` tag is invisible and empty, but it's still a wall between 2 boxes, so the margin collapse cannot happen.

### Blocked by padding or border of parrent

The parent is wrapping around the child, so their padding and border also wrapped the child.
That will create a wall between 2 boxes, and the collapse cannot happen.

<div style="display: inline-block; flex-direction: column; background-color: #f6d088">
    <div style="border: 2px solid black;">
        <p style="padding: 12px; margin: 24px 0; display: block; background-color: white; border: 2px solid black;">box 1</p>
    </div>
    <p style="padding: 12px; margin: 24px 0; display: block; background-color: white; border: 2px solid black;">box 2</p>
</div>

Here is the example using border to create a _wall_ between 2 boxes. The same happens with padding.

### Blocked by a gap

If we fixed the height of the parent, then the child also cannot touch the sibling.

<div style="display: inline-block; flex-direction: column; background-color: #f6d088">
    <div style="height: 200px;">
        <span>I'm height: 200px</span>
        <p style="padding: 12px; margin: 24px 0; display: block; background-color: white; border: 2px solid black;">box 1</p>
    </div>
    <p style="padding: 12px; margin: 24px 0; display: block; background-color: white; border: 2px solid black;">box 2</p>
</div>

So we end up with a rule:
**Margins must be touching in order for them to collapse.**

## Bigger margin wins

That for sure, the bigger margin wins. If we think it as personal space, it's make sense.

<div style="display: inline-block; flex-direction: column; background-color: #f6d088">
    <p style="padding: 12px; margin: 48px 0; display: block; background-color: white; border: 2px solid black;">box 1</p>
    <p style="padding: 12px; margin: 24px 0; display: block; background-color: white; border: 2px solid black;">box 2</p>
</div>

## Same direction margins

Margins can collapse in the same direction too. The child margin get "absorbed" by the parent margin. Then the 2 margins compare to each other, the bigger margin wins.

<div style="display: inline-block; background-color: lightgreen;">
    <div style="margin-top: 72px; background-color: #f6d088">
    <p style="margin-top: 24px; ">Paragraph One</p>
    </div>
</div>

The green color is the margin of parent element, and it's override the margin top 24px of the child.

## More than 2 margins can collapse

It's very hard to visually the collapse when there are more than 2 margins. But it's simply is combine of the above rules.
Try inspect the below example and you will get it.

<div style="padding: 12px; border: 2px solid black;">
    <header style="margin-bottom: 10px;">
        <h1 style="margin-bottom: 20px;">My Project</h1>
    </header>
    <section style="margin-top: 30px;">
        <p style="margin-top: 40px;">Hello World</p>
    </section>
</div>

By combining the margin, the distance between `h1` and `p` is 40px.

## Negative margins

This is the one that I used a lot, and you probally used it before.
The negative margin quite simple, a negative margin will pull an element to the opposite direction. If there are the mix between positive and negative margin, the 2 will be added together. Very intuitive.

<div style="display: inline-block; background-color: #f6d088">
    <p style="padding: 12px; margin: 24px 0 -24px; display: block; background-color: white; border: 2px solid black;">box 1</p>
    <p style="padding: 12px; margin: 12px 0 24px; display: block; background-color: white; border: 2px solid black;">box 2</p>
</div>

The box 2 was above box 1 and there is some overlap between them.

---

That's a lot, I never though I could done that.


What is Margin Collapse and the rules of Margin Collapse.

CSS Margin Collapse


As everyone knows, CSS allow us to control the appearance and layout of the web-app content.

But, by default, your HTML do have some minimal styles of their own. These styles come from the browsers. For example, the styles of `<a>` tag, in Chrome:

```css
a {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}
```

These styles are called `user-agent stylesheets`. And each browser has they own styles. So that why our apps do look a little different across browsers.

Even now, the browsers do look a bit more consistent, we still shouldn't expect our web apps to look identically across browsers.

> Here is source of Chrome styles: [Chromium HTML Source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/resources/html.css)

## CSS Inheritance

A cool thing that everyone may know, but it's kind of weird when you think about it, it's `inheritance` in CSS.

For example:

```html
<style>
  p {
    color: green;
  }
</style>

<p>How do I <em>look</em>?</p>
```

For sure, the `<em>` tag has green color. But how?

The answer is that _certain_ CSS properties **\*inherit**.\* When you apply `color` properties, it's passed down to all children and grand-child.

Not all CSS properties are inheritable, though, for example: border, padding,... Most of inheritable properties are typography-related, like: color, font-size, text-shadow,...

There is a list of inheritable properties on [SitePoint](https://www.sitepoint.com/css-inheritance-introduction/#list-css-properties-inherit)

## CSS Prototype

A cool thing is, CSS inheritance is kind of like JS Prototype.

For example, the below HTML:

```html
<main style="color: black;">
  <p style="color: red;">Hello <span>World</span></p>
</main>
```

If we convert it to JS, it'll be like:

```jsx
class Main {
  color = 'black'
}
class Paragraph extends Main {
  backgroundColor = 'red'
}
class Span extends Paragraph {}
const s = new Span()

console.log(s.color)
```

When browsers look for `<span>` color, it'll check the color of span, if don't have then check the color of `<p>` , and so on.

Event it's looks like JS Prototype, but it's not exactly like JS.

When JS find the matching property, it'll stop looking, but in CSS, we all know there is a `!important` property, so the implementation can be a bit different.

## Forcing Inherit

Even CSS is inheritable, there still some cases the inheritance not working.

A common example is the `<a>` tag color.

In Chrome, base on the `user-agent stylesheet`, `<a>` tag has default blue color

```jsx
a {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}
```

And even if we do like that, the `color: -webkit-link` is still here.

```jsx
<p style="color: red;">
  This paragraph with a <a href="#">red</a> link!
</p>
```

If we really looking into this case, it's kind of confusing, the color `-webkit-link` doesn't have `!important` but still override the `red` color.

To fix this issue, we can use:

```jsx
a {
  color: inherit;
}
```

That'll fix the inherit problem, and the `a` tag is now inheritable.


CSS Built-in declarations and inheritance.

CSS Inheritance


When I decided to switch from a Back-end developer to a Front-end developer, I was attracted by React.js and JS ecosystem.
But now, after 1.5 years in Front-end, I realized that Front-end is not just about JS; it also includes CSS, HTML, Accessibility, etc. We all know that, but most of us focus on JS, me too. But lately, I do feel that my CSS skills are not enough. I believe many JS developers feel the same way as me at some point in their careers.
We all know CSS enough to make a website, but we do not understand it. If we need something, copy from Stackoverflow, and that's it. That way is the same as _we don't know JS_ when we start learning it.

So I decided to take a deep dive into CSS and first go with CSS terminology. Even it is just some most common terms, I believe not everyone knows, and myself included, the below terms also has something that I didn't know before.

## CSS Hello world

```css
.error-text {
  color: red;
}
```

This code is just a simple CSS code. Everyone is comfortable with it.
But there is something that you and I may don't know.
Let's start by playing some questions.

## What is property in this code?

```css
p {
  margin: 32px;
}
```

Take some time to guess it.
And the answer is `margin`.

> Properties in CSS are the attributes you can specify values for, like "color" and "font-size".

## Next, what is selector?

```css
.apple {
  background-color: red;
  border-radius: 50%;
}
```

This is easy for any JS developer, we select elements a lot. The answer is: `.apple`.

> A selector is a descriptor that lets you target specific elements on the page. In this case, we're selecting all nodes with the “apple” class.

Another sample:

```css
h1 {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
```

And yes, it's `h1`. In this case, we're selecting all 'h1' tags _(though a page should generally only have one h1!)_

## What is the first declaration in this code?

```css
.code-snippet {
  padding: 32px;
  white-space: pre-wrap;
}
```

It's another hard question for me. I even don't know that CSS has the term `declaration`.
But turns out, it is `padding: 32px;`.

> A declaration is a combination of a property and a value. In this case, the first declaration has a property of "padding", and a value of "32px".

## What is the rule?

```css
p {
  color: red;
  font-family: sans-serif;
}
```

Well, I also don't know what is `rule` is in CSS.
The answer will be all of the above CSS.

> A rule, also known as a style, is a collection of declarations, targeting one or more selectors. A stylesheet is made up of multiple rules.

## What is the unit in CSS?

```css
p {
  padding-top: 24px;
}
```

That you will know, it's `px`.

> Some values have units, like px, %, or em. In this case, our padding-top has a value of 24px, which is measured in the "px" unit.

---

Below are 2 more questions to test your knowledge.

## Select the second declaration below

```css
main {
  max-width: 65ch;
  margin: 0 auto;
}
```

the second declaration is `margin: 0 auto;`

## Select the first rule below

```css
p {
  font-size: 1rem;
}
.big-paragraph {
  font-size: 1.25rem;
  font-weight: 500;
}
```

the first block is the first rule.

---

That was some first knowledge when I re-learn CSS. More in the next section 🤔


Some of the most common terms used in CSS, but not all of us familiar with them.

CSS Terminology


A list of my favourite tools that I use on a regular basis.

- VSCode
- iTerm2
- Notion
- Figma
- Spotify
- Swish
- Grammarly


My Tools


I created this blog to test, how and what the content will show after it's rendered on the web.
So, let check it.

# Heading 1

## Heading 2

### Heading 3

Normal text, of course

**Can we render a bold text?**
_And Italic_

a link [google](https://google.com)

images
![vertical](https://images.unsplash.com/photo-1633836449153-43a5aa4b1559?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80)

![square](https://images.unsplash.com/photo-1633544325196-bcf8bf81ead0?auto=format&fit=crop&w=1480&q=80)

![beautiful](https://images.unsplash.com/photo-1511300636408-a63a89df3482?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80)

Now, the most waited, code block
Inline code block: `const x = 1`
Multiline code block:

```js highlight=2
function add(a, b) {
  return a + b
}
```

A list I think:

- first
- second

And the a list with number:

1. 1st
2. 2nd

Breaker

---

some icon from my mac: 🙄😀🐧🐢

block quote:

> hello world

Ok, we're good ✅
