在小程序中，开发者不能继续使用位于微信服务器的用户头像（这是免费的），而是需要把用户上传的头像保存到自已的服务器中（增加了开发者服务器费用）。 我的做法是把头像上传到 OSS，并使用阿里 CDN 加速。阿里官方提供了从小程序直传文件到 OSS 的教程。

阿里云 OSS 和 CDN 简单使用笔记

精确计算微信公众号模板消息字数限制，避免字符串被自动省略，计算字符数量的关键是要算上模板标题的字数。

精确计算微信公众号模板消息字数限制

Brick Experiment Channel 是一个在 Youtube 发布原创乐高制作视频的频道，目前有 301 万订阅。2022 年 11 月，该频道博主在他的博客分享了他做 Youtube 将近五年来的详细收入数据。

Youtube 大博主详细收入数据

三个可以申请免费子域名的服务：eu.org、is-a.dev、is-an.app

申请免费的子域名

在网页增加一个视频，视频 source 是一段 base64 字符串，它是一个 2.4kb 大小、16x16 像素、只有两帧黑色画面的视频。判断这个视频是否自动播放，如果自动播放，则说明手机没有开启省电模式，如果没有自动播放，可以判断手机开启了省电模式。

用一个 2.4KB 的视频判断用户的手机是否开启省电模式

人们围绕 OpenAI GPT 开发的有趣项目，例如基于 GPT-4 开发的代码编辑器、代码阅读器、字幕提取并翻译工具、图像 AI 工具，还有很多围绕如何写一个好 Prompt 这个主题展开的项目，例如 Prompt Generator、Prompt API 等。

人们围绕 OpenAI GPT 开发的有趣项目

把被拖动的项目复制一个出来并设为 `position: fixed`，拖动时，列表中的项目都不动，只改变复制项目的位置，当完成拖动后隐藏复制项目，并最终更改列表中的项目，在拖动中看到的位置改变、动画都是通过 css 实现的。

写一个性能较好的拖拽排序

写 typescript 的过程中我也遇到了 `Index signature is missing in type xxxx` 报错，不知道哪里出问题，直到我无意间把类型声明从 interface 改为 type alias，报错消失。

Typescript 报错 index signature is missing 的原因和解决方法

`Date.now()` 拿到的时间是基于设备时间计算出来的，如果两部手机设置的系统时间不一样，那在两部手机上分别执行 `Date.now()` 会拿到不一样的值，一种解决方法是前后端均从同一个源头获取时间值，例如淘宝服务器的时间戳。

淘宝服务器时间戳

把整个网页都放在 <h1> 里是最简单的能大幅优化 SEO 的方法？我决定试试，后续补充测试结果。

在网页中使用多个 H1 标签可能对 SEO 很有帮助

The Verge 一位作者推荐的视频制作工具，很多是免费的，例如使用 FFmpeg 剪辑视频，使用 HandBrake 编码视频，使用 Audacity 剪辑音频，使用 YT-DLP 下载视频等。

制作视频推荐使用这些免费工具

一个可以把 github 账号各年份提交日历生成一张图片的工具

GitHub Contributions Chart Generator

虽然 macOS、iOS 自带输入法已经支持粤语拼音，但它打出的是繁体字，而我希望用粤语拼音输入简体字，所以最后还是继续用回 Rime。

在 macOS 使用粵語拼音輸入法 Rime

Flavio Copes 用下面这段 CSS 代码为他的网站添加了黑色主题，我试了一下，上述代码在我的博客不能直接拿来用，需要对已有 CSS 进行较多调整，但如果一开始就用这种方法实现黑色主题可能也是一种不错的做法。

为网站快速添加黑色主题的方法

小红书更容易找到活生生的用户分享的真实感受，相关帖子下的评论往往也有很多有用信息。别的平台，例如百度、抖音、知乎、微博可能也有你需要的信息，但你需要大海捞针，剔除大量低信息密度的、人云亦云的、陈词滥调的、虚假的、有推广嫌疑的、自媒体滥竽充数的内容。

小红书可能是最好用的中文搜索引擎

整天对着手机电脑，时刻保持在线，并不是一种健康的生活方式，网络各种被动接收的消极信息会加剧情绪焦虑，缺少和社会及大自然的交流会扼杀个人的创造力和想象力。

