#优质博文 #前端 #javascript #新动态
我们真用 p5（
JavaScript Weekly #733

AI 摘要：本期 JavaScript Weekly 聚焦 p5.js 2.0 发布、React 新特性、Node.js 安全事件等热点，涵盖工具更新、技术文章与行业动态。核心内容包括创意编码库升级、React 实验性功能、Deno/Node 生态进展，以及 DuckDB-WASM 的趣味实验等。

1. 行业动态与更新
• Jet Propulsion Laboratory 团队远程修复 150 亿英里外的 Voyager 1 探测器故障
• p5.js 2.0 发布
• 新增字体支持、文本操作增强、JavaScript 着色器编写功能。
• 提供在线编辑器，适合快速创建交互式视觉项目（如 AI 生成的 JS Logo 故障艺术）。
• 团队展望未来发展方向。
• React 重大更新
• React Compiler 进入 RC 阶段。
• 实验性功能：View Transitions（视图过渡）和 <Activity> 组件。 #react
• 生态动态
• SolidJS：创始人回顾项目十年历程
• Node.js：披露 CI 安全事件细节
• Deno 2.3：即将发布，近期优化详情

2. 工具与版本发布
• 包管理：pnpm 10.9 支持 JSR 包安装。
• 引擎工具：jsvu 3.0 支持多版本 JavaScript 引擎管理。
• Bun v1.2.10、Node.js v22.15.0 (LTS)、Next.js 15.4 Canary、ESLint v9.25.1......

3. 技术文章
• 创意开发：Jhey Tompkins 实现 3D 翻牌显示器效果 #demo
• 趣味实验：Patrick Trainer 用 DuckDB-WASM 通过 SQL 生成 3D 图形

4. 工具与库推荐
• JavaScript Font Picker：支持系统字体与 Google Fonts 的字体选择器
• Scala.js 1.19.0：Scala 转 JavaScript 编译器

YouTube

How We Diagnosed and Fixed the 2023 Voyager 1 Anomaly from 15 Billion Miles Away

David Cummings (JPL) presents "How We Diagnosed and Fixed the 2023 Voyager 1 Anomaly from 15 Billion Miles Away" for FSW Workshop 2025 hosted by Stoke Space at UW Seattle, WA, March 2025.

刚才手机打字没说太多，现在补上
其实冰箱这种典型白色家电小米进场之后大杀特杀，更印证了行业事实上没有任何壁垒的观点。这种奢饰品品牌做的冰箱，与最便宜的1300的双开门使用上没有任何区别，只是多了两个溢价的点，制冰机和活动的门。

冰箱这个品类本身还有它的特性：所有冰箱的结构都完全一致。现在的冰箱都是风冷，压缩机、换热、塑料/泡沫门和板隔热，加上一个外壳。简单到随便一个小厂都能做，只是品控会有差异。而小厂只要良心一些，上个好的压缩机，使用起来也不会有区别。150L的小冰箱，和600L的大冰箱，功耗上也不会有区别，因为压缩机功率都是50W-100W区间，对压缩机功率的需求并不会随着体积线性增长（实际上是随着表面积近似线性增长。但由于隔热层本身占空间，所以600L冰箱表面积可能只比200L冰箱高50%）。甚至一个50L的半导体冰箱，耗电量比600L对开门还高。

所以推荐各位选购冰箱的时候，直接选购风冷的，越大越好，只要放得下。租房搬家就另外说，我觉得为了更好的生活体验还是划得来的。
我们这个冰箱进门就很极限，我把房门拆了才拿的进来，一般人还真不好搞定。这个冰箱设计也不是做嵌入式的，现在嵌入式冰箱开门需要的空间会比这款小很多（门打开的行程不需要左右两侧额外空间），而且厚度也会薄很多，还便宜。
然后卖家他们自己新房子换冰箱就买了小米超薄嵌入款（

#优质博文
在知乎，分享你新编的故事
https://fixupx.com/iamcheyan/status/1915999776522539044

FixupX

徹言 (@iamcheyan)

说到知乎，就不得不提如今的「知乎盐选故事」了。
这是一场让人又爱又恨，但确实给知乎赚到钱了的变革。
我来讲讲这背后的故事吧。

1
2019年，我已经和朋友在做出版了。
有天，朋友介绍了知乎的一个内容负责人，希望合作一些内容。

当时知乎开设了电子书频道，我的书也上架了，但销售情况非常差。
那时候的做法是：
把电子书的内容拆开，用知乎的官方账号发到一个个回答下面，引流到电子书销售页。

