早就听闻 Figma 市值非常高（大概好几年前吧），把 Adobe PhotoShop 都给干下去了。以前只是听闻 Figma 用起来比 PhotoShop 更简单所以才深受用户喜爱，现在感觉事情并没有那么简单，Figma 市值之所以那么高肯定是有原因的，原因应该是盈利确实很好，市占率确实很高，因为我发现它好像是专门做 UI 设计的工具，而随便一想就知道这块蛋糕在现在这个时代是特别大的。

我的东家也是做白板类项目的，不过也是做垂直领域，EDA，项目地址在此：嘉立创 EDA 专业版。我所了解的其他白板项目有这些：

• Excalidraw
• paint-board，LHRUN/paint-board: 🎨 A powerful multi-end drawing board that brings together a lot of creative brushes to experience a whole new range of drawing effects!
• yft-design
• pointless

可见能结合具体业务，垂直发展，才是白板项目能否壮大的关键。而具体业务也有大有小，UI 设计，海报设计这些用户面大所以相应的市值也非常高。

最近又开始想自己做做项目了，这个项目我思考了好几年，早就想做，但是一拖再拖。但最近愈发觉得，这个项目实在好，应该去做。理由如下：

1. 这个赛道我特别喜欢，我就喜欢收藏一些特别有趣的网站
2. 可以锻炼技术能力，光靠公司项目，很多技术还未尝试，很多问题也没有遇到过
3. 可以结合自媒体，自媒体导流到我这个项目
4. 将来给子女教育用，让他看看这个丰富多彩的世界，选择自己真正感兴趣的几个领域深挖
5. 搞社区，结识相同兴趣的伙伴

这个项目就是仓鼠导航。仓鼠这个名字的意思是喜爱收藏，而且又是非常常见的宠物，很适合做项目名。这个项目的第一个业务领域就是把我收藏的诸多有趣网站，以不错的 UI 展示，分门别类出来。采用纯静态网站的方式构建，如果后期要新增收录，我只需要修改一个 markdown 文件即可。

https://liuqinh2s.github.io/blog/navigation/，这是我目前的一个网址收藏栏目，我真正想做的是一个导航网站，用于收藏一些不容易记忆的网站，虽然现在已经是手机和APP的天下了，但还是有不少网站值得记录下来的。

git add 的意义是什么，为什么要设计出这个？

答：git add 的意义是提交粒度的精细化控制。使用 git add -p 可以精细到代码块。git add 引入"暂存区"（Staging Area）概念 ​

Git 明确划分工作流阶段：

• 工作目录：开发者实时编辑和保存文件。
• 暂存区：通过 git add 构建“待提交快照”
• 版本库：通过 git commit 永久保存暂存区内容。

的贷款八零顶顶顶

优势：

• 避免误提交未完成的代码
• 支持多次 git add 逐步完善提交内容

底层数据结构的准备：

执行 git add 时，Git 会：

1. 计算文件内容的 SHA-1 哈希值（唯一标识）
2. 将文件内容存储为 Git 对象（Blob）
3. 更新暂存区索引（.git/index），记录文件路径、哈希值和元数据

提交时（git commit），Git 只需基于索引生成 Tree 和 Commit 对象，提升效率

暂存区是 Git 区别于其他版本控制系统（如 SVN）的关键设计

Vue 也是比较常用的前端框架，我这篇文章尝试总结一下 Vue 的常用知识点

声明式编程 + 组件式开发

js 原生语言和 JQuery 这类库，都是命令式的编程，而 Vue 和 React 这类框架，则是声明式编程，或者说是数据驱动式编程。它们的区别在于是否要手动操作 DOM 更新视图。声明式编程只需要关注数据更新，而不用操心 DOM 的更新。

早先的前端开发都是html、js、css三类文件分离的。如果类比做人体的话，html 就像人体的骨骼，是个架子；js 就像人体的肌肉，可以让人体动起来；css 就像皮肤，负责外观。但现在前端编程又回到了融合它们三个的组件式开发的时代。因为组件式开发，封装性更强，这也意味着维护更简单，使用更方便。

window.postMessage()（通用跨域方案）

通过获得目标窗口引用（如 window.open()返回对象、iframe.contentWindow 或 window.opener），发送可序列化数据。

1
2
3
4
5
6
7
8
9
10

// 发送方
const targetWindow = window.open('child.html');
targetWindow.postMessage('Hello', 'https://example.com');

// 接收方
window.addEventListener('message', (event)=>{
    if(event.origin === 'https://example.com'){
        console.log(event.data);
    }
})

优势：支持跨域通信，安全性高（需验证 event.origin）。
局限：需预先建立窗口引用关系，无法广播消息。