大家好,这里是大家的林语冰,您现在收看的是 2023 年第 43 周前端生态的技术周报(视频解说请临幸 人猫神话@bilibili)。
每周必看
UP 主几周前分享过 Node 爱好者在 GitHub 社区的多人活动上激情讨论 ------ 要给 Node.js 安排一枚女朋友(吉祥物),其中插上 V8 火箭的玄武神兽 ------ "火箭龟"人气爆棚。

近日该事件持续发酵,Node.js 公关团队迫于 UP 主的影响力("舆论压力")不得不在推特上官宣 ------ Node.js 官方吉祥物设计大赛正式启动!万能的前端圈啊,寻找一只官方宝可梦作为 Node.js 的代言人,在线等,很急!
征稿要求包括但不限于:
- 请在 11 月 6 日之前私我(Node.js 团队)邮件!
- 文明第一,比赛第二,重在参与~
- AIGC(AI 辅助创作)禁止参赛,一旦发现"模仿游戏",立马退货!
- 禁止复制粘贴 Node.js 当前的 logo!
如果您有任何关于吉祥物设计的奇思喵想,欢迎踊跃投稿。重铸前端霸权,吾辈义不容辞!
React Jam 正在火热进行中,这是一个即兴游戏开发的全球性在线多人活动,召集 React 爱好者使用 React 技术栈加班开发游戏,开发时限是 2023 年 10 月 19-29 日,持续 10 天时间。

地球人都知道,"JS 之父"孵化 JS 刚好也只用了 10 天,所以理论上 10 天孵化一个 React 小游戏目测不是不可能事件。
多人挑战和最佳游戏的冠军奖金池分别是 <math xmlns="http://www.w3.org/1998/Math/MathML"> 1 0 00 和 1_000 和 </math>1000和500,两条赛道的前三名均设有对应奖金池。
如果您想联手社区 React 爱好者即兴开发游戏,欢迎踊跃参与此活动。重铸前端霸权,吾辈义不容辞!(万一一不小心得奖了,记得来给 UP 主充电。)
Unicode 联盟是负责 Unicode 标准化的非营利机构。Unicode 联盟起草的最新 emoji 表情包 ------ Emoji 15.1 已正式获得批准,同时发布的还有 Unicode 标准 15.1 版本。

换而言之,我们的社交武器库又多了 118 个全新的表情符号,截至 Emoji 15.1,Unicode 推荐的 emoji 已高达 3_782
个。
js
const code = [128077, 127569, 11088, 9989]
code
.map(x => String.fromCodePoint(x))
.reduce((bi, li) => bi + li)
// '👍🉑⭐✅'(神秘代码,懂得都懂~)
版本官宣
Node.js 官宣 Node.js 21 正式发布,此版本升级的亮点包括但不限于:
- V8 引擎升级到 11.8 版本,支持全新数组分组方法
- 稳定的
fetch
和WebStreams
API - 诉诸
--experimental-default-type
实验性 flag 切换模块默认值 - 集成内置的 WebSocket 客户端
- 更多细节请临幸官网......
奇技淫巧

CSS 3D 文本特效是通用的,可以在各种上下文中无缝衔接。这可以让您抓住别人的眼球,而不需要其他多余的图形或图像,性价比极高的同时,以最低成本增强您的网站或 App 的视觉吸引力。
这位大佬科普了若干 CSS 3D 文本特效,辅助您为用户创建更具沉浸感和交互性的环境,以此优化用户体验。

React 是人气最高的 JS 库之一,万恶的面试官通常会从 React 的核心术语、最佳实践和技术生态等多维度对打工人灵魂拷问和降维打击。
这位大佬科普了 44 个回头率超高的 React 面试套路,辅助您更好地内卷(面试),增值人才市场的核心竞争力。
前端娱乐圈存在若干基本矛盾,包括但不限于:
- Vue vs React
- JS vs TS
- Vite vs Webpack
此时此刻的 JS 生态系统固然百家争鸣,但也难免"新瓶装旧酒"。在这场前端生态的诸神之战中,有两位神王"一超多强" ------ React 和 Vue(Angular 给 UP 主点赞,然后骂骂咧咧退出了直播间)。