我就问，已有的电子书内容不是在用了么？
但对方表示，他们希望能我们拿出一点新东西。
比如根据知乎用户提出的问题，创作适合平台传播的文本。…

#碎碎念 感觉小红书 AI 真的整挺好的，他的总结好评差评都有，点进去就能看，作为参考挺好的，不管是排雷还是想去。比如有些店点进去一看就知道是软文还是真实评价🥰

#碎碎念
突然感觉自己这个人还挺别扭的，对任何别人的项目宣传推广等都很包容很愿意帮忙推广，但是自己的 Side Project 永远觉得还不够好还远不是能推广的程度，严重害怕意外流量，只敢窝在自己的一亩三分地发给亲近的人看，但是看到有人用也会很开心，也许应该做出改变？是不是其实很多人都这样？

有这样的担忧一方面是觉得好像没人用就没有压力，另一方面也没有自己更新的动力 23333

严重害怕意外流量是真的，这几天发的招聘贴流量好大我都觉得很害怕。

（不过很多时候项目自己用的很开心也就够啦，只是时常会有感觉写的还行，“如果推广一下会不会有需要的人看得到呢” 的感觉）

不过话又说回来我好像不把 B 站当成一个可以推广项目的地方，在上面发的基本是全是日常生活游戏和手工，大学的时候还发过课设大作业演示之类的，现在完全没想法发硬核内容（意识到我对 B 站的使用好像有点太日常了hhhh）

欸~有机会的话也想改变一下试试看~其实还是有不少想分享的东西的

#优质博文 #css #前端
很有趣的感觉？
The Lost CSS Tricks of Cohost.org | CSS-Tricks

AI 摘要：文章回顾了已关闭的社交平台 Cohost.org 上用户利用其宽松的 HTML/CSS 支持创造的独特“CSS 犯罪”技巧，重点介绍了通过 <details> 元素和 SVG 动画实现的交互设计黑科技，展现了该社区在有限技术条件下的创造力。

1. Cohost.org 的背景与关闭
• 成立于 2022 年 6 月，定位为反主流设计的无广告、按时间线排序的社交平台，支持 HTML 子集。
• 2024 年 9 月因资金和团队倦怠关闭，存档于 Wayback Machine。

2. CSS Crimes 的诞生
• 用户利用宽松的 HTML 过滤机制（允许内联 CSS）创造交互内容，如诗歌、复古网页复刻和迷你游戏。
• 核心技巧：通过 <details> 和 calc() 实现“宽度 hacking”（Width-hacking），编码多状态逻辑（如组合锁、游戏关卡）。

3. Width-hacking 技术详解
• 原理：利用 <details> 展开时父容器宽度变化，通过 inline-flex 和绝对定位计算组合状态（如 1px + 4px = 5px 对应特定按钮组合）。
• 应用示例：隐藏消息通过 calc() 和 overflow: hidden 控制，仅当容器宽度匹配目标值时显示。

4. SVG 动画进阶技巧
• 动态样式：SVG 内嵌 <style> 和媒体查询，根据父容器尺寸改变元素属性（如颜色、缩放）。
• 动画实现：添加 CSS transition 并配合“虚拟动画”元素绕过浏览器兼容性问题。
• 案例：结合宽度黑客与 SVG 媒体查询，实现平滑过渡的“秘密消息”效果。

5. 其他资源与总结
• 推荐延伸阅读：YellowAfterlife 的技巧合集 和 rebane2001 的回顾视频
• 作者表达对 Cohost 社区的怀念，强调其独特的创意氛围。

author CSS-Tricks Blackle Mori

CSS-Tricks

The Lost CSS Tricks of Cohost.org | CSS-Tricks

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

#优质博文 #DX
看看大家中了几条......不过我一直觉得团队项目里的可读性非常重要，哪怕有些时候看起来相对会丑陋一些，需要经常地进行自查和自我反思。

”你是那种囤积有用信息，让别人挣扎或重新发明轮子的类型吗？你是否做出了你认为很聪明，但只有你自己理解的决定？是时候问问自己了：“这真的是最好的做事方式吗？其他人可以进来并立即了解发生了什么吗？这种反思可以帮助您更加了解自己的习惯，并为更深思熟虑和更容易获得的解决方案打开大门。“

