R·ex / Zeng


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

在 Mac 上实现雷蛇键盘幻彩可视化:灯随音动,炫出心动

为了应付音游“高手速、短键程、快速回弹”的特点,我入手了雷蛇的猎魂光蛛键盘。它除了可以满足音游的需求以外,还可以通过 Razer Synapse 3 实现灯光效果的个性化设置,例如通过幻彩可视化软件,让键盘的灯光随着音乐节奏变化。 Windows 上的幻彩可视化 这是官方的演示视频: 可以看到键盘有两个灯光效果,一个是按键区域被当成了屏幕,显示了音乐的频谱,另一个是键盘的边框灯光效果,...

你好,Medium!

可能你已经发现,这个博客已经支持了英文的界面,部分文章也提供了英文版本,这是因为我希望自己的一些实践经验和思考能被更多的人看到。 为了进一步扩大文章的受众范围,我决定将(自认为高质量的)技术文章镜像到 Medium 平台,旧文章也会慢慢同步过去。 这个博客依旧会作为我发布内容的主力,包括一些与技术无关的文章,以及一些新的网站模块(或许以后会有画廊?)。所以敬请期待吧! ...

发版辅助工具:因为规范,所以有效

业务扩张导致的问题 随着公司前几年的扩张,部门内的团队越来越多、业务越来越复杂。为了应对这种情况,前端团队使用了微前端,后端团队则使用了微服务。单个仓库的维护成本确实变低了,但这又带来了另外几个问题: 业务模块归属的团队可能会变化,例如“订单追踪服务”之前属于团队 A,但有一天拆到了团队 B; 很难整理出网状的模块调用关系,一个业务需求可能会改动到多个仓库的代码,例如我们对接一个新的物流...

【多图预警】日本のシティウォーク(CITY WALK)!

说来惭愧,我的第一本护照在十年间完全没有用上,然后就要过期了……只能让第二本护照来解决了。 五年前,我有考虑过出国玩一玩,但后来随着拖延症和疫情就完全没有开始做计划;直到今年十一,看到一个朋友去日本来了一场说走就走的旅行,加上刚好另一个朋友在日本工作,我的热情又燃起来了——于是也来了一场说走就走的旅行。 护照和签证 今年初疫情“结束”后,我立即抓紧时间申请了护照换发,新的护照就能用到 20...

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

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

一次 PNA 问题的定位经验(Chrome NetLog Viewer 入门)

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

为 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...

追根究底:不打开 DevTools 时,console.log 会不会内存泄漏?

太长不看:会。并且虽然 Chromium 有试图做限制,但因为方法不合适所以并没能解决问题。 JavaScript 的内存泄漏原因有很多,例如 DOM、计时器、闭包、意外的全局变量,以及本文的主题: console.log 。关于 console.log 会不会造成内存泄漏,掘金上面有大佬发过两篇文章: 千万别让 console.log 上生产!用 Performance 和 Mem...

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

Update 2023-07-19 目前已经有更简单的方式:PNPM 已经支持带有 alias 的 peer dependencies 查找,不需要用 hooks 了;通过实现跟 Ant Design 类似的 prefixCls 和 modifyVars 功能,也可以控制组件库选择器的前缀以避免样式冲突。 组件库升级是一个令开发者头痛的事情,即使像 Ant Design 这种...

由 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...

这是我们共同度过的

第 3164 天