前端周报:前端最强学姐~语雀挂了!Node 21 官宣。(2023 年第 44 周)

6,459 阅读9分钟

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

每周必看

语雀挂了

00-wall.png

1024 程序员 996 狂欢节前夕,语雀某地服务器突然驾崩,目前语雀团队已经官宣了大致过程和后续补偿,史称“雀食蟀事件”(蟀是 bug,意思是臭虫)。

UP 主乃语雀核心用户,可以看到本人基本上每天都在使用语雀,没用的天数不算。UP 主作为成熟的前端人,对后端和运维莫得发言权,暂且挂起不予置喙。虽然但是,私以为语雀前端方面某些 UX 还有待提高,比如这个崩溃页面好歹给个一目了然的图片,就写了一行海克斯最后通牒,我还以为自己被语雀墙了,掏出个放大镜看了大半天愣是没反应过来为什么会被发好人卡。

404 Illustrations 是一个 404 主题的宝藏网站,跟某 UP 主一样宝藏,收藏了一大坨时髦且有趣的 404 插画。

01-404.png

举个栗子,这个 路飞 6 档就平凡中透露着霸气!裸崩咱也要逼格拉满,起码用户看到网站挂了都挂得如此帅气,也不至于对产品失去信心。

BTW,为了感谢铁粉的一键三连,语雀官宣了粉丝福利,语雀爱好者可以去官网免费领取 4_392 小时会员。


Edge 和 Bing 的崛起

微软曾经诉诸 IE 浏览器一度成为搜索引擎的极霸猫,虽然但是,近 15 年来,搜索市场的份额一直在被谷歌吸血。

2018 年以来,微软面临三大挑战:用户留存率、品牌声誉和市场竞争力。打不过就加入,微软果断拥抱开源的 Chromium,用谷歌的产品打败谷歌,通过创新提高 Edge 战力的同时,博得开源社区的好感,最终实现“质疑谷歌 -> 理解谷歌 -> 成为谷歌 -> 超越谷歌”的一键三连。

如今,有了 ChatGPT 的强势辅助,Edge 终于在 AI 的胯下疯狂输出。鲜衣怒马少年郎,谁人不懂 AI 狂。EDGE 今犹在,不见当年 IE 王。

版本官宣

Node.js@21.1

Node.js 团队官宣 v21.1 正式发布,重大升级主要关于 ESM 模块的自动检测。

Node.js 全新支持 --experimental-detect-module flag,当且仅当 Node.js 的“模块雷达”扫描到“暧昧文件”时,如果该文件有使用 ESM 语法,则自动作为 ESM 模块运行,否则作为 CJS 模块运行。

“暧昧文件”指的是当 package.json 没有显式定义 type 字段时,项目中那些没有明确扩展名的文件或 .js 文件。

与此同时,Node.js@20 终于成为最新的 LTS 版本,代号“钢铁(钢铁没有侠)”。


Transformers.js@2.7

Transformers.js 是最先进的 Web 机器学习库,功能上和 Python 的同款工具人“图灵等价”,您可以使用雷同的 API 运行预训练模型,这些模型支持不同模式的常见任务,包括但不限于:

  • 自然语言处理,翻译,你问我答
  • 图像分类
  • 音频识别
  • 更多细节请临幸官网~

Transformers.js 官宣 v2.7 正式发布,增量更新了文字转语音等功能。

奇技淫巧

SVG 变色

SVG 一般被视为某种图像,但是由于祂是基于矢量格式,和 HTML DOM 结构更类似,而传统的 PNG 格式的图像编码人类基本看不懂。

02-svg.webp

这位大佬科普了利用 SVG 图像的各个部分更易于定义和导航的特点,分别使用 CSS 和 JS 技术来 DIY SVG 的外观,这种奇技淫巧有时相比传统图像更灵活,因为可以通过一个 SVG 生成多个同款变体,而不用加载多个传统图像。

前端工具人

React 魔动

react-magic-motion 是一个基于 Framer Motion 的 React 库,用于为您的组件附魔动画特效。


BeerCss

Beer CSS 是业界第一个基于 Material Design 3 的 CSS 框架,比其他同款框架小 10 倍,祂将 Material Design 转换为 HTML 语义标准,可以和所有 JS 框架无缝衔接,高度关注 DX。

Beer CSS,顾名思义,其指导方针和设计哲学源于“德国啤酒纯度法”,祂提出一种新的 CSS 代码洁癖:设置、元素和辅助,不同于 BEM 等社区代码风格。


React 状态管理

Jotai 日语汉化为“状态”,是一个原始和灵活的 React 状态管理库,完全兼容 React 18,最小的核心 API 有且仅有 2 kb,和 Recoil 相比没有字符串键,可以从简单的 useState 备胎扩展到需求复杂的企业级 TS app。

Jotai 采用原子方法进行 React 全局状态管理,通过组合原子构建状态,渲染会根据原子依赖关系自动优化,这解决了 React 上下文额外的重新渲染问题,消除了记忆化的刚需,并在保持声明式编程模型的同时提供了和 signal 雷同的 DX。


社区版 Radix Vue

Radix Vue 是 Radix UI 的非官方移植,是一个无样式、可定制的社区 UI 库,用于构建高质量的设计系统和 Web app。

Radix Vue 同时支持 Vue 和 Nuxt,开发时间成本低,交互速度快,DX 优先。