“很多这种无意的虐待狂都隐藏在善意的背后。它披着“最佳实践”、“简洁架构”或“现代工具”的外衣。但是，当你把它剥开来看，它往往只是伪装的技术债务。
这些借口可以而且会让你放慢脚步。它们使代码更难更改、更难修复和更难信任。真正的问题是，没有人认为他们在编写代码时编写了糟糕的代码。这就是陷阱。”

“我们还有很多罪可以指出来，但我会把这些留到另一天。现在，考虑最后一个例子：我曾经认识一个开发人员，他设置了如此严格的 CI 检查，以至于他甚至无法合并自己的拉取请求。他一定是觉得看着团队转圈圈很搞笑。剧透警告：没有人在笑。”

Am I a Sadistic Developer? Are You?

AI 摘要：本文探讨了“开发者虐待狂”（Developer Sadism）现象，即开发者无意识地编写复杂、难以维护或过度设计的代码，导致团队效率下降和士气受损。作者通过个人经历和行业观察，分析了这一现象的成因、表现及后果，并提出了改善建议，强调代码应具备可读性、实用性和同理心。

1. 引言
• 作者因被同事评价代码“虐待狂式”而反思开发者行为，提出“开发者虐待狂”概念，即故意或无意编写难以理解的代码。

2. 并非所有代码都同等重要
• 作者解释实验性代码（如 CodePen 测试）的复杂性是学习过程的一部分，但真正的“虐待狂”行为体现在生产代码中，如过度设计或缺乏同理心的工具设计。

3. 开发者虐待狂的“七宗罪”
• 过度工程化：为追求架构完美牺牲实用性，导致代码难以维护。
• 盲目追逐潮流：滥用新工具或库，忽视项目实际需求。
• 工具滥用：过度依赖特定工具（如 React Router 或 Flexbox），即使不适用。
• 哲学极端化：过度追求编程范式（如函数式编程），忽视代码可读性。
• 懒惰命名：使用模糊的变量名（如 a 或 doit()）或无效的错误提示。
• 复杂逻辑：如深层嵌套的三元表达式，降低可读性。
• 严苛流程：如设置过于严格的 CI 检查，阻碍团队协作。

4. 后果
• 技术债务伪装：以“最佳实践”为名的过度设计最终拖累项目。
• 人力成本：导致团队倦怠、效率下降和创造力枯竭。

5. 改进建议
• 自我审查习惯：定期反思代码是否易于他人理解。
• 同理心设计：考虑开发者与用户的体验，优化文档和错误提示。
• 容错设计：提供“撤销”选项或试运行功能，减少错误惩罚。
• 持续反馈：邀请他人审查代码，发现潜在问题。
• 投资开发者体验（DX）：完善文档和示例，提升团队效率。

6. 结论
• 呼吁开发者避免“虐待狂”行为，通过小步骤改进代码可读性和协作性，营造健康的开发环境。

author Amit Sheen

Frontend Masters

Am I a Sadistic Developer? Are You?

Sadistic, as in I purposefully wrote the code this way to make things harder for myself. Coding in a way that no typical developer would ever write on purpose.

cosine - 前端人の日常频道

#碎碎念 #AI 突然有感而发，我对 AI 摘要、总结内容之类的态度是用来后期检索和回忆的，所以在有内容的同时准确性不那么重要，应该不会有人摘要完了就不读原文吧，除非不感兴趣的文章。（因为看到好像有人很反感 AI 摘要总结之类的） 并且我写东西也是，只要发出去了别人随便怎么造都行（心态好像不太正确）

#优质博文 #AI #碎碎念
请不要对我发动量子波动速读

感觉在原作者博客底下评论 AI 摘要是很坏的行为.....再次强调一下我发的所有 AI 摘要目的还是方便后期 @cosSearchBot 检索回忆，因为咱的记忆真的挺容易磨损的，每一篇我都是仔细看完再发的。

#优质博文 #操作系统
操作系统内置应用的进化思考 - 少数派

AI 摘要：本文系统梳理了操作系统内置应用从命令行工具到图形界面应用，再到云端服务和 AI 驱动的演变历程，揭示了其如何随技术范式、用户习惯和生态战略不断重塑，并展望了未来 AI 与云端深度融合下「无形化」的操作系统体验。

author StephenFang（少数派）

少数派 - 高品质数字消费指南

操作系统内置应用的进化思考 - 少数派

未来的内置应用是完全被 AI 代理所取代，还是会迎来新的形态？

#优质博文 #react #前端 #新动态
React Status #426

