#博客更新 #前端 #WebGL #p5
从像素到粒子：p5.js 图像转动态粒子的设计与实现
疯狂叠甲，不行了，就先这样吧，这篇博文和项目搭建写的都比较匆忙，有很多写的比较烂的地方，毕竟是为需求服务的，重构本身就比较赶，后续应该会不断完善。
部分段落有使用 AI 进行润色和辅助，虽然很 AI 但是通俗易懂就留着了（要困死了先睡觉）

#优质博文 #浏览器
省流：讨伐现代 IE（
Apple's Browser Engine Ban Persists, Even Under the DMA - Open Web Advocacy

AI 摘要：本文详细探讨了苹果公司对第三方浏览器引擎在 iOS 上的限制，即使在欧盟《数字市场法案》（DMA）生效后，苹果依然通过技术和合同障碍阻止其他浏览器厂商在欧盟成功部署自己的引擎。文章指出苹果此举是为了保护其高利润产品 Safari 及其与谷歌的搜索引擎收入，同时限制网页应用（Web Apps）与原生应用的竞争能力，损害消费者和开发者的利益。作者呼吁欧盟委员会采取强制措施，确保苹果真正遵守 DMA，开放浏览器引擎竞争。

author Open Web Advocacy

Open Web Advocacy

Apple's Browser Engine Ban Persists, Even Under the DMA - Open Web Advocacy

#优质博文 #AI #开源 #RCT
挺有意思的。
Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity

AI 摘要：本文通过一项随机对照试验（RCT）研究了 2025 年初 AI 工具对经验丰富的开源开发者生产力的影响。研究发现，使用 AI 工具的开发者完成任务的时间比不使用时长 19%，即 AI 反而降低了他们的效率。这一结果与开发者的预期（认为 AI 会加速 24%）和专家预测形成鲜明对比。文章探讨了这一现象背后的可能原因，并尝试调和 RCT 结果与 AI 基准测试成绩及轶事报告之间的矛盾，强调了在现实场景中评估 AI 影响的重要性。

1. 研究动机：
• 探讨 AI 工具在现实环境中的影响，弥补基准测试（benchmarks）在真实性上的不足。
• 基准测试常因任务简化或缺乏上下文而高估或低估 AI 能力，而现实中的 AI 对 AI 研发的影响可能带来风险（如快速进步导致监管失控）。
• 通过开发者生产力研究，提供补充证据以评估 AI 对研发加速的整体影响。

2. 研究方法：
• 招募 16 名经验丰富的开源开发者，来自平均星级 22k+、代码量 100 万行以上的大型仓库。
• 开发者提供 246 个真实问题（bug 修复、功能开发、重构等），随机分配是否允许使用 AI 工具。
• 使用 AI 时，开发者可自由选择工具（主要为 Cursor Pro 与 Claude 3.5/3.7 Sonnet）；不使用 AI 时，禁止任何生成式 AI 辅助。
• 任务平均耗时 2 小时，开发者记录屏幕并自报完成时间，报酬为每小时 150 美元。

3. 核心结果：
• 使用 AI 工具时，开发者完成任务时间延长 19%，与预期加速 24% 及事后仍认为加速 20% 的认知形成反差。
• 数据显示，AI 工具在现实任务中显著减缓了开发速度。
• 文章澄清未提供证据支持的观点，如 AI 对大多数开发者无加速作用、未来无潜力加速等。

4. 因素分析：
• 研究分析 20 个可能导致减缓的因素，发现 5 个可能原因（具体因素详见论文）。
• 排除实验偏差，如开发者使用前沿模型、遵守分配规则、提交的 PR 质量无明显差异等。
• 减缓现象在不同结果测量、估计方法及数据子集分析中一致。

5. 讨论：
• 对比 RCT 结果、基准测试（如 SWE-Bench）及轶事报告，发现证据部分矛盾。
• RCT 显示 AI 减缓 20 分钟至 4 小时的现实编码任务；基准测试显示 AI 在困难任务中表现优异；轶事报告称 AI 在多场景中帮助显著。
• 提出三种假设解释矛盾：RCT 低估能力、基准及轶事高估能力、或三者反映不同任务分布。
• 指出 AI 在高标准或隐性要求（如文档、测试覆盖率）场景中能力可能较低，基准测试因任务简化可能高估能力，轶事报告可能不准确。

