前端周报:JS 2023 现状普查!TS 5.3 官宣!CSS 容器查询(第 48 期)

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

每周必看

JS 2023 现状普查火热进行中

JS 2023 现状普查正在火热进行中,本次普查旨在测评 JS 库和框架的人气和流量,预测前端生态未来的技术趋势。

关于前端已死、TS 已死等"都市传说","三人成猫"只是"个人心证",而普查则可以为"前端阴谋论"赋予统计学意义。

本次普查将于 11 月 22 日到 12 月 12 日进行,届时普查结果完全透明公开,供社区 JS 爱好者参考,规划自己的技术成长路线,紧跟潮流。

欢迎大家踊跃参与,说不定 JS 的世界线因你而改变。

版本官宣

TypeScript@5.3

2023 年 11 月 20 日,TS 团队官宣 TS 5.3 正式发布。

重大升级包括但不限于:

  • 实现 JS 新提案 import attributes(导入属性),替换导入断言提案
  • switch(true) 类型缩窄
  • 布尔直接比较类型缩窄
  • 详情请临幸官网......

Git@2.43

2023 年 11 月 20 日,Git 团队官宣 Git 2.43 正式发布。

重大升级聚焦于 gte repack 新功能,包括但不限于:

  • 原生支持多个 cruft 包
  • 使用对象过滤器拆分存储库
  • 详情请临幸官网......

Rspack@0.4

Rspack 是一个锈化的 webpack Rust 限定版,Rspack 团队官宣 v0.4 正式发布,重大升级在于发布了 Rsbuild ------ 基于 Rspack 的构建工具,性能比肩 Vite,只有 webpack 受伤的世界达成了。

如果您想从 Webpack 迁移到 Rspack,Rsbuild 是理想的技术方案。它显著减少了 90% 的配置,同时提供了 10 倍的构建速度。

据尤雨溪爆料,Vite 的 Rolldown 养成计划中也有 Rspack 的核心团队成员。


node-mongodb-native@6.3

MongoDB Node.js 团队官宣 v6.3 正式发布,重大升级包括但不限于:

  • 新客户端选项 serverMonitoringMode
  • 修复启动 serverApi 的连接泄漏
  • 弃用 GridFS 字段
  • 详情请临幸官网......

JS 技能树

Promise 体操

这是一个 Promise 进阶挑战的存储库,通过一系列精心策划的互动挑战来测评 Promise,新手不友好。

该存储库提供了一个平台来提高您的 Promise 技能树,并完成自动化测试,为您提供即时反馈并验证您的学习进度。


debounce@2.0

防抖函数是一道回头率超高的面试题,这个防抖工具库除了支持防抖功能,还支持 clear() 方法取消调度执行,支持 flush() 方法立即执行和重置定时器。


request-animation-frame

这是一个 requestAnimationFrame API 的 polyfill,可以用作异步可迭代对象,适配任何 JS 环境。


三个文件入门 TS 项目

新人入坑 TS 总会邂逅各种奇奇怪怪的 bug,尤其是与 Node.js、ts-node 和 ESM 模块一起使用时,关于如何集成此技术栈的指南数不胜数,但貌似都无法"码到成功"。

这位大佬用了有且仅有三个文件就可以在 ESM 模块中丝滑运行 TS。

CSS 技能树

CSS 网格交互式指南

CSS 有若干种布局算法,其中默认的流式布局是为数字文档设计的,表格布局是为表格数据设计的,弹性布局是为单向轴分配项目设计的。

CSS 网格布局是最新、最给力的布局算法,这位大佬通过生动的交互式指南科普了网格布局的正确打开方式,晓之以码,动之以图,十分有趣。


CSS 嵌套

以前前端爱好者喜欢集成 CSS 预处理器,比如 Sass/Less 等,因为它们提供了更灵活的语法,比如 CSS 变量、CSS 嵌套等。

如今浏览器也原生支持 CSS 嵌套语法,这位大佬科普了其毕生所学的 CSS 嵌套知识,让我们从 CSS 预处理器中解放出来。


CSS 新特性:容器查询

此乃 MDN 官网推荐的一篇博客。

