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 的具体代码示例，并解释了它们的布局机制。

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…

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 模块中检测当前模块是否为入口点，并展示了相应的代码示例。

AI 摘要：本文是 Node Weekly 第 578 期的内容，发布时间为 2025 年 5 月 13 日，聚焦于 Node.js 和 JavaScript 生态系统的最新动态。文章涵盖了新工具和库的发布（如 Feedsmith 和 Hyparquet）、Node.js 版本更新（如 v24.0.1）、性能优化进展、以及 npm 包创建的最佳实践等内容。此外，还介绍了 JavaScript 相关工具和技术（如 k6 和 Mantine），并提供了多个实用库和资源的链接。编辑 Peter Cooper 提到将参加 Google I/O，newsletter 将暂停至 5 月 27 日。

1. 更新动态

• Node v24.0.1 发布：修复了 v24.0 中移除的 SlowBuffer 功能，因仍有流行包依赖此功能；同时 Lizz Parody 文章总结了 Node 24 的新特性。
• 性能优化动态：Node 性能专家 Yagiz Nizipli 正在改进 Node 的 HTTP 性能。
• 其他更新：Bun v1.2.13 提升了 Node.js 兼容性（如 worker_threads 支持）；VS Code 新增对 Node 网络调试功能的支持；Node.js Next 10 调查仍在进行中，旨在帮助核心团队确定优先级。

2. 技术文章

• 创建现代 npm 包：Brian Clark 提供了一份 2025 年适用的分步指南，介绍创建 npm 包的最佳实践，内容近期已更新。 #工程化
• 文件系统路径与 URL：Dr. Axel Rauschmayer 探讨了在 Node 中处理文件系统路径和文件 URL 的方法。

3. 工具推荐

• Feedsmith：一个 Web 订阅解析和生成工具，支持 RSS、Atom、JSON Feed 等格式，解决了现有库的一些问题，尽管尚处于早期阶段，但核心功能已就绪。Jean-Philippe Monette 的成熟 Feed 库已经有十多年的历史了，如果您想要专注于 Feed 生成，它也刚刚进行了一次重大更新 （v5.0）
• PptxGenJS：一个成熟的库，用于用 JavaScript 创建 PowerPoint 演示文稿，支持图形、表格和其他典型的幻灯片对象等。
• ANSIS 4.0：一个支持多环境的 ANSI 颜色库，适用于终端、浏览器等，v4.0 带来重大更新。
• Hyparquet：无依赖的 JavaScript 库，用于解析 Parquet 文件格式，支持浏览器环境。
• jsdiff 8.0：用于文本差异比较的库，支持多种比较方式。
• Glob 11：JavaScript 中最准确且第二快的文件匹配库。
• 其他工具：包括 sqs-consumer、express-openapi-validator、OpenAI Node、dnt、cron-parser 和 Undici 等库的最新版本更新。
• k6 1.0：Grafana 推出的负载测试工具，支持用 JavaScript/TypeScript 编写脚本。

AI 摘要：本文详细介绍了如何使用 CSS 的新特性 shape() 函数，通过 clip-path 创建花朵形状。作者从 shape() 函数的基本概念入手，聚焦于 arc 命令，结合几何原理和具体代码示例，展示了如何绘制复杂的花朵形状，并通过调整弧线的大小和方向生成不同的形状效果。文章还探讨了代码优化技巧以及浏览器的兼容性问题，适合对 CSS 高级形状设计感兴趣的开发者学习。