6. 未来展望：
• 计划继续此类研究，追踪 AI 加速或减缓趋势，特别是在难以操控的现实评估中。
• 若 AI 显著加速开发者，可能预示 AI 研发快速进步，带来扩散风险、监管失控或权力集中等问题。
• 强调现实场景评估与基准测试结合的重要性，以全面理解 AI 能力及影响。

author Metr Team

metr.org

Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity

We conduct a randomized controlled trial to understand how early-2025 AI tools affect the productivity of experienced open-source developers working on their own repositories. Surprisingly, we find that when developers use AI tools, they take 19% longer than…

#Newsletter #前端 #JavaScript #CSS #新动态 #AI
🚀 Frontend Focus #701

AI 摘要： 本期《Frontend Focus》（第 701 期，2025 年 7 月 16 日）涵盖了前端开发的多个热点话题，包括在严格约束下创新的项目案例、Apple 在浏览器引擎选择上的争议、WebAssembly 的广泛应用、CSS 新特性和工具的使用，以及一系列实用的前端工具和资源。文章还提到 Mozilla 即将为 Firefox 添加 WebGPU 支持，并探讨了 AI 对开源开发者生产力的影响，旨在为前端开发者提供最新的技术动态和实用技巧。

1. “I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since”：通过一个项目案例，Mike Hall 展示了在带宽和处理能力等严格约束下的创新设计，提醒开发者考虑更广泛的用户需求，设计更具包容性的产品。 #性能优化
2. “Apple’s Browser Engine Ban Persists, Even Under the DMA”：Open Web Advocacy 指出 Apple 在 iOS 浏览器引擎选择上未能有效遵守欧盟《数字市场法案》（DMA），存在阻碍竞争的问题。
3. “WebAssembly: Yes, But for What?”：Andy Wingo 在 ACM Queue 上分享了 WebAssembly 在浏览器和服务器端的广泛应用，探讨其如何逐渐渗透到各个领域。 #WASM
4. 简讯（IN BRIEF）：
• Mozilla 将在 Firefox 141 中添加 WebGPU 支持（初期仅限 Windows，后续扩展至 macOS 和 Linux）。
• 一份报告分析了 AI 对开源开发者生产力的影响。
• Firefox 团队寻求用户对 Mozilla 浏览器的真实反馈。
• Andy Bell 分享了一个 CSS 代码片段，为锚定 URL 添加必要的空间，提升用户体验。
5. 文章、观点与教程（Articles, Opinions & Tutorials）：
• CSS 行长度设置 - Daniel Schwarz 介绍如何利用 clamp() 和 calc() 等工具更轻松地设置文本行长度，并展望未来发展。
• 纯 HTML 和 CSS 编写 - Joel Dare 分享为何在 2025 年仍坚持使用纯 HTML 和 CSS。
• ARIA 角色与属性使用 - Michael Beck 讲解如何有效使用 ARIA 角色和属性。 #WCAG
• 滚动行为设计 - Megan Chan 探讨何时应保存用户的滚动位置。
• AI 与网页设计 - Noah Davis 认为模板而非 AI 才是网页设计的真正“杀手”。
6. 工具、代码与资源（Tools, Code & Resources）：
• SveltePlot - Gregor Aisch 开发的 Svelte 可视化框架，基于 D3，支持多种图表类型。
• Eleventy LibDoc - IT Automotive Design System 提供的一个 Eleventy 起步项目，用于创建美观直观的文档站点。
• SplitThing - Florian Reintgen 开发的工具，可将图像分割为自定义网格并下载。
• Chili3D - xiange chen 开发的基于 Web 的 3D CAD 应用，利用 WebAssembly 和 Three.js 实现接近原生性能。 #webgl
• designtokens.fyi - Design Systems House 提供的设计令牌术语词汇表，包含 33 个相关术语解释。
• Check Server-Side Rendering (SSR) - Punit Sethi 开发的工具，帮助检查网页元素的服务器端渲染情况。
• FontGen - 智能字体配对工具，包含 1000+ 字体（需注册）。
• Pandabox - StJohn 开发的 Astro 轻量级灯箱和画廊组件。

