Levix 空间站 Weekly #7

#周报

https://levix.notion.site/Levix-Weekly-7-1e2383a712848068af05d7d004ede9bd?pvs=74

GridStack.js 是一个现代化的 TypeScript 库，用于快速构建交互式仪表板，支持拖拽、多列布局和响应式设计，兼容多种框架，包括 Angular、React、Vue 等。

#Tools #仪表盘

https://github.com/gridstack/gridstack.js

在 2022 至 2025 年间，React 和 Next.js 在多个雄心勃勃的 Web 项目中发挥了重要作用，助力团队在性能提升、服务器端渲染与客户端渲染的平衡、缓存与状态管理方案的优化以及开发人员和用户体验的改善等方面取得显著成果。通过分析 Vio、DoorDash、Preply、GeekyAnts 和 Inngest 等团队的实际案例，深入探讨了这些项目在生产环境中应用 React/Next.js 的先进技术和经验教训，并总结出一系列行业最佳实践。

Vio 是一个全球性的住宿预订平台，其团队在分析网站的 Core Web Vitals 时发现 Interaction to Next Paint (INP) 指标表现不佳，用户交互响应时间过长，远高于谷歌建议的 200ms“良好”阈值。为了改善这一状况，Vio 团队通过 Chrome DevTools 性能面板和 Lighthouse 进行了详细的性能分析，发现浏览器重排和重绘是主要瓶颈。他们通过代码分割和懒加载减少了初始 JavaScript 负载，实施了防抖和事件优化以减少主线程阻塞，并通过优化状态管理减少了不必要的组件重新渲染。最终，这些优化措施使 INP 从 380ms 降低到 175ms，初始 JavaScript 负载减少了 60%，用户体验显著提升。

DoorDash 是一家食品配送平台，其 Web 前端最初是一个基于客户端渲染 (CSR) 的单页 React 应用，存在加载速度慢、JavaScript 包体积庞大以及 SEO 效果差等问题。为了改善这些问题，DoorDash 团队逐步将页面迁移到 Next.js 的服务器端渲染 (SSR) 架构上。他们采用了逐页迁移的策略，通过 Next.js 的文件路由功能和“树 - 枝 - 叶”策略，优先优化顶级页面。此外，他们还通过自定义上下文 (AppContext) 解决了 SSR 和 CSR 状态管理的问题，确保组件能够在两种环境中无缝切换。最终，DoorDash 的关键页面加载速度提高了 12% 至 15%，Largest Contentful Paint (LCP) 在首页和店铺页面分别提高了 65% 和 67%，慢加载 URL 的比例减少了 95%。

Preply 是一个在线语言学习平台，其团队在 2024 年面临了一个紧迫的性能问题：两个关键页面的 INP 指标表现不佳，这不仅影响用户体验，还对 SEO 和广告转化率产生了负面影响。由于时间紧迫，Preply 的团队决定在现有的 Next.js Pages Router 架构内进行优化。他们通过详细的性能分析，识别并消除了多个性能瓶颈，例如重构慢速循环、去除不必要的重新渲染，并将大型函数拆分为异步块。同时，他们利用 React 18 的并发特性，通过 Suspense 边界实现了非关键 UI 部分的非阻塞加载，并使用 startTransition API 将低优先级的状态更新标记为可延迟，从而提高了页面的响应性。此外，Preply 还通过代码分割和懒加载减少了初始加载的 JavaScript 量，并优化了 CDN 缓存策略，确保静态资源和 API 响应能够快速加载。这些优化措施使 Preply 的目标页面 INP 指标达到了谷歌建议的 200ms“良好”阈值以下，页面响应速度显著提升，用户反馈页面交互更加流畅，预计每年可节省约 20 万美元的成本。

GeekyAnts 是一家提供软件开发和咨询服务的技术咨询公司，其团队在 2024 年决定对其内容丰富的企业网站进行性能优化，目标是提升用户体验并改善 SEO 排名。他们选择升级到 Next.js 13，并采用 React Server Components (RSC) 技术，以减少客户端工作量并加速页面渲染。在升级过程中，GeekyAnts 团队将大量 UI 渲染工作转移到服务器端，将不需要交互的组件转换为服务器组件，从而减少了客户端 JavaScript 的传输量和主线程执行时间。他们还重新组织了数据加载方式，将数据获取逻辑迁移到服务器端，并利用 Next.js 13 的自动代码分割、图像优化和流式 SSR 等功能进一步提升性能。最终，GeekyAnts 的网站在 Lighthouse/PageSpeed 中的健康评分达到了 90 分以上，所有 Core Web Vitals 指标均达到了最佳标准，页面加载速度大幅提升，用户体验更加流畅。

