Digest | 机器学习:逆向传播, UI设计色彩指南, SEO术语, 写作建议

>  2021年06月11日信息消化

### 每天学点机器学习

#### Week5 Backpropagation Intuition

[Backpropagation Intuition](https://www.coursera.org/learn/machine-learning/supplement/v5Bu8/backpropagation-intuition)

回顾一下，神经网络的成本函数是, Recall that the cost function for a neural network is:

$$
J(Θ)=−\frac{1}{m}∑_{t=1}^m∑_{k=1}^K[y^{(t)}_k log(hΘ(x^{(t)}))_k+(1−y^{(t)}_k) log(1−h_Θ(x^{(t)})_k)]+\frac{λ}{2m}∑_{l=1}^{L−1}∑_{i=1}^{sl}∑_{j=1}^{sl+1}(Θ^{(l)}_{j,i})^2
$$

如果我们考虑简单的非多类分类（k = 1），不考虑正则化，那么成本的计算方法是，If we consider simple non-multiclass classification (k = 1) and disregard regularization, the cost is computed with:

$$
cost(t) = y^{(t)}log(h_\theta(x^{(t)})) + (1-y^{t})log(1-h_{\theta}(x^{(t)}))
$$

Intuitively, $\delta_j^{(l)}$ is the "error" for $a^{(l)}_j$ (unit j in layer l). More formally, the delta values are actually the derivative of the cost function:

$$
\delta_j^{(l)} - \frac{∂}{∂z^{(l)}_{j}}cost(t)
$$

Recall that our derivative is the slope of a line tangent to the cost function, so the steeper the slope the more incorrect we are. Let us consider the following neural network below and see how we could calculate some $\delta_j^{(l)}$

![img](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/uPic/qc309rdcEea4MxKdJPaTxA_324034f1a3c3a3be8e7c6cfca90d3445_fixx.png)

$Θ_{12}^{(2)}$, $Θ_{ij}^{(l)}$

`(l)`: layer, ` i`: next unit? ,`j` :unit

### How to be a better writer

https://slite.com/blog/a-great-manager-is-a-great-writer

???? Use "you" instead of "I". Every time you use the word "you" it sets off a small shock in your reader's brain, telling them to pay attention (or something like that, not a scientist).

???? Search for words that end in "ly" and delete them, they are adverbs. Much like flavor-enhancing MSG, an adverb will leave a reader dizzy, bloated, and feeling sleepy in the head.

???????? Write for yourself. A reader can tell when a writer is fudging it, or when something was a slog to write. Plus, there's a genuine sense of pleasure that's communicated between the lines of an honest piece of writing.

### A Beginner’s Guide to Applying Color in UI Design

https://georgefrancis.dev/writing/a-beginners-guide-to-applying-color-in-ui-design/

Is color theory getting you down? Are you tired of the same old preset palettes? Sick of hitting “regenerate” on a magical color palette creator?

Don’t worry, we’ve all been there…

This post hopes to be your virtual guide up the mystical mountain of color. By the time you reach the top, you will have all the skills you need to create beautiful, coherent palettes.

Sound OK? Let’s set off for basecamp.

色彩理论是否让你感到沮丧？你是否厌倦了老一套的预设调色板？厌倦了在一个神奇的调色板创造者上点击 "再生"？

别担心，我们都经历过......

这篇文章希望能成为你在神秘的色彩之山上的虚拟指南。当你到达山顶时，你将拥有创造美丽、连贯的调色板所需的所有技能。

听起来不错吧？让我们出发去大本营。

***Tip:** on macOS, you can open an emoji keyboard with `ctrl + cmd + space`. On Windows, you can open one with `windows/start + .`*

#### Twemoji

The starter CodePen comes with [Twemoji](https://twemoji.twitter.com/) built in to make choosing a product image as easy as possible. If you change the emoji in card__img, Twemoji will replace it with a high-res SVG version.

#### Working with HSL

When working with color, I always reach for HSL. To me, it is the most intuitive way of representing colors in the browser. We will be using HSL throughout this tutorial, too, so here’s a quick primer…

HSL stands for **hue, saturation, lightness**.

**Hue** is the angle of rotation *(in degrees)* on a color wheel for a particular color. In the browser, red sits at 0 degrees. Here’s an example:

在处理颜色时，我总是使用HSL。对我来说，它是在浏览器中表示颜色的最直观的方法。在本教程中，我们也将使用HSL，所以这里有一个简单的入门知识......

HSL是色相、饱和度、亮度的缩写。

色相是指某一特定颜色在色轮上的旋转角度（单位：度）。在浏览器中，红色位于0度。这里有一个例子。

![A color wheel, 12 colors](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/f2f5dedc-1280.jpeg)

**Saturation** is how “intense” a color is. A lower saturation will appear more grey, a higher saturation more vibrant:

饱和度是一种颜色的 "强度"。较低的饱和度会显得更灰暗，较高的饱和度则更鲜艳。

![A range of colors with different saturation values, ranging from greyed-out to vibrant](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/ffff9726-1280.jpeg)

**Lightness** is how close to black or white the color is. A value of 0% lightness will always appear black, a value of 100% will always appear white:

明度是指颜色接近黑色或白色的程度。0%的亮度值将总是显示为黑色，100%的值将总是显示为白色。

![A range of colors with different lightness values, ranging from dark to light](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/4baf69f9-1280.jpeg)

We write HSL colors in CSS like this:

```css
p {
    color: hsl(0, 100%, 50%)
}
```

#### Designing in grayscale

My personal preference when creating a design is to always start with shades of gray. By holding the color until the end, we can focus on our typography, spacing, and content.

在创作设计时，我个人的偏好是总是从灰色的阴影开始。通过将颜色保留到最后，我们可以专注于我们的排版、间距和内容。

You may notice in the starter CodePen that there are only two colors, black and white. This isn’t quite enough to design with, so we need to add some more. Let’s not start throwing colors in at random, though…

你可能会注意到，在起步阶段的CodePen中，只有两种颜色，黑色和白色。这对于设计来说是不够的，所以我们需要增加一些。不过，我们不要开始随意扔颜色......

#### Defining the shades of gray

A good practice when working with color is to define a system up-front. For very small projects like this one, 5 shades of each color should be enough. For larger projects, 9 - 10 shades are best.

If you check out the [Tailwind](https://tailwindcss.com/docs/customizing-colors) and [Material UI](https://material-ui.com/customization/color/#color) documentation you can observe this pattern in the wild.

To work out some initial shades, let’s use a method based on [this article](https://refactoringui.com/previews/building-your-color-palette/) by the Refactoring UI folks.

在处理色彩问题时，一个好的做法是预先确定一个系统。对于像这样的小型项目，每种颜色的5个色调就足够了。对于大型项目来说，9-10种色调是最好的。

如果你查看一下Tailwind和Material UI的文档，你可以在野外观察到这种模式。

为了计算出一些最初的色调，让我们使用一种基于Refactoring UI朋友的这篇文章的方法。

**1. Choose a middle/base shade -** There are no set rules here, but try not to go too light or dark. For grays, a lightness of around **40 / 50** is a good start. I like to make sure this shade has enough contrast for use with text *(more on this a little later)*

1. 选择一个中间/基础色调 - 这里没有固定的规则，但尽量不要太亮或太暗。对于灰色来说，40/50左右的明度是一个好的开始。我喜欢确保这个色调有足够的对比度，以便与文本一起使用（稍后会有更多关于这一点的内容）。

**2. Choose the darkest and lightest shades -** Again, there are no right or wrong answers here. I’m using a lightness value of **10** for my darkest color and **96** for my lightest:

2. 选择最深和最浅的色调 - 同样，这里没有正确或错误的答案。我对最深的颜色使用10的明度值，对最浅的颜色使用96的明度值。

**3. Fill in the gaps -** Finally, choose two more shades that sit between the middle and darkest / lightest colors. The lightness values I have chosen for these two shades are **25** and **85**, respectively.

3. 填补空白 - 最后，再选择两个位于中间和最深/最浅颜色之间的色调。我为这两个色调选择的明度值分别为25和85。

![5 gray circles, their colors moving from light to dark](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/4e8ac449-1280.jpeg)

After following the steps above, you should have a rough grayscale palette all set up. This will change over time and likely need some tweaking as you work with it, but it’s perfect for now.

Again, I encourage you to make these shades your own. You don’t need to copy the above example exactly, but it should provide a good reference as you build your own palette.

按照上面的步骤，你应该有一个粗略的灰度调色板了。这将随着时间的推移而改变，并且在你使用它时可能需要一些调整，但现在已经很完美了。

再次，我鼓励你把这些色调变成你自己的。你不需要完全复制上面的例子，但它应该为你建立自己的调色板提供一个很好的参考。

##### Applying the shades of gray

```css
:root {
  --gray-100: hsl(0, 0%, 10%);
  --gray-200: hsl(0, 0%, 25%);
  --gray-300: hsl(0, 0%, 46%);
  --gray-400: hsl(0, 0%, 83%);
  --gray-500: hsl(0, 0%, 96%);

--white: hsl(0, 0%, 100%);
}
```

First, let’s make the card’s description our **second darkest** gray. This will leave enough room “either side” to create a visual hierarchy for our headers and meta text.

首先，让我们把卡片的描述变成第二种最深的灰色。这将为 "两侧 "留下足够的空间，以便为我们的标题和元文本创建一个视觉层次。

```css
.card__description {
  color: var(--gray-200);
}
```

Next, we can now make our card title our **darkest** shade of gray. I often like to set headings a little darker in shade than other text elements to help them stand out.

```css
.card__title {
  color: var(--gray-100);
}
```

To further build our hierarchy, let’s push the card’s “meta” text back a little by making it our **middle** gray shade. We can also make the little dot our **second-to-lightest** gray:

```css
.card__meta {
  color: var(--gray-300);
}

.card__meta:before {
  background: var(--gray-200);
}
```

Looking good! From here, we can style up our “primary” and “secondary” buttons using an assortment of shades:

```css
.card__btn {
  background: var(--gray-100);
  color: var(--white);
}

.card__btn--outline {
  background: var(--white);
  color: var(--gray-200);
  border: 1px solid var(--gray-400);
}
```

Finally, we can set our image background to our **lightest** shade of gray, and the little heart icon to the **middle**:

```css
.card__img-wrapper {
  background: var(--gray-500);
}
.card__heart {
  color: var(--gray-300);
}
```

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

Through using *only shades of gray* we have established a clear visual hierarchy. Important elements such as the product title are darker and more prominent. Less important elements are lighter and less prominent.

Compared to the original black and white design, there is a lot more order to the card’s layout. Before, every element was fighting for your eye’s attention. Now, everything sits in its own space.

通过只使用深浅不一的灰色，我们建立了一个清晰的视觉层次结构。重要的元素，如产品标题，颜色更深，更突出。不太重要的元素则比较浅，也不太突出。

与原来的黑白设计相比，卡片的布局更加有序。以前，每一个元素都在争夺你的眼睛的注意力。现在，一切都在自己的空间里。

#### A note on accessibility - check your contrast

When applying color, particularly to text elements, be wary of contrast. Contrast, or perceived “luminance”,  is the difference in brightness between two colors.

在应用色彩时，特别是对文本元素，要警惕对比度。对比度，或被认为是 "亮度"，是两种颜色之间的亮度差异。

When working on the web, we must always hit *at least* [WCAG AA color contrast guidelines](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). This means:

- A ratio of at least **4.5:1** for regular text elements
- A ratio of at least **3:1** for large text elements *(usually around 18.5px and bold, or 24px with a regular weight)*
- A ratio of at least **3:1** for graphical objects and UI components *(the border on a text-input, for example)*

当在网络上工作时，我们必须始终至少达到WCAG AA色彩对比准则。这意味着。

- 普通文本元素的比例至少为4.5:1
- 大型文本元素的比例至少为3:1（通常为18.5px和粗体，或24px的普通重量）。
- 图形对象和用户界面组件的比例至少为3:1 *（例如，文本输入的边框）*。

There are many methods available for checking color contrast in your designs. For testing a whole page, I like to use Chrome’s [lighthouse](https://developers.google.com/web/tools/lighthouse) that runs straight from dev-tools. For checking individual colors, I like [this excellent tool](https://colourcontrast.cc/) from [Alex Clapperton](https://twitter.com/alexmclapperton).

In time, you will find your own way of checking contrast that best fits your workflow. For a start, though, these will work great.

有很多方法可以用来检查你的设计中的颜色对比。对于测试整个页面，我喜欢使用Chrome的灯塔，它直接从dev-tools中运行。对于检查个别颜色，我喜欢Alex Clapperton的这个优秀工具。

随着时间的推移，你会找到你自己的检查对比度的方法，最适合你的工作流程。不过，作为一个开始，这些方法会很有效。

#### Choosing a personality

OK, so our product cards are looking good. By establishing a visual hierarchy, things are already looking a lot more “designed”. We have done a lot of work using *only grays*, but it’s time to add a little touch of color.

First things first, spend a moment thinking about the personality you want to convey with your UI. The personality you land on will help decide your primary/base color.

If you have chosen a diamond ring for your product image, you may want to go for a regal/exclusive personality.

If you have chosen a beach umbrella, you may want to explore a happy, vibrant personality.

There are no right or wrong answers with this so go with your gut. For my herbs, I am going for calm and natural.

好了，我们的产品卡片看起来不错。通过建立一个视觉层次，事情看起来已经有了很多 "设计"。我们已经做了很多只使用灰色的工作，但现在是时候添加一点色彩了。

首先，花点时间思考一下你想用你的用户界面传达的个性。你所确定的个性将有助于决定你的主色/基色。

如果你为你的产品形象选择了一枚钻石戒指，你可能想追求一种高贵/独特的个性。

如果你选择了一把沙滩伞，你可能想探索一种快乐、充满活力的个性。

这没有正确或错误的答案，所以随你的直觉。对于我的草药，我打算选择平静和自然。

#### Choosing a primary color + shades

When creating a color palette, I like to start with a single primary/base color. We will apply this color **the most** throughout our UI.

当创建一个调色板时，我喜欢从一个单一的主色/基色开始。我们将在整个用户界面中最多地应用这种颜色。

Keeping the personality you landed on earlier in mind, decide on a color to begin exploring. In my case, I have chosen **green**.

牢记你早先确定的个性，决定一种颜色来开始探索。在我的案例中，我选择了绿色。

There are *tons* of resources online that explore the relationship of different colors/emotions. While these are a great reference, they aren’t going to give you a definitive answer. Use them as a guide, but trust your eye. [This Wikipedia page on color psychology](https://en.wikipedia.org/wiki/Color_psychology#:~:text=Color psychology is the study,enhance the effectiveness of placebos.) is a good starting point.

网上有大量的资源来探索不同颜色/情绪的关系。虽然这些是一个很好的参考，但它们不会给你一个明确的答案。把它们作为一个指南，但要相信你的眼睛。维基百科关于色彩心理学的页面是一个很好的起点。

Once you have chosen a rough color, how you experiment is completely up to you. Some like to work in a graphics editor such as Figma/Sketch, whilst others like to work in the browser.

一旦你选择了一个粗略的颜色，你如何实验完全取决于你。有些人喜欢在图形编辑器中工作，如Figma/Sketch，而其他人喜欢在浏览器中工作。

If you aren’t sure, fire up a new CodePen, create a square in the middle of the page, and start experimenting with `hsl()`.

…

如果你不确定，可以启动一个新的CodePen，在页面中间创建一个正方形，然后开始尝试使用hsl()。

Stuck? Don’t worry!

I know, choosing a primary color can feel like an impossible task. Even after narrowing things down to an approximate hue, there are thousands of options. How on earth do you choose one?

我知道，选择一个主色调可能感觉是一项不可能完成的任务。即使把范围缩小到一个近似的色调，也有成千上万的选择。你到底该如何选择呢？

If you find yourself getting a little lost at color sea, I recommend trying out the following:

- Research some brands/sites you like and use dev-tools or [an extension](https://www.colorzilla.com/) to inspect their palette. In particular - examine how they set the saturation and lightness for their primary/base color. This should help you get in the right ballpark for yours.

研究一些你喜欢的品牌/网站，并使用dev-tools或一个扩展来检查他们的调色板。特别是--检查他们是如何设置主色/基色的饱和度和亮度的。这应该可以帮助你在你的调色板上找到正确的方法。

- Choose a painting or photograph you like. Use a browser extension to extract its colors in the same way as above. This can be a fantastic source of inspiration if you hit a wall!

选择一幅你喜欢的画或照片。使用浏览器扩展，以上述同样的方式提取其颜色。如果你遇到困难，这可能是一个绝妙的灵感来源。

- Try a color generator such as [coolors.co](https://coolors.co/), or check out a design resource such as [colors.cafe](https://twitter.com/colours__cafe). Whilst I don’t recommend using a generator or preset palette for your *whole* color scheme… they could help you find a great primary/base color to start with.

试试颜色生成器，如coolors.co，或查看设计资源，如color.cafe。虽然我不建议在整个色彩方案中使用生成器或预设调色板......但它们可以帮助你找到一个伟大的主色/基色来开始使用。

For my primary color, I have landed on this shade of green:

- personality: natural/calm
- enough contrast

![5 green circles, their colors moving from light to dark](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/e89e5608-1280.jpeg)

***Note:*** *darker shades often need more saturation, whilst lighter shades often need a little less.*

注意：较深的色调往往需要更多的饱和度，而较浅的色调往往需要少一点。

#### Applying the primary/base color

Awesome. We now have each have a unique primary/base color + shades to apply to our product card. Although we have 5 exciting shades to choose from, we only need to apply *touches* of color. Remember, our grays can do most of the work.

To get started, place your primary/base color shades into your CSS in the same way as your grays:

```css
:root {
  --green-100: hsl(152, 100%, 8%);
  --green-200: hsl(152, 100%, 16%);
  --green-300: hsl(152, 100%, 25%);
  --green-400: hsl(152, 50%, 50%);
  --green-500: hsl(152, 50%, 96%);
}
.card__btn {
  background: var(--green-300);
  color: var(--green-500);
}
.card__img-wrapper {
  background: var(--green-500);
}
.card__meta:before {
  background: var(--green-400);
}
```

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

#### Tinted grays

A great tip for making the colors in your UI feel more coherent, is to add a hint of your primary/base color to your grays. You will want to keep this subtle. Darker shades can take more of a tint than lighter shades.

要使你的用户界面的颜色感觉更协调，一个很好的建议是在你的灰色中添加一丝你的主色/基色。你将希望保持这种微妙的效果。较深的色调可以比较浅的色调更多地使用这种色调。

For my color choices, that looks something like this:

对于我的颜色选择，看起来是这样的。

```css
:root {
  --gray-100: hsl(152, 45%, 10%);
  --gray-200: hsl(152, 25%, 25%);
  --gray-300: hsl(152, 10%, 40%);
  --gray-400: hsl(152, 10%, 83%);
  --gray-500: hsl(152, 10%, 96%);
}
```

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

#### Expanding your palette

At this point, our product card is almost complete. We have achieved a lot with only 5 shades of a primary/base color, and 5 shades of gray. For our small design, this is almost enough. For larger projects, you are likely going to need more.

在这一点上，我们的产品卡几乎已经完成。我们只用了5种深浅不一的主色/基色和5种深浅不一的灰色，就取得了很大的成就。对于我们的小设计来说，这几乎足够了。对于大型项目，你可能需要更多。

Combining colors and building color palettes deserves an entire post all to itself. For our basic design, though, let’s explore a simple way to add 1 more color to our UI…

组合颜色和建立调色板的问题值得单独写一篇文章。不过，对于我们的基本设计来说，让我们探索一种简单的方法，为我们的用户界面增加一种颜色......

Remember the color wheel from earlier? This is going to be our new best friend when it comes to finding colors that work together.

还记得前面的色轮吗？当涉及到寻找一起工作的颜色时，这将是我们最好的新朋友。

By starting at our base color hue, and rotating 180 degrees, we will reach our base’s *complimentary* hue. You can pretty much guarantee that this hue and your primary/base hue will work great together!

从我们的基色色相开始，旋转180度，我们就可以达到我们的基色的互补色相。你几乎可以保证这个色相和你的主色/基色会很好地结合在一起!

Here’s a visualization:

这里有一个可视化的例子。

![12 colors in a circle/wheel with two opposite colors highlighted](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/ae32df21-1280.jpeg)

For me, the complementary hue is a maroon color. For you, it could be anything! To achieve this in CSS, just add 180 to your primary/base hue value.

对我来说，互补的色调是栗色。对你来说，它可以是任何东西 要在CSS中实现这一点，只需在你的主色调/基础色调值上加上180。

*Note, in CSS hsl(), numbers above 360 will simply “wrap” back around to 0, so don’t worry about doing any fancy calculation. Adding 180 to your base hue is all you need.*

注意，在CSS hsl()中，超过360的数字会简单地 "包 "回0，所以不用担心做任何花哨的计算。在你的基本色调上加上180就够了。

Boom! That’s it. From here, you can follow the same pattern we used before to create 5 shades. For me, that looks like this:

砰！"。这就是了。从这里开始，你可以按照我们之前使用的相同模式来创造5种色调。对我来说，这看起来像这样。

![5 maroon circles, their colors ranging from light to dark](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/9f5e40c3-1280.jpeg)

Once you have defined your shades, you can add them as custom properties and apply them how you wish. For me, I am going to use my new complementary shades to add some color to the “like” button

一旦你定义了你的色调，你可以把它们作为自定义属性添加，并以你希望的方式应用它们。对我来说，我将使用我的新的互补色调来为 "喜欢 "按钮添加一些颜色。:

```css
.card__heart {
  color: var(--maroon-300);
  fill: var(--maroon-500);
}
```

### 每个人都需要知道的基本SEO术语

原文：[SEO Glossary: The Basic Terms Everyone Need

[s To Know](https://serpstat.com/blog/seo-glossary/#seo)

### Basic SEO Terms

- **SEO**(Search Engine Optimization) is a set of actions aimed at optimizing and promoting a site, and also increasing its position in search results.

- **On-Page SEO** is about internal optimization. There are actions aimed at improving the site to increase its position: collecting the semantic core, improving the structure of the site, implementing internal linking, eliminating technical problems, improve usability, increasing the relevance of pages, optimization of multimedia.

- **Off-page SEO** is working on developing a site's link profile and getting backlinks from external resources. Off-page optimization includes registration in search engines and directories, obtaining links form high-quality resources, link exchange, activity on thematic forums, posting viral material( which users will share).

- **Search Engine** consists of a search robot that collects data, an indexer that finds what is needed from the collected information, and search engine (graphical interface). The most frequently7 used system are Google, Yahoo, Bing, Yandex, etc.

- **Scanning** (or crawling web pages) is the process of identifying new pages on the Internet and updating the information on those already indexed,  perfored by the Google bots. The basis for crawling is a Sitemap - a file containing all the pages of a site created for search engines.

- **SERP** (Search Engine Results Page) is a page displaying the results of a search query, the page of search results. When analyzing SERPs, it is important to take into account link and text factors, the type of content, the complexity of the keyword that hits the top, and also be able to analyze the search results themselves correctly.

- **Indexing** is process when a search engine bot adds the resource information to the search engine's database. Checking the indexing of pages is necessary so that the webmaster is aware of how robots crawl the site, whether errors occurs.

**索引**是搜索引擎机器人将资源信息添加到搜索引擎数据库的过程。检查页面的索引是必要的，这样网站管理员就能知道机器人是如何抓取网站的，是否发生错误。

- **Ranking factors** are the criteria applied by search engines when evaluating pages to compile the rankings of their search results. In 2021, it is essential to consider the Core Update factor, namely, such ranking factors as link authority, thematic reputaiton, subject matter expertise, and use engagement.

**排名因素**是搜索引擎在评估网页以编制其搜索结果的排名时所应用的标准。在2021年，必须考虑核心更新因素，即链接权威性、主题声誉、主题专业性和使用参与度等排名因素。

- **SERM** (Search Engine Reputation Management) is a technique aimed at managing the reputation of a website on the network; it identifies the factors affecting the reputation of a bussiness structure or individual. To successfully promote your page on the web, you need to learn how to conduct a SERM audit to analyze search queries by keywords and visually correctly, as well as implement other techniques in SERM analysis.

SERM（搜索引擎声誉管理）是一种旨在管理网站在网络上的声誉的技术；它可以确定影响商业结构或个人声誉的因素。为了成功地在网络上推广你的网页，你需要学习如何进行SERM审计，按关键词和视觉上正确地分析搜索查询，以及实施SERM分析中的其他技术。

- Search robot/Crawler

- Relevance

- Intent

- Ranking

- Assessor

- Snippet

- Friendly URL

- Vertical search

- Sales funnel

- Competitor analysis

- Parsing

- Google My Business

- Google PageSpeed Insights

- Cannibalization

- Black Hat, White Hat

- Blocker, Cookies

### 一点收获

- [selfhostedpro/yacht](https://github.com/selfhostedpro/yacht) A decentralized app store for servers
- The Three Stages of Entrepreneurship
  - 1) **Hustle**: You do all the hard work yourself.
  - 2) **Management**: Hire people to do the things you used to do.
  - 3) **Operationalizing**: Build systems and codify your decision-making principles so the company can run without your involvement.
- 今天NTT mastersone 故障，紧急用goproxy代理+chrome plugin的方式搭了外部访问。网络知识虽难，但可以救人.....