这是前端食堂的第 138 篇原创

美味值：🌟🌟🌟🌟🌟

口味：咸蛋黄小龙虾披萨

• 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly[1]

本期摘要

• 11 月登陆浏览器的新特性
• Chrome 108
• VueConf 2022 所有演讲嘉宾及日程确定
• 第 93 次 TC39 会议
• TS 挑战
• 置灰网站方式合辑
• 优化 Vue 项目技巧合辑
• CSS 中的颜色格式

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1. 11 月登陆浏览器的新特性[2]

Firefox 107、Chrome 108 发布稳定版本。其中 Chrome 108 主要包括如下新特性：

• 安卓版 Chrome 浏览器视口行为变化；
• 一波 新的视口单位[3]；
• 在打印时，break-before、break-after、break-inside 支持 aviod 属性，避免被分页破坏；
• 联合凭证管理(FedCM) API[4]。

关于 Chrome 108 的更多内容请移步 New in Chrome 108[5]。

2. VueConf 2022 所有演讲嘉宾及日程确定

2022 年 12 月 10 日 10:00 点开始，精彩议题如下：

• 尤雨溪 - Vue 的进化历程；
• 蒋豪群 - Vue 项目配置：最佳实践与个人偏见；
• Anthony Fu - VueUse 最佳实践；
• 敖天羽 - Vue 3.0 SSR 在 bilibili 国际版实践；
• 三咲智子 - Vue Macros 介绍及基本原理；
• 某兔 - 大型活动中的 Vue 的静态检查实践；
• 蔡少辉 - 使用 Vue 构建 CLI 应用；
• 崔红保 - Vue之于Native平台的三次进化；
• 唐梦予（ShenQingchuan）- Vue / Vite 中文文档翻译心得。

3. 第 93 次 TC39 会议[6]

一大波提案状态更新，卷起来。

Stage 4

• Intl Enumeration API[7]

Stage 3

• Set Methods[8]
• Explicit Resource Management[9]
• Iterator Helpers[10]
• Well-Formed Unicode Strings[11]

下面我们来看技术资料。

技术资料

1. TS 挑战[12]

15 道题，带你入门 TypeScript。

2. 置灰网站方式合辑

• 全站置灰，使用 CSS 的 filter: grayscale()；
• 针对低版本的浏览器，使用 SVG 滤镜通过 filter 引入；
• 首屏置灰，使用 backdrop-filter: grayscale()配合 pointer-events: none；
• 如果想要更好兼容性，使用混合模式的 mix-blend-mode: hue、mix-blend-mode: saturation、mix-blend-mode: color。

3. 优化 Vue 项目技巧合辑[13]

把 10 多个 Vue 优化小技巧收入囊中。

4. CSS 中的颜色格式[14]

在 CSS 中表示颜色，你可以使用很多种格式(十六进制、rgb()、hsl()、lch() 等)，Josh 带你深入他们的工作原理并充分利用它们。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1. 如何解决前端领域的竞态问题？[15]
2. 浅谈 React 组件设计[16]

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

周刊一锅端

如果大家还没看过瘾，给大家推荐一下食堂技术周刊的合作伙伴，赶快把他们也抱入碗中吧～

• 前端早早聊的 18 个成长宝藏库[17]：前端早早鸟，前端早早跑
• MDH 前端周刊[18]：大厂一线 P8，Umi、Dva 等库作者
• DEX 周刊[19]：关于产品、设计、前端、软件等内容的精华资讯邮件列表

周刊赞助

整理周刊要花费大量的精力和时间，你可以通过以下方式支持我：

• 将食堂分享给你的朋友；
• 订阅食堂的竹白付费专栏(食堂为你准备了专属的会员通讯，以及前端食堂数字花园知识库的访问权限)。

订阅地址：https://hungryturbo.zhubai.love/

参考资料

[1]

食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly: https://github.com/Geekhyt/weekly

[2]

11 月登陆浏览器的新特性: https://web.dev/web-platform-11-2022/

[3]

新的视口单位: https://web.dev/viewport-units/

[4]

联合凭证管理(FedCM) API: https://developer.chrome.com/blog/fedcm-shipping/

[5]

New in Chrome 108: https://developer.chrome.com/en/blog/new-in-chrome-108/

[6]

第 93 次 TC39 会议: https://dev.to/hemanth/updates-from-the-93rd-tc39-meeting-2n8f

[7]

Intl Enumeration API: https://github.com/tc39/proposal-intl-enumeration

[8]

Set Methods: https://github.com/tc39/proposal-set-methods

[9]

Explicit Resource Management: https://github.com/tc39/proposal-explicit-resource-management

[10]

Iterator Helpers: https://github.com/tc39/proposal-iterator-helpers

[11]

Well-Formed Unicode Strings: https://github.com/tc39/proposal-is-usv-string

[12]

TS 挑战: https://typescript-exercises.github.io/

[13]

优化 Vue 项目技巧合辑: https://www.smashingmagazine.com/2022/11/optimizing-vue-app/

[14]

CSS 中的颜色格式: https://www.joshwcomeau.com/css/color-formats/

[15]

如何解决前端领域的竞态问题？: https://mp.weixin.qq.com/s/M2-XXPdLKlTqzGefz7UPvA

[16]

浅谈 React 组件设计: https://mp.weixin.qq.com/s/4vVTLmPhpP1DFO6_ZkSzyw

[17]

前端早早聊的 18 个成长宝藏库: https://mp.weixin.qq.com/s/3yLbUwqzSy2gFHXkO0PICg

[18]

MDH 前端周刊: https://mp.weixin.qq.com/s/NGux3r0P1JJH_z4-vfeksQ

[19]

DEX 周刊: https://newsletter.dex.group/

公众号：前端食堂

知乎：童欧巴

掘金：童欧巴

这是一个终身学习的男人，他在坚持自己热爱的事情，欢迎你加入前端食堂，和这个男人一起开心的“变胖”～