Inngest 是一个无服务器工作流平台，其团队在 2023 至 2024 年间对其前端进行了重大重构，从 Create React App + React Router 架构迁移到 Next.js 13 的 App Router。他们希望通过这一迁移改善性能、提升开发人员生产力和代码可维护性。在迁移过程中，Inngest 团队采用了静态预渲染和流式 SSR 技术，实现了页面的即时加载和数据的逐步加载，从而显著提升了用户体验。他们还利用 App Router 的嵌套路由功能，实现了全局状态（如筛选器）在不同页面之间的持久化，并通过将全局状态嵌入 URL 路径的方式解决了路由参数传递的问题。此外，他们还深入研究了 Next.js 的缓存机制，通过合理配置缓存策略，确保动态数据的新鲜度和快速加载。最终，Inngest 的新仪表板在加载速度和交互性能上都有了显著提升，同时开发人员的开发体验也得到了极大改善。

通过这些案例，我们可以总结出以下几点行业最佳实践：

1. 性能优化至关重要：优化 Core Web Vitals（如 LCP 和 INP）是提升用户体验和 SEO 排名的关键。通过服务器端渲染 (SSR) 和静态站点生成 (SSG) 提升初始加载速度，利用 React 18 的并发特性（如 Suspense 和 Transitions）改善交互响应速度，并通过代码分割和懒加载减少客户端 JavaScript 负载。

2. 合理平衡 SSR 和 CSR：根据页面需求灵活选择服务器端渲染和客户端渲染。SSR 适用于初始加载和 SEO 优化，而 CSR 则适用于需要快速交互的页面。通过渐进式水合和“岛屿”架构，仅在必要时对交互性组件进行客户端增强，从而实现两者的最佳结合。

3. 智能缓存策略：在 CDN、应用层和客户端实施多级缓存策略，以加速响应速度并减少服务器负载。利用 Next.js 的自动缓存功能和 React Query 等库，实现数据的高效缓存和更新，同时注意避免缓存数据过期导致的用户体验问题。

4. 简化状态管理：避免过度使用复杂的全局状态管理库（如 Redux），而是优先考虑 React 的内置状态管理功能和轻量级的第三方库（如 React Query 和 Zustand）。通过将更多状态管理工作转移到服务器端，减少客户端的状态管理负担。

5. 提升开发人员体验：利用 Next.js 的文件结构和约定简化项目开发流程，通过快速的开发工具（如 Turbopack）和 CI/CD 流程提高开发效率。同时，积极学习和应用 React/Next.js 的新特性和最佳实践，确保开发人员能够快速适应技术变化。

6. 注重无障碍设计：从设计阶段开始就将无障碍性纳入考虑范围，确保使用语义化的 HTML 和正确的 ARIA 属性，实现良好的键盘导航和焦点管理，并通过测试工具和真实用户反馈验证无障碍性。

7. 以用户体验为中心：通过优化加载速度、平滑导航和过渡以及确保跨设备一致性，提升用户体验。同时，关注用户反馈和行为数据，将技术优化与用户满意度提升紧密联系起来。

这些案例和最佳实践表明，通过合理利用 React 和 Next.js 的最新特性，并结合性能优化、智能缓存、简化状态管理和无障碍设计等策略，开发团队可以显著提升 Web 应用的性能、可维护性和用户体验。

#性能 #用户体验

https://largeapps.dev/case-studies/advanced/

线上传输 JSX

Dan Abramov 深入探讨了如何通过后端直接返回 JSX 数据来优化前端组件的数据获取方式，提出了一种将数据加载逻辑与组件紧密绑定的解决方案，旨在解决传统 REST API 在数据获取和组件渲染之间的脱节问题。

Dan 通过一个示例展示了传统前端组件获取数据的流程：前端组件通过 API 请求获取 JSON 数据，然后将这些数据作为 props 传递给子组件。然而，这种方式存在一些问题，例如数据获取逻辑分散在多个组件中，难以维护，且可能导致多次网络请求。Dan 提出了一种新的思路，即让后端 API 直接返回 JSX 数据，而不是传统的 JSON 数据。这样，后端就成为了前端组件的“父组件”，直接将数据以 JSX 的形式传递给前端组件，从而减少了前端的数据处理逻辑，提高了开发效率。

