AI 摘要：张鑫旭的这篇博文展示了如何纯粹利用 CSS 锚点定位 (CSS Anchor Positioning API) 来实现两个元素之间自动相连的折线效果。文章从回顾锚点定位的设想开始，通过具体的代码示例详细阐述了定义锚点、计算线条位置、以及利用渐变和遮罩绘制连接线的实现原理。作者也坦诚指出了当前方案在特定对齐情况下的局限性，并简要提及了更复杂的解决思路，但认为其实现成本可能已超出 JavaScript (JS) 方案。

AI 摘要：本文是作者关于使用 CSS 锚点定位技术连接圆圈系列的第二部分，主要关注在连接两个圆圈的箭头内部计算并显示它们之间的距离。文章展示了改进后的 HTML 结构和 CSS 变量定义，并通过交互式 CodePen 示例演示了拖动圆圈时距离实时更新的效果，但目前该功能仅支持 Chrome 浏览器。

1. 引言与目的
• 前言回顾：基于前一篇关于连接圆圈的实现。
• 核心改进：在箭头形状内增加计算并显示两个圆圈之间距离的功能。
2. 技术实现细节
• HTML 结构：展示了使用 div 元素分别表示圆圈 (circle) 和连接箭头 (arrow) 的基本结构，其中 arrow 元素通过 x, y 等属性引用圆圈。
• CSS 变量：定义了用于控制箭头尺寸（--r, --a, --d）、圆圈与箭头间距（--g）以及颜色（--c）的关键 CSS 变量。
3. 交互式演示与局限性
• 实时更新：通过 CodePen 演示，用户可以拖动圆圈，观察距离值如何在箭头内部实时更新。
• 多圆圈示例：提供了一个包含多个圆圈的 CodePen 演示，展示了该技术在更复杂场景下的应用潜力。
• 浏览器兼容性：目前该功能仅在 Chrome 浏览器中支持。
4. 相关资源与拓展阅读
• 前作链接：提供了《Connecting Circles With Anchor Positioning》的链接，方便读者了解原始实现。
• 其他 CSS 技巧：列举了作者的其他 CSS 技巧文章，如《Fizz Buzz using Modern CSS (no HTML)》。

Css-Tip

Connecting Circles With Anchor Positioning II

Connect circles with arrows and show their distance using modern CSS

AI 摘要：Astro 框架背后的公司 The Astro Technology Company 宣布加入 Cloudflare，此举旨在确保 Astro 能够获得充足资源并重新聚焦于核心框架的开发。Astro 将继续保持开源、MIT 许可，并支持所有部署目标，包括 Cloudflare 之外的平台。这次结合是基于双方对“内容驱动型网站 (content-driven websites)”未来发展的共同愿景，Cloudflare 提供基础设施支持，而 Astro 则专注于构建高效的框架，共同推动 Web 技术进步，并已将重心回归到 Astro 6 和未来路线图的开发中。

Astro

The Astro Technology Company joins Cloudflare | Astro

The Astro Technology Company is joining Cloudflare! Astro remains open-source, MIT-licensed, and platform-agnostic. With Cloudflare's support, we're focusing 100% on building the best framework for content-driven websites. Astro 6 beta is available now.

AI 摘要：Chrome 145 引入了一项实验性功能——垂直标签页 (Vertical Tabs)，允许用户将浏览器标签页显示在侧边而非顶部。该功能目前处于 Beta 阶段，用户可以通过访问 chrome://flags/#vertical-tabs 启用相关旗标，重启浏览器后，再通过右键标签栏选择“Move Tabs To The Side”来激活，从而体验更高效的标签页管理，并且支持将侧边栏折叠。

1. Chrome 145 新功能介绍
• Chrome 145 实验性地增加了对垂直标签页 (Vertical Tabs) 的支持。
• 垂直标签页功能可以将标签页显示在浏览器侧边，而非传统顶部。
• 该功能还支持将标签栏折叠成最小形式，以节省屏幕空间。
2. 垂直标签页的启用步骤
• 用户需首先在 Chrome 145 (当前 Beta 版) 中启用一个功能旗标 (feature flag)。
• 具体步骤包括导航至 chrome://flags/#vertical-tabs。
• 将该旗标的下拉菜单设置为“Enabled”。
• 重启 Chrome 浏览器。
• 右键点击标签栏，并选择“Move Tabs To The Side”以应用垂直标签页布局。

Bram.us

Chrome 145 adds Experimental Support for Vertical Tabs

Vertical Tabs are available behind a flag in Chrome 145 (current beta)

AI 摘要：vercel-labs/agent-skills 是一个 GitHub 仓库，汇集了专为 AI 编程代理（AI Coding Agents）设计的“技能”（Skills）。这些技能通过预打包的指令和脚本，增强了代理在代码开发、审查和部署方面的能力。目前包含 react-best-practices（专注于 React/Next.js 性能优化）、web-design-guidelines（审查 UI 代码的无障碍性、性能和用户体验）以及 vercel-deploy-claimable（快速将应用部署到 Vercel）等核心技能。通过简单的命令行安装后，AI 代理可自动识别并利用这些技能来完成相关任务，极大地提升了自动化开发和部署的效率。

