《在本地终端预览OpenGraph卡片》

标签：#前端 #OpenGraph #CLI工具 #Zig #Kitty图形协议 #开发工具

总结：
作者为解决OpenGraph调试痛点，开发了CLI工具og-check，可直接在终端内渲染本地开发环境的OG卡片预览，无需部署到公网或使用隧道服务。工具基于Zig编写，支持Kitty图形协议在终端内显示图片，并提供OpenGraph、Twitter Card、表格和JSON四种输出格式，同时可作为CI检查工具确保OG标签完整性。

文章要点：
- 传统OG调试流程繁琐：需要部署到公网或使用隧道工具，且Facebook等平台的调试器缓存机制会导致反复迭代困难
- og-check支持在本地终端直接预览OG卡片，包含图片渲染，将反馈周期从分钟级缩短到秒级
- 终端图片渲染基于Kitty图形协议，兼容Ghostty、iTerm2、WezTerm等主流终端，不支持的终端会自动降级为文本输出
- 工具内部使用Zig的std.http.Client抓取页面，解析meta标签并按命名空间分类（og:、twitter:等），通过zigdown渲染Markdown到终端
- 提供四种输出模式：OpenGraph预览（默认）、Twitter Card预览、表格视图、JSON格式，后者支持管道操作（如配合jq使用）
- 具备校验功能：当缺少必需的OG字段（title、type、image、url）时会输出错误并返回非零退出码，适合集成到CI流程作为布局模板检查
- 安装方式灵活：支持预编译二进制、源码编译（Zig 0.15+）和mise工具管理

文章URL：https://simonhartcher.com/posts/2026-04-15-testing-opengraph-on-localhost-from-the-cli/

Simon Hartcher

Testing OpenGraph on localhost from the CLI before you go public | Simon Hartcher

og-check fetches a URL and renders its OpenGraph and Twitter Card metadata directly in your terminal, images and all. Point it at localhost and skip the tunnel.

《用TanStack_Start构建博客（上篇）》

标签：#前端 #TanStack_Start #TanStack_Router #Server_Functions #静态预渲染 #Markdown博客 #代码高亮

总结：
本文通过实战案例演示如何使用 TanStack Start 框架构建一个 Markdown 博客系统。文章重点介绍了 Server Functions 解决同构加载器无法访问文件系统的问题、动态路由参数处理、以及使用 markdown-it 和 Shiki 实现带行号的高亮代码块，为开发者提供了完整的技术实现路径。

文章要点：
- TanStack Start 是基于 TanStack Router 的轻量级服务端框架，支持 SSR、API 端点和 Server Functions
- 使用 import.meta.glob 动态扫描 Markdown 文件，配合 gray-matter 解析文章元数据
- Server Functions 是同构应用的关键——无论 loader 在服务端还是客户端运行，都能保证文件读取逻辑始终在服务端执行
- 动态路由通过 $slug.tsx 文件命名实现，配合 createFileRoute 和 head 函数设置页面标题
- 使用 markdown-it + Shiki 实现代码高亮，通过自定义 transformer 支持 line-numbers 语法标记，结合 CSS counter 渲染行号
- 文章预告下篇将介绍静态生成和部署策略

文章URL：https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/

Frontend Masters

Building a Blog in TanStack (Part 1 of 2)

TanStack Start is one of the newest web frameworks, and its popularity is rising quickly. Start is a thin server-side layer that sits atop TanStack Router and provides features like server functions, API endpoints, and server-side rendering. I wrote a three…

上面的的垂直文件组织方式去年就在实践，尤其是Agent编程下，内聚每个业务模块的工具到当前业务文件夹。

《垂直代码库：告别按类型分层，拥抱按业务域组织》

标签：#前端 #代码组织 #架构设计 #Monorepo #React #软件工程

总结：

