页面虚拟滚动

研究了一下飞书、react-window 等虚拟滚动的实现,都是需要提前知道节点的高度,因为用反证法思考,不知道高度,那还滚动个啥呢?所以,他们的原理都是大同小异的。

我写了 2 个 demo,一个是向下虚拟滚动,一个是向上虚拟滚动。记录在下面。

See the Pen virtual scroll myself2 by zeng (@zengxiaoluan) on CodePen.

See the Pen virtual scroll myself by zeng (@zengxiaoluan) on CodePen.

最近我们做了一个网页版的聊天工具,类似有度,还是很有意思。

further reading

这个文章写的很好,推荐阅读。

舞蹈链 – JavaScript 实现

前言

如果想实现一个数独小游戏,可以先了解舞蹈链这个数据结构,还是很有意思的。我不准备再具体讲解 dance link 是什么,因为很难比其它文章写的更好,只提供一个 JavaScript 的实现在下面,如果你感兴趣的话,可以查阅,有问题可以留言讨论。

继续阅读“舞蹈链 – JavaScript 实现”

border-radius 的值超过宽高的计算公式

先来看一个现象,解释一下为何两者的圆角效果是一致的。

css 的代码如下:

.e1 {
  border-radius: 100% 100% 0 0 / 100% 0 0 0;
}

.e2 {
  border-radius: 50% 0 0 0 / 50% 0 0 0;
}

e2 好理解,水平和垂直的圆角都是 50px;但是 e1 怎么理解呢?这里就涉及到了当圆角半径超出盒宽高的计算公式了。

继续阅读“border-radius 的值超过宽高的计算公式”

flex-grow 和 flex-shrink 的计算公式

一直知道的概念是按照比例来计算,今天,朋友问起,仔细验证了一下具体的公式。比如我们先看下面的例子。

flex-grow

<div style="display:flex; width:100px;height:100px">
  <div style="width:10px;flex-grow: 5; background:red;"></div>
  <div style="width:40px;flex-grow: 2; background:blue;"></div>
  <div style="width:30px;flex-grow: 1; background:pink;"></div>
</div>

父元素的宽度是 100px,3 个子元素的宽度是 10、40、30,加起来是 80px,那么还需要剩下 20px 需要填充。每个子元素能分得多少呢?以第一个子元素为例。

5 / (5 + 2 + 1) * 20 + 10 = 22.5。第一个子元素占比 8 分之 5,乘以 20px,再加上原来的 10px,就是 22.5px。可以审查一下元素,验证我们的想法。

flex-shrink

<div style="display:flex; width:60px;height:100px">
  <div style="width:10px;flex-shrink: 5; background:red;"></div>
  <div style="width:40px;flex-shrink: 2; background:blue;"></div>
  <div style="width:30px;flex-shrink: 1; background:pink;"></div>
</div>

再看 flex-shrink。父级元素的宽度是 60px,子元素分别是 10、40、30px,加起来是 80px,那需要收缩 20px。怎么计算第一个子元素的宽度呢?如下:

10 – 5 * 10 / (10 * 5 + 40 * 2 + 30 * 1) * 20,意思是,原来子元素的宽度是 10px,它需要收缩的像素是用自身的宽度,乘以 shrink 这个权重值,再除以整个子元素的宽度乘以 shrink 权重值之和,再乘以整个收缩的 20px。

再审查元素,验证一下结果,也是对的。

我们发现了一点,grow 和 shrink 的计算方式不同,为什么呢?我觉得有 2 点。

  1. grow 这样算,很符合直觉,能够解决问题,心智模型简单。
  2. shrink 的方式更复杂一点,那是为了保证,所有的子元素塌陷后,不会出现负值,按照 grow 的算法的话就会。

以上,感谢阅读。

去 codepen 自己试一试

See the Pen flex-shrink by zeng (@zengxiaoluan) on CodePen.

最佳怀孕时间

怎么选上一个最佳怀孕时间,休完暑假,再休产假,让自己的假期尽可能的多。来来试试这个假期计算器吧。

孕期时间:37 – 42 周
女性假期时间:178 天
怀孕时间:

如何模拟贝塞尔曲线上的点

刚接触觉得贝塞尔还是挺复杂的,n 阶贝塞尔的数学公式都把我吓退了。实现起来还是比较简单的,效果如下,代码可以审查元素获得。

记一个朋友遇到的腾讯面试题

朋友面试腾讯,遇到了一个算法题,挺有意思的,特此记录一下。题目是这样的,给定一个数组如下:

let arr = [
  ["a", "aa", "aaa", "aaaa"],
  ["b", "bb", "bbb"],
  ["a", "ab", "aba"],
  ["a", "aa", "aab"]
]

将其转化成一个树状的子结构,如下:

[
  {
    name: "a",
    child: [
      {
        name: "aa",
        child: [
          {
            name: "aaa",
            child: [
              {
                name: "aaaa",
                child: [],
              },
            ],
          },
          {
            name: "aab",
            child: [],
          },
        ],
      },
      {
        name: "ab",
        child: [
          {
            name: "aba",
            child: [],
          },
        ],
      },
    ],
  },
  {
    name: "b",
    child: [
      {
        name: "bb",
        child: [
          {
            name: "bbb",
            child: [],
          },
        ],
      },
    ],
  },
];
继续阅读“记一个朋友遇到的腾讯面试题”

如何调整 Nginx 文件上传的尺寸限制

Nginx 默认限制文件上传的尺寸是 1M,超过了就会报“413: Request Entity Too Large”错误,我们先来查查 413 是啥意思?其实就是超过尺寸限制的意思。

那如何调整这个尺寸限制呢?比如我们要调整到 50M,需要用到一个指令:

client_max_body_size 50M
继续阅读“如何调整 Nginx 文件上传的尺寸限制”