#优质博文 #AI #ClaudeCode #VSCode #course
我现在也是这个流程了，不过我是不用 --dangerously-skip-permissions，rm 权限不敢给。

How I use Claude Code (+ my best tips)

AI 摘要：本文作者作为 Claude Code 的深度用户，详细介绍了自己从 Cursor 转向全程使用 Claude Code 的开发体验，总结出一系列高效实用的使用建议。文章覆盖了 Claude Code 的 VS Code 插件启动、终端界面、权限系统、GitHub 集成、大型代码库表现、经济性、队列系统、自定义扩展、可视化界面及团队协作等方面，旨在帮助开发者最大化 Claude Code 在日常工作中的价值与便捷性。

author Steve Sewell

Builder.io

How I use Claude Code (+ my best tips)

I switched from Cursor's agents to Claude Code weeks ago and I'm not going back. Here's how I use it and my best practical tips

#优质博文 #SVG #前端 #CSS #course
A Friendly Introduction to SVG

AI 摘要：本文是 Josh W. Comeau 撰写的一篇关于 SVG（可缩放矢量图形）的入门教程，旨在为读者提供 SVG 的基础知识和实用技巧。文章从 SVG 的基本概念入手，介绍了其作为图像格式的独特之处（如基于 XML 的语法和与 DOM 的无缝集成），并深入探讨了 SVG 的基本形状、缩放机制、表现属性以及动画效果。通过详细的代码示例和互动演示，作者展示了如何利用 SVG 创建动态插图，并结合 CSS 和 JavaScript 实现交互效果。文章还提到作者正在开发的动画课程，邀请读者关注后续更新。

author Josh W. Comeau

Joshwcomeau

A Friendly Introduction to SVG • Josh W. Comeau

SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously…

#优质博文 #前端 #css #course #新特性
Better CSS Shapes Using shape() — Part 4: Close and Move

AI 摘要：本文是关于 CSS shape() 函数系列的第四篇文章，重点介绍了两个较少使用但非常实用的命令：close 和 move 。作者详细解释了 close 命令如何用于闭合形状，以及在特定情况下如何优化代码；同时，move 命令被用于在单一 shape() 定义中创建多个不连续的形状部分，极大地扩展了设计可能性。通过具体的代码示例和应用场景（如切出形状和重复形状），文章展示了如何利用这两个命令实现复杂的 CSS 形状设计。

author Temani Afif

CSS-Tricks

Better CSS Shapes Using shape() — Part 4: Close and Move | CSS-Tricks

The shape() function's close and move commands may not be ones you reach for often, but are incredibly useful for certain shapes.

#优质博文 #svg #react #motion #动画 #css #demo #course

How to Create a Gooey Search Interaction with Framer Motion and React

AI 摘要：本文详细介绍了如何使用 Framer Motion 和 React 创建一个带有 Gooey 效果的搜索交互组件。作者受到动态岛动画的启发，将 Gooey 效果应用于搜索栏，打造了一个小型但有趣的交互体验。教程涵盖了 Gooey 效果的实现、SVG 滤镜的应用、Framer Motion 的集成、搜索状态管理、动画效果的优化以及针对 Safari 浏览器的兼容性处理，旨在激发开发者创意并提供实用指导。

1. Gooey 效果的创建：
• 介绍了 Gooey 效果的起源，基于 Lucas Bebber 的文章 The Gooey Effect。
• 通过调整 SVG 滤镜中颜色矩阵的 alpha 通道值，实现自定义的 Gooey 效果。
• 提供了具体的代码示例，展示了如何使用 feGaussianBlur 和 feColorMatrix 创建滤镜效果。

2. 应用 Gooey 效果：
• 在主组件中通过 CSS 将 SVG 滤镜应用到父元素上。
• 提供了简单的代码结构，展示滤镜如何与 DOM 元素结合。

3. Framer Motion 集成：
• 使用 Framer Motion 为搜索栏添加动态动画效果，定义了四种状态（初始状态、搜索激活、搜索结果、加载中）来管理交互逻辑。
• 使用 AnimatePresence 组件实现搜索结果的集体展示和个体动画效果。
• 详细解释了 getResultItemVariants 和 getResultItemTransition 函数，用于控制搜索结果项的动画效果（如缩放、位移、模糊效果）。
• 动画设计注重细节，例如通过索引计算延迟实现顺序动画，并使用弹簧动画（spring）增加流畅性。

4. Safari 兼容性挑战：
• 提到 WebKit 对 SVG 滤镜的限制，作者通过 isUnsupported 布尔值对 Safari 浏览器进行了动画调整。
• 强调了兼容性问题的长期存在，并提供了针对性的解决方案。

author Oguzhan Tufenk

#优质博文 #前端 #新动态 #react #course
有意思。
🗓 React Status #434

AI 摘要： 本期 React Status 通讯（#434，2025年7月2日）聚焦于 React 生态系统的最新动态与讨论热点，涵盖了 React 开发中的复杂性问题、工具库更新、技术文章、会议回顾以及社区活动等内容。特别值得关注的是 Mario Brizic 的一篇挑衅性文章，讨论了 React 在构建现代 SPA 应用时可能带来的复杂性与混乱，引发了 Reddit 和 Hacker News 上的广泛讨论。此外，还包括 Vercel Ship 2025 会议的亮点回顾、新工具和框架的介绍，以及多篇关于 React 开发技巧的文章。

