blog
blog copied to clipboard
lmk123
个人技术博客，博文写在 Issues 里。
在 #99 中，我提到想要将划词翻译服务器的接口地址从 hs-api.limingkai.cn 改为 api.hcfy.app。由于仍然有很多用户使用旧版本的划词翻译，所以目前第一步只能是让服务器同时接收来自 hs-api.limingkai.cn 和 api.hcfy.app 两个地址的访问，这就涉及到在同一个 Node.js 应用里给两个不同的域名提供 SSL 证书。 我大致参考了这篇文章 [Multi-domain SSL in Node.JS with Certbot](https://levelup.gitconnected.com/multi-domain-ssl-in-node-js-with-certbot-8f0df5331d47)，核心要点就是可以使用 `httpsServer.addContext()` 方法来给多个域名提供证书。 我没有使用文中的 Certbot 生成证书，而是使用 acme.sh 分别为 hs-api.limingkai.cn 和...
三年前，在某某云的活动下，我买了一台服务器，吃灰两年后居然派上了用场。最近我重装了这台服务器，在网上查了一下，国内似乎用 Centos 的比较多，于是装了 Centos 8.0 系统（但是我最近关注到 Centos 8.0 再过两年就不维护了……算了先装上去再说），然后放了一个星期，今天再 ssh 登录上去的时候，看到了这条消息： ``` There were 5600 failed login attempts since the last successful login. ``` 也就是从这条消息开始，我的运维生涯开始了…… ## 配置 ssh 出现这条消息的原因是我在安装系统的时候用了 root...
划词翻译的网站目前挂在我自己的个人域名下 [https://hcfy.limingkai.cn](https://hcfy.limingkai.cn)，但是这样有一些问题： - 划词翻译作为一款独立的软件，有自己独立的域名才更合理。 - Chrome Web Store 在显示扩展的网址时，只能显示顶级域名，以至于现在划词翻译的提供方显示的是 `limingkai.cn`。 - Google AdSense 在填写网址时，只能填写顶级域名，不能填写二级域名，我申请的时候只能填写 [https://limingkai.cn](https://limingkai.cn)，但我的个人主页没有内容，审核无法通过。 于是，我购买了新的域名 [hcfy.app](https://hcfy.app) 并准备将网站迁移到新域名上，顺便将划词翻译服务器的接口地址 hs-api.limingkai.cn 也迁移到 api.hcfy.app。 ## 文档站的迁移 ### 一、将新域名添加进 Netilfy 首先得让新域名也指向文档站才行。 划词翻译的文档站托管在 Netilfy 上，要让...
书接上文：#99 在上文中，我提到我需要把 limingkai.cn 从 DNSPod 迁移到 Cloudflare 来使用页面跳转功能。本来以为只是改一下 nameservers 的事情，没想到也踩了很多坑。 我的域名是在阿里云注册的，所以当然是去阿里云修改 nameservers（阿里云里叫 DNS 服务器）了。把 nameservers 改成 Cloudflare 的之后阿里云提示我”修改任务正在运行中“，然后大概五分钟后我刷新了一下页面，这个提示就没有了；大概 15 分钟后，Cloudflare 发邮件告诉我域名已经由它们接管了。 然后，我开始设置页面跳转规则，但是死活不生效——我 Google 了好长时间，尝试了各种组合，hcfy.limingkai.cn 就是不能 301 跳转到 hcfy.app。 我开始怀疑是不是 Cloudflare...
最近在开发划词翻译的时候，半个月内整出了两起 P0 事故： - https://github.com/lmk123/crx-selection-translate/issues/1115 - https://github.com/lmk123/crx-selection-translate/issues/1125 感觉苗头不对，我准备自我反思一下。 先说说这俩 P0 出现的原因。 https://github.com/lmk123/crx-selection-translate/issues/1115 的原因是我在开发[记住用户选择的双语 / 原文 / 译文选项](https://github.com/lmk123/crx-selection-translate/issues/1037)的时候，在读取用户选择的选项时没有设置默认值，代码如下： ```js browser.storage.local.get('pageShowType').then(({ pageShowType }) => { setPageShowType(pageShowType) // ... }) ``` 由于这是一个新增的选项，所以当用户更新到新版本之后，这里读取出来的 `pageShowType`...
在今天之前，我一直认为 `textContent` 与 `innerText` 是等价的，只不过前者是标准的，后者是非标准的。所以，我一直以来都使用 `textContent` 读取一个元素的文本内容。 但是，今天遇到了一个 bug 让我发现，这两者是有区别的，而且，某些情况下，`innerText` 更适用一些。 ## 先说说 bug 这个 bug 出在划词翻译当中，先看图：  这段英文出自 [https://github.com/websockets/ws](https://github.com/websockets/ws)，图中的英文段落是一个 `p` 元素，划词翻译的全文翻译功能会读取这个元素的 `textContent` 并将翻译结果显示在下方。这个 bug 就在于，我发现翻译结果不太准确，而且有一些地方有不易察觉的空格，注意图中的“该扩展使 客户端”，其中“使”和“客”中间有一个空格。 在经过一番调试，我发现 `p.textContent` 读取出来的英文文本...
由于最近发生了一起“误将 Firefox 安装包发到了 Chrome 扩展商店“的 P0 事故（详细介绍见 #96），我开始考虑能不能将这俩安装包合二为一，这样就肯定不会再出现这个问题了。 我梳理了一下我以前分为两个安装包的原因，发现似乎确实可以合二为一。下面逐个分析一下 Firefox 与 Chrome 的不同之处，以及合二为一的解决方案。 ### `browser` vs `chrome` Firefox 的扩展程序相关的 API 都放在全局变量 `browser` 下面，但是 Chrome 的放在全局变量 `chrome` 下面，且 `browser` 是基于 Promise...
最近有划词翻译的用户报告了一个 bug，说是语种选择的弹窗被文本框、翻译结果和切换语种的小三角箭头遮挡了，如下图：  我首先检查了它们的 `z-index` 属性，发现这些遮挡了弹窗的元素都没有设置过 z-index，那为什么会遮挡住设置了 z-index 的弹窗？ 谷歌一番之后，我发现了 CSS 中一个新的概念——堆叠上下文（stacking context）。 上图中的 HTML 结构可以简化为： ```html 定位元素 弹窗 文本框 翻译结果 ``` 按照我的理解，这其中只有弹窗设置了 z-index，那么它应该显示在最上方，但事实上它却被文本框和翻译结果遮挡了，原因是：弹窗的父元素是一个新的堆叠上下文，所以弹窗的 `z-index` 只在它的父元素范围内才生效；而文本框和翻译结果也分别创建了新的堆叠上下文，在 DOM 中排在后面的堆叠上下文会显示在上面。 > MDN...
在很久以前，我曾经[介绍过一些免费好用的静态网站托管服务](https://github.com/lmk123/blog/issues/55)，在文章中，我最终推荐了 [Netlify](https://www.netlify.com/)。 后来我听说 [Vercel](https://vercel.com/)（前身是 [https://now.sh](https://now.sh)，前面的文章里也介绍过）支持的新加坡节点访问速度比 Netlify 还快，所以我将[划词翻译的文档站](https://hcfy.limingkai.cn/)部署到了 Vercel，但大概是在两三个月前，我发现访问速度变慢了，于是又迁回了 Netlify，结果我发现 Netlify 的访问速度也慢的不行了，打开一个网页要 3 秒甚至更长的时间。 我开始寻找其它静态网站托管服务，网上基本推荐的是 GitHub Pages、Cloudflare 或国内的[腾讯云对象存储 COS](https://curl.qcloud.com/ihRaBBW1) 这类服务，但我最终没有使用，原因如下： - GitHub Pages、Cloudflare 这些国外的服务也很慢。 - GitHub Pages 不能免费支持私有仓库，但 Netlify 支持。 -...
最近花了点时间将[划词翻译的文档站](https://hcfy.limingkai.cn)从 [VuePress 1](https://vuepress.vuejs.org/) 迁移到了 [Docusaurus 2](https://docusaurus.io/)（类似于 VuePress，它是基于 React 的静态网站生成器）。 我将迁移过程和一些不同之处做了总结，希望能帮到跟我一样需要迁移的同学。 ## 为什么要迁移？ 在刚开始开发划词翻译 v7 的时候，我用的是 Vue.js，当时 Vue.js 3 还没有发布，于是自然而然的就用 VuePress 1 搭建了文档站，即使后来我改为使用 React Hooks 开发了划词翻译 v7，文档站也一直延用至今。 最近，我想在文档站上展示一些业务相关的页面，比如注册 / 登录、用户后台、活动页面等。现在，我有 3...