本文主张前端代码库应从"水平分层"（按 components/hooks/utils 技术类型划分）转向"垂直切片"（按业务域/功能域组织）。作者以 Sentry 代码库十年演进为例，指出水平分层会导致代码分散、认知负荷高、耦合混乱；而垂直组织将同一业务域的组件、工具、类型内聚到一起，配合 Monorepo 的显式边界（exports/eslint-plugin-boundaries），能显著提升可维护性。虽然确定正确的垂直划分需要更多团队沟通，但这是支撑代码库长期演进的必要投资。

文章要点：

- 水平分层的隐患：把代码按 components / hooks / utils / types 分类虽然上手简单，但随着项目膨胀，同一业务逻辑会被拆得七零八落——比如 PageFilters 的组件、类型、工具函数散落在三个目录，改一个小需求要跳来跳去， cognitive load 直接拉满
- 垂直切片的核心思想：不按"技术类型"而按"业务域"分组，把同一个功能域（如 dashboard、profiling、billing）相关的组件、Hook、工具、类型全部收进一个目录；就像当年我们把 HTML/CSS/JS 从三层文件合并成组件一样，这次是更高维度的"关注点内聚"
- 与团队结构天然对齐：现代产品团队通常是端到端的功能团队（dashboard 团队、replay 团队），垂直代码结构让 CODEOWNERS 和包边界直接对应团队职责，谁负责什么一目了然
- 解决跨域复用焦虑：不是所有代码都严格属于某个页面，像 PageFilters 这种被多页面使用的通用能力，完全可以作为独立垂直域存在；关键是按"逻辑关联"而非"物理位置"来划分
- 用边界守护架构：垂直化后还需降低耦合，推荐通过 Monorepo + package.json#exports 显式暴露公共 API，或借助 eslint-plugin-boundaries 禁止深路径导入，把"私有实现"真正保护起来
- 没有银弹，但值得投入：确定合理的垂直域确实比"丢进 utils"更难，也可能出现不同团队重复造轮子；但作者认为这恰恰促进了团队沟通，而沟通本就是软件工程最难也最重要的部分

文章URL：

https://tkdodo.eu/blog/the-vertical-codebase

tkdodo.eu

The Vertical Codebase

Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it.

卡片光效

https://www.npmjs.com/package/@stianlarsen/border-beam

Syncpack 是一个专门用于大型 JavaScript Monorepo 的命令行工具，用于强制保持跨包依赖版本一致性，支持自动检测、修复和格式化 package.json 文件。

https://syncpack.dev/

Syncpack

Consistent dependency versions in large JavaScript Monorepos

《嵌套Promise的实际用途》

标签：#JavaScript #Promise #并发控制 #RWLock #函数式编程

总结：

文章探讨了JavaScript中Promise自动扁平化设计的利弊。作者回顾了Promise/A+规范制定时关于是否引入Monad和Functor概念的争论，并通过实现读者-写者锁（RWLock）的实际案例，展示了嵌套Promise在并发控制中的独特价值——它能让一个异步函数调用另一个异步函数，却不阻塞等待内层函数完成，从而实现精细的并发管理。

文章要点：

- Promise的then()方法同时承担了Functor的map和Monad的flatMap功能，会自动扁平化任意层级的嵌套Promise
- 函数式编程社区曾希望Promise能区分map()和flatMap()，但规范作者出于便利性考虑拒绝了这一提议
- 作者在开发EscoDB时遇到了一个真实场景：实现读者-写者锁（RWLock）需要协调多个读操作并发执行、写操作独占执行
- 通过显式返回{ promise: Promise<T> }结构来"绕过"Promise自动扁平化，实现了关键功能：保护"检查队列状态"和"放入任务"这两个动作的原子性，同时又不阻塞调度器等待任务实际执行完成
- 嵌套Promise代表"一个异步函数调用另一个异步函数，但不等待其完成"的语义，在主动管理并发控制时非常有用
- Promise扁平化本质上是"时间上的连接"（强制顺序执行），而嵌套Promise则保留了并行调度的可能性

