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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

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

> 本篇答案来自 [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
```


个人向Docker Swarm使用笔记

## 一切基于最新的成功配置备份

```bash
cp /etc/network/interfaces /etc/network/interfaces.old
```

## Crontab 大法好

如果你的服务商在你修改失败时还能够在面板进行重启，那么配合crontab可以达到不错的效果，产生问题，重启即可还原。

```bash
@reboot cp /etc/network/interfaces.old /etc/network/interfaces
@reboot service networking restart
```

## 配合rc.local，自动重启恢复

万一碰上面板无法成功控制的服务器，可以采用rc.local+crontab自动重启：

```bash
crontab -e
```

添加一行：

```
# Will reboot every 10 min
*/10 * * * * /sbin/reboot
```

```bash
vim /etc/rc.local
```

添加上一节在crontab里对应的命令，（crontab内的可以注释）：

```bash
cp /etc/network/interfaces.old /etc/network/interfaces
sleep 5
service networking restart
```

然后重启网络，听天由命即可 XD

## 第三方包 Netplan.io

Ubuntu 17后，开始使用第三方工具来管理网络：

```bash
apt-get install netplan.io
```

Netplan使用yaml文件定义相关配置，因此请参考各个服务商自己的配置进行书写，基本结构：

```yaml
network:
	version: 2
	renderer: networkd
	ethernets:
		eth0:
			dhcp4: no
			dhcp6: no
				addresses: [<short but secret ipv4>/24, ]
			gateway4: <short but secret ipv4>
			gateway6: <long ipv6>
			nameservers:
				addresses: 	[213.246.36.14,213.246.33.144,80.93.83.11]
```

完成配置后，执行`netplan try`验证，如果没问题，可以回车确认。

安全配置服务器网络

- 删除空格行：

```
:g/^$/d
```

- 删除所有行首空格：

```
:%s/^\s*//g
```

- 删除所有行尾空格：

```
:%s/\s*$//g
```

Vim 删除空行、行首空格、行尾空格

随着全球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: all