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

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

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

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

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

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

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

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

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

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

Go module 踩坑备忘

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

Webpack 打包体积优化：没有银弹

关于 Webpack 打包体积优化的问题，网上的文章已经有很多了，大概的方法有：webpack-bundle-analyzer（source-map-explorer）、CommonsChunkPlugin（v4.x 之后变成了 splitChunks 选项）、按需引入用到的库、Tree Shaking、CDN 等。之前我用这些方法对自己负责的某个项目做了一次优化，使得总体积不到 600 KB（after gzip），由于包含了 antd 和 react，外加有几十个页面（有的页面相当复杂...

Docker for Windows 无法共享磁盘的问题

TL;DR: 解决方案在 文章末尾。之前为了开发方便，我一直在用 Docker for Windows 作为我的开发环境。但突然有一天，Docker 突然无法在 Shared Drives 里面共享磁盘了，会报一句这样的提示：A firewall is blocking file Sharing between Windows and the containers. See documentation for more info.看起来是防火墙的问题。我知道 Docker for Wind...

搭建付费的 MXroute 并了解邮件相关的域名记录

本文并非为匿名人士所编写，第三方服务一般都会有审查机制，因此无法保证敏感数据的安全。背景之前我的域名邮箱 [email protected] 一直用的是国内的某个服务，最近觉得国内服务的限制比较多，于是打算将其迁移到国外服务。必要的要求有：不暴露自己服务器的真实 IP价格不要特别贵不会被常见邮箱识别为垃圾邮件界面尽量美观，需要支持 IMAP（或 POP3） 和 SMTP其它条件类似时，SaaS >= PaaS >= IaaS问了几个人，自己也搜了一圈，对比下来发现 MXroute ...

在 VSCode 中配置 Go 调试环境

前期准备作为一个 Go 开发者，首先需要把系统中的 Go 的环境配好（包括环境变量和包管理器），具体怎么配这儿就不说了。不过 Go 的项目似乎都需要跑在 $GOPATH/src 下面，感觉有点反人类。Go 最推荐的调试器就是 Delve，安装和使用方法这儿也不说了，正确安装后应该可以在命令行中直接运行 dlv 命令。想看结果的同学，可以直接跳到文章末尾，那儿有可以运行的配置。VSCode 作为微软爸爸的东西，我一直是很推崇的；刚好最近也在搞 Go 的项目，于是在想如何不用 JB 系软件（太...

Service Worker 踩坑指南（缓存与 WebP）

背景前天晚上在清理 Chrome 插件的时候，发现了好久之前因好奇而安装的 Lighthouse 插件，它是 Chrome 团队出的一个自动化页面审计工具，可以帮助开发者优化页面。继续怀着好奇的心理，我打开了我的网站主页，然后点了一下 Generate report 按钮，得分惨不忍睹……嗯由于特别惨不忍睹，所以我就不放结果了，放一张 Lighthouse 的界面代替好了……当然，优化的过程倒是不算太难，按照网上搜到的教程添加 Service Worker 和 Manifest，然后给一些...

在 Electron 下调用 Win32 API 的经历

写在最前面的话公司有个需求，就是在 Electron 运行的时候，调用系统的一部分 Win32 API。我的方向是前端，并不是很懂 Win32 API，因此只需要给出可以供其他同事使用的地方就行了。在 Windows 上搞 Node.js 开发，一定要装好各种构建工具。如果不想装那个巨大的 Visual Studio 的话，可以看一下 这里。但由于某些众所周知的原因，身在大陆的同学们会很不愉快：不管是文中的哪个选项，都会卡在 Visual C++ Build Tools 的安装上。主要是微...