#codepen #前端 #CSS
Creepy Button

"这个按钮在监视你"。从 Jon Kantner 这款俏皮的按钮下面探出头来，你会发现一双卡通眼睛正在跟踪你的一举一动👀。

#Newsletter #前端 #周刊更新
周刊第 16 期！ 这周给网站加上了无需后端的搜索和友链页面，好用的。
但是因为还没想好用什么域名比较好，所以还是预览版（要不叫 blog.cosine.ren 得了）
计划在没有后端的情况下把网站功能完善，然后再逐步加上有后端的功能，这样没后端的也好部署，就像以前用 hexo 的体验一样。
FE Bits Vol.16｜Cloudflare 事故报告出炉，CSSWG 确认 Masonry 布局语法 grid-lanes

cos

FE Bits Vol.16｜Cloudflare 事故报告出炉，CSSWG 确认 Masonry 布局语法 grid-lanes | 周刊 | 余弦の博客

本期：Git 2.52 首次引入 Rust；Cloudflare 故障；Angular v21 聚焦 AI；CSS 进展：Masonry grid‑lanes、Chrome 144 锚点变换感知。

#优质博文 #css #前端 #纹理 #设计
网站： https://paulsmith.github.io/classic-mac-patterns/
介绍： Classic 8×8-pixel B&W Mac patterns

AI 摘要：介绍了由 Paul Smith 制作的 Classic Mac OS System 1 背景图案，这些极小尺寸的复古像素图案可通过 CSS background-repeat 实现无限平铺效果。尽管源自经典的 Mac OS 设计风格，但它们在现代网页中依然有独特的美感和实用价值。

#优质博文 #CSS #前端 #Chrome #新特性
Anchor Positioning is transform-aware in Chrome 144+

AI 摘要：文章介绍了 Chrome 144 对 CSS 锚点定位（Anchor Positioning）机制的改进：从这一版本起，锚点定位将基于元素的“变换后”边界框（transformed bounding box），而不是此前的“未变换”状态，这让拥有 CSS transform 的元素上浮层、提示框等组件能够准确定位。该更新遵循 CSS 工作组（CSSWG）的最新规范决议，修复了长期存在的视觉错位问题。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 功能更新背景
• Chrome 144 将 Anchor Positioning 改为对 transform 变换敏感（transform-aware）
• 之前版本锚点计算基于未变换的边界框，导致定位错误

2. 技术细节与实现变化
• 新行为参考 CSSWG 规范修订（见相关 issue 链接）
• 更新后 tooltip、浮层等会根据元素的变换后位置进行定位

3. 实例与视觉演示
• 作者通过两个锚点的对比演示了旧版与新版定位差异
• Chrome 144 截图中两个 tooltip 均能正确跟随 transform 后的锚点

author Bramus!

Bram.us

Anchor Positioning is transform-aware in Chrome 144+

Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed ancho

#碎碎念
感觉我遇到的人都很给我情绪价值，同事会说修这么快牛逼，接的救火外包的时候会被说哇塞太强了超级前端，遇到的陌生人会说哇塞我看过你的博客 / GitHub 好眼熟，很强，学弟学妹会说学姐真好
有时候只要一点点肯定就会很开心
₍˄·‌༝·‌˄*₎◞ ‌‌

但是对象抑郁症的时候就不会这样，抑郁的时候会记得的都是那些不好的事情，那些好的瞬间都不记得了，流走的都很快，感觉就很悲伤，心疼每一个得抑郁症的。

好在现在相对来说好一些了。

#碎碎念 #折腾
救火救了一天……晚上才有空给这小破站新加了个友链页面
好吧，设计上没有沿用之前的主题，没准哪天看不顺眼了接着换样式呢。
https://space.cosine.ren/friends

#CSS #前端 #新特性 #tip

虽然发过那么多次 CSS 新特性的博文推荐，但是在项目中实际用上的没那么多，决定开个新 tag 记录一下平常真在项目里用上了的小 tip！

CSS scroll-state 用来渐进式的增强滚动容器底部的羽化遮罩时还是很好用的～

refs:
1. Adaptive Alerts (a CSS scroll-state Use Case)
2. CSS @container scroll-state 容器滚动查询
3. Chrome 133 Goodies

 /* https://github.com/parcel-bundler/lightningcss/issues/887 */
  .scroll-feather-mask {
    container-type: scroll-state;
  }
  @container scroll-state(scrollable: bottom) {
    .scroll-feather-mask::before {
      content: '';
      background: linear-gradient(to bottom, transparent 0%, var(--gradient-bg-start) 70%, var(--gradient-bg-start) 100%);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      display: block;
      height: 5rem;
    }
  }

