把自己写的表格编辑器集成到网站内了

能同时兼容桌面设备和移动设备的表格编辑器应该不多吧。

看看我花了多少工夫，为了能方便地编辑表格：

2025年09月04日 2条评论页首

有时候就搞不清网站为什么突然就卡住了

但是看附近的日志又没有任何异样：

1
2
3
4


2025/09/02 17:23:36 util.go:60: 保存文章访问次数
2025/09/02 17:27:15 file.go:131: 更新文件缓存并清空已过期缓存： 0
2025/09/02 17:27:28 main.go:739: 服务接口响应非常慢了。
2025/09/02 17:27:29 logger.go:67: 创建日志： 15743 notify message {"title":"服务不可用","body":"保活检测卡住了"}

1
2
3
4
5
6
7
8
9


now := time.Now()
svc.GetPost(auth.SystemForLocal(context.TODO()), &proto.GetPostRequest{Id: 1})
if elapsed := time.Since(now); elapsed > time.Second*10 {
	svc.MaintenanceMode().Enter(`我也不知道为什么，反正就是服务接口卡住了🥵。`, -1)
	log.Println(`服务接口响应非常慢了。`)
	s.sendNotify(`服务不可用`, `保活检测卡住了`)
	return false
}
svc.MaintenanceMode().Leave()

服务器到底发生了什么获取一篇文章需要花超过 10 秒钟时间？

当初还以为不可能发生，于是就没有记录具体时长。我去，什么叫作担心的事情一定会发生啊？

2025年09月03日没有评论页首

刚学习了 CSS 的 oklab 色彩空间，就发现一篇非常好的讲色彩空间的文章

2025年09月02日没有评论页首

想学一下 Zig 语言，结果感觉被第一个 Hello World¹ 就给劝退了：

1
2
3
4
5


const std = @import("std");

pub fn main() !void {
    try std.fs.File.stdout().writeAll("Hello, World!\n");
}

“向标准输出写内容”这么日常的操作至于这么繁琐吗？

Documentation - The Zig Programming Language ^

2025年08月27日没有评论页首

新买的国产苹果手表竟然不能给旧款充电

竟然不说我的国家有问题？奇奇怪怪啊。

2025年08月23日没有评论页首

这款极简、透明的 Markdown 编辑器不错

OverType	https://overtype.dev/

分为两层：上面是标准的 <textarea>，下面是渲染后的 Markdown。

前者完全透明，主要提供内容。靠后者提供色彩。

不错，但是用了几分钟就发现了 Bug：something went wrong for not-well formated markdown · Issue #23 · panphora/overtype。

修复了。

很好，给作者提了个建议后，适用于任何语言的新编辑器诞生了：Discussion: Is it possible to extend the capability to render not only Markdown? · Issue #29 · panphora/overtype。

2025年08月19日 2条评论页首

纯手工两天时间打造了一个表格编辑器，快来体验！

2025年08月19日没有评论页首

明明就是在循环体内定义的变量，为什么不初始化后再次使用？

1
2
3
4
5
6
7


retry:
	for(let i=0; i<5; i++) {
		console.log(i);
		if(i==2) {
			continue retry;
		}
	}

1
2
3
4
5
6


$ node retry.js 
0
1
2
3
4

一段手动从 Go 翻译到 JS 的代码，奇奇怪怪。

2025年08月17日 2条评论页首

看 insertAdjacentElement 的第一眼：这啥玩意儿？看了图后：设计得真好

insertAdjacentElement(position, element)¹

'beforebegin': Before the targetElement itself.

'afterbegin': Just inside the targetElement, before its first child.

'beforeend': Just inside the targetElement, after its last child.

'afterend': After the targetElement itself.

一堆的 before/begin/after/end 真的有够晕的。

但是直到看了图示的第一眼：简直了，世界上没有比这更清晰明了的解释了：

1
2
3
4
5
6
7


<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Element: insertAdjacentElement() method - Web APIs | MDN ^

2025年08月17日 2条评论页首

不要点进来！不要点进来！不要点进来！ #NSFW

不要点开！不要点开！不要点开！

重要的事情说三遍！重要的事情说三遍！重要的事情说三遍！

2025-8-15 07:05:30

2025年08月15日 3条评论页首

听说脚臭(菠萝蜜)的果实煮了后吃起来像板栗🌰️

是真的，我刚刚吃了。

真的是真的，味道很像板栗🌰，粉粉糯糯，超爱吃。

哪个天才发现的啊😧？以前丢了好多、买了好多板栗吃。

2025年08月13日没有评论页首

YAML 太难了，GPT-5 日常 XXX 乱说

YAML 里面用 JSON 的时候，引号什么时候可以省略？
在 YAML（包括 JSON 风格写法）里，字符串并不总是要加引号，但能省略的前提是：
1. 值不包含特殊字符（空格、冒号、# 等）
2. 不会被 YAML 解析成其他类型（数字、布尔、null、时间等）
3. 不会因为前导/尾随空格丢失信息
1 2 3 4 5

