R·e^x / Zeng

由于硬件问题引发的条形码扫描 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 图标内部不能带有具体...

TypeScript+Vue 组件库的细节问题

背景为了 第四季度的 KPI（划掉） 配合全组前端项目的 UI/UX 改版，我们需要自己写一套组件库。第一个吃螃蟹的项目是用 Vue 写的，所以我们决定先写一个 Vue 的组件库。因为我刚好比较闲，于是搭脚手架的任务就交给了我。技术选型我个人的观点是：TypeScript（或其它静态类型的语言）是未来的趋势，但 Vue 对 TypeScript 的支持并不是那么好。经过再三查阅文档，我发现 官方文档 提到可以用 ES6 Class 或者传统的 Object。我试了一下：Object 无法优...

immer.js - 实现不可变数据的新思路

immer.js 介绍因为项目需要，我跟不可变数据打交道也有很长一段时间了。对于不可变数据来说，大家最熟悉的应该就是 immutable-js 了，然而它有这么几个劣势：API 复杂，额外引入了 Map 和 List 类型需要指定一个数组作为路径来 Get 或 Set，失去了 ES6 的语法简洁性失去了 Flow 或 TypeScript 对数据的 Schema 校验直到我前几天偶然在网上看到了一个叫 immer.js 的库，看了几眼文档，瞬间就被它的简洁给吸引住了。先来个简单的例子（摘自...

从 DFS 的角度看 NFA 正则与优化技巧

前言今年七月初 CloudFlare 由于一条正则表达式宕机的事情大家应该都听说过了，究其原因，是因为正则表达式匹配时产生了大量的回溯，从而耗尽了 CPU 资源。具体的技术分析网上都有，这儿就不赘述了。从小到大我都被教育：正则表达式可以高效的匹配字符串，正则会先被转换成 NFA，再被确定化为 DFA（这算法我现在还是能记住的），然后就可以用一个“与输入长度相关的线性时间复杂度”的算法来匹配了。CloudFlare 这件事情让我对正则表达式的效率十分失望，因此我花了一段时间了解了一下正则表达...

为 GORM Logger 添加 Trace ID 的过程和一点思考

起因后端程序的运行时日志，一直是出现线上问题时帮忙调试的有利工具。我现在负责的运营平台，由于是给内部人员用的，而且大多数功能都是数据库的增删改查，于是对于日志就没有打的那么详细。直到有一天出了一次线上事故，我们足足花了三天才找到原因（其中有两天我甚至一直以为跟我们的平台没有关系）。经过那次之后，我彻底明白了日志的重要性，于是开始丰富我们的运行时日志。在这个平台刚搭起来没多久的时候，另一个开发就做了一些基本的工作：写了 Gin 的中间件，可以为每个请求的 Context 添加一个 Reque...