#优质博文 #前端 #WebGL #three #demo
看了这篇突然意识到我写的那篇好烂ww完全不是面向基础的教程欸～感觉这种一步步来的真不好写。
Interactive Text Destruction with Three.js, WebGPU, and TSL | Demo

AI 摘要：本文是一篇关于使用 Three.js、WebGPU 和 Three Shader Language (TSL) 实现互动文字破坏效果的详细教程。作者通过一步步的代码示例和讲解，展示了如何在 Web 上创建动态的 3D 文字效果，利用指针位置和弹簧物理原理实现文字的变形与破坏动画，同时结合后处理技术增强视觉效果。文章不仅提供了技术实现细节，还分享了作者对 Web 互动体验发展的感悟，强调了 Three.js 等工具如何让 Web 重新焕发创意活力。

1. 文字几何体 (TextGeometry)：
• 内容：使用 TextGeometry 创建 3D 文字，配置字体、大小、深度、斜角等参数，并应用 MeshStandardMaterial 材质。通过计算 BoundingBox 将文字居中对齐。
• 总结：实现了 3D 文字的创建与居中，为后续的互动效果做好准备。

2. Three Shader Language (TSL)：
• 内容：详细介绍了使用 TSL 实现文字破坏效果的核心逻辑。包括存储顶点原始位置和法线、创建模拟数据的存储缓冲区、在 GPU 上运行初始化和更新计算函数、使用 uniforms 传递指针位置等数据、通过弹簧物理和摩擦力实现动态变形效果、添加噪声和旋转以增强动画的混乱感。
• 总结：通过 TSL 实现了基于指针位置的顶点变形和动态动画效果，展示了 GPU 计算在互动设计中的应用。

3. 材质与后处理：
• 内容：调整材质的发光颜色 (emissive color)，通过速度缓冲区偏移色调以产生多样化效果，并添加雾效和背景颜色。引入后处理技术，包括环境光遮蔽 (AO)、泛光 (bloom) 和噪声效果，提升画面质感。
• 总结：通过材质调整和后处理技术，增强了视觉表现力，使破坏效果更具冲击力。

author Lolo Armdz

0:05

Media is too big

VIEW IN TELEGRAM

#优质博文 #CSS #JavaScript #ES2025 #前端
Iterator helpers: The most underrated feature in ES2025 - LogRocket Blog

AI 摘要：本文详细介绍了 ECMAScript 2025 中引入的迭代器辅助方法（Iterator Helpers），这是 JavaScript 中处理大规模数据或无限数据流的一项重要功能。相较于传统的数组方法（如 .map() 和 .filter()），迭代器辅助方法采用惰性求值（lazy evaluation），不会一次性加载所有数据到内存中，从而显著提高性能和内存效率。文章通过对比传统数组方法与迭代器辅助方法的执行方式，展示了后者在处理大数据和流式数据时的优势，并提供了多个实际应用场景（如处理用户数据、AI 文本处理等）以及使用指南。

author Elijah Asaolu

LogRocket Blog

Iterator helpers: The most underrated feature in ES2025 - LogRocket Blog

Unlock the power of iterator helpers in ES2025 to write memory-efficient, lazy JavaScript pipelines that scale from streams to infinite data.

#优质博文 #css #前端
A Primer on Focus Trapping | CSS-Tricks

AI 摘要：本文详细介绍了“焦点捕获（Focus Trapping）”的概念及其在创建可访问性模态对话框中的应用。焦点捕获是指将用户的焦点限制在特定元素内，确保焦点不会离开该区域，常用于提升网页可访问性。文章从理论到实践，逐步解析了如何通过代码实现焦点捕获，包括检测可聚焦元素、处理键盘事件（如 Tab 和 Shift+Tab）以及具体的实现步骤，同时推荐了 Splendid Labz 提供的工具库以简化开发过程。

1. 焦点捕获的基本概念
• 焦点捕获是指通过管理焦点，确保用户在特定元素（如模态对话框）内导航时，焦点始终保持在该元素内部。
• 具体规则：当用户在最后一个可聚焦元素上按 Tab 键时，焦点回到第一个元素；当用户在第一个元素上按 Shift+Tab 时，焦点回到最后一个元素。
• 应用场景：用于创建可访问性模态对话框，避免焦点离开对话框区域。
• 技术背景：虽然 dialog API 的出现减少了对焦点捕获的需求，但理解和实现这一技术仍然很重要。

2. 使用 Splendid Labz 实现简单焦点捕获
• 推荐使用 Splendid Labz 提供的工具库（如 @splendidlabz/utils/dom）来简化焦点捕获的实现。
• 代码示例：通过 getFocusableElements 获取可聚焦元素，并用 trapFocus 函数在 keydown 事件中管理焦点。
• 强调：虽然工具库使用简单，但文章将深入解析其内部实现原理，适合想深入学习或自行开发的读者。

3. 选择可聚焦元素（Selecting Focusable Elements）
• 可聚焦元素包括：<a>、<button>、<input>、<textarea>、<select>、<details>、<iframe> 等，以及具有 [contenteditable] 或 [tabindex] 属性的元素。
• 实现步骤：
• 使用 querySelectorAll 获取容器内所有潜在可聚焦元素。
• 过滤掉不可聚焦的元素（如 disabled、hidden 或 display: none 的元素）。
• 进一步筛选仅支持键盘焦点的元素（排除 tabindex < 0 的元素）。
• 添加 first 和 last getter 方法，分别获取键盘可聚焦元素列表的第一个和最后一个元素。
• 目的：为后续焦点捕获提供准确的元素列表。

4. 焦点捕获的实现方法（How to Trap Focus）
• 核心步骤：监听键盘事件（keydown），检测用户是否按下 Tab 或 Shift+Tab 键。
• 具体实现：
• 使用 event.key 和 event.shiftKey 判断按键类型，自定义 isTab 和 isShiftTab 函数。
• 通过 document.activeElement 确定当前焦点位置，判断是否需要转移焦点。
• 如果焦点在最后一个元素且用户按 Tab 键，则将焦点移至第一个元素；如果焦点在第一个元素且用户按 Shift+Tab，则将焦点移至最后一个元素。
• 使用 focus() 方法实现焦点转移。
• 总结：通过逐步拆解，焦点捕获的实现逻辑清晰且易于理解。

5. 对 Splendid Labz 的最终推荐
• 作者分享了个人开发经验，提到在构建应用时需要许多通用组件和工具库。
• 推荐 Splendid Labz 提供的库，旨在提升开发效率并改善开发者体验（DX）。
• 鼓励读者尝试这些工具，并感谢读者耐心阅读。

author Zell Liew

CSS-Tricks

A Primer on Focus Trapping | CSS-Tricks

Focus trapping is about managing focus within an element, such that focus always stays within it. The whole process sounds simple in theory, but it can quite difficult to build in practice, mostly because of the numerous parts to you got to manage.

#优质贴子 #餐饮业 #职业转型
v2ex 现在为数不多的正常帖子（唉）挺有意思的，详细说了开店选址、装修、菜单设计、供应链管理等关键环节的注意事项。

程序员转行从事餐饮业近十年，有问必答。
https://www.v2ex.com/t/1146449

V2EX

程序员转行从事餐饮业近十年，有问必答。 - V2EX

I Am A - @crazylinus - 2010 年大学毕业，先后做过机器人，智能家居等行业。2016 年开始自主创业，做过串串，肥肠粉，面条等。坐标成都，先后开过 20 家左右的店，仅 2 家亏损。大家对餐饮业有何疑问，或有餐饮创业想法，

#博客更新 #前端 #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...