Dan 还讨论了 Model、View 和 ViewModel 的概念。Model 是数据的原始形态，View 是用户界面，而 ViewModel 是连接 Model 和 View 的中间层，它根据 View 的需求对 Model 进行转换和封装。在传统的 REST API 中，ViewModel 的概念往往被忽视，导致后端返回的数据与前端的需求不匹配。而通过后端返回 JSX 的方式，可以更好地将 ViewModel 的概念融入到开发流程中，使后端能够根据前端组件的需求直接生成 ViewModel。

Dan 进一步阐述了这种开发模式的优势。首先，它能够减少前端和后端之间的通信次数，因为后端可以直接返回完整的 JSX 数据，而不是让前端多次请求不同的资源。其次，这种方式使得后端能够更好地理解前端组件的需求，从而生成更加精准的 ViewModel。此外，它还能够提高代码的可维护性，因为数据加载逻辑和组件渲染逻辑紧密结合在一起，便于开发者进行调试和优化。

Dan 提到了 Backend For Frontend（BFF）的概念，这是一种在前端和后端之间添加的中间层，用于将后端的 REST API 转换为前端所需的 ViewModel。通过 BFF，开发者可以更好地控制数据的加载和转换过程，同时避免了对现有后端架构的大规模改动。BFF 可以根据前端的需求动态生成 ViewModel，并将其作为 JSON 数据返回给前端。这种方式不仅提高了开发效率，还能够更好地适应前端界面的变化。

在讨论如何实现后端返回 JSX 的过程中，Dan 提出了将后端逻辑封装为可复用的 ViewModel 函数的想法。这些函数可以根据前端组件的需求加载数据，并生成相应的 JSX 数据。通过这种方式，开发者可以构建一个树状的 ViewModel 结构，其中每个 ViewModel 函数都负责加载一部分数据，并将其传递给对应的前端组件。这种结构类似于 React 组件树，使得开发者可以在后端以类似编写 React 组件的方式编写数据加载逻辑。

Dan 还探讨了如何将后端的 ViewModel 函数与前端组件进行绑定。通过将 ViewModel 函数返回的 JSX 数据直接传递给前端组件，可以实现数据的自动绑定。这种方式不仅简化了前端的数据处理逻辑，还使得后端逻辑与前端组件之间的关系更加紧密。开发者可以通过直接在后端编写 JSX 来生成前端所需的组件树，从而实现前后端的无缝对接。

此外，Dan 提到了 React Server Components（RSC）的概念，这是一种将后端逻辑和前端组件紧密结合起来的技术。在 RSC 中，后端组件可以像前端组件一样编写，并且可以直接返回 JSX 数据。这些数据在传输到前端时会被序列化为 JSON 格式，然后在前端被反序列化并渲染为实际的组件。这种方式不仅提高了开发效率，还能够更好地利用服务器的计算能力，同时保持了前端的交互性。

最后，Dan 总结了这种开发模式的优点，包括减少了前端和后端之间的通信次数、提高了代码的可维护性、更好地适应前端界面的变化等。同时，Dan 也指出这种模式可能会带来一些挑战，例如需要开发者同时掌握前端和后端的开发技能，以及需要解决前后端模块系统之间的连接问题。尽管如此，Dan 认为这种开发模式具有很大的潜力，能够为现代 Web 开发带来新的思路和方法。

通过深入探讨后端返回 JSX 的开发模式，Dan 展示了如何通过将数据加载逻辑与前端组件紧密结合，提高开发效率和代码可维护性。这种模式不仅能够减少前端和后端之间的通信次数，还能够更好地适应前端界面的变化，为现代 Web 开发提供了一种新的思路和方法。

#JSX #性能 #BFF

https://overreacted.io/jsx-over-the-wire/

Claude 现在可以连接到你的世界

Anthropic 宣布推出 Integrations 功能，允许用户将应用程序和工具与 Claude 连接。同时，Claude 的 Research 能力得到扩展，新增高级模式，能够搜索网络、Google Workspace 以及用户连接的 Integrations，最长可在 45 分钟内生成包含引用的综合报告。此外，Claude的网络搜索功能已向所有付费用户开放。

#Claude #AI

https://www.anthropic.com/news/integrations

一行代码如何让你的 iPhone 变砖

通过单行代码导致 iPhone 系统崩溃（“变砖”）的 iOS 漏洞，该漏洞利用了 Darwin 通知机制的缺陷，作者通过创建测试应用 “EvilNotify” 和 “VeryEvilNotify” 成功触发了漏洞，并展示了其可能导致的多种系统异常行为，最终通过反复触发“恢复进行中”状态，使设备陷入无法正常使用的情况。