文章URL：https://blog.jcoglan.com/2026/03/23/uses-for-nested-promises/

《Karpathy把私藏的知识管理方法开源了：让LLM帮你维护Wiki，自己只管提问》

标签：#AI #知识管理 #LLM_Knowledge_Base #Personal_Wiki #Obsidian #RAG #Agent

总结：

Andrej Karpathy 分享了他用 LLM 管理个人知识库的方法：将原始资料放入只读目录，由 LLM 自动生成和维护结构化的 Wiki，再通过 Obsidian 查看。这套"摄入-查询-检查"工作流让他在小规模数据下无需 RAG 也能高效检索，更重要的是体现了 AI 时代的新范式——分享想法而非代码，让每个人的 Agent 按需实现。这对知识工作者如何从"操纵代码"转向"操纵知识"具有启发意义。

文章要点：

- **三层架构设计超清晰**：原始资料放在 raw/ 目录保持只读，LLM 自动读取并编译成结构化的 Wiki 文档，最后用 Obsidian 当查看器来展示。整套系统就像"原料→加工厂→展示厅"一样分工明确！

- **四个核心操作好懂又实用**：Ingest（新资料进来时 LLM 自动更新相关页面）、Query（日常提问让 LLM 去 Wiki 里搜索综合回答）、Lint（定期检查知识库有没有矛盾或遗漏）、Extra Tools（比如 vibe coding 的小搜索引擎）。整个知识库会越用越丰富~

- **为什么不用 RAG？Karpathy 的回答很实在**：他的知识库大约 100 篇文章、40 万字，在这个量级下 LLM 自己维护的索引和摘要已经够用了，不需要复杂的向量检索。Wiki 本身就是一种"压缩过的知识表示"

- **从"分享代码"到"分享想法"**：他把这套方法写成"idea file"公开，认为在 Agent 时代，清晰的思路比具体代码更有价值。每个人把自己的 Agent 叫来，照着这个想法文件就能搭出适合自己的版本

- **工作重心正在悄悄转移**：Karpathy 说他最近的 token 消耗从"写代码"大幅转向"操纵知识"。这对咱们知识工作者也是个信号——让 LLM 当长期的知识管家，而不只是临时问答工具，效率会更高呢！

文章URL：https://mp.weixin.qq.com/s/EoGLi067d_3huZf-X0Q6Fg

《2026年JavaScript生态全景指南》

标签：#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes

总结：
本文全面梳理了2026年JavaScript生态系统的最新发展，涵盖ECMAScript 2025（迭代器助手、Set方法、Promise.try等）和2026预期特性（Temporal API、资源管理），React/Vue/Svelte框架动态，Node.js原生TypeScript支持、Bun和Deno运行时竞争，Vite 8与Turbopack构建工具演进，TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要，特别是在AI辅助编程时代，架构能力和代码品味尤为关键。

文章要点：
- **ECMAScript 2025超实用新玩具**：迭代器终于能链式调用`.map()和.filter()`啦，而且是惰性求值不耗内存；Set之间可以玩集合运算，轻松找出技能交集和差集；`Promise.try()`让同步异步错误一网打尽；还有`RegExp.escape()`终于解决了用户搜索时特殊字符炸正则的问题～

- **2026年最期待的Temporal API**：Date对象终于被拯救了！处理时区和日期计算不会再莫名其妙多出几天，浏览器原生支持即将到来，告别 moment.js 大礼包的时代要来啦～

- **框架圈的大新闻**：React 19的Server Components和Compiler还在消化中，Vue 3.6祭出Vapor Mode性能大招，Svelte 5的Runes API让响应式更细粒度； Next.js 16默认切到Turbopack，Astro被Cloudflare抱走，Remix正在酝酿去React化的大胆实验～

- **运行时三国杀**：Node.js 22+能直接跑.ts文件啦（虽然只是剥离类型），Bun被Anthropic(Claude家)收编后1.3版本速速飞起，Deno 2稳如老狗主打安全牌，三足鼎立格局越来越有意思～

