Now vibe coding, so learning hammer FE ?
浏览器动画调试神器 https://slowmo.dev/
《利用浏览器Canvas进行数据压缩》
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
《Claude技能构建完整指南》
标签：#AI #Claude #MCP #Agent_Skills #Workflow_Automation #开发工具 #Anthropic
总结：Anthropic官方发布的Claude技能构建指南，系统介绍了如何通过SKILL.md文件创建可复用的AI工作流。技能采用渐进式披露架构（YAML前置元数据+Markdown指令+引用资源），可与MCP工具集成实现多步骤自动化。文档涵盖规划、测试、分发全流程，提供5种设计模式（顺序工作流、多MCP协调、迭代优化等），并给出量化评估指标（90%触发准确率、零API失败率），目标帮助开发者在15-30分钟内构建生产级AI技能。
文章要点：
- 技能定义：包含SKILL.md（必需）、scripts/、references/、assets/的文件夹结构，采用kebab-case命名规范，支持Claude.ai、Claude Code和API三端通用
- 渐进式披露设计：三级加载机制（YAML元数据→SKILL.md正文→链接资源），最小化token消耗同时保持专业性
- 三大应用场景：文档/资源创建（如前端设计）、工作流自动化（如项目管理）、MCP增强（如Sentry代码审查），后者将工具访问转化为可靠工作流
- 成功指标：技能应在90%相关查询中自动触发，单次工作流工具调用次数明确，零失败API调用，用户无需提示下一步操作
- 核心设计模式：顺序工作流编排、多MCP协调（跨Figma/Linear/Slack等）、迭代优化循环、上下文感知工具选择、领域特定智能（如合规检查）
- 测试策略：触发测试（ obvious/paraphrased/negative cases）、功能测试、性能对比（有无技能时的token消耗和交互轮次差异）
- 分发方式：GitHub托管+Claude.ai设置上传，支持组织级部署和API程序化调用，定位为MCP的"知识层"（厨房类比：MCP是厨房设备，技能是食谱）
- 常见陷阱：描述字段过于模糊导致触发失败、包含XML标签的安全限制、README.md与SKILL.md混淆、指令过于冗长导致模型"懒惰"
https://resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf
标签：#AI #Claude #MCP #Agent_Skills #Workflow_Automation #开发工具 #Anthropic
总结：Anthropic官方发布的Claude技能构建指南，系统介绍了如何通过SKILL.md文件创建可复用的AI工作流。技能采用渐进式披露架构（YAML前置元数据+Markdown指令+引用资源），可与MCP工具集成实现多步骤自动化。文档涵盖规划、测试、分发全流程，提供5种设计模式（顺序工作流、多MCP协调、迭代优化等），并给出量化评估指标（90%触发准确率、零API失败率），目标帮助开发者在15-30分钟内构建生产级AI技能。
文章要点：
- 技能定义：包含SKILL.md（必需）、scripts/、references/、assets/的文件夹结构，采用kebab-case命名规范，支持Claude.ai、Claude Code和API三端通用
- 渐进式披露设计：三级加载机制（YAML元数据→SKILL.md正文→链接资源），最小化token消耗同时保持专业性
- 三大应用场景：文档/资源创建（如前端设计）、工作流自动化（如项目管理）、MCP增强（如Sentry代码审查），后者将工具访问转化为可靠工作流
- 成功指标：技能应在90%相关查询中自动触发，单次工作流工具调用次数明确，零失败API调用，用户无需提示下一步操作
- 核心设计模式：顺序工作流编排、多MCP协调（跨Figma/Linear/Slack等）、迭代优化循环、上下文感知工具选择、领域特定智能（如合规检查）
- 测试策略：触发测试（ obvious/paraphrased/negative cases）、功能测试、性能对比（有无技能时的token消耗和交互轮次差异）
- 分发方式：GitHub托管+Claude.ai设置上传，支持组织级部署和API程序化调用，定位为MCP的"知识层"（厨房类比：MCP是厨房设备，技能是食谱）
- 常见陷阱：描述字段过于模糊导致触发失败、包含XML标签的安全限制、README.md与SKILL.md混淆、指令过于冗长导致模型"懒惰"
https://resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf
styled-components 复活，现已支持 RSC —— 这款流行的组件样式库 一年前进入「维护模式」，如今开发重启，6.3.0 起 已支持 React Server Components (RSC)。
《我们将 Node.js 内存占用减少了一半》
标签：#后端 #Node.js #V8 #性能优化 #内存管理 #Docker
本文介绍了通过启用 V8 引擎的指针压缩（Pointer Compression）技术，在不修改代码的情况下将 Node.js 应用内存占用减少约 50%，且仅带来 2-4% 的平均延迟开销，同时显著降低 P99 延迟。Cloudflare 与 Igalia 合作解决了历史性的"4GB 内存笼"限制，使每个 Worker 线程拥有独立的 4GB 压缩内存空间。
文章要点：
- 技术原理：指针压缩将 64 位指针转为 32 位偏移量，使每个指针从 8 字节减至 4 字节，内存占用减半，代价是每次堆访问需额外的加减法运算
- 历史障碍：此前 Node.js 未默认启用是因所有 Worker 线程共享单一 4GB 内存空间，2024 年 Cloudflare 与 Igalia 合作推出 IsolateGroups 功能，使每个 V8 实例拥有独立的 4GB 压缩内存笼
- 实验结果：在 Next.js 电商应用基准测试中，指针压缩实现内存减半（2GB→1GB），平均延迟仅增加 2.5-4.2%，但 P99 延迟降低 7-43%，最大延迟降低 6-38%，因更小的堆减少了 GC 暂停时间
- 业务价值：可显著降低 Kubernetes 集群成本、提升多租户 SaaS 密度、支持边缘计算部署、增加 WebSocket 并发连接数
- 兼容性限制：每个 V8 实例仍受 4GB 堆内存限制；使用旧版 NAN 的原生插件不兼容，但 Node-API 插件不受影响
- 使用方式：通过
链接：https://blog.platformatic.dev/we-cut-nodejs-memory-in-half
标签：#后端 #Node.js #V8 #性能优化 #内存管理 #Docker
本文介绍了通过启用 V8 引擎的指针压缩（Pointer Compression）技术，在不修改代码的情况下将 Node.js 应用内存占用减少约 50%，且仅带来 2-4% 的平均延迟开销，同时显著降低 P99 延迟。Cloudflare 与 Igalia 合作解决了历史性的"4GB 内存笼"限制，使每个 Worker 线程拥有独立的 4GB 压缩内存空间。
文章要点：
- 技术原理：指针压缩将 64 位指针转为 32 位偏移量，使每个指针从 8 字节减至 4 字节，内存占用减半，代价是每次堆访问需额外的加减法运算
- 历史障碍：此前 Node.js 未默认启用是因所有 Worker 线程共享单一 4GB 内存空间，2024 年 Cloudflare 与 Igalia 合作推出 IsolateGroups 功能，使每个 V8 实例拥有独立的 4GB 压缩内存笼
- 实验结果：在 Next.js 电商应用基准测试中，指针压缩实现内存减半（2GB→1GB），平均延迟仅增加 2.5-4.2%，但 P99 延迟降低 7-43%，最大延迟降低 6-38%，因更小的堆减少了 GC 暂停时间
- 业务价值：可显著降低 Kubernetes 集群成本、提升多租户 SaaS 密度、支持边缘计算部署、增加 WebSocket 并发连接数
- 兼容性限制：每个 V8 实例仍受 4GB 堆内存限制；使用旧版 NAN 的原生插件不兼容，但 Node-API 插件不受影响
- 使用方式：通过
platformatic/node-caged Docker 镜像一键替换官方 Node.js 镜像即可启用链接：https://blog.platformatic.dev/we-cut-nodejs-memory-in-half
十亿行数据的虚拟滚动技术——HighTable 的五大实现方案
标签：#前端 #React #虚拟滚动 #性能优化 #大数据表格 #HighTable #DOM优化
总结：本文介绍了 HighTable 组件实现十亿级数据表格渲染的五大核心技术：懒加载仅获取可视区域数据、表格切片只渲染可见行、无限像素技术通过缩放滚动条突破浏览器高度限制、双模式滚动实现全局跳转与本地精确定位、两步随机访问分离垂直与水平滚动逻辑。这些方案完全基于原生 HTML 与 CSS，无需 Canvas 或自定义滚动条即可在浏览器中流畅处理海量数据。
文章要点：
- 技术1：懒加载：仅加载可视区域单元格数据，通过 DataFrame 接口异步获取并缓存数据，将 1TB 数据缩减为仅需加载约 3KB 的可见区域
- 技术2：表格切片：引入 Canvas 层作为定位参考，仅渲染可见行（约 30 行）而非全部十亿行，将 DOM 元素数量控制在恒定范围内
- 技术3：无限像素：设置 Canvas 最大高度（800 万像素），超过阈值时通过 downscaleFactor 缩放滚动条分辨率，突破浏览器元素高度限制（Firefox 约 1700 万像素）
- 技术4：像素级精确滚动：实现本地滚动（小幅度移动保持行连续性）与全局滚动（大幅度跳转）双模式，通过 globalAnchor 和 localOffset 状态管理，确保 2 万亿行内可达任意像素
- 技术5：两步随机访问：解耦垂直与水平滚动逻辑，先计算目标位置并垂直滚动，渲染完成后再处理水平定位与焦点设置，支持键盘导航和程序化跳转至任意单元格
链接：https://rednegra.net/blog/20260212-virtual-scroll/
标签：#前端 #React #虚拟滚动 #性能优化 #大数据表格 #HighTable #DOM优化
总结：本文介绍了 HighTable 组件实现十亿级数据表格渲染的五大核心技术：懒加载仅获取可视区域数据、表格切片只渲染可见行、无限像素技术通过缩放滚动条突破浏览器高度限制、双模式滚动实现全局跳转与本地精确定位、两步随机访问分离垂直与水平滚动逻辑。这些方案完全基于原生 HTML 与 CSS，无需 Canvas 或自定义滚动条即可在浏览器中流畅处理海量数据。
文章要点：
- 技术1：懒加载：仅加载可视区域单元格数据，通过 DataFrame 接口异步获取并缓存数据，将 1TB 数据缩减为仅需加载约 3KB 的可见区域
- 技术2：表格切片：引入 Canvas 层作为定位参考，仅渲染可见行（约 30 行）而非全部十亿行，将 DOM 元素数量控制在恒定范围内
- 技术3：无限像素：设置 Canvas 最大高度（800 万像素），超过阈值时通过 downscaleFactor 缩放滚动条分辨率，突破浏览器元素高度限制（Firefox 约 1700 万像素）
- 技术4：像素级精确滚动：实现本地滚动（小幅度移动保持行连续性）与全局滚动（大幅度跳转）双模式，通过 globalAnchor 和 localOffset 状态管理，确保 2 万亿行内可达任意像素
- 技术5：两步随机访问：解耦垂直与水平滚动逻辑，先计算目标位置并垂直滚动，渲染完成后再处理水平定位与焦点设置，支持键盘导航和程序化跳转至任意单元格
链接：https://rednegra.net/blog/20260212-virtual-scroll/
TypeScript 泛型趣味实践
标签：#TypeScript #泛型 #函数重载 #TanStack #条件类型
文章深入探讨了如何利用 TypeScript 泛型、条件类型和函数重载，为 TanStack Start 的 Server Function 构建一个完全类型安全的查询选项封装函数。通过一个真实的场景——确保带参数和不带参数的 Server Function 都能被正确推断返回类型和参数类型——展示了从基础泛型约束到复杂类型体操的完整实现路径，最终解决了可选参数与类型推断的冲突问题。
文章要点：
- 通过为 TanStack Start 的 Server Function 封装
- 初始方案使用泛型约束
- 利用条件类型
- 通过 TypeScript 函数重载（Overloading）定义两个签名：一个用于带参数的 Server Function，一个用于无参函数，从而精确控制参数的可选性
- 展示了泛型、条件类型与函数重载结合使用的高级技巧，实现编译时严格的类型检查和完美的类型推断
链接：https://frontendmasters.com/blog/fun-with-typescript-generics/
标签：#TypeScript #泛型 #函数重载 #TanStack #条件类型
文章深入探讨了如何利用 TypeScript 泛型、条件类型和函数重载，为 TanStack Start 的 Server Function 构建一个完全类型安全的查询选项封装函数。通过一个真实的场景——确保带参数和不带参数的 Server Function 都能被正确推断返回类型和参数类型——展示了从基础泛型约束到复杂类型体操的完整实现路径，最终解决了可选参数与类型推断的冲突问题。
文章要点：
- 通过为 TanStack Start 的 Server Function 封装
refetchedQueryOptions 工具函数，解决查询数据返回类型为 any 的类型安全问题- 初始方案使用泛型约束
<T extends (arg: { data: any }) => Promise<any>> 提取参数和返回类型，但无法处理无参函数的可选参数场景- 利用条件类型
infer 关键字创建类型工具 ServerFnArgs 来提取函数参数类型，并判断函数是否有参数- 通过 TypeScript 函数重载（Overloading）定义两个签名：一个用于带参数的 Server Function，一个用于无参函数，从而精确控制参数的可选性
- 展示了泛型、条件类型与函数重载结合使用的高级技巧，实现编译时严格的类型检查和完美的类型推断
链接：https://frontendmasters.com/blog/fun-with-typescript-generics/
Frontend Masters
Fun with TypeScript Generics
Generics are an incredibly powerful feature of TypeScript. There’s endless content on TypeScript in general, and generics in particular. This post will differ a bit and cover things more deeply.
https://developer.chrome.com/blog/webmcp-epp
Chrome for Developers
WebMCP is available for early preview | Blog | Chrome for Developers
WebMCP aims to provide a standard way for exposing structured tools, ensuring AI agents can perform actions on your site with increased speed, reliability, and precision.
#AI playwright客户端（含 Skills）- 给编码 Agent 用的 Playwright CLI：用 Skills 暴露能力，比把整页塞进 MCP 更省 token。
https://github.com/microsoft/playwright-cli
https://github.com/microsoft/playwright-cli
GitHub
GitHub - microsoft/playwright-cli: CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and…
CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots. - microsoft/playwright-cli
#文章 本文深入解析了GitHub Copilot CLI三秒ASCII开机动画背后的复杂工程实现，揭示了终端动画在缺乏统一标准的环境下，如何通过自定义工具链、语义化颜色映射和无障碍优先设计，解决跨终端兼容性与可访问性挑战。
https://github.blog/engineering/from-pixels-to-characters-the-engineering-behind-github-copilot-clis-animated-ascii-banner/
https://github.blog/engineering/from-pixels-to-characters-the-engineering-behind-github-copilot-clis-animated-ascii-banner/
The GitHub Blog
From pixels to characters: The engineering behind GitHub Copilot CLI’s animated ASCII banner
Learn how GitHub built an ASCII animation for the Copilot CLI using custom tooling, ANSI color roles, and advanced terminal engineering.
#文章 2026 年，Favicon 最佳实践的文章。
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
evilmartians.com
How to Favicon in 2026: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog
Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.
#文章 有开发者大胆预测，微软迟早会放弃 Windows，转战“Windows 外壳的 Linux”。大胆，确实挺有想象空间。
https://gamesbymason.com/blog/2026/microsoft/
https://gamesbymason.com/blog/2026/microsoft/