Apple 在 iOS 18.3 中修复了该漏洞，通过引入限制权限（com.apple.private.darwin-notification.restrict-post.<notification>），限制了敏感通知的发送权限。

#Apple #资讯

https://rambo.codes/posts/2025-04-24-how-a-single-line-of-code-could-brick-your-iphone

Microsoft 引入 Office “Startup Boost” 功能以提升启动速度

Microsoft 推出了一项名为 “Startup Boost” 的新功能，使 Office 应用（如 Word 和 Excel）在 Windows 启动时自动加载，从而加快这些应用的启动速度。然而，这一功能可能会导致系统启动时间变长，并占用更多系统资源。

该功能仅在具备至少 8GB 内存和 5GB 硬盘空间的 PC 上启用。它将首先应用于 Microsoft Word，并计划在未来扩展到其他 Office 应用。

一些用户对 Microsoft 选择在系统启动时加载 Office 而非优化 Office 应用本身效率的做法表示质疑。

#微软 #Office #资讯

https://www.pcworld.com/article/2651749/office-is-too-slow-so-microsoft-is-making-it-load-at-windows-startup.html

Johannes Vermeer's Girl with a Pearl Earring 1080 亿像素扫描

#资讯

https://www.hirox-europe.com/gigapixel/girl-with-a-pearl-earring/

Icônes，一个由 Iconify 提供支持的图标资源库，具备即时搜索功能，用户可以快速查找所需的图标。

#资源 #图标

https://icones.js.org/

在 AI 时代避免技能退化

Addy Osmani 深入探讨了 AI 编程助手对开发者技能的影响。随着 AI 的广泛使用，开发者在享受生产力提升的同时，也面临着技能退化的风险。AI 能够快速完成重复性任务，但过度依赖会导致开发者的基础技能逐渐丧失，例如停止阅读文档、调试能力下降、对代码理解的深度减少等。2025 年微软和卡内基梅隆大学的研究也表明，过度依赖 AI 工具会削弱人们的批判性思维和独立解决问题的能力。

技能退化的迹象包括调试能力下降，开发者直接将错误信息交给 AI 处理，而不是自己阅读堆栈跟踪或调试代码；盲目复制粘贴代码，使用 AI 生成的代码却不理解其工作原理；架构和系统设计能力减弱，习惯于用 AI 解决小问题，而忽视了对复杂系统设计的整体思考；以及记忆和回忆能力下降，由于 AI 自动补全代码，导致开发者对基本 API 调用或语言特性记忆模糊。

从长期来看，过度依赖 AI 可能导致开发者在面对新问题或紧急情况时无法独立解决，引发职业危机。在团队中，如果成员过度依赖 AI，可能导致知识传递和协作效率下降，资深工程师难以将经验传授给初级开发者。此外，过度依赖 AI 可能导致开发者无法发现 AI 生成代码中的错误，从而引入安全漏洞和质量问题。

为了避免这些问题，开发者需要正确使用 AI。首先，要保持“AI 卫生”，验证 AI 的输出，理解其代码逻辑，寻找潜在错误或边缘情况。其次，定期进行“无 AI 编码日”，强制自己手动解决问题，保持基础技能的熟练度。在求助 AI 之前，先尝试自己解决问题，锻炼独立思考能力。同时，将 AI 生成的代码视为同事的代码进行审查，确保团队对代码的理解和责任。通过与 AI 对话，深入了解其生成的解决方案，并尝试自己解释或优化。此外，记录频繁求助 AI 的问题，将其作为学习重点，逐步减少对 AI 的依赖。

AI 是强大的工具，但开发者应将其视为协作伙伴而非替代品。通过有意识地练习和挑战自己，开发者可以在享受 AI 提高效率的同时，保持对编程基础技能的掌握，确保在 AI 工具失效或遇到复杂问题时仍能独立解决问题。

#AI #思考 #编程

https://addyo.substack.com/p/avoiding-skill-atrophy-in-the-age

使用 NotebookLM 将昨天那篇《避免在 AI 时代技能退化》 变成播客，感兴趣的可以听一听。

#AI #播客

https://notebooklm.google.com/notebook/91523011-bbc5-4a1e-a005-d18a88f697c8/audio

Cassovia Code 团队的开发者 Tomáš Bencko 分享了其在一场名为 Vibe Jam 的活动中，利用人工智能技术开发一款类似《侠盗猎车：罪恶都市》的游戏的完整经历。

Vibe Coding 是一种新兴的软件开发方式，开发者无需手动编写代码，而是通过向人工智能下达指令来实现功能和解决问题，开发者的角色更多地转向设计、规划、明确指令以及质量评估。