AI 摘要：本期 React Status 聚焦 React Compiler 进入 RC 阶段，介绍了 Dan Abramov 关于 "Impossible Components" 的深度解析，以及多项工具更新（如 React Three Map 1.0、ChartDB 等）。同时涵盖社区动态（如 RedwoodJS 拆分计划）和 JavaScript 生态新闻（如 pnpm 10.9 发布）。

1. 社区动态
• React Compiler 进入候选版本阶段，计划未来几个月正式发布。
• 该团队还一直与 swc 项目合作，本次版本包含实验性的 swc 支持。
• RedwoodJS 拆分为 Redwood GraphQL 和 RedwoodSDK，后者推出新主页。
• React Router 安全漏洞修复（Remix 2.16.3 / React Router 7.4.1）。
• pnpm 10.9 支持 JSR 包安装。
• Microsoft Edge 团队增强提案：建议增强 console.context() 方法， 以便通过视觉调整和过滤机制使其对开发人员更有用。

2. 工具与库更新
• React Lite YouTube Embed 2.5：更快速、隐私友好的 YouTube 视频嵌入方案。
• Next.js 15.4 Canary 多个测试版发布。
• React 组件更新：包括 json-edit-react（JSON 编辑器）、React Spinners（加载动画）、React Suite（组件库）和 React Uploady（文件上传工具）。

3. 博文与工具
• 📄Dan Abramov 探讨 "Impossible Components"（混合仅限服务端和仅限客户端特性的组件的所谓“不可能”组件），通过 React Server Components 实现解决方案。
• 关联阅读：Darius Cepulis 旧文《React 19 lets you write impossible components》
• 📄 在 React 应用中为受保护的路由自动执行 Cypress E2E 测试 Emeka Okoli
• 📄 2025 年基于 React 的静态站点生成器比较 Morel、Radakovic 和 Dwivedi
• 📄 如何在 RedwoodSDK 中使用 React 服务器函数流 Herman Stander
• 📄 使用 Vercel 的 AI SDK Robin Wieruch 构建全栈 AI 聊天
• Frimousse：轻量级无样式 React Emoji 选择器。 #组件库
• Spectacle：创建流畅的 React 演示文稿
• React Three Map 1.0：将 3D 对象带入 2D 地图。React Three Fiber  与 react-map-gl 之间的桥梁，很酷。 Demo
• ChartDB：开源数据库架构图编辑器，大学生课设最爱，支持 Postgres、MySQL、SQL Server、SQLite 等数据库，使用 React 构建，可自部署，在线演示

react.dev

React Compiler RC – React

The library for web and native user interfaces

#优质博文 #AI #MCP
在 Docker 沙箱中运行 MCP Server

AI 摘要：本文介绍了 MCP 协议的安全风险及其解决方案 MCP Proxy。文章详细列举了近年来 NPM 和 PyPI 上的供应链攻击事件，强调了通过 Docker 运行 MCP Server 的 MCP Proxy 项目，以降低安全风险并支持移动端调用。

author 面条实验室

miantiao.me

面条实验室

折腾些什么玩意

#优质博文 #前端 #新动态
Frontend Focus #689 — April 23, 2025

AI 摘要：本期 Frontend Focus 涵盖前端领域多项重要动态：Google 宣布放弃移除 Chrome 第三方 Cookie 的计划，转而维持现有隐私设置；AG Grid 推广其高性能数据网格库；WebGL 渐变技术解析；此外还包括浏览器市场动态、前端工具更新（如 Polypane 24 和 Tailwind Trainer）、PWA 离线图像上传方案、CSS 预处理替代方案探讨，以及 AI 与可访问性的未来等深度文章。

1. 社区动态
• Chrome 隐私策略调整：Google 终止移除第三方 Cookie 的计划，用户仍需通过隐私设置手动管理。 #草

“ 考虑到所有这些因素，我们决定保持目前在 Chrome 中为用户提供第三方 cookie 选择的方法， 并且不会为第三方 Cookie 推出新的独立提示。用户可以继续在 Chrome 的隐私和安全 设置中选择最适合自己的选项。

• 谷歌可能被迫出售 Chrome， 猜猜谁想买? OpenAI。[Source]
• TLS 证书有效期将缩短至 47 天（2029 年起）。
• 从今天到 2026 年 3 月 15 日，TLS 证书最长生命周期为 398 天。
• 自 2026 年 3 月 15 日起，TLS 证书最长生命周期为 200 天。
• 自 2027 年 3 月 15 日起，TLS 证书最长生命周期为 100 天。
• 自 2029 年 3 月 15 日起，TLS 证书最长生命周期为 47 天。
• Web 开发引擎 Toddle 更名为 Nordcraft 并发布 1.0 版本。
• Heydon 的 Web 辅助功能高级指导原则集现已提供新增多语言版本（法语、日语等）。