• 什么是 shape() 函数？
• 介绍了 shape() 作为 clip-path 的新值，突破了 polygon() 只能绘制直线的限制，支持绘制曲线。
• 与 SVG 路径语法相似，提供了更多的灵活性，但语法复杂，需要大量练习。
• 本文聚焦于 arc 命令，下一篇文章将探讨 curve 命令，并以创建有趣形状为目标。
• Arc 命令详解
• arc 命令用于在两点之间绘制椭圆弧，本文简化讨论为圆弧情况。
• 通过几何原理解释了两点和半径确定的两个圆，以及由此生成的四种弧线（小/大，顺/逆时针）。
• 提供了 shape(from Xa Ya, arc to Xb Yb of R [large or small] [cw or ccw]) 的代码示例，并通过演示说明不同参数的效果。
• 创建花朵形状
• 以之前的文章为基础，展示了如何使用 shape() 绘制花朵形状，通过多个小圆弧连接形成花瓣。
• 详细讲解了点的坐标计算和半径公式，使用 Sass 循环生成代码，并通过调整参数解决反向形状问题。
• 最终通过 small ccw 和 large cw 组合，得到目标花朵形状，并展示了其他有趣的形状变体。
• 结论与示例
• 总结了 arc 命令的使用，鼓励读者从圆弧扩展到椭圆弧的学习。
• 以心形为例作为最终演示，引导读者自行思考实现方式，并推荐作者的在线生成器获取更多代码资源。
• 浏览器兼容性
• 指出目前仅 Chrome、Edge 和 Safari 完全支持 shape() 函数，提醒开发者注意兼容性问题。

Css-Generators

CSS Generator for Flower Shapes

Create fancy flower shapes using CSS mask. Get an optimized & modern code in no time.

AI 摘要：本文详细介绍了如何使用 Pages CMS 作为静态网站的内容管理系统，结合 Astro 等静态站点生成器，简化内容管理流程。作者分享了 Pages CMS 的核心优势，包括易用性、最小化依赖、协作功能和高度自定义性，并通过实际案例展示了如何将其与 Astro 的内容集合功能集成，管理 Markdown 文件和自定义字段。此外，文章还涵盖了 Pages CMS 的配置、与 GitHub 仓库的连接、内容创建以及自动部署的步骤，为静态网站开发者提供了实用指南。

CSS-Tricks

Using Pages CMS for Static Site Content Management | CSS-Tricks

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole 'nother thing to manage.

从今天开始，我们将为大家提供更多访问 Manus 的机会！

• 向所有人开放，无需等待名单
• 所有用户每天可免费执行一项任务（300积分）
• 所有用户一次性获得1,000积分奖励

更多价值，更多灵活性。享受你的免费积分并邀请朋友来体验吧！

AI 摘要：本文由 Dan ⚡️ 在 X 平台分享了如何利用 AI 和任务管理系统高效构建产品的流程。他强调了详细需求编写、产品需求文档 (PRD) 的创建、任务管理工具的选择以及基于任务的构建循环的重要性。Dan 推荐使用 TaskMaster AI 作为任务管理工具，并提供了一个简单的提示循环来确保任务按逻辑顺序执行，避免复杂项目中的混乱。

• 1. 编写详细需求
• 花费 15-20 分钟深入思考，确保 AI 明确你的构建目标。
• 需求需简洁但全面，包含技术栈等细节。
• 总结：这一步是确保 AI 理解项目愿景的基础，避免后续沟通偏差。

• 2. 创建产品需求文档 (PRD.txt)
• 使用博客中提供的提示，将需求整理成正式的产品需求文档。
• 仔细复查文档内容，确保无遗漏。
• 总结：PRD 作为项目蓝图，是后续任务分解和执行的重要依据。

• 3. 使用任务管理系统
• 推荐了四种任务管理工具：TaskMaster AI、Roocode Boomerang Tasks、Shrimp Task Manager 和 Cline Task Tool。
• Dan 个人更倾向于 TaskMaster AI，原因是其集成了 Perplexity 进行网络搜索，能更好地处理复杂性，正确识别依赖关系并按逻辑顺序执行任务。
• 其他工具如 MCP 与 Cursor 配合良好，也支持 CLI 直接使用。
• 总结：选择合适的任务管理工具是项目有序推进的关键，TaskMaster AI 在复杂项目中表现更优。

