Yvan Zhu's blog

dom之scroll

发表于 2021-07-01 更新于 2024-11-26 分类于未分类 Disqus：

参考：
https://www.cnblogs.com/wangyihong/p/8056859.html

emmet快捷键

发表于 2021-07-01 更新于 2024-11-26 分类于未分类 Disqus：

快速选择相同项目

Ctrl + D

回退一次选择

Ctrl + U

跳过选中的项目

Ctrl + K

新版 husky 的使用

发表于 2021-06-30 更新于 2024-11-26 分类于未分类 Disqus：

新版 husky 实践

安装 husky
1
npm install -D husky
在 packgae.json 中添加 prepare 脚本
1
2
3
4
5
{
"scripts": {
"prepare": "husky install"
}
}
prepare 脚本会在 npm install（不带参数）之后自动执行。也就是说当我们执行 npm install 安装完项目依赖后会执行 husky install 命令，该命令会创建 .husky/ 目录并指定该目录为 git hooks 所在的目录。
添加 git hooks，运行一下命令创建 git hooks
1
npx husky add .husky/pre-commit "npm run test"
运行完该命令后我们会看到.husky/目录下新增了一个名为pre-commit的shell脚本。也就是说在在执行git commit命令时会先执行pre-commit这个脚本。pre-commit脚本内容如下：
1
2
3
4
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run test
可以看到该脚本的功能就是执行npm run test这个命令

参考：
https://zhuanlan.zhihu.com/p/366786798

vim手册

发表于 2021-06-16 更新于 2024-11-26 分类于未分类 Disqus：

模式

normal
insert
1. i insert 前插
2. a append 后插
3. o open a line below
4. I 开头
5. A 末尾
6. O open a line up
command
1. 替换 :% s/java/python/g
2. set nu 设置行号
3. sp 横分屏 vs 竖分屏
visual
1. v
2. V 整行
3. ctrl + v 块状

vim 手册

vimtutor

插入模式下

ctrl+h 删除上一个字符

ctrl+w 删除上一个单词

ctrl+u 删除当前行光标之前的内容

motions

hjkl
w/b move word by word
W/B move WORD by WORD
e/ge move to the end of a word
E/gE
f(character) find character in line
F(character)
t(character) until character in line
T(character)
; / , 继续搜索
0 first character of a line
^ first non-blank character of a line
$ end character of a line
g_ end non-blank character of a line
{ / } move entire paragraphs
ctrl + d / ctrl + u
ctrl + f / ctrl + b
/{pattern} search forward
?{pattern} search backward
n / N next/previous
ctrl + o go back
? without a pattern change the direction
gg top of a file
{line}gg
G end of a file

operators

u to undo
ctrl + r to redo
d delete
1. d2w delete two words
2. dt; delete until ;
3. df; delete until ;(include ;)
4. d/hello delete until hello
5. diw
6. di”/‘/`
dd delete a complete line
D delete from the cursor until the end of the line
c change (combine d and i)
cc change a complete line
C change from the cursor until the end of the line
. repeat change
y copy
1. yw/y1w copy one word
2. y$ copy from the cursor until the end of the line
yy copy a complete line
p 在当前位置之后
P 在当前位置之前

text-object

w word
s sentence
p paragraph
“ quotes special
‘ single quote special
` backtick special
() b
{} B
[]

Mac禁止向日葵开机启动

发表于 2021-06-16 更新于 2024-11-26 分类于未分类 Disqus：

cd /Library/LaunchAgents
sudo vim com.oray.sunlogin.agent.plist
sudo vim com.oray.sunlogin.startup.plist

cd /Library/LaunchDaemons
sudo vim com.oray.sunlogin.helper.plist
sudo vim com.oray.sunlogin.plist

这里，是进入到系统的启动项文件存放目录，然后用vim直接修改向日葵的启动配置。

每次运行vim后，按i进入编辑模式，然后把Disabled从改为，这样就禁用了该启动项，然后按Esc退出编辑模式，继续按:wq保存并退出。

编辑好了这四个文件后，再重新启动机器，烦人的向日葵控制端终于消失了！

作者：smartshallot

链接：https://www.jianshu.com/p/a20efbcc61dd

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

mac快捷键

发表于 2021-06-11 更新于 2024-11-26 分类于未分类 Disqus：

窗口操作

隐藏 H

关闭 W

最小化 M

全屏 command + control + F

浏览器全屏(窗口全屏的基础上) command + shift + F

vscode 全局搜索 command + shift + F

显示隐藏文件、文件夹

点击空白处然后 command + shift + 。

截屏、录屏

command + shift + 5

chrome 浏览器