2. 博文与工具
• AI is the Future of Accessibility：Karl Groves 通过汽车工业发展的类比，批判了当前无障碍设计领域对 AI 技术的消极态度，呼吁行业积极拥抱技术变革而非抵制。 #无障碍
• 网站“键盘导航”的真正含义：了解为什么能够使用键盘浏览我们的网站很重要，如何测试您当前的设置，并最终改进它。
• 构建离线友好的图像上传系统：利用 IndexedDB 和 Service Worker 提升弱网环境可靠性。
• Tailwind Trainer：通过游戏学习 Tailwind CSS 语法。 #tailwind #游戏
• Astro Font：自动优化字体的 Astro 插件，支持自定义字体、本地字体、任何 CDN 上的字体和 Google 字体的优化。
• Symbl：轻松搜索、复制和使用 HTML 符号、表情符号等。
• Markdown to Slides：将 Markdown 转换为 PDF/PPTX 幻灯片的在线工具。
• CSS Hell：挑战性 CSS 谜题游戏（仅限桌面端）。 答案

GitHub

css-hell/solutions.md at main · marcos-acosta/css-hell

Contribute to marcos-acosta/css-hell development by creating an account on GitHub.

#demo #前端 #动画 #codepen #css
好爽！这个滚起来真解压吧～
文本圆圈动画（仅限 CSS ）

Stijn Van Minnebruggen 使用旧的 CSS 重新创建了 David Faure 为 Codrops 制作的 Three.js 动画。滚动以转动单词之轮，并观察字母对滚动速度和长度的反应。

原理上大致是通过 @property 定义自定义变量控制旋转，使用 animation-timeline: scroll() 将动画与页面滚动绑定。单词均匀分布在圆周上，每个字母根据滚动速度计算位移和旋转值，并应用不同延迟创造瀑布效应。

#优质博文 #前端 #node #新动态
🤖 Node Weekly #575

AI 摘要：本期 Node Weekly 聚焦 Node.js 性能优化、安全警告及工具生态更新，涵盖 V8 垃圾回收调优、Node.js 在恶意软件中的滥用风险、LTS 版本发布，以及机器学习框架 node-mlx 等新工具。同时讨论了 JavaScript 生态的 TC39 提案动态和 VS Code 的 AI 增强功能。

1. 博文与工具
• Matteo Collina 分享 使用 V8 GC 优化优化 Node 性能：高内存占用未必是内存泄漏，详解 GC 工作原理及针对不同场景的调优方法。
• 由 Node 的核心模块提供支持的无依赖命令行应用程序（Liran Tal）。
• JavaScript 中的 Float16Array 类型解析（Trevor I. Lasn）。 #javascript
• 2025 年 Node.js 可观测性工具对比（Lizz Parody）。
• 📄 When to Use map() vs. forEach() (Matt Smith)
• 🤖 node-mlx 0.4：基于 Apple MLX 的 Node.js 机器学习框架（zcbenz）。
• Repomix：将代码库转换为 AI 友好格式（XML/MD 等）的 Node.js 工具。 #AI

2. 安全警告与版本更新
• 微软报告 Node.js 被广泛用于传播恶意软件，分析攻击案例及技术细节。
• Node v20.19.1 (LTS)：依赖项升级为主的小幅更新，建议优先使用 Node 22 'Jod'。
• 工具链更新：pnpm 10.9（支持 JSR 包）、Fastify 5.3.2、zx 8.5.3 等。
• WebStorm 2025.1：支持 AI、Angular、monorepo 和 Next.js 的 IDE 更新。

3. JavaScript 生态动态（注：有重复不过还是写一下）
• TC39 撤回 "Records and Tuples" 提案，但推进枚举（enum）提案。
• Firefox 139 默认启用 Temporal API。
• Hako 引擎：基于 QuickJS 的 WebAssembly 编译型 JavaScript 运行时。
• VS Code "Agent Mode" 强化 Copilot 的 AI 编程辅助能力。

Platformatic Blog

Boost Node.js with V8 GC Optimization

Optimize Node.js with V8 GC tuning. Adjust Young Generation size for better efficiency in memory-constrained environments

#碎碎念 #优质视频 #摄影 #course
【影视飓风】只看8节课，用iPhone拍出电影感
49 支持了一下，挺好的，适合我这种摄影小白 🥰