1. 主文章：React Still Feels.. Foolish, and No One is Talking About It?
• 作者 Mario Brizic 探讨了 React 在构建复杂 SPA 应用时的痛点，指出其灵活性可能导致代码混乱，强调这并非 React 独有问题。
• 该文在 React 社区内引发了激烈讨论，尤其是在 Reddit 和 Hacker News 上。
2. 简讯 (IN BRIEF)
• Reactylon：基于 Babylon.js 的 React 3D/扩展现实框架，新增展示页面。
• React Advanced London：11 月在伦敦举办的线上线下 React 活动。
• Anthropic 新功能：通过 Claude 构建和分享带有 React UI 的 AI 应用。
3. 会议回顾：Vercel Ship 2025 Recap
• 总结 Vercel 年度会议的最新公告，包括 AI SDK 更新、Fluid 计算选项、Vercel Sandbox、滚动发布功能和机器人检测等。
4. 技术文章
• 《Using useOptimistic to Make Your App Feel Instant》by Kent C. Dodds：介绍如何使用 useOptimistic 提升应用响应速度。
• 《A Study Guide to Data Fetching in React》by React Practice：React 数据获取的学习指南。
• 《Automating Frontend Accessibility with Storybook 9》by Dominic Nguyen：探讨如何利用 Storybook 9 自动化前端无障碍性测试。
5. 代码、工具与库
• Time Picker：基于 shadcn/ui 的日期/时间选择组件，简洁优雅。
• Tuono：React/Rust 全栈框架，结合 Next.js 风格与 Rust 后端开发。 #rust 【啊？6】
• react-xtermjs：为 React 应用添加 Xterm.js 终端体验。
• UI Builder 2.0：Figma 风格的可视化组件构建工具。
• AG Charts v12.0、Yet Another React Lightbox 3.24、Schedule-X 2.35、Ink 6.0.1 等工具和库的更新与介绍。
6. 深度内容
• 介绍了 Vercel 开发的开源字体 Geist，支持多语言和多种字重。 #font
• Josh Justice 关于在 React 中使用 MUI X Charts 创建高级折线图的教程。
• Neobrutalism：基于 shadcn/ui 的视觉组件库。
• 关于 React 应用样式设计的思考，作者支持 Tailwind 方案。
• 使用 Kamal 2 部署 Next.js 应用
• 使用 Framer Motion 创建 “Sticky” 搜索交互的教程
• 在最后介绍了编辑团队的其他技术通讯，如 Ruby Weekly、JavaScript Weekly、Node Weekly 等，覆盖多个技术领域。

author Peter Cooper

Reddit

From the programming community on Reddit: React Still Feels Insane And No One Is Talking About It

Posted by mbrizic - 408 votes and 321 comments

#优质博文 #前端 #css #动画 #新特性 #course
A guide to Scroll-driven Animations with just CSS

AI 摘要：本文详细介绍了如何使用纯 CSS 实现滚动驱动动画（Scroll-driven Animations），这是近年来 CSS 动画技术的一项重要进步。作者通过具体的代码示例和步骤，讲解了滚动驱动动画的三个核心组成部分：目标元素（target）、关键帧（keyframes）和时间轴（timeline），并重点介绍了两种新的时间轴类型——scroll() 和 view()，它们分别基于用户滚动行为和元素进入视口的行为触发动画。此外，文章还强调了动画对用户体验的影响，提醒开发者注意运动敏感性问题，并提供如何通过媒体查询（如 prefers-reduced-motion）优化动画以提升可访问性的建议。

author Saron Yitbarek

WebKit

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007.

#优质博文 #前端 #css #color #course
巨详细巨详细的一篇关于颜色的博文。
CSS Color Functions | CSS-Tricks

AI 摘要：本文全面探讨了 CSS 中颜色设置的多种方法和相关属性，强调了颜色在网页设计中的核心作用。作者从颜色的基础概念和颜色空间入手，详细介绍了 sRGB、CIELAB 和 OkLab 等颜色空间下的各种颜色函数（如 rgb()、hsl()、hwb()、lab() 等），以及十六进制表示法和命名颜色等传统方法。同时，文章还涵盖了现代 CSS 颜色功能（如 color() 和 color-mix()），并讨论了支持颜色值的 CSS 属性和渐变效果。通过丰富的示例和说明，读者可以深入理解 CSS 颜色的技术细节和应用场景。

author Sunkanmi Fafowora

CSS-Tricks

CSS Color Functions | CSS-Tricks

CSS has a number of functions that can be used to set, translate, and manipulate colors. Learn what they are and how they are used with a bunch of examples to get you started.

#优质博文 #前端 #css #course #新特性
shape 大佬还在发力！
Drawing CSS Shapes using corner-shape

AI 摘要：本文介绍了 CSS 新特性 corner-shape ，它允许开发者通过改变 border-radius 的角形状来创建多种 CSS 形状。作者详细展示了如何利用 corner-shape 的不同值（如 round、scoop、bevel、notch 和 squircle ）以及 border-radius 的调整，绘制出八边形、菱形、六边形、三角形、斜边、箭头形、梯形和平行四边形等多种形状。相比传统的 clip-path 方法，corner-shape 提供了更简洁的语法，并支持边框和阴影效果，极大地提升了形状设计的灵活性和便利性。