Tomáš Bencko 选择开发一款 3D 游戏，以《侠盗猎车：罪恶都市》为灵感，简化为出租车驾驶任务。开发过程中，物理模型的实现成为最大挑战，AI 在理解物理世界、空间方向、轴向和方向上存在困难。例如，车轮旋转角度错误、车辆因操作不当“飞向太空”、车身与车轮速度不一致、高速转弯时车辆翻转等问题频发。经过四次从零开始的尝试，他最终成功构建了令人满意的驾驶模型和操控方式。

在技术细节方面，游戏基于 Three.js 和 Cannon-es 构建，运行在标准网页浏览器中，使用 Vite 进行构建，代码采用模块化、面向对象的方式。游戏地图由作者在 Adobe Illustrator 中设计蓝图后导入为 SVG 文件，并通过 Three.js 在线编辑器放置建筑和游戏资产。此外，AI 还用于开发脚本以实现游戏与编辑器之间的数据转换。

在音乐和音效方面，Tomáš 使用了 Suno AI 生成音乐，ElevenLabs 生成音效，AI 工具使得这些内容的生成和集成变得极为高效。尽管作者对音乐的期望很高，但 AI 生成的音乐和音效效果超出了预期，极大地增强了游戏的氛围。

然而，Tomáš 也指出 Vibe Coding 并非万能。尽管它在开发原型、概念验证、小型自动化脚本等“一次性”软件时表现出色，但在大型项目中，缺乏规划和代码监督会导致项目难以管理。AI 倾向于提供快速修复方案，而非从根本上解决问题。因此，经验丰富的开发者在使用 AI 工具时具有巨大价值，他们能够指出 AI 的不足并引导其找到更好的解决方案。AI 需要有人指导，理解项目的整体目标和用户需求。目前，AI 仍未承担起对结果的责任，这部分仍需开发者把控。

#AI #Vibe_Coding

https://cassoviacode.com/i-tried-vibe-coding-how-i-created-gta-with-artificial-intelligence/

Anthropic 团队发布了一份关于 AI 对软件开发影响的研究报告

Claude Code 的自动化使用率更高，其 79% 的对话被识别为自动化，即 AI 直接执行任务，而 Claude.ai 的自动化对话占比为 49%。这表明随着 AI 代理的普及，未来任务的自动化程度可能会进一步提高。其次，开发者常使用 AI 构建面向用户的应用程序，在数据集中，JavaScript 和 HTML 等 Web 开发语言是最常用的编程语言，用户界面和用户体验任务也是 AI 的主要编程用途之一。这暗示以开发简单应用程序和用户界面为中心的工作可能会比专注于后端工作的岗位更早受到 AI 系统的冲击。最后，初创公司是 Claude Code 的主要早期采用者，其 33% 的对话与初创公司相关工作有关，而企业相关应用仅占 13%。这显示出初创公司更倾向于使用尖端 AI 工具，而传统企业则相对滞后。

研究还发现，开发者与 Claude 的交互模式存在差异。在 Claude Code 上，自动化交互的子类型，如 “反馈循环”（AI 自主完成任务但需要人类验证）和 “指令式”（AI 在最少用户交互下完成任务）的交互比例远高于 Claude.ai。而在 Claude.ai 上，增强人类能力的交互类型，如 “学习”（用户从 AI 模型获取知识）的占比更高。

从编程语言的使用情况来看，JavaScript 和 TypeScript 占据了所有查询的 31%，HTML 和 CSS 占据了 28%，这些主要面向 Web 的开发语言在 AI 辅助编程中占据主导地位。后端开发语言如 Python 占据了 14% 的查询，但 Python 也常用于数据分析，因此其在后端开发中的实际占比可能更低。

此外，研究还发现，初创公司对 Claude Code 的采用率远高于企业，这可能是因为初创公司更灵活，能够更快地利用新技术获得竞争优势。而企业则可能由于安全性和合规性等问题，对新技术的采用更为谨慎。

尽管该研究提供了关于 AI 在软件开发中实际应用的见解，但也存在一些局限性。例如，研究仅分析了 Claude.ai 和 Claude Code 的数据，排除了其他可能具有不同模式的使用场景；对于自动化与增强的划分在像 Claude Code 这样的代理工具中变得模糊；对用户类型的分类基于有限的上下文信息，可能存在误分类的情况；数据集可能主要包含早期采用者，无法代表广泛的开发者群体；隐私考虑导致分析的数据窗口有限，可能遗漏了软件开发中的周期性模式；Claude 的使用情况可能无法完全代表整个 AI 编程辅助工具的采用情况；研究仅关注开发者委托给 AI 的任务，而未涉及 AI 输出在代码库中的最终使用情况、代码质量或生产力提升等问题。

