有如下可选值:

css
Copy Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: unset;

Relate to 张鑫旭的 blog

可以用于实现不连续的动画

Relate to stackoverflow

一些 demo 仅供参考 demo1 demo2

Relate to https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work

• You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected
• 父元素的 display: flex / overflow 属性，等会使其无效

使用 float: left 浮动元素
又导致了一个问题 子元素无法把父元素撑开

Relate to https://blog.csdn.net/xiaobing_hope/article/details/50296009

在最后一个浮动子元素后面添加一个空的div，并清除其浮动

html
Copy Code
1
2
3
4
5
<div style="float: left" class="div0">
    <div class="div1" style="float: left;"></div>
    <div class="div2" style="float: left;"></div>
    <div style="clear:both;"></div>
</div>

Relate to https://ishadeed.com/article/position-sticky-css-grid/

demo: https://codepen.io/shadeed/pen/VwzGpRa
其实之前链接已经有较好的解决方案了 https://stackoverflow.com/a/66966273/12583084, 我却没看到, 并不需要那么多 hack 。

Queries Per Second，每秒查询数。每秒能够响应的查询次数。

QPS 是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准，在因特网上，作为域名系统服务器的机器的性能经常用每秒查询率来衡量。每秒的响应请求数，也即是最大吞吐能力。

Transactions Per Second 的缩写，每秒处理的事务数目。一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。客户机在发送请求时开始计时，收到服务器响应后结束计时，以此来计算使用的时间和完成的事务个数，最终利用这些信息作出的评估分。

TPS 的过程包括：客户端请求服务端、服务端内部处理、服务端返回客户端。

例如，访问一个 Index 页面会请求服务器 3 次，包括一次 html，一次 css，一次 js，那么访问这一个页面就会产生一个 “T”，产生三个 “Q”。

Page View 即页面浏览量，通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。用户每一次对网站中的每个页面访问均被记录 1 次。用户对同一页面的多次刷新，访问量累计。

根据这个特性，刷网站的 PV 就很好刷了。

与 PV 相关的还有 RV，即重复访问者数量 Repeat Visitors。

访问数 Unique Visitor 指独立访客访问数，统计 1 天内访问某站点的用户数 (以 cookie 为依据)，一台电脑终端为一个访客。

Gross Merchandise Volume 的简称。只要是订单，不管消费者是否付款、卖家是否发货、是否退货，都可放进 GMV 。

代表吞吐率，即 Requests Per Second 的缩写。吞吐率是服务器并发处理能力的量化描述，单位是 reqs/s，指的是某个并发用户数下单位时间内处理的请求数。 某个并发用户数下单位时间内能处理的最大的请求数，称之为最大吞吐率。

这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。

参数

• url 表明 data 将要被发送到的网络地址。
• data 参数是将要发送的 ArrayBufferView 或 Blob 、DOMString 或者 FormData 类型的数据

js
Copy Code
1
navigator.sendBeacon(url, data);

返回值

• 当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。

在渲染结束之后执行

在DOM更新之后执行

Respect to when-to-use-useimperativehandle-uselayouteffect-and-usedebugvalue useLayoutEffect 在 DOM 更新之后执行。useEffect 在 render 渲染结束后执行。执行示例代码会发现 useLayoutEffect 永远比 useEffect 先执行，这是因为 DOM 更新之后，渲染才结束或者渲染还会结束。

Used in rare cases when you need to calculate the distance between elements after an update or do other post-update calculations / side-effects.

I feel like the docs do a pretty good example of explaining this one. If you have a custom hook, and you'd like to label it within React DevTools, then this is what you use.

Respect to React合成事件和DOM原生事件混用须知

jsx
Copy Code
1
2
3
4
5
6
7
8
9
const handleClick = (e) => {
    setState(e.target.value) 
    // 在 react 16 中， 因为事件复用 setState（异步） 时 e 的引用被清空。 
    //react 17 中 no event pooling。 可以直接在异步中使用 event.
} 

<button onClick={handleClick}>
  Activate Lasers
</button>