• 4. 使用简单的任务构建循环
• 强调构建循环必须严格围绕任务进行，避免偏离任务管理系统，否则复杂项目容易出错。
• 提供了一个简单的提示循环：
• "Show tasks" - 查看任务列表。
• "What's the next task I should work on? Please consider dependencies and priorities." - 询问下一个优先任务。
• "Implement task 2 and all of its subtasks." - 执行具体任务及其子任务。
• "I'd like to add a new task that ..." - 添加新任务。
• 更多示例可在推文中查看，核心是始终保持任务管理的一致性。
• 总结：任务构建循环是确保项目按部就班执行的关键方法，严格遵循可避免混乱。

AI 摘要：本文详细介绍了7种开源自托管评论系统的替代方案，以替代 Disqus，特别适合那些关注隐私、成本和自定义需求的博客主或网站管理者。文章从 Disqus 的局限性入手，分析了其免费计划的限制以及升级到专业计划的高成本，提出自托管开源解决方案作为更经济和灵活的选择。作者列举了7种评论系统（HashOver、Schnack、Valine、Commentics、Commento、Remark42 和 Isso），并对每种系统的特点、优势和技术细节进行了深入分析，帮助读者根据需求选择合适的工具。

引言
• 作者在选择博客评论系统时的困惑，初期选择了 Disqus，但随着博客流量增长，Disqus 的免费计划限制和收费问题凸显。
• 提出自托管开源评论系统作为替代方案，特别是在隐私和成本方面的优势。
• 分享7种可自托管的开源评论系统，适用于博客和静态页面。

1. HashOver：
• 特点：免费开源的 PHP 评论系统，支持完全匿名评论，易于主题定制。
• 功能：通过简单几行 JavaScript 或 PHP 代码嵌入网站，支持 XML、JSON 或 SQL 数据库存储评论。
• 优势：自托管，注重隐私，替代 Disqus，遵循 GNU Affero General Public License 许可证。

2. Schnack：
• 特点：基于 JavaScript 的开源评论系统，体积小（仅 8KB），无广告、无追踪。
• 功能：简洁的 UI，便于审核评论，支持信任/屏蔽用户，Webpush 通知新评论，支持 GitHub、Twitter 等第三方认证。
• 优势：轻量、用户友好，无需额外用户管理系统。

3. Valine：
• 特点：快速、简单且强大的评论系统，默认安全，无需服务器端实现。
• 功能：支持表情、高速加载、完整 Markdown 语法、轻量化设计，1.2.0 版本新增文章阅读统计。
• 优势：简洁高效，注重用户体验。

4. Commentics：
• 特点：免费高级 PHP 评论脚本，代码开源，注重集成性、可定制性和安全性。
• 功能：易于嵌入现有页面，保持内容新鲜以吸引访客和搜索引擎。
• 优势：适用于文章评论或独立评论页面，功能丰富。

5. Commento：
• 特点：轻量快速（仅 11KB 的 JavaScript 和 CSS），加载速度快，注重隐私。
• 功能：不收集用户信息，内置高级审核工具、自动垃圾过滤和 Akismet 集成。
• 优势：无垃圾评论，页面加载速度提升可增加网站流量。

6. Remark42：
• 特点：轻量、简单且功能齐全的自托管评论系统，注重隐私，不追踪用户。
• 功能：支持社交登录、邮件登录、可选匿名评论、多级嵌套评论、Markdown 格式、图片上传、评论投票和置顶、近期评论列表、Disqus 导入、Telegram 通知等。
• 技术：无需外部数据库，数据存储于单一文件，支持 Docker 一键部署，跨平台运行，UI 简洁且可定制。
• 优势：功能全面，适合多场景使用，支持多站点模式和自动 SSL 集成。