control + tab 切换到下一个标签
command + 数字键切换到指定数字顺序的标签
command + option + ← 切换到左边的标签
command + option + → 切换到右边的标签

vscode快捷键

发表于 2021-06-11 更新于 2024-11-26 分类于未分类 Disqus：

代码之间跳转

调回之前的代码

Mac 下

ctrl + '-'

window 下

alt + '-'

折叠、展开代码块

以下命令要确保光标在编辑区域

折叠所有区域代码的快捷键：ctrl+k, ctrl+0;

            先按下ctrl和K，再按下ctrl和0; (ctrl 不要松开)

展开所有折叠区域代码的快捷键：ctrl +k, ctrl+J;

            先按下ctrl和K，再按下ctrl和J

自动格式化代码的快捷键：ctrl+k, ctrl+f;

            先按下ctrl和K，再按下ctrl和f;

全局搜索

command + shift + F

CSS-flex

发表于 2021-06-07 更新于 2024-11-26 分类于 technology ， front-end ， css Disqus：

容器的属性

flex-direction

规定灵活项目的方向

value	description
row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

flex-wrap

规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

flex-flow

是 flex-direction 和 flex-wrap 属性的复合属性。默认值为row nowrap。

flex-flow: flex-direction flex-wrap|initial|inherit;

justify-content

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items

定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow

用于设置或检索弹性盒子的扩展比率。

flex-grow: number|initial|inherit;

flex-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-shrink: number|initial|inherit;

flex-basis

用于设置或检索弹性盒伸缩基准值

flex

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

兰亭集序

发表于 2021-06-07 更新于 2024-11-26 分类于未分类 Disqus：

兰亭集序

【作者】王羲之【朝代】魏晋

永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。

是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。

夫人之相与，俯仰一世。或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至；及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀，况修短随化，终期于尽！古人云：“死生亦大矣。”岂不痛哉！

每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦犹今之视昔，悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之览者，亦将有感于斯文。

译文

永和九年，时在癸丑之年，三月上旬，我们会集在会稽郡山阴城的兰亭，为了做禊事。众多贤才都汇聚到这里，年龄大的小的都聚集在这里。兰亭这个地方有高峻的山峰，茂盛的树林，高高的竹子。又有清澈湍急的溪流，辉映环绕在亭子的四周，我们引溪水作为流觞的曲水，排列坐在曲水旁边，虽然没有演奏音乐的盛况，但喝点酒，作点诗，也足够来畅快叙述幽深内藏的感情了。这一天，天气晴朗，和风温暖，仰首观览到宇宙的浩大，俯看观察大地上众多的万物，用来舒展眼力，开阔胸怀，足够来极尽视听的欢娱，实在很快乐。人与人相互交往，很快便度过一生。有的人从自己的情趣思想中取出一些东西，在室内（跟朋友）面对面地交谈；有的人通过寄情于自己精神情怀所寄托的事物，在形体之外,不受任何约束地放纵地生活。虽然各有各的爱好，安静与躁动各不相同，但当他们对所接触的事物感到高兴时，一时感到自得，感到高兴和满足，竟然不知道衰老将要到来。等到对得到或喜爱的东西已经厌倦，感情随着事物的变化而变化，感慨随之产生。过去所喜欢的东西，转瞬间，已经成为旧迹，尚且不能不因为它引发心中的感触，况且寿命长短，听凭造化，最后归结于消灭。古人说：“死生毕竟是件大事啊。”怎么能不让人悲痛呢？每当看到前人所发感慨的原因，其缘由像一张符契那样相和，总难免要在读前人文章时叹息哀伤，不能明白于心。本来知道把生死等同的说法是不真实的，把长寿和短命等同起来的说法是妄造的。后人看待今人，也就像今人看待前人，可悲呀。所以一个一个记下当时与会的人，录下他们所作的诗篇。纵使时代变了，事情不同了，但触发人们情怀的原因，他们的思想情趣是一样的。后世的读者，也将对这次集会的诗文有所感慨。

CSS-animation

发表于 2021-06-04 更新于 2024-11-26 分类于 technology ， front-end ， css Disqus：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name

指定要绑定到选择器的关键帧的名称

animation-duration

动画指定需要多少秒或毫秒完成

animation-timing-function

设置动画将如何完成一个周期

animation-delay

设置动画在启动前的延迟间隔。

animation-iteration-count

定义动画的播放次数。

value	description
n	一个数字，定义应该播放多少次动画
infinite	指定动画应该播放无限次（永远）

animation-direction

指定是否应该轮流反向播放动画。

animation-fill-mode

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-play-state

指定动画是否正在运行或已暂停。

@keyframes

@keyframes name
{
    from {background: red;}
    to {background: yellow;}
}

@keyframes name
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}