#优质博文 #CSS #设计系统 #可访问性 #前端 #WCAG
Tooltip Components Should Not Exist

AI 摘要：文章主张 <Tooltip> （提示框）组件在设计系统中不应独立存在，因为它常被误用，导致可访问性和一致性问题。作者认为应通过更高层级的组件（如带有 title 属性的 <Button>、<IconButton>、<InfoIcon> 等）来统一提示行为。这种做法能确保键盘操作可达性、用户体验一致性，并减少错误使用的可能，是“限制创造力反而带来更好设计”的典型案例。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 问题背景：为什么 Tooltip 容易被误用
• Tooltip 在网页中常被视为简单组件，但其实现需兼顾可访问性（Accessibility）与交互性（Interactivity）。
• 很多设计系统提供 <Tooltip> 组件，却被开发者误用或滥用。
• 根因在于这是一个抽象层级过低的组件，不易强制正确实践。

2. 键盘交互问题（Keyboard Interactivity）
• 非交互元素（如纯图标或徽章）包裹 Tooltip，导致使用键盘导航的用户无法触发提示。
• 举例：Material UI 的 <Tooltip> 示例在非交互元素上无法聚焦。
• React Aria 提供更佳方案：不为非交互元素显示 Tooltip，并通过 <Focusable> 组件确保焦点可达。

3. 用户体验一致性（Least Surprise Principle）
• Tooltip 容易出现在不合适的位置，如句中词语或无法预测的界面处。
• 缺乏一致性会让用户预期混乱、有的图标无说明、有的却多余提示。
• 结论：Tooltip 使用应可预测且统一。

4. 替代方案与系统设计（Higher-level Pattern Components）
• 不提供通用 Tooltip，而是通过更高层级组件统一规则：
• <Button> 或 <Link> 增加可选 title 属性。
• <IconButton> 强制要求 title 属性，保证含义明确。
• <InfoIcon> 明确显示“更多信息”图标，内部控制提示逻辑。
• <InfoText> 组件强调文字说明，可聚焦且视觉可区分。
• 通过这些约束可提升一致性与可访问性。

5. “限制反而带来创造力”的思考
• 限制 Tooltip 的使用让团队重新思考信息展示方式。
• 空间不足时，应改进界面而非“藏信息”。
• 设计系统的目标：减少误用、提升用户体验。

author TkDodo

tkdodo.eu

Tooltip Components Should Not Exist

A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences.

#前端 #react #新动态
React 2025 年现状调查：React 生态系统年度调查又开始了。提交截止日期为 11 月 25 日，也就是下周二。感兴趣的可以在这里查看 2024 年的调查结果

这种调查的填写过程中其实能学到不少东西。类似之前的 JS / CSS 的年度调查

State of React 2025

Take the State of React survey

#优质博文 #工作经验 #编程思维
谈谈工作中的犯错 | CatCoding

AI 摘要：这篇文章以作者和同事在实际工作中犯下的错误为线索，从信息泄露、退款接口、并发错误到配置事故等多个案例，讲述了程序员在日常开发与运维中容易犯的典型错误。文章强调“错误是最好的学习机会”，并提出以防御式编程 (Defensive Programming)、完善测试机制和安全意识为核心的改进思路。最后，作者呼吁保持敬畏之心，用系统化思维减少人为失误对团队和公司造成的损失。

author 程序员的喵

CatCoding

谈谈工作中的犯错 | CatCoding

All about coding and writing

#优质博文 #AI #prompt #agents

How to write a great agents.md: Lessons from over 2,500 repositories

AI 摘要：本文分析了超过 2500 个公开仓库中的 agents.md 文件，归纳出优秀自定义代理（Custom Agent）的关键写法：让每个代理具备明确角色、具体命令、严格边界与真实示例。成功的代理不是“通用助手”，而是专职专家，如 @docs-agent 负责文档、 @test-agent 负责测试。掌握六个核心领域（命令、测试、项目结构、代码风格、Git 工作流、边界）即可写出高效 agent 文件。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 背景与概念
• GitHub 推出新特性：以 agents.md 文件定义自定义代理（Custom Agent），让 Copilot 从通用助手变成具备明确角色的团队成员。
• 每个代理文件定义 persona（角色设定）、技能栈 (tech stack)、可操作命令、代码风格、及禁止行为。