展望未来，AI 正在根本性地改变开发者的工作方式，特别是在像 Claude Code 这样的专业代理系统中，这种变化在面向用户的应用程序开发工作中尤为显著，并且可能为初创公司提供了相对于传统企业的竞争优势。随着 AI 能力的不断进步，开发者是否会继续参与 AI 的反馈循环，还是会逐渐转向更多地管理和指导 AI 系统，以及哪些软件开发角色将发生最大变化，甚至可能完全消失，这些问题都值得进一步探讨。此外，AI 在编程中的应用能力提升也可能对 AI 开发本身产生重大影响，因为 AI 研究和开发高度依赖软件，AI 辅助编程的进步可能会加速 AI 技术的突破，形成一个正向的循环。

#AI #Claude #软件开发

https://www.anthropic.com/research/impact-software-development

Cursor 免费向学生开放。

#Cursor #AI

https://x.com/cursor_ai/status/1919846420234031146?s=46&t=Egk_JeNH7VpTJDgz1k_q5w

健康学习到150岁 - 人体系统调优不完全指南

项目的核心内容围绕人体的多个系统展开，包括睡眠、饮食、心态与动力、学习与专注以及长寿等方面。在睡眠方面，强调了生物钟的重要性以及光照对生物钟的调节作用，建议通过接触自然光照和控制夜间光源来优化睡眠质量。饮食方面，项目着重介绍了间歇性禁食（fasting）的概念及其对健康的益处，如促进肝脏健康、提升新陈代谢、控制体重等，并推荐了地中海饮食结构作为更易坚持且健康的饮食模式。

在心态与动力部分，探讨了多巴胺系统对人类行为和情绪的影响，提出了通过间歇性奖励机制和成长型思维来维持健康多巴胺水平的方法。学习与专注方面，项目基于神经科学原理，解释了学习的本质是神经元的重新连接，并通过犯错信号来激活神经可塑性，从而促进学习效率的提升。此外，还介绍了如何通过呼吸技巧和身体运动来提升专注力。

关于长寿，项目引用了哈佛大学 David Sinclair 教授的研究，探讨了衰老的本质以及抗衰老手段，如基因信息的维护、细胞重编程技术以及通过药物和饮食控制来延长寿命的可能性。Sinclair 教授自身也进行了多年的实践，通过限制进食窗口、摄入特定补充剂和定期锻炼等方式，成功将自身的生理年龄维持在较低水平。

zijie0 团队在项目中还分享了个人实践经验和工具推荐，例如尝试 8 小时进食窗口的 fasting、使用特定的补充剂（如 Omega-3 EPA 鱼油、二甲双胍等）、保持规律运动以及利用专注模式软件来提高工作效率等。这些实践方法和工具为读者提供了可操作的参考，帮助他们在日常生活中实施健康优化策略。

该项目不仅提供了丰富的理论知识，还结合了实际操作建议，使读者能够在理解科学原理的基础上，逐步调整生活方式，以达到提升健康水平、延缓衰老的目的。

#健康

https://github.com/zijie0/HumanSystemOptimization

Node.js 24.0.0发布，由 RafaelGSS 和 juanarbol 主导。此版本带来多项重大更新，包括 V8 JavaScript 引擎升级至 13.6 版本，npm 升级至 11 版本，移除对 MSVC 的支持，改为要求使用 ClangCL 在 Windows 上编译 Node.js，AsyncLocalStorage 默认使用 AsyncContextFrame，URLPattern 作为全局变量提供，以及权限模型的改进等。这些更新推动了平台的进一步发展。

V8 13.6 版本引入了多个新的 JavaScript 特性，如 Float16Array、显式资源管理、RegExp.escape、WebAssembly Memory64 和 Error.isError 等。npm 11 版本则带来了性能提升、安全功能增强以及与现代 JavaScript 包的更好兼容性。AsyncLocalStorage 默认使用 AsyncContextFrame，为异步上下文跟踪提供了更高效的实现，提升了性能并使 API 在高级用例中更加稳健。URLPattern 作为全局变量，使得无需显式导入即可使用，为 URL 模式匹配提供了强大的系统。

