最近看到了凯撒密码，挺适合编程实现的。比如有一个密文是：PELCGBTENCUL，那他表示的明文是什么呢？
Continue reading “凯撒密码的 js 实现”Category: 编程作品
通过代码去表达自己的情感
页面虚拟滚动
研究了一下飞书、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 的实现在下面，如果你感兴趣的话，可以查阅，有问题可以留言讨论。
Continue reading “舞蹈链 – 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 怎么理解呢？这里就涉及到了当圆角半径超出盒宽高的计算公式了。
Continue reading “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 点。
- grow 这样算，很符合直觉，能够解决问题，心智模型简单。
- shrink 的方式更复杂一点，那是为了保证，所有的子元素塌陷后，不会出现负值，按照 grow 的算法的话就会。
以上，感谢阅读。
去 codepen 自己试一试
See the Pen flex-shrink by zeng (@zengxiaoluan) on CodePen.
最佳怀孕时间
怎么选上一个最佳怀孕时间，休完暑假，再休产假，让自己的假期尽可能的多。来来试试这个假期计算器吧。
孕期时间：37 – 42 周
女性假期时间：178 天
怀孕时间：
如何模拟贝塞尔曲线上的点
刚接触觉得贝塞尔还是挺复杂的，n 阶贝塞尔的数学公式都把我吓退了。实现起来还是比较简单的，效果如下，代码可以审查元素获得。
svg 中的矩阵
从 18 年到 22 年，第一次知道 svg 中其实已经存在矩阵相关的 API，我们先来看一下通过矩阵运算实现的一个例子。
See the Pen transform ellipse by zeng (@zengxiaoluan) on CodePen.
Continue reading “svg 中的矩阵”图形变换与矩阵相乘
看懂这篇文章需要会矩阵相乘的运算，以及矩阵相乘在图形学里的意义。大学线性代数这门课，学过矩阵的乘法，没有学过也没事，也能体会得到。我在文章里提供了 codepen 的示例，可以清晰的了解到。
Continue reading “图形变换与矩阵相乘”记一个朋友遇到的腾讯面试题
朋友面试腾讯，遇到了一个算法题，挺有意思的，特此记录一下。题目是这样的，给定一个数组如下：
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: [],
},
],
},
],
},
];