大家好，这里是大家的林语冰，您现在收看的是 2023 年第 38 周前端生态的技术周报（视频教程请临幸 B 站解说）。
每周必看
现实开发中一个常见的需求是根据条件对数组元素进行分组，比如按照点赞和未点赞来排列组合。以前这可以通过 DIY 一个分组函数来实现，或者诉诸 lodash 的 groupBy() 函数。
现在，JS 原生支持全新的 Object.groupBy() 和 Map.groupBy() 分组方法。这两个方法是 TC39 提案的一部分，目前处于 stage 3。Chrome 117 已经开始支持，FireFox 也实验性支持。
如果您想深度学习 JS 对象分组的新方法，欢迎参阅此博客。
如果说 var（即 Vue + Angular + React）是前端的三大框架，那么 dbn（即 Deno + Bun + Node.js）就是 JS 的三大运行时。
Bun 直男翻译为"包子"，是一个一体化的 JS 运行时，可以作为 Node.js 的替代品，性能方面对 Node.js 降维打击。Bun 1.0 正式发布，旨在提速和简化 JS 生态。
Bun 的超能力包括但不限于：
- 运行时 ------ 比 Node.js 快 4 倍
- 转译器 ------ 原生支持包括但不限于 JS、TS、JSX 等文件
- 压缩打包器 ------ 比 Webpack 快 220 倍
- 包管理器 ------ 比 npm 快 30 倍
- 测试运行器 ------ 比 Jest 快 13 倍
Bun 目前的"阿喀琉斯之踵"在于对 Windows 的兼容性差强人意，如果您是像 UP 主一样不懂在 Windows 上跑 MacOS 或 Linux 操作系统的前端爱好者，那您大概会对 Bun 感到欲求不满。
如果您想深度学习 Bun，欢迎临幸官网。
ViteConf 大会是一个沉浸式和交互式的在线活动，ViteConf 2023 大会在 10 月 5-6 日举行，两天内一共安排了 44 场关于 Vite 生态系统的盛大演讲，包括但不限于：
- Vite 的现状
- Vite 的设计哲学
- 引荐 Volar ------ 通用的语言工具框架
- Anthony 的开源之路：集合论
- ......
其中，尤雨溪先生的最新演讲 UP 主已完成搬运、翻译和校对一键三连，欢迎感兴趣的小伙伴去打卡围观。
另外，Antony 先生在 B 站有官方账号，且大佬已经上传了自己的演讲，可以开启 AI 字幕观看，希望大家多多支持。
如果您想深度学习大佬们关于 Vite 生态系统的其他最新技术分享，欢迎临幸官网。
大家在现实开发中可能会邂逅这种刚需 ------ 快速判断某个字符串是否为合法的有效 URL，以前这可以诉诸正则表达式或第三方库来实现。
现在，JS 全新支持 URL.canParse() API，该方法可以优雅地判断合法的 URL。
js
URL.canParse('https://space.bilibili.com/3493137875994964') // true
URL.canParse('www.baidu.com') // false如你所见，没有什么刚需是一行代码搞不定的。
不幸的是，目前该方法能且仅能兼容 FireFox 或 Safari 浏览器和 Node@">= 20" 等运行时，Chrome 和 Edge 等浏览器则鞭长莫及。
虽然但是，您可以诉诸 polyfill（功能补丁）打补丁来实现"图灵等价"的功能。BTW，该方法和 URL() 遵循相同算法规范且实现了相同的解析器，所以您也可以通过诉诸某些 URL() 的奇技淫巧来曲线救国。
如果您想深度学习 JS 判断 URL 的新方法，欢迎参阅此博客。
版本公告
Ant Design 是蚂蚁团队赋能的强大的开发设计生态工具，支持多框架，功能丰富，高度可定制。
Ant Design 5.9 正式发布，包括但不限于：
- 表格组件支持虚拟滚动
- 表单项支持校验防抖
- 更多细节请临幸官网......
如果您对 Ant Design 生态的最新功能感兴趣，欢迎临幸官网。
广告赞助
bryntum 是一个专业的企业 Web App 完整 UI 组件库，支持与 Vue、React、Angular 三大框架无缝衔接，提供了丰富的组件，包括但不限于日历、甘特图等，深受企业信赖。
如果您需要企业级 UI 组件服务，欢迎临幸官网。
FLexGrid 是业界最快、最灵活的 JS 数据网格，提供一流的类似 Excel 的体验，高度可定制，功能丰富，支持与 Vue、React、Angular 三大框架梦幻联动，深受世界领先企业信赖。
如果您需要现代化、功能齐全的网格操作服务，欢迎临幸官网。
前端百宝袋
性能优化包括但不限于用户体验优化，其中一种常见的场景是 ------ 当网络卡顿、图像无法瞬间加载时，先渲染一个低质量的备胎图像或骨架充当占位符，给予用户更好的视觉体验。
@unpic/placeholder 是一个用于生成 LQIP（即低质量图像占位符）的工具库，这可以通过从图像中提取主色来实现，且有助于缩短 LCP 时间（即视口最大可见图片渲染时间）。
如果您想深度学习性能优化的奇技淫巧，欢迎体验此工具。
shadcn-vue 是一个无障碍、可定制的开源组件库，您可以将漂亮的组件复制粘贴到您的 App 中。
shadcn-vue 支持几十种常用的 UI 组件，包括但不限于头像、走马灯、日历、骨架屏等等，支持自定义主题切换。
如果您对 Vue 生态的组件库感兴趣，欢迎体验此工具。
双叒叕是一个 Vue 生态的开源组件库，还要卷是吧。
Vuestic 是一个兼容 Vue 3 的开源 UI 库，功能丰富，实现了 60+ 可定制的组件，支持响应式，内置了配色方案。
如果您对 Vue 生态的组件库感兴趣，欢迎体验此工具。
CSS Loaders 是一个专门收藏 CSS 加载特效的网站，目前已经收藏了 500+ 五花八门的 CSS 加载特效，支持一键拷贝样式代码，比一键三连还方便，关键还免费。各种加载体位应有尽有，走过路过不要错过，只有您想不到，没有您找不到。
如果您偶尔缺乏 CSS 加载特效的设计灵感，欢迎临幸此网站。
npm-check-updates 可以检查 package.json 中依赖模块的新版本，并将依赖升级到最新版本而忽略指定版本。
npm-check-updates 在依赖升级后仍然可以保留现有的语义化版本策略，并且高度可定制依赖升级策略，兼容主流的包管理器，包括但不限于 npm、yarn、pnpm、deno、bun 等。
如果您对 npm 模块升级的交互式工具感兴趣，欢迎体验此工具。
BlendIcons 是一个专门提供极简风格图标资源的网站，目前已经收藏了 140_000+ 五花八门的图标，支持一键下载图标资源，比一键三连还方便，关键还免费。各种格式的图标应有尽有，包括但不限于 SVG、PNG 等等，走过路过不要错过，只有您想不到，没有您找不到。
如果您想白嫖 CSS 图标资源，欢迎临幸此网站。
React Plock 是一个超迷你的 npm 包，gzip 小于 1kB，它为您创建优雅的搬砖布局，并提供丝滑的开发者体验。
React Plock 支持用户按需 DIY 网格行列，支持 TS，类型安全，而且响应式设计自适应不同屏幕尺寸和设备。
如果您想实现类似 Unsplash 的瀑布流布局，欢迎体验此工具。
Web 开发无所不能，比如您可以在网页中使用 Photoshop P 图，现在您又可以在浏览器中使用终端了。
Xterm.js 是使用 TS 实现的前端组件，它可以让用户在浏览器中使用功能齐全的终端。地表最强的人气 IDE VS Code 就集成了这个工具库。
如果您想在浏览器中使用 bash、vim 等终端应用，欢迎体验此工具。
高玩攻略
诉诸 linear() 函数在 CSS 动画中 DIY 缓动特效
在动画世界中，对象在一段时间内从一种状态过渡到另一种状态的方式称为缓动。CSS 中的 linear() 函数是一个新的缓动函数，可以让我们为所欲为地 DIY 动画特效。
这位大佬科普了 CSS linear() 函数的工作原理，并图解了若干现实示例，比较 CSS 中不同的缓动函数。
如果您想深度学习 CSS linear() 新函数的奇技淫巧，欢迎参阅这个高玩攻略。
根据某百科，所谓模板指的是在可以在多个地方复用、几乎没有变化的代码段。HTML 文件就是前端一种常用的代码模板，它最基本结构相对固定。
我们平时很少从零开始写一个 HTML5 模板文件，一般诉诸 Emmet 语法就能快捷生成。有趣的是，某些面试官偶尔会请你讲讲 HTML5 的基本结构，结果反而触发我们的知识盲区。
这位大佬科普了一个 HTML5 模板文件的所有基本元素，包括但不限于使用 UTF-8 字符编码的原因，最后还分享了一个通用的 HTML5 模板文件。
如果您想深度学习 HTML5 模板文件的细节，欢迎参阅此博客。
为什么空数组调用 [].every() 祂喵地会返回 true？
大家可能没听过 NCZ（Nicholas C. Zakas），但大家大概率听过《JS 高级程序设计》或者前端工具人 ESLint，NCZ 就是红宝书和 ESLint 的作者。
这位大佬最近重构了某些使用了数组 every() 方法的代码，结果发现自己的知识盲区 ------ 不懂 every() 方法的底层逻辑，其中一个灵异现象是 ------ 空数组调用 every() 方法祂喵地会返回 true，因为传递的回调函数根本不会被调用，不管你传递的回调函数是什么。
如果您想深度学习数组方法的底层逻辑，欢迎参阅此博客。
以上就是 2023 年第 38 周的前端周报，学废了的小伙伴可以点赞给语冰打 call，我们礼拜天佛系拖更，欢迎关注最新动态和订阅前沿资讯。谢谢大家的彼芯，掰掰~