给我整个地图

今天是来到塔林的第二年开学典礼前一天，提前录下这一周的内容。话题挺多，主要集中在技术探索和个人网站优化： 🌀 流式加载与 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 静态资源管理。 个人感受：很多技术“看起来很酷”，真正理解后才发现其简单本质。 👣 新学年、新阶段，迎接在塔林的第二年。