- **TypeScript登顶GitHub第一**：v6严格模式默认开启，v7要用Go重写编译器提速10倍；92%的开发者都在用AI写代码，但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀！

文章URL：https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/

Frontend Masters

What To Know in JavaScript (2026 Edition)

We’ve done posts like this for CSS, but JavaScript deserves the same dangnabit! Especially as JavaScript does a better job of versioning itself anyway. We’ll cover new stuff in the language itself, but being a JavaScript practitioner involves more than the…

《OpenHarness：开源智能体基础设施框架》

标签：#AI #Agent #智能体 #开源 #Python #工具调用

总结：
OpenHarness是港大数据智能实验室（HKUDS）推出的轻量级开源智能体基础设施框架，仅用Python实现，代码量比Claude Code轻44倍（1.1万行vs 51万行），提供完整的工具调用、技能加载、记忆管理和多智能体协调功能，让开发者快速构建安全可靠的AI Agent应用。

文章要点：
- 极简架构设计：相比Claude Code的51万行TypeScript代码，OpenHarness仅用1.1万行Python实现，去除了企业级复杂依赖如遥测和OAuth，专注于核心Harness架构
- 五大核心模块：包含Agent循环（支持流式工具调用、并行执行、成本追踪）、工具套件（43种工具覆盖文件/Shell/搜索/Web/MCP）、上下文记忆（CLAUDE.md自动注入、MEMORY.md持久化）、权限治理（多级权限模式、交互式审批）、Swarm多智能体协调（子智能体委派、任务管理）
- 生态兼容性：完全兼容anthropics/skills技能格式和claude-code/plugins插件生态，支持OpenClaw、nanobot、Cursor等CLI工具集成
- 开箱即用：一条命令oh即可启动，内置114个单元测试和6个E2E测试套件，提供稳定可靠的基础能力

文章URL：
https://github.com/HKUDS/OpenHarness

GitHub

GitHub - HKUDS/OpenHarness: "OpenHarness: Open Agent Harness with a Built-in Personal Agent--Ohmo!"

"OpenHarness: Open Agent Harness with a Built-in Personal Agent--Ohmo!" - HKUDS/OpenHarness

用游戏比赛的方式，投票选出你最适合你的编程字体：
https://www.codingfont.com/

自从搞出来基于 vite 的 vinext 之后，next 一招多平台适配器就就镇住了

https://nextjs.org/blog/nextjs-across-platforms

nextjs.org

Next.js Across Platforms: Adapters, OpenNext, and Our Commitments

Next.js 16.2 introduces a stable Adapter API, a public adapter test suite, and a working group for more consistent deployment across platforms.

《Vibe_Coding已死：Agent工程取而代之》

标签：#AI #Agent #软件工程 #VibeCoding #多Agent协作

总结：

本文作者Collin Wilkins指出，"Vibe Coding"（凭感觉编程）这一由Karpathy提出的概念已被其本人"杀死"——现在的开发者99%时间不是在写代码，而是在编排Agent。作者分享了自己工作方式的转变：从一年前80%代码手写，到现在主要分解问题、分配Agent并审核输出。文章强调，2026年2月的四大模型发布都将多Agent编排作为核心能力，真正的差距在于工作流而非工具。

文章要点：

