HD Superman

·23 days ago

🫠 写的代码多了慢慢就会了，以前买了一堆书自学加 Google/stackoverflow 积累，现在有 AI 辅助很多东西学的更快了。

HD Superman

·24 days ago

组件库基本是我自己写的，UI 相关只用到两个，一个是 @floating-ui/react，以前是 popperjs，用于浮动定位，@headlessui/react 用于弹窗（这个库我打算以后去掉自己写一个），框架是 remix
侧边栏在全局 Layout 中是可以随页面变化引入的。
评论树的存储数据抽象上多了一个 parentId 字段，具体实现也可以考虑用父子表
1. 锁进相同按时间排序，主要是为了避免多层嵌套 UI 的问题，根据 parentId 做分页查询。大部份社区的实现都是 2 层，reddit web 版本的实现是嵌套，优点是回复逻辑清晰，缺点是移动端不友好（所以 reddit 移动端也是 2 层）
2. 这是基于 cursor 的分页逻辑，在评论较多的时候可以和 feed 一样加载，同时避免数据库查询性能问题。
评论的 UI 组件是我自己实现的，没有库，输入区是用 prosemirror 实现的编辑器，具体实现比较复杂，简单说需要实现一个自定义的光标（动画）、markdown 和 prosemirror 的 data layer 的互相转换（需要学一些编辑器概念），这里需要针对不同的 markdown 语法做特定的 parse，比如代码高亮、表格组件、加粗斜体链接等。
用 js 实现的滚动锁定，这样设计的原因是侧边栏高度通常是有限的，但可能会超过 window 高度，feed 流的高度是一直增加的，有两个滚动需求，为了避免出现多个滚动条体验不好，就用 js + sticky position 实现侧边栏的滚动跟随，需要考虑的 position 变化如下图：
hackertalk 大部份数据从 API 获取后就以 dict + 索引的方式缓存在 zustand 中（内存），这样可以在客户端有数据的时候优先显示页面，再从 API 拉最新的数据刷新 dict，由于大部份数据都不会改变，所以加载 API 新数据后页面也不会有用户感知的抖动，避免用户看到太多加载等待过程，体验更加接近本地 APP。
这个比较复杂，简单说就是一个表存各种通知数据，用 aws 的 fifo SQS 传递通知事件，实现分布式一致性。