AI 摘要：Cursor 1.0 版本于 2025 年 6 月 4 日发布，带来了多项重要更新，包括 BugBot 自动代码审查、Background Agent 对所有用户开放、Jupyter 笔记本支持、Memories 功能 beta 版、MCP 一键安装及 OAuth 支持、聊天响应可视化功能，以及全新的设置和仪表板界面。文章详细介绍了这些新功能的特性、使用方法及对开发者的影响，旨在提升代码编辑和团队协作的效率。

• BugBot 自动代码审查：
• 功能：自动审查 PRs，检测潜在 bug 和问题，并在 GitHub 上留下评论。
• 操作：点击“Fix in Cursor”可返回编辑器并获取预填提示以解决问题。
• 设置：参考 BugBot 文档进行配置。
• Background Agent 对所有用户开放：
• 背景：Background Agent 作为远程编码代理，早期测试反馈积极。
• 可用性：所有用户可通过聊天中的云图标或 Cmd/Ctrl+E 快捷键使用（隐私模式关闭用户）。
• 未来计划：隐私模式用户即将获得启用方式。
• Jupyter 笔记本中的 Agent 支持：
• 功能：Cursor 现可在 Jupyter 笔记本中直接创建和编辑多个单元，显著提升研究和数据科学任务效率。
• 限制：初期仅支持 Sonnet 模型。
• Memories 功能（Beta 版）：
• 功能：Cursor 可记住对话中的事实并在未来引用，按项目存储个人记忆。
• 管理：通过“设置 → 规则”启用和管理。
• MCP 一键安装及 OAuth 支持：
• 功能：一键设置 MCP 服务器，并通过 OAuth 简化认证。
• 资源：官方 MCP 服务器列表可在 docs.cursor.com/tools 查看。
• 开发者支持：可在文档和 README 中添加“Add to Cursor”按钮，生成方式见 docs.cursor.com/deeplinks。**
• 更丰富的聊天响应：
• 功能：聊天中可渲染可视化内容，如 Mermaid 图表和 Markdown 表格。
• 新设置和仪表板：
• 更新：设置和仪表板界面优化。
• 功能：个人或团队使用分析、显示名称更新、按工具或模型分类的详细统计。
• 其他改进：
• 快捷键：Cmd/Ctrl+E 打开 Background Agent 控制面板。
• 功能提升：@Link 和网络搜索可解析 PDF 并纳入上下文；设置中新增网络诊断；并行工具调用加速响应；聊天中工具调用可折叠。
• 账户管理：企业用户仅限稳定版本；团队管理员可禁用隐私模式；提供 Admin API 获取使用数据和支出信息。
• 模型更新：Gemini 2.5 Flash 现支持 Max 模式。

Cursor

Changelog - Jun 4, 2025 | Cursor - The AI Code Editor | Cursor - The AI Code Editor

Cursor 1.0 brings Bugbot for code review, a first look at memories, one-click MCP setup, Jupyter support, and general availability of Background Agent.

AI 摘要：本文详细介绍了 WebGL 性能优化的多种方法，涵盖了从性能瓶颈的识别到具体的技术实现，旨在帮助开发者提升 WebGL 应用的渲染效率。文章从 CPU 和 GPU 的性能测试入手，探讨了纹理优化、绘制调用减少、Shader 逻辑优化、三角形数量削减、内存传输优化等多个方面，提供了大量实用技巧和具体案例，适合对 WebGL 性能优化感兴趣的前端开发者深入学习。

