本周我终于完成了一件从 2023 年就想做的事情 —— Page View Transition 动画效果。

从 Gatsby 到 Astro，再到浏览器原生的支持，这一路踩过不少坑，也让我重新思考了 SPA (单页应用) 和 MPA (多页应用) 的架构差异，以及在新技术下如何避免被历史包袱和过时文档误导。

• 背景

  • 早期网站：Jekyll → Gatsby (为体验 GraphQL)
  • 后来转到 Astro：因为它支持 React、Vue、Solid 等多技术栈混合使用
  • Astro 独特的 Island 模型：局部用组件框架，其余部分保持轻量

• Page View Transition 的兴起

  • 早期只能用 JS 模拟动画，体验差、性能差
  • 2023 年浏览器推出 原生跨页面动画 API：CSS + JS 轻量调用
  • Astro 第一时间集成，展示了视频/元素跨页面平滑过渡的酷炫效果

• SPA vs MPA 的困境

  • SPA 优点：模拟原生应用交互
  • 缺点：状态混乱、每页不是独立沙箱
  • MPA 优点：页面无状态、架构更清晰
  • 问题：文档和 AI 答案大多只偏向 SPA，MPA 方案少

• 踩坑记录

  1. 浏览器支持：
     • 2023 年时只能在 Chrome Canary 开 flag
     • 2025 年现在 Chrome & Safari 都原生支持
  2. Astro 的兼容性处理：
     • 启用 Page View Transition 会把网站强制转为 SPA
     • 导致状态混乱、逻辑 bug
  3. Vite 开发模式：
     • Dev 模式下没打包，产生重复 ID → 动画失效
     • 解决：必须打包后在 Production 模式下测试
  4. 个人环境问题：
     • 因为关掉了电脑的系统动画 → 测试时完全没显示效果 😂

• AI 与前端快节奏的矛盾

  • 多个 AI 给出的都是 错误或过时的答案
  • 甚至强行说 MPA 不存在
  • 新技术生命周期短，AI 文档滞后 → 只能靠自己判断

• 技术演进太快，AI 与文档往往落后，不一定可靠
• 前端开发中，相信自己的经验与直觉 比盲从建议更重要
• Page View Transition 实现其实很简单：
  • 给元素加 view-transition-name 标识
• 难点在于：如何理解历史架构差异、避免被 SPA/MPA 的思路干扰

这一周最大的收获是：
👉 不要被过时的知识和工具牵着走，相信自己的判断。

下周见！

今天是来到塔林的第二年开学典礼前一天，提前录下这一周的内容。话题挺多，主要集中在技术探索和个人网站优化：

🌀 流式加载与 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 静态资源管理。
• 个人感受：很多技术“看起来很酷”，真正理解后才发现其简单本质。

👣 新学年、新阶段，迎接在塔林的第二年。

• 📅 时间：2025年8月22日，第35周
• 🌐 本周主题：折腾网站 PV 统计 & 博客优化

• PV 统计功能

  • 一开始用 Cloudflare KV 存储，结果 2-3 天就触发请求上限（5000+次）。
  • 尝试国内服务「不蒜子」，但缺乏接口调用，最后选择了 GoatCounter。
  • GoatCounter 优点：
    • 免费 & 无限量
    • 提供 Dashboard，能看访问来源、设备、页面浏览量
    • 有 API，可以在网站显示访问量图标 👁️

• 遇到的技术挑战

  • 列表页要一次请求 20+ 篇博文的 PV → 做了批量请求打包优化。
  • 遇到 React SSR 水合问题（状态不同步，部分组件渲染错乱）。
  • 通过 Nanostore + computed store 临时解决，但经验不一定通用。

• 网站新功能

  • 加了 Archive 页面：按年份查看文章 📂
  • 使用 react-bits 组件库（代码复制到本地 → 灵活可改，但需要开发经验）
  • 首页还加入了一些小动画（Tree.js / 文件夹展开动效）