- Vibe Coding的致命缺陷：它只优化了代码生成速度，却忽视了后续环节——SonarSource调查显示AI代码占提交量的42%，但96%的开发者不完全信任它，仅48%会在提交前验证，审查负担真实存在且大多数团队根本没做
- Agent工程的新范式：先规划和设计系统，定义边界和契约，再让Agent在约束内执行，像分布式系统工程一样处理Agent编排——同样的分解、组件间契约、可观测性
- 多Agent成为主流：Claude的Agent团队用2000次协调会话构建了10万行C编译器，Kimi K2.5单个任务可运行100个子Agent进行1500次工具调用
- 工作方式的彻底转变：作者现在每天的工作是分解问题、分配Agent、审核输出，"写代码"已不能描述他的日常工作
- AI是动力工具而非替代品：会用AI的工程师交付更快，但只会用AI的工程师交付垃圾，关键是知道何时该提示、何时该思考
- 瓶颈已转移：写代码不再是慢的部分，思考要构建什么、如何组合、什么会在规模下崩溃——这些才是耗时的地方
- 文档化决策：LLM不存储上下文，如果想让AI助手在现有代码库上快速移动，它需要加载已记录的决策

文章URL：

https://buttondown.com/collinwilkins/archive/vibe-coding-is-dead-heres-what-replaced-it/

Buttondown

Vibe coding is dead. Here's what replaced it

What I actually do now instead of writing code.

《AI指数级增长时代的产品管理》

标签：#产品管理 #AI #ClaudeCode #敏捷开发 #原型优先

总结：

本文由Anthropic的Claude Code产品负责人撰写，探讨了AI模型指数级进步如何颠覆传统产品管理范式。作者指出，过去PM依赖"项目开始时确定技术边界"的假设已失效，因为模型能力在项目周期内可能跃升数十倍。新的工作流强调快速实验、原型优先、角色融合和持续迭代，PM的核心价值转向在不确定性中创造清晰度、推动团队大胆设想可能性，并加速产品交付。

文章要点：

- 传统假设被打破**：过去PM基于"技术能力在项目周期内相对稳定"制定长期路线图，但AI模型能力呈指数级增长（如Claude在16个月内任务处理能力提升41倍），项目初期的技术约束可能在开发中途消失
- **角色边界模糊化**：AI工具让设计师能写代码、工程师做产品决策、PM直接构建原型和评估，产品/设计/工程从线性流程变为高度重叠的协作模式
- **原型优先于文档**：用Claude Code等工具几小时就能做出可演示的原型，团队用Demo代替PRD进行内部验证，错误决策的成本大幅降低
- "支线任务"文化**：鼓励成员在正式路线图外进行短期自主实验，Claude Code桌面版、AskUserQuestion等热门功能都源自这种探索
- **模型迭代即产品迭代**：每个新模型发布都应触发对已有功能的重新审视，作者建议每天主动测试"可能太难"的任务，当模型能完成时就是产品该升级的信号
- **简单至上原则**：避免为绕过模型限制而设计复杂方案，这些"巧妙"的workaround会在新模型发布后变成技术债务，Claude Code的系统提示词已随模型升级精简了20%

文章URL：

https://claude.com/blog/product-management-on-the-ai-exponential

Claude

Product management on the AI exponential | Claude

Claude Code’s Head of Product Cat Wu shares how teams should rethink their workflows and roadmaps in the face of rapidly evolving model intelligence.

《设计高性能表单：5个基于研究的UX原则》

标签：#UX设计 #表单设计 #前端开发 #Web可用性 #交互设计 #用户研究

总结：

本文基于Baymard Institute等权威机构的可用性研究，提出了5个提升表单性能的核心UX原则：精简字段数量、采用单列布局、明确标注必填与选填字段、实施正确的即时验证时机，以及优化移动端输入体验。这些原则能有效降低用户放弃率（约26%用户因表单复杂而放弃），提升完成效率与满意度，是构建高转化率表单的设计基石。

文章要点：

- 精简字段数量：平均电商结账流程包含11.3个字段，但高性能网站仅需6-8个即可完成交易。多余的字段会增加认知负担，约26%的用户因表单复杂而放弃购买。建议移除或折叠可选字段，除非确有必要

- 单列布局更友好：多列布局在静态设计稿中看起来美观，但可用性测试表明用户容易误读字段顺序。人眼不会自然地"之字形"扫描多列表单，单列布局提升可读性，支持自然阅读习惯，在桌面和移动端都表现可靠

