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

每周必看

语雀挂了

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

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

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

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

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

举个栗子,这个 路飞 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 格局的图画编码人类根本看不明白。

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

这位大佬科普了运用 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 优先。


抠图东西人

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

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


数据可视化

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


JS 功能预算

Size Limit 是 JS 的功能预算东西。祂查看 CI 上的每次提交,为终端用户核算 JS 的实际本钱,假如本钱超越限制,则抛出过错。

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

Size Limit 支撑 ESM 和 tree-shaking,能够核算包括 JS 中运用的所有依靠和 polyfill,也能够核算浏览器下载和执行 JS 所需的时刻。

广告资助(谢谢老板!)

结对编程

Scrimba 是一个新式的常识付费和在线教育网站,致力于协助热衷前端开发的小伙伴进步商场竞争力。

举个栗子,这位帅气的小哥本来由于新冠丢了游轮清洁的作业,经过 Scrimba 式自学,5 个月后无职转生成为某草创公司的长途 Web 开发者。

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

高玩攻略

我为什么不运用 Next.js?

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

这位大佬是 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. 在另一端缓存祂们:咱们应该在用户设备上缓存文件多长时刻?咱们刚刚提到的问题是否决定了咱们现在的挑选?

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

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

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。

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

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

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

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

您现在收看的是前端周报系列,学废了的小伙伴能够点赞友谊资助本系列,咱们礼拜天佛系拖更,欢迎重视和订阅最新动态。谢谢咱们的彼芯,掰掰~