Medium

I’m more proud of these 128 kilobytes than anything I’ve built since

I once worked with a UI designer who insisted it was impossible to create a product that was both within the Web Content Accessibility Guidelines (WCAG) and aesthetically pleasing. ‘It can be pretty…

#优质博文 #液态玻璃 #设计
Getting Clarity on Apple's Liquid Glass

AI 摘要：本文详细探讨了 Apple 在 WWDC 2025 上推出的全新设计美学“Liquid Glass”（液体玻璃），分析了其设计理念、技术特点以及引发争议的焦点。文章从 Apple 官方介绍、设计师和开发者的反馈、无障碍性问题到社区的实验和教程，全面梳理了 Liquid Glass 的影响与应用前景。作者中立看待这一设计，既对其创新性表示兴趣，又对其可读性和无障碍性表达了担忧，同时整理了大量相关资源和讨论，为读者提供了深入了解这一设计趋势的入口。

author Geoff Graham

CSS-Tricks

Getting Clarity on Apple's Liquid Glass | CSS-Tricks

Gathered notes on Liquid Glass, Apple’s new design language that was introduced at WWDC 2025. These links are a choice selection of posts and resources that I've found helpful for understanding the context of Liquid Glass, as well as techniques for recreating…

#优质博文 #node #JavaScript #TypeScript #Docker #Tools

Node Weekly #586 - July 15, 2025

AI 摘要：本期 Node Weekly 聚焦 Node.js 最新版本更新、社区讨论以及相关技术进展。Node.js v24.4.0 发布，带来了新的功能和安全更新提示；社区正在讨论是否将 Node.js 改为年度大版本发布并缩短 LTS 周期；TypeScript 5.9 Beta 引入了新功能如 import defer；此外，还涵盖了 Docker 部署最佳实践、性能差距分析、JavaScript 现代模式问题，以及一系列实用工具和库的更新，旨在帮助开发者提升效率和代码质量。

1. Node.js 更新与公告：
• Node v24.4.0 (Current) 发布：新增 --watch-kill-signal 功能，允许指定重启进程时的信号；spawn 和 spawnSync 支持权限模型标志传播；包含常规 V8 和依赖项更新。Node 团队还预告即将发布 v24.x、22.x 和 20.x 版本以解决安全问题。
• Node.js 年度大版本发布提案：社区讨论是否将 Node.js 改为每年一次大版本发布，并将偶数版本 LTS 周期从 30 个月缩短至 24 个月，欢迎社区反馈。
• Node.js v18 支持延长：尽管 v18 已于 2025 年 4 月停止支持，但 Canonical 宣布 Ubuntu Pro 用户将获得支持至 2032 年。

2. 社区与安全动态：
• Node-API 支持 React Native：Callstack 宣布为 React Native 引入 Node-API 支持，扩展跨平台原生代码编写和共享的可能性。
• TypeScript 5.9 Beta 发布：引入 import defer 支持，以及新的 node20 模式（类似 nodenext，但目标为 ES2023）；透露 Go 驱动的 TypeScript 原生端口将在 TypeScript 7 中可用。
• TC39 全会总结：Igalia 团队分享了最新 TC39 全体会议的详细摘要，其中包含有关 ECMAScript 发展的有趣花絮。。
• 安全威胁：朝鲜“威胁行为者”部署了 67 个恶意 npm 包，Kirill Boychenko 详细解释了这些包的运作机制。
• Node 版本管理器性能差距：Pavel Romanov 指出不同 Node 版本管理器可能导致 shell 启动速度相差 500 倍，但对大多数用户影响不大。
• JavaScript 作用域提升问题：Parcel 创建者 Devon Govett 认为作用域提升与现代 JS 模式冲突。
• 使用 Array.fromAsync() 的现代异步迭代：Matt Smith 介绍 Array.fromAsync() 的用法。
• 类型化查询构建器对比：Guillaume Billey 比较了 Kysely 和 Drizzle 两种工具。

