AI 摘要：本文深入探讨了 React Query 中 select 选项的高级用法，旨在实现极致的性能优化。文章从 select 的基本作用——创建精细化的数据订阅以避免不必要的组件重渲染——讲起，逐步深入到如何在 TypeScript 中为包含 select 的抽象进行类型定义。最后，文章聚焦于性能优化的核心，即“超级充电”，通过 React.useCallback 和外部 memoization 库（如 fast-memoize）解决昂贵计算在多次渲染和多组件实例中的重复执行问题，展示了如何将 select 的性能潜力发挥到极致。

tkdodo.eu

React Query Selectors, Supercharged

How to get the most out of select, sprinkled with some TypeScript tips.

AI 摘要：本文深入探讨了 HTML 锚点 <a> 标签中 href 属性的一些不常见但非常实用的值。文章不仅回顾了 mailto: 、文本片段 (text fragments) 等已知用法，更重点介绍了一些鲜为人知的技巧，例如使用 ""、. 和 ? 对当前页面进行不同方式的重载，以及它们如何处理 URL 的查询参数和哈希。此外，文章还涵盖了 data: URL、媒体片段和 PDF 页面链接等高级应用，为前端开发者提供了更丰富的链接处理知识。

1. 页面导航与重载
• href="#" 或 #top 这两种写法都可以让页面滚动到顶部。特别的是，即使页面中不存在 id="top" 的元素，#top 依然会按规范 (spec) 生效。
• href="": 重新加载当前页面。此操作会保留 URL 中的查询参数，但会移除哈希值（# 及其后的部分）。
• href=".": 重新加载当前页面，同时移除查询参数和哈希值。注意：此行为对 URL 末尾是否有斜杠 / 非常敏感。如果 URL 是 /path，它会导航到父目录 /；如果 URL 是 /path/，它会导航到当前目录 /path/。
• href="?": 重新加载当前页面，移除查询参数和哈希值，但会在 URL 末尾保留一个 ? 字符。与 href="." 不同，此行为不受末尾斜杠的影响。

2. 特殊协议与片段链接
• href="data:": 可以创建指向 data: URL 的链接，将文本、HTML 等小型数据直接编码在链接中，实现不依赖外部资源的导航。
• 媒体片段 (Media Fragments): 允许链接到音视频文件的特定时间段。例如，video.mp4#t=10,20 会从视频的第 10 秒开始播放，到第 20 秒时停止。
• PDF 页面链接: 可以通过 #page=<页码> 的形式，直接链接到 PDF 文件中的某一页，例如 my-file.pdf#page=42。

AI 摘要：作者系统性批判当代 Web 前端栈：DOM 与 HTML 停滞且臃肿、CSS 默认“自内向外”的布局心智与现代应用需求脱节，SVG 与 CSS 相互羡慕却难以统一；“HTML in Canvas”方向治标不治本。作者主张打开更低层的布局、文本与渲染原语，重构视图树与渲染树，以更小更清晰的数据模型拥抱多线程、多来源与异步的新时代，WebGPU 等新基建可成为更简洁的 UI 基元。

1. DOM/HTML 的困境与技术债
• DOM 膨胀失控：仅 Chrome 的 document.body 就有 350+ 键，style 内还有 660 个 CSS 属性；属性/方法边界模糊，部分 getter 触发布局抖动，遗留 onevent 成堆。
• 字符串类型负担：源自 SGML/XML 的“stringly typed”设计让 Web Components 等原生组件 API 笨重，Shadow DOM 引入额外嵌套/作用域，生态接受度低。
• 语义 HTML 的失约：十多年无实质演进，ARIA 兜底本应由语义标签承担的职责；常见结构（如 thread/comment）缺位，WHATWG 更多是边角“本轮加一圈”而非愿景驱动。
• 可编辑性鸡肋：contentEditable 实用化困难重重，富文本编辑器团队“血泪史”常谈。
• 应用现实的“拼装学”：为了做应用 UI，团队被迫以 HTML/CSS/SVG 套娃，承担滚动吸底、虚拟化列表/表格、右键菜单、查找等重复造轮子；UI 与“流式内容”的早期融合如今反成负担。