• 性能瓶颈识别与测试
• 介绍了如何通过降低 CPU 或 GPU 的时钟频率来测试性能瓶颈，帮助开发者定位问题根源。
• 纹理优化
• 建议减少 canvas 尺寸或使用低分辨率纹理来测试纹理受限问题。
• 纹理过滤模式中，gl.NEAREST 速度最快但效果块状，gl.LINEAR 因取平均值而模糊。
• 推荐使用 Mip 映射技术优化纹理贴图效果。
• 纹理长宽建议为 2 的幂，采用纹理压缩（如 ETC 格式）减少数据量，使用 PBO 提升纹理上传速度，以及通过纹理合成减少加载次数。
• 上下文与 Program 管理
• 讨论了 WebGL 上下文丢失的处理方法。
• 建议避免频繁切换 Program，减少在 Shader 中使用 if-else 语句，因其会破坏 GPU 的并行计算（Wavefront 机制）。
• 绘制调用优化
• 使用 drawElements() 的 gl.TRIANGLE_STRIP 结合退化三角形，比 drawArrays() 的 gl.TRIANGLES 更节省内存。
• 减少 drawArrays() 和 drawElements() 调用次数，避免从 GPU 读回数据（如 gl.getError()、gl.readPixels()），以优化流水线性能。
• 使用 WebGL Inspector 工具查找冗余调用，减少状态变更操作（如 gl.enable()）。
• 顶点与模型优化
• 顶点数据按数组顺序组织，避免乱序以提高缓存命中率。
• 使用 LOD（细节层次）技术简化模型，根据距离动态调整细节。
• Shader 逻辑优化
• 避免在 Shader 中使用逻辑判断（如 if-else），因其破坏 GPU 并行度；提供替代方案，如使用 step 函数优化逻辑表达。
• 三角形数量优化
• 通过空间分割（如八叉树、四叉树）剔除不可见物体。
• 使用遮挡检测技术（如硬件遮挡查询）避免渲染被遮挡物体。
• 动态调整三角形数量（如 LOD 技术）。
• 使用 GL_TRIANGLE_FAN 或 GL_TRIANGLE_STRIP 替代 GL_TRIANGLES 以重用顶点。
• 采用 glDrawElements 的索引方式减少三角形数量。
• 内存传输优化
• 尽可能使用 VBO/VAO 减少数据传输。
• 在 OpenGL ES 3.0/WebGL 2.0 中利用 Transform Feedback 进行 GPU 通用计算。
• 通过批次合并和 Instance 特性优化多物体渲染效率。

AI 摘要：本文是《Frontend Focus》第 695 期（2025 年 6 月 4 日）的摘要，涵盖了前端开发的最新动态、技术教程和工具资源。文章重点介绍了 OKLCH 颜色生态系统及其工具、CSS 新功能（如 if() 函数和 reading-flow 属性）、Web 平台状态更新以及多个实用工具和教程，内容涉及 HTML 对话框样式优化、浏览器自动化工具、AI 在 Web 开发中的应用等，旨在为前端开发者提供前沿技术资讯和实用资源。