2. 从 2500+ 文件分析得到的经验
• 成功的 agents 明确任务（如 documentation、testing、security），而失败的往往太模糊。
• 要点总结：
• 早放命令：在文件开头就定义可执行命令（含参数/flag）。
• 示例优于解释：展示代码风格比写长篇说明更有效。
• 明确边界：清楚列出“能做”“需确认”“禁止”的操作。
• 标注技术栈：注明版本与依赖，如 “React 18 + TypeScript + Vite + Tailwind CSS”。
• 六大领域覆盖：commands、testing、project structure、code style、git workflow、boundaries。

3. 优秀 agents.md 示例解构 (@docs-agent)
• 文件结构：YAML frontmatter 描述 → 角色与任务 → 项目知识 → 可用命令 → 写作准则 → 三层边界（Always / Ask first / Never）
• 成功原因：具体 persona、可执行命令在前、展示项目知识、有实例代码、边界分层清晰。

4. 构建你的第一个 agent
• 建议从小而具体的任务开始，如编写函数文档、添加单元测试、修复 linter 报错。
• 组成要素：名称、描述、persona 定义。
• Copilot 可辅助生成初稿，用 IDE 编辑 .github/agents/test-agent.md 并微调。

5. 实用代理类型推荐（六类）

• @docs-agent：生成文档，读 src/ 写 docs/。
• @test-agent：编写测试，永不删除失败测试。
• @lint-agent：执行格式修复，仅限风格层面修改。
• @api-agent：搭建 API 接口，修改数据结构需批准。
• @dev-deploy-agent：仅部署到开发环境，操作需批准。
• @security-agent（隐含）：执行安全分析或代码扫描。

6. 模板与最佳实践
• Starter template 提供完整结构：frontmatter、persona、project knowledge、tools、standards、boundaries。
• 强调命名规范、风格示例与边界设置的重要性。

7. 结论与启示
• 优秀 agent ≠ 冗长 prompt，而是清晰角色手册 (operating manual)。
• 核心在于：明确 persona、具体命令、真实样例、明确定义边界。
• 通过迭代完善 agent，让 Copilot 团队协作更像真实开发团队。

author Matt Nigh

The GitHub Blog

How to write a great agents.md: Lessons from over 2,500 repositories

Learn how to write effective agents.md files for GitHub Copilot with practical tips, real examples, and templates from analyzing 2,500+ repositories.

#优质博文 #CSS #前端 #动画 #新特性
More CSS random() Learning Through Experiments

AI 摘要：这篇博文由 Chris Coyier 撰写，通过一系列小实验展示了 CSS random() 函数的潜力与趣味。作者用它生成旋转星空、滚动视差(parallax)星空及基于滚动的点阵动效，探索随机数与动画、滚动时间轴 (scroll-driven animation) 以及 steps() 函数的互动效果。虽然目前仅 Safari 技术预览版支持该功能，但文章提供了可视化演示和代码片段，展示了 random() 带来的新创意空间和未来样式系统的潜能。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 引言与 random() 函数现状
• 作者介绍 CSS random() 函数的出现与规范化
• 指出目前仅 Safari Technical Preview 支持
• 强调实验性质：探索随机性在视觉设计中的可玩性

2. 旋转星空背景（Rotating Star Field）
• 灵感来自游戏 BALL x PIT 的旋转星空视觉
• 通过一系列定位在中心的 <div> 构建星体容器
• 使用 random() 控制星距、高度与旋转角度实现随机布局
• 结合 CSS 动画让内外圈星星反向旋转，形成动态层次感
• 提供 Demo 示例

3. 滚动视差星空（Parallax Stars）
• 扩展星空概念，将运动与滚动事件绑定
• 随机分组不同星星移动速度（100px、200px、300px）制造深度感
• 利用 animation-timeline: scroll(root) 与 animation-composition: accumulate 控制滚动叠加动画
• 展示了如何通过原生 CSS 控制视觉差与滚动互动
• 提供 Demo 示例

