RSS

本期网址 https://blog.cosine.ren/post/weekly-26 RSS。 Discord 群 fe-bits-weekly，欢迎关注。 今天是 2026 年 2 月 8 日，星期天。 虽然发的有点晚，已经 0 点了。 就快要过年放假啦！愉悦地停更俩星期！ 这周忙自己的项目很愉悦，给我的博客新增了以前的 shoka 语法兼容和歌单版块，全部可开关。 这周把心心念念的博客歌单和播放器加上了，并且添加了之前 Hexo Shoka 主题的 Markdown 扩展语法兼容支持，可在这里查看全部新增的语法演示：Shoka 主题 Markdown 语法演示 https://github.com/cosZone/astro-koharu/releases/tag/v2.6.0 所以……现在我要激情安利山山歌单了! https://blog.cosine.ren/music 并且这周给 Moe Copy AI v0.3.5 新增了完整的 Prompt Template 管理功能，支持预设模版和自定义模版。之前还添加了深色模式！（是的没错都是我自用的功能） https://moe.cosine.ren/docs/changelog 社区动态 GitHub 正在讨论开源项目维护者如何应对日益增加的低质量、AI 生成的拉取请求（PR），可能包括允许用户完全禁用 PR，或者至少限制 PR 只能由协作者访问等操作，可以在这里参加讨论：Exploring Solutions to Tackle Low-Quality Contributions on GitHub Gatsby v5.16 支持 React 19，Rspress 2.0 重大升级 New to the web platform in January：汇总了 2026 年 1 月 Web 平台的重大进展，包括 Chrome 144 和 Firefox 147 稳定版的发布。其中 CSS 锚点定位 (CSS Anchor Positioning) 和 Navigation API 随着 Firefox 的支持，都正式达到 Baseline Newly Available（新可用基准）状态。此外，Chrome 144 引入了期待已久的 Temporal API、声明式的 <geolocation> 元素以及用于自定义页内搜索样式的 ::search-text 伪元素 互联网档案馆发布插件，解决 40% 的互联网死链问题 - 小众软件：互联网档案馆（Internet Archive）推出了 WordPress 插件 Link Fixer，旨在解决互联网日益严重的“链接腐化”（Link Rot）问题。该插件通过自动检测失效的 URL（如 404 错误），并引导用户访问 Wayback Machine 中存储的历史网页快照，据称能修复约 40% 的死链。 ViteLand 最新消息：2026 年 1 月回顾 https://voidzero.dev/posts/whats-new-jan-2026 品牌与设计统一 实现了 VoidZero 旗下所有项目（Vite, Vitest, Rolldown, Oxc）的视觉身份统一，发布了全新的官网和 Logo。 更新了 Vite 的启动模板（Starter Templates），将新品牌标识内置其中。 强调了工具链的深度集成：Vite 8 在底层直接使用 Rolldown 和 Oxc，实现了一致的开发者体验。 核心项目进展 Vite：自 2020 年发布以来，累计下载量超过 30 亿次；React 服务端组件（React Server Components, RSC）插件进行了优化，以支持 TanStack Start 等框架。 Vitest：启动 4.1 测试版（Beta），引入测试标签（Test Tags）功能，并支持通过禁用 viteModuleRunner 选项在脱离 Vite 的情况下运行。 Rolldown：正式达成候选发布版（Release Candidate, RC）里程碑，API 进入稳定阶段；推出“Lazy Barrel Optimization”，在 AntDesign 等场景下可减少 92% 的模块编译，提速 2 倍。 Oxc：Oxlint 支持 oxlint.config.ts 动态配置；Oxfmt 实现了与 Prettier 100% 的一致性（Conformance），并新增了 Tailwind CSS 类名排序功能。 社区动态与生态 榜单表现：在 2025 JavaScript Rising Stars 榜单中，Vite、Oxc、Rolldown 和 tsdown 均名列前茅。 生态迁移：Hugging Face、Turborepo 和 Lichess 等知名项目宣布从 ESLint/Prettier 迁移至 Oxlint/Oxfmt。 周边工具：社区推出了基于 Oxc 的代码体积优化工具 jsshaker 以及 Oxlint 的终端用户界面工具 oxlint-tui。 文章 A Percise Parser：本文介绍了一个因硬编码地区数值格式（Locale Formatting）并使用拙劣的字符串操作，导致国际化失效的 JavaScript 解析器（Parser）案例。 Solving Shrinkwrap: New Experimental Technique Performance-Optimized Video Embeds with Zero JavaScript：本文介绍了一种利用原生 HTML 标签 <details> 和 <summary> 来优化视频嵌入性能的方法。通过这种方案，开发者可以在完全不使用 JavaScript 的情况下实现视频的按需加载。 CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions：介绍如何利用 CSS 原生的 @scope 规则来替代复杂的 BEM 命名规范或繁重的 CSS 框架，实现更简洁、可维护的样式隔离。 CSS Bar Charts Using Modern Functions | CSS-Tricks：本文介绍了如何利用 CSS 现代函数 sibling-index() 和增强后的 attr() 函数，以更简洁、高效的方式构建纯 CSS 柱状图。 新特性 Nice Select · February 3, 2026：本文展示了如何利用最新的 CSS 特性（如 appearance: base-select）在保持原生无障碍性的同时，打造高度可定制且视觉华丽的 <select> 下拉组件。 https://codepen.io/editor/argyleink/pen/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1 Drawing Connections with CSS Anchor Positioning - Roland Franke：锚点定位真好玩儿吧。在无需 JavaScript 的情况下实现 UI 元素（如评论与其回复）之间的视觉连线。 https://codepen.io/ROL4ND909/pen/gbMxLdL 工具 jamiepine/voicebox 一款由 Qwen3-TTS 驱动的开源、本地优先语音克隆与合成工具 Codepen 与趣站 不规则网格上带有凹面圆角的卡片 https://codepen.io/thebabydino/pen/WbxpKPQ “卡片和按钮之间的缝隙实现了真正的透明效果。没有尖角，全部都是圆角。除了 .jpg 格式的卡片背景图外，没有其他图片。卡片形状会根据按钮的大小和形状进行调整——您可以尝试只更改按钮元素的字体大小来查看效果。这不需要任何 JavaScript 代码——一切都归功于 CSS 子网格的神奇功能！” by Ana Tudor 带有自定义 select 的文件夹堆叠 https://codepen.io/captainbrosset/pen/dPXdgae 现在选择元素是可以自定义的 ，Patrick Brosset 向我们展示了点击后会弹出的文件夹堆叠，这给我们带来了很多乐趣。 二进制时钟 https://codepen.io/prisoner849/pen/zxBpPYW prisoner849 在这段 Three.js 代码中展示了一款精美的时钟。即使你不懂二进制时间 ，也能欣赏它的美——拿起时钟转动一下，从各个角度欣赏它塑料材质的光泽。 Refs JavaScript Weekly #771 Codepen Spark #495