• 视频剪辑

  • 原来用 CapCut，但基础功能开始收费 ❌
  • 改用 微软 Clipchamp，功能完整，甚至超过当年的 Movie Maker ✂️

• 编译速度优化

  • 原来编译一次要 6 分钟 ⏳
  • 给图片颜色提取加了缓存（JSON 存储），缩短到 4分30秒
  • 还遇到 Vercel 使用老版本 pnpm 与本地版本不兼容，花了点时间修复。

• 优化博客列表页渲染 & 移动端兼容性 📱
• 开始写爬虫抓数据 🕷️
• 提升编译速度，目标压缩到 2-3分钟 ⚡
• 下下周要开学，这个月的博客改造要收尾 🎓

👉 总结：这一周基本上都在和 PV统计 + React水合Bug 打交道，顺便加了一些小功能和工具优化。

• 最近关于抗日战争和二战的话题讨论热烈：
  • 有人认为抗日宣传过度，强调日本的“坏”；
  • 也有人质疑是否应该庆祝抗战胜利，尤其是每年阅兵的安排。
• 个人观点：
  • 庆祝抗战胜利的核心在于铭记历史，而不是煽动仇恨。
  • 宣传应针对军国主义与战争本身的危害，而不是单纯针对日本国民。
• 地域差异：
  • 大连人对815（日本战败日）更有庆祝感，因为象征回归祖国。
  • 东北整体则更强调918事变的历史羞耻感。
• 历史观察：
  • 二战、抗战不仅是国家的冲突，也是对人类的巨大破坏。
  • 战争的背后常与资本主义、独裁、资源争夺密切相关。
  • 历史学习应关注战争原因和避免未来冲突。

• 网站改造：
  • 使用 MUI Masonry 实现砖块布局，视觉效果很满意。
  • 所有博客文章页面进行了临时功能更新，UI改为 Mintime 风格。
  • 增加了浏览器端全站搜索，采用 MiniSearch，性能优异。
  • 首页新增两个轮播图组件，用 Mantime 快速搭建。
• AI 编辑工具体验：
  • 收到 Kira KiloKillo AI 编辑器邀请，可生成开发文档再做代码开发。
  • 用于 404 页面开发，步骤详细，但 Astro + Mantine 兼容性问题导致无法直接运行。
  • AI 有时会迎合用户想法，逻辑错误不会自行纠正，需要手动调整。

• 探索了 VR 网站与交互体验：
  • BoyfriendTV：高质量 VR 交互体验，UI 设计优秀。
  • 对比其他 VR 应用（YouTube VR、Theatre Elswhere、Netflix），BoyfriendTV 提供了更沉浸的操作方式。
• 互动技术：
  • 远程控制设备（如跳蛋）的直播互动，实现即时用户反馈。
  • 直播中通过用户行为触发互动（如比大拇指给感谢），体验新颖。
• 科技趋势：
  • 色情行业在 VR 技术与流媒体推流上领先，但仍有 AI 翻译、内容生成空间。
  • 技术发展快，用户体验仍有提升潜力。

• 继续完善网站内容和功能：
  • 补充社交网站同步数据，利用爬虫自动更新。
  • 优化轮播图逻辑和文章展示效果。

• 本周涵盖从历史思考到技术开发再到VR体验探索。
• 核心感悟：
  • 历史需铭记，避免重蹈覆辙；
  • 技术发展快速，体验创新空间巨大；
  • AI 工具强大，但需人工监督逻辑和需求。

🏄 玩了一次电动水翼板

周一去体验了 Teltech 创业项目的电动水翼板

价格：原价 50 欧/小时

玩法：踩在板上，手持遥控器推杆加速，类似冲浪但不需要浪

体验感：速度起来挺刺激的，摔了几次，喝了不少水

💻 网站大改造

原因：之前编译时间从 40 分钟优化到 1 分钟，但整体结构依然别扭

网站发展历程：

