前端周报: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. 避免完美主义

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

相关推荐
喵叔哟2 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特43 分钟前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解43 分钟前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django