--- url: https://sugarat.top/weekly/2024-02-25.md description: >- ① Node.js 正式推出了它的吉祥物 “火箭龟” - 🚀🐢 ② Web 终极拦截技巧 ③ EasyDevo - Mac垃圾清理&系统监控 ④ Keep Screen On ⑤ WXT - 下一代Web扩展开发框架 ⑥ Localtunnel - 内网穿透工具 ⑦ React 面试题和解答 ⑧ SVG 国旗图标 ⑨ SVG Tutorial - SVG 教程 ⑩ 14 分钟入门 JavaScript - 交互式教程 ⑪ 英：如何居中一个 div ⑫ 使用纯 CSS 创建 DVD 动画 ⑬ Sora 合集 --- # 视野修炼第74期 | 火箭龟🚀🐢 *💐 欢迎读者👉🏻 [投稿](https://www.wenjuan.com/s/AN32YrD/) 👈🏻分享内容* 欢迎来到第 74 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介 \[\[toc]] **​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）** 下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。 ## 🔥强烈推荐 ### [1. Node.js 正式推出了它的吉祥物 “火箭龟”](https://mp.weixin.qq.com/s/lydV30W44UTWc_fp6I-KAw) - 🚀🐢 > 众所周知，在程序开发的各个语言和框架中，为了让大家深刻的记住和熟悉他们、更好的建立身份和社区感，往往会推出一个标志性的吉祥物。 > Node.js 自 2009 年诞生以来，一直没有属于它的吉祥物，前段时间在公开征集了大家的意见后，于 2月20日 官宣了它的吉祥物：“火箭龟”。 ![](https://img.cdn.sugarat.top/mdImg/sugar/fd7da8373b79ae30ecc62a8ee12a46ba) *当然有搞怪的，说火箭上少了 V8 的标志* ![](https://img.cdn.sugarat.top/mdImg/sugar/44b7e733c8e82cbe09f26ab869e33214) ### [2. Web 终极拦截技巧](https://hughfenghen.github.io/posts/2023/12/23/web-spy/#%E6%8B%A6%E6%88%AA%E7%9A%84%E4%BB%B7%E5%80%BC) ![](https://img.cdn.sugarat.top/mdImg/sugar/c349feb6c33226e5763545b2a3c9cd72) 文章通俗的讲解了Web场景下，各环节的拦截方法的实现（`浏览器 API`，`事件 Dom`，`ServiceWorker`，`服务器`）。 同时介绍注入拦截代码的方式：`修改html/js 资源内容`，注入时机`源码`，`构建/服务推送`，`网关注入`，`浏览器插件，devtool`。 同时简单分析介绍了 `WebContainer`，`沙盒`，`通用域名服务`。 **总之文章非常推荐一读，还是很有价值** ## 🔧开源工具&技术资讯 ### [3. EasyDevo](https://easydevo.boringboring.design/) - Mac垃圾清理&系统监控 Mac 桌面应用，可以监控系统指标，清理垃圾，项目概况信息，开发者友好。下面一起看一下部分使用截图： | 系统监控 | node\_modules 清理 | 项目统计 | | :---------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | | ![](https://img.cdn.sugarat.top/mdImg/sugar/383755a2089ec6aca9b7b469b8e02de9) | ![](https://img.cdn.sugarat.top/mdImg/sugar/a05902a5431608eae5bb27b1747e929b) | ![](https://img.cdn.sugarat.top/mdImg/sugar/fb69bbdfc27ead1f58f34dd530faea71) | | | *有一说一 UI 挺漂亮的，部分功能也很实用* ### [4. Keep Screen On](https://www.keepscreenon.com/) > 打开这个网页，就可以让电脑屏幕保持常亮，对 PC、Mac、Android、iOS 均有效 ![](https://img.cdn.sugarat.top/mdImg/sugar/ca0a6b23775886569cce986af5625411) *看了一下源码，背后实现使用了 [NoSleep.js](https://github.com/richtr/NoSleep.js)* ### [5. WXT - 下一代Web扩展开发框架](https://wxt.dev/) 用于创建跨浏览器扩展的框架。适用于 Chrome、Firefox、Edge 和 Safari。 ![](https://img.cdn.sugarat.top/mdImg/sugar/f6d40acd5b8da7d637624ec7c8baa9cb) ### [6. Localtunnel](https://theboroer.github.io/localtunnel-www/) - 内网穿透工具 这一个基于 Node.js 实现的CLI工具。 使用非常简单 ```sh npx localtunnel --port 4000 ``` ![](https://img.cdn.sugarat.top/mdImg/sugar/6e87bdf2902f91af7b96c095347a3635) 自动你的本地服务分配一个公网的 URL，使得公网可以访问这个本地服务。 首次访问，需要输入自己的公网IP进行验证。默认提供的域名是外网，有一定几率无法正常访问。 *[localtunnel项目](https://github.com/localtunnel/localtunnel)是开源的可以部署到自己的服务器+使用自定义域* ### [7. React 面试题和解答](https://github.com/sudheerj/reactjs-interview-questions) 目前已经更新 338 道题。 ![](https://img.cdn.sugarat.top/mdImg/sugar/23b1ee3c3f0e6df65f1e24becafc8f5b) ![](https://img.cdn.sugarat.top/mdImg/sugar/1848321c876a50c81cb878fa502d8de4) ### [8. SVG 国旗图标](https://nucleoapp.com/svg-flag-icons) ![](https://img.cdn.sugarat.top/mdImg/sugar/4434e2db748880fb0ee1bfc7c58cbc15) ## 📚 教程&文章 ### [9. SVG Tutorial](https://svg-tutorial.com/) - SVG 教程 ![](https://img.cdn.sugarat.top/mdImg/sugar/23c0f37da336c801b8def4e940c86ce2) 介绍 SVG 图片的教程（英文），共25节，有大量的例子。 ![](https://img.cdn.sugarat.top/mdImg/sugar/fc7bc57039781c90e821082188d06b54) ### [10. 14 分钟入门 JavaScript](https://jgthms.com/javascript-in-14-minutes/) - 交互式教程 ![](https://img.cdn.sugarat.top/mdImg/sugar/6ef81f48a02941c4b60a31d7e2b90c44) ### [11. 英：如何居中一个 div](https://www.joshwcomeau.com/css/center-a-div/) CSS 中曾经棘手的难题现在已经变得很简单了，方法也很多。 这篇文章深入探讨并分享了不同方法之间的权衡以及使用策略。 ![](https://img.cdn.sugarat.top/mdImg/sugar/622f70278d9f731acd07535b4ab8a9e9) ### [12. 使用纯 CSS 创建 DVD 动画](https://www.javiermorales.dev/blog/dvd) ![](https://img.cdn.sugarat.top/mdImg/sugar/d9f77e33eea0bc2a94d3888db1377f54) 非常 Nice 值得学习。 ## 🤖AI工具&资讯 ### 13. Sora 合集 下面的网站收集了 Sora 模型公开的视频和提示词。 | [SoraPrompts](https://soraprompts.co/) | [SoraHub](https://sorahub.video/zh) | [Sora Videos](https://soravideos.media/) | | :------------------------------------: | :---------------------------------: | :---------------------------------------------------------------------------: | | ![](https://img.cdn.sugarat.top/mdImg/sugar/a4c3ba4c59147a714df885038fa6a59e) | ![](https://img.cdn.sugarat.top/mdImg/sugar/caa41e4562410111c54a1e00a26f1e28) | ![](https://img.cdn.sugarat.top/mdImg/sugar/780a4e932b7a36f74e302c48154b7d3e) | ## 😛趣图 **AI巨头** ![](https://img.cdn.sugarat.top/mdImg/sugar/2891449170edc74c3db83d230e28720b) **使用Div做为Button** ![](https://img.cdn.sugarat.top/mdImg/sugar/b493d9f2884cd2c4678f6cefb0bf861a) *** 篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html) ## ⭐️强力推荐关注 * [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布 * [云谦：MDH 前端周刊](https://mdhweekly.com/) - 前端资讯和分享 * [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭 * [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章 * [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！ * [FRE123 技术周刊精选](https://www.fre123.com/weekly) - 前后端技术周刊精选推荐信息流