# ❌ 这样会报错 title: hello world # ✅ 必须加引号 title: "hello world"
空格不用引号啊，XXX 乱说。
我明白你的意思，你是觉得 YAML 普通键值对里值里有空格其实也不用加引号，对吧？确实，我刚才说得过于保守了。YAML 的规范允许这种：
1

title: hello world
它会直接解析成字符串 "hello world"，不会报错。因为 YAML 在 block style 下，冒号后的空格到行尾，都会被当成同一个标量（除非有 # 注释符或缩进表示多行）。

所以正确规则是：
1. 空格本身不要求加引号，无论是 block style 还是 flow style：
  1 2
  
  title: hello world tags: [hello world, foo bar]
2. 必须加引号的情况是：
  - 开头或结尾有空格（否则会被 YAML 去掉）
  - 含有 #（否则会被当成注释）
  - 想保留冒号 : 并且后面紧跟空格
  - 想避免被 YAML 自动识别成布尔、null、数字、日期

链接：https://chatgpt.com/share/689bfce3-45f4-8008-b652-b67d9edef04f。

2025年08月13日没有评论页首

简单调了一组在浅色和深色背景下看起来都还不错的配色

拿来干啥？我也不知道，就是折腾了一下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<color></color>

<!-- by class -->
<color red></color>
<color :blue></color>
<color red:blue></color>

<!-- by css color name and function -->
<color fg="red" bg="blue"></color>
<color fg="rgb(1,1,1)" bg="hsl(330,100%,50%)"></color>

表格预览（“<colors></colors>”）：

名字	代码	前景		背景
名字	代码	浅色	深色	浅色	深色
coral	`#F08080`	Text	Text	Text	Text
salmon	`#E9967A`	Text	Text	Text	Text
red	`#FF325B`	Text	Text	Text	Text
hotpink	`#FF69B4`	Text	Text	Text	Text
deeppink	`#FF1493`	Text	Text	Text	Text
palevioletred	`#DB7093`	Text	Text	Text	Text
tomato	`#FF6347`	Text	Text	Text	Text
darkorange	`#FF8C00`	Text	Text	Text	Text
orange	`#FFA500`	Text	Text	Text	Text
yellow	`#FFD800`	Text	Text	Text	Text
darkkhaki	`#BDB76B`	Text	Text	Text	Text
magenta	`#DA70D6`	Text	Text	Text	Text
purple	`#9932CC`	Text	Text	Text	Text
slateblue	`#6A5ACD`	Text	Text	Text	Text
mediumseagreen	`#3CB371`	Text	Text	Text	Text
green	`#17a817`	Text	Text	Text	Text
yellowgreen	`#9ACD32`	Text	Text	Text	Text
olive	`#6B8E23`	Text	Text	Text	Text
darkseagreen	`#8FBC8B`	Text	Text	Text	Text
lightseagreen	`#20B2AA`	Text	Text	Text	Text
teal	`#008080`	Text	Text	Text	Text
cyan	`#00CED1`	Text	Text	Text	Text
aqua	`#00CED1`	Text	Text	Text	Text
cadetblue	`#5F9EA0`	Text	Text	Text	Text
steelblue	`#4682B4`	Text	Text	Text	Text
deepskyblue	`#00BFFF`	Text	Text	Text	Text
blue	`#1E90FF`	Text	Text	Text	Text
burlywood	`#DEB887`	Text	Text	Text	Text
tan	`#D2B48C`	Text	Text	Text	Text
rosybrown	`#BC8F8F`	Text	Text	Text	Text
sandybrown	`#F4A460`	Text	Text	Text	Text
goldenrod	`#DAA520`	Text	Text	Text	Text
darkgoldenrod	`#B8860B`	Text	Text	Text	Text
peru	`#CD853F`	Text	Text	Text	Text
chocolate	`#D2691E`	Text	Text	Text	Text
white	`#FFFFFF`	Text	Text	Text	Text
silver	`#C0C0C0`	Text	Text	Text	Text
darkgray	`#A9A9A9`	Text	Text	Text	Text
gray	`#808080`	Text	Text	Text	Text
slategray	`#708090`	Text	Text	Text	Text
black	`#000000`	Text	Text	Text	Text

2025年08月07日没有评论页首

我知道哪些是 leaf blocks，只是让你帮我找回记忆，不是让你乱答

模型仍然是主流的 GPT-4o，这模型也不差吧？你们天天 Vibe Coding 就靠这吗？

参考

2025年08月06日 4条评论页首

同时换了家里的入网方式➕️路由器后，自制的硬盘柜风扇就不受控制了¹。直观现象是：HomeKit 设备显示为离线。

由于当初没来得及给 ESP8266 写 OTA 升级程序，最终还是被迫把机箱拆开来用串口看了日志。日志卡在了连上 WiFi 并成功获取到 IPv4 的地方。好家伙，不知道怎么办了。尝试开启 Verbose 日志，发现是进一步卡在了获取 IPv6 的地方。由于新路由器我关了 IPv6，所以复用的 example 代码的网络连接函数直接宕机了…… 离谱。

