今天是我35岁的生日
想着好歹挑首歌翻唱来纪念一下
选了很多歌
最后还是放不下这首
于是就唱了

也将这首歌献给写出这首歌的人
愿这歌声 能让你坚强 朋友朋友好朋友

假如给你一张100万的支票，没有选题限制，你可以用这张支票和你的伙伴前往任何地方，结交来自世界各地的朋友，你会想去哪里？这一次我们的编导怀谷，拿上这100万带你走进百万支票系列的第一站——巴厘岛数字游民。如果你喜欢这期视频，请多多支持我们，并把视频分享给你的朋友们一起看看！

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