美味值：🌟🌟🌟🌟🌟
口味：冬日草莓
PC 端在仓库里看体验更好，顺手赏个 Star 是对食堂最大的支持。
本期摘要
- StackBlitz 加入字节码联盟
- React Native 新架构的更新事宜
- Safari 15.4 中的新 WebKit 功能
- 百万周下载量 node-ipc 包作者供应链投毒
- ESLint 的 2022 年支出计划
- Web 页面的体积膨胀了 10 年，我们学到了什么？
- 为双屏和可折叠设备构建 Web 布局
- Tao of Node
- 关于 Framer Motion 布局的一切
- antfu 分享了他的 VS Code 配置和扩展
- 如何使用 Three.js 和 React 渲染你自己的 3D 模型
- 52 个设计原则 / 认知偏差知识手册
大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。
技术资讯
StackBlitz 是一个由 WebAssembly 提供支持的 Web IDE，它们在去年官宣 WebContainers 时名声大噪。
字节码联盟是一群公司和个人，聚集在一起形成的行业合作伙伴关系。目标是以默认安全的方式设计 WebAssembly 的生态系统，让我们可以更安全的运行不受信任的代码，杜绝诸如供应链投毒的恶意攻击。
因为有着共同的愿景，加入字节码联盟后，相信他们可以更快的将 WebContainers 引入所有设备、语言、平台和运行时。
React Native 成立了专门的新架构工作组，并提供了迁移指南和使用模板，并且协助第三方库进行迁移。默认使用新的 JavaScript 引擎：Hermes。
此版本是 2022 年的第一个大版本，新增了 70 多个新功能。包括 HTML、CSS、Web API、JavaScript、Web App、Media、Security 等等。
又一次的供应链投毒，又一次的开源信任危机，JavaScript 的生态太脆弱了。整个事件的过程和反思可以通过上面的链接进行了解。
正如 ESLint 团队在文章中所说，在接受捐赠的三年以来，他们一直在探索如何更加合理的使用资金，来改善 ESLint 项目和生态系统，并给出了一些指导原则。
需要花钱的地方有：
-
每小时向团队成员付费；
-
每月 1000 美金的贡献者池；
-
支持和捐赠上下游依赖；
-
“大项目”：比如他们正在精心设计的新网站。
下面我们来看技术资料。
技术资料
网页也有“变胖”的困扰，而且这种不断增加的大小和复杂性并没有被更快的设备和网络或者我们勤奋的浏览器完全缓解。
如图所示，与十年前相比，现在的 PC 网页体积中位数是十年前的 3 倍，移动页面的中位数几乎是十年前的 7 倍。尽管网页一直在“变胖”，我们也需要给用户提供良好的用户体验。本文给出了一些工程上的最佳实践。
为了能使布局适应双屏和可折叠设备，Web 平台提供了很多与现有概念集成的新功能，如：媒体查询、CSS env() 环境变量、 Web API 等等。这样可以让开发人员和设计人员更专注于如何用多个屏幕提升用户体验，而不是花更多的学习成本去学习额外的东西。
Alex Kondov 在发布了广受欢迎的 React 之道后，又分享了他在开发 Node.js 时的最佳实践，内容包括架构、编码、工具和测试等方面。
使用 Framer Motion 进行布局动画的交互式文章，文中有大量示例。
看看有没有你不知道的好东西。
好文推荐
下面来看一下好文推荐，本周推荐的好文是：
在本文中将介绍如何使用 react-three-fiber 在 React 项目中渲染和配置在 Blender 或 Maya 等 3D 软件中创建的 3D 资产。
再分享一个很酷的网站，创意设计师 Jesse Zhou 的个人网站
看完之后我已经心动了，这太有“食堂”的感觉了，以后有时间一定要给食堂做一个。
下面两篇资料总结了一些设计原则，可以提升我们的产品设计能力。(是我请 UI 小姐姐喝奶茶换来的)
小红书产品设计中心制作，每个原则都包括来源与推导过程、解读与应用案例、还有扩展阅读。
字节的飞书设计团队出品，总结了 67 个认知偏差和示例。
好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。
你的前端食堂，吃好每一顿饭。我们下期见。
❤️爱心三连击
1.如果你觉得食堂酒菜还合胃口，就点个赞支持下吧，你的赞是我最大的动力。
2.关注公众号前端食堂，吃好每一顿饭！
3.点赞、评论、转发 === 催更！
