R·e^x / Zeng

从 Svelte 3 的编译器中得到的启示

前端的编译器，除了可以做转换，是否还有其它用途？由于现在国内“前端主流框架”的称号基本被 React、Vue、Angular 占领，前二者在渲染层的技术，本质上都是极为相似的：在内存中维护 Virtual DOM，通过某些方式获取到变量被修改，然后利用 DOM Diff 算法（以及一些优化）计算出需要对 DOM 做的操作，再 Patch 到真实的 DOM 上。相信大家（尤其是准备过面试的小伙伴）一定对这些内容比较了解。Angular 的最新版使用了一个叫 Ivy 的引擎。对于 Angular 来...

使用 OpenResty 无痛优化图片体积（AVIF / WebP）

图片体积优化计划两年半之前，我第一次了解到 WebP 可以有效减少图片体积的时候，有一瞬间产生了“把网站中所有资源替换成 WebP”的冲动，但当我打开 caniuse 的时候，发现 Safari 迟迟不支持，况且网站中涉及到图片的地方实在是太多，修改代码不太现实。我当时搜了一些资料，是关于让 Nginx 针对浏览器提供的 Accept 头来分别提供不同格式的文件。这个方法确实有，然而我实在是太懒了，以至于写一段命令将所有图片转个格式都不想写，并且想到以后所有图片都要提供两个版本，实在是太麻烦了！...

当表格排版遇到了合并单元格

我负责的面单平台的需求复杂度已经越来越高了。自从寒假接了一个复杂表格排版的需求后，各类业务对于表格排版的使用场景也开始变多。毕竟，一个可以自动换页排版，并保持每一页都带有首部区域和尾部区域的表格，哪个业务不喜欢呢？（被打）表格的排版先回顾一下之前的需求：有一类专门的面单类型叫“拣货单”，用于给卖家拣货拣货单有三个部分：头部区域（展示 Logo、买家地址等）、表格（展示商品信息）、尾部区域（展示备注和页码）表格可能非常长，需要分页打印（纸张类型分为 A4、A5、A6 三种）第一页的表格之前一定会有...

编写状态驱动的业务代码（2）

记得两年前的差不多这个时候，我曾经写了一篇文章 编写状态驱动的业务代码，讲了一下我使用状态来描述业务需求的一个经历。自那之后，我很少再接触步骤如此多的业务需求，直到前一段时间……一个复杂的页面运营平台有一个页面，是专门用来配置运费规则的，里面有最多 12 个步骤（12 个对话框），一个可能的步骤如下：基础信息配置，其中可以选择是否需要配置一些“可选费用”（例如燃油费等）地区配置如果地区配置为 XXX，则需要配置 YYY 费如果第一步中选择了燃油费，则配置燃油费如果第一步中选择了 XXX 费，则配...

由于硬件问题引发的条形码扫描 Bug

听一个希捷的朋友说的。有用户反映每次用笔记本播放李娜的青藏高原时，电脑就会死机。经测试发现，唱到最后的“那就是青藏高……”时，硬盘产生了共振，振幅过大，读写头读不出数据了。为了抓住这个bug，朋友听了一个月的青藏高原……一开始看到这个段子（出处：有哪些让你目瞪口呆的 Bug ？ - wuz的回答 - 知乎）的时候，只是笑一笑。然而万万没想到，我一个前端居然也会遇到硬件问题。问题现象隔壁组有一个业务需求：在专用的纸上批量打印一大堆条形码（商品 ID 之类的数据），然后可以方便的撕下来贴在包裹上，以...

面单工具：对 Chrome Headless 渲染的极致优化

背景有些同学对“面单工具”这个项目应该不算陌生，因为之前我已经写过几篇跟它相关的文章了。它的基础功能无非就是画面单：如果你从 Shopee 上买了点东西，那么快递上面贴的面单就是用这个工具画出来的。可能是这工具用起来比较方便，随着业务的扩张，一些不是面单的奇奇怪怪的东西也开始切换到面单工具上，例如采购系统的合同（更像是 Word 文件）、仓库的条形码（用了特殊纸张）、拣货单（可以理解成外卖单），这就对面单工具的可扩展性提出了极高的要求。不过这不是本文的重点，之后再专门写文章好了。我之前写过一篇文...

TypeScript 类型系统与函数式编程

背景接触 TypeScript 已经有一段时间了，这期间写过一些复杂的类型（例如 这篇文章），我开始意识到：TypeScript 的类型系统写起来就像函数式编程一样。去年某天，一个同事给我发了个链接，里面讲的是“TypeScript 类型系统的图灵完备”，里面的一些内容我还在努力理解到可以分享的程度，但一些代码差不多可以说明 TypeScript 类型系统跟函数式编程的思想非常接近了。前期知识掌握 TypeScript 的 基本类型，相信大家都了解；掌握 TypeScript 的 高级类型 和 ...

从前端组件库引出的计算几何问题

是的，又是那个组件库。由于脚手架搭的比较好，大家开发的效率超出了预期。然而总有些不顺利的事情出现，于是就有了这次要说的事情。一个容易解决的问题我们的 <Icon> 组件跟 Ant design 比较类似，底层用的是 SVG，这样可以通过按需引入以减小空间。由于 SVG 是设计师用 Illustrator 画的，里面必定会带有各种无关紧要的信息，因此同事在构建脚本中用 svgo 去掉了几乎所有用不到的数据。然而，我们发现不能去掉 fill 属性（通常 SVG 图标内部不能带有具体颜色的...