AkiraZ's blog

Sass 是流行的 CSS 的拓展语言，用过的工具有 sass、node-sass 和 sass-loader，相互之间有联系，配置的时候又经常遇到问题。简单总结一下。

sass 和 node sass

这两放在一起，因为都是 sass 编译工具。从本质上提供了对 sass 语法以及各类特性的支持。

CodeMirror 是一款网页中的代码编辑器，能提供例如高亮、缩进、行号、自动补全、语法检查等基础功能

https://codemirror.net/

图标库地址 https://iconify.design/，集合了市面上众多知名图标库，如 FontAwesome, Material Design Icons, Ionicons 等。

本质 SVG 图标，支持动态导入

v-model语法糖能够实现 Vue 中父组件与子组件之间的双向数据绑定。

很惊讶地发现在最近的 Vue 版本中又得到了更新，似乎变得好用了些。

Vue 3.4+

1
2
3
4
5
6
7
8
9
10
11
12

<!-- Child.vue -->
<script setup>
  const model = defineModel();

  function update() {
    model.value++;
  }
</script>

<template>
  <div>parent bound v-model is: {{ model }}</div>
</template>

1
2

<!-- Parent.vue -->
<Child v-model="count" />

使用宏 defineModel()来产生一个双向绑定的变量。

如果是多个变量：

• 使用 defineModel('foo')与 defineModel('bar')
• 使用 v-model:foo="val1"与 v-model:bar="val2"

忘记了 mysql root 账号的密码，查了一下命令，记录一下。

其中 mysql 配置文件应人而异

最近生产上遇到了一些问题，报错 .finally() is not a function.

核心问题是浏览器版本过低，Chrome 内核版本 60。查表发现，从 63 才开始支持 finally() 语法。所以需要一点转换组件。

最近在写一个服务端应用，计划采用的技术栈是 TypeScript + Koa2 + MySQL，后续计划再安排上持续集成之类的。先写一下项目用到 TS 需要的配置内容，主要是路径别名部分

初始化与编译输出

• 安装 tsc
• tsc --init 初始化 ts 配置项
• 在根目录使用 tsc 编译整个项目，
• 低级错误：
  • 如果使用 tsc index.ts 编译，只能编译单个文件和它的依赖文件，不是标准 npm module，所以在使用 import / export 时会出错
  • 同时也不会使用目录下的 tsconfig.js 文件读取编译配置项

设定

字面意思，行高，是两行文字的基线之间的间距。可以看作为内容区的高度，和盒子的高度又有点区别

假设行高 18px，字高 14px，那么剩下 4px 就会均分在字的上下 2px，同时这个与内间距 padding 又是两码事

值

可选的值有 <number> | <length> | <percentage> | normal

normal

用户代理的默认值，与字体字号有关，通常会是字号的 1.1-1.2 倍高低，不同字号会有差异。例如

• 宋体、仿宋、楷体 - 1.14
• 微软雅黑 - 1.32
• Courier New - 1.13
• Consolas - 1.17
• Times - 1.15
• Arial - 1.15

也可以用这个来恢复默认，清除继承

最近工作中遇到了 nginx 的代理相关问题，于是就了解了一下正向代理 / 反向代理相关内容，简单记一下

概括

在用户使用浏览器访问某网页的情景下

正向代理由客户端配置，对服务器透明，常用于游戏加速等场景

反向代理由服务器配置，对客户端透明，常用于负载均衡、镜像站等场景

Base64

之前写过一个方案，是通过转成 blob 再通过 FileReader 实现的，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function(base64) {
    // 传进来的是一个 base64 编码的字符串
    // 转成二进制
    const byteString = atob(base64);
    const u8Arr = new Uint8Array(byteString.split('').map(x => x.charCodeAt(0)));
    // 生成二进制对象
    const blob = new Blob([u8Arr]);
    // 使用 reader 读取并下载
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function(e) {
        const a = document.createElement('a');
        a.download = e.target.result;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
}