• OKLCH 颜色生态系统与工具 - 详细介绍了 OKLCH 颜色模型的优势，浏览器支持情况良好，并推荐了相关工具和最佳实践。还提到了一场题为《Programmable Colors: Bridging Design and Code》的相关演讲，值得观看。
• WebStatus.dev 更新：更丰富的数据与洞察 - 开源的 Web 平台状态网站新增了功能覆盖范围、使用时间线、移动端数据等更新，帮助开发者查询和跟踪各类 Web 功能在不同浏览器中的兼容性。
• CSS if() 函数与 reading-flow 属性（Chrome 137） - 展示了 CSS if() 函数的强大功能（目前仅在 Chrome 和 Edge 中可用）以及 reading-flow 属性的应用，附带简单直观的演示。额外推荐了 CSS Tricks 上关于 reading-flow 和 reading-order 的深入文章。
• Rachel Andrew 总结了 Web 平台的最新变化和重要新增功能 - 包括 if() 函数、Web Push 等
• [Astro 生态系统的最新动态](https://astro.build/blog/whats-new-may-2025
• Browser Company 停止开发 Arc 的原因说明
• IE6、AI 与 Web 浏览的未来：RL Nabors 开启新系列，探讨 AI 如何改变 Web，提出“Chrome 是下一个 IE6”的观点，分析 Google 偏离 Web 标准可能导致浏览器停滞。
• Smooothy：流畅、可扩展的滑块/轮播组件，包括键盘控制、视差、速度的自定义，以及 React 和 Vue 的实现。
• MiNi PhotoEditor：一款带有特效、滤镜和裁剪功能的在线 WebGL 照片编辑器  #webgl
• Bits UI：无头 Svelte 组件库 #组件库 #svelte
• 字体生成器 ：使用 Unicode 字符生成精美文本 ——输入一些文本，此工具将生成无数纯 Unicode 格式的精美字体，供您复制粘贴。示例：𝔽𝕣𝕠𝕟𝕥𝕖𝕟𝕕 𝔽𝕠𝕔𝕦𝕤、snɔoℲ puǝʇuoɹℲ、F͜͡r͜͡o͜͡n͜͡t͜͡e͜͡n͜͡d͜͡ F͜͡o͜͡c͜͡u͜͡s͜͡ 等等。不过，务必注意可访问性以及某些设备（例如屏幕阅读器）的处理方式。

evilmartians.com

Exploring the OKLCH ecosystem and its tools—Martian Chronicles, Evil Martians’ team blog

Explore a powerful set of tools built around the OKLCH color model—Harmonizer for accessible palettes, Polychrom for Figma contrast checking, apcach for color contrast calculations, and more. Perfect for frontend developers and designers building consistent…

使用 RAFA3L 的这款互动笔，体验“立方体照片库实验”。待在房间里，照片会慢慢铺满整个房间，然后点击任意一张图片即可全屏观看。

pjkarlik 分享了一个能根据一天中的时间改变颜色的奇妙 WebGL 时钟。“我脑子里一直在想这个，想做一个时钟着色器。数学运算有点乱，而且为了让表盘正常工作，在时间上还需要一些技巧性的逻辑"。

AI 摘要：本文详细介绍了在 Node.js 应用中使用 Pino 进行生产级日志记录的全面指南。Pino 作为一种高效且快速的日志库，以其 JSON 格式输出和与现代可观测性平台的兼容性而著称。文章涵盖了 Pino 的核心功能、日志级别管理、字段自定义、上下文日志记录、序列化器和敏感数据处理、日志路由以及与 Node.js 框架和 OpenTelemetry 的集成方法。

• 引言：介绍了 Pino 自 2014 年以来的广泛应用，强调其高性能和灵活配置，Fastify 框架默认使用的日志工具。提供了安装和基本使用示例，展示了 JSON 格式输出和通过 pino-pretty 美化日志。
• Pino 日志级别：详细说明了 Pino 支持的标准日志级别（trace, debug, info, warn, error, fatal）及其对应的数值表示，默认级别为 info，并提供了通过环境变量调整日志级别的方法。
• 自定义日志级别输出：展示了如何将数值级别格式化为字符串输出，并提到后续与 OpenTelemetry 日志数据模型的集成。
• 调整 Pino 默认日志字段：介绍了如何修改默认日志字段（如时间格式、字段重命名），以及通过 formatters 自定义绑定字段（pid, hostname）或添加全局元数据（如应用版本）。
• 捕获事件和错误详情：讲解了上下文日志记录的重要性，展示了如何在 HTTP 请求中添加详细信息，并符合 OpenTelemetry 语义约定；同时介绍了如何记录 Node.js 错误及其堆栈信息。
• 使用 Pino 序列化器塑造日志：介绍了序列化器的功能，用于转换日志对象中的特定属性，包括内置序列化器（err, req, res）和自定义序列化器的创建方法。
• 敏感数据的编辑或移除：提供了使用 redact 选项自动审查或移除日志中敏感数据（如密码、信用卡信息）的方法，并支持自定义审查内容或完全移除字段。
• 使用 Pino 传输路由日志：讲解了如何通过 transport 功能将日志输出到文件或多个目标（如控制台、文件、OTLP 端点），并提及同步日志和支持的传输生态。
• 与 Node.js 框架集成：展示了 Pino 在 Fastify（默认集成，支持请求上下文追踪）和 Express（通过 pino-http 中间件）中的使用方法，包括自动日志记录和自定义配置。
• 与 OpenTelemetry 集成：介绍了通过 pino-opentelemetry-transport 将 Pino 日志转换为 OpenTelemetry 格式并发送到 OTLP 端点，支持与分布式追踪的相关性，并解决语义约定问题。

Dash0

Production-Grade Logging in Node.js with Pino · Dash0

This article explores Pinos core features integration with popular Nodejs frameworks and setting up a productiongrade logging pipeline with OpenTelemetry

AI 摘要： 本文详细介绍了如何使用 Node.js 和 Llama Stack 实现 AI 应用程序的安全机制（guardrails）。作为系列文章的第三部分，文章重点探讨了 Llama Stack 内置的安全工具 LlamaGuard 和 PromptGuard 的功能、设置和使用方法，旨在确保大型语言模型（LLM）在应用范围内的回答安全、准确且无偏见。通过具体的代码示例和配置步骤，作者展示了如何在 Node.js 环境中设置和运行 Llama Stack，并结合守卫机制过滤不安全内容和防止绕过安全措施的尝试。此外，文章还讨论了安全机制在节省 GPU 资源方面的额外优势。

1. 什么是守卫机制（Guardrails）？
• 守卫机制是大型语言模型（LLM）的安全措施，确保模型仅回答应用范围内的问题，并提供准确、无偏见的回答。
• 应用示例：防止保险报价应用中回答违法问题，或避免在保险审批中对某些群体产生偏见。
• Llama Stack 提供内置守卫机制，并支持注册自定义守卫提供者。

2. 内置守卫机制
• LlamaGuard：用于人类与 AI 对话，识别不安全内容（如暴力犯罪、性犯罪、仇恨、自残等 13 类内容），过滤人类问题和模型回答。
• PromptGuard：防御绕过安全机制的尝试（如“越狱”），与 LlamaGuard 互补，提升整体安全水平。

3. 设置 Llama Stack
• 描述了如何通过容器快速启动 Llama Stack 实例，使用 Ollama 服务大型语言模型。
• 提供了启动脚本，包含模型选择（如 Llama-3.1-8B-Instruct）和安全模型配置。

4. 运行 Llama Stack 实例
• 详细说明了容器配置和运行步骤，包括修改 run.yaml 文件以启用 PromptGuard。
• 解决 CPU 环境下运行 PromptGuard 的问题，通过修改容器代码实现支持。

5. 结合 Node.js 使用 LlamaGuard 和 PromptGuard
• 提供了代码示例，包括注册 LlamaGuard 和 PromptGuard 模型、配置护盾（shields）、手动运行护盾检测输入输出内容。
• 使用 Agent API 自动应用护盾，测试问题如“如何制作假文件”，展示了护盾如何阻止不安全内容的回答。
• 对比了护盾开启和关闭时的响应差异，验证了护盾的有效性。

6. 安全之外的额外优势
• 护盾不仅提升安全性，还能减少 GPU 资源浪费，因为护盾能快速拒绝不适合回答的问题，而无需模型耗费时间处理。

Red Hat Developer

Implement AI safeguards with Node.js and Llama Stack | Red Hat Developer

With Llama Stack being released earlier this year, we decided to look at how to implement key aspects of an AI application with Node.js and Llama Stack. In this post, we will discuss AI safety and

AI 摘要： 本期 Node Weekly 聚焦 Node.js 生态系统的最新动态与工具，涵盖了 PHP 与 Node.js 的集成、AI 技术在开发中的应用、以及多个实用工具和库的更新。文章详细介绍了 php-node 模块如何实现 PHP 应用在 Node 环境中的运行、多个 Node.js 相关工具如 ESLint、Bun 的新功能。此外，还包括了 JavaScript 领域的最新资讯，如 TC39 提案进展和 Temporal API 的潜力。

1. 简讯
• php-node：PHP 与 Node.js 的新型集成：介绍 php-node 作为 Node 的原生模块，允许在 Node 环境中运行 PHP 应用。应用场景：迁移遗留 PHP 应用、构建 PHP/JS 混合应用，或在 Node 应用中调用 PHP 功能（如 WordPress 集成）
• Joyee Cheung 分享关于 Node 中 CommonJS 与 ESM 桥接的演讲幻灯片。
• OpenJS 基金会现在是其旗下 40 多个 JavaScript 项目的 CNA，包括 ESLint、Express 和 Electron。
• SQLite-JS 扩展允许使用 JavaScript 编写自定义 SQLite 函数。
• DigitalOcean 推出 Node 驱动的 MCP 服务器，支持通过 AI 代理（如 Claude）管理托管应用。
2. 技术文章与教程
• 使用 Node.js 和 Llama Stack 实施 AI 保障措施： Llama Stack 是 Meta 用于在 Node、Python、Swift 或 Kotlin 中构建 AI 应用程序的框架。
• 在 Express 中管理功能标志 (Trunker)：介绍 Trunker 作为 Express 中间件，用于实现功能标志管理。
• 使用可选链编写更可靠的 JavaScript：讲解可选链的使用及其优势。
• 构建 Linux Electron 应用：讨论 Electron 跨平台特性及 Linux 平台特定问题。
• Node.js 生产级日志记录 (Pino)：介绍使用 Pino 进行高效日志记录。
3. 代码与工具
• qnm：CLI 工具，方便探索 node_modules，提供模糊搜索及空间占用分析功能。【感觉还是 antfu/node-modules-inspector 香】
• Zigar：在 Node 和 Electron 项目中使用 Zig（C/C++ 超集）代码。
• 🤖 OpenAI 客户端 5.x：从 Node 使用 OpenAI 模型 ——OpenAI 官方 JavaScript 库的最新版本，适用于其各种 API，现已支持其所有最新模型和实时 API（ v5.0 更新日志 ）。支持 Deno 和 Bun。
• Opossum 8.5：异步函数断路器，支持超时及错误阈值设置。
• Beachpatrol：CLI 工具，基于 Playwright 实现浏览器自动化，支持 macOS 和 Linux。作者：Sebastian Carlos。
• 其他工具更新：包括 ESLint v9.28.0（增强 TypeScript 支持）、Bun v1.2.15（新增安全审计工具）、Ink 6.0（支持 React 19）、pdf2html 4.0（用 Apache Tika 和 PDFBox 将 PDF 转换为 HTML）
4. JavaScript 领域动态
• TC39 第 108 次会议：多项提案进展，如 Seeded Pseudo-Random Numbers 进入 Stage 2，Error.isError 进入 Stage 4。
• Stack Overflow 年度开发者调查开启第 15 年。
• 探讨即将推出的 Temporal API，如何解决 JavaScript 中日期和时间处理问题。
• Sean Gillespie 正在思考高效 monorepo 的要素。

Platformatic Blog

Seamlessly Blend PHP with Node.js

@platformatic/php-node integrates PHP into Node.js apps for a unified developer experience

AI 摘要：本文介绍了 Photoshop 最新发布的 Android 应用，在 Beta 测试阶段所有功能均免费开放，为用户提供了桌面级图像编辑体验，集成了 AI 驱动的创意工具，并针对移动端进行了优化，适合从新手到专业用户的多样化创作需求。文章还详细说明了设备要求、功能亮点及获取方式，提醒用户未来部分高级功能可能转为订阅制。

小众软件

Photoshop 发布 Android 应用，测试期间所有功能全免费 - 小众软件

在今年2月份推出 iOS 版本客户端之后，Photoshop 终于发布了 Android 应用，并且测试期间全免费。@Appinn

Ana Tudor 🐯🖤🌻 (@anatudor)：Made a little thing on
@CodePen: pure #CSS scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe is always clockwise, regardless of scroll direction and how the text fades in after the swipe.

Inspiration https://x.com/avanderpotte/status/1923382432784412771 (via @codrops)

AI 摘要：本文详细介绍了如何在 Next.js 应用中导入和使用 SVG 文件，探讨了多种方法及其优缺点，旨在帮助开发者在 2025 年的技术环境中更高效地处理 SVG 资源。文章从基础导入方式到高级优化技术，提供了全面的指南，特别指出了使用 next/image 组件的局限性，例如无法直接设置 SVG 的填充颜色等问题，并给出了相应的解决方案。

LogRocket Blog

How to import SVGs into your Next.js apps: A 2025 guide - LogRocket Blog

This article explores the different methods you can use to import and use SVGs in a Next.js application.

AI 摘要：本文由 Amit Sheen 撰写，详细介绍了如何使用 CSS 和少量 JavaScript 创建一个交互式的聚光灯效果（Spotlight Effect）。该效果通过鼠标位置驱动 CSS 自定义属性，结合背景渐变、滤镜和混合模式等技术，实现动态、流畅的视觉交互。文章从基础设置开始，逐步深入到复杂的“粘性”效果、图案设计、移动端适配以及主题切换等内容，旨在启发开发者探索 CSS 的创意潜力，同时注重用户体验和无障碍访问。

Asuka小能猫 (@AsukaOdysseus)：李飞飞团队开源了可商用的高斯喷溅web渲染器。
gaussian splatting 是目前3d场景重建最前沿的方法，效果好、速度快、只需要图片就能重建，去年开始大火，学术界机器人/自动驾驶/世界模型/视频生成都有很多应用。
国内在这块的application级别的应用几乎是空白。

sparkjs.dev

An advanced 3D Gaussian Splatting renderer for THREE.js

这个项目已经 Vibe 了 9K 行了，是时候重构一波了。
现在连 Live photo 都支持了。
https://github.com/Innei/photo-gallery

🧵 Thread • FixupX

拾一.ens18 (@__oQuery)

这个项目已经 Vibe 了 9K 行了，是时候重构一波了。

现在连 Live photo 都支持了。

https://github.com/Innei/photo-gallery

AI 摘要：本文介绍了从 Chrome 138 版本开始，Chrome 扩展中用户脚本（chrome.userScripts API）的启用方式发生了变化，旨在增强安全性和提供更精细的用户控制。过去依赖全局开发者模式开关的方式存在安全风险、功能过载和企业管理难题，现在转变为逐个扩展的“允许用户脚本”开关，用户可以在扩展详情页单独控制每个扩展的用户脚本权限。这一更新基于开发者社区的反馈，旨在提升安全性和用户体验，同时为管理员提供了新的管理策略。

Chrome for Developers

Enabling chrome.userScripts in Chrome Extensions is changing  |  Blog  |  Chrome for Developers

We are making a series of changes to the chrome.userScripts API.