WONDER's Blog

Questions

When you have deployed your own gitlab service on web, you may need to use a custom SSH port to clone, pull, or push your code from or to your server. The default SSH port 22 is used by the system SSH service, so you must choose another port for your gitlab service.

After you get everything done, you may find that you can’t clone your repository because of the access error. If you check carefully, you will find that the default git url is scp-like syntax. You can’t change port to your custom SSH port.

git clone user@hostname:/path/to/repo.git

output

ssh: connect to host [hostname] port 22: Connection timed out
fatal: Could not read from remmote repository.

Please make sure you have the correct access rights and the repository exists.

What is Rust

Introduction

Rust is a safe alternative to existing systems software languages like C and C++. Like C and C++, Rust doesn’t have a large runtime or garbage collector, which contrasts it with almost all the other modern languages. However, unlike C and C++, Rust guarantees momery safety. Rust prevents many of the bugs related to incorrect use of memory you might see in C and C++.

With Rust, you can manage memory and control other low-level details. But you can also take advantage of high-level concepts like iteration and interfaces. These features set Rust apart from low-level languages like C and C++.

Rust also offers the following advantages that make it a great fit for a wide range of applications:

• Type safe: The compiler assures that no operation will be applied to a variable of a wrong type.

• Memory safe: Rust pointers (known as references) always refer to valid memory.

• Data race free: Rust’s borrow checker guarantees thread-safety by ensuring that multiple parts of a program can’t mutate the same value at the same time.

• Zero-cost abstractions: Rust allows the use of high-level concepts, like iteration, interfaces, and functional programming, with minimal to no performance costs. The abstractions perform as well, as if you wrote the underlying code by hand.

• Minimal runtime: Rust has a minimal and optional runtime. The language also has no garbage collector to manage memory efficiently. In this way, Rust is most sililar to languages like C and C++.

• Target bare metal: Rust can target embedded and “bare metal” programming, making it suitable to write an operating system kernel or device drivers.

在使用媒体查询与响应式布局过程中，我们常常需要让一个盒模型按一定的纵横比响应，即盒子的高度取决于盒子的宽度。常见需求如在响应过程中保持盒子为正方形，或保持盒子为 16:9 的比例。那么如何实现这样的需求呢？

可替换元素

如果是<video>或<img>等可替换元素标签，通常需要保持图片或视频素材本身纵横比，因此只需要固定width或height属性中的一个，并将另一个设置为auto即可按内容实现固定的纵横比。

aspect-ratio

2022 年了，aspect-ratio属性已经成为了 css 标准，在主流的浏览器中都有不错的支持。使用纵横比属性，很容易就能实现盒模型的固定比例。

本文基于Project X - 使用指南 - 快速入门文档 - 小小白白话文改写而来，原文是非常非常细致且新手友好的教学文档，十分十分推荐大家阅读。本文在原文基础上，删减了部分篇章，增加了部分说明，增加了个人推荐的工具等，作为个人笔记存档。

原料准备

一台 VPS

首先需要购买一台 VPS。

VPS（Virtual Private Server）虚拟专用主机，传统虚拟主机是多人共享 IP，共享服务器资源，通过用户权限进行隔离，互相之间会影响，不是很方便；而 VPS 之间虽然可能还是同一台物理主机，但通过虚拟化技术，做到了用户之间操作系统级别的完全隔离，具有 VPS 的最高权限，独享 IP，独享带宽，各 VPS 间互不影响。

因此购买云服务器时，一定要购买 VPS，而不是共享式的传统虚拟主机。根据个人喜好，选择合适的云服务器商进行购买。

这里以bandwagonhost为例，10G KVM VPS 年费用为 20$（已无货），20G KVM VPS年费用为50$。

购买好 VPS 后，登录 VPS 管理后台，安装 Linux 系统。如果不熟悉 Linux 各发行版，或有 Linux 发行版选择困难，这里推荐选择 Debian 11。使用 Debian 11 足以让你的 VPS 服务器在安全、稳健运行的同时得到足够的优化（如 cloud 专用内核、及时的 bbr 支持等）。

系统安装完成后，在 VPS 管理后台，查看并记录下 VPS 的 IP 地址与 SSH 端口号、Root 账户密码。

echarts 在微信小程序

由于微信小程序没有浏览器端的 DOM，故 PC 端的 echarts 无法直接在微信小程序中使用，echarts 官方基于微信小程序，开发了小程序版的 echarts 组件 ec-canvas，ec-canvas 迭代相对 echarts 主库较慢，不过支持替换 echarts.js 文件来实现更新。

