🌰栗子前端技术周刊第 6 期 (2023.11.20- 2023.11.26):浏览前端一周最新消息,学习国内外优秀文章视频,让我们保持对前端的好奇心。
📰 技术资讯
-
2023 年 JavaScript 现状调查:历史悠久的 JavaScript 现状调查又回来了,目的是了解社区在做什么以及我们在使用什么工具。调查结果总是很有启发性,网站将在第一时间与大家分享最有价值的部分。
-
TypeScript 5.3 :TypeScript 5.3 已发布。它支持最新的 import-attributes 提案,增强了多种上下文中的类型缩小功能,为编辑器中的类型提供了交互式嵌套提示等等。
ts
// 我们只希望将其解释为 JSON、
// 而不是扩展名为`.json`的可运行/恶意 JavaScript 文件。
import obj from "./something.json" with { type: "json" };
- GitHub Copilot CLI:GitHub Copilot 使用 OpenAI Codex 提供实时代码建议,现在 GitHub Copilot 推出了 CLI 版本。

📒 技术文章
-
Make Vue's template refs clean & simple:文章介绍如何封装一个 hook 让你更舒服地使用 ref。
-
An Interactive Guide to CSS Grid:CSS Grid 互动指南 -- CSS Grid 是一种功能强大网页布局的方法,但其中仍有一段学习曲线。文中介绍了 CSS Grid 的工作原理以及如何有效地使用它,还有互动演示!
-
前端添加水印」你真的了解全面吗?:文章介绍了页面和图片的水印方案和实现。页面水印通过 canvas 生成背景图,利用伪类添加到对应区域,最后使用 MutationObserver 处理水印删除问题。图片水印通过服务端、OSS、或者 canvas 来处理。
-
代码刚上线,页面就白屏了:介绍了多种白屏检测方案以及优缺点和实现,包括关键节点是否渲染、观察 FP/FCP、基于视窗坐标采集法等等。
🔧 开发工具
- React Scroll Parallax:视差滚动效果 Hook --为你选择的元素添加基于垂直或水平滚动的效果。

- AutoDraw:能猜出你想画什么的在线绘图工具 - 包括标准绘图工具(钢笔、字体、形状等)。

- Linkinator 6.0 :查找网站断链的工具,包括 Node.js API 和 CLI 工具,可用于抓取网站并验证链接。如果你想试试,现在就可以像
npx linkinator https://example.com/
一样轻松运行它。
🚀🚀🚀 以上资讯文章选自常见周刊,如 JavaScript Weekly 等,周刊内容也会不断优化改进,希望你们能够喜欢 💖