#开源 #tools #前端 #react #富文本编辑器
BlockNote 0.33：一个“类 Notion”的块状文本编辑器 — 基于 ProseMirror 和 TipTap 的编辑器，允许你拖放块、添加实时协作、AI 功能、可定制的“斜杠命令”菜单等。有很多实例可以体验。

BlockNote 是一个开源的基于 React 的块式富文本编辑器，风格类似于 Notion，具备高度可扩展性，构建于 Prosemirror 和 Tiptap 之上。它为开发者提供了开箱即用的现代化文本编辑体验，支持动画、拖放块、嵌套缩进、斜杠菜单、格式化菜单以及实时协作等功能。BlockNote 提供了完整的 UI 组件（基于 Mantine），也支持自定义 UI 或不使用 React 的核心库，适合嵌入到各种应用中。此外，它遵循 MPL 2.0 许可证，允许商业使用，并鼓励社区贡献。

GitHub

GitHub - TypeCellOS/BlockNote: A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror…

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap. - TypeCellOS/BlockNote

#优质博文 #AI #MCP #设计
Guide to the Dev Mode MCP Server

AI 摘要：本文详细介绍了 Figma 的 Dev Mode MCP Server（目前处于开放测试阶段）的功能、使用方法和最佳实践。Dev Mode MCP Server 通过 Model Context Protocol 提供了一个标准接口，使 AI 代理能够与 Figma 设计文件交互，直接将设计转化为代码，并提取设计上下文和组件信息。文章涵盖了如何启用服务器、配置客户端、提示工具使用以及优化设计文件和提示以获得更好的代码生成效果，旨在帮助开发者和设计团队更高效地进行设计到代码的工作流程。

功能与适用范围：
• Dev Mode MCP Server 目前为开放测试版，适用于 Professional、Organization 和 Enterprise 计划的 Dev 或 Full 座位用户。
• 需使用支持 MCP Servers 的代码编辑器（如 VS Code、Cursor、Windsurf、Claude Code）以及 Figma 桌面应用。
• 主要功能包括从 Figma 帧生成代码、提取设计上下文（如变量、组件、布局数据）以及通过 Code Connect 提高代码输出质量和一致性。

使用步骤：
• 步骤 1：启用 MCP Server - 在 Figma 桌面应用中通过 Preferences 启用 Dev Mode MCP Server，服务器本地运行于 http://127.0.0.1:3845/sse 。
• 步骤 2：设置 MCP 客户端 - 根据不同代码编辑器（如 VS Code、Cursor、Windsurf、Claude）配置 MCP 服务器连接，涉及在设置中添加服务器 URL 并确保连接成功。
• 步骤 3：提示 MCP 客户端 - 通过选择 Figma 中的帧或层，或使用链接，提供设计上下文给 AI 客户端，并通过提示生成代码或提取信息。

工具与用法建议：
• get_code - 用于生成代码，支持 React + Tailwind 默认输出，可通过提示自定义框架（如 Vue、HTML+CSS、iOS）或使用特定组件。
• get_variable_defs - 返回所选内容中使用的变量和样式（如颜色、间距、字体），帮助生成代码时引用设计令牌。
• get_code_connect_map - 提供 Figma 节点 ID 与代码库中对应组件的映射，确保设计到代码的无缝转换。
• get_image - 截取所选内容的屏幕截图以保留布局保真度，可在设置中启用或使用占位符。

Dev Mode MCP Server 设置：
• 提供额外的偏好设置，如启用 get_image 工具、使用占位符、启用 Code Connect 以重用代码库组件。

MCP 最佳实践：
• 结构化 Figma 文件 - 使用组件、变量、语义化命名、自动布局和注解以提供清晰的设计意图，确保生成的代码一致且符合设计系统。
• 编写有效的提示 - 清晰的提示可指导 AI 输出符合框架、文件结构或特定路径的代码，示例包括指定框架（如 SwiftUI、Chakra UI）或组件路径。
• 触发特定工具 - 如结果不理想，可在提示中明确指定工具（如 get_code 或 get_variable_defs ）以获取更准确的上下文。
• 添加自定义规则 - 设置项目级指导规则（如布局优先级、文件组织、命名模式）以保持输出一致性，减少重复提示。
• 分解大型选择 - 将大屏幕拆分为小组件或逻辑块以提高生成速度和可靠性，避免上下文过多导致的错误或不完整响应。

注意事项：
• 由于处于测试阶段，功能和设置可能不完整，可能遇到 bug 或性能问题。
• 用户可通过 Figma 内的反馈表单提供意见，帮助改进功能。

