大家好,这里是大家的林语冰,您现在收看的是第 48 期前端生态的技术周报(视频解说请临幸 前端周报@bilibili。
每周必看
JS 2023 现状普查正在火热进行中,本次普查旨在测评 JS 库和框架的人气和流量,预测前端生态未来的技术趋势。
关于前端已死、TS 已死等"都市传说","三人成猫"只是"个人心证",而普查则可以为"前端阴谋论"赋予统计学意义。
本次普查将于 11 月 22 日到 12 月 12 日进行,届时普查结果完全透明公开,供社区 JS 爱好者参考,规划自己的技术成长路线,紧跟潮流。
欢迎大家踊跃参与,说不定 JS 的世界线因你而改变。
版本官宣
2023 年 11 月 20 日,TS 团队官宣 TS 5.3 正式发布。
重大升级包括但不限于:
- 实现 JS 新提案 import attributes(导入属性),替换导入断言提案
switch(true)
类型缩窄- 布尔直接比较类型缩窄
- 详情请临幸官网......
2023 年 11 月 20 日,Git 团队官宣 Git 2.43 正式发布。
重大升级聚焦于 gte repack
新功能,包括但不限于:
- 原生支持多个 cruft 包
- 使用对象过滤器拆分存储库
- 详情请临幸官网......
Rspack 是一个锈化的 webpack Rust 限定版,Rspack 团队官宣 v0.4 正式发布,重大升级在于发布了 Rsbuild ------ 基于 Rspack 的构建工具,性能比肩 Vite,只有 webpack 受伤的世界达成了。
如果您想从 Webpack 迁移到 Rspack,Rsbuild 是理想的技术方案。它显著减少了 90% 的配置,同时提供了 10 倍的构建速度。
据尤雨溪爆料,Vite 的 Rolldown 养成计划中也有 Rspack 的核心团队成员。
MongoDB Node.js 团队官宣 v6.3 正式发布,重大升级包括但不限于:
- 新客户端选项
serverMonitoringMode
- 修复启动
serverApi
的连接泄漏 - 弃用
GridFS
字段 - 详情请临幸官网......
JS 技能树
这是一个 Promise
进阶挑战的存储库,通过一系列精心策划的互动挑战来测评 Promise
,新手不友好。
该存储库提供了一个平台来提高您的 Promise
技能树,并完成自动化测试,为您提供即时反馈并验证您的学习进度。
防抖函数是一道回头率超高的面试题,这个防抖工具库除了支持防抖功能,还支持 clear()
方法取消调度执行,支持 flush()
方法立即执行和重置定时器。
这是一个 requestAnimationFrame
API 的 polyfill,可以用作异步可迭代对象,适配任何 JS 环境。
新人入坑 TS 总会邂逅各种奇奇怪怪的 bug,尤其是与 Node.js、ts-node 和 ESM 模块一起使用时,关于如何集成此技术栈的指南数不胜数,但貌似都无法"码到成功"。
这位大佬用了有且仅有三个文件就可以在 ESM 模块中丝滑运行 TS。
CSS 技能树
CSS 有若干种布局算法,其中默认的流式布局是为数字文档设计的,表格布局是为表格数据设计的,弹性布局是为单向轴分配项目设计的。
CSS 网格布局是最新、最给力的布局算法,这位大佬通过生动的交互式指南科普了网格布局的正确打开方式,晓之以码,动之以图,十分有趣。
以前前端爱好者喜欢集成 CSS 预处理器,比如 Sass/Less 等,因为它们提供了更灵活的语法,比如 CSS 变量、CSS 嵌套等。
如今浏览器也原生支持 CSS 嵌套语法,这位大佬科普了其毕生所学的 CSS 嵌套知识,让我们从 CSS 预处理器中解放出来。
此乃 MDN 官网推荐的一篇博客。
从今年开始,所有主流浏览器都支持容器查询。容器查询允许我们查询元素的大小,而不是视口,并相应地设置其后代的样式。我们可以像媒体查询一样使用它们,但它们在布局方面为我们提供了更大的灵活性,并有可能大大简化我们的代码。
这位大佬科普了如何利用容器查询来构建更给力、更灵活的布局,以及探讨了我们是否还需要媒体查询。
前端工具人
starlight 构建遗留文档网站的工具,敏捷、可访问且易用。
当您需要构建自己的文档时,它提供了如下的超能力,包括但不限于:
- 支持搜索、代码高亮、亮暗模式等
- 由 Astro 驱动
- 支持 Markdown、MDX 等多种标记语言
- 跨框架,允许自定义组件
clourcontrast 是一个在线的颜色对比度检查器,如果您有颜色设计的需求,欢迎沉浸式体验。
linkinator 是一个极简的网站爬虫和无效链接质检员。它可以用来扫描在线或本地文件中任何包含链接的元素,而不仅仅是 <a>
标签,支持正则过滤,还可以检查无效的链接。
html-bundler-webpack-plugin
是一个 webpack 插件,可以渲染引用了其他资源的 HTML 模板并打包生成静态 HTML,让 webpack 像 Vite 一样能够使用 HTML 作为入口文件。
此插件是 html-webpack-plugin
的进阶版,"开箱即用"地渲染 EJS、Nunjucks 等模板,您可以将模板作为编译的模板函数导入 JS,并在浏览器的客户端使用运行时的变量进行渲染。。
AutoDraw 是一个在线绘图网站,支持通用的标准绘图工具,包括但不限于羽毛笔、文字、几何图形等,还有一个支持自动绘图的强大功能,根据您的草图提供资源,拯救像我一样的抽象画大师。
h3 是一个兼具高性能和可移植性的最小化 http 框架,兼容 Serverless、Workers、Node.js 等平台,支持原生 Promise
,兼容 connect/express 的中间件。
medium-zoom 是一个用于图像中等缩放的库,与框架无关,可以跨框架使用,缩放加载图像支持高清无码。
gridstack.js 是一个现代 TS 库,旨在帮助开发者使用几行代码即可创建漂亮的可拖动、可调整大小的响应式布局。
您可以创建更高级的网格:允许用户保留更改、创建小部件侧边栏以拖动到网格中、嵌套网格等等。
piscina 是一个快速、高效的 Node.js 工作者线程池实现,支持线程间快速通信,支持灵活的线程池大小,允许自行一任务队列。
高玩攻略
现实开发中,极少数人会考虑 URL 的设计哲学。以前丑陋的 URL 可能十分反人类,而现在合理设计的 URL 提供更棒的用户体验和 SEO。
这位大佬科普了若干 URL 设计的小技巧:
- URL 片段要吝啬
- slug 要短小精悍
- 限用停顿词
- 避免完美主义
您现在收看的是前端周报系列,学废了的小伙伴可以订阅专栏合集,我们每周六佛系投稿,欢迎持续关注前端开源技术。谢谢大家的点赞,掰掰~