2. CSS 的本质：自外向内 vs 自内向外
• 正确心智模型：CSS 本质是“两次约束传播”——先自外向内分配可用空间，再自内向外回收实际尺寸；默认是文档导向的“自内向外”，需要手动从 body{height: 100%} 开始把约束往下传，所以“垂直对齐难”并非错觉。
• Flex 的代价与补药：Flex 通过测“自然尺寸”再伸缩，导致递归式“猜测布局”；深度嵌套和未知内容可能引发不可预期放大。可用 contain: size、明确 flex-basis、will-change 等打断全局约束，避免连锁反应。
• API 设计反思：理想的布局系统应把“容器行为”（自外向内）与“放置模型”（自内向外）作为可组合的正交维度提供，而非在单一语法下不断加“抑制/隔离”开关。

3. “好部分”与跨模型错配
• 可用但不优雅：Flexbox、Grid 在理解边界条件后“够用”，但语法“很 CSS”；若从零设计，不会做成今天这种减法式 API。
• 两种系统被硬绑：CSS 同时承担“文本样式的继承系统”和“盒模型布局系统”，前者需继承（如字体），后者主要是包含关系，级联语义不一致，合在一起是历史事故。
• 单位与像素：相对 em 的早期理念已式微，逻辑像素 vs 设备像素更符合用户预期。
• 与 SVG 的“互相羡慕”：SVG 既非 CSS 子集也非超集，变换模型等细节不同；CSS 想要曲线、遮罩、渐变、滤镜，却远不如 SVG 强；开发者在 HTML/CSS 与 SVG 间反复取舍。
• 三个“卡点范例”：
• 文本省略号 text-ellipsis 仅能裁单行不换行文本，段落裁切/检测截断与文本测量 API 皆孱弱。
• 粘性定位 position: sticky 想实现“无条件吸附”需多层荒诞嵌套，本应易如反掌。
• z-index 战争：绝对层级导致“+1/-1 拼数值”，缺少相对 Z 定位的语义。

4. “HTML in Canvas”的误区
• 设计目标错位：为“可编程渲染”而把 HTML 绘进 canvas，结果依旧被 DOM 裹挟（需作为 <canvas> 子树参与布局/样式/无障碍），离真正的可编程 UI 还很远。
• 交互负担转嫁：为了自定义外观，被迫全权接管命中测试 (hit-testing) 与事件，且仅有 2D 命中测试；在已有 CSS 3D 变换环境下显得荒诞。
• Reactivity 风险：让 canvas 回写/观察同一文档树，带来循环依赖与观察者复杂度。
• 文本与字体的“原罪”：Canvas 缺少系统字体、文本布局 API、Unicode 分词/换行等基础能力——真正的难题没有开放正确的底层原语。
• 本质诉求：不是“把 DOM 截图画出来”，而是要打开文本测量、命中测试、可编程布局、统一滤镜/着色器等低层 API；用 DOM 当黑盒无法解决 1990 年代 UI 水平的缺口。

5. 向下开口：重塑视图树与渲染树
• 方向样例：Use.GPU 的“类 HTML 渲染器”在 WebGPU 上实现 X/Y Flex，垂直居中与定位直观，无语义 HTML 或级联，仅“一级公民”的布局；给“div”挂着色器，90% DOM 功能以少量清晰原语重做可达。
• 核心问题重问：视图树应长什么样？如何降解成渲染树？当下是如何被“历史包袱”强行降解的？
• 新引擎机会：Servo、Ladybird 等新浏览器实现轻装上阵，更适合提出新提案；大厂亦可为之，但“品味与自小做起”的工程哲学重要。
• 进程/线程与安全现实：因 Spectre 等 CPU 攻击，SharedArrayBuffer 与 Web Worker 的多线程之路受阻；DOM 若重塑，可与多进程、跨来源隔离、结构化并发、所有权语义、函数式效果 (FP effects) 等现代模型同频共振。
• 最小第一步：以更小更干净的数据模型替换当前“每节点 350+ 属性”的怪物；别误以为问题不可解，关键在于抽丝剥茧、回到正确的内核抽象。

