呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #node #JavaScript #TypeScript #Docker #Tools
Node Weekly #586 - July 15, 2025
Node Weekly #586 - July 15, 2025
AI 摘要：本期 Node Weekly 聚焦 Node.js 最新版本更新、社区讨论以及相关技术进展。Node.js v24.4.0 发布，带来了新的功能和安全更新提示；社区正在讨论是否将 Node.js 改为年度大版本发布并缩短 LTS 周期；TypeScript 5.9 Beta 引入了新功能如 import defer；此外，还涵盖了 Docker 部署最佳实践、性能差距分析、JavaScript 现代模式问题，以及一系列实用工具和库的更新，旨在帮助开发者提升效率和代码质量。
1. Node.js 更新与公告：
• Node v24.4.0 (Current) 发布：新增 --watch-kill-signal 功能，允许指定重启进程时的信号；spawn 和 spawnSync 支持权限模型标志传播；包含常规 V8 和依赖项更新。Node 团队还预告即将发布 v24.x、22.x 和 20.x 版本以解决安全问题。
• Node.js 年度大版本发布提案：社区讨论是否将 Node.js 改为每年一次大版本发布，并将偶数版本 LTS 周期从 30 个月缩短至 24 个月，欢迎社区反馈。
• Node.js v18 支持延长：尽管 v18 已于 2025 年 4 月停止支持，但 Canonical 宣布 Ubuntu Pro 用户将获得支持至 2032 年。
2. 社区与安全动态：
• Node-API 支持 React Native：Callstack 宣布为 React Native 引入 Node-API 支持，扩展跨平台原生代码编写和共享的可能性。
• TypeScript 5.9 Beta 发布：引入 import defer 支持，以及新的 node20 模式（类似 nodenext，但目标为 ES2023）；透露 Go 驱动的 TypeScript 原生端口将在 TypeScript 7 中可用。
• TC39 全会总结：Igalia 团队分享了最新 TC39 全体会议的详细摘要，其中包含有关 ECMAScript 发展的有趣花絮。。
• 安全威胁：朝鲜“威胁行为者”部署了 67 个恶意 npm 包，Kirill Boychenko 详细解释了这些包的运作机制。
• Node 版本管理器性能差距：Pavel Romanov 指出不同 Node 版本管理器可能导致 shell 启动速度相差 500 倍，但对大多数用户影响不大。
• JavaScript 作用域提升问题：Parcel 创建者 Devon Govett 认为作用域提升与现代 JS 模式冲突。
• 使用 Array.fromAsync() 的现代异步迭代：Matt Smith 介绍 Array.fromAsync() 的用法。
• 类型化查询构建器对比：Guillaume Billey 比较了 Kysely 和 Drizzle 两种工具。
3. 工具与库推荐：
• Necord：基于 Nest 和 Discord.js 的 Discord 机器人开发框架，易于部署机器人功能。
• Upyo：跨运行时邮件发送库，支持 SMTP 和 HTTP（如 SendGrid、Amazon SES）提供统一类型安全的 API。
• Rewire 9.0：专注于 CommonJS 的单元测试猴子补丁工具，方便注入 mock 和检查私有变量。
• Envalid 8.1：环境变量验证工具，确保程序运行时依赖项齐全。
• cRonstrue 3.0：将 Cron 表达式转换为自然语言，支持约 30 种语言环境。
• 其他更新：包括 ESLint v9.31.0、Serverless Express 4.17、NATS.js 3.1、OpenAI Node 5.9 等工具和库的最新版本信息。
4. 生态系统动态：
• JavaScript Date 类测试：通过趣味测验了解 Date 类的解析机制。 #趣站
• ANSI.tools：在线工具，用于分析 ANSI 转义码和常用代码查询。
• 10 亿行挑战：Tae Kim 分享如何在 Bun 中处理 10 亿行文件，耗时不到 10 秒。
• Nginx 的 njs 模块升级：从仅支持 ES5 升级至使用 QuickJS，支持完整的 ES2023 功能。
#趣站 #像素风 #设计 #前端
这个网站超有趣
https://www.nicchan.me/blog/youre-not-a-front-end-developer-until-youve/
昨天其实看到了没发，今天发一下w
这个网站超有趣
https://www.nicchan.me/blog/youre-not-a-front-end-developer-until-youve/
昨天其实看到了没发，今天发一下w
https://benjaminaster.com/css-minecraft/
前些天看到了没发，补一下，这个有点离谱的。
纯 CSS 实现 Minecraft 风格的构建体验 - 完全不需要 JavaScript！
好看的站点！
https://jordan-delcros.com/
Jordan Delcros 重建了个人作品集，展示其 WebGL、动画和交互式开发方面的最佳项目和技能，标志着其作为自由职业开发者的全新旅程。
via Jordan Delcros Portfolio - Awwwards SOTD
#优质博文 #前端 #WebGL #趣站
酷～
デジタルやインターネットの文化をテーマにしたバーチャル博物館 The Museum of Digital Influence - WebGL 総本山
酷～
デジタルやインターネットの文化をテーマにしたバーチャル博物館 The Museum of Digital Influence - WebGL 総本山
AI 摘要：介绍了一个名为 The Museum of Digital Influence 的虚拟博物馆，该博物馆通过 WebGL 技术构建，旨在展示数字媒体和互联网文化的演变。博物馆内容丰富，具有较高的资料价值，采用 AI 生成的缩略图和人工撰写的详细说明，用户可以通过滚动和点击进行浏览。
#碎碎念 #前端 #趣站 #动画 #demo
感觉在手机上加个陀螺仪的效果会更美妙更好玩儿，点子源源不断的冒出来了！（为什么我想到了陀螺仪因为之前做过类似的需求，ios 上陀螺仪权限得请求，加了陀螺仪就是那种很好玩儿的游戏了hhh）
₍˄·͈༝·͈˄*₎◞ ̑̑
https://fixupx.com/hellokaton/status/1910125154929357277
感觉在手机上加个陀螺仪的效果会更美妙更好玩儿，点子源源不断的冒出来了！（为什么我想到了陀螺仪因为之前做过类似的需求，ios 上陀螺仪权限得请求，加了陀螺仪就是那种很好玩儿的游戏了hhh）
₍˄·͈༝·͈˄*₎◞ ̑̑
katon (@hellokaton)：😎 听说你很懂 Web 渲染？
试试这个用 Three.js 和 Ammo.js 搞的 3D 物理引擎个人主页，
让你在浏览器里体验真实世界的碰撞和互动！
➤ 实时碰撞、互动，物理效果炸裂
➤ 光线投射，点哪打哪
➤ 移动端也能流畅运行
在线体验：https://0xfloyd.com
源码仓库：https://github.com/0xFloyd/Portfolio_2020
https://fixupx.com/hellokaton/status/1910125154929357277
#优质博文 #tools #工具推荐
1. Canva 如何建立图像搜索（英文） #搜索 #图像
本文介绍 Canva 公司如何使用向量嵌入，建立相似图片搜索。
下面是另外一篇类似的文章《基于 pgvector 和 Next.js 构建语义电影搜索》，也是使用向量嵌入。
2. 同一个 GitHub 用户如何用不同身份 SSH 登录（英文） #github #ssh
有时，同一个 GitHub 用户使用不同的 SSH 密钥，去登录不同的仓库。本文教你这时怎么写 SSH 配置文件。
3. Lightpanda #无头浏览器 #tools
轻量级的无头浏览器，可以接入 Playwright / Puppeteer，占用资源和执行速度号称是 Chrome 的十分之一。
4. changedetection.io
一个开源的服务，用来检测指定网页的某个部分是否发生变化。比如，网页上面的商品价格发生变化，它就会通知你。 【好多这种服务了 但是mark一下】
5. Voice-Pro #AI #语音
AI 语音工具，具有多种功能（语音识别、翻译、语音克隆、文本转语音），属于 Whisper 模型的 Web UI。
6. Hacker News Wrapped #趣站
该网站可以输入一个 Hacker News 论坛的用户名，它会用 DeepSeek 模型总结该用户的特点，描述非常准确而且传神。
7. GenSFX #AI #音效
免费的 AI 音效生成网站。
8. Beej 的 Git 指南（Beej's Guide to Git）
著名教程作者 Beej 的最新 Git 教程，基于他向大学学生的课堂讲义。
via #阮一峰的科技周刊 336
1. Canva 如何建立图像搜索（英文） #搜索 #图像
本文介绍 Canva 公司如何使用向量嵌入，建立相似图片搜索。
下面是另外一篇类似的文章《基于 pgvector 和 Next.js 构建语义电影搜索》，也是使用向量嵌入。
2. 同一个 GitHub 用户如何用不同身份 SSH 登录（英文） #github #ssh
有时，同一个 GitHub 用户使用不同的 SSH 密钥，去登录不同的仓库。本文教你这时怎么写 SSH 配置文件。
3. Lightpanda #无头浏览器 #tools
轻量级的无头浏览器，可以接入 Playwright / Puppeteer，占用资源和执行速度号称是 Chrome 的十分之一。
4. changedetection.io
一个开源的服务，用来检测指定网页的某个部分是否发生变化。比如，网页上面的商品价格发生变化，它就会通知你。 【好多这种服务了 但是mark一下】
5. Voice-Pro #AI #语音
AI 语音工具，具有多种功能（语音识别、翻译、语音克隆、文本转语音），属于 Whisper 模型的 Web UI。
6. Hacker News Wrapped #趣站
该网站可以输入一个 Hacker News 论坛的用户名，它会用 DeepSeek 模型总结该用户的特点，描述非常准确而且传神。
7. GenSFX #AI #音效
免费的 AI 音效生成网站。
8. Beej 的 Git 指南（Beej's Guide to Git）
著名教程作者 Beej 的最新 Git 教程，基于他向大学学生的课堂讲义。
via #阮一峰的科技周刊 336
#工具推荐 #astro #组件库 #开源 #趣站
Julian's Web Garden 是一个旨在构建现代、渐进性网站的开源工具集，利用Astro框架的优势。它提供了一套可重用的组件和工具配置，关注通用的网页模式和增强功能，支持HTML、CSS和JavaScript的最佳实践。该项目采用“岛屿架构”思想，允许使用最小化的代码和小型文件，避免传统UI框架的臃肿，同时支持动态JS小组件的插入，确保未来兼容性和代码的高效性。
我是在这里面发现了一个 astro-tooltips 试了一下挺好用的，网页也很好看。
https://code.juliancataldo.com/#julians-web-garden
Julian's Web Garden 是一个旨在构建现代、渐进性网站的开源工具集，利用Astro框架的优势。它提供了一套可重用的组件和工具配置，关注通用的网页模式和增强功能，支持HTML、CSS和JavaScript的最佳实践。该项目采用“岛屿架构”思想，允许使用最小化的代码和小型文件，避免传统UI框架的臃肿，同时支持动态JS小组件的插入，确保未来兼容性和代码的高效性。
我是在这里面发现了一个 astro-tooltips 试了一下挺好用的，网页也很好看。
https://code.juliancataldo.com/#julians-web-garden
Julian's Web Garden
Julian's Web Garden | Building blocks for making progressive and future-proof websites.
Components collection features Astro, HTML…
Components collection features Astro, HTML…
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 295 期）：巧妙的灯泡钟
1. 微信早期的消息收发架构（中文） 📓 本文是一篇简化的介绍，讲解微信刚刚建立时，怎么做到消息的收发。（@ryantang1991 投稿）
2. OPFS API 及工具介绍（中文） 📓 网页脚本如果要跟本地文件系统交互，是很不方便的。目前，浏览器有一个 OPFS API，为网页提供一个虚拟的本地文件系统，本文介绍它的用法。（@hughfenghen 投稿）
3. 如何用 CSP 防止 XSS 注入攻击（英文） 📓 本文讲解怎么使用浏览器的 CSP（内容安全策略），防止网页被 XSS （跨站点脚本注入攻击）。 #web安全
4. Superjson 🧰 安全地将JavaScript表达式序列化为JSON的超集，其中包括Dates、BigInts等。【完美修复了Next.js在 getServerSideProps 和 getInitialProps 中的序列化限制】 #nextjs
5. text2video 🧰 一个开源的文本转图文视频的软件。（@bravekingzhang 投稿） #AI
6. simple-mind-map（思绪思维导图） 🧰 一个开源的 Web 思维导图，试用 Demo。（@wanglin2 投稿）
7. Mist 🧰 这个工具可以在图片上面添加水印底纹，使得该图片无法再被 AI 模型作为训练材料。
8. 中国古代历史人物可视化 🧰 输入一个古代人物名（共收录52000+人物），就可以显示该人物的社会关系、亲戚关系和生平足迹图，上图是李白的生平足迹图，参见介绍文章。（@inspurer 投稿） #趣站
9. CSS 框架排名 🧰 这个网页按照 GitHub 的星星数量，为 CSS 框架排名。 #css
10. Lamucal 🧰 这个网站可以为任何歌曲生成和弦、节拍、歌词、旋律和标签，使用了 Hybrid-Net 模型。（@liufeigit 投稿)
11. Z2H 字贴 🧰 一个在线的字帖生成网站，支持中文和英文。（@liamwang 投稿）
科技爱好者周刊（第 295 期）：巧妙的灯泡钟
1. 微信早期的消息收发架构（中文） 📓 本文是一篇简化的介绍，讲解微信刚刚建立时，怎么做到消息的收发。（@ryantang1991 投稿）
2. OPFS API 及工具介绍（中文） 📓 网页脚本如果要跟本地文件系统交互，是很不方便的。目前，浏览器有一个 OPFS API，为网页提供一个虚拟的本地文件系统，本文介绍它的用法。（@hughfenghen 投稿）
3. 如何用 CSP 防止 XSS 注入攻击（英文） 📓 本文讲解怎么使用浏览器的 CSP（内容安全策略），防止网页被 XSS （跨站点脚本注入攻击）。 #web安全
4. Superjson 🧰 安全地将JavaScript表达式序列化为JSON的超集，其中包括Dates、BigInts等。【完美修复了Next.js在 getServerSideProps 和 getInitialProps 中的序列化限制】 #nextjs
5. text2video 🧰 一个开源的文本转图文视频的软件。（@bravekingzhang 投稿） #AI
6. simple-mind-map（思绪思维导图） 🧰 一个开源的 Web 思维导图，试用 Demo。（@wanglin2 投稿）
7. Mist 🧰 这个工具可以在图片上面添加水印底纹，使得该图片无法再被 AI 模型作为训练材料。
8. 中国古代历史人物可视化 🧰 输入一个古代人物名（共收录52000+人物），就可以显示该人物的社会关系、亲戚关系和生平足迹图，上图是李白的生平足迹图，参见介绍文章。（@inspurer 投稿） #趣站
9. CSS 框架排名 🧰 这个网页按照 GitHub 的星星数量，为 CSS 框架排名。 #css
10. Lamucal 🧰 这个网站可以为任何歌曲生成和弦、节拍、歌词、旋律和标签，使用了 Hybrid-Net 模型。（@liufeigit 投稿)
11. Z2H 字贴 🧰 一个在线的字帖生成网站，支持中文和英文。（@liamwang 投稿）
#碎碎念 #趣站 #webGL
提前体验小米 su7神里绫华冰系痛车（x）真牛啊
https://gamemcu.com/su7/
【让所有人都能上手体验小米SU7！-哔哩哔哩】 https://b23.tv/ohd8fix
提前体验小米 su7
https://gamemcu.com/su7/
【让所有人都能上手体验小米SU7！-哔哩哔哩】 https://b23.tv/ohd8fix
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 293 期）：一周是一年的2%
1. VS Code 的垂直 Tab 页（英文） 📓 本文介绍如何在 VS Code 编辑器里面，放置一个垂直的边栏，进行标签切换。
2. LapisCV 🧰 基于 Obsidian / Typora 编辑器的 Markdown 简历模板，可以导出 PDF 文件。（@YiNNx 投稿）
3. git-diff-view 🧰 一个 React/Vue 组件，用来显示 git diff 的结果，类似于 GitHub 的样式。
4. AI 时间线 🧰 一个有意思的网站，输入一个关键词，自动生成该词的时间线，上图是输入"github"的生成结果，它的代码仓库在 GitHub。（@zhugezifang 投稿） #趣站
5. Earthworm 🧰 一个开源的 Web 程序，通过连词造句的方式，经过不断重复练习英语，线上体验。（@cuixiaorui 投稿）#趣站
6. Riffusion 🧰 一个免费的 AI 工具，给出一段提示，它会生成相应的歌曲，并且是带有歌词、人声演唱的。 #AI
7. TypeScript 互动教程📓 通过一个个小练习，讲授 TypeScript 语法。#typescript
8. IP 信息查询合集 📓 这个仓库收集可以查询 IP 信息的免费网站。
科技爱好者周刊（第 293 期）：一周是一年的2%
1. VS Code 的垂直 Tab 页（英文） 📓 本文介绍如何在 VS Code 编辑器里面，放置一个垂直的边栏，进行标签切换。
2. LapisCV 🧰 基于 Obsidian / Typora 编辑器的 Markdown 简历模板，可以导出 PDF 文件。（@YiNNx 投稿）
3. git-diff-view 🧰 一个 React/Vue 组件，用来显示 git diff 的结果，类似于 GitHub 的样式。
4. AI 时间线 🧰 一个有意思的网站，输入一个关键词，自动生成该词的时间线，上图是输入"github"的生成结果，它的代码仓库在 GitHub。（@zhugezifang 投稿） #趣站
5. Earthworm 🧰 一个开源的 Web 程序，通过连词造句的方式，经过不断重复练习英语，线上体验。（@cuixiaorui 投稿）#趣站
6. Riffusion 🧰 一个免费的 AI 工具，给出一段提示，它会生成相应的歌曲，并且是带有歌词、人声演唱的。 #AI
7. TypeScript 互动教程📓 通过一个个小练习，讲授 TypeScript 语法。#typescript
8. IP 信息查询合集 📓 这个仓库收集可以查询 IP 信息的免费网站。
Weberdominik
Vertical tabs in Visual Studio Code
With vertical tabs it's possible to have an overview over much more open files. Here's how to get it in VS Code.
Drams Framer
赛博解压玩具网站 (x)
超解压且写实的按钮动画和音效（）
Product Hunt 链接：https://www.producthunt.com/posts/drams
