奇舞周刊475期：2022年 CSS 生态圈技术趋势！

记得点击文章末尾的“ 阅读原文 ”查看哟~

下面先一起看下本期周刊 摘要 吧~

奇舞推荐

■ ■ ■

 2022年 CSS 生态圈技术趋势！

一年一度的 State of CSS 调查结果正式公布！通过本文看看2022年 CSS 生态圈的技术趋势！

 React Streaming SSR 原理解析

React 18 提供了一种新的 SSR 渲染模式：Streaming SSR。通过 Streaming SSR，我们可以实现以下两个功能：Streaming HTML 和 Selective Hydration。本文完成了 Streaming SSR 主要源码实现的分析。

 内有乾坤！大有学问的字体定义原理

字体定义，其实是每一个项目都必须要有的。CSS 字体的定义，字体 font-family 相关其实有非常多容易被大家忽视的小细节。通过本文了解字体定义的方方方面。

技术实践

■ ■ ■

 自己写插件控制 Webpack 的 Chunk 划分，想怎么分就怎么分

想必大家都用过 webpack，也或多或少了解它的原理，但是不知道大家有没有写过 Webpack 的插件呢？本文实现了一个划分 Chunk 的 webpack 插件。通过本文了解 Webpack 的插件开发流程，并实现插件自己来控制 Chunk 的划分。

 造轮子利器：AST 与前端编译

在前端基建中，ast 可以说是必不可少的。对 ast 进行操作，其实就相当于对源代码进行操作。通过了解 ast 在开发过程中的使用流程，能够让我们方便地造更多轮子。

 现代 CSS 之高阶图片渐隐消失术

本文利用了 CSS @propery 和 mask，实现了一些原本看上去需要非常多 div 才能实现或者是需要借助 Canvas 才能实现的图片的渐隐消失效果。同时，借助了 SCSS 预处理器，在寻找到规律后，极大的简化了 CSS 代码的书写量。

扩展边界

■ ■ ■

 CreateML 使用以及在 iOS 中应用介绍

在低代码/无代码领域，例如 MS Power Platform，AWS 的 Amplify 都有类似于 AI Builder 的产品，这些产品主要让用户很低门槛训练自己的深度学习模型，CreateML 是苹果生态下的产品，工具上伴随 XCode 下发，安装了 XCode 的同学也可以打开来体验一下。

 如何设计可视化搭建平台的组件商店？

本文详细介绍了如何设计可视化搭建平台的组件商店。系统性的介绍了什么是组件商店、组件商店工作流设计和组件商店工作流具体方案实现等。

 简单实现一个虚拟形象系统

是不是看到有人通过“虚拟形象”功能，给自己带上了口罩、眼镜之类，是不是也想自己搞一个呢？本文简单实现了一个虚拟形象系统。

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。