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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: Frontend - Page 3 | Spark1e的个人博客

说到解析字符串，第一时间，`new Date(dateString)`，但这样是存在问题的。

有如下一段非常简单的代码：

```javascript
new Date('2021-10-1 12:00:00')
```

请问他返回的是什么？

## 标准Date对象？No！

在IE下执行，返回 `[date] Invalid Date`;
在iOS(14.6)的Safari下执行，返回

```
[object Date]
null
```

虽然Date构造函数能够对日期字符串尝试进行解析，但是不同浏览器的支持程度并不一样，因此，贸然直接parse日期字符串是非常危险的。

## 正确方案

首先，目前绝大多数现代浏览器对于'/'的支持是ok的，所以简单而言可以进行正则匹配替换，即，

```javascript
new Date('2021/10/1 12:00:00')

// dateString.replace(/-/g, '/') // 需要注意，是否与UTC-时区的‘-’冲突
```

最好的办法是使用 [moment](https://momentjs.com/) / [day.js](https://day.js.org/) / [date-fns](https://date-fns.org/)

> moment由于“不可变”性以及使用的非现代API，目前不推荐使用，但其兼容性较好，请酌情。

如果不能够使用这一类库，就需要根据项目需要自行拆解，进而设置Date对象。

## 最佳方案

既然不应该使用日期字符串，那么毫秒数就是更好的选择啦！

正确的解析时间字符串

### WSL 是什么？

Windows Subsystem of Linux, 属于在Windows内加载的旁系统。WSL1与WSL2的实现不一致，WSL2更像是一个系统内的虚拟机，而WSL1是通过兼容层实现了类似与Linux的运行环境，如果涉及底层的一些操作或者命令则不存在。

更详细的对比请参阅: [Comparing WSL 1 and WSL 2
](https://docs.microsoft.com/en-us/windows/wsl/compare-versions)

### 对于前端同学的选择

我的需要最基本的有：可接受的文件io，Node.js，npm/yarn，容器（运行本地Debug环境）。

那么如上的需求，可以考虑WSL1+WSL2的搭配方案，即需要容器的环境使用WSL2挂载项目文件夹进行执行，否则则在WSL1内正常使用Node开发。

> 如果你能接受 __【挂载盘】较慢的io速度__ 以及 __每次需要现查的主机/WSL2 IP地址__ ，那么可以只使用一个WSL2环境。

### WSL快速配置

> 官方旧版安装指南 [Windows Subsystem for Linux Installation Guide for Windows 10](https://docs.microsoft.com/en-us/windows/wsl/install-manual)

> 2021-12-01 官方文档更新了，这个步骤不是很清晰，补充几个关键命令……

```powershell
wsl --install -d Debian # -d <DistributeName>
# 安装完毕后关闭WSL窗口，直接开始导出
wsl --export Debian C:\Debian.tar
wsl --import Debian-WSL1 <SomePathToDir> C:\Debian.tar
wsl --import Debian-WSL2 <SomePathToDir2> C:\Debian.tar
wsl --unregister Debian # 删除原来安装的默认版本
wsl --set-default Debian-WSL1 # 设置WSL1为默认版本
wsl --set-version Debian-WSL2 2 # 将其中一个版本转换为WSL2
```

这里我使用 Manual Installation，同时开启WSL2所需的Features，并安装Linux kernel update package。截止至Step4。

我选择不将所有WSL版本都设置为2，即不设置默认使用版本2。

这时安装的WSL即为一代，选择你希望安装的distribution，我这里选择的Debian。

正常安装并在内部配置好所需的开发工具后，将WSL1导出一份用来生成WSL2。

### 配置Node.js环境

前文赘述了不少关于npm的问题，其实根治的方案就是选择一个node版本控制工具，比如nvm，它会将不同版本的包管理在一个有权限的子目录内，“根本上”避免了权限问题。

> 这里我选择的nvm，官方Guide [Readme](https://github.com/nvm-sh/nvm#installing-and-updating)

安装好nvm并使用nvm安装Node.js以及其他工具如yarn等工具后，我们就可以开启“平行宇宙”，将环境一分为二了。

> Yarn (classic) 目前推荐的安装方案：`npm install -g yarn`

> "开启“平行宇宙”，将环境一分为二"的梗来自于Marvel的"What If..." 04，古一将Doctor Strange一分为二，使得同一时间线内有了两个Doctor Strange。

### 切分环境

打开PowerShell，确保容器目前处于关闭状态。

> 手工关闭，`wsl --shutdown`

首先需要把已有的导出为一个档案文件，

```cmd
wsl --export <DistributionName> <FileName>
```

导出后，再使用import进行导入，这里可以指定安装位置，因此 __也可以用来移动WSL安装位置__ :

```cmd
wsl --import <AnotherDistributionName> <InstallLocation> <FileName>
```

验证可以使用`wsl --list -v`，这时我们已经有了两个WSL1。接下来我们转换其中一个为WSL2

```cmd
wsl --set-version <AnotherDistributionName> 2
```

再执行`wsl --list -v`就可以得到两个版本的WSL共存了。

> 使用同一个环境切分，可以比较方便的处理同一个文件夹下的文件，避免了由于不同用户导致的权限问题。

### WSL2容器解决方案

> Docker Desktop v4开始，对于商业公司使用作出了明确限制，如果涉及商用，就需要使用付费plan，因此本文介绍的都是使用[Podman](https://podman.io/) 进行容器管理的方案。

#### Podman安装

其它WSL底层系统请参考[Podman Installation Instructions](https://podman.io/getting-started/installation)

```bash
sudo apt-get -y install podman
```

#### Podman登录Docker注册表

```bash
podman login your.registry.com
```

#### Podman拉取镜像并运行

```bash
podman pull <image>
podman run <custom-args> <image>
```

由于缺失systemd和journal，可能会启动时遇到报错，可以在执行时增加参数`--cgroup-manager=cgroupfs --events-backend=file`，或者直接在配置文件里进行全局设置：

```bash
vim /etc/containers/containers.conf
```

```conf
[engine]
events_logger="file"
cgroup_manager="cgroupfs"
```

#### Podman停止、列出镜像

```bash
podman ps -a
podman stop <container> && podman rm <container>
```

### WSL2实用命令

#### [如何获取主机IP](https://pscheit.medium.com/get-the-ip-address-of-the-desktop-windows-host-in-wsl2-7dc61653ad51)

```bash
ipconfig.exe | grep 'vEthernet (WSL)' -A4 | cut -d":" -f 2 | tail -n1 | sed -e 's/\s*//g'
```

使用WSL快速搭建开发环境

## Why not use Webpack 5 ?

因为目前有些大型的项目还在依赖Webpack4，比如我正在用的Storybook和flareact。

如果安装最新版的各种loader，最常见的错误就是`TypeError: this.getOptions is not a function`，所以要么开发时锁定loader版本，要么根据我下面的列表进行调整devDependencies。

## Lastest version of Webpack4 loaders

- css-loader@5.2.7
- sass-loader@10.2.0
- postcss-loader@4.2.0
- less-loader@7.3.0
- mini-css-extract-plugin@1.6.2
- copy-webpack-plugin@6.4.1

> Webpack4对于mjs文件处理存在问题，可以增加一条以下规则：
> ```javascript
> {
>     test: /\.mjs$/,
>     include: /node_modules/,
>     type: "javascript/auto",
> }
> ```

Webpack 4最后兼容的loader

## What is OpenSearch

OpenSearch是一个通用的搜索协议，主要是为了给浏览器提供“搜索引擎”探知，也就是说，支持了这个功能的网站，可以在较为新的浏览器地址栏添加搜索引擎或者直接进行搜索，如Gtihub和npm。

## Example

我们接下来以npmjs.com举例说明。

查看页面源代码，我们可以找到一行meta标签信息：

```html
<link data-react-helmet="true" href="https://static.npmjs.com/osd.xml" rel="search" title="npm package search" type="application/opensearchdescription+xml"/>
```

其中`type="application/opensearchdescription+xml"`声明了这是一条对OpenSearch支持的元信息，`rel="search"`，链接到了一个xml文档，我们打开可以看到：

```xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>npm</ShortName>
<Description>Search for packages on npm</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16" type="image/x-icon">https://static.npmjs.com/favicon-16x16.png</Image>
<Url type="text/html" method="get" template="https://www.npmjs.com/search?q={searchTerms}"/>
</OpenSearchDescription>
```

非常简单，首先最外层及OpenSearch协议标准，使用ShortName字段定义一个名称，可以带有描述、Icon，其中最主要的是Url字段。

这个字段提供了搜索需要的请求地址以及方法，在浏览器地址栏搜索时，会使用用户输入的字符替换`{searchTerms}`，并按照xml配置的方法进行请求，因此我们在自己实现时，主要需要将其修改为我们页面的搜索请求接口。

如何让网站支持OpenSearch

> 当前npm版本7.21.1，yarn使用classic版本，解决方案可能只适用于Linux环境下，请知晓。

### npm

#### npm install -g 各种权限问题

在初始化安装好node和npm后执行以下命令，设置对应目录的权限为当前用户：

```bash
sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/lib/node_modules
# For npm version smaller than v7, the path may be `/usr/local/lib`
# sudo chown -R $USER /usr/local/lib/node_modules
```

#### npm lifecycle warning

```
npm WARN lifecycle The node binary used for scripts is /var/folders/g_/dslq6ff90pn_wyjv5g6578qm0000gn/T/yarn—1577473189287-0.1962072526914138/node but npm is using /usr/local/Cellar/node/13.5.0/bin/node itself. Use the `—scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
```

警告中已经提示了，需要执行 `npm config set scripts-prepend-node-path true` 解决。

### Yarn (Classic)

> npm遇到的主要是global安装的问题，主要涉及了相关的目录，以下[Yarn官方推荐的方案](https://classic.yarnpkg.com/en/docs/cli/global)也可以类比配置到npm已解决global安装问题。

#### Yarn全局安装到指定位置

```bash
yarn global add nodemon --prefix /usr/local
```

这样的好处是不必修改环境变量path，对于一到两个全局命令比较实用。

#### Yarn设置全局安装位置

```bash
yarn global bin
```

会回显目前的全局安装的可执行文件的系统链接位置，如果不希望设置到`/usr`相关的目录，则可以通过：

```bash
yarn config set prefix ~/.yarn
```

> `yarn global dir`会显示全局包的实际安装路径，如果磁盘容量有限可以考虑修改。

设置到其他目录，如果这样配置需要在全局环境变量增加yarn的全局位置，以bash为例，在文件最后添加一行：

```bash
export PATH="$(yarn global bin):$PATH"
```

npm/Yarn(v1)问题解决方案一览

在日常与 ~~黑洞~~ NPM Package 打交道的过程中，我们可以使用Github Dependent Bot等工具，检测项目中的哪些依赖可能存在隐患，对应什么等级，如果是使用npm，可以通过`npm audit fix`尝试自动修复，但是Yarn只提供了`yarn audit`检测，并没有合适的fix方法。

## [yarn-audit-fix](https://www.npmjs.com/package/yarn-audit-fix)

通过这个第三方包，可以间接实现`yarn audit fix`，详细使用请看文档，最简单的情况可以直接：

```bash
npm_config_yes=true npx yarn-audit-fix
```

## Can't find patched version that satisfies glob-parent@^3.1.0 in >=5.1.2

如果遇到类似的，无法跳版本升级的情况，可以通过下面的方式，强制跳版本更新，强烈建议更新后进行全面的测试。

```bash

```

修复Yarn.lock中的vulnerability

## 1. input聚焦导致页面缩放

老生常谈的问题，这里只做一个备注：

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
```

## 2. iOS 自动填充密码

如果你的form表单符合iOS的预期，那么会触发自动填充，如果你在表单处做了自定义事件那么可要当心了。

1. iOS自动填充无视表单submit事件

那么我们就需要为其补上原生的method和action，来完成其跳转

> 请注意，这里提交的为“application/x-www-form-urlencoded”，需要在请求处理时注意，一个比较简单的方法：`Object.fromEntries(new URLSearchParams(searchStr).entries());`

## 3. POST重定向后到达的页面仍然是POST请求

请查询 [MDN 重定向](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Redirections) 使用3xx状态码需要保持方法一致，只有303是个例外，会转为GET请求。

有关移动端表单输入与提交的二三事

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```

在使用媒体查询时，请务必确认页面内的meta标签是否含有viewport，如果没有，则不能生效。

媒体查询生效的必要条件

## 前言

前端开发时经常会遇到用户需要同意协议才能进行提交的操作，此时，如果原本使用的就是表单的方式，那么在用户未同意时disable提交按钮是最为稳妥的方案。

> 当然，还是那句老话，前端所有的验证仅仅是为了“用户体验”， 如果涉及其他考量，请务必后端再判断一次！

然而，disable的元素，是不能够触发事件的，也就是说，没有办法在click与submit时友好地进行提示，这与我们的预期不符，因此，这里推荐几种hack方案。

<iframe height="265" style="width: 100%;" scrolling="no" title="disabled-button" src="https://codepen.io/arctome/embed/yLMKxqm?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/arctome/pen/yLMKxqm'>disabled-button</a> by arctome
  (<a href='https://codepen.io/arctome'>@arctome</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 1. CSS大法好

```css
input[disabled] {pointer-events:none}
```

仅此一行，解决问题，什么原理呢？

> `pointer-events:none`元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

也就是说，我们将其事件“转移”，disable触发不了，让他上级处理，能够达到一样的效果；

<iframe height="265" style="width: 100%;" scrolling="no" title="disabled-button-css" src="https://codepen.io/arctome/embed/JjWLaQN?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/arctome/pen/JjWLaQN'>disabled-button-css</a> by arctome
  (<a href='https://codepen.io/arctome'>@arctome</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


让disable的元素“动”起来

随着全球IPv4资源的枯竭，VPS商家衍生了一种新的IPv6 only VPS，由于不占用商家的IPv4资源，因此可以压低价格。然而，VPS上面如果希望运行一些服务，那么势必需要IPv4的接入，我们可以通过Cloudflare的CDN让只有IPv4的用户访问，但如果机器需要访问如Github等，只有IPv4的网站该怎么办呢？一些大佬想到了使用Cloudflare的[Warp服务](https://1.1.1.1/)来实现，本文介绍自己在配置的成功方案。

## STEP 1. 安装Wireguard

> 执行`uname -a`查看内核，内核版本5+可以使用wireguard-tools, 否则请使用 [wireguard-go](https://github.com/WireGuard/wireguard-go)

确认内核版本后，如果选择升级至5+，请执行：

```bash
sudo apt -t $(lsb_release -sc)-backports install linux-image-$(dpkg --print-architecture) linux-headers-$(dpkg --print-architecture) --install-recommends -y
```

内核在5+后，执行下列命令，安装Wireguard：

```bash
sudo apt install net-tools resolvconf -y
sudo apt install wireguard-tools --no-install-recommends
# If can't find `wiregurad-tools`, execute this and retry
echo "deb http://deb.debian.org/debian $(lsb_release -sc)-backports main" | sudo tee /etc/apt/sources.list.d/backports.list
```

## STEP 2. 安装第三方工具wgcf

> [wgcf](https://github.com/ViRb3/wgcf) is an unofficial, cross-platform CLI for Cloudflare Warp

### wgcf 自动安装

执行命令，下载wgcf工具：

```bash
curl -fsSL git.io/wgcf.sh | sudo bash
```

### wgcf 手工安装

> 如果服务器起始状态就没有IPv4，那么访问git.io也是不可能的，我这里提供一个v2.2.10版本的文件给大家临时使用

```
wget -O /usr/local/bin/wgcf "https://cdn.arc-light.fun/pg2Edc/wgcf_2.2.10_linux_amd64"
chmod -x /usr/local/bin/wgcf
```

### 开始使用

完成后，首先进行注册：

```bash
wgcf register
```

过程中需要同意Cloudflare Warp协议，选择“Yes”，

成功生成后，再执行：

```bash
wgcf generate
```

执行成功，会在当前目录生成一个`wgcf.conf`，我们将它复制到Wireguard目录下：

```bash
cp wgcf.conf /etc/wireguard/wgcf.conf
```

## STEP 3. 修改wgcf.conf

编辑`wgcf.conf`文件，使其与下面的例子相似：

    [Interface]
    PrivateKey = YOUR_GENERATED_KEY_HERE
    Address = *.*.*.*/32
    #Address = *:*:*:*:*:*:*:*/128
    DNS = 2001:4860:4860::8888
    MTU = 1280
    PostUp = ip -6 rule add from [ipv6 addr] lookup main
    PostDown = ip -6 rule delete from [ipv6 addr] lookup main
    [Peer]
    PublicKey = YOUR_GENERATED_KEY_HERE
    AllowedIPs = 0.0.0.0/0
    #AllowedIPs = ::/0
    Endpoint = [2606:4700:d0::a29f:c001]:2408

> 2001:4860:4860::8888 可以替换为 Google DNS 或 Cloudflare 的IPv6 DNS服务器。

## STEP 4. 利用Crontab让Wireguard与ssh服务按顺序启动

如果启用了Wireguard的自启动，ssh服务就不能正常开启，因此，使用crontab，增加重启时自动启动Wireguard和SSH

```bash
crontab -e
```

增加以下配置：

    @reboot mkdir -p -m0755 /run/sshd
    @reboot systemctl start wg-quick@wgcf # wgcf是配置文件的名称
    @reboot /etc/init.d/ssh start

## Finish

重启，之后我们可以测试一下能否ping通Github，如果能ping通，意味着Warp配置成功，服务器能够正常访问IPv4 only的地址。

Spark1e

Category: frontend