3. 工具与库推荐：
• Necord：基于 Nest 和 Discord.js 的 Discord 机器人开发框架，易于部署机器人功能。
• Upyo：跨运行时邮件发送库，支持 SMTP 和 HTTP（如 SendGrid、Amazon SES）提供统一类型安全的 API。
• Rewire 9.0：专注于 CommonJS 的单元测试猴子补丁工具，方便注入 mock 和检查私有变量。
• Envalid 8.1：环境变量验证工具，确保程序运行时依赖项齐全。
• cRonstrue 3.0：将 Cron 表达式转换为自然语言，支持约 30 种语言环境。
• 其他更新：包括 ESLint v9.31.0、Serverless Express 4.17、NATS.js 3.1、OpenAI Node 5.9 等工具和库的最新版本信息。

4. 生态系统动态：
• JavaScript Date 类测试：通过趣味测验了解 Date 类的解析机制。 #趣站
• ANSI.tools：在线工具，用于分析 ANSI 转义码和常用代码查询。
• 10 亿行挑战：Tae Kim 分享如何在 Bun 中处理 10 亿行文件，耗时不到 10 秒。
• Nginx 的 njs 模块升级：从仅支持 ES5 升级至使用 QuickJS，支持完整的 ES2023 功能。

nodejs.org

Node.js — Node.js v24.4.0 (Current)

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

#优质博文 #前端 #css
Stacked Transforms

AI 摘要：本文通过一个故事化的叙述方式，探讨了 CSS 中的 transform 属性和 animation-composition 属性的行为与应用。作者从参加 CSS Day 活动时对 animation-composition 的初步接触开始，逐步深入到 CSS 变换的堆叠机制以及动画组合的不同模式（如 replace、add 和 accumulate），通过代码示例和个人实验，清晰地解释了这些属性如何影响元素的变换和动画效果。

1. 引言与背景：作者以参加 CSS Day 活动为切入点，提到在活动中接触到 animation-composition 属性，并通过阅读相关博文和 MDN 文档逐步了解其功能。

2. CSS Transform 基础与堆叠机制：
介绍了 transform 属性支持多个值（如 translateX 和 rotate）以空格分隔的方式应用，并按顺序逐一执行的特点。通过代码示例（如 transform: translateX(50px) rotate(20deg) translateX(50px)），解释了变换值的顺序执行逻辑，并非简单合并。

3. Animation-Composition 的默认行为（replace）：
阐述了 animation-composition 的默认值 replace ，即在动画 @keyframes 中定义的变换会覆盖元素上已有的 transform 属性，导致动画从 @keyframes 定义的起点开始。

4. Animation-Composition 的其他模式（add 和 accumulate）：
• add 模式：动画变换会附加到已有变换的末尾，形成一个变换列表（如 translateX(50px) rotate(20deg) translateX(100px)）。
• accumulate 模式：动画变换会与已有变换的同类型值累加（如 translateX(50px) 加上 translateX(100px) 变为 translateX(150px)）。
通过代码和注释详细对比了两者的不同效果。

5. 扩展应用与个人感悟：
作者通过一个“turtle”示例（受童年 Logo 编程语言启发），展示了如何通过动态添加 transform 值实现类似路径移动的效果。同时提到 animation-composition 的行为不仅适用于 transform，也适用于其他属性如 opacity。最后，作者表达了对这些技术的兴趣，并认为它们在未来项目中会有实用价值。

author Chris Coyier

#前端 #demo #动画 #css #codepen

jhey ʕ•ᴥ•ʔ(@jh3yy): number range slider using 3D CSS transforms
sometimes a shift in perspective unlocks a new solution
check the reveal👇
使用 3D CSS 转换的数字范围滑块
有时，视角的转变会解锁新的解决方案
检查显示 👇

https://fixupx.com/jh3yy/status/1945596617802867087

https://codepen.io/jh3y/pen/xxvVWxN

#碎碎念 #坑
今日帮实习生看的一个 bug，踩的小坑，本地局域网真机调试的时候一直会报错 TypeError: crypto.randomUUID is not a function ，localhost 没有，线上也没有，是 web-llm 库用到的。