都怪我代码写得太粗糙…… 想加个 OTA，官方的太复杂，而我自己包装的只适用于 ESP32 系列，遂罢。 ESP32 官方基于 C语言写的 API 还是太简陋、太过于面向过程了。是不喜欢操作对象吗？一点都不 fancy。所以他们好像又拿 C++ 写了一遍，但是好像又只能给 Arduino 平台用。那我还不如玩手机。

一个小插曲： 一不小心一年没玩硬件了，竟然看着代码完全是懵的。用 minicom 和 picocom 竟然都无法正确显示串口内容。狗屁通说 ESP8266 的波特率是 74880。What？这什么鬼波特率，从来没过如此奇葩。虽然但是，前面两个还是不行。make 了一下原来才发现应该用 make monitor 来观察串口输出。虽然但是，它用的波特率真的是 74880。但是为什么别家的用不了？

给家里的世特力硬盘柜加个智能风扇以及上电自启 ^

2025年08月02日没有评论页首

OrbStack 无法将用 sshfs 挂载的文件系统显示在 Finder 上

以前还可以用 MacFuse + SSHFS 挂载 ext4 文件系统，好像自从 MacOS 某个版本强制开启 SIP（System Integration Protection，系统完整性保护）后，第三方开发者的内核驱动全部被干没了。一直很好奇果子自身用什么方式挂载 Linux 文件系统。

突然想到 OrbStack 在 Finder 侧栏能非常方便地显示其运行的虚拟机/容器的文件系统。所以能不能在 Linux 内 sshfs，然后随着 Linux 系统一同显示出来？

结论是：不能。

显示的是挂载前的目录（的内容）。新创建的文件也是到挂载前的目录内。取消挂载后可以在 Linux 内看到。

2025年08月01日没有评论页首

块编辑器换成 Blocknote 了，AI 风太重了

注意

这篇文章不是用块编辑器写的。

我觉得功能太简单了，无法写出复杂内容的页面。对于我自己来说，不如手写舒服。
集成此功能的主要目的是多样化支持（免费代码越写越死），后续还想支持 Typst: Compose papers faster。

总共花了两天时间：看文档，学 React 框架，最终差强人意地集成进来了，代码改动其实很少，主要时间在学习各种东西。

那还是说几个不好体验吧：

LOGO 的这种蓝紫色风格太 AI 了。有一种 Vibe Coding 的感觉，有点不适。
很难自定义，文档看起来很多，其实可用内容很少。而且部分内容需升级成 Pro 才能看。
1. 很多组件没有文档。比如 Image，得靠从文档结构反推用法。
2. “Image 组件如何重写上传UI”不给看，难以自定义。
会允许一些不规范的内容存在：
1. 允许段落内出来列表。见：BlockNote - Tables。HTML 规范是不允许 <p> 内出现 <ul> 的。

文档结构（Document Structure）没有明确的规范文档，只能从实践反推规范。从“文档结构”到“HTML”的渲染过程是我自己手写的。只能做到尽量兼容。

对表格的编辑体验比较满意，勉强算比较接近 Confluence 的编辑体验了。

测试用 Blocknote 编写的文章：《测试 Blocknote 块编辑器》。

2025年08月01日没有评论页首

测试 Blocknote 块编辑器

2025年08月01日没有评论页首

QQ 居然暴露了通过 QQ 号直接获取头像的接口

依稀记得很多年前就被禁止了，没想到在逛网站《关于建立blog的第一篇文章👻 - 李欲裕》的时候发现居然能通过 QQ 号直接获取头像：

我的头像：https://q.qlogo.cn/headimg_dl?dst_uin=191035066&spec=4

spec 参数看起来是用来配置图片大小，测试了一下 5 是高清图。

又可以加个 TODO 了，虽然不一定会做：

增加通过 QQ 号获取评论者头像并显示

但是链接中不能包含QQ号以防止隐私泄露。上述网站是可以直接看到 QQ 号码的，有点不注重隐私。

2025年07月30日没有评论页首

尝试给文章加个可视化编辑器，Editor.js 让我很难受

我一直不想给博客文章编辑器加“更好用的”/可视化编辑器的一大主要原因就是：真的不好用/不如手写。

今天尝试了一下 Editor.js，说说我遇到哪几个不能忍的小问题：

“Clean JSON Output” 并不 Clean

段落内带加粗的文本“aaa bbb ccc”实际生成的是：
1

aaa <b>bbb</b> ccc
你跟我说这叫 clean？

我以为是我的用法有问题，结果看了官方的例子也是如此。
行内格式化工具应用后无法取消

比如：给末尾的文本应用加粗/代码等格式后，后续所有的文本都会自动应用此格式且无法取消也无法再插入普通文本。

说起来有点空洞，看视频吧：

可能的解决办法是：输入一段普通文本，再把它取消为代码。太离谱的操作了。