R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。

分类“开发”下的文章

另一种形式的“微前端”——弹窗内嵌子应用

有些时候,架构设计不需要大张旗鼓,一些简单的技术组合也能解决问题。 为了用户体验 去年 Q1 我所负责的项目有一个需求,当用户点击编辑页面内的某些按钮时,会弹出一个弹窗,用于配置其它域的内容。这里以最经典的用户配置流程举例(只是举例,实际需求不是用户管理,域的内容远比这个复杂,而且域之间的关联也不止这么简单): 系统中有用户、角色、权限码三个域,分别有各自的管理页面; 三个域之间有关联...

为 PNPM peer 添加 NPM alias 支持(PNPM 与 VSCode 动态调试入门)

在之前做组件库的多版本共存时,我遇到了这样一个问题: PNPM 如何安装多个版本的包? 似乎唯一的解决方法是使用 alias(下文的 components 是示例包名,不是 NPM 上面实际的包): pnpm i components@3 pnpm i components-next@npm:components@4 import xxxV3 from 'componen...

由 Use Zoom For DSF 导致的幽灵 Bug

在写项目时,我们都会产生一些 Bug。俗话说“解决 Bug 的第一步是先复现它”,但如果遇到了一个幽灵 Bug(无法稳定复现的 Bug)时,要如何解决呢? Bug 的现象 我们有一个对外项目,其中一个页面里面展示了各类统计图表。当我们还在庆祝项目按时开发完成时,QA 小姐姐找了过来,说页面上有一个表格的行间分隔线消失了: 但是我们经过多次调试后,发现攒了很久的一句话终于派上用场了: ...

JSON Diff Kit:几个简单算法的组合

背景 最近我收到一个需求:展示两个 JSON 字符串的 diff,这两个字符串基本上是一个 API 的请求和响应数据。此外,我们还应该以 Git 的风格显示 diff。 然而,经过简单的搜索,我并没有发现合适的库。 那我只好自己实现了。 Git 的方式 JSON 字符串可能非常不规范。例如这两个 JSON 字符串是等价的: {"a":1,"b&q...

Golang 内存泄漏排查之旅

“业务提了个线上问题,麻烦你看一下。” 自从我开始写 Golang 后端之后,可能是能力有限,我的服务总是会在意想不到的情况下变得异常,而我要做的事情就是解决这个问题。 这次出现的问题看起来是运营平台后端服务的内存泄漏,那就先从内存曲线开始看起吧。 突然暴增的曲线 Grafana 平台给出的曲线大概符合这样的特征:有 8 个突变点,每次突变都会让内存猛然上升接近 500 MB,上涨到逼近...

TypeScript 小技巧:校验 i18n 参数

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

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

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

使用 OpenResty 无痛优化图片体积(AVIF / WebP)

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

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

我负责的面单平台的需求复杂度已经越来越高了。自从寒假接了一个复杂表格排版的需求后,各类业务对于表格排版的使用场景也开始变多。毕竟,一个可以自动换页排版,并保持每一页都带有首部区域和尾部区域的表格,哪个业务不喜欢呢?(被打) 表格的排版 先回顾一下之前的需求: 有一类专门的面单类型叫“拣货单”,用于给卖家拣货 拣货单有三个部分:头部区域(展示 Logo、买家地址等)、表格(展示商品信息)...

编写状态驱动的业务代码(2)

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

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

听一个希捷的朋友说的。有用户反映每次用笔记本播放李娜的青藏高原时,电脑就会死机。经测试发现,唱到最后的“那就是青藏高……”时,硬盘产生了共振,振幅过大,读写头读不出数据了。为了抓住这个bug,朋友听了一个月的青藏高原…… 一开始看到这个段子(出处: 有哪些让你目瞪口呆的 Bug ? - wuz的回答 - 知乎 )的时候,只是笑一笑。然而万万没想到,我一个前端居然也会遇到硬件问题。 问题现象 ...

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

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

这是我们共同度过的

第 3164 天