author Figma 官方文档

Figma Learn - Help Center

Guide to the Dev Mode MCP Server

🚧 The Dev Mode MCP Server is currently in open beta. Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta p...

#优质博文 #AI
这个真有用，试了（ mac 有效
也可以设置别的 hook。
Claude Code 任务完成提醒设置教程 (Hook)

AI 摘要：本文详细介绍了如何通过 Claude Code 的 Hook 功能设置任务完成后的声音提醒，帮助用户及时获知 AI 编程任务的完成状态，避免时间浪费。文章以 macOS 为例，提供了具体的配置文件编辑方法和注意事项，同时引用了官方文档以供深入了解 Hook 的多种参数和应用场景。

见微知著 · TheSignalwise

Claude Code任务完成提醒设置教程(Hook)

今天我们绝大多数编程的体验已经发生了很大的变化，其中最大的变化就是当我们使用AI编程软件的时候，提交给大模型任…

#优质博文 #前端 #CSS #WCAG
Setting Line Length in CSS (and Fitting Text to a Container)

AI 摘要：本文详细探讨了在 CSS 中设置文本行长和使文本适应容器的方法，强调了行长对可读性的重要性，并提供了具体的 CSS 技术和代码示例。文章从行长的基本概念出发，结合 WCAG 指南和研究数据，建议最佳行长为 50-75 个字符，同时介绍了如何使用 ch 单位、 clamp() 和 min() 函数实现响应式设计。此外，文章还介绍了通过 JavaScript 和纯 CSS 方法让文本适应容器宽度，并展望了未来可能出现的 text-grow 和 text-shrink 属性，旨在简化文本适配过程。

author Daniel Schwarz

CSS-Tricks

Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks

The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.

#优质博文 #CSS #前端 #UX #动画
Scroll-Driven Sticky Heading

AI 摘要：本文详细介绍了如何使用 CSS 滚动驱动动画（Scroll-Driven Animations, SDA）创建一个随着用户滚动页面而动态变化的粘性标题效果。通过结合伪元素和滚动时间轴，作者展示了如何实现标题文本的动态切换和动画效果，同时兼顾了浏览器兼容性和无障碍访问。文章从基础的语义化标记开始，逐步深入到动画实现、兼容性处理及用户偏好考虑，最后鼓励读者发挥创意，探索 SDA 的更多可能性。

1. 引言与背景
• 介绍了滚动驱动动画（SDA）作为一种强大的工具，可以根据用户的滚动位置动态变换页面元素，增强网站的互动性和吸引力。
• 作者分享了通过 SDA 实现主标题（h1）文本随滚动变化的创意，并将在本文中逐步拆解实现过程。
• 强调效果仅在支持 SDA 的浏览器（如 Chromium 系）中有效，且提供了不支持时的静态回退方案。

2. 动画效果的初步解析
• 探讨了文本动画的核心原理，灵感来源于早期的打字机效果。
• 通过伪元素的 content 属性实现文本内容的动态切换，而无需依赖宽度动画或特定字体，保持灵活性。

3. 构建基础结构
• 从语义化标记入手，使用 <main> 和 <section> 结构，包含多个带有标题和内容的section（如“Primary Colors”主题）。
• 初始 CSS 仅做基础样式调整，确保内容静态、语义化和无障碍访问，为后续动画效果奠定基础。

4. 添加滚动驱动标题
• 在页面顶部添加一个额外的 <h1> 作为动画标题，并通过 aria-hidden="true" 确保其对屏幕阅读器不可见。
• 其他静态标题使用 .srOnly 类隐藏视觉呈现，但保留无障碍访问支持，确保语义完整性。

5. 兼容性处理
• 使用 @supports (animation-timeline: scroll()) 检查浏览器对 SDA 的支持，不支持时隐藏动画标题，显示静态内容。
• 确保无障碍技术和不支持 SDA 的浏览器用户仍能访问完整内容。

6. 实现粘性标题
• 通过 position: sticky 和 top: 0 让动画标题固定在视口顶部。
• 添加背景、边距等样式优化视觉效果，确保标题在滚动中清晰可见。

7. 关键帧与滚动位置
• 使用自定义脚本显示滚动进度百分比，帮助确定标题切换的精确位置（如 30%、60%、90%）。
• 通过伪元素的 content 属性和滚动时间轴，设置关键帧以切换标题文本。

