1月 - 崮生

2020/1/1

我是向来是一个不怎么做计划的人，今年做个计划吧，目标是让自己处于正常的状态

新年的第一个小项目：

CSS env() 可用于实现避开苹果安全区之类的

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

多台 WIN10 之间的 SSH 免密登录 ->

网页备份

~~vscode remote SSH 连接 windows server 总是断开的一个原因：经排查发现是我的 v2rayN(一个网络代理软件) 导致的，配置代理避开该服务器即可~~ 并不是，只是当时好了一小会....

ts 版防抖函数

type unPromise<T> = T extends Promise<infer R> ? R : T;

export function debounce<T extends (...args: any) => any>(fn: T, time: number) {
  let timeout = 0; // 创建一个标记用来存放定时器的返回值
  return function (this: any, ...args: any) {
    return new Promise<unPromise<ReturnType<T>>>((resolve, reject) => {
      clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
      timeout = setTimeout(() => {
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
        resolve(fn.apply(this, args));
      }, time);
    });
  };
}

#日常# 新增整理：

#日常# 今天突然发现在爱发电收到了 5 元的赞助，非常开心ヾ(≧▽≦*)o

#日常# 新增文章：

#日常# #闲评# 2021 年了微信小程序还不支持 first-of-type 微信社区相关

CSS 实现列表左侧线条样式，起始和结束少一半的线条长度。还有一个思路是在第一个和最后一个元素上使用和背景色相同的颜色来覆盖原先的线条

  .c-item::before {
    content: "";
    --h: 100%;
    --h2: 0%;
    width: 1px;
    height: var(--h);
    background: #cccccc;
    position: absolute;
    left: 0px;
  }
  .c-item:nth-child(1)::before {
    --h2: calc(var(--h) - 50%);
    height: var(--h2);
    transform: translateY(50%);
  }
  .c-item:nth-last-child(1)::before {
    /** --h2 为了在只有一个 item 的时候让左侧边线消失 */
    height: calc(var(--h) - 50% - var(--h2));
    transform: translateY(-50%);
  }

CSS 实现三个点的动画效果

.g-loading-dot {
	display: inline-block;
	min-width: 2px;
	min-height: 2px;
	box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor;
	animation: dot 4s infinite step-start both; 
}

@keyframes dot{
	25% { box-shadow: none; }                                  /* 0个点 */
	50% { box-shadow: 2px 0 currentColor; }                    /* 1个点 */
	75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ }
}

#日常# ：微信小程序在 scroll-view 中使用 sticky 的 bug。 #闲评# : 又耽搁我半个多小时

表征：滚动了一个 scroll-view 上设定的高度后设置 sticky 会被滚动上去
猜测原因：微信小程序的 sticky 的计算很可能是直接根据父元素的高度来计算了
解决方案：在 scroll-view 中再套一层然后将所有元素放这一层里面

#日常# ：新增文章

#日常# 发现 Firefox 的一个奇怪实现，鼠标按住左键滑动选择一但进入 Web Components 就转为只选中 Web Components 中的内容，在页面中 ctrl + a 也无法选中 Web Components 中的内容， Web Components slot 中的内容却是可以选中的

#日常# 发现文章, 如何看待 snabbdom 的作者开发的前端框架 Turbine 抛弃了虚拟 DOM？ - 徐飞的回答 - 知乎对于 vdom 和相关的 diff 讲的非常好

{{{
#日常# #uniapp/坑# 这个 v-for 的数组使用模板内定义的数据就得到了，但使用变量的话就没问题