4. 网格点水平线（Horizontal Rules of Gridded Dots）
• 探索 random() 与 steps() 的结合，用离散滚动帧创造“跳动式”动画
• 创建点阵 <div> 元素随机偏移，再在滚动中平滑对齐
• 使用 view-timeline 触发每个分隔条的独立动画范围
• 通过渐变色与对齐位置制造视觉满足的“入场”效果
• 提供 Demo 示例

5. 结语与对未来 CSS 的思考
• random() 带来动态纹理与自然随机性的设计潜力
• 讨论当前需大量 <div> 的实现代价，期望未来 CSS 原生支持“可样式化网格单元”
• 总结：CSS 的随机性为网页设计开辟更多创造性方向

author Chris Coyier

Frontendmasters

More CSS random() Learning Through Experiments

There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.

#碎碎念 #美食
昨天吃了一家湘赣木桶饭，在不起眼的一个拐角，老板娘超热情，热情到我们两个社恐 i 人有点不知所措的程度。
昨天不自量力的点了一份68的烤鱼，以为按照吃其他家烤鱼的经验来说，应该也不会很多，结果上来的时候我人傻了，配菜和料多的要溢出去了，老板娘还在为让我们等久了不停道歉送了罐王老吉，中间加了 n 次火，那是真热情。
饭也超好吃，特辣是真的辣，妲喵点了个特辣的鱼香肉丝，发现是真的爆炸辣（以前附近的店吃到的都是广东辣hhhh），江西的辣。于是决定之后的外卖都点他们家了。
然后今天中午点的土豆牛肉饭也是香迷糊了，现炒的热乎的家常菜外卖（离家就几百米）。
木桶饭，好！以前怎么没想到吃这个。

#优质博文 #CSS #前端 #设计 #新特性
CSS squircle corner-shape preview tool

一个可交互的小工具，实时体验 CSS 新属性 corner-shape 带来的新圆角效果。可以通过直观调整圆角参数，形成从方形到 squircle 再到圆形的连续过渡，该特性目前仍处于实验阶段，仅在最新版本的 Chrome 中支持（2025 年 11 月）

www.squircle.style

CSS squircle corner-shape preview tool

Preview CSS squircle corner-shape in real time.

#优质博文 #git #开源 #性能优化 #rust #版本管理 #新动态
锈化！都给我锈化！
Highlights from Git 2.52

AI 摘要：Git 2.52 是一次重要更新，带来了全新的 git last-modified 命令，大幅提升了目录级变更追踪性能。改进了 git maintenance 的几何级（geometric）打包策略，使大型仓库的维护更高效。除此之外，还新增了 git repo 命令用于仓库信息查询，引入 Rust 代码优化内部实现，并为 Git 3.0 的默认分支名更改（从 master 到 main）和 SHA-256 过渡打下基础。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. Tree-level 责任追踪
• 新增 git last-modified 命令，用于快速查询目录中每个文件最后一次被修改的提交。
• 相比传统 git log + 脚本方式速度提升约 5 倍以上。
• 功能源自 GitHub 内部工具 blame-tree，现上游化至 Git 主干。
• 支持未来改进，比如结果缓存的磁盘格式。

2. 高级仓库维护策略
• git maintenance 命令新增 geometric 任务，实现高效打包与逐步清理策略。
• 该模式基于几何打包（geometric repack），在性能和空间之间取得平衡。
• 相关技术源自 GitHub 自用工具，从 Git 2.33 起逐步完善。

3. 其他核心更新与实验功能
• 新增 git refs list 与 git refs exists 子命令，统一引用（reference）操作接口。
• 全新实验命令 git repo，整合查询仓库结构、对象与格式信息的能力。
• 性能显著提升：git describe、git log -L、git ls-files 等命令获优化。
• Bloom filter 算法改进，支持更复杂的路径匹配（pathspec）。

4. 迈向 Git 3.0 的过渡性变更
• 默认分支配置 init.defaultBranch 将在 3.0 版改为 “main”。
• 引入 SHA-256 作为对象哈希算法的未来默认值，兼容 SHA-1 环境。
• 开放 WITH_BREAKING_CHANGES 构建标志，提前体验 3.0 功能。

5. Rust 支持与内部重构
• 可选启用 WITH_RUST 编译选项，部分内部功能迁移至 Rust 实现。
• 当前用于变量宽度整数 (variable-width integers) 编码/解码。
• 为未来更多核心模块迁移铺路，Git 3.0 将全面要求 Rust。

