该周报主要为各个地方内容的汇总整理
技术
Use svg sprite icons in React
本文介绍了在 React 应用中使用 svg 精灵图标的最佳实践。作者不推荐在组件中直接编写 svg 代码的方式，因为这样会导致包大小的剧增。相反，作者提倡使用 svg 精灵图，在一个 svg 文件中存储多个图标，以便在需要时只显示其中的一部分。文章还提供了一些有用的工具和脚本，帮助开发者在项目中使用 svg 精灵图标。
WebAssembly 在抖音烟花特效中的应用
本文介绍了如何使用 WebAssembly 对 JavaScript 代码进行优化，并以抖音烟花特效为例进行了实践。通过将耗时的 JavaScript 计算打包进.wasm 文件中，利用 WebAssembly 执行原来的计算逻辑，可以显著提高性能。同时，文章也指出了该方案存在的问题，但对于 CPU 侧的性能瓶颈，使用 WebAssembly 仍然是一个不错的选择。
Strongly Type useRef with ElementRef
本文解释了如何在 React 中使用 useRef 钩子与原生元素一起使用。它提供了一种解决方案，用于在使用 useRef 时指定正确的元素类型。作者建议使用 React 中的 ElementRef 类型助手，以轻松提取所定位元素的类型。这种方法也适用于使用 forwardRef 的自定义组件。文章最后推荐了一门免费的 React 和 TypeScript 初学者课程，以获取更多技巧和窍门。
- 在 React 中使用 useRef 与原生元素一起使用时，确定正确的类型可能会有些棘手，但使用 ElementRef 类型助手可以更容易地提取适当的类型。
- ElementRef 也可以与使用 forwardRef 的自定义组件一起使用，以提取组件转发到的元素的类型。
- 如果不确定要使用的类型，ElementRef 是一个有用的工具，可以确保在 useRef 中使用正确的类型。
Recreating YouTube’s Ambient Mode Glow Effect
本文讨论了 YouTube 的“环境模式”功能，该功能在视频播放器周围创建了一个发光效果。作者对代码进行了逆向工程，并解释了如何使用 HTML <canvas>和 requestAnimationFrame 函数来创建此效果。文章概述了 HTML <canvas>元素及其用途，以及 requestAnimationFrame 方法。然后，它概述了创建环境模式效果的步骤，包括在画布上渲染视频帧，应用模糊效果和添加 CSS 样式。文章还讨论了 HTML 标记和将<canvas>与<video>元素同步。
YouTube 的视频播放器的环境模式效果通过将视频的颜色投射到背景上，创建了一种微妙的发光效果，使其更具沉浸感。
该效果使用 HTML <canvas>元素和 requestAnimationFrame 函数来渲染和同步视频帧与画布来实现。
通过缩小、模糊和样式化画布，可以在其他视频上创建类似的发光效果。
React Server Components Tips
React Server Components（RSC）是 React 的官方数据获取解决方案。它们带来了一些限制，如需要深度集成打包工具、严格的组件树结构和模块组合，以及交互式代码必须在特殊的客户端组件中执行等。但它们也带来了一些好处，如可以在组件内部获取数据、避免客户端获取数据时常见的瀑布流问题、通过<Suspense>实现数据流的加速加载，以及在服务器上执行更多的代码而不需要将其发送到客户端，从而减小打包大小。在使用 RSC 时，需要
- React Server Components 是 React 的官方数据获取解决方案，可以在组件内部获取数据。
- 使用 React Server Components 可以避免客户端获取数据时常见的数据瀑布流问题。
- 使用 React Server Components 可以通过
<Suspense>实现数据流式传输，加快页面的初始加载速度。
Full Context Development
本文介绍了延迟加载（lazy loading）的技术，它是一种将资源（如图片、脚本或 React 组件）的加载推迟到实际需要时的技术。延迟加载可以提高网络性能和用户体验，通过只加载当前所需的资源，减少了加载时间并更高效地利用网络资源。文章还提到了一些实际案例，通过延迟加载可以显著提升网站的加载速度。文章还介绍了 React 中实现延
- 懒加载是一种延迟加载资源的技术，可以提高网页加载速度和网络资源的利用效率。
- 使用 React.lazy() 函数可以实现组件的懒加载，通过动态 import() 语句来加载所需的模块。
- 懒加载可以通过与 Suspense 组件结合使用，提供加载中的占位内容，实现更好的用户体验。
A Beginner’s Guide to Docker Networking
Docker 的网络功能包括不同类型的网络驱动程序。默认情况下，Docker 会创建一个名为 docker0 的桥接网络，用于容器之间的通信和与主机之间的通信。桥接网络通过创建 Linux 桥接、内部接口、iptables 规则和主机路由来实现容器之间的连接。桥接网络可以通过端口映射来实现对外部的访问。此外，文中还介绍了其他两种类型的网络：host 网络（主机与容器在同一网络上）和 none 网络（容器运行在独立的网络栈上）。桥接网络是一种将多个通信网络或网络段连接起来的方式。
- Docker 的网络子系统是可插拔的，支持不同类型的网络驱动程序。
- Docker 默认创建一个名为 docker0 的桥接网络，每个新的 Docker 容器都会自动连接到该网络，除非指定自定义网络。
- 桥接网络通过创建一个私有的内部网络连接主机上的容器，使得容器之间可以通信，同时通过端口映射实现与外界的通信。
TS 之父的新项目 typechat 预示着前端的未来
TypeChat 是一个能够将自然语言描述转换为可执行代码的工具。它可以对输出结果进行自动纠错，并且能够生成稳定的代码。未来，前端工程师需要编写详尽的类型声明，让 TypeChat 生成框架代码，类似现在前端通过框架编写状态变化逻辑一样。这将导致前端工程师的要求更高，但这个岗位会持续存在，只是从业者会更少。
工具
veaury
在 Vue3 中使用 React，在 React 中使用 Vue3
auto-form
一个 React 组件，根据 zod 模式自动创建 @shadcn/ui 表单。
vaul
一个用于 React 的未经样式化的抽屉组件。
capo.js
把你的<head>标签内容整理好
swagger-typescript-api
TypeScript API 生成器通过 Swagger 方案
np
一个更好的 npm publish
更新
Astro 2.9: View Transitions (experimental)
- 引入了实验性的视图过渡支持，可以在不需要客户端路由的情况下实现页面之间更平滑的过渡。
- 重定向配置选项不再是实验性的，这使得在项目中设置重定向更加容易。
- Astro 的静态分析已经改进，通过仅包含所使用的导入来优化脚本捆绑，从而获得更高效的性能。
其他
How To Be Successful
本文提供了关于如何取得非凡成功的 13 个思考，无论是在赚取大量财富还是创造重要事物方面。作者强调了复利的重要性，无论是在商业上还是个人成长上。他们强调了自信、独立思考和有效推销自己想法的必要性。鼓励冒险，保持专注和努力工作。文章最后指出，找到目标并产生有意义的影响可以带来巨大的喜悦和满足感。
- 要取得非凡的成功，要专注于提升自己和职业，追求指数级增长，不断提高成果。
- 培养自信，甚至到几乎妄想的程度，因为它在实现成功和克服挑战方面具有巨大的力量。
- 培养独立思考能力，学会有效地推销自己的想法，并使冒险变得容易，以便抓住机会并快速适应。
Good code is like a love letter to the next developer who will maintain it.
本文强调了编写优秀代码的重要性，并将其比作写情书。优秀的代码就像一封个人化、真诚而体贴的情书一样。它遵循设计模式和原则，使其具有可扩展性、可维护性和高效性。遵循最佳实践，如适当的命名约定和彻底的注释，也至关重要。严格的测试和对未来开发人员的同理心是编写优秀代码的关键要素。最终，优秀的代码是他人可以轻松构建的持久遗产。
- 优秀的代码就像一封情书，个人化、真诚而体贴，旨在准确传达情感并高效解决问题。
- 设计模式和原则是代码的语法规则，为开发人员提供了共享的词汇，用于创建可扩展、可维护和可理解的软件设计。
- 遵循最佳实践、进行彻底的测试，并对未来的开发人员表现出同理心和尊重，对于创建易于阅读、理解和维护的好代码至关重要。
NFTs 101 — Why NFTs are a generational innovation
文章作者解释了他们对 NFT（非同质化代币）价值的新认知，并决定投资超过 100 万美元的 NFT。他们讨论了 NFT 带来的高回报潜力以及 NFT 的价值原因。作者还分享了他们以前对艺术和无形商品持怀疑态度，但解释了他们如何开始欣赏 NFT 艺术的价值。该文章分为不同章节，涵盖了 NFT 的各个方面，并提供了与 NFT 互动的实用教程。
- 作者最初对 NFT 和艺术的主观价值持怀疑态度，但现在成为 NFT 作为技术革命潜力的坚定信仰者。
- 作者强调了传统艺术估值和 NFT 投机性质之间的脱节，但认为 NFT 可以比传统加密货币投资带来更高的回报。
- 作者强调了 NFT 在艺术和游戏等多个行业的实用性，并讨论了 NFT 对创作者和收藏家之间利益契合的潜力。
What Comes After SaaS?
该文章讨论了软件开发中的“可塑源代码”概念，用户可以使用人工智能修改应用程序的底层代码。这样可以实现更多的定制和个性化，类似于建造一个可个性定制的郊区开发项目。作者分享了他们使用可塑源代码应用程序的经验，以及如何通过基于浏览器的开发环境轻松与朋友共享。文章认为，软件开发中的这种新范式将使构建小型 SaaS 应用程序变得更容易，模糊开发者和用户之间的界限，并创建更具定制化的软件。
- 基于 Web 环境和人工智能技术的发展使得可定制和个性化的软件应用程序的创建成为可能。
- 这些技术的进步使用户可以在不需要编码技能的情况下修改和定制应用程序，从而实现更具个性化和定制化的用户体验。
- 软件开发中的这种新范式打开了新的商业机会，并模糊了开发者和用户之间的界限。