author Temani Afif

#优质博文 #前端 #AI #cursor #course
挺好的 cursor 入门介绍教程，可以说是保姆级了。
Frontend devs: Here’s how to get the most out of Cursor

AI 摘要：本文详细介绍了 Cursor 这一基于 AI 的代码编辑工具，如何帮助前端开发者提升编码效率。文章从 Cursor 的功能、界面操作、工作流程到具体应用案例（如重建 LogRocket 登陆页面）进行了深入剖析，同时分享了作者在实际项目中使用 Cursor 的实用技巧和经验。Cursor 集成了多种顶级 AI 模型（如 Claude 3.5 Sonnet 和 GPT-4.1），支持智能代码补全、上下文管理、自定义规则设置等功能，尽管价格偏高，但其强大功能对开发者极具吸引力。

1. Cursor 简介与市场地位
• 介绍了 Cursor 作为一款基于 Claude AI、GPT-4.1 等 AI 模型的代码编辑工具，其在 IDE 市场中的主导地位（82.2% 的开发者知晓或使用过）。
• 强调文章目标：揭示 Cursor 中被忽视的功能，并分享作者在日常编码中的实用技巧。

2. Cursor 安装与界面概览
• 提供 Cursor 的下载路径（cursor.com）以及首次打开后的界面介绍，包括“Ask”功能（类似 ChatGPT 的问答模式）。
• 对比传统开发与“vibe coding”工作流的差异，强调 Cursor 如何改变开发体验。

3. 项目创建与 AI 辅助开发
• 以 Next.js 项目为例，展示如何使用 Cursor AI 生成界面设计（如 LogRocket 登陆页面）。
• 详细操作步骤：通过 Command+K 快捷键、选择 AI 模型（如 Claude 3.5 Sonnet）、输入提示词、结合图像上下文迭代设计等。
• 提到“Restore checkpoint”功能，用于恢复之前的代码状态以解决设计错误（如颜色问题）。

4. 与其他工具的集成
• 介绍 MCP 标准及 Framelink.ai 的 Figma 服务器如何让 Cursor 直接访问设计文件，提升设计与开发的无缝协作。
• 提供设置指南，强调 AI Agent 模式在开发中的核心作用。

5. 上下文管理与高效编码技巧
• 解释上下文管理的重要性，使用“@”符号指定 Cursor 关注的内容或优先级。
• 建议为新功能或项目开启新聊天窗口，避免旧对话干扰 AI 响应质量，并介绍“新聊天总结旧聊天”功能。
• 推荐 AI 模型选择：作者偏好 Claude 3.5 Sonnet，认为其信息输出适中不过载。

6. 智能补全与自定义规则
• 介绍 Cursor Tab 的智能代码补全功能（Mac 用户可用 Command+K 快捷键），以及如何用它添加页面元素（如导航链接）。
• 讲解自定义规则（.cursorrules 文件）的设置方法，用于定义项目编码规范，并提供多种应用场景（如始终应用规则或手动选择）。

7. 隐私与安全注意事项
• 指出 Cursor 尊重 .gitignore 文件，避免将忽略内容纳入上下文，建议将 .env 文件加入 .gitignore 以保护敏感信息。

8. 定价与市场竞争
• 分析 Cursor 的定价结构（免费 Hobby 计划、$20 Pro 计划、$40 Teams 计划），认为价格偏高。
• 对比竞争对手如 Windsurf（团队计划降至 $30/用户/月）和 GitHub Copilot（更经济），建议开发者根据预算和需求选择工具。

9. 总结与建议
• 强调 AI 辅助开发是未来趋势，建议从 Agent Mode 入手，善用上下文管理（@ 符号），并为新功能开启新聊天。
• 鼓励开发者选择适合自己需求和预算的工具，并持续编码探索。

LogRocket Blog

Frontend devs: Here’s how to get the most out of Cursor - LogRocket Blog

Explore Cursor AI, one of the hottest tools in AI-assisted coding. Uncover the features you might be missing and practical workflows that actually work.

#优质博文 #前端 #webgl #gsap #动画 #three #shader #demo #course
科幻风格的 3D 音频可视化器，这个真的很酷！
Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API

AI 摘要：本文详细介绍了如何使用 Three.js、GSAP 和 Web Audio API 构建一个科幻风格的 3D 音频可视化器，灵感来源于 Webflow & GSAP 社区挑战赛。作者通过创建一个响应音乐的“异常探测器”界面，将声音与视觉效果实时结合，打造了一个充满未来感的沉浸式体验。文章从 Three.js 场景搭建、音频分析、自定义着色器，到 GSAP 动画和交互设计，逐步讲解了实现过程，展示了创意编码如何将技术与艺术融合。

1. 项目背景与灵感
• 源于 Webflow & GSAP 社区挑战赛（主题为“Draggable & Inertia”），作者决定创建一个音乐响应的 3D 可视化器。
• 设计灵感是一个在黑暗虚空中发光的橙白渐变球体，通过 Midjourney 生成视觉原型，并结合 Photoshop 调整作为视觉基础。
• 目标是打造一个科幻“异常探测器”界面，通过音乐驱动视觉效果，融合声音与画面。