查到的原因是：crypto.randomUUID() 是 Web Crypto API 的一部分，仅在安全上下文（HTTPS）下可用。localhost 被视为安全来源，即使没有 HTTPS 也能使用该 API；但对于其他自定义域名，必须启用 HTTPS。

像这种情况一般需要解决么（陷入沉思）

StackOverflow | TypeError: crypto.randomUUID is not a function

翻到另外一个：StackOverflow | How do I create a GUID / UUID?

很好，群友说 Next 自带！
https://nextjs.org/docs/app/api-reference/cli/next#using-https-during-development

#优质博文 #前端 #JavaScript #新特性
JS正则新特性：安全过滤RegExp.escape方法

AI 摘要：本文详细介绍了 JavaScript 中 RegExp 对象的静态方法 escape() 的功能、语法及转义规则，并通过实际案例展示了其在处理正则表达式时的必要性和安全性。作者强调了该方法在防止正则表达式意外行为和安全问题中的重要作用，尤其是在处理用户输入或动态构建正则表达式时，建议将其作为最佳实践，并结合其他验证技术构建多层次防御策略。

author 张鑫旭

Zhangxinxu

JS正则新特性：安全过滤RegExp.escape方法 « 张鑫旭-鑫空间-鑫生活

RegExp.escape()是所有前端都要熟知的静态函数，用于安全地将字符串转换为正则表达式字面量，目前所有现代浏览器都已经支持。

#优质博文 #前端 #UX #设计 #落地页
We studied 100 dev tool landing pages—here’s what really works in 2025

AI 摘要： 本文通过对 100 多个开发者工具登陆页面进行深入研究，总结了 2025 年有效的设计与布局策略。作者 Anton Lovchikov（Evil Martians 设计负责人）分析了从 Linear 到 Vercel 等知名工具的页面，提炼出适用于早期产品的高效结构：包括英雄区、信任模块、功能展示、社交证明、支持模块和最终行动号召（CTA）。文章强调简洁设计、用户导向的故事叙述以及建立信任的重要性，同时提供了基于研究的开源模板，助力开发者快速构建登陆页面。

1. 引言与研究背景
• 介绍了研究的目的：帮助开发者工具创建者避免设计中的常见错误，快速构建有效的登陆页面。
• 研究对象为 100 多个开发者工具页面，涵盖从早期初创公司到成熟产品的案例。
• 提供了一个基于研究的开源模板，供快速部署使用。

2. 总体布局注意事项
• 核心原则：避免过度销售，注重简洁与巧妙设计。
• 大多数页面采用居中布局与最大宽度容器，确保可读性与开发速度。
• 少数页面采用全宽设计以突出高端感，但执行难度较高。

3. 英雄区（Hero Section）
• 设计趋势：居中布局，带有静态或动态产品展示及引人注目的 CTA。
• 视觉元素类型：动态 UI 演示、静态 UI 截图、可切换的多产品 UI、实时嵌入产品、代码片段或抽象插图。
• 附加元素：眉毛文本（Eyebrows）用于突出新发布或融资信息；顶部横幅传递更长信息。
• CTA 策略：主 CTA 醒目且具体，次 CTA（如查看文档）视觉上区分开。

4. 信任模块（Trust Block）
• 目标：通过展示客户 logo 或用户数据快速建立信誉。
• B2B 产品：展示知名客户 logo 或客户评价，常使用自动滚动轮播。
• 个人用户产品：突出数据指标（如 GitHub 星级、使用量）或奖项。

5. 功能展示模块（Feature Block）
• 核心：聚焦用户痛点与解决方案，而非单纯列举功能。
• 叙事方式：功能列表、任务导向故事、问题导向故事、大胆声明、使命陈述式叙事。
• 布局形式：全屏截图、棋盘式布局、图标文本、全宽卡片带、便当式网格、选项卡分组、步骤流程、富卡片设计、视频教程。
• 附加支持：包括“工作原理”说明、使用案例、兼容性与集成展示。

6. 社交证明模块（Social Proof Block）
• 策略：精选用户评价，注重相关性与正面反馈，通常位于页面底部。
• 呈现方式：简洁引用，包含用户头像、姓名及公司 logo。
• 创新模式：将用户评价与功能模块结合，增强上下文相关性。