Linux 系统中的 Swap 分区，即交换分区，类似于 Windows 的虚拟内存， 其作用可简单的描述为：当系统的物理内存不够用的时候，将暂时不用的数据存放到交换空间所在的硬盘上，从而可以腾出内存来让别的程序运行。 下面将介绍通过添加 Swap 文件来设置交换分区的方式。

随便进入一个目录用于后续存放 Swap 文件，也可以直接放在根目录，这里放在 /var 目录下。

shell
Copy Code
1
cd /var

使用 dd 命令生成一个文件块，大小为自己想设置的 Swap 分区大小，这里生成一个名为 swapfile 的文件，大小设为 1G。

shell
Copy Code
1
dd if=/dev/zero of=swapfile bs=1M count=1024

将该文件设为 Swap 文件（格式化）。

shell
Copy Code
1
mkswap swapfile

激活 Swap 文件（启用虚拟内存）。

shell
Copy Code
1
swapon swapfile

检查 Swap 是否正确。

shell
Copy Code
1
swapon -s

另外为了安全建议将交换分区文件权限设为 0600 或 0644 ，执行以下命令。

shell
Copy Code
1
chmod 0600 swapfile

此时已经成功添加了交换分区，可以使用 free 之类的命令查看验证。 但这样重启后 Swap 分区会丢失，需要重新激活才行，所以我们一般在 fstab 文件为其添加开机自动挂载设置。

shell
Copy Code
1
vi /etc/fstab

在最后增加以下内容：

shell
Copy Code
1
/var/swapfile swap swap defaults 0 0

也可以直接执行如下命令来添加：

shell
Copy Code
1
echo "/var/swapfile swap swap defaults 0 0" >> /etc/fstab

首先将 Swap 文件取消激活：

shell
Copy Code
1
swapoff /var/swapfile

然后删除我们设置的 Swap 文件：

shell
Copy Code
1
rm /var/swapfile

最后再编辑 /fstab 文件删除掉自动挂载 Swap 的设置即可：

shell
Copy Code
1
vi /etc/fstab

Respect to Understanding Nginx Server and Location Block Selection Algorithms

Next, to further evaluate requests that have equally specific listen directives, Nginx checks the request’s “Host” header. This value holds the domain or IP address that the client was actually trying to reach.

Similar to the process that Nginx uses to select the server block that will process a request, Nginx also has an established algorithm for deciding which location block within the server to use for handling requests.

Location blocks generally take the following form:

nginx
Copy Code
1
2
3
4
5
location optional_modifier location_match {

    . . .

}

The modifiers below will cause the associated location block to be interpreted as follows:

• (none) : If no modifiers are present, the location is interpreted as a prefix match. This means that the location given will be matched against the beginning of the request URI to determine a match.
• = : If an equal sign is used, this block will be considered a match if the request URI exactly matches the location given. = 开头表示精确匹配，只有完全匹配上才能生效
• ~ : If a tilde modifier is present, this location will be interpreted as a case-sensitive regular expression match. ~ 开头表示区分大小写的正则匹配
• ~* : If a tilde and asterisk modifier is used, the location block will be interpreted as a case-insensitive regular expression match. ~* 开头表示不区分大小写的正则匹配
• ^~ : If a carat and tilde modifier is present, and if this block is selected as the best non-regular expression match, regular expression matching will not take place. ^~ 开头对URL路径进行前缀匹配，并且在正则之前。
• /uri : 不带任何修饰符，也表示前缀匹配，但是在正则匹配之后
• / : 通用匹配，任何未匹配到其它location的请求都会匹配到，相当于switch中的default

Another instance where the processing location may be reevaluated is with the try_files directive. This directive tells Nginx to check for the existence of a named set of files or directories. The last parameter can be a URI that Nginx will make an internal redirect to.

Consider the following configuration:

nginx
Copy Code
1
2
3
4
5
6
7
8
root /var/www/main;
location / {
    try_files $uri $uri.html $uri/ /fallback/index.html;
}

location /fallback {
    root /var/www/another;
}

nginx
Copy Code
1
2
3
location  /proxy/ {
          proxy_pass http://192.168.1.5:8090/;
}

这样，访问 http://192.168.1.23/proxy/ 就会被代理到 http://192.168.1.5:8090/ 匹配的proxy目录不需要存在根目录 /var/www/html 里面。
注意