权限模型的改进体现在，Node.js 20 中引入的实验性权限模型的标志从 --experimental-permission 变更为 `--permission`，表明其稳定性提高并准备更广泛地被采用。测试运行器模块也进行了增强，现在会自动等待子测试完成，无需手动等待测试承诺，使编写测试更加直观，减少了因未处理的承诺而产生的常见错误。

此外，Node.js 24 还包含了 Undici 7 版本，带来了 HTTP 客户端能力的多项改进，包括更好的性能和对更新的 HTTP 特性的支持。在弃用和移除方面，`url.parse()` 被标记为运行时弃用，建议使用 WHATWG URL API 替代；`tls.createSecurePair` 被移除；`SlowBuffer` 被标记为运行时弃用；REPL 实例化时未使用 new 的用法被弃用；Zlib 类未使用 new 的用法被弃用；child_process 中 spawn 和 execFile 的 args 参数传递被弃用。

Node.js 24.0.0 版本还包含了许多其他改进和修复，涉及多个模块和工具。例如，esm 模块支持了 import.meta 属性的正式发布，worker 模块新增了 worker.getHeapStatistics() 方法，util 模块新增了 types.isFloat16Array() 方法，test_runner 模块增加了全局设置和拆卸功能等。这些更新进一步提升了 Node.js 的性能、安全性和易用性，为开发者提供了更强大的工具来构建和维护现代 JavaScript 应用程序。

#NodeJs #新特性

https://nodejs.org/en/blog/release/v24.0.0

NPM 生态系统正遭受一场精心策划的恶意软件攻击

Socket 研究团队指出 NPM 生态系统正遭受一场精心策划的恶意软件攻击，攻击者通过发布数十个伪装成知名 Python、Java、C++、.NET 和 Node.js 库的恶意 NPM 包，利用开发者对多语言编程的熟悉度，诱使他们安装这些看似熟悉的包。这些恶意包包含混淆代码，旨在绕过安全措施、执行恶意脚本、窃取敏感数据并在受影响系统中保持持久性。尽管这些包的维护者不同，但分析发现它们共享相同的基础设施、使用相同的混淆有效载荷，并且都指向同一个 IP 地址 8[.]152[.]163[.]60，该 IP 地址位于中国北京地区，与阿里巴巴云（新加坡）私人有限公司有关。

攻击者采用了跨生态系统仿冒的手段，利用其他包生态系统中熟悉的名称来欺骗开发者。例如，将 Python 的 BeautifulSoup4 伪装成 beautifulsoup4，Java 的 Apache HttpClient 伪装成 apache-httpclient，.NET 的 OpenTK 伪装成 opentk，以及 Python 的 Seaborn 伪装成 seaborn 等。攻击者的意图是利用多语言开发者可能在错误的生态系统中安装熟悉名称的库，或者诱骗 CI/CD 系统自动安装这些包，进而窃取安装或使用过程中的机密、令牌和环境数据。

这些恶意包的典型行为包括：在安装时通过 postinstall 钩子执行混淆的 main.js 载荷、向硬编码的 IP 地址发送信标、收集宿主元数据、尝试窃取凭据或外泄环境数据等。具体而言，恶意代码通过数组和数字操作进行混淆，以减缓静态分析工具的检测速度；通过网络获取并执行任意代码，使包成为远程访问特洛伊木马；收集环境变量（可能包含机密、API 密钥和凭据）并将其发送到攻击者控制的服务器；在某些包中，还存在模仿已知恶意软件模式的 Discord 令牌窃取逻辑；此外，部分包还尝试通过安装远程 Shell 脚本实现持久性或横向移动。

报告还列出了与此次攻击活动相关的完整恶意包清单，每个包都链接到其在 Socket 的分析页面，展示了 main.js 文件和行为摘要。为应对此类威胁，Socket 团队建议开发者审计近期的依赖项，使用 Socket.dev 获取实时安全洞察，通过代理注册表或白名单策略阻止可疑包，并对开发者进行仿冒和包伪装识别的培训。

#安全 #漏洞 #前端

https://socket.dev/blog/npm-targeted-by-malware-campaign-mimicking-familiar-library-names

npm 应该从新软件包中删除默认许可证（ISC）

extremq 认为 npm 在初始化新包时默认设置为 ISC 许可证是不合理的，甚至可能是危险的。npm 是 JavaScript 编程语言的包管理器，由 npm, Inc. 维护，是 Node.js 的默认包管理器。软件工程师需要了解不同类型的许可证以及如何使用它们，因为许可证决定了开发者在项目中使用这些包时的权利和义务，例如是否可以商业化使用、是否需要提供源代码、是否需要提供归属权等。