8. 文本动画细节
• 清除动画标题的初始内容，使用伪元素动态填充文本。
• 设置 animation-timing-function: step-end，确保文本在指定关键帧处精准切换。
• 手动编写关键帧，逐步增减字符，模拟打字动画效果，增强过渡自然感。

9. 用户偏好与无障碍
• 考虑 prefers-reduced-motion 偏好，使用媒体查询禁用动画，提供静态替代方案，照顾对运动敏感的用户。
• 强调无障碍设计，确保内容对所有用户可访问。

10. 效果扩展与创意
• 提出动画标题的多样化实现，如固定部分文本，单独动画其余部分，或通过 SDA 改变颜色、背景等。
• 展示如何叠加多个滚动驱动动画，丰富视觉效果。

11. 总结与号召
• 强调 SDA 不仅是炫酷技巧，更是网页设计的革新工具，能显著提升用户体验。
• 鼓励读者尝试 SDA，探索创意可能性，并分享作品、想法或问题，激发社区交流。

author Amit Sheen

CSS-Tricks

Scroll-Driven Sticky Heading | CSS-Tricks

I was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven animations, change the headings based on the user’s scroll…

#前端 #趣站 #tools #webgl #three #demo #动画

洗衣机酱是一个 3D 洗衣店，在这里图像会被清洗。一个使用 Three.js 构建的本地、无广告的背景移除器——快速、私密、有趣。

好可爱好有创意！
https://tools.dverso.io/bgremove/

0:21

Media is too big

VIEW IN TELEGRAM

#优质博文 #前端 #JavaScript #新特性
When can I use Temporal?

AI 摘要：本文详细探讨了 JavaScript 中 Temporal API 的背景、必要性以及其开发进展缓慢的原因。Temporal API 是对现有 Date API 的重大升级，旨在解决其功能不足和不一致的问题，提供更全面的日期和时间处理能力。尽管提案自 2017 年开始已进入 TC39 的第 3 阶段，但由于与现代标准（如 IANA、ISO-8601 等）的复杂互操作性要求，开发耗时近八年。目前，Firefox 已率先实现，Chrome 和 Safari 也在推进中，作者乐观预测其可能在年内正式发布。

1. 什么是 Temporal API？
• Temporal API 是 JavaScript 对 Date API 的 overdue 替代品，旨在提供更现代化的日期和时间处理功能。
• 作者希望其能在今年内正式在浏览器中发布。

2. 为什么需要替换 Date API？
• JavaScript 的 Date API 是 1995 年 Brendan Eich 快速开发时直接从 Java 的 java.util.Date 复制而来，存在诸多缺陷（如 Y2K 问题）。
• Java 早已废弃并更新了其 Date API，而 JavaScript 却沿用了 30 年，导致功能不足（例如缺乏对持续时间、间隔等的支持）和不一致性。
• 现有解决方案依赖第三方库，这些库因需要传输时区和本地化数据而变得臃肿。
• Temporal 作为一个命名空间，将原生支持时间戳、持续时间、间隔和时区管理，极大增强浏览器的日期时间能力。

3. 为什么 Temporal API 开发耗时如此之长？
• Temporal API 自 2017 年提出，至今已耗时八年，仍处于 TC39 的第 3 阶段（共 4 阶段）。
• 主要延迟原因并非功能范围，而是与现代 web 和计算标准的互操作性需求：
• 时区字符串基于 IANA Time Zone Database。
• 时间戳字符串基于 RFC9557（RFC3339 的更新，2024 年 4 月通过）。
• 持续时间字符串基于 ISO-8601 标准。
• 这些标准的协调（如 IETF 对 RFC3339 的扩展）耗费了大量时间。
• 此外，Temporal 与 ECMA-402 国际化 API（例如 Intl.DateTimeFormat）的数据来源（如 Unicode CLDR）也需整合，进一步减少对大型库的依赖。
• 2024 年 6 月，为加速发布，Temporal 范围被缩减，自定义日历和时区功能被移除，但未来可能通过 Temporal v2 提案恢复。
• 当前进展：
• Firefox 已于 139 版本（2023 年 5 月 27 日）实现。
• Chrome V8 部分实现了 Temporal.Instant，基于 Rust 库 temporal_rs。
• Safari 的 JavaScriptCore 也在开发中。
• 进入第 4 阶段需“两个兼容实现通过验收测试”，目前仍未达成，但作者乐观预测年内可能实现。
• 当前用户可通过 Firefox 或 Temporal polyfill 进行测试。

author John Dalziel

The Computus Engine

When can I use Temporal?

