AI 摘要：本文主要介绍了字节跳动商业化前端团队（Cuckoo FE）在工程化实践中的经验和方法。团队面对人员和业务快速增长带来的规范不足、文档缺失、流程不畅等问题，着重进行工程化体系建设，通过连接公司已有基建和团队内部沉淀，提升整体效率和质量。

#### 前端工程化定义与发展

前端工程化旨在通过流程、工具和规范降低成本、提高效率。其发展经历了页面动态化、模块化、跨平台大前端和智能化四个阶段，每个阶段都解决了不同层面的技术问题。

#### 工程化实践具体措施

1. 规范建设：规范团队流程、编码和业务，逐步推进和工具化运营，确保规范有效落地。
2. 统一技术选型：基于团队沉淀，逐步从自研框架过渡到社区成熟方案和公司内部自研工具。
3. 研发物料沉淀：构建业务组件、物料库和最佳实践库，提高研发效率。
4. 中台渲染引擎：通过页面配置化实现高效开发，适用于低复杂度业务逻辑。

AI 摘要：文章介绍了如何在 Chrome 126 中，无需JavaScript，仅通过 CSS @view-transition 在 Astro 框架的多页面应用(MPA)中启用类似原生的页面切换动画。具体步骤包括初始化 Astro 项目，在 BaseHead.astro 中添加 @view-transition at-rule，并在文章列表页和详情页中为图片元素设置相同的 view-transition-name ，从而在页面切换时实现动画效果。最终实现了一个丝滑的动画体验。

Liruifengv

零 js 开启 View Transitions 动画 | liruifengv

Chrome 126 支持了在 MPA 多页面中启用 View Transitions，零 JS，为你的网站开启类似 native 的动画效果。

刚刚发现知名博主 3Blue1Brown 平时制作视频使用的动画库 Manim 竟然开源并且 59K Star ⭐️，有点酷炫！

结合之前使用 Manim 制作的 ChatGPT 图解原理实现教程搭配使用，感觉极佳啊 https://youtube.com/watch?v=wjZofJX0v4M

https://github.com/3b1b/manim

AI 摘要：文章介绍了在前端数据管理中结合使用 Zustand 和 React Query 的方法。传统的 React Query 在处理复杂数据和乐观更新时存在效率低和错误率高的问题。通过使用 Zustand 代替 React Query 来托管数据，并建立数据映射表，可以简化数据更新逻辑和提高维护性。具体实现包括利用 Zustand 管理状态，通过 hooks 获取数据，以及在 store 的 fetch 方法中同步远程服务器数据。该方法在一个 RSS 信息流浏览器 Follow 中得到了应用。

innei.in

一种适用于 Zustand 和 React Query 的前端数据管理方式

在上面这篇文章中提到当 React Query 托管的数据过于复杂或者冗余的话，后续在前端做数据的乐观更新会变得非常复杂并且不可控。 [!NOTE] 乐观更新指，前端在进行数据操作时，通过 API 方式向服务器提交数据，之后数据在 UI 上的更新由前端提供，不需要等待服务器的响应。这样的方式对用户

AI 摘要：作者在尝试了 React Compiler 后，总结其在减少重新渲染方面的效果。尽管简单示例中表现良好，实际应用中效果并不理想。作者在三个不同规模的应用中测试，发现 React Compiler 仅在少数情况下能减少重新渲染，远低于预期。最终，作者认为 React Compiler 虽然有潜力，但在当前版本中仍存在诸多局限，尤其在处理复杂项目时需要手动优化。

Developerway

I tried React Compiler today, and guess what... 😉

Investigating whether we can forget about memoization in React, now that the React Compiler is open-sourced.

前几天刚有人因为浏览器扩展盗取 cookie 损失 100w 刀，结果就有人写了 cookie 管理的扩展，还自荐进了阮一峰的周刊，你猜他想做什么？🤣

你猜猜它还要什么权限？向你访问的所有网页注入脚本的权限。这样的话，只需要一次恶意更新，你使用浏览器访问的所有网站的 cookie 都会泄露，甚至，还可以记录你的帐号密码🥲