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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

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

### JavaScript - Array

IE全系列不兼容`Array.prototype.find`，部分可能的旧版本也可能确实Array下的其他方法，提供一些polyfill供参考。

```javascript
// Polyfill for Array.prototype
(function () {
    if (!Array.prototype.find) {
        console.log("Polyfill 'array.find'");
        Array.prototype.find = function(callback) {
            if (this === null) {
              throw new TypeError('Array.prototype.find called on null or undefined');
            } else if (typeof callback !== 'function') {
              throw new TypeError('callback must be a function');
            }
            var list = Object(this);
            // Makes sures is always has an positive integer as length.
            var length = list.length >>> 0;
            var thisArg = arguments[1];
            for (var i = 0; i < length; i++) {
              var element = list[i];
              if ( callback.call(thisArg, element, i, list) ) {
                return element;
              }
            }
          };
    }
    if (!Array.prototype.filter) {
        console.log("Polyfill 'array.filter'");
        Array.prototype.filter = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                if (callbackFn.call(this, this[i], i, this)) {
                    arr.push(this[i]);
                }
            }
            return arr;
        }
    }
    if (!Array.prototype.map) {
        console.log("Polyfill 'array.map'");
        Array.prototype.map = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                /* call the callback function for every value of this array and push the returned value into our resulting array */
                arr.push(callbackFn(this[i], i, this));
            }
            return arr;
        }
    }
}())
```