ec-canvas 组件更新较慢，截止目前(2022-04)，echarts-for-weixin最新版本为 2.0.0，其中 echarts 版本为 5.1.1，而echarts主库已更新至 5.3.2 版本。

ec-canvas 组件考虑了通用性，但是使用并不是很方便，且真实场景多是 lazyLoad，只要改变数据，不需要多次新建或销毁实例，故在 ec-canvas 基础上再封装一次，会更方便使用。

前置准备：

• 从 echarts-for-weixin 项目中复制 ec-canvas 文件夹到小程序项目中，通常习惯将全局通用的组件放在项目根目录下的组件目录中，即/components

用 promise 封装 wx.request

在使用小程序请求的过程中我们会用到小程序的 wx.request 接口，但 wx.request 还是基于 callback 封装的，es6 出现后大家更习惯于使用 promise 形式的请求，所以这里我们使用 promise 简单封装一下。

封装需要实现的核心功能：

1. 使用 ES6 Promise;
2. 可以配置 baseUrl;
3. 可以拦截请求参数;
4. 可以拦截响应数据;

问题描述

系统升级 windows11 后，打开 windows10 1903 及以前版本系统建立的 txt 文件，中文部分会出现乱码。网上说是由于 windows10 1903 及以前版本 txt 默认使用 ANSI 编码，而 windows 1903 版本后及 windows11 都默认使用 UTF-8 编码。网上的解方案是改变系统语言，实测并没有生效，且实际需求是保持系统语言不变。

解决方案

使用 word 打开 txt 文件，通常会自动弹出编码选择界面，并可预览。这时发现，不论是选择 ANSI 还是 UTF-8，依然还是乱码。选择 GB2312 或 GB18030，此时汉字显示正确，在文件中选择另存为，选好保存地址后，自动弹出保存编码选择界面，改为 UTF-8 保存。使用 notepad 打开，汉字显示正常了。

Mask 遮罩，就是原始图片只显示遮罩图片不透明部分。

兼容性

CSS Mask 属性还不是标准，暂时还处于推荐候选草案阶段，不过只要进入了推荐候选草案阶段，那么成为标准就只是时间问题了。可以放心使用。

Firefox 对 CSS Mask 全兼容，无需任何内核前缀，部分属性值与其他浏览器不一致需要注意。例如 mask-composite 取值与 Chrome 不一致。

IE 不支持 Mask 属性。

其他浏览器对 Mask 属性支持不完全，其中 webkit 内核浏览器需要使用 -webkit- 前缀。

详见Can I use CSS Masks?

简介

起初，mask 属性使用时只有自己本身，随着规范化，mask 属性成为了诸多 mask-* 属性的缩写，类似于 background、border 属性。

mask 属性列表：

• mask-image 遮罩图片
• mask-mode 遮罩图片的模式
• mask-position 遮罩图片的位置
• mask-size 遮罩的大小
• mask-repeat 遮罩图片重复性
• mask-clip 遮罩图片裁剪
• mask-origin 遮罩原点
• mask-type 遮罩类型
• mask-composite 遮罩组合方式

需求功能

需要实现一个渐变圆角边框的 div，且不仅边框是渐变色，要求 div 内部也是另一种带透明度的渐变色。(注意，下面所有示例都基于 css 属性 box-sizing: border-box)

实现方案

方案 1——双层 div 叠加

能想到最直接的方案就是两层 div 叠加，外层 div 较大，负责边框渐变色，内层 div 较小，负责内部区域颜色。但是由于是两层 div 叠加，内层要实现的渐变色如果没有透明度，是没问题的；若是内层 div 要实现的渐变色带有透明度，外层颜色就会透过透明的内层显示出来，这个方案就不适用了。

内层无透明度，正常显示

内层有透明度，底色透出来了

循环引用，也称为循环依赖（circular dependency），通常指 a 脚本的执行依赖了 b 脚本，而 b 脚本的执行又依赖了 a 脚本。

上面概念中的举例，可以说是最简单的情况，我们很容易就能避免，但实际的项目中，依赖关系复杂了以后，很难避免。在我们不注意的情况下，就会出现 a 依赖 b，b 依赖 c，c 又依赖了 a 这样的情况。那么考虑到这样的情况不可避免，javascript 的引擎针对 CommonJS 模块与 ECMAScript 模块分别制定了不同的模块加载机制。

虽然 javascript 引擎支持了循环加载，但我们在书写代码时，还是应该尽量避免循环引用。循环引用会导致不可预期的错误，例如递归加载，使程序无法执行，或发生改变引用顺序就导致程序报错的情况，例如之前一篇文章react在组件外使用redux的dispatch，就是循环引用导致的问题。

接下来我们就分别介绍一下 CommonJS 与 ECMAScript 的循环加载机制