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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

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

## 什么是合字(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”

另外值得注意的是，有一些计量单位也存在合字的情况，如“㎉”。

合字 —— 一个被误认为Bug的Bug

前端测试时经常会被问到的fi合字问题

## 最新的正确写法

```css
word-break: normal;
overflow-wrap: anywhere;
```

来源：W3C文档，关于废弃属性值 `word-break: break-word;` 的平替解释 [Link](https://www.w3.org/TR/css-text-3/#word-break-property)

## 与之前的比较

在iOS15.7及其以前，都可以只用 `word-break: break-all;` 来实现，效果没有问题，但是在新的iOS16（16.0.2，16.0.3）样式显示均破坏，于是开始了debug……

## 废弃的属性？！

`word-break` 一共就那几个属性值，挨个试试吧。

试到 `word-break: break-word;` 的时候，好嘛，两边显示效果终于一致了。

但是MDN显示这是已经废弃的属性值啊([Link](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break))，怎么新版的safari反而支持回来了呢？

## 具体是否废弃，还得w3.org说了算

> w3c关于word-break的最新定义[地址](https://www.w3.org/TR/css-text-3/#word-break-property)

这里贴上一段在2022-10-13的w3c原文：

> For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

这段话概括来说就是，废弃了但是没完全废弃，对于传统内容，第一，`word-break: break-word` 还能用，暂时不废弃，安心用；第二，除了用废弃的这个属性，你也可以选择两个标准内的属性组合，实现break-word的效果，即开篇给出的 word-break + overflow-wrap的组合。

> 不过需要注意的是！Caniuse里对于`overflow-wrap: anywhere;` 的可用度可能不是最新的，里面标注iOS上的safari截至最新版本仍不支持，但是我在真机确实可以用的。

![`overflow-wrap: break-word`时，iOS16以上与原来的`word-break: break-all`一致](/img/uploads/overflow-wrap是break-word.jpg "`overflow-wrap: break-word`时，iOS16以上与原来的`word-break: break-all`一致")

![`overflow-wrap: anywhere`时，15.7 与 16 都能正常换行](/img/uploads/overflow-wrap是anywhere.jpg "`overflow-wrap: anywhere`时，15.7 与 16 都能正常换行")

word-break属性在iOS16下出现了问题

iOS16下的标准自动换行方式

## 为什么Windows不适合作为开发使用？

对于我个人的前端开发体验而言，主要在这几个方面：

* 利用Node.js实现一些自动化功能，代码内经常混入一些Windows无法运行的bash命令；
* Windows下一般不只有开发环境，还会安装一些其他的软件、游戏等等，相互影响；
* 部分库没有做`cross-env`兼容，在Windows下执行会有意料之外的bug；
* Windows的目录结构在实际使用时会有意料之外的问题；

因此，WSL是在Windows下进行开发更好的选择。

> 截止本文编写时，我仍不建议使用WSL2的版本，会给开发带来一些不必要的困扰，稳定后再体验。

## 开启WSL

有关于如何在Windows下开启WSL功能，很多文章在一年前都进行了说明。在当前版本号1909下，只需要注意以下几点：

1. 可以正常使用Microsoft Store（也支持利用zip包安装，具体详见[官方文档](https://docs.microsoft.com/en-us/windows/wsl/install-manual)）；
2. 开启“适用于Linux的Windows子系统”，设置路径在：控制面板\程序\程序和功能 -> 左侧“启用或关闭Windows功能”，这一步骤需要进行重启使得更改生效；

## 安装

安装比较简单，利用Microsoft Store搜索“Linux”，选择你喜欢的版本进行安装即可。

> 安装会默认安装至C盘，如果你的C盘容量非常“宝贵”，建议使用[LxRunOffline](https://github.com/DDoSolitary/LxRunOffline)工具进行迁移，这个工具还可以进行管理等等功能，有兴趣的可以研究一下。我们下载它的Release并在Windows下解压到合适的目录下，利用PowerShell环境运行exe即可执行相关命令。

等待下载完成后启动，需要等待一些时间，系统会自动对你选择的Linux发行版进行配置和初始化，输入你的用户名密码即可开始使用。

## 配置

配置上正常先将系统自带的各种包更新升级`sudo apt update && sudo apt upgrade`

### ProxyChains

由于WSL使用的是父主机（即Windows系统）的网络环境，因此在WSL环境下，部分软件安装配置时，会存在无法访问的情况（例如Github Release的文件分发地址……），强烈建议先配置[ProxyChains-NG](https://github.com/rofl0r/proxychains-ng)，可以选择手工下载源码make安装，也可以利用包管理器（目前包管理器版本较低，为3.x版本，仓库目前已经到了4.x版本，如果有能力建议使用源码安装，我使用的Ubuntu-18.04版本需要安装make与gcc包），`sudo apt install proxychains`进行安装，这里不赘述。

> 2022年10月，再次从包管理安装`apt-get install proxychains-ng`已经可以安装v4版本的proxychains了

安装好后在`/etc`目录下编辑（如果是源码安装，这里是创建）`proxychains.conf`文件，在文件内写入配置信息：

```bash
[ProxyList]
# add proxy here ...
# meanwile
# defaults set to "tor"
socks5 127.0.0.1 1080
```

在配置完成后，运行命令前带有`proxychains`即可通过代理，例如如下命令即可测试是否成功应用代理：

```bash
proxychains curl myip.ipip.net
```

如果显示代理，即配置成功。

### Node.js & NPM

这里其实没什么需要详细说明的，和我们在服务器环境配置Node.js同理。

> 在官网的角落可以找到一个相对隐蔽的Node源地址，配置后可以直接通过包管理器快捷安装Node，相比于二进制与源码安装更为简单，其[仓库地址](https://github.com/nodesource/distributions)

这里我遇到了Bug，在配置WSL环境前，我没有移除Windows下的Node环境，在完成了上述安装步骤后，`npm -v`提示“Unable to correct problems, you have held broken packages.”，看到对应报错地址指向了`/mnt/c`下的node目录时，明白了npm命令是调用了Windows环境下的npm，因此，卸载Windows下的nvm(**请通过“控制面板”内的软件功能进行卸载**)与Node.js后，移除WSL内已安装的Node.js并重新安装，一切正常工作，完美。

### Oh my Zsh

前文提到过，curl和wget目前都可以通过proxychains进行代理，这里其实没有太大的困难，但是，考虑到可能的DNS污染相关，这里我把官方的curl地址修改为`sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"`并使用代理，安装成功。

> 如果提示SSL相关问题，wget下可以通过`wget --no-check-certificate`临时关闭SSL检查。

这里我还遇到了一个无法连接的问题，我在安装的时候提示我`raw.githubusercontent.com`指向了0.0.0.0，查找[相关issue](https://github.com/microsoft/WSL/issues/3761)，执行以下命令查询是否有相关的软件控制网络或代理，检查发现我的“火绒”影响了，临时退出即可。

```bash
powershell.exe "Get-CimInstance -Namespace root/SecurityCenter2 -ClassName AntivirusProduct" | grep displayName
```

### SSH

配置WSL的git环境需要对应的SSH-key，按照正常的方法，可以生成，但是无法复制出来，**WSL具有可以直接执行Windows环境exe程序的特性**，因此可以通过`cat ~/.ssh/id_rsa | clip.exe`直接复制出来。

然而生成的key无法被Github识别，提示“key is invalid”，查阅得到[这个结果](https://stackoverflow.com/questions/47859437/windows-10-openssh-key-invalid-format)，虽然并不是完全一致的问题，但是提供了思路，将SSH生成的命令修改，删除指定长度“4096”的设置（-b 指定密钥长度。对于RSA密钥，最小要求768位，默认是2048位。DSA密钥必须恰好是1024位(FIPS 186-2 标准的要求)。）

```bash
ssh-keygen -t rsa -C "your_email@example.com"
```

配置到Github，成功。

## 卸载与导出

如果之后不再需要WSL环境，可以通过如下命令进行卸载：

```bash
wslconfig /unregister <wslconfig /list得到的对应名称>
```

额外的，建议将对应的UWP程序同时右键卸载进行彻底移除。

如果希望备份迁移，可以使用前文提到过的LxRunOffline工具进行处理，可以参考项目的Readme进行操作。

利用WSL在Windows下获得更好的开发体验

始终下载最新稳定版：
<https://fedorapeople.org/groups/virt/virtio-win/direct-downloads/stable-virtio/virtio-win.iso>

历史版本（相对速度较快的）
<https://fedorapeople.org/groups/virt/virtio-win/direct-downloads/archive-virtio/>

来源：<https://pve.proxmox.com/wiki/Windows_VirtIO_Drivers#Using_the_ISO>

Virtio-win镜像的下载地址

步骤：

1.运行->CMD(管理员)->输入DISM /online /Get-CurrentEdition 
看你的Edition ID是什么，如果是Evaluation的话，例如Standard一般就ServerStandardEval把后面Eval那四字母去了就是你的Edition ID。
如我的就是ServerStandard

2.然后输入DISM /online /Set-Edition:<edition ID> /ProductKey:XXXXX-XXXXX-XXXXX-XXXXX-XXXXX /AcceptEula 
Edition ID自己填刚才得到的那个Server Standard key，ProductKey后面把序列号填上去就行，这个方法也适用于Standard转DataCenter（记得<edition ID>，不能把<>也输入进去，只填 edition ID 就OK了）

3.重启操作系统，Windows Server 2012从Evaluation版转成正式版

windows server 2012 evaluation(评估版) 转普通版

<https://zhuanlan.zhihu.com/p/506237481>[](https://news.jsyks.com/n_2cc63a)



<https://news.jsyks.com/n_2cc63a> （这个我认为不如上一个详细）



<https://zhuanlan.zhihu.com/p/517508865> （可以着重背这个里面的扣分，2022新规之后，扣分还是有些乱的，做题切记，新规没有2分，因此非叠加的情况下，有2分的都是错的）



上面的扣分罚款补充几条：

* 机动车驾驶人参加审验教育时在签注学习记录、学习过程中弄虚作假的，相应学习记录无效，重新参加审验学习，由公安机关交通管理部门处一千元以下罚款。有违法所得的，由公安机关交通管理部门处违法所得三倍以下罚款，但最高不超过二万元；没有违法所得的，由公安机关交通管理部门处二万元以下罚款。
* 请他人代为接受交通违法行为处罚，记分，并支付经济利益的，处以经济利益三倍以下，但最高不超过五万元。



评论区里有老哥 分享了新规里的中英简写 ，我这里也抄录一份：

* 定速巡航系统 CSS cruise control system

 自适应巡航 ACC adaptive cruise control

 自适应前大灯系统 AFS adaptive front-lighting system

 防抱死系统 ABS anti-1ock braking system

 自动（紧急）刹车辅助 AEB autoemergency brakingelectronic brake assist

 紧急制动辅助 EBA (或emergency brake assist)

 前方防碰撞预警 FCW forward collision warning

 车道偏离预警系统 LDw lane departure warning

 自动变道铺助系统 ALC auto lane change

 牵引力控制系统 TCS traction control system

 实时交通信息 TMC traffic message channel

 交通标志识别系统 TSR traffic sign recognition

 电子收费 ETC electronic toll collection

 电子稳定系统 ESP electronic stability program

 电子制动力分配系统 EBD electric brakeforce distributior

 车辆导航 GPS global positioning system

 盲点铺助 BSA blind spot assist

 盲点监测 BSD blind spot detection

给后来人的一些科目一小经验

## 0. pkg是真的很方便

[pkg](https://www.npmjs.com/package/pkg)是Vercel推出的一款打包工具，与Serverless正好相反，他的目的是打包为单文件、多平台可用的可执行文件。

对于一般的node应用，按文档例子配置即可，对于Next.js应用，需要进行以下的额外配置。

## 1. 配置

### 1.1 Install & Config

首先全局安装pkg

```bash
npm install pkg -g
# or
# yarn global add pkg
```

pkg可以通过命令行传参，也可以在package.json里进行配置，由于next.js略微复杂，这里示例在package.json

```json
  "pkg": {
    "assets": [
      ".next/**/*",
      ".env",
      "public/**/*"
    ],
    "scripts": [
      ".next/server/**/*.js"
    ],
    "targets": [
      "node14-linux-x64"
    ],
    "outputPath": "dist"
  },
  "bin": "index.js",
  "main": "index.js"
```

这里的index.js是官方的[Custom Server](https://nextjs.org/docs/advanced-features/custom-server)方式，pkg需要指定入口，因此不能使用原来的next包内的server。

> bin和main设置一个即可。

## 2. pack

打包过程基本不需要介入，我这里涉及了node的sharp包，需要额外引入，按照这个[issue](https://github.com/lovell/sharp/issues/826)的方案，复制相关的静态文件（或者dll）

请注意，如果使用了.env请务必引入在assets中。

使用pkg打包你的Next.js应用

## [GlitchTip](https://glitchtip.com)是什么

一个与Sentry几乎类似功能的错误捕获、监控程序，开源在gitlab.com，提供了 __linux/amd64__ 和 __linux/arm64__ 双架构的Docker镜像，要知道，Sentry还是不能支持ARM架构的，对于有甲骨文4C24G的同学，无法部署Sentry，可以将GlitchTip作为平替。

## 安装

> 官方的 [自建安装指南](https://glitchtip.com/documentation/install)

我这里选择docker-compose的方案，基本按照官方文档流程下来，走通没有问题。

## 存在Bug

我部署的版本是 v1.22.5，目前版本在部署中发现一些问题，我这里提供我的解决方案。

### Bug1：怎么配置EMAIL_URL?

官方文档漏了最重要的一个配置，举例说明，比如使用Yandex的个人域名邮箱，SMTP服务端口为 __SSL模式下的465端口__ ，因此，EMAIL_URL的格式应该为：

```
EMAIL_URL=smtp+ssl://user@example.com:password@smtp.yandex.com:465
```

> [Related Issue](https://github.com/joke2k/django-environ/issues/212)

### Bug2: 如何“彻底”禁用注册?

[官方文档](https://glitchtip.com/documentation/install#configuration) 提供的变量 `ENABLE_OPEN_USER_REGISTRATION` 默认为关闭，但是刚进入界面仍然可以注册，这是因为在 [代码](https://gitlab.com/glitchtip/glitchtip-backend/-/blob/26bb1b75aaa634b2be6aa0ef4884e22c57d78755/users/utils.py#L8) 里有这样一个判断:

```python
if not enable_user_registration:
    enable_user_registration = not Organization.objects.exists()
```

所以需要至少创建一个Organization，登录界面的注册才会被隐藏。

__是的，你没有看错，是隐藏……__ ，如果你手工重定向到 `/register` 依然能够访问，点击注册会请求 `/rest-auth/registration` ,依然会请求成功，完成注册……

想必有朋友已经有了想法。我是将GlitchTip放在了Nginx的后面访问，因此，加了两条403的路由（其中界面的路由通过首页定向依然不行，因为是前端路由……）

```conf
location /register { return 403; }
location /rest-auth/registration { return 403; }
```

算是临时解决了，如果之后有更好的方案，我再更新。

> Q: 隐藏了注册相关路由，我该怎么创建新用户呢？
>
> A: `docker-compose run migrate ./manage.py createsuperuser`, 参考你的docker-compose.yml里，migrate对应的服务名称。

部署Sentry的轻量替代品——GlitchTip

### Step 0. Check Requirements

- GPU Driver (Miracast support)
- Wireless Network Adapter

### Step 1. Re-add PPI Projection

[link](https://blog.csdn.net/qq_37798548/article/details/122825511)

### Step 2. Re-add "Miracast PPI Receiver"

[link](https://bbs.pcbeta.com/forum.php?mod=viewthread&tid=1912839)

> [How to install .cab file](https://zh.101-help.com/77b6cd11bd-zai-windows-10zhong-an-zhuang-cab-filede-zui-jian-dan-fang-fa/)

Win10 LTSC 2021补充无线显示器（Miracast）功能

## OL + LI

有HTML结构如下：

```html
<ol>
 <li>Text1</li>
 <li>
 	<ol>
 <li>Text2.1</li>
 <li>Text2.2</li>
 </ol>
 </li>
</ol>
```

## 利用CSS自动添加序号

```css
ol {
 counter-reset: section; 
 list-style-type: none;
}

li::before {
 counter-increment: section; 
 content: counters(section,".") " "; 
}
```

## 兼容性

> Caniuse [Link](https://caniuse.com/?search=counter-increment)

IE8及以上浏览器均支持，可以放心使用。

Spark1e

Category: all