抠图工具人

03-removal.png

background-removal 是一个功能强大的 npm 模块,允许开发者无缝删除图像背景,同时兼容浏览器和 Node.js 环境,既经济又高效。


数据可视化

Perspective 是一个交互式分析和数据可视化组件,特别适用于大型和流式数据集。您可以使用祂创建用户可配置的报告、仪表板、笔记本和 app,然后在浏览器中独立部署,或者和 Python 协同部署。


JS 性能预算

Size Limit 是 JS 的性能预算工具。祂检查 CI 上的每次提交,为终端用户计算 JS 的实际成本,如果成本超过限制,则抛出错误。

04-size.png

Size Limit 支持 ESM 和 tree-shaking,可以计算包括 JS 中使用的所有依赖和 polyfill,也可以计算浏览器下载和执行 JS 所需的时间。

广告赞助(谢谢老板!)

结对编程

Scrimba 是一个新型的知识付费和在线教育网站,致力于帮助热衷前端开发的小伙伴提高市场竞争力。

举个栗子,这位帅气的小哥原本因为新冠丢了游轮清洁的工作,经过 Scrimba 式自学,5 个月后无职转生成为某初创公司的远程 Web 开发者。

Scrimba 的特色在于交互式的截屏视频自学方式,类似于结对编程,您可以即时暂停和修改代码,真正做到知行合一。

高玩攻略

我为什么不使用 Next.js?

05-next.webp

这位大佬是 React 爱好者,在某网站教学 Remix 框架,但被粉丝灵魂拷问:为什么选择 Remix 而不是 Next.js?

于是乎,大佬从复杂性、稳定性、独立性等方面稍加说明,认为 Remix 在可维护性等方面更加优秀。


Web 组件永垂不朽。

Web 组件是一组用于构建可重用 HTML 元素的 W3C 标准。您可以通过为自定义元素编写类、注册标签名并在 web app 中来使用它们。

这位大佬前端开发熟练度高达 20 年,见证了 jQuery 和 Node.js 的兴衰,见证了 Backbone 和 AngularJS 跌落神坛,见证了 React 编写组件的 5 种方式。

大佬认为 Web 组件标准是面向未来的必由之路,而 JS 框架终将陨落,我们应该优先拥抱标准,才能得到更长寿的 web app。


再见 Node.js Buffer

自 Node.js 破蛋以来,Buffer 一直都是二进制处理的底裤,虽然但是,如今我们拥有更优秀的原生 JS 类型 Uint8Array,祂支持跨平台。

这位大佬正在将自己的模块从 Buffer 迁移到 Uint8Array,并科普了这样做的原因和具体的迁移步骤。虽然 Buffer 永远不会被弃用,但是大佬建议社区敬而远之。


3C 原则

这位大佬从 3C —— Concatenate(连接)、Compress(压缩)、Cache(缓存)三个方面自问自答:

  1. 连接服务器上的文件:我们是要发送许多较小的文件,还是要发送一个整体文件?前者构建步骤更简单,但祂更快吗?
  2. 诉诸网络压缩祂们:我们要使用哪种压缩算法,如果确实有的话?每种方法的可用性、可配置性和有效性如何?
  3. 在另一端缓存祂们:我们应该在用户设备上缓存文件多长时间?我们刚刚提到的问题是否决定了我们现在的选择?

06-3c.png

这位大佬科普了性能优化的最佳实践,指出为了平衡人体工程学,我们不能透过猫眼的一孔之见看世界,只见树木,不见森林。

UP 主一般不太喜欢安利性能优化和最佳实践,因为性能优化乃万恶之源,而且有一定的阅读门槛,但这篇博客确实有点东西,所以就顺手骗骗硬币。


挨踢圣经

“软件设计森林里分出两条路。一条路是简化程序,这显而易见没有错误。另一个路是复杂化程序,这没有显而易见的错误。”

“There are two methods in software design. One is to make the program so simple, there are obviously no errors. The other is to make it so complicated, there are no obvious errors.”

—— Tony Hoare(“快速排序算法之父”)

One More Thing

UP 认证前端最强学姐

彭博社的某金融产品依赖 Node.js 来构建和维护,所以该企业一直以来都在投资 Node.js 及其 TSC。

07-bloom.png

所谓 TSC,即全职技术指导委员会,有且仅有一位会员,全面负责开发和维护 Node.js 的核心,这位大神就是本期的女主人公 —— Joyee Cheung(张秋怡),一位前阿里的技术大神。

自 2018 年以来,彭博社一直通过 Igalia 赞助张秋怡 Node.js 的开发和维护工作。

如果您是阿里人,大约早有耳闻,但 UP 主孤陋了,就顺便给其他小伙伴科普一下这位前端学姐。UP 主搜索了几场学姐的演讲,只能说我输了,我看不懂,但我喵瞪狗呆,吾愿称之为前端最强学姐。UP 主这里的“最强”仅代表个人心证,代指前端琅琊榜首的学姐,杠精非礼勿喷。事实上,比 UP 主强的,都可以是最强。(学姐在 GitHub 上有账号,目前粉丝比我们多。)

您现在收看的是前端周报系列,学废了的小伙伴可以点赞友情赞助本系列,我们礼拜天佛系拖更,欢迎关注和订阅最新动态。谢谢大家的彼芯,掰掰~