当开发者使用 npm init 命令初始化一个新包时，npm 默认将许可证设置为 ISC，但并不会告知开发者关于 ISC 许可证的具体信息，甚至没有提供如何不使用许可证的选项。这可能导致开发者在不知情的情况下发布了带有 ISC 许可证的包，而他们可能并不了解该许可证的含义。例如，开发者可能会在意识到自己并未真正选择许可证后，将其更改为与 ISC 不兼容的许可证，如 GPL，这可能会引发法律纠纷。因为法院可能会将此解释为开发者最初意图使用 GPL，从而使得所有使用了 ISC 许可证的用户面临被起诉的风险；或者法院可能会认为开发者最初发布的版本永远受 ISC 许可证的约束，而用户可以不受 GPL 限制地使用该版本。

此外，还有开发者表示自己本不想为项目添加许可证，却因为 npm 默认设置为 ISC，导致项目被他人修改并添加了 ISC 许可证，这使得开发者原本未受保护的代码（如通过代码生成的像素艺术精灵）被错误地授权为开源。这种默认设置不仅给开发者带来了困扰，还可能引发版权问题。

extremq 指出，其他包管理器如 Rust 的 cargo 和 Python 的 PyPi 并不会在创建包时默认添加许可证，而是让用户自行选择。在 GitHub 上选择许可证时，也没有默认选项，而是提供了一份常见许可证的列表，并附有免责声明和许可证的完整内容。此外，extremq 还提到，未明确指定许可证的代码与使用了 “Unlicense” 许可证的代码是不同的。未指定许可证的代码属于版权所有者，未经版权所有者明确许可，其他人不能修改或分发；而 “Unlicense” 许可证则是将代码置于公有领域。extremq 认为，npm 默认设置为 ISC 许可证的做法是不合理的，甚至可能在法律上无效。

#npm

https://extremq.com/npm-should-remove-the-default-license-from-new-packages-isc/

mono-jsx 是一个由 ije 团队开发的 JSX 运行时，能够将 <html> 元素渲染为 JavaScript 运行时（如 Node.js、Deno、Bun、Cloudflare Workers 等）中的 Response 对象。它具有以下特点：无需构建步骤，轻量级（8KB 压缩后），零依赖，支持完整的 Web API TypeScript 定义，提供流式渲染，并且能够与 htmx 集成，适用于多种运行环境。

#JSX #前端

https://github.com/ije/mono-jsx

Mastra 是一个由 Gatsby 团队推出的 TypeScript AI 框架，旨在帮助开发者使用现代化的 JavaScript 技术栈快速原型化并生产化 AI 功能。该框架提供了丰富的功能模块，包括智能代理（agents）、工作流（workflows）、检索增强生成（RAG）以及运维（ops）等功能，支持开发者构建具备长期记忆、工具调用以及复杂任务执行能力的智能代理。

在智能代理方面，Mastra 提供了统一的 API 接口，支持开发者通过简单配置创建具备特定功能的代理。例如，开发者可以定义一个“厨师代理”，为其设置角色描述、使用特定的 AI 模型以及工作流。该框架还支持在代理中集成记忆功能，使其能够结合长期记忆和近期消息进行更准确的响应。

工作流模块是 Mastra 的核心功能之一，它基于图状态机设计，支持复杂的 LLM 操作序列执行。开发者可以通过简单的语义实现分支、链式调用、合并以及条件执行等操作。此外，工作流还支持暂停和恢复执行、实时状态监控等功能，方便开发者在长时间运行的任务中进行人工干预或实时跟踪。

在 RAG 领域，Mastra 提供了统一的向量存储接口，支持开发者将数据从 SaaS 工具同步或从网络抓取后嵌入知识库，并通过嵌入、查询和重排等操作为代理提供上下文信息。该模块还支持元数据过滤功能，允许开发者通过来源、时间范围或其他属性缩小搜索范围。

运维模块则为开发者提供了强大的工具，用于跟踪每个工作流步骤的输入和输出，监控代理的工具调用和决策过程。此外，该模块还支持性能指标测量、评估以及 OpenTelemetry 追踪功能，帮助开发者快速调试和监控应用性能。

Mastra 还提供了丰富的示例项目和社区支持，例如 NotebookLLM 克隆项目、多代理音乐生成系统 AI Beat Laboratory 以及多代理 AI 旅行规划项目等。这些项目展示了 Mastra 在不同应用场景中的强大功能和灵活性。此外，Mastra 的 CLI 工具设计精美，支持云部署，为开发者提供了便捷的开发体验。

#AI #Agents

https://mastra.ai/