R·ex / Zeng

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

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

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

一次 PNA 问题的定位经验（Chrome NetLog Viewer 入门）

作为一个电商平台，用户下单时，我们提供了一个页面让其选择自提点。一天下午，同事突然发现这个页面会多请求一遍接口，具体现象是：先是一个 Pre-flight/OPTIONS 请求（因为接口跨域），但是这个接口失败了，从 F12 的 network 界面只能看到 net::ERR_FAILED，看不到具体的错误信息，从 console 界面也没有任何报错。然后是一个正常的 Pre-flight/OPTIONS 请求，这个请求成功了。然后是一个正常的 GET 请求，这个请求成功了。每个接口都会这...
2023-06-02 13:57 ZH 环境

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

在之前做组件库的多版本共存时，我遇到了这样一个问题：PNPM 如何安装多个版本的包？似乎唯一的解决方法是使用 alias（下文的 components 和 business-components 都是示例包名，不是 NPM 上面实际的包）：pnpm i components@3 pnpm i components-next@npm:components@4import xxxV3 from 'components'; import xxxV4 from 'co...
2023-03-26 23:43 ZH 开发

追根究底：不打开 DevTools 时，console.log 会不会内存泄漏？

TL;DR：会。并且虽然 Chromium 有试图做限制，但因为方法不合适所以并没能解决问题。JavaScript 的内存泄漏原因有很多，例如 DOM、计时器、闭包、意外的全局变量，以及本文的主题：console.log。关于 console.log 会不会造成内存泄漏，掘金上面有大佬发过两篇文章：千万别让 console.log 上生产！用 Performance 和 Memory 告诉你为什么console.log 一定会导致内存泄漏？不打开 devtools 就不会这两篇文章的结论是...
2023-02-28 13:36 ZH 环境

多版本共存——巨型项目组件库升级的必经之路

Update 2023-07-19目前已经有更简单的方式：PNPM 已经支持带有 alias 的 peer dependencies 查找，不需要用 hooks 了；通过实现跟 Ant Design 类似的 prefixCls 和 modifyVars 功能，也可以控制组件库选择器的前缀以避免样式冲突。组件库升级是一个令开发者头痛的事情，即使像 Ant Design 这种经历了多年发展的组件库，升级也不是一件容易的事情——轻则 API 不兼容，重则影响自定义样式和用户体验。（为什么 API...
2023-01-20 11:53 ZH 环境

由 Use Zoom For DSF 导致的幽灵 Bug

在写项目时，我们都会产生一些 Bug。俗话说“解决 Bug 的第一步是先复现它”，但如果遇到了一个幽灵 Bug（无法稳定复现的 Bug）时，要如何解决呢？Bug 的现象我们有一个对外项目，其中一个页面里面展示了各类统计图表。当我们还在庆祝项目按时开发完成时，QA 小姐姐找了过来，说页面上有一个表格的行间分隔线消失了：但是我们经过多次调试后，发现攒了很久的一句话终于派上用场了：在我这儿是好的啊……见鬼了。没错，这是个幽灵 Bug，因为我发现：在同事的电脑上，只要刷新次数足够多，一定会有一两次...
2022-05-08 00:31 ZH 开发

JSON Diff Kit: A Combination of Several Simple Algorithms

BackgroundRecently, I received a requirement: display a diff with 2 JSON strings, which are basically an API's request and response data. Furthermore, we should show the diff in a Git-like style.Unfortunately, after a brief exploration, I found no...
2022-02-09 19:10 ZH 开发

Golang 内存泄漏排查之旅

“业务提了个线上问题，麻烦你看一下。”自从我开始写 Golang 后端之后，可能是能力有限，我的服务总是会在意想不到的情况下变得异常，而我要做的事情就是解决这个问题。这次出现的问题看起来是运营平台后端服务的内存泄漏，那就先从内存曲线开始看起吧。突然暴增的曲线Grafana 平台给出的曲线大概符合这样的特征：有 8 个突变点，每次突变都会让内存猛然上升接近 500 MB，上涨到逼近容器上限后，突然回落到 100 MB（因为容器崩溃重启了）。静态检查尝试失败结合突变的时间，我搜了一下审计日志，...
2021-10-02 01:14 ZH 开发

TypeScript 小技巧：校验 i18n 参数

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

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

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

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

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

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

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

这是我们共同度过的

第 2868 天♥