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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

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)问题解决方案一览

> 本篇答案来自 [SuperUser-Boba Fit](https://superuser.com/a/1564148)

如果UFW里有数十条规则，一行一行的执行ufw命令属实折磨，参考此篇，可以改为循环执行。

```bash
ufw status numbered
# no confirm, example rule numbers
for i in 65 54 43 20 1;do yes|ufw delete $i;done
```

最后不要忘记执行：

```bash
ufw reload
```

批量删除UFW规则

在日常与 ~~黑洞~~ 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请求。

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

## 代码量 - 一个有时绕不开的命题

在某些特定的时候，虽然程序质量（或者说复杂度）不是与代码量成正比，但是不得不提供出来，对于前端常用VSCode的同学，自然没有使用idea同学好运，他们有自带的代码统计工具，因此，要推荐一个工具 —— [cloc](https://github.com/AlDanial/cloc)

## 安装非常简单，对于有包管理的OS而言

正如官方Github的简介一样简单，使用各自的包管理直接安装即可。

方便无法访问Github的同学，腾一份小抄：

```bash
npm install -g cloc              # https://www.npmjs.com/package/cloc
sudo apt install cloc            # Debian, Ubuntu
sudo yum install cloc            # Red Hat, Fedora
sudo dnf install cloc            # Fedora 22 or later
sudo pacman -S cloc              # Arch
sudo emerge -av dev-util/cloc    # Gentoo https://packages.gentoo.org/packages/dev-util/cloc
sudo apk add cloc                # Alpine Linux
doas pkg_add cloc                # OpenBSD
sudo pkg install cloc            # FreeBSD
sudo port install cloc           # macOS with MacPorts
brew install cloc                # macOS with Homebrew
choco install cloc               # Windows with Chocolatey
scoop install cloc               # Windows with Scoop
```

安装好之后，即可执行统计文件、文件夹甚至Git仓库的代码量了。

## 常用

```bash
cloc perl-5.22.0.tar.gz
cloc ./
```

### 遵从gitignore配置统计代码

对于前端同学，统计代码往往需要忽略最大的`node_modules`以及打包生成的`dist`文件，查找了官方issue找到了非常方便的方法：

```bash
cloc $(git ls-files) 
# Or
cloc --vcs git # Or cloc --vcs svn
```




使用cloc有效统计你的代码量

```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的元素“动”起来

# Docker Swarm

相比于k8s这种重量级的集群方案，k3s足够轻量，非常适合个人，但是在我这里，我有着数个IPv6 only的服务器，k3s目前不能完美支持IPv6的worker节点加入集群，这使我关注到了Docker重新推出的Swarm模式

## Create a Manager

```bash
# 此处也可以使用网卡名称？未测试
docker swarm init --advertise-addr <MANAGER-IP>
```

## Join as a worker

```bash
docker swarm join \
  --token <MANAGER-NODE-DELIVERED-TOKEN> \
  <MANAGER-IP>:2377
```

> 如果丢失了这个token，也可以通过`docker swarm join-token manager`重新显示。

## Group workers by label

可以通过创建label来对worker进行分类：[相关Issues](https://github.com/moby/moby/issues/27231#issuecomment-767696365)

```bash
docker node update --label-add test swarm-test-04
```

如果添加成功，通过以下命令即可通过label筛选列出相关worker

```bash
docker node ls --filter node.label=test
```

## 开放端口

对于一般的IPv4机器我们可以直接使用类似`8080:8080`的方式打开，但是如果是IPv6 Only，打开端口需要将配置改为：

```yaml
- target: 8080
  published: 8080
  protocol: tcp
  mode: host
```


Spark1e

Category: all