GitHub

GitHub - vercel-labs/agent-skills: Vercel's official collection of agent skills

Vercel's official collection of agent skills. Contribute to vercel-labs/agent-skills development by creating an account on GitHub.

很多朋友知道我是远程工作以后都表示了极大的羡慕。我想这里面很多的“羡慕”是有点不切实际的美好幻想，就和想象的诗和远方一样。线下工作还是远程工作并不是工作的第一性的原理。远程工作从来就不是完美的乌托邦，它只是剥开了“工作”的包装盒。它剥离了通勤的疲惫、办公室的政治、以及那些为了看起来很忙而进行的‘表演性工作’。当物理的束缚消失，工作便赤裸裸地还原为最本质的模样——不是你坐班了多久，而是你交付了什么。

AI 摘要：文章作者分享了半年多的远程工作体验，指出其带来了工作地点自由、人才密度提升、时间安排灵活、无需通勤及更舒适的个人工作空间等显著优势，甚至略微提升了工作效率。然而，远程工作也伴随着代价，主要体现在工作与生活界限模糊、团队社交与默契缺失（“茶水间时刻”消失）以及工作场景单一带来的“空间窒息感”。作者总结认为，远程工作并非完美乌托邦，它剥离了传统办公的束缚，回归到以交付结果为核心的本质，但要求个体建立更强的自我秩序以对抗孤独与边界模糊。

AI 摘要：作者回顾入职一个月在 LobeHub 进行的性能与开发体验优化。主要内容包括：替换 react-layout-kit、移除 CSS-in-JS 动态样式以降低渲染与内存开销；优化首屏返回速度并大幅提升消息列表渲染性能；重构 Tooltip、Popover 等基础组件；削减 Electron App 体积约 100MB；改进 i18n 与 IPC 开发体验；并计划未来将 Next.js 迁移至 Vite，以显著降低开发期内存占用。

innei.in

记 LobeHub 的性能和 DX 优化

距离去新的工作差不多一个多月了。这段时间刚入职，其实都挺忙的，而且公司也正在筹划发布 2.0 的版本，所以我加入的时候刚好算是个好时机（忙到起飞）。 这一个月基本都是在冲刺。我发现，我每次换一个公司，刚进去的一段时间都会去做一些项目中的性能优化，以及对一些开发体验不友好的事情，做过多的调教。 尤

AI 摘要：本文讲述了作者在使用 AI 编码代理开发 Outlyne（一个 AI 驱动的网站构建器）过程中，遭遇的一个由 AI 代理错误删除注释后引发的隐藏 bug。该 bug 导致应用程序中出现了无限的 React 组件递归渲染，并通过 React 19 的 <Activity> 组件巧妙地隐藏起来，直到用户浏览器因内存耗尽而崩溃。作者通过深入调试，最终找到了问题的根源，并强调了将关键代码约束（structural invariants）转化为自动化测试的重要性，而非仅仅依赖注释。

AI 摘要：本文通过基准测试对比了 JavaScript 中 Array of Objects (AoS) 和 Object of TypedArrays (SoA) 两种数据存储模式的性能。实验发现 SoA 模式比 AoS 模式快 4 倍。文章深入分析了这种性能差异并非仅源于 TypedArrays 的优势，而是多种因素共同作用的结果，包括对象属性查找开销、内存布局、缓存效率以及循环开销等。最终结论是，消除对象开销、减少循环迭代次数、利用属性访问提升（property access hoisting）以及 TypedArray 提供的性能保证是 SoA 模式性能更优的关键。

AI 摘要：本文全面介绍了 Vitest Browser Mode，这是一种在真实浏览器环境中运行前端测试的新兴技术。它结合了端到端（E2E）测试的真实性与组件测试的隔离性，能够直接利用所有 Web API，无需模拟，并提供可视化的调试界面。作者预测 Vitest Browser Mode 将在未来几年内成为前端工程师必备的测试工具。文章详细阐述了 Vitest Browser Mode 的工作原理、测试编写方式（类比 React Testing Library 和 Playwright）、核心概念、配置方法（推荐使用 Playwright provider）、安装步骤以及如何运行测试，并提供了一个完整的示例。

AI 摘要：本文详细介绍了 HTML 中用于管理文本换行的四种主要方式：<br> 元素、<wbr> 元素、­ (soft hyphen) 字符以及   (non-breaking space) 字符。文章分析了每种方法的适用场景、优缺点，并强调了在大多数情况下，CSS 提供了更强大、更灵活的解决方案，例如使用 display 属性、overflow-wrap、text-wrap 和 white-space 等 CSS 属性来控制文本的换行和断行行为，以提升内容的可访问性、可维护性和用户体验。

Them’s the Breaks - HTMHell

A collection of bad practices in HTML, copied from real websites.