Digest | CSS核心概念 (flexbox:align,justify), cubic-bezier曲线

>  2021年07月15日信息消化

### 每天学点Golang

#### Essential CSS concepts every designer should know

原文：[Essential CSS concepts every designer should know](https://uxdesign.cc/essential-css-concepts-every-designer-should-know-f8295497c5ae)

#### Flexbox (distribution)

###### Align: Direction (stack)

*In CSS, this is called the* `*flex-direction*` *property and accepted values are* `*row | row-reverse | column | colum-reverse*`

![Animation showing flexbox directions in a mock user interface.](https://miro.medium.com/max/1400/1*MmmdO49MDi5HMYK4K6x0vQ.gif)

###### Align: Start, Center, End

###### Justify: Start, Center, End

![Animation showing flexbox justifications in a mock user interface.](https://miro.medium.com/max/1400/1*NYf4-cL8zbSSDDRkjN1nVg.gif)

###### Justify on steroids: Space-between, Space-around, Space-evenly

![Animation showing additional flexbox justifications in a mock user interface.](https://miro.medium.com/max/1400/1*hoX8-fYnxMTCIaibd3i38Q.gif)

![Animation showing flexbox directions and justifications in a mock user interface.](https://miro.medium.com/max/1400/1*G_lGZxZXzGjxZL3njyIxLA.gif)

### Build Complex CSS Transitions using Custom Properties and cubic-bezier()

[Build Complex CSS Transitions using Custom Properties and cubic-bezier()](https://css-tricks.com/build-complex-css-transitions-using-custom-properties-and-cubic-bezier/?ref=sidebar)

##### The main idea

```css
@property --d1 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --d2 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.box {
  top: calc((var(--d1) + var(--d2)) * 1%);
  transition:
    --d1 1s cubic-bezier(0.7, 1200, 0.3, -1200),
    --d2 1s cubic-bezier(0.5, 1200, 0.5, -1200);
}
.box:hover {
  --d1: 0.2;
  --d1: -0.2;
}
```

We’re defining two custom properties, `--d1` and `--d2`. Then, we declare the `top` property on a `.box` element `elemento` using the sum of both those properties. Nothing overly complex yet—just `calc()` applied to two variables.

The two properties are defined as `<number>` and I multiply those values by 1% to convert them into a percentage. We could define these as `<percentage>` right away to avoid the multiplication. But I’ve chosen numbers instead in favor of more flexibility for more complex operations later.

Notice that we apply a different transition to each variable—more precisely, a different `timing-function` with the same duration. It’s actually a different *sinusoidal curve* for both variables which is something I get deep into in my [previous article](https://css-tricks.com/advanced-css-animation-using-cubic-bezier/).

> [Advanced CSS Animation Using cubic-bezier()](https://css-tricks.com/advanced-css-animation-using-cubic-bezier/)
>
> *A cubic Bézier easing function is a type of* [easing function](https://drafts.csswg.org/css-easing-1/#easing-function) *defined by four real numbers that specify the two control points, P1 and P2, of a cubic Bézier curve whose end points P0 and P3 are fixed at (0, 0) and (1, 1) respectively. The x coordinates of P1 and P2 are restricted to the range [0, 1].*

https://www.youtube.com/watch?v=pnYccz1Ha34

![image-20210715214248998](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/image-20210715214248998.png)

cubic-bezier(P0, P1, P2, P3);

P0与P2本来是确定的起点与终点：0,0，1,1

Our goal is to move `(1,1)` and make it at `(0,1)` which isn’t technically possible. So we will try to fake it.

We previously said that our range is `[0 1]` (or `[0% 100%]`)

```css
i.start {
  animation:
    x 2s linear infinite alternate,
    y 2s infinite cubic-bezier(0,500,1,500);
}
```

A cubic bezier can be defined using the following formula:

```mathematica
P = (1−t)³P0 + 3(1−t)²tP1 + 3(1−t)t²P2 + t³P3
```

Each point is defined as follows: `P0 = (0,0)`, `P1 = (0,V)`, `P2 = (1,V)`, and `P3 = (1,1)`.

This gives us the two functions for x and y coordinates:

- `X(t) = 3(1−t)t² + t³ = 3t² - 2t³`
- `Y(t) = 3(1−t)²tV +3(1−t)t²V + t³ = t³ - 3Vt² + 3Vt`

`V` is our big value and `t` is within the range `[0 1]`. If we consider our previous example, `Y(t)` will give us the value of `top` while `X(t)` is the time progress. The points `(X(t),Y(t))` will then define our curve.

Let’s find the maximum value of `Y(t)`. For this, we need to find the value of `t` that will give us `Y'(t) = 0` (when the derivative is equal to `0`):

```mathematica
Y'(t) = 3t² - 6Vt + 3V
```

`Y'(t) = 0` is a quadratic equation. I will skip the boring part and will give you the result, which is `t = V - sqrt(V² - V)`.

When `V` is a large value, `t` will be equal to `0.5`. So, `Y(0.5) = Max` and `X(0.5)` will be equal to `0.5`. That means we reach the maximum value at the halfway point in the animation, which conforms to the parabolic curve we want.

Also, `Y(0.5)` will give us `(1 + 6V)/8` and this will allow us to find the max value based on `V`. And since we will always use a big value for `V`, we can simplify to `6V/8 = 0.75V`.

We used `V = 500` in the last example, so the max value there would come out to `375` (or `37500%`) and we get the following:

![Three graphs from left to right, showing how the sinusoidal curve gets narrower as the V value increases.](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/s_2F833027948B591FD3C0F13442F268753758E2B2D0DF52CE3CF13FC150D8939B_1619179387250_image.png)

#### Five Advanced Git Concepts that Make You Look Like a Pro

原文： [Five Advanced Git Concepts that Make You Look Like a Pro](https://livecodestream.dev/post/five-advanced-git-concepts-that-make-you-look-like-a-pro/)

#### find bugs with bisect

```bash
#  When you provide a known “good” commit and “bad” commit, it uses binary search to reach the first problematic commit in the least amount of time.
git bisect start
# As soon as you run git bisect bad, it checks out the commit at the midpoint between good and bad commits, allowing you to review it. If the tests are still failing in the checked-out commit,
git bisect good <good-commit-ref>
git bisect bad <bad-commit-ref>
# You can stop the bisect operation and go to the final commit using,
git bisect reset
```

git cherry-pick

```bash
# If you want to just stage the changes to this branch without committing them, you should use:
git cherry-pick <commit-ref> --no-commit
```

### 其他值得阅读

#### Typesense | The unreasonable effectiveness of just showing up everyday

原文：[The unreasonable effectiveness of just showing up everyday](https://typesense.org/blog/the-unreasonable-effectiveness-of-just-showing-up-everyday/)

> HN Comment 
>
> https://news.ycombinator.com/item?id=27833064
>
> It's a collection of daily routines of many famous and prolific artists. The surprising thing about so many of the artists is that they only work 2 or 3 hours per day, then spend the rest of the day walking around, socializing, etc. But they consistently show up and put in the work and it adds up to some amazing things over time.
>
> This reminds me of another great book about beating procrastination**: The Now Habit: A Strategic Program for Overcoming Procrastination and Enjoying Guilt-Free Play**[2]

**If you want to find some modest success and independence by launching your own product,** and wished to do so without too much risk, I invite you to try this playbook:

> **Pick an idea in a large market that will always be in demand and work on a product that caters to a subset of use cases exceedingly well.**

By choosing an idea that is not a fad and doing so in a large and preferably growing market, you can afford to take a much slower route. As long as you keep plugging away at the problem, at some point, you will have enough of a product to start charging for it.

![Don't give up.](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/uPic/progress_graph.png)

✨ Here are a couple of **live demos** that show Typesense in action on large datasets:

- Search a 32M songs dataset from MusicBrainz: [songs-search.typesense.org](https://songs-search.typesense.org/)
- Search a 28M books dataset from OpenLibrary: [books-search.typesense.org](https://books-search.typesense.org/)
- Search a 2M recipe dataset from RecipeNLG: [recipe-search.typesense.org](https://recipe-search.typesense.org/)
- Search 1M Git commit messages from the Linux Kernel: [linux-commits-search.typesense.org](https://linux-commits-search.typesense.org/)
- Spellchecker with type-ahead, with 333K English words: [spellcheck.typesense.org](https://spellcheck.typesense.org/)
- An E-Commerce Store Browsing experience: [ecommerce-store.typesense.org](https://ecommerce-store.typesense.org/)

### 一点收获or有趣的事

- [The Beauty of Blood Flow Analysis](https://www.youtube.com/watch?v=JIKJjcbVK2w)
  - 心脏搏动可视化粒子图。
- [laynH/Anime-Girls-Holding-Programming-Books](https://github.com/laynH/Anime-Girls-Holding-Programming-Books)
  - 再次印证程序员中二次元泛滥说。
- [Monodraw](https://monodraw.helftone.com/)
  - 看上去感觉非常好用的ASCII Art编辑器。