这位大佬科普了自己关于 Vue 和 React 的私人观点和个人心证,大佬在前端新手村时是 React 虔信徒,当时 React 人气爆棚,后来大佬开始"雨露均沾",刚邂逅 Vue 文档时,它像社恐一样瑟瑟发抖,但在偷瞄了几次之后,它坠入爱河、无法自拔......
如果您想深度学习 Vue 和 React 的"军备竞赛",欢迎参阅此博客。
前端百宝袋
Recharts 诉诸 React 和 D3 重新定义图表库,它旨在辅助你在 React App 中更加轻松地 DIY 图表。
Recharts 的设计原则包括但不限于:
- 诉诸 React 组件简单部署
- 原生支持 SVG,轻量依赖于 D3 子模块
- 声明式组件
VOV.CSS 是一个实用的 CSS 动画工具库,实现了五花八门的动画特效,包括但不限于。

AdminJS 是一个可插拔到 App 中的自动管理界面。它的设计灵感来源于 django admin 和 rails admin 等。
AdminJS 的超能力包括但不限于:
- 支持任何数据资源的 CRUD(增删改查)
- 基于资源的表单验证
- 附带小部件的全能仪表板
CSS 体积分析器是一个免费的在线工具,它可以在样式表中找到体积较大的 CSS 规则和选择器,并突出显示嵌入图像等常见问题。然后,您可以根据测评结果来优化网站上的大型 CSS 文件。

ApexCharts 是一个现代化、交互式的 JS 开源图表库,提供了 10+ 种图表以及 100+ 个开箱即用的代码示例。
ApexCharts 允许您使用精简的 API 构建交互式可视化数据,您可以组合不同的图表,自定义注释文本,缩放或滚动数据,高度可定制。
ApexCharts 使用 MIT 开源协议,可用于商业化和非商业项目。

selectors 是一个交互式学习 CSS 的在线可视化工具,通过高亮匹配选中的选择器辅助您学习 CSS。
广告赞助(谢谢老板!)
Wallaby for VS Code 现在支持 Logpoints,允许您使用断点来记录值。Logpoints 允许您在不修改代码的情况下显示任何表达式的值,只需在要记录的表达式旁边设置一个断点。
高玩攻略
几周前,Adobe 上线了一个网页版的 Photoshop,它是使用 wasm、Web 组件、P3 颜色等 Web 技术栈构建的。

这位大佬对网页版 Photoshop 感到鸡冻,且十分好奇这种巨型网站的 CSS 技术方案,于是乎沉迷学习无法自拔,本文解剖了相关的 CSS 技术栈,科普了网页版 Photoshop 的 CSS 技术方案。
如果您想深度学习网页版 Photoshop 的 CSS 技术栈,欢迎参阅此博客。
Solid 是一个用于创建用户界面的声明式 JS 库,它不使用虚拟 DOM,而是将其模板编译为真实 DOM 节点,实现细粒度的响应式更新。Vue 3 Vapor Mode(蒸汽模式)正是启发自 Solid。

"Solid 之父"Ryan Carniato 对前端爱好者发出灵魂拷问,"0 kb 的 JS 代码是否未来可期?"
这位大佬在 JS 国际大会的第三次主题演讲中,科普了 8 种辅助 JS 代码减肥的技术方案,包括但不限于:
- 代码拆分/懒加载
- 诉诸更迷你、更敏捷的框架
- 渐进增强
- 渐进式水化(Progressive Hydration)

Angular 17 将于 11 月初发布,它有一个令人鸡冻的新功能 ------ 延迟加载(deferred loading,RFC)。
延迟加载不是在页面初始加载时预先加载所有内容,而是延迟加载非必要内容,直到用户与页面交互、滚动或到达页面中的特定坐标。
延迟加载是一种使 Web App 按需加载资源(如脚本)的技术。延迟加载优化了用户体验,因为它减少了初始页面加载时间,并确保用户可以尽快开始与 App 交互,而 Appp 的非必要部分则在后台加载。它优化了带宽和服务器负载。
One More Thing
QX 82 是一个迷你 JS 引擎,可以辅助您开发类似 80 年代复古电脑的游戏体验。它不是一个模拟器,而是一个 JS 开源库。

QX82 试图重现复古电脑的视觉体验,对然但是,您并不局限于旧电脑的功能:这只是 JS,您可以在此之上为所欲为。
您现在收看的是前端开发系列,学废了的小伙伴可以点赞友情赞助本系列,我们礼拜天佛系拖更,欢迎关注和订阅最新动态。谢谢大家的彼芯,掰掰~