Jellyfin <3 Samsung, beating a dead lobster, and the birth of a self-hosted meme

详细教程：在 Hetzner CX33 云服务器上部署 Proxmox Backup Server，配置 Hetzner 对象存储作为后端，并与 Proxmox VE 集成实现自动化备份策略

本期网址 https://blog.cosine.ren/post/weekly-25 RSS。 Discord 群 fe-bits-weekly，欢迎关注。 今天是 2026 年 2 月 1 日，星期天。 已经 2 月了啊，好快哦。 个人动态 碎碎念 看了超时空辉夜姬，给我看的好感动……好久没看到这么令人感动的国宴了…… 简直是神，还是真百，推荐所有人观看美少女贴贴，在我心里是作画运镜无死角全方面的神作～ 撒糖撒糖还是撒糖，后劲也大，全程都在库库截图，我没有什么不满的我觉得美少女特别有活力的贴贴特别好。 上一次看完有如此感慨的还是游戏人生剧场版……但是那个高度…… 这部的优缺点都很明显，在强无敌的作画下剧情的平平无奇反而变成了短板，但是我觉得还是瑕不掩瑜，非常非常值得一看！ 泛式说得好啊： https://www.bilibili.com/video/BV1Fcz1BZEVz 这个杂谈说得也很好： https://www.bilibili.com/video/BV1w8zrBHEZC 项目更新 给博客做了以下更新。 https://github.com/cosZone/astro-koharu/releases/tag/v2.5.0 https://github.com/cosZone/astro-koharu/releases/tag/v2.5.1 给 Moe Copy AI 插件做了深色模式，还在持续优化中。 https://github.com/yusixian/moe-copy-ai/releases/tag/0.3.3 社区动态 When will CSS Grid Lanes arrive? How long until we can use it?：探讨了 CSS Grid Lanes（原生瀑布流布局）在各浏览器的实现进度，并详细介绍了如何通过渐进增强（Progressive Enhancement）技术在当下提前使用这一新特性。 Safari 已经在技术预览版中支持 Firefox 在 2020 年最早实现了早期草案，目前正致力于更新至最新的规范语法和 flow-tolerance 属性 Chrome 与 Edge 的加入：Chromium 团队在经历了语法争议后，目前已达成共识并正在更新其实现代码，标志着三大引擎达成一致。 Yarn 6 预览版发布，为了极致性能正转向使用 Rust 语言重构，预计 2026 年 Q3 发布稳定版。 Try text scaling support in Chrome Canary：介绍 Chrome Canary 中新增的 <meta name="text-scale"> 标签，该功能允许网页响应移动端操作系统的全局字体大小设置。 React 紧急发布 19.2.4、19.1.5 和 19.0.4 版本，修复了 React Server Components (RSC) 中未完全解决的拒绝服务 (DoS) 漏洞：Denial of Service Vulnerabilities in React Server Components (真累啊) Vercel 的最新研究表明，在针对 Next.js 16 开发的最新评估中，他们发现将 8KB 的文档索引塞进 AGENTS.md 文件中效果更好，因为 skills 无法可靠地触发。 SolidJS 创始人 Ryan Carniato 发布 JavaScript Frameworks - Heading into 2026，分析当前充满活力的前端开发领域。 优质文章 Unstacking CSS Stacking Contexts — Smashing Magazine：非常好的好文章！条理清晰，深入剖析 CSS 层叠上下文 (Stacking Contexts) 的工作原理，解释为什么 z-index 会失效，并提供实用的调试技巧与解决方案。被安利了 Better CSS Stacking Contexts 这个 vscode 插件。 There is No Need to Trap Focus on a Dialog Element：介绍在使用原生 <dialog> 元素时，为什么开发者不再需要手动实现复杂的焦点陷阱（Focus Trap）逻辑。 From pixels to characters: The engineering behind GitHub Copilot CLI’s animated ASCII banner：本文深入探讨了为 GitHub Copilot CLI 开发 3 秒 ASCII 动画背后的复杂工程实现，涵盖了终端渲染限制、色彩一致性及无障碍设计。 10 Tips for Claude Code https://x.com/bcherny/status/2017742759218794768 Claude Code 的开发者 Boris Cherny 分享了其使用 Anthropic 最新推出的 Claude Code 命令行工具的进阶技巧，涵盖自动化、调试、学习模式及多代理协作。 1. 自动化与技能扩展（Skills & Automation） 建议将每日重复操作转化为自定义技能（Skills），并提交至 Git 仓库供跨项目复用。 创建 /techdebt 指令，在每个会话结束时运行，用于发现并消除重复代码。 2. 高效调试与流程集成（Debugging & CI/CD） 启用 Slack MCP（Model Context Protocol），直接将 Slack 中的 Bug 讨论贴入 Claude 进行修复，减少上下文切换（Context switching）。 授权 Claude 自动修复失败的 CI 测试，或通过分析 Docker 日志定位问题，无需微观管理（Micromanage）。 3. 提示词工程与代码评审（Prompting & Code Review） 让 Claude 扮演评审者（Reviewer），通过“对我提交的代码进行质询，直到通过测试再创建 PR”等提示词提升质量。 要求 Claude 对比主分支（Main branch）和功能分支的行为差异，证明代码的有效性。 4. 环境配置与工具优化（Environment & Setup） 推荐使用 Ghostty 终端以获得更好的同步渲染和 24 位色彩支持。（我用 warp 也很好用） 使用 /statusline 自定义状态栏，实时显示上下文使用情况（Context usage）和当前 Git 分支。 5. 复杂任务与数据分析（Subagents & Analytics） 在请求中加入 “use subagents” 指令，让 Claude 投入更多算力（Compute）处理复杂问题，并保持主代理上下文整洁。 通过编写技能调用 BigQuery (bq) 等命令行工具，直接在 Claude Code 中进行实时数据指标分析。 6. 深度学习与知识内化（Learning & Understanding） 在 /config 中开启“解释模式”（Explanatory/Learning output style），让 Claude 解释代码变更背后的原因（Why）。 (我觉得这个解释模式真的好用) 利用 Claude 生成视觉化的 HTML 演示文稿（Slides）或 ASCII 图表，辅助理解陌生的代码库或协议。 构建间隔重复（Spaced-repetition）学习技能，通过问答形式填补知识盲区。 新特性 如何为新的 ::search-text 和其他高亮伪元素设计样式：介绍 Chrome 144 新推出的 ::search-text 伪元素，以及如何利用 CSS 相对颜色语法统一美化各种文本高亮样式。 告别 insertBefore，使用 moveBefore 移动 DOM 元素 介绍了原生 DOM 新 API moveBefore 的用法、优势及其在 Web Components 中的应用，并对比了传统 insertBefore 的局限性。 工具 agentation：一款为 AI Agents 设计的视觉反馈工具，通过点击并添加标注，随后生成包含元素路径、CSS 选择器（Selectors）、位置等详细上下文的 Markdown 文本。文档| Tweet 这个 MarginLab 挺有意思的，一个针对 Claude Code 和 Codex 的独立性能监控工具，模拟真实用户编码场景来监测大模型的“降智”， https://x.com/vikingmute/status/2017495789443199126 趣站与 Codepen 精选 React Tilt Button - 3D Tactile React Button Component 好喜欢这个！感觉是很巧妙的设计。 https://react-tilt-button.vercel.app/ GitHub 源码 https://github.com/archisvaze/react-tilt-button Super Monkey Ball 开发商 Twilight 将世嘉经典游戏《超级猴子球》移植到网页上 ，做得非常出色且运行流畅。 https://bsky.app/profile/twilightpb.bsky.social/post/3mdbynphtbc2l https://monkeyball-online.pages.dev/ 可以查看源代码。 Typewriter Web Component V2 https://codepen.io/luis-lessrain/pen/EaKjXwB 目前该项目仅在 CodePen 上提供，但它的效果非常出色。演示允许您交互式地启动、暂停/恢复、完成和重置动画。此外，还有一个进度条和按钮，可以跳转到特定的进度点。 Refs Frontend Focus #726 React Status #460

