R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

TypeScript 小技巧:校验 i18n 参数

最近我们的某个项目需要支持多语言了。作为一个从 Entry Task 开始就与多语言打过交道的人,我已经对这里面的套路很是熟悉。但是作为一个工程师,还是想着能不能做的更好一些。我们是怎么做国际化的对于大部分场景来说,国际化都相当简单:有若干语言包,每个语言包中是一堆 Key 和对应的文字模板,模板中可能会有占位符。一个语言包可能长这样:{ "user_setting.list.total_users": "共 {count} 个用户。", ...

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

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

盲调试解决 Zebra 打印机吞纸问题的经历

本来我以为,前端的工作内容只需要跟浏览器打交道,最多再做一做客户端和后端;万万没想到,如标题所示,我居然需要解决打印机的问题。奇怪的需求我们有一个画面单的平台,关于这个平台,我之前已经写过几篇文章,这里就不多提了。一天,面单的产品突然把我拉到了一个群里,因为我们的业务 PM(BPM)接到了一个紧急需求:在我们开始跟某个卖家合作时,他们提出:我们在打印面单的时候,必须支持通过一个叫 Zebra 的打印机来打印,否则就不跟我们合作。由于那是一个大卖家,因此这似乎是一个无法拒绝的需求。虽然我们完...

使用 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 文件)、仓库的条形码(用了特殊纸张)、拣货单(可以理解成外卖单),这就对面单工具的可扩展性提出了极高的要求。不过这不是本文的重点,之后再专门写文章好了。我之前写过...

用 OpenResty+OpenCC 让网站支持正体中文

想要查看本站的正体中文版本,点击页脚处的“正體中文”链接即可。关于这篇文章的背景,真是说来话长……大概在八年前,我去 CTSC 打了个酱油(非集训队,只是去玩的),在那几天里,我接受了许多大佬们的培训,印象比较深刻的是 BYVoid 大佬,因为他在 PPT 中放了自己网站的链接,我点进去之后发现可以随意切换“简体”和“繁体”,而且似乎跟我以前见过的国际化不同,文章内容也会随着切换。当时我对 Web 开发一窍不通,所以没有能力好好研究这究竟是怎么实现的。后来有一次机缘巧合,我看到了一个叫 O...

Go module 踩坑备忘

之前为了写 Go,我特地捣鼓了一下 VSCode 的 Go 配置,具体的经历可以看 这里。最近由于业务需求,需要新开一个 Go 的项目。听朋友说 Go 从 1.11 开始有了个叫 Modules 的新特性,于是打算看看能否用在我的新项目中。为什么我对 Modules 这么感兴趣呢?因为写项目总是逃不开各种包管理,而之前 Go 不管是官方还是非官方的包管理器,都是基于 GOPATH 或者 vendor 目录,也无法很好的解决不同版本的冲突。Modules 据说可以解决这些问题。我们之前的项目...

Redirect attack - Shadowsocks 流密码的不安全因素

Shadowsocks 是一款陪伴无数玩家多年的科学上网工具,但是近年来随着墙的日益增高,一些 Shadowsocks 流量已经可以被很好的识别出来,然后就是——“同志,你梯子塌了”。虽然“协议可以被识别”已经众所周知,但我们依旧认为,Shadowsocks 的加密做的不错,中间人应当破解不出明文信息。然而,晚上看到的一篇 文章,稍稍动摇了一下我对 Shadowsocks 数据安全的信心,更让我重新审视了一下流密码的安全性。之前我在做安全方面的科普的时候,我总会提到“ECB 是不安全的”,...

TypeScript 类型系统与函数式编程

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

这是我们共同度过的

第 2131 天