Discover给我整 growgen给我整个地图
给我整个地图

给我整个地图

Update: 2025-08-29
Share

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 
00:00
00:00
1.0x

0.5x

0.8x

1.0x

1.25x

1.5x

2.0x

3.0x

Sleep Timer

Off

End of Episode

5 Minutes

10 Minutes

15 Minutes

30 Minutes

45 Minutes

60 Minutes

120 Minutes

给我整个地图

给我整个地图

宫不上