大家好,这里是大家的林语冰,您现在收看的是 2023 年第 39 周前端生态的技术周报(视频版请临幸 B 站解说)。
前端头条

Nue 是一个用于构建 UI 的 JS(JavaScript)迷你库,有且仅有 2.3 kb,可以作为 React 和 Vue 等框架的替代品,而且没有 hook 和 effect 等抽象概念。
Nue 同时支持服务端渲染和客户端渲染的响应式组件,创作灵感来源于 Vue 2.0 和 Riot.js,Nue 作者本人就是 Riot.js 的作者。
Go 语言有地鼠神兽,PHP 有猛犸神兽,但可怜的 Node.js 尚未拥有专属吉祥物。


有意思的是,"Node.js 之父"生下二胎成为"Deno 之父"之后,Deno 却拥有秃头恐龙作为吉祥物。

GitHub 最近在热搜 Node.js 的吉祥物,毕竟亲爹都"弃养"了,给个吉祥物安慰奖,目前最火的是火箭龟 ------ 一只插上 V8 火箭的玄武神兽。

UP 主有一个大胆的想法,该吉祥物寓意大抵是 ------ 面试造火箭,工作摸乌龟(比摸鱼还龟)。
Vercel 团队整了一个 AI 实验,可以言出法随自动生成组件。
TS 官方纪录片
TS(TypeScript)官方拍摄了最新的纪录片《TS 的诞生》,科普了 TS 作为微软的第一个开源项目,是如何横空出世到人气爆棚的前世今生。

当你拥有自己的纪录片,你就知道自己"码到功成"了。但 UP 猪根本不羡慕 TS,因为 UP 猪的目标根本不是纪录片,而是百大(指女粉过百)。
TS 之后,VSCode 等项目也拥抱开源,微软的开源之旅还在继续,甚至收购了 GitHub。
TS 团队预言 TS 终将消失,TS 已经开始拥抱 JS。
UP 主已搬运了该纪录片,前端爱好者请临幸 B 站《TS 的诞生》。
JScript 和 JS 一样,都是 ES6(ECMAScript)的方言,微软为了避免和 Sun 的"命名冲突",于 1996 年 9 月在 IE3 中实现了"JS 1.0",并赐名为"JScript"。
"浏览器世界大战"余波未平,蓦然回首,JScript 已经高达 27 岁,但除了 UP 猪之外,根本没有人在乎......
ES6 今犹在,不见当年 JScript。
Neutralinojs 是一个轻量级的可移植桌面 App 开发框架,是 Electron 的替代品。

Neutralinojs 可以构建跨平台 App,包括但不限于 Windows、macOS、Web 等平台,它没有捆绑 Chromium,而是使用操作系统中现有的 Web 浏览器库。
官方博客
Svelte 是一个新兴的 Web UI 框架,GitHub star 目前高达 73k,比 UP 猪的女粉还高出好几个数量级。
Svelte 团队官方科普了关于响应性的元认知,Svelte 3 成为响应式框架之后,如今 Svelte 5 将更进一步,诉诸符文(rune)解锁通用的细粒度响应性。
响应性是关于数据改变时系统如何反应的机制,是 Web 开发的核心。

前端大师官方科普了若干响应性模式,包括但不限于:
- 发布订阅模式
- 自定义事件
- 观察者模式
- 响应性代理
- 更多细节请临幸官方博客
版本公告
脚本支持传递多个 --env-file
参数,后面的配置文件可以覆盖前面的配置文件。

Safari 发布 17.0 版本,新特性包括但不限于:
- 成为首个支持
<search>
元素的浏览器 - 支持
Storage
API - 正则表达式支持
v
flag 和重复命名分组捕获 Set
新增 7 种新的集合方法- 更多细节请临幸官方博客
高玩攻略

布局是减少代码重复和创建可维护且具有专业外观 App 的基本模式。如果你使用的是 Nuxt,则可以提供开箱即用的最佳实践。
不幸的是,Vue 官方没有优雅的备胎。这位大佬科普了一个运行良好且可扩展又不会让人头大的架构。

CSS 开发的第一步通常是重置全局 CSS,比如使用一致的盒子模型等。
这位大佬科普了若干现代化 CSS 重置的规则,以往我们可以诉诸现存的 CSS 样式重置第三方库,现在你又多了一个自己封装的技术方案。

浏览器一般会智能决定网络资源的优先级,但这不一定是最佳选择。
这位大佬科普了若干自定义资源优先级的方案,包括但不限于 fetch()
API 的优先级提示等。
这位大佬科普了如何使用 CSS 蒙版动画来显示图像,你需要的有且就有一个 <img>
标签和纯粹的 CSS 蒙版。

赞助商广告位(谢谢老板)
如果你用过 Vue Devtools(Vue 开发者工具),那你对基于时间旅行的调试应该不陌生。
Wallaby.js 就是一款和框架无关的调试工具,支持单元测试的时间旅行调试,周边生态也有支持 JS 业务代码的调试,使用方式包括但不限于 VSCode 扩展等。

就开发调试的时髦程度而言,console.log 是过去式,Debug 是现在进行时,时间旅行是未来进行时。
前端百宝袋
Mantine 是一个全能的 React 组件库,支持 100+ 个组件和 50 个 hooks。

Plotteus 是一个赋能数据可视化的开源 JS 库,旨在帮助你透过数据更立体地讲故事。

Create Chrome Extension 是一个开箱即用的 Chrome 插件生成器,支持包括但不限于 Vue 和 React 等多种框架的预设模板。

React Virtuoso 是一个强大 React 虚拟列表组件,支持开箱即用的可变尺寸列表项,无需手动测量或硬编码。
前端生态孵化了一大坨代码压缩的工具人,包括但不限于:
- babel-minify
- esbuild
- swc
- terser
JS minification benchmarks 是一套用于比较 JS 代码压缩器的基准测试,可以对不同代码压缩器测评和跑分,促进社区和平内卷。

Theatre.js 是一个具有专业动作设计工具集的 JS 动画库。它可以帮助你创建任何动画,包括从 THREE.js 中的电影场景到令人愉悦的 UI 交互。

React Lite Month Picker 是一个 React 筑基的极简日历组件。

Faker 可以生成大量虚实相生的数据。即使后端没有返回真实数据,你也可以自己 DIY 日期、财务等假数据,用于测试和开发,实现"接口自由"。
Peaks.js 使用 HTML canvas 元素以不同的缩放级别显示波形,允许用户与波形视图进行交互。

挨踢圣经
"最棒的程序往往是程序员不务正业时编写的。"
"The best programs are the ones written when the programmer is supposed to be working on something else."
------ Melinda Varian
UP 主想起了若干栗子:
- 尤大在谷歌创意实验室切换赛道孵化了 Vue.js
- TS 联合创始人在 DIY VSCode 原型时曲线救国孵化了 TS
以上就是 2023 年第 39 周的前端周报,学废了的小伙伴可以点赞给语冰打 call,我们礼拜天佛系拖更,欢迎关注最新动态和订阅前沿资讯。谢谢大家的彼芯,掰掰~