- 明确标注必填与选填字段：不要假设用户能推断哪些字段是必填的。研究显示，近三分之一用户在仅标注选填字段时会遗漏必填项。可靠的做法是统一标注所有字段状态（"必填"或"选填"），标签应紧邻字段标签放置

- 即时验证的时机很重要：正确实施的即时验证可提升表单成功率约22%，缩短完成时间40%以上，提高用户满意度30%以上。但不要在每输入一个字符时就验证（会增加认知负荷），建议在失焦时或字段完成后验证。错误提示应具体说明问题及修正方法，验证指示器应紧邻字段显示

- 优化移动端输入体验：避免将电话号码等输入拆分为多个字段，这会提高错误率和完成时间。确保触发合适的键盘类型（数字键盘用于卡号、邮箱键盘用于邮箱输入）。启用自动填充功能，Google研究显示这可减少30%以上的完成时间。允许粘贴完整值，不要阻止粘贴操作

文章URL：

https://designmybit.com/designing-high-performance-forms-5-research-backed-ux-principles/

The UX Bit

Designing high-performance forms: 5 research-backed UX principles - The UX Bit

Forms often cause more abandonment than any other UI component.




UX research quantifies this: many checkout flows require 11‑13 fields, though studies show only 6‑8 are necessary when well optimised.




Here are five principles grounded in peer‑reviewed…

《TypeScript 6.0 正式发布：迈向原生编译器的重要桥梁》

标签：#前端 #TypeScript #TS6 #TS7 #ESM #NodeJS #Compiler

总结：

TypeScript 6.0 是连接 5.9 与即将发布的 Go 语言重写版 7.0 的关键过渡版本，也是基于当前 JavaScript 代码库的最后一个主要版本。本次更新带来多项实用新特性，包括更智能的无 this 函数类型推断、支持 #/ 开头的子路径导入、内置 Temporal API 类型、Map 的 getOrInsert 方法等。同时，大量旧配置项被标记为废弃（如 target: es5`、`baseUrl`、AMD/UMD 模块等），`strict 和 module 等选项的默认值也更现代化。这些调整旨在帮助开发者提前适配 TypeScript 7.0 的全新架构。

文章要点：

- 过渡版本定位**：TS 6.0 是基于 JS 代码库的最后一个版本，TS 7.0（Go 重写版）已接近完成，6.0 的改动主要为 7.0 铺路
- **类型推断更聪明**：不再把未使用 `this` 的方法语法函数视为上下文敏感函数，让属性顺序不影响类型推导，写代码更随心所欲
- **子路径导入更简洁**：终于支持 `#/*` 这种干净的别名写法，告别之前必须写 `#root/*` 的冗余，和打包工具里的 `@/` 习惯更接近了
- **全新内置类型**：Temporal API 正式入驻（处理日期时间更靠谱），Map 新增 `getOrInsert` 和 `getOrInsertComputed` 方法，告别繁琐的"有则取无则设"模式
- **配置默认值现代化**：`strict` 默认开启，`module` 默认 `esnext`，`target` 默认当前年份（es2025），新项目开箱即用更严格、更现代
- **性能优化相关**：`types` 默认改为空数组（需显式声明如 `["node"]`），`libReplacement` 默认关闭，构建速度有望提升 20-50%
- **大量废弃项需留意**：`target: es5`、`baseUrl`、`moduleResolution node`、AMD/UMD/SystemJS 模块、`outFile`、`module` 关键字声明命名空间等都将退出历史舞台，建议尽早迁移
- **迁移辅助工具**：提供 `--stableTypeOrdering` 标志帮助对比 6.0 与 7.0 的差异，`ts5to6` 工具可自动调整 `baseUrl` 和 `rootDir` 配置

**文章URL：
https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/

Microsoft News

Announcing TypeScript 6.0

TypeScript 6.0 is now available! TypeScript 6 is a stepping-stone release, aligning with the upcoming native-speed 7.0 release.