关于我
全栈工程师,专注前端架构与开发者工具。
比起堆功能,我更在意「这个东西为什么是这个形状」。你正在用的这个终端就是例子——
它没有引入任何终端模拟器库,词法分析、语法解析、变量展开、glob、管道、
虚拟文件系统全部是从零写的 TypeScript,React 只负责把字符画到屏幕上。
这条边界由 ESLint 强制:`src/core/` 里出现 React 的 import 会直接让构建失败。
写代码的几个习惯:
- **先写测试。** 这个站点约 3500 行实现配 41 个测试文件、425 个用例,
内核部分不依赖浏览器,可以在 Node 里直接跑。
- **注释解释「为什么」,不解释「是什么」。** 代码写了什么它自己会说;
为什么这么写、为什么不是另一种写法,只有注释能留下来。
- **无障碍不是补丁。** 这个终端在禁用 JavaScript 时会还原成一份语义化简历,
读屏软件可以完整读出。隐藏用 clip 裁剪而不是 `display:none`——
后者会被读屏直接跳过,等于没做。
- 主要方向:TypeScript / React / Rust / WebAssembly
- 常驻:中国
- 现状:开放合作机会
输入 `projects` 看我做过什么,`skills` 看我会什么,`contact` 找到我。
如果你用的是 Chrome 且开了内置模型,输入 `ask` 可以直接和我聊——
那个模型完全跑在你自己的机器上,问题不会发到任何服务器。
技能
语言
- TypeScript 5/5
- JavaScript 5/5
- Rust 3/5
- Go 3/5
前端
- React 5/5
- Vite 4/5
- CSS 4/5
- WebAssembly 3/5
工程
- Node.js 4/5
- Vitest 4/5
- ESLint 4/5
- Git 4/5
- CI/CD 3/5
- GitHub Actions 3/5
其他
- 无障碍 (a11y) 3/5
- SEO 3/5
项目
terminal-site
你正在使用的这个网站。一个纯静态的终端模拟器,没有用任何现成的终端库,
整条命令链路从零实现。
- **shell 前端**:词法分析 → 语法解析 → 变量展开 → glob 匹配 → 执行器。
支持管道 `|`、重定向 `>` `>>`、环境变量 `$VAR`、退出码 `$?`、Tab 补全、历史记录。
- **虚拟文件系统**:内存中的树结构,路径解析、目录遍历、
以及和真实系统一致的错误码(ENOENT / EISDIR / EPERM)。
- **进程契约**:每个命令实现同一个 `Process` 接口,通过流式 `IO` 收发数据。
因此任何命令天然可以进管道——包括以后新加的。
- **零框架内核**:`src/core/` 不允许出现 React import,由 ESLint 强制。
内核可以脱离浏览器在 Node 里单测,也为将来挂载 WASM 命令模块留好了接口。
SEO 上有个专门处理:爬虫不执行 JavaScript,所以构建期有一个 Vite 插件把
Markdown 内容渲染成语义化 HTML 注入 `index.html`——对视觉用户 clip 隐藏、
对爬虫和读屏软件完整可见,禁用 JS 时自动还原为正常排版。
- 技术栈:TypeScript, React, Vite, Vitest
- 规模:约 3500 行实现,41 个测试文件 / 425 个用例
- 状态:持续维护
联系方式
- Email: mr.web0310@gmail.com
- 站点: https://i.xiaohan.dev
邮件我一般在 24 小时内回复。