AI 摘要仅供参考和导读和索引，其中可能有失实部分，推荐自行阅读原文。

Acko.net

HTML is Dead, Long Live HTML

Rethinking DOM from first principles

AI 摘要：karminski/one-small-step 是一个技术科普教程项目，旨在以简洁易懂的方式解释有趣且前沿的技术概念和原理，每篇文章力求在 5 分钟内阅读完毕。项目内容涵盖人工智能（AI）、数学、系统和硬件等多个领域，并计划保持每周不低于 3 篇的更新速度，旨在帮助读者快速掌握复杂的技术知识。

GitHub

GitHub - karminski/one-small-step: 这是一个简单的技术科普教程项目，主要聚焦于解释一些有趣的，前沿的技术概念和原理。每篇文章都力求在 5 分钟内阅读完成。

这是一个简单的技术科普教程项目，主要聚焦于解释一些有趣的，前沿的技术概念和原理。每篇文章都力求在 5 分钟内阅读完成。 - karminski/one-small-step

AI 摘要：Chrome 139 带来了多项面向开发者的重要新功能，包括本地 Web Speech API（语音识别）、CSS corner shaping（角样式）、CSS custom functions（自定义函数）等，进一步提升了 Web 应用的性能、安全性和界面设计能力。本文亮点简要梳理了此次版本中的主要更新和对开发者生态的影响。

1. 本地 Web 语音识别（Web Speech API）
• Web Speech API 现支持在本地进行语音识别，无需将音频数据上传至第三方服务，提升了隐私和安全性。
• 开发者可以检测本地语音识别能力、提示用户安装相关资源，并按需选择本地或云端识别方案。
• 有助于为多语言和对隐私敏感的场景提供更优支持。

2. CSS 角样式（CSS corner shaping）
• 新增 CSS 属性允许开发者自定义角的形状与曲度，超越传统的 border-radius。
• 支持创建如 squircles（圆角矩形）、notches（凹口）、scoops（挖口）等更为丰富的视觉样式，并可实现动画切换。
• 拓宽了 Web 设计在 UI 形状表现上的空间。

3. CSS 自定义函数（CSS custom functions）
• 引入 @function 规则，使开发者可像自定义属性一样定义函数，实现基于参数、条件的动态样式生成。
• 支持函数内调用变量，显著增强了 CSS 的可复用性与逻辑性，推动 CSS 向编程化发展。
• 这一特性属于 CSS Custom Functions and Mixins（函数与混入）规范的一部分。

4. 其他新特性与改进
• web app manifest 新增 scope_extensions 字段，方便多子域、多顶级域的站点整合作为单一应用呈现。
• Chrome 现在识别 WHATWG mimesniff 规范中定义的所有有效 JSON MIME 类型，提升兼容性。
• request-close 调用已集成至声明式 invoker commands API，优化 JavaScript 的事件处理模型。

Chrome for Developers

New in Chrome 139  |  Blog  |  Chrome for Developers

Squircles and custom functions come to CSS, and on-device speech recognition to the Web Speech API.

AI 摘要：这篇博文深入探讨如何在纯 CSS 中获取 grid 布局中 auto-fit/auto-fill 自动列的列数，从而实现如高亮首/末列、斑马纹、响应式非矩形网格等复杂交互，无需任何 JavaScript 或媒体查询（breakpoints）。作者提出了通过 container query 单位、CSS 变量和数学函数自动计算列数的方法，并针对不同浏览器支持和 bug（尤其是 Firefox）提出了解决方案，使技巧能够跨浏览器使用。

Frontend Masters

Get the number of auto-fit/auto-fill columns in CSS

Ever wanted to get the number of auto-fit/auto-fill columns in a grid? For example, because you want to highlight just the items in the first or last row or column? Do something special just for even or for odd rows or columns (e.g. zebra striping)? Or for…

