一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: All - Page 4 | Spark1e的个人博客

> idc.wiki [link](https://idc.wiki/aff.php?aff=2878)

> Spartan Host [link](https://billing.spartanhost.net/aff.php?aff=2164)

> Bandwagong Host [link](https://bandwagonhost.com/aff.php?aff=70960)

> Oracle Cloud

### idc.wiki

### Spartan Host (斯巴达)

> 斯巴达由于目前没有抗DDoS的需求，已经drop.

### Bandwagong (搬瓦工)

### Oracle (甲骨文)

> 我的是位于韩国首尔的机房

一些我自己使用效果比较好的VPS推荐

> 问题代码：[Github - vite-plugin-auto-mpa-html](https://github.com/iamspark1e/vite-plugin-auto-mpa-html/blob/b66aadacf15c251925b01900a7e37f6cf453ba9e/tests/entry.test.ts#L66)

通过排除法发现，[mock-fs](https://github.com/tschaub/mock-fs)与Vitest的覆盖率引擎（c8/istanbul 都有此问题）有冲突，报错：

```
Cannot find package '@vitest/coverage-c8' imported from /my/code/path/to/vite-plugin-auto-mpa-html/node_modules/local-pkg/index.mjs
```

一般来说，找不到包是因为没有安装到node_modules下，但是反复确认、重装后确认在目录内，那么问题就是出现在其他地方。检查coverage时的输出发现，没有引用mock-fs的测试可以顺利通过。

进一步排查，考虑到是模拟目录下没有node_modules目录，在模拟目录下增加，即，将外部完整的node_modules挂载到mock目录下：

```javascript
const mockedProject = {
  "node_modules": mock.load(
    path.resolve(__dirname, '..', "node_modules")
  ),
}
```

覆盖率测试可以通过。

所以目前锁定，如果使用mock-fs虚拟一个目录，那么vitest在生成覆盖率时会读取mock-fs的目录，进而产生了此问题。

### Dive In

To be continued...

一个意料之外的包冲突

使用Vitest生成覆盖率报告时报错的解决方案

> 官方地址：[link](https://learn.microsoft.com/en-us/windows/powertoys/)

> Github地址：[link](https://github.com/microsoft/PowerToys)

### 从VSCode复制内容到其他编辑器带样式

偶尔会遇到复制JS/CSS代码出来，带了VSCode的主题颜色（黑底、代码高亮），如果需要放在邮件里会显得特别奇怪，使用PowerToys自带工具，快捷键 Ctrl+alt+win+v

### 批量图片resize

偶尔遇到剪辑时候想要导出图片，但是图片尺寸有问题，可以使用工具批量resize，还可以保存多个预设。

### FancyZones保存布局

神器，快速进入工作模式，能够保存多个布局，同时使用快捷键直接切换。

### HostFile 编辑

对于简单的切换Host非常实用，不过如果你是有多个开发环境的话，建议使用[SwitchHosts](https://github.com/oldj/SwitchHosts) 更加方便。

### 批量重命名

比如需要为高倍图增加retina后缀，可以右键，PowerRename，使用这个规则：

![power_rename_retina](/img/uploads/power_rename_retina.png)

### PowerToys Run

功能和alfred差不多的工具

微软难得的良心之作

PowerToys，Windows下的易用工具集

> 官方原文[地址](https://wiki.alpinelinux.org/wiki/Upgrading_Alpine)

> 查看当前官方稳定版[页面](https://alpinelinux.org/downloads/)

### 0. 执行升级前

强烈建议将当前环境备份，快照

### 1. 修改源

alpine的源地址是含有版本号的，因此需要修改源，改到最新的稳定版，执行：

```bash
setup-apkrepos
```

会列出可更改的源地址以及手工更改的选项(e)，这里选择e

旧地址可能形如：

```
http://dl-3.alpinelinux.org/alpine/v3.3/main
```

手工改为最新的版本号，笔者此时是3.17

> 如果你觉得每次都要修改版本号太麻烦，也可以使用`http://dl-3.alpinelinux.org/alpine/latest-stable/main` (community同理)。

### 2. 升级

```bash
apk update
apk add --upgrade apk-tools
apk upgrade --available
```

### 3. 应用修改

```
sync
reboot
```

Alpine升级到最新稳定版

### 结论

- 可以实现，需要借助`proxy_protocol`，Nginx和Apache都有实现；
- 需要进行套娃，即，如果想把ssh通过TCP方式暴露出来，需要在其外侧用Nginx/Apache包裹一次，综合考虑成本过高；

### 可能的策略

- 官方FRP的文档：[获取用户真实 IP](https://gofrp.org/docs/features/common/realip/)
- 第三方的FRP文档（非推荐，只是写的比较详细）：[获取访问者的真实 IP](https://doc.natfrp.com/bestpractice/realip.html)

### 自己的临时方案

使用非常用端口，配合`~/.ssh/config` 文件，实现平时链接隐藏端口号。

有关于通过frp进行TCP穿透的一些已知信息

参考我的[这篇文章](/post/cloudflare-warp-ipv6-only)，你可能配置过Cloudflare Warp来为IPv6 only的星尘配置IPv4访问，但是这个包看起来应该是与Scaleway的内部API有交互，因此会导致可能出现以下的错误：

```
Setting up scaleway-ecosystem (0.0.5-5)
scw-signal-booted.service failed
systemctl status scw-signal-booted.service
A start job for unit scw-signal-booted.service has failed
systemd[1]: Failed to start SCW signal successful boot.
```

解决办法就是，把之前建立的wgcf网卡先暂停掉，更新后再开启，

```bash
systemctl stop wg-quick@wgcf
# Restart service after `apt update` / `apt-get update`
# systemctl restart wg-quick@wgcf
```

Scaleway Stardust IPv6 only VPS stuck on `setting up scaleway-ecosystem`

Scaleway星尘(stardust)卡在apt update的解决办法

### Windows

* Bandizip(v6): 旧版没有广告，至于他提到的神马漏洞？emmm，不care。 [下载页](https://www.bandisoft.com/bandizip/old/6/)

### Sublime Text (v3) Packages

* convertChineseCharacters: 把从Chrome Devtool里拷贝的JSON中的中文unicode转换为正常的中文字符，ctrl+shift+p，输入unicode，查看所有convert快捷方式

一些我自己常用的软件链接

### 查看Stallion中提供的IPv6段

Stallion -> Virtual Server -> Networking -> 齿轮按钮 -> Network Settings.

![buyvm-network-settings](/img/uploads/buyvm-network-settings.png)

### 编辑interface文件

下面的内容均已上面管理台显示的为准，填入对应位置，然后保存interface，重启

```
iface eth0 inet6 static
	address xxx
	netmask 48
	gateway xxx
```

为BuyVM VPS添加IPv6

### 0. 使用的webpack环境

由于基于webpack4，因此[这一步](https://www.netlifycms.org/docs/custom-widgets/#writing-custom-widgets-as-a-separate-package)npm安装的包应为：

```bash
npm install --save-dev babel-loader@7 babel-core babel-plugin-transform-class-properties babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react cross-env css-loader@5.2.7 html-webpack-plugin@4 netlify-cms react source-map-loader@1 style-loader@2 webpack@4 webpack-cli@4 webpack-serve
```

Netlify CMS开发widget

## 什么是合字(ligatures)？

> 在西方字体排印学中一般表示将多于一个字母的合成一个字形。如印刷品中常常将拉丁字母两个字母fi的i上一点常与f的一钩合并，而德语字母ß原为ss等等。 —— [维基百科](https://zh.wikipedia.org/wiki/%E5%90%88%E5%AD%97)

合字首先是服务于西方字体的印刷的，一般是由于两个字母的间距不易调大，此时两个字母存在易重叠的部分。早期电脑软件无法进行合字替换，但现在由于OpenType技术流行，合字逐渐恢复了使用。例如苹果设备最常见的PingFang SC。

## 合字比较常见的情况

fish (PingFang SC)
fish (Microsoft YaHei)
fish (Roboto)
fish (Helvetica)
fish (Times)

> 有条件的同学可以在不同系统（如Mac和Win下对比看看）

## CSS强制不合字

```css
font-variant-ligatures: none;
```

> font-variant-ligatures 还有很多有趣的值，可以参见[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)

当然，这个属性也需要参考其兼容性，[Caniuse](https://caniuse.com/?search=font-variant-ligatures)

还有一种另辟蹊径的办法，就是从成因来看，字符之间距离过近导致合字更适合打印，且美观，那么我拉长字符间距，也可以避免合字。

## Dive In

### 哪个部分使合字生效？

首先得是OpenType渲染，其次，这个合字有对应的Unicode字符，所以此处涉及了一对多的转换。

### 哪些语言有合字？

根据维基百科，常见的有：

- 拉丁文字
- 丹麦语和挪威语
- 法语
- 德语
- 冰岛语
- 瑞典语

非拉丁语言的文字，如汉字和日文，虽然存在合字，如“招财进宝合体字biang”

另外值得注意的是，有一些计量单位也存在合字的情况，如“㎉”。

Spark1e

Category: all