2. Three.js 场景搭建
• 使用 Three.js 创建 3D 场景，包括场景、透视相机和渲染器，设置相机位置以获得最佳视角。
• 添加 OrbitControls 实现点击拖拽旋转视角，并设置阻尼效果以提升流畅性。
• 核心对象“异常球体”由两部分组成：外部线框球体（基于 IcosahedronGeometry，使用自定义 ShaderMaterial 实现发光线框效果，随音乐变形）和内部发光球体（基于 SphereGeometry，半透明发光效果形成光晕）。
• 增加背景粒子效果和网格覆盖，结合 Midjourney 生成的背景图像，营造全息显示的科幻氛围。

3. Web Audio API 音频分析
• 使用 Web Audio API 分析音频，支持用户上传音频文件或选择预设曲目。
• 通过 AudioContext 和 AnalyserNode 实时获取音频频率数据（fftSize=2048，平滑常数为 0.8），计算音频强度（audioLevel）用于驱动视觉变化。
• 动画循环中持续更新频率数据，提取平均音量和峰值频率，显示在 UI 上作为“异常指标”。
• 将音频强度值传入着色器和动画，同步音效与视觉效果（如球体亮度、变形程度随音乐强度变化）。

4. 音频响应着色器开发
• 使用 Three.js 的 ShaderMaterial 编写自定义 GLSL 着色器，控制球体的动态外观。
• 顶点着色器：通过 Simplex 噪声函数实现顶点变形，随时间和音频强度变化，音乐强烈时球体更尖锐、混乱。
• 片段着色器：应用 Fresnel 效果增强边缘发光，随音频强度脉动，同时加入微弱的独立呼吸动画（sin 函数）。
• 内部发光球体使用 BackSide 渲染和加色混合，营造柔和光晕效果，增强能量场视觉感。

5. GSAP 动画与交互设计
• 使用 GSAP 实现流畅动画，如音频播放时的相机缩放（靠近球体）和暂停时的恢复，增强戏剧效果。
• 借助 GSAP 的 Draggable 和 InertiaPlugin 插件，制作可拖动的 UI 面板，支持动量效果，用户可“抛掷”面板，增加交互趣味性。
• 实验性地实现 3D 球体拖拽，通过自定义逻辑和惯性衰减模拟物理效果，用户可旋转和抛掷球体。
• GSAP 时间线用于编排多个动画序列（如文本淡出），确保交互和过渡自然流畅。

6. UI 设计与氛围营造
• 设计灵感来源于科幻控制面板，UI 使用简约风格（半透明深色面板、浅色文字），包括控制球体旋转速度、分辨率、变形程度和音频灵敏度的滑块。
• 增加音频频谱分析面板（基于 canvas 绘制频率条形图）和终端日志窗口，模拟高科技系统运行状态。
• 通过 CSS 实现屏幕网格覆盖，添加漂浮粒子效果，结合自制背景音乐，强化沉浸式科幻体验。

7. 总结与成果
• 最终作品是一个互动艺术品，用户加载音乐后，系统“启动”并同步音频与视觉，球体随音乐脉动变形，用户可通过控件调整效果或拖动面板/球体互动。
• 项目展示了 Three.js（渲染与着色器）、Web Audio API（音频分析）和 GSAP（交互动画）如何结合，创造多感官体验，体现了创意编码的潜力。

author Filip Zrnzevic

#优质博文 #前端 #svg #course
Decoding The SVG path Element: Line Commands — Smashing Magazine

AI 摘要：本文由 Myriam Frisano 撰写，深入探讨了 SVG 中最强大的元素 <path> 的基础知识，重点介绍了直线和角度路径的命令。作者通过简单的示例和可视化工具，帮助读者理解 SVG <path> 元素的语法和规则，旨在让读者能够将 SVG 语义标签转化为 <path> 所能理解的语言。本文是两部分系列文章的第一篇，涵盖了直线命令的基础知识，并为后续的曲线和弧线内容奠定了基础。

1. 引言与背景：
• 介绍了 SVG 的基础知识，指出 <path> 元素虽然复杂，但却是 SVG 中最强大的元素。
• 强调 <path> 在技术绘图和数据可视化中的重要性，并建议初学者先掌握 SVG 基础元素（如 rect、line 等）再深入学习 <path>。

2. 学习前提与文章结构：
• 建议读者熟悉 SVG 的 viewBox 和基础元素语法，推荐先阅读作者之前的入门指南。
• 文章使用 JavaScript 编写代码，注重代码的可读性，通过命名坐标和简化数学计算来降低理解难度。

3. 成功设置：可视化辅助：
• 提供了一个可视化的 viewBox 网格，帮助读者理解坐标和路径命令的关系。
• 强调在 SVG 中添加文本时的可访问性问题，建议在实际项目中优先使用 HTML 渲染文本。

4. 进入 <path> 及其强大的 d 属性：
• 介绍了 <path> 元素的 d 属性，它使用特定的命令语言来定义路径形状。
• 指出非路径元素（如 line、rect）本质上是预定义的路径，而 <path> 需要开发者手动定义形状逻辑。

5. 起点命令：M：
• M 命令用于移动画笔到指定起点，仅设置位置而不绘制任何内容。
• 接受 x 和 y 坐标作为参数，是每个路径的起点。

6. 基础直线命令：M, L, H, V：
• L 命令绘制从当前点到指定点的直线，接受 x 和 y 坐标。
• H 和 V 命令分别绘制水平和垂直线，仅需指定一个坐标（另一个坐标由当前点推导）。
• 通过示例和 CodePen 演示，展示了这些命令的实际效果，并与 <line> 元素进行对比，突出 <path> 的高效性。