7. Isso：
• 特点：基于 Python 和 JavaScript 的轻量评论服务器，作为 Disqus 的直接替代品。
• 功能：支持匿名评论，身份管理简单，通过 JavaScript 和跨域资源共享轻松集成到静态网站。
• 优势：轻量易用，注重隐私和简洁性。

Our Code World

Top 7: Best Open Source Self-Hosted Comment System Alternatives to Disqus

See our review from 7 of the best Open Source Self-Hosted Comment System Alternatives to Disqus.

AI 摘要：本文详细探讨了 Astro 框架与内容管理系统（CMS）的结合，分析了如何为 Astro 网站选择合适的 CMS。Astro 作为一个快速、现代的网站构建框架，凭借其 Islands Architecture 实现了静态网站速度与动态功能的平衡。然而，对于需要扩展性、多人协作、动态内容或结构化编辑流程的项目，选择合适的 CMS 至关重要。文章列出了 9 款适合 Astro 的顶级 CMS，评估了它们的功能、局限性、定价以及与 Astro 的集成效果，并提供了选择 CMS 时需考虑的关键因素，如内容交付方式、编辑体验、性能优化、定价与扩展性及生态系统支持。

• 选择 CMS 的关键考量：
• 内容交付与 API 结构：介绍了三种 CMS 类型（Headless CMS、Git-based CMS、Traditional CMS）及其与 Astro 静态生成（SSG）或动态模式（SSR/混合模式）的适配性，强调快速响应 API 和缓存的重要性。
• 编辑体验与易用性：讨论了技术用户与非技术用户对 CMS UI、实时预览和编辑工具的不同需求。
• 性能与静态优化：强调 CMS 应支持 SSG、提供良好的缓存和 CDN 支持，并具备增量静态再生（ISR）功能以保持 Astro 的性能优势。
• 定价与扩展性：分析了 CMS 定价模式的多样性（免费、按使用付费等）以及对流量和内容增长的适应性。
• 生态系统与 Astro 支持：建议选择有官方 Astro SDK、插件或良好文档支持的 CMS，以简化集成。

• 9 款推荐 CMS 详细解析：
• Hygraph：一款 GraphQL 原生无头 CMS，注重速度与结构化内容，支持内容联合与多语言管理，适合企业级应用；限制在于 GraphQL 学习曲线和无内置前端渲染；定价从免费到企业定制。
• Contentful：强调扩展性和 API 优先设计，适合从博客到企业级项目，支持多平台内容交付；限制为高流量成本较高及 GraphQL 查询限制；定价从免费到 $300/月起。
• Sanity：高度可定制的无头 CMS，提供实时 API 和 Sanity Studio 自定义编辑界面；限制在于非技术用户使用难度和 GROQ 查询学习曲线；定价从免费到 $15/座/月起。
• Storyblok：混合无头 CMS，具备实时视觉编辑和组件化内容模型；限制为自定义后端适配性较弱及定价较高；定价从 €99/月起。
• Strapi：开源自托管无头 CMS，提供 API 优先设计和动态区域功能；限制为自托管维护成本及学习曲线；定价从免费到 $15/座/月起。
• Tina CMS：开源 Git 驱动 CMS，适合静态网站和 JAMstack 架构；限制为无传统数据库支持动态内容较弱；定价从免费到 $29/月起。
• Prismic：无头页面构建器，结合视觉页面编辑与 Slice Machine 工具；限制为 API 灵活性较低及成本随用户增长；定价从免费到 $10/月起。
• Ghost：专注于出版的平台，适合内容创作者和会员制网站；限制为非完整 CMS，缺乏结构化内容支持；定价从免费到 $9/月起。
• WordPress：全球最受欢迎 CMS，支持无头模式但非原生设计；限制为性能和安全性问题；定价免费但附加成本较高。

• 总结与建议：文章最后强调选择 CMS 需根据项目需求（如结构化内容、动态查询或直观编辑器）进行权衡，并推荐 Hygraph 作为与 Astro 集成顺畅的 GraphQL 原生选项。