探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。
JS 文章推荐：setTimeout潜在的内存泄漏风险、Promise基础教学、单页面应用中的数据获取模式、webhooks简介。
HTML & CSS 文章推荐：4 种利用 CSS 实现入场出场动画、使用 CSS 中的conic-gradient()创建文本逐渐显露效果。
工具推荐：现代全栈Web应用开发工具 -Wasp、基于 WebRTC 的点对点传输工具 -sharedrop。如果觉得有收获，欢迎大家点赞👍🏻订阅
JS 文章推荐
setTimeout 潜在的内存泄漏风险
这篇文章探讨了在 Node.js 中使用 setTimeout 可能导致内存泄露的问题。Node.js 中的 setTimeout 返回的是一个包含多个属性的 Timeout 对象，而不是简单的数字。如果这些 Timeout 对象未被及时清除，它们可能维持对一些资源的引用，从而导致内存无法释放。特别是 Timeout 对象可以充当更多状态的容器，如 AsyncLocalStorage 的新 API，它会将附加状态附加到所有触发超时的操作上。异步本地存储是以这样一种方式实现的，即Timeout 对象会将隐藏状态一直传递下去，直到它们运行。
一句话总结：对于定时器在清除时，最好也将其引用清除
clearTimeout(this.timer); this.timer = null;
| 代码 | 示例详情 |
|---|---|
👉🏻原文链接：setTimeout 潜在的 Node 内存泄漏风险
Promise 基础教学
一篇很不错的 JavaScript 异步编程的演进过程，介绍了从早期 JavaScript 在异步编程方面面临的问题到最后的解决方案。最初，使用回调函数虽然实现了异步操作，但很快因代码复杂和难以维护而导致“回调地狱”。为解决这一问题，Promises被引入，提供了更清晰的异步管理方法。随后，Async/Await作为对Promises的进一步抽象，通过更直观的同步方式书写代码，简化了异步编程的复杂性，极大地改进了代码的可读性和错误处理能力。
👉🏻原文链接：Promise 基础教学
单页面应用中的数据获取模式
这篇文章探讨了在单页面应用中获取数据的模式，重点是如何在获取远程数据时保持应用的响应性。介绍了五种模式：异步状态处理器、并行数据获取、回退标记、代码分割和预获取。每种模式都旨在优化加载时间，改进用户体验，且具有特定的应用场景。文章通过实例展示了如何在React中实现这些模式，并讨论了各模式的适用情况。
👉🏻原文链接：单页面应用中的数据获取模式
什么是 webhooks
很好的一篇 webhooks 科普文。文章介绍了 Webhooks 的基础知识和实现方式。Webhooks 是基于 HTTP 的回调函数，允许服务通过 API 通知其他服务事件发生。它们是事件驱动的，可以即时传递数据，避免了频繁的轮询，提高了效率。文章还通过 GitHub 的例子展示了如何设置和接收 Webhooks，包括安全性和有效性的验证。Webhooks 的好处包括实时数据传输、提高用户体验、定制化触发特定动作等，还建议了一些最佳实践，如使用 HTTPS、验证 Webhooks、错误处理和日志记录。这些使得 Webhooks 成为提高工作流、响应性和效率的有效工具。现在很多办公的 IM 软件的机器人体系亦或者 CI、CD 系统，在与团队各个业务系统打通，本质上就是基于 webhooks 去实现的。
附：网页的 Ajax 请求与 webhooks 之间的区别。从技术实现上它们很相似，但它们的使用场景和行为约束确实有所不同：
- Webhook：更适用于服务器之间的异步通信，允许系统在事件发生时主动通知其他系统，常用于实现实时数据同步、通知和自动化工作流程。
- Ajax：更适合于在用户与页面交互时进行数据的异步加载和更新，通过 AJAX 技术可以在不刷新整个页面的情况下实现部分内容的更新，适用于增强用户体验和实现动态交互。 虽然它们在技术实现上相似，数据消费与使用场景存在差异。
👉🏻原文链接：什么是 webhooks
CSS 文章推荐
四种新的 CSS 特性，用于实现流畅的进入和退出动画
这篇文章介绍了 Chrome 116 和 117 版本中引入的四个新的 CSS 功能，旨在改进网页元素的进入和退出动画。这些功能包括在关键帧时间线上动画化 display 和 content-visibility 属性，使用 transition-behavior 属性中的 allow-discrete 关键字来转换离散属性，以及 @starting-style 规则和 overlay 属性来控制元素动画过程中的层级行为。这些新特性让开发者能够更加平滑和自然地实现复杂动画效果。
👉🏻原文链接：四种新的 CSS 特性，用于实现流畅的进入和退出动画
使用 CSS 中的 conic-gradient()创建文本逐渐显露效果
这篇文章介绍了如何使用 CSS 的 conic-gradient() 实现一个文本逐渐显示的效果。首先，设置了一个简单的 HTML 文本作为“掩码”，在此基础上，使用 conic-gradient() 为容器元素创建背景渐变。随后，通过 CSS 变量控制渐变的尺寸和重复性，实现文本的动态显示。为了增加互动性，作者将文本显示动画与用户悬停操作关联起来。最后，通过修改 CSS mix-blend-mode 属性完成了最终的文本显示效果。
工具推荐
wasp
Wasp 是一个现代全栈Web应用开发工具，它不仅仅是帮助开发者进行类型定义，而是提供了一个更广泛的开发框架。它集成了前端、后端和数据库的开发流程，利用React、Node.js和Prisma等技术。Wasp 的编译器可以自动处理各种配置和代码生成，从而简化了身份验证、数据库操作、异步处理等多种功能的实现。开发者只需要在Wasp的配置文件中声明应用逻辑，Wasp 会自动转换成完整的应用程序代码。
举个🌰：在 main.wasp 上进行 Prisma 类型定义
根据 wasp 服务端定义接口数据获取
跟 wasp 前端进行数据获取
sharedrop
ShareDrop 是一款受苹果 AirDrop 服务启发的网络应用。它允许您在设备之间直接传输文件，无需先将文件上传到任何服务器。它使用 WebRTC 进行安全的点对点文件传输，并使用 Firebase 进行在线状态管理和 WebRTC 信令。ShareDrop 和 AirDrop 之间的主要区别在于 ShareDrop 需要互联网连接来发现其他设备，而 AirDrop 则不需要，因为它在它们之间创建了临时无线网络。另一方面，ShareDrop 允许您在移动设备（Android 和 iOS）和桌面设备之间甚至在网络之间共享文件。
观点
一个关于前端开发的抱怨
这篇文章是一位资深前端开发者对当前前端开发领域的一系列批评。作者批判了当代前端开发忽视内容本质、过度依赖 JavaScript 和复杂框架的趋势。他提出，许多开发者忘记了简单性的重要性，使用复杂的解决方案去解决本可以简单处理的问题。此外，他还批评了现代工具和方法，如Sass和各种前端框架，认为这些只是增加了不必要的复杂性和技术负债。作者恳求开发者回归简单、直观的开发方式，减少不必要的技术堆砌，重视内容和用户体验而非仅仅是技术本身。
一句话总结：关于对于前端开发人员为简单问题创建复杂解决方案感到愤怒的抱怨。你怎么看？