7. 使用 Z 命令创建多边形和折线：
• 介绍了 Z 命令，用于闭合路径，类似 <polygon> 元素的效果。
• 通过示例展示了如何使用 <path> 替代 <polyline> 和 <polygon>，并讨论了代码可读性的问题。

8. 相对命令：m, l, h, v：
• 解释了小写命令（如 m, l）表示相对坐标，相对于上一个点的偏移量。
• 通过示例对比绝对和相对命令的优缺点，指出两者各有适用场景。

9. 跳转点：复合路径：
• 介绍了复合路径的概念，利用多个 M 命令实现路径跳转，减少代码冗余。
• 示例展示了如何用单个 <path> 元素绘制网格，替代多个 <line> 元素。

10. 后续内容预告
• 预告了下一篇文章将讨论曲线和弧线命令，进一步扩展 <path> 元素的功能。
• 列举了 Smashing Magazine 上其他相关文章，涵盖 SVG 弧线、无障碍性 SVG 定制和动画等主题。

author Myriam Frisano

Smashing Magazine

Decoding The SVG path Element: Line Commands — Smashing Magazine

SVG is easy — until you meet `path`. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of `` and its sometimes mystifying commands. With simple examples and visualizations…

cosine - 前端人の日常频道

#优质博文 #前端 #css #WebGL #three #GLSL #demo #动画 coooool～ How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、…

#优质博文 #前端 #shaders #css #WebGL #course
从这个里面又学到很多，加上之前看到的，整理一下这几个 WebGL 学习资源推荐www

1. The Book of Shaders - 一本由 Patricio Gonzalez Vivo 和 Jen Lowe 编写的关于片段着色器（Fragment Shaders）的循序渐进指南，旨在帮助读者理解和掌握这一抽象而复杂的图形编程领域。
2. Three.js 之 1 Animation 动画 掘金早期难得的很高质量的 three 学习笔记一个系列，是 Three.js Journey（$95 终身访问）的学习笔记。
3. Discover three.js 由 three.js 核心开发者编写的完整教程，从基础到高级的系统性学习路径、包含实时代码编辑器、提供清晰的 2D 图表解释概念。
4. WebGL Academy 交互式 WebGL 和 3D 算法学习，在线 IDE 环境，支持语法高亮，涵盖从基础到高级的 WebGL 概念，包含物理模拟和高级渲染技术。
5. SB Code R3F Tutorials 内容涵盖 React Three Fiber 和 Drei 库的基础知识，逐步讲解相关概念，帮助学习者理解如何构建自己的项目并参与 React 生态系统。
6. WebGL 理论基础 & WebGL2 理论基础 从 WebGL 的基本理论讲起。

The Book of Shaders

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

#优质博文 #前端 #css #course
Better CSS Shapes Using shape() — Part 3: Curves

AI 摘要：本文是关于 CSS shape() 函数系列教程的第三部分，重点介绍了 curve 命令的使用及其在创建复杂 CSS 形状中的重要性。作者通过详细的示例和对比，解释了 curve 命令如何通过贝塞尔曲线控制点来绘制曲线，并与 arc 命令进行了对比，探讨了两者的适用场景。此外，文章还展示了如何利用 curve 命令创建不规则形状的圆角效果，包括倾斜边缘、箭头形状和多边形等复杂图形，并提供了实用的代码和技巧，帮助读者快速上手。

1. 系列背景与概述
本文是 CSS shape() 函数系列的第三部分，前两部分已介绍线条 (lines) 和弧线 (arcs)，本部分聚焦于曲线 (curves)，强调 curve 命令是掌握 shape() 函数全功能的关键。

2. Curve 命令详解
• 介绍了 curve 命令的基本概念，即通过指定控制点在两点间绘制贝塞尔曲线，可分为二次曲线（一个控制点）和三次曲线（两个控制点）。
• 简化了贝塞尔曲线的复杂理论，重点放在实用性上，避免深入数学细节，鼓励通过示例学习。
• 提供了 curve 命令的语法结构，例如 clip-path: shape(from Xa Ya, curve to Xb Yb with Xc Yc)，并解释了控制点的相对与绝对坐标的使用。

3. Arc 与 Curve 命令对比
• 对比了 arc 和 curve 命令在创建圆角时的异同，指出 arc 命令更适合规则圆弧，而 curve 命令适用于更灵活的曲线效果。
• 通过具体代码和图形示例，展示了两种命令在同一形状上的不同效果，帮助读者理解选择依据。
• 强调选择命令时的灵活性，建议优先尝试 arc，若不适用再转向 curve。

4. Curve 命令的实用案例
• 倾斜边缘 (Slanted Edge)：展示了如何从直角矩形转换为带有圆角倾斜边缘的形状，详细讲解了使用 curve 命令替换 line 命令的步骤，并通过 CSS 变量简化复杂计算。
• 箭头形状 (Arrow-shaped Box)：通过三个圆角的箭头形状示例，说明了 curve 命令在多点圆角设计中的应用，强调即使不擅长数学，也可以通过试错法调整坐标。
• 圆角多边形 (Rounded Polygons)：介绍了如何利用 curve 命令创建圆角多边形（如五边形、六边形），并结合 Sass 和 CSS 变量实现可控性和动画效果，同时提供了在线生成工具供参考。