• 终端里如果访问 http://192.168.1.23/proxy （即后面不带 "/"），则会访问失败！因为 proxy_pass 配置的 url 后面加了 "/"
• 浏览器访问 http://103.110.186.23/proxy 的时候，会自动加上 "/"（同理是由于 proxy_pass 配置的 url 后面加了 "/"），并反代到 http://103.110.186.5:8090 的结果。

nginx
Copy Code
1
2
3
location  /proxy/ {
          proxy_pass http://192.168.1.5:8090;
}

那么访问 http://192.168.1.23/proxy或http://192.168.1.23/proxy/，都会失败！
这样配置后，访问 http://192.168.1.23/proxy/ 就会被反向代理到 http://192.168.1.5:8090/proxy/

nginx
Copy Code
1
2
3
location  /proxy/ {
          proxy_pass http://192.168.1.5:8090/haha/;
}

这样配置的话，访问 http://103.110.186.23/proxy/ 代理到 http://192.168.1.5:8090/haha/

nginx
Copy Code
1
2
3
location  /proxy/ {
          proxy_pass http://192.168.1.5:8090/haha;
}

上面配置后，访问 http://192.168.1.23/proxy/index.html 就会被代理到 http://192.168.1.5:8090/hahaindex.html
同理，访问 http://192.168.1.23/proxy/test.html 就会被代理到 http://192.168.1.5:8090/hahatest.html
注意，这种情况下，不能直接访问 http://192.168.1.23/proxy/ 后面就算是默认的 index.html 文件也要跟上，否则访问失败！

nginx
Copy Code
1
2
3
location  /proxy {
          proxy_pass http://192.168.1.5:8090/;
}

nginx
Copy Code
1
2
3
location  /proxy {
          proxy_pass http://192.168.1.5:8090;
}

这样配置的话，浏览器访问 http://103.110.186.23/proxy 会自动加上 "/"（ 即变成 http://103.110.186.23/proxy/ ），代理到 http://192.168.1.5:8090/proxy/

nginx
Copy Code
1
2
3
location  /proxy {
          proxy_pass http://192.168.1.5:8090/haha/;
}

这样配置的话，浏览器访问 http://103.110.186.23/proxy 会自动加上 "/"（ 即变成 http://103.110.186.23/proxy/ ），代理到 http://192.168.1.5:8090/haha/

nginx
Copy Code
1
2
3
location  /proxy {
          proxy_pass http://192.168.1.5:8090/haha;
}

这样配置的话，浏览器访问 http://103.110.186.23/proxy ，和第三种结果一样，同样被代理到 http://192.168.1.5:8090/haha/

• stopPropagation prevents further propagation of the current event in the capturing and bubbling phases.

• preventDefault prevents the default action the browser makes on that event.

• 使用 css pointer-events: none 实现点击穿透

html
Copy Code
1
2
3
4
5
6
7
8
9
 <div class='parent' onclick='alert(`parent`)'>
   <div class='child' onclick='clickChild(event)'>child</div>
 </div>
  <script>
    function clickChild(e) {
      alert('child');
      e.stopPropagation();
    }
  </script>

• stopImmediatePropagation 如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。 如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用，还会阻止冒泡。

• 301 redirect 变成 GET请求, Moved Permanently
• 302 redirect 变成 GET请求, Temporary Redirect
• 303 redirect 变成 GET请求, 被 302 包含
• 307 redirect request method 不变, Temporary Redirect
• 308 redirect request method 不变, Permanent Redirect

Respect to On the Primitive Code, Inverse Code, Complement Code and Shift Code of Operating System and 原码, 反码, 补码 详解(博客园) and 原码、反码、补码及位操作符，C语言位操作详解

Any data exists in the form of binary machine code in a computer. The first number is used to represent the positive and negative values: 0 is positive and 1 is negative.

in the form of: 以...形式

• Original Code 原码
• Inverse Code 反码
• Complement Code 补码
• Frameshift 移码 (是一种操作,非数值表示法 移码是为了不同的特定目的而存在的，手段是移动部分或全部数位。例如上面有人提到的浮点数表示法使用的阶码，阶码是用补码表示的，但由于补码存在符号位，不利于比较，就把负数部分整个往上移动，使得最小的数是0，这样一来比较阶码的时候就不需要考虑符号位了。另一个常见的例子是补码，通过移位把反码的负0变成最小的负数。)