> 如果你的环境允许，可以使用[polyfill.io](https://polyfill.io/v3/) 的工具来生成一个根据不同浏览器自动加载的polyfill包，但是请小心[供应链攻击](https://www.cloudflare.com/zh-cn/learning/security/what-is-a-supply-chain-attack/)

### CSS - Flex bug

#### using flex

flexbox 需要IE10+

#### `justify-content: center;`

需要在出现问题的容器上加上：

```css
flex-direction: column;
```

尽管无论是哪个轴，双center原则上应该是整个容器中心，但是IE下必须声明。

#### background image using data uri (SVG)

部分SVG特性不支持，保险起见，用URL链接吧。

> 不过base64的png url还可以。

2023年了，您还在兼容IE呢？

“被迫”兼容IE11遇到的一些问题和解决方案

不多说，直接先上代码，

```javascript
function copy2Clipboard(content) {
if (window.navigator && window.navigator.clipboard) {
  navigator.clipboard.writeText(content).then(() => {
    console.log('success')
  }, () => {
    console.log('failed')
    console.log(arguments)
  }).catch(e => {
    console.log(e)
  })
} else {
  var i = document.createElement("input")
  i.setAttribute("style", "position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;")
  document.body.appendChild(i)
  i.value = content
  var t = i.contentEditable,
    n = i.readOnly,
    o = document.createRange();
  i.contentEditable = !0
  i.readOnly = !1
  o.selectNodeContents(i);
  var a = window.getSelection();
  a.removeAllRanges()
  a.addRange(o)
  i.setSelectionRange(0, 999999)
  i.contentEditable = t
  i.readOnly = n
  window.document.execCommand("Copy")
  i.blur()
  document.body.removeChild(i)
  i = null
}
}
```

### 坑

1. 部分浏览器对navigator.clipboard支持很差，建议用else的代码；
2. __Safari如果要访问剪贴板，需要在可信的HTTPS环境下执行，自签的证书是无法调用`execCommand`/`avigator.clipboard.writeText`的__


##### 附录：一个之前写的有注释的版本

```javascript
function copyToClipboard(text) {
    if (text === "") return;
    var ipt = document.createElement('input'); // maybe you need to change `input` to `textarea`
    ipt.setAttribute(
        'style',
        'position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;'
    )
    document.body.appendChild(ipt)
    ipt.value = text
    // ipt.select()
    if (/iphone|ipad|ios/.test(navigator.userAgent.toLowerCase())) {
        var oldContentEditable = ipt.contentEditable
        var oldReadOnly = ipt.readOnly
        var range = document.createRange()

        ipt.contentEditable = true
        ipt.readOnly = false
        range.selectNodeContents(ipt)

        var s = window.getSelection()
        s.removeAllRanges()
        s.addRange(range)

        ipt.setSelectionRange(0, 999999) // A big number, to cover anything that could be inside the element.

        ipt.contentEditable = oldContentEditable
        ipt.readOnly = oldReadOnly
    } else {
        ipt.select()
    }
    window.document.execCommand('Copy')
    ipt.blur()
    document.body.removeChild(ipt)
    ipt = null
}
```

有些浏览器对新API的兼容实在是太差啦！

JS复制到剪贴板之意料之外的坑



### 参考文章

1. 官方Docker配置：[link](https://grafana.com/docs/grafana/latest/setup-grafana/configure-docker/)
2. Grafana配置SMTP：[link](https://rorschachchan.github.io/2018/06/06/Grafana%E9%85%8D%E7%BD%AEsmtp%E9%82%AE%E4%BB%B6/)
3. 将loki的log数据条数转换为Timeline的图表：[Example (you can copy its json)](https://play.grafana.org/d/f03dfa36-f578-4f4e-ac5e-2bce58476674/log-volume?orgId=1&from=1683531030209&to=1683534630209)
4. 通过图表创建告警规则

适合个人建站的简单日志收集系统Loki

### 扩展欧几里得算法

```
ed ≡ 1 (mod φ(n))
```

RSA算法计算公钥私钥相关的一些知识点

### 0. 初始化一个node项目

在希望的文件夹下`npm init`，填写必要的信息。

### 1. 安装所需要的依赖

```bash
npm i express -S
npm i @types/express @types/node typescript -D
# 如果你需要热重载的话，再加上
# npm i nodemon ts-node -D
```

### 2. 修改`tsconfig.json`

```json
{
	"rootDir": "./src",
	"outDir": "./dist"
}
```

### 3. 配置nodemon（无需热重载跳过此节）

在根目录新建`nodemon.json`

```json
{
    "ignore": [
        "**/*.test.ts",
        "**/*.spec.ts",
        "node_modules"
    ],
    "watch": [
        "src"
    ],
    "exec": "npm run preview",
    "ext": "ts"
}
```

> watch、exec字段均与接下来的配置有关，watch的是tsconfig中的rootDir，exec是接下来配置的"npm script"

### 4. 配置npm script

打开package.json， 修改script内的项目：

```json
"scripts": {
    "dev": "nodemon",
    "preview": "ts-node ./src/app.ts",
    "prestart": "npx tsc",
    "start": "node ./dist/app.js"
}
```

> 如果不需要热重载，可以不配置dev和preview命令。

### 5. 初始化一个简单的app.ts

在src下新建一个app.ts作为入口，内容举例如下：

```js
import express, { Application, Request, Response } from 'express';

const app: Application = express();

const PORT: number = 3001;

app.use('/', (req: Request, res: Response): void => {
    res.send('Hello my customer!');
});

app.listen(PORT, (): void => {
    console.log('SERVER IS UP ON PORT:', PORT);
});
```

### 6. 结束

项目内执行`npm run dev`即带有热重载，如果发布，执行`npm start`即可。

最小化新建一个Express.js + Typescript的后端项目

请点击右侧的链接进行尝试，注意不要真的发送哦，

- [iOS Click Me](sms:1069070087457&body=这只是一条测试信息，请不要发送哦)
- [Android Click Me](sms:1069070087457?body=这只是一条测试信息，请不要发送哦)

### 原理

`sms:<send-sms-to>(&/?)body=<sms-body>`

从QQ邮箱学来的还算实用的小技巧

如何利用URL实现呼起短信应用发短信

### Loading

- https://codepen.io/nikhil8krishnan/pen/rVoXJa
- https://samherbert.net/svg-loaders/

收集一些还不错的SVG资源

### 如何正确适配？

> Reference: [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#middleware-mode)

即，如果插件希望在`configServer`中增加中间件，需要通过`viteDevServer`下的`transfromIndexHtml`对html进行转换操作，具体可以参考我的插件的[此commit](https://github.com/iamspark1e/vite-plugin-auto-mpa-html/commit/54b4691eff66864631339cab1152b75b3cb86a9d)

### 对于没有适配中间件模式的插件

在我的插件v0.0.9版本及以前时，如果在React项目中（即，使用了`@vitejs/plugin-react`)，不影响正常打包，但是在dev模式，无法热重载。

对于之前的版本，可以通过关闭fastRefresh特性临时解决，即：

```javascript
export default defineConfig({
  plugins: [react({
    fastRefresh: false
  }), autoMpaHtmlPlugin({
    configName: "config.json",
    entryName: "main.jsx",
    sharedData: {},
    sourceDir: "src",
    enableDirectoryPage: true,
  })],
})
```

原：vite打包react报错can't detect preamble

Vite插件开发适配中间件模式(middleware mode)

外用：辅舒良

口服：氯雷他定系列（应急）

辅助：生理盐水，需要用鼻喷剂那种，普通的铁瓶无法清理鼻腔内的

病因：

* 过敏原：花粉、尘螨，等等，花粉可以佩戴口罩减轻，尘螨的话，在尝试使用青花椒喷雾
* 天气变化：例如冷空气，这个比较难办
* __轻微感冒__ ：我也是第一次发现，可能轻度感冒本身不严重，但是会触发鼻炎，这个时候足量的感冒药很重要，不能只顾着脱敏。

记录一下过敏性鼻炎

编辑 `~/.bashrc`

```bash
nano ~/.bashrc
```

在其中添加：

```bash
parse_git_branch() {
     git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* $.*$/ (\1)/'
}
export PS1="\u@\h \[\033[32m\]\w\[\033[33m\]\$(parse_git_branch)\[\033[00m\] $ "
```

保存后，重新开启新的terminal或者 `source ~/.bashrc`， 即可生效。

Spark1e

Category: all