Lobster-themed AI assistants, milestone releases, and the latest NAS operating system launch

深入解析IX互联网交换中心的工作原理，对比IX与传统专线的优缺点，并实测Mkcloud的广港IEPL、沪日IPLC及IX专线产品性能表现

本期网址 https://blog.cosine.ren/post/weekly-24 RSS。 Discord 群 fe-bits-weekly，欢迎关注。 今天是 2025 年 1 月 25 日，星期天。 个人动态 碎碎念 以下是一些碎碎念杂谈： 越用 AI 会越有种「啊他果然取代不了我」的感觉，尤其是他犯蠢的时候。 但是很多时候又很方便确确实实省下来了很多摸鱼时间，又爱又恨的感觉。 也不奇怪很多程序员会排斥 AI 写代码，因为架构上真的很容易犯蠢，写的代码但凡是个代码洁癖都会感觉哎呦还不如自己来写，但是重复性业务工作真的太省劲了。 虽然下沉市场和资本感觉都在 AI 狂欢，但我体感上的话，感觉其实平常程序员的生活是从写代码变成审计划和审代码改代码了，更爽了，写自己的东西更有劲了x ai 真的容易堆屎山，我现在每次写完让 opus 4.5 review 一遍 codex review 一遍都差不多了我再看才能好点儿，不过他们自己 review 的效果还是挺好的。 PS: 仅限前端/ Swift 领域，后端我只能通过同事的使用感受推测。 项目更新 https://github.com/yusixian/moe-copy-ai 我很喜欢现在 Moe Copy AI 的内容提取功能～ 现在可以直接选中提取推文串进行总结的，准备下个版本改改加一下常用的选择器，现在还是直接选中元素提取出来进行总结。 然后这周 Moe Copy AI 发了 v0.3.0，太感动了终于有大佬 @hakadao 帮忙改了一下最开始 AI 写的一坨的 UI 了，工作量巨大，现在 UI 清爽多了！（#26） 虽然现在还在陆续改，但是我也看不下去之前的了所以直接推了一版（ 更新日志 | 下载 博客更新 然后博客更新这边，最近把我们的 Electron 应用配置上了 Mac 端的 TestFlight，用 GitHub Actions 实现自动化构建和上传。踩了不少坑，记录一下整个流程。 用 GitHub Actions 自动化 Electron 上架 MAS（Mac App Store） 然后给 astro-koharu 添加了无后端的编辑功能，只在本地 dev 模式有，还打算加一个无后端管理本地文章的 CMS 功能，灵感来源于上周发的 OS 即 CMS 文章 BlockNote 是好用的，基于 Prosemirror 和 Tiptap。 另外现在可以自动创建不存在的分类映射了，也可以改～ 社区动态 Announcing Rolldown 1.0 RC：Rolldown 正式发布 1.0 发布候选版本（RC），作为 Vite 未来的核心打包工具，它在保持 Rollup 兼容性的同时，凭借 Rust 实现了 10-30 倍的速度提升。此 RC 标志着 API 的稳定性。在 1.0 之前不会有任何破坏性改动。 Vercel 公布了 skills.sh，是一个用于查找和共享代理 Skills 的网站，其中 Remotion 也出了 skill，现在只需要使用 Claude Code 即可通过编程方式制作视频！通过 npx skills add remotion-dev/skills （Source Tweet1 | Tweet2） Using 100vw is now scrollbar-aware：从 Chrome 145 开始，如果根元素（而非 body ）设置了overflow: scroll，则在 vw 的大小中应考虑默认滚动条宽度，解决了长期以来因视口单位导致的网页多余水平滚动问题。该改进同样适用于 vh（对应水平滚动条）以及视口单位的小、大、动态变体（sv*, lv*, dv*） Anime.js v4.3 Anime.js v4.3 发布，引入强大的自动布局（Auto Layout）动画功能，支持平滑处理复杂的 CSS 布局变换。 这个真的好诶！跨框架造福前端人。 Introducing Auto Layout in Anime.js v4.3! 官方提供了 文档说明 和 发布日志，并在 CodePen 上发布了 示例集合 找了一个示例如下，太丝滑了： https://codepen.io/juliangarnier/pen/PwzmxwR 优质文章 不会编程的人能靠 AI 独立开发应用吗？：作者认为，AI 确实大幅降低了“将想法翻译成代码”的技术门槛，但“不会编程”、“靠 AI”和“应用”这些词语的边界远比想象中模糊。在与 AI 协作的过程中，使用者会不自觉地习得编程概念，AI 更多是作为博学但死板的“徒弟”或“翻译官”，帮助有逻辑、有想法的人实现愿景，而非代替思考和定义问题。 Inside Turbopack: Building Faster by Building Less：深入解析 Next.js 的新一代打包工具 Turbopack 如何通过增量计算（Incremental Computation）和细粒度缓存实现极致的开发响应速度。 The Incredible Overcomplexity of the Shadcn Radio Button：探讨了现代前端 UI 框架（如 Shadcn）如何将原本简单的原生单选按钮变得异常复杂，并呼吁回归 CSS 原生开发。 HTTP Archive 2025 Web Almanac | CSS-Tricks：介绍 HTTP Archive 发布的 2025 年度《Web 年鉴》报告，总结了当前 Web 性能、CSS 趋势、可访问性及资源膨胀等核心数据。 The challenges of soft delete：探讨了传统“软删除”模式（如 archived_at 列）带来的长期复杂性，并对比分析了触发器、应用层事件和 WAL 等更优的替代方案。 Rethinking “Pixel Perfect” Web Design — Smashing Magazine：探讨了在多设备、响应式和动态内容的现代 Web 环境下，为何传统的“像素级完美（Pixel Perfect）”观念已不再适用。 localspace：现代化的 localForage 替代方案，提供简单的浏览器存储封装。 Overscroll Effects On Nested Scrollers In All Browsers：Chrome 145 现已支持嵌套滚动容器的过度滚动效果（Overscroll Effects），实现了全浏览器体验的一致性。此前该效果仅在根页面有效，且只有 Safari 和 Firefox 支持子容器的回弹。 How to animate SVG with CSS: Tutorial with examples：这篇教程详细介绍了如何利用 CSS 属性和关键帧动画为 SVG（Scalable Vector Graphics，可缩放矢量图形）添加动态效果，从基础嵌入到复杂的路径动画均有涵盖。 新特性 Follow-the-leader pattern with CSS anchor positioning：介绍如何利用 CSS 锚点定位（CSS Anchor Positioning）实现元素跟随交互目标移动的“随动”（Follow-the-leader）模式。 工具 darula-hpp/shimmer-from-structure：一个能够根据 React 组件实际 DOM 结构自动生成像素级精确骨架屏（Shimmer Skeleton）的工具库。 Better SVG：用于编辑带有实时预览功能的 SVG 文件的 VS Code 扩展程序，包含许多实用功能，例如实时预览、颜色选择器、缩放/平移控件、可编辑的配色方案 currentColor 值、深色背景切换以及 SVGO 集成，一键优化 svg 体积。 趣站与 Codepen 精选 使用 CSS 中的 drop-shadow() 滤镜为不规则形状添加阴影 https://www.wearedevelopers.com/en/magazine/675/adding-shadows-to-irregular-shapes-in-css-with-filter-drop-shadow-675 Chris Heilmann 向我们展示了如何使用 filter: drop-shadow() 为不规则形状添加阴影，该过滤器可以识别“图像的透明部分或 SVG 路径的形状，并相应地应用阴影”。 https://codepen.io/codepo8/pen/qENbVmb 使用 superellipse() 函数创建迷人的角形 — 仅 CSS 在这个由 Zoran Jambor 创作的 Pen 中，一个简单的圆形通过“ superellipse() CSS 函数的随机值”演变成万花筒般的形状。点击“关于”按钮，即可查看关于 superellipse() 函数的简短教程和实用资源。 https://codepen.io/ZoranJambor/pen/ogLLLgr CSS 光学错觉 Alvaro Montoro 在这份令人惊艳的合集中分享了大量用纯 CSS 实现的著名光学错觉作品。其中一张在电视模式下简直太震撼了😵‍💫 https://codepen.io/collection/GpWqKk 旧布随风飘扬 在 Sabo Sugi 的这个 Three.js 场景中，一块饱经风霜的布料在微风中轻轻飘动。深入设置控件，即可更改图像、颜色、风力和撕裂效果。 https://codepen.io/sabosugi/pen/ByzLYpb Refs React Status #459 Frontend Focus #725 Code Spark #491 Code Spark #492