断网的重要性：每天花一段时间让自己脱离网络回到现实

断网的重要性

苹果产品大全，iPhone、iPad、Mac、AirPods 等产品的详细参数信息。

苹果产品参数中心：包括 iPhone、iPad、Mac 等产品

苹果产品参数中心

最近很多人讨论提前还贷，想提前还贷，但手头没钱怎么办，v2ex 网友提到可以用经营贷提前还房贷。用经营贷买房有违规风险，2021 年深房理因违规套取经营贷被逮捕。

用经营贷买房或提前还房贷

这个笔记不定时收集一些网友分享的人生经验，包括职场、投资、家庭等方面的经验，希望可以有一点点借鉴和启发。

人生经验收集：职场、投资、家庭等方面的经验

人生经验收集

如何在 url 一个网页应用的所有状态？

How to store your app's entire state in the url

使用 esbuild 打包后的云函数代码没有使用 const 等关键词声明 regeneratorRuntime 这个变量就直接用了，所以就出现 xx 变量没有被 defined 的报错，解决方法是让 esbuild 在打包后的代码开头增加 var regeneratorRuntime 这行代码。

esbuild 解决 regeneratorRuntime is not defined 的方法

ActiveMsgNum：经常大于实际值，因为它可能包括了 InactiveMsgNum 和 DelayMsgNum，虽然文档说都不包括。DelayMsgNum：延迟消息的计数默认被计入 ActiveMsgNum，只有当真正的可见消息都被消费完毕，延迟消息计数才会从 ActiveMsgNum 转移到 DelayMsgNum。

腾讯云消息队列 CMQ 可见消息、延迟消息计数不准确的问题

url-cheatsheet 较为详细地介绍了如何使用 javascript 处理 URL，包括以下内容。

url-cheatsheet：使用 javascript 处理 URL 的方法

url-cheatsheet

计算一个评论的排序权重，需要综合考虑以下因素：点赞数、回复数、内容相关、负反馈数、“时间衰退因子”、字数加权、用户等级加权等等，其中“负反馈数”可通过“威尔逊排序”进行计算。

用户评论排序方法：威尔逊置信区间

Node.js 项目通常有一个体积较大的 node_modules 文件夹，可使用 esbuild 打包并压缩代码，esbuild 有 tree shaking 功能，没用到的依赖不会打包进来，打包完还能 minify 一下，最后得到的代码体积将显著降低。

使用 esbuild 打包压缩部署到云函数代码

使用 esbuild 打包压缩云函数代码

这篇文章较为深入地解释了 Flexbox 的工作模式和使用方法，文章提到了几个我不太熟悉的知识点，例如使用 gap、align-self、flex-basis、align-content 等。

深入理解 Flexbox：那些我不太熟悉的知识点

深入理解 Flexbox

在 Node.js 中配置 Typescript，.tsconfig.json 通常把 module 设置为 CommonJS，这篇文章分享如果设置为 NodeNext 需要怎么做，有哪些注意事项。

Node.js 项目使用 NodeNext 配置 Typescript 的方法

使用 `commander` 可以方便的写一个 CLI 命令行工具，需要注意在 `index.js` 开头增加 `#! /usr/bin/env node`，并在 `package.json` 增加 `bin` 字段。

如何用 Node.js 写一个 CLI 工具

首先要删除 `typings` 文件夹，并删除 .tsconfig.json 的 `compilerOptions.typeRoots` 字段，接着参考 `miniprogram-api-typings` 使用文档，有两种使用方法。

微信小程序开发者工具配置 Typescript 的方法

打开开发者工具 - 设置 - 扩展设置 - 安装 ESLint 插件；执行 `npm init @eslint/config`，ESLint 会让你回答几个问题，请根据实际情况回答问题，我的回答可参考下图，ESLint 会根据你的回答生成一个配置文件。

微信小程序开发者工具配置 ESLint 的方法

有时候只是为了测试能否部署成功，这时候就没必要 push 到 github，可以使用 vercel cli 直接部署到 vercel。

使用 vercel cli 部署项目

这篇文章总结了 Node.js 使用 CommonJS 和 ESM 模块的区别，以及它们的使用方法。

Node.js 两种模块方案：require 和 import 的区别和语法

Node.js 两种模块方案：require、import 的区别和语法