最早用 Jekyll（做毕业旅行记录）→ 图床问题导致放弃

2020 年迁移到 Gatsby（TS + GraphQL，CSP 配置）

2023 年迁移到 Astro（Island 架构 + View Transition API）→ 功能缺失，补插件

功能与坑：

暗黑模式按钮（现在觉得鸡肋）

Monorepo 分离文章、组件、网站、测试

无线滚动功能因 Bug 删除

Masonry 砖块布局（MUI 实现，SSR 和加载顺序仍有问题）

框架选择思路：

放弃 Hugo/Eleventy：功能太简单，迁移成本高

继续坚持 Astro：相比 Gatsby，Astro 更灵活，不再被 GraphQL 绑架

🎙️ 第32周 · 周记播客 · 2025年8月2日

这周内容超丰富，我边烤猪肉边录播客，流着口水也要和你们分享这段精彩的一周！🥓🔥

✈️ 赫尔辛基建文：临时起意，却是惊喜不断

• 起因：Summer School期间有人问我“你们离赫尔辛基那么近，怎么还没去过？”于是说走就走。

• 交通：从塔林坐船去赫尔辛基，两小时左右，非常方便。有三家公司运营，我去的时候坐的是 Viking Line，回程是 Eckerö Line，票价大概19欧，强推 Viking，直接到市中心。

• 市区观光：

  • 🏛️ 白教堂、红教堂，还有老市场（干净得让我怀疑人生，跟小时候记忆里的市场场景形成奇妙对比）。

  • 🚋 电车绿绿的很像大连，交通便利，10欧买个通票全城畅行无阻。

  • 🚇 地铁体验：没有闸机、没有检票，太自由了。

• 项目目标：设计一个帮助听障人群感知紧急警报的智能手表。

• 技术部分：

  • 初期选用 Arduino Uno，结果内存完全不够，直接炸。

  • 临时换成 ESP32，感谢塔林大学：硬件资源一筐一筐地发🧰，换坏板子毫不含糊。

• 深度学习部分：

  • 使用 Edge Impulse 平台做音频分类。

  • 初始版本模型太大准确率只有 45%，用了 15000+ 特征点。

  • 学到的一招：用 MFCC 特征提取，特征数立马减到 3000+，训练速度飞起。

  • 模型结构调整：从1D CNN换成2D CNN，准确率瞬间提升至 90%+。

• 显示屏加分项：

  • ESP32 带小 OLED 屏，我把图标转成 XBM 成功显示，甚至搞了个小动画，酷炫极了！

🎙 2025 年第 31 周 Shownotes | 7 月 25 日

大家好，这一周的内容相对比较简单，主要是因为我开始参加了在塔林举办的 Summer School 暑期课程。

🧪 我选的课程是 Experimental Interaction Design（实验交互设计）。课程的核心目标，是要设计一个面向 听障人群的报警设备。背景设定是这样的：

听障人群通常白天会佩戴助听器，但晚上睡觉时不会戴。如果夜间突发火警或其他紧急情况，他们可能无法第一时间察觉。因此，我们的设计方向是开发一个可穿戴震动设备 —— 戴在手腕上，遇到警铃或火警等突发状况就会震动提醒。

这一周我们都在进行调研和设计流程的学习，更多是头脑风暴和构思阶段。预计下周会进入正式开发环节。我们可能会使用一个叫 Egimpose（或可能是 EgimPulse？） 的平台 —— 好像我一两年前曾经提过这个工具，当时还试着玩了一下，没想到这次课程里又用上了。

🧑‍💻 除此之外，这周我也简单尝试了一下 Wear OS 的开发，做了一些小 demo，不过因为时间紧张，暂时没有具体成果可分享。等到真正开发完，再和大家详细汇报。

🧳 最后，周末可能会抽空去一趟赫尔辛基转转，算是小小的放松。

🎙️ 2025年第30周｜播客周记

