2026-第三十七周

该周报主要为各个地方内容的汇总整理

技术

工具

更新

设计

Motion 是你本不会注意到的部分

动效是用户界面里“不应该被注意到”的关键细节——它让人明白刚刚发生了什么，让操作连贯流畅。作者将自己的博客比作一块好却煎坏的牛排，并围绕六个细节进行动效打磨，让网站从“能用”变成“真正有质感”。

• 💡 动效的本质：它的存在是引导用户感知界面变化，而不是为了炫技；缺少动效时，每个操作都会变成生硬跳变，像一台“没有上油的生锈机器”。
• 🧾 列表入场改为整体级联：文章列表不再由每一行各自淡入，而是作为单一整体交错进入，行间间隔约 50ms，约 0.5 秒内完成。父组件控制间隔，子组件只描述自己的动画，因此即使列表被过滤或重排也不会错位。
• 🔍 搜索对话框加入过渡：打开时从 96% 缩放淡入，背景稍快变暗以将视线引向面板；关闭动画更短促。借助 AnimatePresence 让退出动画成为可能，同时修复了点击外部无法关闭、以及焦点未正确落入输入框的问题。
• 📉 头部导航向下收缩让开：向下滚动时头部缩小约 6% 并略微上提，回滚时恢复。通过滚动位置驱动 MotionValue 而不是 React state，避免每次滚动都触发重渲染；并且用迟滞区间避免在临界点反复切换，且只是视觉缩放，不改变实际布局。
• 📊 文章阅读进度条：页面顶部新增一条 2px 细线，表示阅读进度。使用 useScroll 指定文章容器为测量目标，而非整个页面，并附加弹簧平滑处理；不显示百分比数字，避免干扰阅读，同时保证文章结束时进度条准确停在满格。
• 🖱️ 统一所有卡片的悬停反馈：之前每种卡片都有不同缩放和速度，作者将效果统一为“卡片上移 2px+ 图片放大到 1.03”，使用纯 CSS 实现。并通过 @media (hover:hover) 限制为真正的鼠标设备，避免触屏卡死在悬停态；同时让 :focus-visible 获得完全一致的视觉反馈，确保键盘导航也不被忽略。
• 🖼️ 页面之间加入视图转场：点击文章卡片时，旧的索引页和新的文章页会交叉淡化，且被点击的卡片图片会通过 View Transitions API 中相同的 view-transition-name 被浏览器识别，从而平滑移动到文章顶部图位置。等待新页面渲染完成后再启动捕获，否则转场会失效；不支持该 API 或开启减少动效时会自动回退为瞬时导航。
• ✨ 真正的价值并不在单个功能中：这些改动不会有人专门感谢，也看起来“像浪费一个晚上”，但配合在一起，就构成了普通网站与“有人认真思考过每一个细节”之间的差别。写作、布局、颜色都没变，仍是同一块牛排，只是现在被恰当地烹饪，能尝到鲜甜的肉汁。

其他

关于向上管理以及如何做

向上管理不是讨好上级，而是从领导视角出发，主动沟通、协同和支持，确保双方共同成功。它是区分同水平人才成长速度的关键能力，核心在于弥合自己意图与他人感知之间的差距，并通过预期管理建立信任。

• 🧭 先理解上级视角：思考“什么样的下属会让领导放心又欣赏”，以此指导自己的行为。
• 🤝 管理上级的实质：不是控制或迎合，而是看到领导看不到的团队实情，同时理解领导的处境与目标。
• 🎯 胜任本职是第一前提：明确领导的期望，确保自己的优先级与团队方向一致，并努力把该做的事做好。
• 🛡️ 成为可靠的人：主动汇报进度，不等催促；让领导能把任务交给你后不用再担心。
• 📢 宁可多沟通，也不要制造“惊喜”：无论事情好坏都提前同步，问题出现时带着缓解方案汇报，避免因隐瞒失去信任。
• 💡 带着方案说问题：说出风险的同时也要给出解决思路、所需支持，而不是只抛困难。
• 🔁 用“复盘”替自己加分：下次见面先回顾上次达成的共识、各自承诺和进展，既体现负责，也促使对方履行承诺。
• 🧾 把“自我品牌”当动作来经营：别人如何感知你的“做了什么、怎么做、为何做”比你自己怎么看更重要。
• 🚫 别怕被当成“拍马屁”：管理上级是正当的专业技能；你的经理无论如何都会影响你，主动经营这段关系才最有益。