从今年开始,所有主流浏览器都支持容器查询。容器查询允许我们查询元素的大小,而不是视口,并相应地设置其后代的样式。我们可以像媒体查询一样使用它们,但它们在布局方面为我们提供了更大的灵活性,并有可能大大简化我们的代码。

这位大佬科普了如何利用容器查询来构建更给力、更灵活的布局,以及探讨了我们是否还需要媒体查询。

前端工具人

starlight

starlight 构建遗留文档网站的工具,敏捷、可访问且易用。

当您需要构建自己的文档时,它提供了如下的超能力,包括但不限于:

  • 支持搜索、代码高亮、亮暗模式等
  • 由 Astro 驱动
  • 支持 Markdown、MDX 等多种标记语言
  • 跨框架,允许自定义组件

色差识别器

clourcontrast 是一个在线的颜色对比度检查器,如果您有颜色设计的需求,欢迎沉浸式体验。


爬虫祛质器

linkinator 是一个极简的网站爬虫和无效链接质检员。它可以用来扫描在线或本地文件中任何包含链接的元素,而不仅仅是 <a> 标签,支持正则过滤,还可以检查无效的链接。


html 打包的 webpack 插件

html-bundler-webpack-plugin 是一个 webpack 插件,可以渲染引用了其他资源的 HTML 模板并打包生成静态 HTML,让 webpack 像 Vite 一样能够使用 HTML 作为入口文件。

此插件是 html-webpack-plugin 的进阶版,"开箱即用"地渲染 EJS、Nunjucks 等模板,您可以将模板作为编译的模板函数导入 JS,并在浏览器的客户端使用运行时的变量进行渲染。。


自动绘图

AutoDraw 是一个在线绘图网站,支持通用的标准绘图工具,包括但不限于羽毛笔、文字、几何图形等,还有一个支持自动绘图的强大功能,根据您的草图提供资源,拯救像我一样的抽象画大师。


H3 迷你 http 框架

h3 是一个兼具高性能和可移植性的最小化 http 框架,兼容 Serverless、Workers、Node.js 等平台,支持原生 Promise,兼容 connect/express 的中间件。


medium-zoom

medium-zoom 是一个用于图像中等缩放的库,与框架无关,可以跨框架使用,缩放加载图像支持高清无码。


gridstack.js 交互式仪表板面板

gridstack.js 是一个现代 TS 库,旨在帮助开发者使用几行代码即可创建漂亮的可拖动、可调整大小的响应式布局。

您可以创建更高级的网格:允许用户保留更改、创建小部件侧边栏以拖动到网格中、嵌套网格等等。


piscina

piscina 是一个快速、高效的 Node.js 工作者线程池实现,支持线程间快速通信,支持灵活的线程池大小,允许自行一任务队列。

高玩攻略

如何设计优雅的网站 URL

现实开发中,极少数人会考虑 URL 的设计哲学。以前丑陋的 URL 可能十分反人类,而现在合理设计的 URL 提供更棒的用户体验和 SEO。

这位大佬科普了若干 URL 设计的小技巧:

  1. URL 片段要吝啬
  2. slug 要短小精悍
  3. 限用停顿词
  4. 避免完美主义

您现在收看的是前端周报系列,学废了的小伙伴可以订阅专栏合集,我们每周六佛系投稿,欢迎持续关注前端开源技术。谢谢大家的点赞,掰掰~

相关推荐
志尊宝1 分钟前
Vue3 零基础每日笔记(004):模板语法初识——插值表达式、v-bind、v-on 一次学会
javascript·vue.js·笔记
恋猫de小郭7 分钟前
Flutter 状态管理基准测评,一个很有趣的观点
android·前端·flutter
雪芽蓝域zzs12 分钟前
前端编辑组件wangEditor
前端
风骏时光牛马40 分钟前
稳定性治理及疑难问题深度剖析与实战复盘
前端
JeffongTan9 小时前
在LWC中镶嵌VF Page获取用户IP
前端·javascript·salesforce
不cong明的亚子11 小时前
web live多屏互动平台
javascript·经验分享·音视频
陆枫Larry11 小时前
Astro 是什么
前端
是立不是利13 小时前
写给设计师的 CSS 博客美学指南
前端·css
dsyyyyy110113 小时前
JS复习,难点,易错点总结
开发语言·javascript·ecmascript