TC39 has had a Temporal API proposal in the works since 2017. It's currently at stage 3 (of 4). So this begs an obvious question... If Brendan Eich can invent all of JavaScript in 10 days, why has it taken eight years to replace the Date API?

Lets back up

#Newsletter #前端 #JavaScript #新动态
JavaScript Weekly #744

AI 摘要：本期《JavaScript Weekly》（2025 年 7 月 11 日，第 744 期）涵盖了 JavaScript 生态系统的最新动态，包括 Vercel 收购 NuxtLabs、TC39 最新会议总结、TypeScript 5.9 Beta 发布、Node.js 新版本更新等重要新闻。文章还探讨了 JavaScript 函数声明的细微差别、现代工具中的 Rust 趋势以及多个实用工具和库的发布。此外，涉及了 Web 性能优化、代码问题修复及跨平台开发的最新技术文章和资源。

1. Vercel 收购 NuxtLabs：Vercel 收购了负责 Nuxt 项目的公司，并支持其核心团队，Nuxt 保持开源，Vue 创始人对此表示乐观。Vercel 目前管理多个关键项目如 Next.js、 Turborepo 等，CEO Guillermo Rauch 分享了更多细节。

2. TC39 会议总结：详细报道了 5 月 ECMAScript 委员会会议，讨论了 Array.fromAsync、资源管理、Temporal API 及 AsyncContext 等提案的进展和决策。

3. 简讯：
• TypeScript 5.9 Beta 发布，支持延迟模块评估（import defer）。
• Nginx 的 JavaScript 模块（njs）升级至 QuickJS，支持 ES2023。
• JS1024 代码竞赛剩余一周，鼓励提交小于 1024 字节的 JS/GLSL 程序。
• Oliver Stenbom 反思 Rust 在现代 JavaScript 工具生态中的普及。

4. 版本发布：
• Node.js v24.4.0 发布，提醒下周将有安全更新。
• 其他工具更新包括 Oxlint 1.6、VS Code v1.102、Ember 6.5、Angular 20.1 等。

5. 文章与教程：
• 普通函数与箭头函数的区别：James Sinclair 深入解析两种函数声明的细微差异，帮助开发者选择合适的语法。
• JavaScript 作用域提升问题：Parcel 作者 Devon Govett 讨论作用域提升与现代 JS 模式的冲突，考虑在 Parcel v3 中移除此功能。
• 代码点安全的截断：James Mulholland 解决 CSV 导入中 emoji 导致的错误，提出使用代码点感知方法。
• 其他技术文章：
• Bun 解析 10 亿行数据的性能优化（Tae Kim）。
• Tauri 多进程中 JS 存储的松散同步（Costa Alexoglou）。
• Promise 状态管理探讨（Lydia Cho）。
• Temporal API 的使用时机及 Date API 替换的挑战（John Dalziel）。
• 2025 年是否仍需使用 jQuery 的讨论（Suren Enfiajyan）。

6. 工具与代码库：
• Driver.js：用于页面导览和上下文帮助的 Vanilla JS 库，功能流畅且维护良好。
• jsonrepair：修复无效 JSON 文档，支持 Node、CLI 及在线使用，适用于处理 LLM 或不合规 JSON。
• line-numbers：为 HTML 元素添加行号的 Web 组件，适用于展示源码片段。
• cRonstrue 3.0：将 Cron 表达式转换为自然语言，支持多语言。
• 其他工具：Next.js Boilerplate 5.0、React Scan 0.4、html-midi-player 1.6、CKEditor5 46.0、Recharts 3.1、Vuetify 3.9。

7. 其他生态动态：
• Chrome 137 支持 CSS 内联条件（if()函数）。
• SVG 生成技术可替代 GIF 并用于 GitHub README。
• 前 Meta 工程师分享 Meta 如何在 Facebook 中使用 React。
• PlanetScale 发布缓存优势的互动文章。
• Claude Code 借助 Bun 成为单文件可执行程序。
• ANSI.tools 提供 ANSI 转义码分析工具。

#优质博文 #前端 #无障碍 #WCAG
Please, can we have ARIA Notify

AI 摘要：本文作者 Nic Chan 强烈呼吁推动 ARIA Notify API 的实现，以解决当前 ARIA Live Regions 在无障碍开发中的诸多问题。文章详细分析了 Live Regions 的局限性，包括隐藏元素时的无效性、模态对话框中的管理复杂性、开发者的实现难度、规范内置的不一致性以及国际化翻译支持的不足。作者通过自己在 Audiom 项目中的经验，阐述了 Live Regions 在实际应用中的困境，并对 ARIA Notify API 寄予厚望，认为它能提供更精细的控制和更好的用户体验，同时希望未来能解决翻译等问题，避免成为另一个技术上存在但实用性受限的工具。

