前端周报:Node吉祥物设计大赛!Unicode解锁全新表情包~React 面试大全(2023 年第 43 周)

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

每周必看

Node.js 官方吉祥物设计大赛

UP 主几周前分享过 Node 爱好者在 GitHub 社区的多人活动上激情讨论 ------ 要给 Node.js 安排一枚女朋友(吉祥物),其中插上 V8 火箭的玄武神兽 ------ "火箭龟"人气爆棚。

近日该事件持续发酵,Node.js 公关团队迫于 UP 主的影响力("舆论压力")不得不在推特上官宣 ------ Node.js 官方吉祥物设计大赛正式启动!万能的前端圈啊,寻找一只官方宝可梦作为 Node.js 的代言人,在线等,很急!

征稿要求包括但不限于:

  • 请在 11 月 6 日之前私我(Node.js 团队)邮件!
  • 文明第一,比赛第二,重在参与~
  • AIGC(AI 辅助创作)禁止参赛,一旦发现"模仿游戏",立马退货!
  • 禁止复制粘贴 Node.js 当前的 logo!

如果您有任何关于吉祥物设计的奇思喵想,欢迎踊跃投稿。重铸前端霸权,吾辈义不容辞!


React 社区悬赏竞赛

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 主充电。


emoji 解锁全新表情包

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@21

Node.js 官宣 Node.js 21 正式发布,此版本升级的亮点包括但不限于:

  • V8 引擎升级到 11.8 版本,支持全新数组分组方法
  • 稳定的 fetchWebStreams API
  • 诉诸 --experimental-default-type 实验性 flag 切换模块默认值
  • 集成内置的 WebSocket 客户端
  • 更多细节请临幸官网......

奇技淫巧

CSS 3D 文本特效

CSS 3D 文本特效是通用的,可以在各种上下文中无缝衔接。这可以让您抓住别人的眼球,而不需要其他多余的图形或图像,性价比极高的同时,以最低成本增强您的网站或 App 的视觉吸引力。

这位大佬科普了若干 CSS 3D 文本特效,辅助您为用户创建更具沉浸感和交互性的环境,以此优化用户体验。


React 面试大全

React 是人气最高的 JS 库之一,万恶的面试官通常会从 React 的核心术语、最佳实践和技术生态等多维度对打工人灵魂拷问和降维打击。

这位大佬科普了 44 个回头率超高的 React 面试套路,辅助您更好地内卷(面试),增值人才市场的核心竞争力。


Vue 何以对 React 降维打击?

前端娱乐圈存在若干基本矛盾,包括但不限于:

  • Vue vs React
  • JS vs TS
  • Vite vs Webpack

此时此刻的 JS 生态系统固然百家争鸣,但也难免"新瓶装旧酒"。在这场前端生态的诸神之战中,有两位神王"一超多强" ------ React 和 Vue(Angular 给 UP 主点赞,然后骂骂咧咧退出了直播间)。

这位大佬科普了自己关于 Vue 和 React 的私人观点和个人心证,大佬在前端新手村时是 React 虔信徒,当时 React 人气爆棚,后来大佬开始"雨露均沾",刚邂逅 Vue 文档时,它像社恐一样瑟瑟发抖,但在偷瞄了几次之后,它坠入爱河、无法自拔......

如果您想深度学习 Vue 和 React 的"军备竞赛",欢迎参阅此博客。

前端百宝袋

React 图表库

Recharts 诉诸 React 和 D3 重新定义图表库,它旨在辅助你在 React App 中更加轻松地 DIY 图表。

Recharts 的设计原则包括但不限于:

  • 诉诸 React 组件简单部署
  • 原生支持 SVG,轻量依赖于 D3 子模块
  • 声明式组件

CSS 动画库

VOV.CSS 是一个实用的 CSS 动画工具库,实现了五花八门的动画特效,包括但不限于。


仪表盘 UI

AdminJS 是一个可插拔到 App 中的自动管理界面。它的设计灵感来源于 django admin 和 rails admin 等。

AdminJS 的超能力包括但不限于:

  • 支持任何数据资源的 CRUD(增删改查)
  • 基于资源的表单验证
  • 附带小部件的全能仪表板

CSS 优化

CSS 体积分析器是一个免费的在线工具,它可以在样式表中找到体积较大的 CSS 规则和选择器,并突出显示嵌入图像等常见问题。然后,您可以根据测评结果来优化网站上的大型 CSS 文件。


开源图表库

ApexCharts 是一个现代化、交互式的 JS 开源图表库,提供了 10+ 种图表以及 100+ 个开箱即用的代码示例。

ApexCharts 允许您使用精简的 API 构建交互式可视化数据,您可以组合不同的图表,自定义注释文本,缩放或滚动数据,高度可定制。

ApexCharts 使用 MIT 开源协议,可用于商业化和非商业项目。


selectors.info

selectors 是一个交互式学习 CSS 的在线可视化工具,通过高亮匹配选中的选择器辅助您学习 CSS。

广告赞助(谢谢老板!)

Wallaby for VS Code 现在支持 Logpoints,允许您使用断点来记录值。Logpoints 允许您在不修改代码的情况下显示任何表达式的值,只需在要记录的表达式旁边设置一个断点。

高玩攻略

图解网页版 Photoshop 的 CSS 技术栈

几周前,Adobe 上线了一个网页版的 Photoshop,它是使用 wasm、Web 组件、P3 颜色等 Web 技术栈构建的。

这位大佬对网页版 Photoshop 感到鸡冻,且十分好奇这种巨型网站的 CSS 技术方案,于是乎沉迷学习无法自拔,本文解剖了相关的 CSS 技术栈,科普了网页版 Photoshop 的 CSS 技术方案。

如果您想深度学习网页版 Photoshop 的 CSS 技术栈,欢迎参阅此博客。


JS 代码的 8 种减肥方式

Solid 是一个用于创建用户界面的声明式 JS 库,它不使用虚拟 DOM,而是将其模板编译为真实 DOM 节点,实现细粒度的响应式更新。Vue 3 Vapor Mode(蒸汽模式)正是启发自 Solid。

"Solid 之父"Ryan Carniato 对前端爱好者发出灵魂拷问,"0 kb 的 JS 代码是否未来可期?"

这位大佬在 JS 国际大会的第三次主题演讲中,科普了 8 种辅助 JS 代码减肥的技术方案,包括但不限于:

  • 代码拆分/懒加载
  • 诉诸更迷你、更敏捷的框架
  • 渐进增强
  • 渐进式水化(Progressive Hydration)

Angular 17 全新特性:延迟加载

Angular 17 将于 11 月初发布,它有一个令人鸡冻的新功能 ------ 延迟加载(deferred loading,RFC)。

延迟加载不是在页面初始加载时预先加载所有内容,而是延迟加载非必要内容,直到用户与页面交互、滚动或到达页面中的特定坐标。

延迟加载是一种使 Web App 按需加载资源(如脚本)的技术。延迟加载优化了用户体验,因为它减少了初始页面加载时间,并确保用户可以尽快开始与 App 交互,而 Appp 的非必要部分则在后台加载。它优化了带宽和服务器负载。

One More Thing

像素游戏的文艺复兴

QX 82 是一个迷你 JS 引擎,可以辅助您开发类似 80 年代复古电脑的游戏体验。它不是一个模拟器,而是一个 JS 开源库。

QX82 试图重现复古电脑的视觉体验,对然但是,您并不局限于旧电脑的功能:这只是 JS,您可以在此之上为所欲为。

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

相关推荐
懒大王爱吃狼25 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半10 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O210 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage10 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!11 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
shenweihong12 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序