AI 摘要：本文介绍了如何用现代 CSS 新特性（如 shape(), sibling-count(), sibling-index() 等）实现一个无限循环的简洁 Marquee（走马灯）动画，无需 JavaScript，并能自动适配任意数量、任意宽度的图片或元素。作者详细讲解了这一方案相比传统方法（如 <marquee> 或元素克隆）在性能、可维护性和响应式设计上的优势，并提供了完整、紧凑的 CSS 代码实例。相比以往需要繁琐计算或操作 DOM，此方法仅需 10 行 CSS 即可实现高效且灵活的无限轮播动画，同时分析了 shape() 函数的基本用法及其带来的灵活性。

Frontend Masters

Infinite Marquee Animation using Modern CSS

A set of logos with an infinite repeating slide animation is a classic component in web development. We can find countless examples and implementations starting from the old (and now deprecated) <marquee> element. I’ve written an article about it myself a…

AI 摘要：本文深入探讨了前端开发中主题和颜色命名的设计实践及困惑，从流行 CSS 框架的色板设计现状、手动与程序化生成色板的方法谈起，剖析了颜色变量定义中的“语义命名”混乱，并提出了更灵活与语义化兼容的命名及管理方式，以支持更加多变且有辨识度的 Web 设计系统。

CSS-Tricks

Thinking Deeply About Theming and Color Naming | CSS-Tricks

Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.

gpt-oss-120b 激活参数量 5.1B
gpt-oss-20b 激活参数量 3.6B
两个都是 MoE 架构的推理模型.

karminski-牙医 (@karminski3): 就在刚刚 OpenAI 发布了两个开放权重模型! 给大家带来深度解析!

gpt-oss-120b 激活参数量 5.1B
gpt-oss-20b 激活参数量 3.6B

两个都是 MoE 架构的推理模型.

首先, 这两个模型发布的就已经是量化版本了, 他们的 MoE 层直接用 MXFP4 精度训练的! 这意味着暂时没有办法微调这两个模型了 (现有微调框架不支持, 得等等).

然后, 大家肯定知道 OpenAI 搞了各种奇怪的命名, 比如 O3-mini-high, 这个 high 是啥? 现在答案揭晓, OpenAI 的模型是可以配置推理努力程度的. 分为三档, low, medium, high. 当然 high 模式下跑分最高, 相对的思考时间更长.

Agent 功能适配得非常好, 原生针对 function call, 网页浏览, 执行 python 代码, 各种结构化输出进行了优化. 这也能从从跑分上看出来, 使用 tool 后分数均有提升.

Openai

Open models by OpenAI

Advanced open-weight reasoning models to customize for any use case and run anywhere.

AI 摘要：Tree shaking（摇树优化）已成为现代前端打包（bundler）领域的重要优化手段。不同 bundler 工具（如 Webpack、Rollup、esbuild、Turbopack）由于应用场景和关注点不同，实现 tree shaking 的原理与细节也有所差异。文章系统对比了这些工具的 tree shaking 实现，包括分析粒度、副作用（side effects）判定、模块/语句/AST（抽象语法树）层面的优化，以及各自的优势与局限性，并详细剖析了典型案例。对于需要深入理解前端 build 工具原理与优化策略的开发者极具参考价值。

GitHub

Bundler Tree Shaking 原理及差异 · web-infra-dev · Discussion #28

Tree shaking 在如今的前端打包领域已成为极为重要且不可或缺的一部分。鉴于各个 bundler 的适用场景和侧重点存在差异，因此各个 bundler 之间的 tree shaking 实现方式也各不相同。例如，Webpack 主要用于前端应用打包，侧重于正确性，其 tree shaking 主要关注跨模块级别的优化；而 Rollup 主要用于库打包，侧重于优化效率，其 tree s...

大家好我是侦探大家好我是助手大家好我是警长累死我了累死我了累死我了累死我了累死我了求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连求三连七月新番求三连求三连求三连求三连求三连求三连7月新番中期吐槽求三连求三连求三连噼

