给我整个地图
Update: 2025-08-29
Description
今天是来到塔林的第二年开学典礼前一天,提前录下这一周的内容。话题挺多,主要集中在技术探索和个人网站优化:
🌀 流式加载与 NDJSON
- 回忆起 10 年前实习时第一次接触 SSE / 流式传输。
- 最近尝试用 NDJSON 模拟流式加载,把瀑布流页面的数据逐条展示。
- 优点:用户体验更平滑。
- 缺点:实现复杂,最后一行处理、错误重试都要额外逻辑。
- 感悟:文字/JSON 层面的流式传输发展有限,但 音视频/广告分发 其实一直在快速进化。
🌍 城市地图可视化
- 让 AI 逐年帮忙总结博客中出现的城市,并映射到地图。
- 使用 Maplibre GL + ReactMapGL(开源免 token),替代了 Mapbox。
- 难点:城市名 → 经纬度,需要额外解析,最后还是依赖了 Google API。
- 结果:把自己十多年的旅行足迹直观展示在世界地图上。
- 待优化:性能瓶颈,构建时间 6–8 分钟,地图页加载过大。
🗂️ 静态文件存储(DAM)
- 采用 Cloudinary 管理网站的静态资源(图片、3D 文件等)。
- 好处:
- 版本管理
- 动态生成不同尺寸、加水印
- 免费额度足够个人使用
- 比传统 Git LFS 更灵活,感觉像是“进化后的网盘”。
🧱 瀑布流布局探索
- 原生 CSS Masonry 仍是实验性功能,不适合正式使用。
- 尝试过多个库:
- Masonry.js:绝对定位,兼容性好但不支持 SSR/SEO。
- Material Design 实现:依赖 Flex/Grid,每次加载时会抖动。
- React-Block:解决了抖动问题,但打包方式老旧(CommonJS)。
- 结论:React-Block 效果最好,推荐使用。
🔄 Astro Page View Transition
- 三年前因 Astro 的 PageView Transition 功能从 Gatsby 迁移,但当时功能不完善。
- 最近重新尝试,发现:
- API 与 Astro 3.0 时完全不同。
- 现在支持 MPA + SPA 的优雅降级,但本质仍是单页式逻辑(prefetch + innerHTML 替换)。
- React 岛内的组件动画无法无缝结合。
- 感悟:很多看似炫酷的技术,深入后发现底层其实很朴素。
- 仍计划完成这一功能,实现当初对自己的承诺。
📌 总结
- 技术探索:流式加载、NDJSON、Masonry 布局、Astro 动画。
- 产品迭代:旅行地图可视化、Cloudinary 静态资源管理。
- 个人感受:很多技术“看起来很酷”,真正理解后才发现其简单本质。
👣 新学年、新阶段,迎接在塔林的第二年。
Comments
In Channel