5. 结论与后续资源
• 总结了 curve 命令的潜力及其在复杂形状设计中的作用，承认代码复杂性，但强调通过作者提供的在线资源和工具可轻松获取代码。
• 推荐了进一步学习资源，如作者在 Frontend Masters 上的文章，涉及使用 curve 命令创建 blob 形状。

author Temani Afif

CSS-Tricks

Better CSS Shapes Using shape() — Part 3: Curves | CSS-Tricks

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.

#优质博文 #css #前端 #新特性 #course
Better CSS Shapes Using shape() — Part 1: Lines and Arcs

AI 摘要：本文详细介绍了 CSS 新增的 shape() 函数在创建复杂形状方面的应用，特别是在使用直线和弧线绘制 CSS 形状时的强大功能。作者通过具体示例和实践，展示了如何利用 shape() 函数结合 CSS 特性（如变量、单位和数学函数）创建各种形状，介绍了 shape() 的基本命令（如 from、line、hline、vline ），建议优先使用 line 命令以提高代码可读性，并对比了 shape() 与传统方法（如 clip-path 和 mask）的适用场景。此外，文章还提供了 SVG 到 CSS 的在线转换工具，方便开发者快速转换代码。

author Temani Afif

CSS-Tricks

Better CSS Shapes Using shape() — Part 1: Lines and Arcs | CSS-Tricks

This is the first part of a series that dives deep into the shape function, starting with shapes that use lines and arcs.

#优质博文 #前端 #css #布局 #course
初学者友好
The Height Enigma • Josh W. Comeau

AI 摘要：本文深入探讨了CSS中高度设置的问题，揭示了为什么百分比高度有时不起作用，并提供了解决这些问题的有效方法。文章详细解释了CSS中宽度和高度计算的本质差异，并介绍了使用Flexbox和Grid布局来解决高度设置难题的策略。

• 引言：作者分享了自己学习CSS初期对高度设置问题的困惑，并指出理解背后的机制是解决问题的关键。

• 循环计算
• 解释了 CSS 中宽度和高度计算的根本区别：宽度基于父元素计算，而高度基于子元素。
• 描述了当子元素尝试设置百分比高度时，父子元素之间形成循环计算的问题，导致浏览器忽略百分比高度声明。

• 可知的高度
• 介绍了通过为父元素设置明确高度（如px或rem单位）来打破循环计算的方法。
• 展示了如何使用 rem 单位替代 px 单位，以提升布局的可访问性。
• 讨论了如何在嵌套元素中使用百分比高度，只要它们基于一个明确的尺寸。

• 从顶到底的百分比
• 探讨了在顶级 html 元素上设置百分比高度的效果，并解释了 html 元素的特殊性。
• 提到过去使用百分比高度确保布局填充整个视口的方法，以及现在使用 svh 单位的替代方案。

• 最终挑战
• 分析了使用固定高度（如 24rem ）可能导致内容溢出的问题。
• 展示了使用 min-height 替代 height 的尝试，但指出这仍然不能解决百分比高度的问题，因为 min-height 并不提供固定尺寸。

• 解决方案
• 介绍了使用 Flexbox 和Grid布局来解决高度设置问题的方法。
• 解释了如何通过设置 display: grid 或 display: flex 来创建新的格式化上下文，使子元素自动填充父容器。
• 提供了使用 Flexbox 和 Grid 的具体代码示例，并解释了它们的布局机制。

author Josh W. Comeau

Joshwcomeau

The Height Enigma • Josh W. Comeau

One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting “height: 100%” would have no effect at all. When I finally figured out what was going on…

#优质博文 #前端 #node #文件系统 #路径处理 #course
究极详细。
7 Working with file system paths and file URLs on Node.js

AI 摘要：本章节详细介绍了如何在 Node.js 中处理文件系统路径和文件 URL，涵盖了路径相关的功能和 API 的使用方法。

• 路径模块的导入：介绍了如何导入 node:path 模块，并说明了在某些情况下可以省略导入语句。
• 路径 API 的访问方式：列出了三种访问 Node.js 路径 API 的方法，并展示了平台特定版本的 API 使用示例。
• 路径解析：详细解释了 path.parse() 函数在不同平台（Windows 和 macOS）上的使用差异，展示了如何正确解析 Windows 路径。
• 路径分隔符和路径定界符：定义了路径分隔符和路径定界符的概念，并展示了当前平台的分隔符和定界符。
• 环境变量 PATH：展示了在不同操作系统（macOS 和 Windows）上的 PATH 变量的示例，解释了路径分隔符和定界符的使用。
• 当前工作目录（CWD）：介绍了 process 全局变量的使用方法，展示了如何获取和设置 CWD，并说明了 CWD 在路径处理中的作用。
• 路径类型：详细解释了 Unix 和 Windows 系统中的绝对路径和相对路径的概念，并展示了如何使用 path.resolve() 解析相对路径。
• 重要目录的路径：介绍了 node:os 模块中的 os.homedir() 和 os.tmpdir() 函数，展示了如何获取用户主目录和临时文件目录的路径。
• 路径拼接：详细解释了 path.resolve() 和 path.join() 函数的使用方法和区别，并展示了如何使用这些函数拼接路径。
• 路径解析和规范化：展示了 path.resolve() 和 path.normalize() 函数的使用示例，并解释了它们的作用。
• 路径相对化：介绍了 path.relative() 函数的使用方法，展示了如何获取从源路径到目标路径的相对路径。
• 路径解析和格式化：详细解释了 path.parse() 和 path.format() 函数的使用方法，并展示了如何使用这些函数解析和格式化路径。
• 路径操作：介绍了 path.dirname() 和 path.isAbsolute() 函数的使用方法，并展示了它们的作用。
• 跨平台路径处理：讨论了如何在不同平台上使用相同的路径，并介绍了如何将路径存储为平台无关的数组。
• 路径匹配：介绍了 minimatch 模块的使用方法，展示了如何使用 glob 表达式匹配路径。
• URL 处理：详细解释了 URL 类的使用方法，展示了如何创建和操作 URL 对象。
• 文件路径与 URL 的转换：介绍了 url.fileURLToPath() 和 url.pathToFileURL() 函数的使用方法，并展示了如何在文件路径和 URL 之间进行转换。
• 模块入口点检测：介绍了如何在 CommonJS 和 ESM 模块中检测当前模块是否为入口点，并展示了相应的代码示例。