author Nic Chan

Nic Chan

Please, can we have ARIA Notify

A hate letter to live regions.

#AI
这几天好累没有更新🥹 简单 mark 一下。

https://fixupx.com/Manjusaka_Lee/status/1944414735715479807

NadeshikoManju@薫る花は凛と咲く7月5日播出(@Manjusaka_Lee)：讲一下目前自己对于目前 AI 路线的一个小想法
个人目前觉得 AI Agent 在迎来自己的真正的 iPhone4 时有一个问题是需要解决。即如何高效的去创建 Sandbox。
如同大家所看到的一样，目前 MCP 也好，还是其余协议也好，随着我们赋予模型或者 Agent 的权限越来越大。意味着攻击手段也会越来越多样化（如同容器一样，你可能永远不知道你引入的 prompt 或者你依赖的 API Provider 加了什么料），比如最近的一个很有趣的例子是附录1提到基于 Supabase MCP 攻击。
这意味着我们需要一个更有效率的 Sandbox 让我们进行 dry run 的操作。
而更有效率的 Sandbox 意味着几点
1. 强隔离（runc 这种逃逸满天飞的还是有点不太适合）
2. 启动快
3. 能耗小
而在这方面，Apple 实际上进行了一个先手布局。在 macOS 11.0 之后，Apple 发布了一套快速，轻量的虚拟框架 vz（参见附录2），而最近，Apple 更进一步的发布了开源的 container 套件（参见附录3）。VZ 开发体验相对良好，能耗表现极好。我觉得是为后续 macOS 生态的 AI Agent 铺平了道路
说回下一个时代的 Sandbox，看着几点主要诉求，可能很多同学第一时间就反应过来了这不是 Serverless 之前衍生出来的高性能的安全容器的需求嘛？这个时候，再去会看 NSDI 2020 AWS 发布的 Firecracker: Lightweight Virtualization for Serverless Applications （参见附录4），就会有一种恍惚感。技术路线总是会在不经意间交叉
而至于 Windows，其实 WSL 的开源我觉得也是在为后续的可定制化的 AI Sandbox 打样。但是我自己对于 hyperv 体系不甚了解就不在此处乱讲了。
差不多就这样，深夜的一点胡乱思考
附录：
1. https://read.readwise.io/new/read/01jztvkzkv792149kne27x2v95
2. https://developer.apple.com/documentation/virtualization
3. https://github.com/apple/container
4. https://www.usenix.org/conference/nsdi20/presentation/agache

FixupX

NadeshikoManju@薫る花は凛と咲く7月5日播出 (@Manjusaka_Lee)

讲一下目前自己对于目前 AI 路线的一个小想法
个人目前觉得 AI Agent 在迎来自己的真正的 iPhone4 时有一个问题是需要解决。即如何高效的去创建 Sandbox。
如同大家所看到的一样，目前 MCP 也好，还是其余协议也好，随着我们赋予模型或者 Agent 的权限越来越大。意味着攻击手段也会越来越多样化（如同容器一样，你可能永远不知道你引入的 prompt 或者你依赖的 API Provider 加了什么料），比如最近的一个很有趣的例子是附录1提到基于 Supabase MCP 攻击。
这意味着我们需要一个更有效率的…

cosine - 前端人の日常频道

#碎碎念 #前端 #工程化 好好好 “cargo for JavaScript” 好大的饼，等发布了康康，我对这种还是一向持积极态度的，有人弄是好事

看到有没到现场的群友觉得vite继续做这些也无法避免继续让前端工具链碎片化。

但其实现场直接有人问尤雨溪这个经典问题了，前面10个工具链不够好，又开发一个，于是我们有11个了，怎么面对这种问题？
回答是需要时间，实现再好也不会有魔法让所有想切换的人一下子换成vite+工具链；
演讲前文也提到过，在合适的时机做合适的事很重要，vite实际上从起步发展到现在，进展非常迅速，社区接受度已经很高了（已经被广泛采用或者作为大部分框架的默认脚手架），是前端工具链最有希望做成这件事的团队。

如果问我，我会说看看其他领域怎么解决类似问题的，cargo的优秀示范在前面，py那边也要uv在做类似的生态位，前端工具链当然也需要这样一个角色

#碎碎念 #前端 #新动态
https://github.com/vitejs/devtools
啪！antfu 当场开源 2333
新的大饼已经出现~