6. 细节改进与工具增强
• sparse-checkout 新增 clean 子命令，便于清理异常文件状态。
• 多处底层库（特别是 xdiff）获得性能优化补丁。
• 跨工具一致性与脚本可编程性进一步提升。

author Taylor Blau

The GitHub Blog

Highlights from Git 2.52

The open source Git project just released Git 2.52. Here is GitHub’s look at some of the most interesting features and changes introduced since last time.

Cloudflare 状态页面终于更新

目前已知全球多个地区间歇性爆炸，Cloudflare作为全球基础网络设施，影响多个网站。

CF目前正在按秒赔付企业

频道将在本条持续更新

北京时间 2025年11月18日：
20:13 部分已恢复
20:23 再次爆炸
20:51 部分已恢复
20:55 再次爆炸
20:57 部分已恢复
20:59 再次爆炸
21:04 CF状态页面更新：在伦敦禁用了 WARP 访问
21:09 CF状态页面更新：我们已经确认了该问题，正在实施修复
21:13 CF状态页面更新：Cloudflare Access 和 WARP 已经恢复
21:30 持续了两个小时绝大部分依然没有恢复
21:35 CF状态页面更新： 为使用应用服务（Application Services）的客户恢复服务
21:58 CF状态页面更新： 为使用应用服务（Application Services）的客户恢复服务
22:03 X 网页版恢复

Cloudflare Status

🍀在花频道 🍵茶馆 📮投稿新鲜事

r/Cloudflare

#优质博文 #前端 #性能优化 #监控工具 #工程化
Effectively Monitoring Web Performance — Smashing Magazine

AI 摘要：本文系统阐述了如何制定一套有效的网站性能监测策略，从 Google 的核心指标 Core Web Vitals（包括 LCP、CLS、INP）出发，结合合成测试（Synthetic test）与真实用户监测（Real User Monitoring, RUM），构建可持续的性能优化循环。作者提出“识别 → 诊断 → 监控”三步法，强调在持续对比与回溯的过程中找出性能瓶颈，利用工具如 DebugBear 完成检测与验证，实现网站在用户端和技术端的双重优化。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 网站性能指标基础
• 无单一定义性能标准，推荐从 Google Core Web Vitals 入手，包括 LCP（Largest Contentful Paint）、CLS（Cumulative Layout Shift）、INP（Interaction to Next Paint）。
• 除核心指标外，还需分析技术层面指标（如服务器响应时间、页面体积），并可利用 User Timing API 自定义关键加载节点。

2. 合成数据与真实用户数据（Synthetic vs Real User Data）
• 合成测试环境可控，便于重现和分析性能问题。
• 真实用户监测基于实际访问数据，可洞见不同用户群体的真实体验。
• 建议双管齐下：Synthetic 提供细节层面的技术分析，RUM 补全真实使用场景的覆盖。

3. 三步法优化流程
• Identify（识别）：通过用户数据发现加载缓慢页面，优先处理高访问量且体验差的页面。
• Diagnose（诊断）：分析瓶颈点，按指标类型分别使用 RUM 或 Synthetic 工具定位问题来源，如 LCP 图像加载、INP 交互事件延迟。
• Monitor（监控）：建立持续检测机制，监测变更效果并在性能回退（Regression）时即时响应。

4. 深入分析阶段
• 负载时间调试：Synthetic 数据帮助精确定位加载瓶颈，可做实验验证优化方案。
• 交互延迟诊断：RUM 数据揭示实际用户交互的慢响应来源，例如脚本阻塞或后台任务负载。

5. 性能回退检测与应对策略
• 合成数据回退：通过前后 Test 对比结果，定位资源变更带来的性能波动，例如新增图片竞争带宽。
• 真实用户回退：需区分访客来源变化（如广告流量）与技术改动，通过分析 LCP/INP 子部分（subparts）锁定性能劣化来源。

6. 综合结论
• 单次测试仅是起点，持续的性能监控体系才能确保长期高效。
• 工具如 DebugBear 可整合 Synthetic 与 RUM 数据，实现可视化性能追踪与优化决策。

author Matt Zeunert

Smashing Magazine

Effectively Monitoring Web Performance — Smashing Magazine

There are lots of tips for [improving your website performance](https://www.debugbear.com/blog/improve-website-performance?utm_campaign=sm-10). But even if you follow all of the advice, are you able to maintain an optimized site? And are you targeting the…