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

技术资讯

1. 2023 HTML 状态调查报告[1]：去年年底 Sacha Greif 分享的第一份“HTML 状态”调查，现在，2023 年问卷调查的结果出来了。这里有很多有趣的结果，包括对最新 HTML 功能、可访问性、可扩展性等方面的看法，其中开发人员期待有更多的交互式 HTML 元素，如 <datalist>、Popover API 等等。

2. React Conf 2024[2]：React Conf 2024 于 5.16 - 5.17 开展，内容包括 React Compiler 开源、Remix 与 React Router 合并、React 19 发布首个 RC 等等。
3. Safari 17.5[3]：Safari 17.5 添加了大量新的 CSS 功能，如 text-wrap: balance、light-dark() 颜色函数、@import 支持 supports() 语法等等。

4. Node v20.13.0 (LTS) 发布[4]：Node 当前 LTS 版本的性能有了小幅提升。最值得注意的是，watch 模式变得稳定，base64 和 base64url 现在也快了很多，CustomEvent 变得稳定。20.13.1 在几天后发布，修复了一个与 Windows 相关的错误。

技术文章

1. Now You Can Try the React Compiler[5]：现在你可以尝试 React 编译器了 -- 本周 React Conf 上的一个重要项目是 React 实验性编译器的开源，该编译器可在构建时优化 React 代码。他们还创建了一个 React 编译器游乐场[6]（React Compiler Playground）供试用。

2. Build Your Own React.js in 400 Lines of Code[7]：用 400 行代码构建自己的 React.js -- 本文将带你构建一个只有约 400 行代码的 React 版本，它支持异步更新并可被中断，这是 React 的核心特性，许多更高级别的 API 都依赖于此。

3. 作为前端开发，感受下 nginx 带来的魅力！[8]：文章汇总了作者在工作中八年遇到的各种 Nginx 使用场景，对 Nginx 知识进行了细致地整理和层次分明地讲解，旨在提供简洁而深入的内容。
4. 别想调试我的前端页面代码[9]：文中提到了无限 debugger、disable-devtool 等方法原理和实现。

开发工具

1. Code Screenshot[10]：用于创建代码截图的 VS Code 扩展，如果你不想安装扩展，可以直接使用在线代码截图版本[11]，在这里你可以调整主题，并导出为 PNG 或 SVG。

2. DOM Projects[12]：学习前端开发的项目集 - 主要面向初学者，使用 JS 和 DOM 构建简单应用。选择一个项目查看源代码，并尝试自己构建相同的应用程序。

3. Vue Fluid DnD[13]：适用于 Vue 的动画拖放库 - 专为列表而设计，官网提供了各种示例。

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

欢迎关注微信公众号：栗子前端

参考资料

[1] 2023 HTML 状态调查报告: https://2023.stateofhtml.com/en-US/

[2] React Conf 2024: https://conf.react.dev/

[3] Safari 17.5: https://webkit.org/blog/15383/webkit-features-in-safari-17-5

[4] Node v20.13.0 (LTS) 发布: https://nodejs.org/en/blog/release/v20.13.0

[5] Now You Can Try the React Compiler: https://react.dev/learn/react-compiler

[6] React 编译器游乐场: https://playground.react.dev/

[7] Build Your Own React.js in 400 Lines of Code: https://webdeveloper.beehiiv.com/p/build-react-400-lines-code

[8] 作为前端开发，感受下 nginx 带来的魅力！: https://juejin.cn/post/7368433531926052874

[9] 别想调试我的前端页面代码: https://juejin.cn/post/7368313344712179739

[10] Code Screenshot: https://marketplace.visualstudio.com/items?itemName=Vkrsi.code-screenshot#codescreenshot

[11] 在线代码截图版本: https://cs.vkrsi.com/

[12] DOM Projects: https://www.jisan.io/dom-projects/

[13] Vue Fluid DnD: https://github.com/carlosjorger/vue-fluid-dnd