在 Typescript 既可以使用 import 引入一个模块，也可以使用 require 引入一个模块，Typescript 还支持特有的 import...require... 以及 import type 两种独有的使用方法。

Typescript 引入模块的三种写法

这篇文章总结了 Typescript 定义一个函数类型的多种方法，除了常规的 function type expression 外，还有 generic function、generic type 等。

Typescript type 一个函数的方法

使用 jest 测试 Typescript 写的 React 应用，有三种方法，一种是 babel，一种是 swc，一种是 tsc。

使用 jest 测试 Typescript 写的 React 应用

typescript 是用来让开发者少写 bug，zod 是用来让所有不受开发者控制的用户或 API 等源头向我的 app 输入不符合我要求的数据。

为什么使用 zod？zod 有什么用？

为什么使用 zod

这篇文章分析了导致 Next.js 应用 build 后 bundle size 太大的一个原因：Barrel File。

减少 Next.js bundle size

之所以这样，是因为 iOS 设备的浏览器所支持的 canvas 最大范围是 4096 x 4096 共 16,777,216 个像素，两张由 iPhone 12 Pro 拍摄的照片总像素大于这个值，所以得到空白图片。

浏览器画图到 canvas 得到空图的问题

这篇文章解释 npm 为什么会报 Conflicting peer dependency 的错误，以及解决方法。

npm Conflicting peer dependency 报错解决方法

npm Conflicting peer dependency 报错

glob 是 global 的简称，起源于 1969 年某个版本的 unix 系统，glob 主要用来匹配文件名，使用相当广泛。glob 的语法主要涉及以下 3 个通配符。

glob-patterns 是什么？如何使用？

理解 glob-patterns

增值税专用发票如果开错了，当月可直接作废，跨月不能作废，需要开具负数发票，这是开具负数发票的方法。

增值税专用发票跨月如何作废？如何开具负数发票？

专票负数开具

styled-jsx 的文档对 :global() 的表述容易让人迷惑，我提交了一个文档 PR，顺便在这里记录我对 :global() 的理解。

styled-jsx 的 :global() 是什么意思？如何使用？

理解 styled-jsx 的 :global()

广州天河体育中心旁边就有几个大型商场，这些地方停车都不便宜，想省钱可以停在天河体育中心。体育中心按半小时收费，前 3 小时 1.5 元/半小时，之后 4 元/半小时，具体可以看体育中心今年 3 月发布的最新收费公告。

广州天河停车哪里便宜？天河体育中心停车攻略

广州天河体育中心停车攻略

range input 在不同的浏览器中样式有较大差别，且在触控屏下不太容易拖得动（因为把手尺寸有点小），所以自定义样式很有必要，这篇文章分享如何定义它的 style 样式。

如何自定义 range input 的样式？如何调整把手的大小？

如何自定义 range input 的样式

css 中的 border 和 outline 有四个显著区别：outline 不占地方、对换行元素的处理不同、outline 不能只设置某一边、outline 支持 outline-offset。

CSS 中的 border 和 outline 属性有什么区别？

CSS border 和 outline 的区别

在一个 flex container 中，如果子元素的高度或宽度大于 container 的高度或宽度，子元素可能会显示不完整，这时候可以用 margin:auto 居中子元素。

如何居中 flex 元素？使用 margin:auto 居中 flex 元素

使用 margin:auto 居中 flex 元素

广州南站接人，可以和对方商量在 P5 地面接客区碰头，开车导航也是定位 P5。

广州南站如何接人？在哪个出口叫网约车？

广州南站接人

Figma 常用快捷键分享：加减号，缩放；按住空格键，然后三指拖动触控板，可以拖动画板；按住 z 和 option，光标会变成减号......

Figma 常用快捷键都有哪些？常用 Figma 快捷键分享

Figma 常用快捷键

在 lobste 看到一个帖子，人们分享了一个全手写的 blog，文章提到一个 least significant bits 的概念，一个颜色由 rgb 三色组成，每个颜色都是一个 0-255 的数字，其对应的二进制数字中，最后一个数字就是 LSB。

least significant bits 是什么意思？如何修改颜色的 LSB 值？

手写的 Blog

我写的微信小程序“拼长图”也支持去重拼接手机截图，但实现方法和 mathematica 不一样，我是用 pixelMatch 逐行比较两张图片在同一位置的两个像素，以此找出重叠区域。