The value represented by machine code is called the original code.

Inverse code is generally the least useful representation of computer.
The inverse code of positive numbers is the original code itself. The inverse code of negative numbers: the number of the sign bits is the first bit remains unchanged (符号位保持不变), and the rest of the bits are reversed.
For example, if the original code of + 2 is 00000010, then the inverse code of + 2 is 00000010. The original code of – 2 is 10000010, and the inverse code is 1111101.

Complement is one of the most frequently used encoding methods in computer numerical operations.
The positive complement is the original code itself, which is the same as the inverse code. The complement of negative number is the result of it's inverse code + 1. For example, the complement of + 2 is 00000010. The complement of – 2: 11111111101 (counter code) +1 = 11111111110.

Shift code is to add a bias constant to the value. When the number of coding bits is n, it usually shifts to the N-1 power of 2. For example, the shift code of – 2 = the 7th power of the original code + 2 = 00000010 + 10000000 = 10000010, which can be used as the complement of – 2 11111110
Sign bits remain unchanged and the remaining bits are reversed + 1。

首先, 因为人脑可以知道第一位是符号位, 在计算的时候我们会根据符号位, 选择对真值区域的加减. (真值的概念在本文最开头). 但是对于计算机, 加减乘数已经是最基础的运算, 要设计的尽量简单. 计算机辨别"符号位"显然会让计算机的基础电路设计变得十分复杂! 于是人们想出了将符号位也参与运算的方法. 我们知道, 根据运算法则减去一个正数等于加上一个负数, 即: 1-1 = 1 + (-1) = 0 , 所以机器可以只有加法而没有减法, 这样计算机运算的设计就更简单了.
于是人们开始探索 将符号位参与运算, 并且只保留加法的方法. 首先来看原码:

计算十进制的表达式: 1-1=0

1 - 1 = 1 + (-1) = [00000001]原 + [10000001]原 = [10000010]原 = -2

如果用原码表示, 让符号位也参与计算, 显然对于减法来说, 结果是不正确的.这也就是为何计算机内部不使用原码表示一个数.

为了解决原码做减法的问题, 出现了反码:

计算十进制的表达式: 1-1=0

1 - 1 = 1 + (-1) = [0000 0001]原 + [1000 0001]原= [0000 0001]反 + [1111 1110]反 = [1111 1111]反 = [1000 0000]原 = -0

发现用反码计算减法, 结果的真值部分是正确的. 而唯一的问题其实就出现在"0"这个特殊的数值上. 虽然人们理解上+0和-0是一样的, 但是0带符号是没有任何意义的. 而且会有[0000 0000]原和[1000 0000]原两个编码表示0.

于是补码的出现, 解决了0的符号以及两个编码的问题:

1-1 = 1 + (-1) = [0000 0001]原 + [1000 0001]原 = [0000 0001]补 + [1111 1111]补 = [0000 0000]补=[0000 0000]原

这样0用[0000 0000]表示, 而以前出现问题的-0则不存在了.而且可以用[1000 0000]表示-128:

(-1) + (-127) = [1000 0001]原 + [1111 1111]原 = [1111 1111]补 + [1000 0001]补 = [1000 0000]补

-1-127的结果应该是-128, 在用补码运算的结果中, [1000 0000]补 就是-128. 但是注意因为实际上是使用以前的-0的补码来表示-128, 所以-128并没有原码和反码表示.(对-128的补码表示[1000 0000]补算出来的原码是[0000 0000]原, 这是不正确的)

使用补码, 不仅仅修复了0的符号以及存在两个编码的问题, 而且还能够多表示一个最低数. 这就是为什么8位二进制, 使用原码或反码表示的范围为[-127, +127], 而使用补码表示的范围为[-128, 127].

因为机器使用补码, 所以对于编程中常用到的32位int类型, 可以表示范围是: [-2^31, 2^31-1] 因为第一位表示的是符号位.而使用补码表示时又可以多保存一个最小值.