author Dr. Axel Rauschmayer

#优质博文 #算法 #数据采样 #course
好棒的交互式教程，务必看看原文。（看了这篇打 ACM 的回忆涌了上来呜呜呜）
Reservoir Sampling

AI 摘要：本文详细介绍了蓄水池采样（Reservoir Sampling）这一算法技术，用于在未知数据集大小的情况下公平地随机选择样本。文章通过直观的例子（如抽牌和日志收集）以及逐步推导，解释了蓄水池采样的应用场景、数学原理和实现方法，强调其在处理大规模数据流时的内存效率和公平性。

1. 引言与背景：
• 介绍了蓄水池采样的核心概念，即在不知道数据集大小的情况下，如何公平地随机选择样本。
• 目标：让读者了解何时需要使用蓄水池采样、其背后的数学原理（仅用基本运算：减法、乘法和除法）以及简单的实现方法。
2. 已知大小的采样：
• 通过抽取10张牌中的3张为例，说明传统随机采样的方法（如洗牌或随机索引）。
• 指出当数据量巨大（如百万张牌）时，传统方法变得不切实际，尤其是当数据以流式方式逐个呈现且无法存储所有数据时。
• 提出了一个难题：如果每次只能看到一张牌且只能持有一张，如何公平地选择？
3. 未知大小的采样：
• 引入了蓄水池采样的应用场景，如日志收集服务中处理日志峰值时需要采样。
• 描述了问题：数据流中日志数量未知，无法存储所有日志，需在内存受限的情况下公平选择部分日志。
• 通过模拟日志流，展示了简单采样（如仅取前几个）的不公平性，强调需要一种公平的算法。
4. 蓄水池采样原理（单项选择）：
• 详细解释了蓄水池采样的核心思想：对于第n个元素，以1/n的概率替换当前持有的元素。
• 通过逐步计算概率，证明了该方法确保每个元素被选中的概率相等（公平性）。
• 举例分析了前几张牌的选中概率，确保读者理解数学推导（例如，第1张牌选中概率为100%，第2张为50%，第3张为33.33%）。
5. 扩展到多项选择：
• 介绍了如何从数据流中选择k个元素：新元素以k/n的概率被选中，并随机替换当前持有的k个元素中的一个。
• 提供了实现方法：使用大小为k的数组，生成0到n的随机数，若小于k则替换对应位置的元素。
• 通过公式和实例，验证了多项选择的公平性。
6. 应用于日志收集：
• 将蓄水池采样应用于日志收集场景，设置k=5，每秒发送最多5条日志。
• 展示了该方法的优势：在安静时段不丢失日志，在高峰时段限制发送量，且内存使用可控。
• 指出了一个权衡：日志发送不再是实时流，而是按时间间隔批量发送。
7. 进阶阅读与加权采样：
• 提到蓄水池采样的加权变体，适用于某些日志（如错误日志）更重要的情况。
• 提供了相关资源链接（Wikipedia），供有兴趣的读者深入研究。

author Sam Rose

#优质博文 #前端 #css #容器查询 #course
An Interactive Guide to CSS Container Queries

AI 摘要：本文是一份关于 CSS 容器查询的交互式指南，详细介绍了容器查询的语法、使用场景、常见问题及解决方案，并通过大量实例演示如何利用容器查询实现响应式组件设计，替代传统的媒体查询方法。

1. Introduction to container queries
• 容器查询解决了基于容器宽度（而非视口）调整 UI 的痛点，传统媒体查询在此场景下存在局限性。
• 示例：页面头部操作按钮的标签显示/隐藏逻辑通过容器查询优化。

2. Container query syntax
• 基本语法：通过 container-type 和 container-name 定义容器，使用 @container 规则查询。
• 支持简写：container: name / type。

3. Common pitfalls
• 容器不能依赖内容自动调整大小（需显式设置或通过 Flex/Grid 布局控制）。
• 无法直接查询容器自身的样式（需额外包装元素）。

4. Container query units
• 引入容器相对单位（如 cqw, cqh），实现容器内的流体排版和间距控制。