使用素材：
最近的侦探真没用
章鱼p的原罪
我怎么可能成为你的恋人 不行不行
光死后的夏天
保龄球少女
死灵之子的宇宙恐怖秀
小城日常
琉璃的宝石
沉默魔女的秘密
熏香花朵，凛然绽放
游戏中心的异文化交流
明天美食广场见
新吊带袜天使
渡君的xx即将崩坏
拔作岛
活死喵之夜
坏女孩
怪兽8号 第二季
胆大党 第二季
更衣人偶 第二季
碧蓝之海 第二季
火影忍者
名侦探柯南
银魂

发布视频-动漫杂谈-动漫评论
播放量:45.87万 弹幕:5647 评论:5015
点赞:8.50万 投币:6.44万 收藏:2.14万
发布日期:2025-08-05 11:38:12
时长:0:12:38

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

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

本文系统介绍了 RAG（Retrieval-Augmented Generation，检索增强生成）模型的基本原理、实际应用场景及其在 NodeJS 环境下的基础实现。作者围绕文本数据的预处理、向量化、向量检索、多路召回、召回重排，以及 LLMs（大语言模型）在流程中的作用展开，详细讲解了如何以轻量级工具搭建一个实用的 RAG 检索服务，并讨论了分片策略、编码方法、检索优化及与开箱即用方案的取舍，为构建定制化AI知识问答系统提供了开源思路和技术参考。

1. RAG 简介与应用场景
• RAG 是结合检索（Retrieval）与生成（Generation）的 AI 架构，能提升对专业领域、高时效性内容的问答、代码生成等场景的回答质量。
• 适用于最新知识获取、特定领域知识补充、提升透明度与可解释性、长尾数据检索、垂直智能问答等实际需求。
• RAG 以内容检索为核心，兼容多种方式（如向量检索、倒排索引、图谱检索等），并与 LLMs 配合工作。

2. 文本向量化流程设计
• 数据预处理包括文本清洗和分片，分片方式有固定长度、overlap 重叠、句段分割、结构分片等，应兼顾语义完整性与检索效率。
• 分片时建议结合元信息（如标题、作者、时间等）以辅助召回与重排。
• 编码方式的演变从 one-hot，TF-IDF，到更先进的 Word2Vec、Transformer-based Embedding。实际项目推荐使用现成高效模型如 all-MiniLM-L6-v2。
• 分片及编码细节优化显著影响检索召回质量和成本。

3. 向量检索与多路召回机制
• 检索的核心是计算 Query 与候选文本的向量相似度，常用余弦相似度（Cosine Similarity），因其只关注方向信息，适合高维稀疏空间。
• 采用 hnswlib-node 快速完成高维向量检索，实际实现还需与实际内容并行存储，便于元数据同步。
• 多路召回建议综合关键词检索、向量召回、图谱召回等互补方式，通过加权、融合、重排序等策略提升检索全面性和精度。

4. 召回重排（Re-Ranking）及其优化
• 初次召回后需对候选结果做重排，提升真正相关内容在前，常见方法如下：
• 传统交叉编码器（如 BERT NSP）精排。
• LLMs 或专门 ReRanker 模型（如 BGE-Reranker）基于上下文深度理解排序。
• 分片元信息和人工打标可进一步增强重排效果，提升系统最终响应准确性和相关性。
• 重排虽可提升体验，但不可避免加大系统复杂度和响应耗时，需按场景权衡。

5. LLMs 在 RAG 流程中的多重角色
• 查询改写：修正拼写、分解多意图、格式化表达、扩展关键词等，显著提高召回精准度。
• 输入优化：用LLMs提升分片、编码智能化水平，以及用于多模态信息抽取、知识图谱构建等。
• 生成增强：将高相关检索片段作为上下文，辅助 LLMs 生成更自然、连贯、有据可溯的答案，并可提升系统的可用性与信任度。
• LLMs 贯穿流程多环节，兼具结构化与半结构化内容的处理与优化能力。

6. 方案总结与工程实践建议
• RAG 作为 AI Infra 基础模块，值得深入学习和灵活定制。开箱服务适用于通用场景，复杂定制或增量优化建议自行实现。
• 流程各节点（分片、编码、检索、重排、生成）都可精调优化，针对需求选择技术方案、服务模型和参数设定。
• RAG 在提升 LLMs 时效性、知识深度、成本控制等方面具备不可替代优势。