这一周真的干了好多事，忙并快乐着！以下是我的一周精彩回顾👇

🌟 开发 & 技术尝试

• 🚀尝试开发 Wear OS 应用，从 React Native 到 Kotlin，再到 Expo：原生体验虽麻烦但可控，Expo 省心但功能有限。

• 📱探索如何将 Unity/Godot 游戏嵌入 Android App，Unity 支持最好，Godot 4.2 开始支持但文档有限。

• 🌐我的网站升级了，不过 UI 有点小问题，还得 debug…

• 🧠尝试 Meta Passthrough Camera API，体验了本地 YOLO 实时识别与远程 LLaMA 大模型推理，硬核混合现实初体验！

🎮 娱乐 & 探索

• 🎮用 Meta Quest 跑 3DS 模拟器，实现了真正的裸眼3D体验！

• 🎧试玩了《Moonrider》，一个开源 VR 音游，体验堪比 Beat Saber。

• 📺追剧《The Rehearsal 演习》（HBO）：现实和演技的边界被彻底打破，伪纪录片形式令人深思，第二季甚至租了一台波音747拍摄！

🏛️ 博物馆之旅

• ⚓塔林海事博物馆（飞行港口改造而成），登船探秘老式水上飞机港与沙俄海军历史，超值体验！

• 🕹️PROTO Invention Factory：沉浸式蒸汽朋克风VR游乐园，模拟潜水艇、蒸汽热气球、达芬奇滑翔翼等，寓教于乐，超适合亲子！

• 🎨KAI艺术馆：参观了《Banana: Build Absolutely Nothing Anywhere Nearby》展览，反思人与社区的关系，偏艺术向，略玄妙。

🎙 2025年第29周 · 播客摘要
📅 时间：7月11日
🎉 关键词：生日、GMP AI、群体模拟、UE5学习代理、RSPack优化

• 🎂 本周生日快乐！虽然已经过了两天～

• 🧠 学习了与Game AI相关的内容，为未来实习提前准备：

  • 涉及物理引擎、A*算法、武器系统等。

  • 特别感兴趣的有 Crowd Simulation（群体模拟）和 Goal-Oriented Behavior（GOAP）：

    • 群体模拟看起来像是 waypoint + A*。

    • GOAP 是一种将目标拆解为多个节点，再从中计算最优路径的方法。

• 🤖 两种 UE5 的学习智能体方法：

  • 强化学习（Reinforcement Learning）：观察 → 执行 → 奖励 → 循环。

  • 模仿学习（Imitation Learning）：加入人工演示的数据录制。

  • 吐槽 Blueprint 太繁琐，希望有 C++ 版本。

  • 推荐 Unity 上的 ML-Agents 教程：Code Monkey 的《Machine Learning AI in Unity》和《Teach Your AI》。

• ⚙️ 开发工具方面：

  • 曾因 Babylon.js 编辑器用 Webpack 太慢而搁置项目。

  • 最近尝试 RSPack，对 CommonJS 支持很好，准备继续玩 Babylon。

🗓 2025年7月第28周｜塔林地下三层游 + 项目双崩盘周记

这一周真是大起大落。开头去逛了塔林老城边的 Kiek in de Kök 博物馆，居然意外串联起古城三层结构——城墙、塔楼和地下防空洞，从丹麦、瑞典到苏联，历史全线贯通，非常震撼🕍🔦

但后面转为吐槽模式😮‍💨：

1️⃣ 本来接了个教 Figma 的兼职，结果原老师回归我被踢了，还白准备了课。

2️⃣ 另一个用 Godot 做的中国风游戏合作，结果队友忽然全盘推翻逻辑，沟通崩塌，项目直接终止（不过也练了 Godot，动画系统真香🔥）

3️⃣ 好消息是：安卓手机成功跑上了阿里的本地大模型 MNNChat，未来可期📱🤖

总结：地道博物馆砸钱没砸够？只能说——失多于得的一周吧，但有些坑，也是成长。