5. Use cases
• 卡片组件：根据容器宽度切换堆叠/水平布局。
• 仪表盘部件：动态调整 widget 样式以适应不同列宽。
• 时间线组件：窄容器显示垂直布局，宽容器显示水平布局。
• 表单输入：基于容器空间自动调整网格列数。

6. Style queries
• 实验性功能（仅 Chrome/Safari TP 支持），通过查询 CSS 变量（如 --featured: true）切换样式。
• 示例：结合 :has() 选择器控制时间线布局。

7. DevTools 支持
• Chrome 开发者工具可调试容器查询应用的元素。

8. Resources & Related articles
• 推荐了容器查询规范、兼容性检查工具及其他相关文章（如 CSS :has() 指南）。

Outro
容器查询标志着响应式设计的范式转变，未来将逐步替代媒体查询在组件级布局中的应用，但媒体查询仍适用于全局布局。

author Ahmad Shadeed

Ishadeed

An Interactive Guide to CSS Container Queries

Learn how to use CSS container queries today.

#优质博文 #react #前端 #新动态 #AI
🤖 React Status Issue #427

AI 摘要：本期 React Status 聚焦 React Labs 最新实验性功能（视图过渡与 <Activity> 组件），深入解析 use client 指令的设计哲学，并汇总 Next.js 课程、React 组件优化技巧、工具链更新（如 Storybook 9 Beta）及 JavaScript 生态动态（如 V8 新特性）。

1. 社区动态
• React 团队发布实验性功能 View Transitions 和 <Activity> 组件
• 其他开发中的功能未公开细节。
• 补充资源：Theo Browne 的 40 分钟视频解析；Jack Whiting 的 Next.js 视图过渡实践案例 #course
• Dan Abramov 解析 use client 和 use server 指令
• 🕹 React Jam 游戏开发赛事回归（10 天限时挑战）。
• 🤖 bhvr：基于 Hono + Vite 的全栈 React 新框架。
• Matt Abrams 提供了一些在使用 Cursor AI 开发工具针对 React/Next.js 的优化建议。
• 📺 Alem Tuzlak 的 8 年 React 组件设计经验分享。
• 📄 TanStack Query 默认配置覆盖场景、使用 AI SDK 进行 React 中多个 LLM 模型选择、Promise “序列化“ 实践。

2. 工具与库更新
• 🛠 Storybook 9 Beta：强化组件测试（交互/视觉/无障碍），支持 React Native。
• 🤖 react-native-ai：本地运行 LLM，兼容 Vercel AI SDK。
• Reactylon：基于 Babylon.js 的 React XR 框架，支持 JSX 编写 3D 场景。
• Yet Another React Lightbox：适用于 React 16.8+、17 和 18，支持多种输入法，预加载图像，支持视频幻灯片、缩放和高级定制，有一个在线游乐场 
• 其他：React Modal Sheet 4.0、Gridstack.js 12.1、next-intl 4.1 等。

3. JavaScript 生态动态
• V8 新增 Explicit Compile Hints（显式编译提示）
• SolidJS 十年回顾，Bun 发布 LLM 友好文档
• Node.js v18 EOL，v24 即将发布
• 现在可以将 JSR 包与 pnpm 和 Yarn 一起使用

Deno

Add JSR packages with pnpm and Yarn | Deno

You can now access JSR packages via pnpm and Yarn. Here's how.

#优质博文 #前端 #react #course
很棒的初学者友好的 React Fiber 架构说明。
React Internals: Which useEffect runs first?

AI 摘要：本文深入探讨了 React 中 useEffect 的执行顺序问题，通过示例代码和 React 内部机制（如 Fiber 架构和遍历算法）解释了为何子组件的 useEffect 会先于父组件执行。文章分为渲染阶段和提交阶段，详细解析了 React 的生命周期和遍历逻辑，帮助开发者理解并避免潜在的执行顺序问题。

1. 问题引入
• 通过一个父子组件的 useEffect 执行顺序测试题引入主题，展示大多数开发者对执行顺序的误解。
• 示例代码显示子组件的 useEffect 先于父组件执行，但官方文档未明确解释这一行为。
2. React 生命周期概述
• 触发阶段（Trigger）：初始渲染或状态更新（如 setState）。
• 渲染阶段（Render）：调用组件函数，生成虚拟 DOM，标记需更新的节点。
• 提交阶段（Commit）：更新真实 DOM 并执行副作用（如 useEffect）。
3. React Fiber 架构
• Fiber 树是 React 内部用于管理组件层级和更新的数据结构，包含节点类型（如 HostComponent）、子节点、兄弟节点和父节点指针。
• 图示展示了 Fiber 树与 DOM 树的差异，强调其优化渲染效率的特性。
4. Fiber 树的遍历算法
• 深度优先遍历：每个节点被访问两次（向下和向上），优先处理子节点，再处理兄弟节点。
• 动画演示了遍历过程，解释了为何子组件的 useEffect 会先执行。
5. 渲染阶段（Render Phase）
• beginWork()：调用组件函数，执行 console.log，标记需更新的节点。
• completeWork()：生成新的 DOM 节点，但未提交到真实 DOM。
6. 提交阶段（Commit Phase）
• 副作用提交：通过 recursivelyTraversePassiveMountEffect 函数深度优先遍历，先提交子组件的 useEffect，再提交父组件的。
• 动画和代码示例进一步验证了这一行为，解释了同级组件的执行顺序逻辑。

author Teng Wei Herr