最近花了点时间搞了个小站，把自己平时常用的几个开发工具整合到一起了，趁周末写篇文章记录一下。
起因
其实就是受不了了。
平时写代码经常需要格式化个 JSON、对比两段文本的差异、画个简单的流程图。这些需求不大，但每次都得去搜在线工具，然后：
- 这个网站弹广告
- 那个网站要注册
- 好不容易格式化完了，想发给同事看，只能截图
后来实在烦了，干脆自己撸一个。
在线工具
目前整了十来个工具，日常开发基本够用：
| 工具 | 功能 |
|---|---|
| JSON Editor | 格式化、压缩、校验 |
| Diff Checker | 文本对比，高亮差异 |
| Mermaid Editor | 流程图、时序图在线画 |
| Markdown Preview | 实时预览，支持 GFM |
| Regex Tester | 正则测试，匹配高亮 |
| SQL Formatter | SQL 格式化、压缩 |
| Base64 | 编解码 |
| JWT Decoder | 解析 token |
| ... | 还有几个，就不一一列了 |
界面做得比较简洁，没什么花里胡哨的东西，打开就能用。
一键分享
这个是我觉得最实用的功能。
比如你格式化了一段 JSON，想发给同事看，点一下分享按钮，直接生成一个链接。对方打开就是你当前的内容，不用复制粘贴，不用截图。
原理其实很简单，就是把内容编码后放到 URL hash 里，数据不经过服务器，全在本地处理。
用起来大概是这样：
https://devref.cc/tools/json#eyJjb2RlIjoie1xuICBcIm5hbWV...
对方打开就能看到一模一样的 JSON 和格式化结果。
团队内部对个接口返回格式、讨论个数据结构什么的，直接甩链接就行，比以前方便多了。
DevRef Library
工具做完之后，又顺手整了个文档库。
说白了就是把平时老忘的东西整理了一下，方便自己查。包括：
- Linux 命令速查：grep、sed、awk、find 这些常用命令的参数和例子
- Git 速查：rebase、cherry-pick、bisect 这些不常用但关键时刻要用的
- HTTP 状态码：1xx 到 5xx 全覆盖，忘了就翻一下
- 系统延迟数字：L1 缓存、SSD、网络延迟的数量级，面试可能会问
- Redis 数据结构：各种类型的常用命令
- IDE 快捷键：VS Code、JetBrains、Xcode 的快捷键对照
还有 Docker、K8s、Cron 表达式、正则语法这些，基本上开发中会翻的东西都有。
每个文档都做得比较简洁，不整那些废话，打开就是命令 + 例子，直接能用。
Daily Picks
这个是后来加的功能，每天自动更新。
原理是用脚本抓取一些技术资讯源（Hacker News、GitHub Trending 之类的），然后用 AI 筛选和总结，挑出几篇值得看的内容。
每天大概 5-10 条，涵盖：
- 开源项目推荐
- 技术文章精选
- 行业新闻
不用自己去刷信息流，打开看一眼就知道今天有什么值得关注的。
说实话这个功能主要是给自己用的，早上泡杯咖啡扫一眼，比刷手机效率高。
技术栈
既然是掘金，顺便聊聊技术实现：
- 前端: Next.js 16 + TypeScript + Tailwind
- 部署: Firebase Hosting，静态导出，CDN 分发
- 编辑器: Monaco Editor（就是 VS Code 那个）
- 流程图: Mermaid.js
- Diff: diff-match-patch
- Daily Picks: Cloud Run Job + Gemini API，每天定时跑
整个项目主体是纯静态的，没有后端，所有处理都在浏览器里完成。这样一是省服务器成本，二是用户数据安全，不用担心隐私问题。
Daily Picks 用的是 Cloud Run Job 每天定时生成，生成完推送到静态文件里，所以访问起来也很快。
一些细节
做的时候也踩了些坑，简单提几个：
- URL 长度限制：分享内容太长的话 URL 会超限，后来加了压缩，用 pako 做 gzip 压缩后再 base64 编码，基本够用了
- Mermaid 渲染性能：大图会卡，做了 debounce，输入停顿 300ms 后再渲染
- SEO：静态站 SEO 比较好做，每个工具页都有独立的 title/description，还加了 Schema.org 结构化数据
- 搜索：集成了 Pagefind，支持全站搜索，Cmd+K 唤起
最后
地址：devref.cc
代码没开源（主要是写得比较糙，不太好意思放出来），但如果有同学对某个功能实现感兴趣，评论区可以聊。
工具类的东西，好不好用试试就知道。欢迎提建议，有什么常用工具想加的也可以说。
