栗子前端技术周刊第6期 - 2023 JavsScript 调查、TypeScript 5.3、Github Copilot CLI...

🌰栗子前端技术周刊第 6 期 (2023.11.20- 2023.11.26)：浏览前端一周最新消息，学习国内外优秀文章视频，让我们保持对前端的好奇心。

📰 技术资讯

1. 2023 年 JavaScript 现状调查：历史悠久的 JavaScript 现状调查又回来了，目的是了解社区在做什么以及我们在使用什么工具。调查结果总是很有启发性，网站将在第一时间与大家分享最有价值的部分。

2. TypeScript 5.3 ：TypeScript 5.3 已发布。它支持最新的 import-attributes 提案，增强了多种上下文中的类型缩小功能，为编辑器中的类型提供了交互式嵌套提示等等。

// 我们只希望将其解释为 JSON、
// 而不是扩展名为`.json`的可运行/恶意 JavaScript 文件。
import obj from "./something.json" with { type: "json" };

3. GitHub Copilot CLI：GitHub Copilot 使用 OpenAI Codex 提供实时代码建议，现在 GitHub Copilot 推出了 CLI 版本。

📒 技术文章

1. Make Vue's template refs clean & simple：文章介绍如何封装一个 hook 让你更舒服地使用 ref。

2. An Interactive Guide to CSS Grid：CSS Grid 互动指南 -- CSS Grid 是一种功能强大网页布局的方法，但其中仍有一段学习曲线。文中介绍了 CSS Grid 的工作原理以及如何有效地使用它，还有互动演示！

3. 前端添加水印」你真的了解全面吗？：文章介绍了页面和图片的水印方案和实现。页面水印通过 canvas 生成背景图，利用伪类添加到对应区域，最后使用 MutationObserver 处理水印删除问题。图片水印通过服务端、OSS、或者 canvas 来处理。

4. 代码刚上线，页面就白屏了：介绍了多种白屏检测方案以及优缺点和实现，包括关键节点是否渲染、观察 FP/FCP、基于视窗坐标采集法等等。

🔧 开发工具

1. React Scroll Parallax：视差滚动效果 Hook --为你选择的元素添加基于垂直或水平滚动的效果。

2. AutoDraw：能猜出你想画什么的在线绘图工具 - 包括标准绘图工具（钢笔、字体、形状等）。

3. Linkinator 6.0 ：查找网站断链的工具，包括 Node.js API 和 CLI 工具，可用于抓取网站并验证链接。如果你想试试，现在就可以像 npx linkinator https://example.com/ 一样轻松运行它。

🚀🚀🚀 以上资讯文章选自常见周刊，如 JavaScript Weekly 等，周刊内容也会不断优化改进，希望你们能够喜欢 💖