Publication milestones, Docker management software, and protocol-defining debates

介绍 qBitWebUI - 一个功能强大的 qBittorrent Web 管理工具,支持多实例管理、Prowlarr 集成和 PWA,提供 Docker 和 Dokploy 两种便捷部署方式

记录三星 990 Pro SSD 在 Linux 系统下出现 ext4 文件系统只读和掉盘问题的排查与解决方案，包括固件更新和内核参数调整

本期网址 https://blog.cosine.ren/post/weekly-23 RSS。 Discord 群 fe-bits-weekly，欢迎关注。 今天是 2025 年 1 月 18 日，星期天。 Moe Copy AI 发了 v0.2.1 和 v0.2.2，做了国际化，将悬浮球的功能抽取至侧边栏单页抓取 tab 了，内容提取下也加了 AI 总结按钮。 感谢 @XueHua-s 贡献的 htmlToMarkdown 重构为使用 unifined 改进～（#19） 然后是 astro-koharu 主题，将周刊功能泛化为了多系列，featuredSeries 支持数组与自定义 slug，动态生成系列页面并替代固定 /weekly 了，现在可以新增以下如图所示的系列文章了。 并且评论组件现在支持切换三种评论组件了（waline / remark42 / giscus） 开心！Waline 做评论真是又好看又好用啊 这周都在肝项目，所以周刊短短的！ 社区动态 jQuery 4.0.0：时隔近十年，jQuery 发布了 4.0.0 正式版，带来了大量现代化改进，包括移除对旧版浏览器（IE 10 及更早版本）的支持、引入新特性以及优化内部实现。 Chrome 145 adds Experimental Support for Vertical Tabs：Chrome 145 实验性支持垂直标签页。（天呐 2026 了 Chrome 终于把垂直标签页学过来了太感动了） 隆重推出：React 最佳实践：Vercel 团队将 “十余年 React 和 Next.js 优化经验” 提炼成了一套 Markdown 文件， 旨在供 Claude Code 等代码助手使用，当然您也可以自行阅读。其目标是帮助这些助手编写更优质的 React 代码，而无需过多指导。 可以通过 npx add-skill vercel-labs/agent-skills 直接安装 The Astro Technology Company joins Cloudflare | Astro：Astro 框架背后的公司 The Astro Technology Company 宣布加入 Cloudflare，以获取更多资源并专注于框架核心开发，承诺保持开源和平台中立。（真好，我很喜欢 astro 写网站的感觉） 并且 Astro 回顾了过去一年，展望了 2025 年的更新、变化和新增功能吗，并且发布了 Astro 6 的 beta 版本。 "You should never build a CMS" | Sanity：Sanity 回应 Cursor 将 CMS 迁移至 Markdown 的热议，分享了许多使用 CMS 的理由。 文章与社区动态 Why I hate WebKit, a (non) love letter：非常好文章推一下，Tauri WebKit 坑点大全，珍爱生命远离 WebKit！这个标题和 url 真是直抒胸臆。 JavaScript 的 for-of 循环实际上很快 (V8)：探讨现代 V8 引擎中 for-of 循环的性能表现，打破了开发者社区中关于其性能显著弱于传统循环的固有印象。作者建议现在除非是处理极端海量数据且对每一毫秒都敏感的场景，否则应优先使用语义更佳的 for-of 循环。 GUIDs - How I messed up my RSS feed：这篇文章讲述了作者如何因在 RSS feed 中添加 UTM 参数导致所有文章被重复添加，并介绍了 GUID 字段来解决此类问题的经验。 记 LobeHub 的性能和 DX 优化：作者分享了入职 LobeHub 一个月以来在性能和开发体验（DX）方面进行的优化工作。 《简明 TypeScript 手册》 是一本简短精炼的 TypeScript 指南，免费开放阅读。 How to Steal Any React Component Fiber）和 LLM 来重建生产 React 应用程序中的组件，而无需原始源代码。 How Markdown took over the world：回顾 Markdown 的诞生历程及其如何从一个小众博客工具演变为统治现代互联网和 AI 交互的通用文本标准。 Death to Scroll Fade! 批判网页设计中过度使用“滚动渐入”（Scroll Fade）效果的弊端，呼吁回归简洁高效的用户体验。 useOptimistic Won't Save You：深入探讨 React 19 的 useOptimistic 钩子，说明其必须结合 Transition 和 Action 状态管理才能真正处理复杂的竞态条件。 如何衡量和优化 React 性能：全面介绍了衡量和优化 React 应用性能的工具与技术，重点讲解了 React 19.2 的新特性以及各类运行时和构建时的优化策略。 停止将所有内容都变成数组（并减少工作量）：介绍如何利用 JavaScript 原生的迭代器辅助函数（Iterator helpers）实现延迟计算，从而优化处理大数据集时的性能和内存占用。 新特性 Bytes I can delete after all this time CSS 布局与样式增强 使用 text-underline-offset 属性轻松控制文本下划线的距离，无需再用复杂的伪元素模拟。 在 Flexbox 布局中直接使用 gap 属性，告别过去需要通过处理 margin (外边距) 来设置间距的繁琐操作。 采用原生 CSS 嵌套 (Nesting) 和在选择器内嵌套媒体查询 (Media Queries)，使样式结构更清晰且无需预处理器。 利用 clamp(min, variable, max) 实现流体响应式尺寸，简化了复杂的断点计算。 使用 content: open-quote 结合 q 标签实现根据语言自动适配的本地化引号。 JavaScript 语法与交互优化 采用可选的 catch 绑定 (Optional catch binding)，在不需要错误对象时直接写 catch { ... }，避免定义未使用的变量。 指针事件 (Pointer Events) 的普及使得开发者可以用一套逻辑替代旧有的 click (点击) 和 touch (触摸) 事件的混合逻辑。 弃用旧的性能黑科技，如使用 ~~ 或 | 0 取整，现代引擎下 Math.floor() 的可读性更高且性能不再是瓶颈。 资源优化与现代格式 AVIF 图像格式已获得全面支持，相比 JPEG 可轻松实现 50% 以上的体积缩减。 提供了使用命令行工具 avifenc 批量转换图片的实用脚本示例。 然后是两篇锚点定位，都是自动连线： Connecting Circles With Anchor Positioning II：CSS Tips 锚点定位系列文章，通过改进之前的实现，展示了如何使用 CSS 锚点定位技术动态连接两个圆圈，并在连接箭头的形状中计算并显示它们之间的距离。 纯 CSS 实现两个元素之间折线自动相连：本文详细介绍了如何利用 CSS 锚点定位实现两个元素之间纯 CSS 自动连接的折线效果，并探讨了当前方案的实现原理及局限性。 趣站与 Codepen 精选 Playing With CodePen slideVars：介绍 CodePen 官方推出的 slideVars 工具，它可以自动检测 CSS 变量并生成交互式控制面板，现在在 codepen 里写交互式 Demo 更方便了。 https://codepen.io/geoffgraham/pen/myEOqJg Refs JavaScript Weekly #768 React Status #458

IRC, PDF copycats, and a celebration of all things self-hosted