探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。文章方面，本期为大家带来，Web 终极拦截技巧，通过hook完成各类神奇的事情、NodeJS 2023 工作总结、NextJS 与 Remix 全方面对比、
overflow 使用小技巧；工具方面，强烈推荐翻译软件：沉浸式翻译。阅读英文文章的不二之选！、独立开发者出海工具指南。话不多说，详细内容请大家查阅。如果觉得有收获，动动大拇指点个赞，以示鼓励！
文章推荐
Web 终极拦截技巧
在Web开发中使用的一些高级拦截技巧。文章内容包括如何拦截和重写浏览器API、操作事件和DOM元素，以及使用ServiceWorkers和服务器端拦截。此外，文章还探讨了这些技术的实际应用，例如创建沙箱环境和开发通用域名服务。
笔者附录：
很认同文章开头的一句话：计算机科学领域的任何问题都可以通过增加一个中间层来解决。 —— Butler Lampson。但是在解决问题时增加中间层，更多的是一种临时或者 hack 的解决方案，并不是大部分场景的最佳解决手段。
在做系统功能拦截时，必要的安全问题也需要考虑。对于代码嵌入，常用的攻击手段，如：XSS、原型污染。关于XSS 攻击手段，想必各位同学都比较了解。这里简单补充一下原型链污染：它发生在攻击者通过修改一个对象的原型（即对象的
__proto__属性或通过其原型链）来添加或修改属性时。当这个被污染的原型被应用程序的其他部分使用时，可能会导致意料之外的行为或安全问题。比较知名的攻击事件：lodash.defaultsDeep 方法造成的原型链污染
nodejs-2023-year-in-review
Rafael，Node.js技术指导委员会成员和Fastify核心团队成员，分享了关于过去一年Node.js演进的有用更新，团队如何确保Node.js经过了充分的测试并且可靠，Node.js外部依赖的变化（在2023年新增了三个），以及Node.js安全性和Web存在方面的增强。
笔者附录：NodeJS 新的吉祥物：Rocket Turtle
Next.js vs. Remix: A Developer's Dilemma
Next.js vs. Remix： A Developer's Dilemma — 比较了各个领域，从各种技术的实现方式到部署、支持和受欢迎程度。
使用 overflow: clip 替换 overflow: hidden 驱动滚动动画
当使用animation-timeline: scroll(nearest) 来实现滚动动画时，因为 overflow: hidden 会创建一个滚动容器，它可能会干扰到滚动驱动动画的滚动查找机制。使用 overflow: clip 能有效的规避这个问题。overflow: clip 与 overflow: hidden 的表现形式类似，区别点在与 clip 不会创造滚动容器，且无法通过 JS 改变滚动属性来实现滚动。
笔者附录：
关于
animation-timeline属性，提供一种更细粒度的控制方式来协调复杂的动画序列，使得开发者可以更精确地安排动画的执行顺序和同步。如上述例子中的animation-timeline: scroll(nearest)，会根据滚动容器的 scrollTop 去驱动滚动动画百分比。但需要注意的是，当前这个属性还属于实验阶段，更多信息
工具推荐
沉浸式翻译
沉浸式网页双语翻译扩展，支持PDF翻译，双语Epub电子书制作，Youtube/Netflix/Udemy 等平台双语字幕，支持Deepl/Google等多个翻译服务，免费使用。一款免费的，好用的，没有废话的，革命性的，饱受赞誉的，AI 驱动的双语网页翻译扩展，帮助你有效地打破信息差，在手机上也可以用！同时推荐给大家一个使用 AI 翻译时，价格更便宜的接入方式：aihubmix
indie-hacker-tools
出海第一步，搞定工具库。仓库收录了独立开发者出海技术栈和工具，持续整理中…… 仓库收录标准：
- 帮助独立开发者提升开发效率
- 帮助独立开发者降低成本
- 市场上足够流行
更多推荐
职场焦虑症｜如何做自己的思想工作？
本文作者根据十年工作经验分享了一些关于职场焦虑症的故事，还有一些应对技巧。希望大家在新的一年，开会不吵架，做项目不倒排。
在 GitHub 上发现超过 100,000 个受感染的存储库
国外安全研究和数据科学团队发现，去年年中开始的恶意仓库混淆活动出现了复苏，这一次的规模更大。这次攻击影响了超过100,000个GitHub仓库（推测还有数百万个），当不知情的开发者使用看似已知且可信的仓库，实际上这些仓库却被恶意代码感染。