7. 支持模块（Supporting Blocks）
• 非必需但常见模块：包括 FAQ、对比表格、定价信息、博客或更新日志预览。
• FAQ：以折叠式设计解答常见问题。
• 对比表格：突出产品优势，适用于竞争激烈的市场。
• 定价：简洁展示不同计划，常链接至单独页面。

8. 最终行动号召（Final CTA）
• 设计：醒目且独立的全宽模块，使用对比背景色与简短激励信息。
• 目的：抓住未在早期点击的访客，提供最后转化机会。
• 创新案例：嵌入日历小部件，便于直接预约沟通。

9. 快速部署工具
• 提供基于研究的无冗余模板，适用于开发者产品，支持 Webflow 和静态 HTML 版本。
• 鼓励读者免费获取并快速应用。

author Anton Lovchikov, Travis Turner

evilmartians.com

We studied 100 dev tool landing pages—here’s what really works in 2025—Martian Chronicles, Evil Martians’ team blog

While designing a landing page template for dev tool startups, we reviewed 100+ real product sites. Along the way, we uncovered practical insights—here’s what’s worth knowing if you’re building one yourself.

#AI #碎碎念
嘿，现在还真是这样，过了重构写需求的时候，我也开始这么感觉了 😊 于是又用回了 cursor tab。不过我还是觉得对于重构之类的说明好的需求，claude 还是很顶的，舍得下功夫写 prompt 和 md 指引的情况下（
https://fixupx.com/yetone/status/1945358422142280107

最近被搞得很不想写代码了，我反思了一下，我只是被陷入了 AI Coding 的泥沼之中，我被 claude 生成的代码恶心地不行，但是我又不忍心完全放弃 AI 自己从头写这些代码，所以我已经来回挣扎重构了好多次了，每次花大精力重构到一半又觉得如此折腾很不对劲所以又忍痛完全退回，这的确令人十分沮丧，不过我现在改变了我的心境，对 AI 生成的代码保持「慈悲」心态：若它写的代码其能顺利运行，便是圆满了一段善缘；若尚有瑕疵，亦如众生各有业力，不必强求完美，但以平常心护持即可。

FixupX

yetone (@yetone)

最近被搞得很不想写代码了，我反思了一下，我只是被陷入了 AI Coding 的泥沼之中，我被 claude 生成的代码恶心地不行，但是我又不忍心完全放弃 AI 自己从头写这些代码，所以我已经来回挣扎重构了好多次了，每次花大精力重构到一半又觉得如此折腾很不对劲所以又忍痛完全退回，这的确令人十分沮丧，不过我现在改变了我的心境，对 AI 生成的代码保持「慈悲」心态：若它写的代码其能顺利运行，便是圆满了一段善缘；若尚有瑕疵，亦如众生各有业力，不必强求完美，但以平常心护持即可。

Quoting yetone (@yetone)…

#UX #设计 #移动端适配
https://fixupx.com/uiuxadrian/status/1944713516776362052

Adrian (@uiuxadrian): Bad typography kills good app design.
Most designers guess font sizes instead of using proven standards.
Here's the ultimate guide to UI font sizes for mobile apps (iOS):

🧵 Thread • FixupX

Adrian (@uiuxadrian)

Bad typography kills good app design.

Most designers guess font sizes instead of using proven standards.

Here's the ultimate guide to UI font sizes for mobile apps (iOS):

#优质视频 #前端 #react
▶️ What Every React Developer Should Know About Signals

▶️ 每个 React 开发者都应该了解的 Signals —— SolidJS 的创建者 Ryan 花费八个小时制作了这个十分钟的短视频，展示了现代 JavaScript 代码中信号的状态，并与 React 的方法进行了比较。

via ⚛️ React Status #435

YouTube

What Every React Developer Should Know About Signals

React is by far the most popular JavaScript library to build web UIs. But Signals and React haven't always been on the best terms. As they say "History is written by the Victors". Today we set the record straight.

[0:00] Introduction
[0:16] History of Signals…

#开源 #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