因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数 在JavaScript中可以通过两次取反 ~~去除小数部分，~~1.1 === 1, ~~(-.1.1) === 1

This text will be italic

This will also be italic

This text will be bold.

This will also be bold

You can combine them

delete item

• Item 1
• Item 2
• Item 2a
• Item 2b

1. Item 1
2. Item 2
3. Item 3

• 你好
• 我们

You may be using admin manage page.

Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.

Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

js
Copy Code
1
2
let message = 'Hello world';
alert(message);

This web site is using markedjs/marked.

shell
Copy Code
1
curl https://get.acme.sh | sh

1. click to generate secret key
2. use this script to get cert

shell
Copy Code
1
2
3
4
export DP_Id="1234" // get from https://console.dnspod.cn/account/token
export DP_Key="sADDsdasdgdsf"
acme.sh --issue --dns dns_dp -d example.com \n 
 -d *.example.com --renew-hook "command to reload your web server"

• acme.sh 默认 CA 切换到 ZoreSSL
  改回到 Let's Encrypt

shell
Copy Code
1
acme.sh --set-default-ca --server letsencrypt

• 有时候 corncob 会失败

shell
Copy Code
1
acme.sh --cron --home ~/.acme.sh

查看日志, 类似如下内容。

shell
Copy Code
1
2
3
4
5
6
[2021年 12月 14日 星期二 10:56:23 CST] ===Starting cron===
[2021年 12月 14日 星期二 10:56:23 CST] Renew: 'powerfulyang.com'
[2021年 12月 14日 星期二 10:56:23 CST] Skip, Next renewal time is: 2021年 12月 24日 星期五 10:23:57 UTC
[2021年 12月 14日 星期二 10:56:23 CST] Add '--force' to force to renew.
[2021年 12月 14日 星期二 10:56:23 CST] Skipped powerfulyang.com
[2021年 12月 14日 星期二 10:56:23 CST] ===End cron===

官网 https://ohmyz.sh/

shell
Copy Code
1
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

• 从 github 下载 git clone https://github.com/tonsky/FiraCode.git
• 进入 /distr/ttf 目录全选字体 右键 open with font book
• 可以顺便修改 Iterm 的字体为 FiraCode

下载 Solarized Dark Patched 保存为itermcolors后缀

vim ~/.zshrc 修改 ZSH_THEME 为 ZSH_THEME="agnoster"

click plugins to see.
vim ~/.zshrc 修改 plugins 为 plugins=(git zsh-autosuggestions zsh-syntax-highlighting sudo)

shell
Copy Code
1
2
3
4
5
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

shell
Copy Code
1
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

First, run a fetch to update all origin/<branch> refs to latest:

git fetch --all
Backup your current branch:

git branch backup-master
Then, you have two options:

git reset --hard origin/master
OR If you are on some other branch:

git reset --hard origin/<branch_name>

git fetch downloads the latest from remote without trying to merge or rebase anything.

Then the git reset resets the master branch to what you just fetched. The --hard option changes all the files in your working tree to match the files in origin/master

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

These values vertically align the element relative to its parent element:

• baseline
  Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.

• sub
  Aligns the baseline of the element with the subscript-baseline of its parent.

• super
  Aligns the baseline of the element with the superscript-baseline of its parent.

• text-top
  Aligns the top of the element with the top of the parent element's font.

• text-bottom
  Aligns the bottom of the element with the bottom of the parent element's font.

• middle
  Aligns the middle of the element with the baseline plus half the x-height of the parent.

• <length>
  Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.

• <percentage>
  Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. A negative value is allowed.

The following values vertically align the element relative to the entire line:

• top
  Aligns the top of the element and its descendants with the top of the entire line.

• bottom
  Aligns the bottom of the element and its descendants with the bottom of the entire line.

For elements that do not have a baseline, the bottom margin edge is used instead.

• baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
  Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.

• top
  Aligns the top padding edge of the cell with the top of the row.

• middle
  Centers the padding box of the cell within the row.

• bottom
  Aligns the bottom padding edge of the cell with the bottom of the row.

Negative values are allowed.

我终于懂了
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
原来是给 行内元素 在行内用的。 块级的就 flex 一把梭