AsyncTalk

你肯定见过 OpenClaw 这种 AI Agent——挂在服务器上,你在聊天框 @ 它一句,它就自己动手把活办了:查资料、改文件、跑脚本……不只是会聊天,而是真能动手干活,也就是现在常说的 agentic。那要自己做一个这样的 agent,是不是得把每个平台的 API 和 webhook 都单独研究一遍、写一堆胶水代码?这期聊 Vercel 开源的 ChatSDK——可以把它理解成「AI Agent 的对话接入层」。它把 Slack、Microsoft Teams、Discord、Telegram、GitHub、WhatsApp… 十多个平台的机器人逻辑统一了起来:你只写一套 TypeScript 代码,在一个 onNewMention 回调里 subscribe 再 post,你的 agent 就能在所有平台上跑起来。视频里会带你看:· ChatSDK 的三个核心概念——Chat、Adapter、State· 怎么用一个 callback 统一处理各平台的 webhook,把"接入层"这件最烦的事交出去· 从"在 GitHub 里 @ 一下机器人帮你改个颜色"出发,一路扩展到 Slack 等更多平台· 内置 AI streaming、和 AI SDK 打通,接你自己的 agent 逻辑很顺· 聊天状态怎么持久化(memory / Redis);社区还有飞书等国内平台的 adapter一句话:在 ChatSDK 的帮助下,"造一个属于自己的 OpenClaw、把你的 AI Agent 放进各个聊天软件"已经变成挺简单的一件事了。你会想拿它做个什么样的 agent?或者你已经在搭什么有意思的功能了?评论区聊聊 �—— AsyncTalk 异步聊技术,既有趣又有料,我们下期见#ChatSDK #AIAgent #AI机器人 #Vercel #OpenClaw #TypeScript #asynctalk

有没有遇到过这种场景:一个删除按钮,点下去得先弹个「确认删除吗?」,用户点确定才真的删。浏览器自带的 window.confirm 是能用,但又丑、又几乎不能定制——位置、颜色、甚至标题都改不了。于是你只好自己写组件、用 React Portal 挂载、再手动管理 DOM 的显隐和生命周期,挺折腾的。这期聊聊 react-call 这个小而美的库。核心思路一句话:把你自定义的 React 组件变成「可以 await 的函数」。用 createCallable 包一层,就能在调用方直接 await xxx.call(...),像调用异步函数一样拿到用户的操作结果。视频里会过一遍:· 从 window.confirm 的痛点切入,为什么手写 Portal 很烦· createCallable 的基本用法(call / Title / action 几个字段)· 用 bottom sheet 写的实战例子· 支持同时弹出多个实例(比如一连串 Toast)· 和 react-query mutation 的配合:接口失败时弹框依然保留· 自带 skills,对 AI 编程也很友好你平时都怎么处理这类弹框、或者异步交互逻辑?评论区聊聊~#React #前端开发 #TypeScript #Web开发 #编程 #react-call #asynctalk

前后端怎么交互?大多数人第一反应都是 REST + HTTP。但接口越写越多、前后端对同一个字段理解对不齐、类型全靠猜——这些坑你大概率都踩过。这期我们聊 GraphQL:一门出道十多年、却始终没真正普及的技术,为什么在 AI 时代反而值得重新认识。我们从 REST 的痛点出发,讲清楚 GraphQL 的强类型 schema 如何统一前后端协作、如何让缓存更聪明,以及为什么强类型对 AI 写代码是一个巨大的红利。当然,GraphQL 不是银弹。我们也会聊它真实的坑:n+1 问题、缓存思维的转变、HTTP 状态码、以及什么项目压根不该上 GraphQL。如果你在做一个中大型项目,或者想让 AI 帮你写出更靠谱的代码,这期也许能给你一些新思路。欢迎在评论区聊聊你对 GraphQL 的看法,记得关注 AsyncTalk 异步聊技术。#GraphQL #api #全栈开发 #后端开发 #AI #程序员 #asynctalk

Swagger + Hey API 自动生成请求代码,告别手写 interface在前后端协作中,RESTful 接口缺乏强类型约束,常常带来一系列联调成本:前端遇到read from undefined,排查后发现是后端返回的数据结构缺失;约定好的字段类型被悄然变更(例如 int32 改为 int64 纳秒);字段命名、大小写、enum 取值、是否可选等细节需要反复确认,既影响效率,也容易引入缺陷。GraphQL、tRPC 能够从根本上解决这类问题,但对既有项目而言改造成本接近重写,新项目也存在不小的学习成本,在实际工程中往往难以落地。本期介绍一种更具可行性的渐进式方案:由后端提供规范的swagger.json,前端借助 Hey API 根据该契约自动生成请求代码。生成结果不仅覆盖请求发送,还可包含 response body 校验(可选启用 zod)、react-query 的查询代码与 key,并在编译期完成类型检查,从而尽早暴露问题、清晰划分前后端的责任边界。该方案的另一项优势在于对 AI 与 CI 的友好度:数据结构固定后,AI 无需再推测接口的返回结构与路径细节,生成代码更准确;契约稳定也使 CI 中的类型检查、lint 与测试更加可靠。它对后端实现与整体架构几乎没有侵入——开发方式仅从调用手写的 HTTP 接口,转为调用 Hey API 生成的接口。需要强调的前提是:后端提供的 swagger 必须准确,这仍依赖团队之间充分而严谨的沟通。欢迎在评论区分享你的团队是如何管理前后端接口契约的。#前端开发 #TypeScript #Swagger #HeyAPI #前后端联调 #AI编程 #asynctalk

GitHub Actions + Claude 代码审查 + 自动发布,从 push 到上线全流程拆给你看写完代码 git push 上去之后,到真正上线之前,中间到底发生了什么?这期我直接打开自己项目的 GitHub Actions,把整条 CI 流水线扒开给你看。从 push、用 GitHub CLI 开 PR,到 Claude Code 自动 review 帮我抓空指针、codecov 盯测试覆盖率,再到 Release Please 按语义化 commit 自动生成版本、打 tag、构建 Docker image——全流程串一遍,一个环节都不跳。Runner 配合 GitHub Actions 本身慷慨的免费额度,轻量项目基本能零成本跑起一整套 CI。性能 OK 不算顶,但够用,关键是省钱。如果你有更顺手的环节或者觉得哪里还能优化,评论区聊聊,也欢迎甩给我更好的玩法。

万物皆可 CLI 的时代（尤其 AI 起来之后），怎么写一个好用的命令行工具？这期聊点不一样的——不碰 C/Go/Rust，直接用 TypeScript + Bun 也能整一个能发给用户的 CLI。从 bun init 起步，命令解析交给 citty，界面渲染用 Ink（对，就是用 React 写 TUI），最后 bun build --compile 一把打成单文件。57 兆是大了点，但是它能用（doge）。最折磨人的签名 + 公证怎么办？goreleaser 从 2.6 开始把 bun 当一等公民支持，checksum、changelog、打包、公证、Homebrew 分发全给你包圆了。顺带提一句：Mac 开发者证书 99 刀一年，这钱是真省不掉。下期预告：怎么把这整套编译流程自动化掉。你写过 / 用过哪些有意思的 CLI？评论区聊聊～#CLI #命令行工具 #TypeScript #Bun #Ink #goreleaser #前端开发 #程序员 #开发工具 #ClaudeCode #AsyncTalk

AI 输出 Markdown 你是不是已经看腻了？来自 Anthropic 的 Thariq 最近写了篇文章，提出一个挺有意思的观点：HTML 正在取代 Markdown,成为大模型更好的表达语言。这期我们聊聊: 为什么 Markdown 一开始成了 AI 的默认输出格式 Markdown 的天花板:code diff、依赖图、design token 全都"压扁"了 HTML 怎么把可读性拉满,代价是 token 爆炸 用 Claude Code 实测:让它用 HTML 解释 async task 流程,架构图、时序图、代码片段一气呵成 我心中的"隐藏大佬"——MDX:Markdown 的强化版,该用文字用文字,该用组件上组件简单说:Markdown 没过气,只是角色变了。你怎么看 AI 时代的输出格式?有没有更好的方案?评论区聊聊�#HTML #Markdown #MDX #AI编程 #大模型 #LLM #ClaudeCode #Anthropic #前端开发 #程序员 #AI工具 #异步聊技术 #AsyncTalk #开发者 #编程

UI 组件库聊了十几年,但 AI 时代的最优解可能和过去完全不一样。这期从两个流派的设计哲学讲起:AntD 派回答的是「怎么更快交付」——在过去十年它确实是最优解,30 秒上手、生态成熟、文档齐全,帮我们解决了无数业务问题;ShadCN 派回答的是「怎么做对的事情」——把 UI 库从 dependency 变成你自己的代码,语义化和 RSC 友好都更上一层。然后是我自己的答案:在 AI 时代,让 AI 帮你撸一个真正属于你项目的 UI 库,可能才是最适合大多数场景的选择。品牌一致、性能可控、演进自由,成本只比 AntD 高一点点。章节: 00:00 开场 00:09 UI 组件的两个时代 01:42 AntD 派 vs ShadCN 派的根本区别 02:13 AntD 的优势与它在新时代遇到的挑战 07:25 传统 UI 库的本质:实用主义 07:51 ShadCN 的核心理念:你 own 这些代码 09:53 两派对比小结 10:17 我的方案:用 AI 自己撸 UI 库 12:36 不同项目场景的选型建议 13:23 下一个十年你是哪一派?评论区聊聊你的选择~关注【异步聊技术 AsyncTalk】,每期聊点有趣又有料的技术。#前端开发 #AntDesign #shadcn #React #Tailwind #AI编程 #ClaudeCode #web开发 #程序员 #异步聊技术

还在被 ESLint 卡到怀疑人生？这期聊聊尤雨溪团队 VoidZero 出品的 oxlint 和 oxfmt——同样的项目，ESLint 跑 1 分 43 秒，oxlint 21 秒搞定，50-100 倍提升不是吹的。这期会聊到：� oxlint 到底比 ESLint 快多少（实测对比）� 为什么我不选 Biome？GritQL 插件系统真的劝退人，AI 都写不来� oxlint 插件系统：兼容现有 ESLint 生态，还能用 JS 手写规则（让 Claude 帮你写都行）� lint 慢不只拖累你，还拖累 Claude Code / Codex 的迭代效率 现在该不该迁？除非你是 300 万行的祖传项目，否则建议直接换摸鱼的时候点开听听，省下来的时间都是赚的 �你的项目迁到 oxlint 了吗？踩过什么坑？评论区蹲一波交流～—AsyncTalk｜异步聊技术一档 Web 开发 + AI 的播客节目#oxlint #oxfmt #ESLint #尤雨溪 #前端  #JavaScript #TypeScript

Prompt 工程的尽头，是「说人话」。少一点：复杂 role冗长规则八股结构多一点：清晰目标简单表达合理拆分任务把 AI 当成一个实习生，而不是神或工具。你怎么说，它就怎么做。—这期聊的是：� 如何更高效地和 AI 沟通，而不是“控制它”欢迎交流你的使用方式 �

线上半夜出 bug,第一反应是看日志 → 结果发现日志啥也没说 �这期 5 分钟讲清楚两个让你日志直接上档次的技巧:1️⃣ JSON 结构化日志:让机器读得懂,让你查得飞快,告别 grep 大法2️⃣ 宽日志(Wide Events):一次请求一条日志,把上下文一次打全,排查效率拉满学完这两招,on-call 不再哭,下班准点跑 �‍️�️ AsyncTalk - 异步聊技术,既有趣又有料#程序员 #后端开发 #编程技巧 #日志 #devops #observability #码农生活 #软件工程师 #后端 #编程 #logging #backend

凌晨三点，Sentry 又响了。作为一个不想被 on-call 毁掉睡眠的打工人，我搓了套极简 harness，让 Claude Code 顶替我值班。这期聊聊我是怎么把整条链路串起来的：日志服务 + Sentry 通过 MCP 暴露给 Claude CodeClaude Code 跑定时任务，自动拉报警、定位根因改完代码跑测试、提 MR，丢回给我 review我只需要点 approve（或者骂它两句让它重写）不是什么重型 Agent 框架，就是几个 MCP server + 一点配置，但是真能跑。适合所有不想半夜爬起来看报错的开发者。#Claude[话题]#  #MCP[话题]# #AI编程[话题]#  #AI自动化[话题]# #oncall[话题]#   #程序员[话题]#  #asynctalk[话题]#  #Agent[话题]# #ai[话题]# 

Bun 出了五年了，前几个月又刚被 Anthropic 买下来。如此声势浩大，如此风光，那它真的能替代 Node 吗？#js #node #asynctalk #前端 #web #程序员 #码农 #计算机

前段时间新出了个 Ghostty 的终端，UI 挺漂亮，效果也不错。主打就是一个颜值。`sudo` 命令有提示， loading 也有动画。甚至有 libghostty 能自己做 terminal， 一起来试试吧#ai #ghostty #terminal #终端 #程序员 #代码 #k8s #asynctalk

当无需打开代码，有多 repo 协作，有完整 CI/CD 集成，有 Plan Mode 做规划。它可能才是未来软件的开发模式曾经我们以为 Cursor 这样的 AI + IDE 混合模式是未来开发的方向，但是现在方向已经清晰，不开代码才是未来写代码的方式。一起来看看 Claude Desktop 和 [Codex.app](http://Codex.app) 如何变革软件开发，探索未来

我的 next.js 网站好慢啊，很可能就是因为没加跳转状态！来看看怎么轻松优化响应吧#next.js #fe #前端 #ai #程序员 #asynctalkBGM by Otologic

AI 时代写代码的方式发生了翻天覆地的变化。本期节目介绍了推荐的 next.js, tailwindcss 以及 node 来构建项目选择 star 数高的库来集成可读性的重要性，以及不要过度优化最重要的是思维模式一定要转变，AI 使得个人能力极度放大，我们需要创造力和 passion#ai #asynctalk #nextjs #tailwind #程序员 #工程师 #代码BGM by Otologic

Remotion 可以通过写 react 的形式做宣传视频，现在带着 AI 的加持，整个过程变得更加自动，快来试试吧BGM by Otologic#asynctalk #ai #remotion #程序员 #企业视频制作

随着 claude code 的爆红，TUI 又一次进入主流视野。这次它带着强大的上下文，回来了。也引起了很多人的讨论，觉得它是过时的技术，是在开倒车可是，TUI 真的这么老不中用，真的是老登技术吗？还是说Ah, but I was so much older thenI'm younger than that now#tui #ai #asynctalk #claude #terminal #命令行 #程序员 #warp #ghostty

Opus 4.6 发布，带来了 1M Context Window, Agent Teams, fast model, effort 参数那么，它是否真的强到足以真正冲击高度发展的软件开发行业，能否真的打击到专业 SaaS 平台？#Opus #AI #LLM #大模型 #程序员 #Claude #asynctalkBGM by Otologic

OpenClaw 爆火不仅推动 AI 产品进一步朝着无托管的方向前进一大步，同时也对 AI 安全产生了一些挑战

AsyncTalk 本期节目来聊了 Claude Code 及其带来的巨大影响，以及如何更好地和 AI 协作- Plan Mode 真重要- 把 AI 当人看才能合作- terminal 版本最靠谱- AI 能连续工作吗- AI 可能会作恶- 我们要有判断力BGM by Otologic

AsyncTalk 的视频播客节目正式开播啦～接下来有最新的前沿 web 开发技术和 AI 探索分享哦一起来关注吧开播啦

如何才能在 AI 时代写代码写得从从容容，游刃有余？本期 AsyncTalk 讨论了这个问题。给出了一些想法：- 程序员的可拓展逻辑没有变，还是难以替代- 后端就选 node，别 bb- 写代码首先支持可读性，老板的要求都要退居其后有任何意见建议可以在评论区留言，或者邮件联系 [email protected] 也可以在 X(Twitter) 上与我们互动 https://x.com/AsyncTalk主播AnnatarHe: https://annatarhe.comTimeline00:20 AI 仍然是被低估的01:10 程序员不会消失 - 它具有极大的可拓展性02:45 程序员不会消失 - 这个群体人才比例高03:31 程序员的要求会越来越高04:20 程序员要求从老到新都要懂 - XML, CLI 等05:55 AI 时代怎么写项目06:00 Next.js 是你的首选08:52 后端选 Node 或 Python11:27 UI 就选 tailwindcss + shadcn12:44 UI 也可以自己写14:58 业务开发怎么结合 AI15:10 可访问性优先16:30 llm.txt17:00 UA 检查 AI 应该返回纯文本18:23 XML 优于 JSON19:35 支持标准 IO20:38 AI 时代的开发原则21:08 可读性高于一切。高于性能，高于效率，高于短期收益23:58 抛弃非语义化。比如 uuid24:58 写测试25:47 欢迎留下自己的想法相关链接SEO 搜索引擎优化: https://en.wikipedia.org/wiki/Search_engine_optimizationCritical npm supply chain attack response - September 8, 2025: https://vercel.com/blog/critical-npm-supply-chain-attack-response-september-8-2025OpenAI Agents SDK: https://openai.github.io/openai-agents-js/tailwindcss: https://tailwindcss.com/Adam Wathan https://x.com/adamwathan/status/1953510802159219096shadcn: https://ui.shadcn.com/llm.txt: https://llmstxt.org/bun 支持输出 markdown: https://x.com/bunjavascript/status/1971934734940098971?s=46stripe 支持复制为 markdown: https://docs.stripe.com/building-with-llms扩展阅读EP46 如何正确开喷 Next.js: https://asynctalk.com/posts/ep46

Claude Code 的出现同时也将世界带向了下一个 Agentic 编程的时代。本期节目来聊了 Claude Code 及其带来的巨大影响朋友们，无论如何一定要尝试用一用 Claude Code !有任何意见建议可以在评论区留言，或者邮件联系 [email protected] 也可以在 X(Twitter) 上与我们互动 https://x.com/AsyncTalk主播AnnatarHe: https://annatarhe.comTimeline00:20 AI 应用最确定的大概就是写代码了04:20 Claude Code 能力非常非常强大07:20 很贵，但是性价比仍然极高。跟人比，太便宜10:22 后 Claude Code 时代，初级程序员和设计师很危险13:15 一人公司可能性更大14:20 普通和平庸的人会越来越难以和 AI 竞争16:00 可拓展业务会被 AI 放大更多17:10 一定要试试 Claude Code, 感受下一个时代相关链接cursor: https://cursor.com/enwindsurf: https://windsurf.com/editorOpenAI to acquire AI coding tool Windsurf for $3B: https://www.computerworld.com/article/3978426/openai-to-acquire-ai-coding-tool-windsurf-for-3b.htmlgpt-image-1 by OpenAI: https://platform.openai.com/docs/api-reference/imagesFLUX.1 Kontext by black forest labs: https://bfl.ai/models/flux-kontextCluade Code: https://docs.anthropic.com/en/docs/claude-code/overviewccusage: https://ccusage.com/EP43 成人话题 - 大厂生活（生存）指导音频 https://asynctalk.com/posts/ep43

Shownotes本期节目聊一聊如何正确开喷 next.js 和 react有任何意见建议可以在评论区留言，或者邮件联系 [email protected] 也可以在 X(Twitter) 上与我们互动 https://x.com/AsyncTalk主播AnnatarHe: https://annatarhe.comTimeline00:20 看人不会喷 next.js 比较着急01:11 vercel 一点儿都不草台班子01:50 next.js 的前后端融合更高级02:20 很大，很重，但是很快03:40 吐槽：过于复杂06:22 吐槽：bug 太多07:55 吐槽：debug 困难10:13 吐槽：不规范12:50 吐槽：社区不够友善13:20 预测15:04 别被骗了。严肃项目上 next.js相关链接JUST FUCKING USE REACT: https://justfuckingusereact.com/ViewTransition: https://react.dev/reference/react/ViewTransitionuseLinkStatus: https://nextjs.org/docs/app/api-reference/functions/use-link-statusPartial Prerendering https://nextjs.org/docs/app/getting-started/partial-prerenderingCould not build standalone with docker if webpack not null #73361 https://github.com/vercel/next.js/issues/73361How to find production memory leaks in Node.js applications? https://medium.com/@amirilovic/how-to-find-production-memory-leaks-in-node-js-applications-a1b363b4884fNode.js Heap profiler: https://nodejs.org/api/inspector.html#heap-profileruse cache: https://nextjs.org/docs/app/api-reference/directives/use-cachenext.js fetch**:** https://nextjs.org/docs/app/api-reference/functions/fetchThe <select> element can now be customized with CSS ****https://developer.chrome.com/blog/a-customizable-select

本期节目拉到了 Anthony Fu 聊一聊 Vite, Vue, 大模型对框架的影响以及法国经历和最后精彩的 React, Vue “大战”本期节目较长，但是我还是感觉最后一段的 React, Vue 大碰撞挺有趣的。有任何意见建议可以在评论区留言，或者邮件联系 [email protected] 也可以在 X(Twitter) 上与我们互动 https://x.com/AsyncTalk主播AnnatarHe: https://annatarhe.comAnthony Fu: https://x.com/antfu7Timeline00:00 Anthony 自我介绍02:30 Vitest Browser Mode 介绍08:30 RSC 在 Vue 中有没有什么对策18:05 Vite 的性能好在哪里，风险在哪里，未来又怎么解决30:22 努力做大市场份额，让 LLM 也懂怎么写框架36:02 开源项目怎么开始，怎么维护47:55 法国经历。好朋友不忍离别，可法语又太过晦涩59:23 Raycast 用着还不错, Vite 来试试62:52 作为 React 程序员，如何看待 Vue69:19 关于 DSL 的问题，react 也有75:00 双向数据流的讨论82:00 Signals相关链接Vitest Browser Mode: https://vitest.dev/guide/browser/Why I Won’t Use JSDOM: https://www.epicweb.dev/why-i-won-t-use-jsdomplaywright: https://playwright.dev/happydom: https://github.com/capricorn86/happy-domnuxt: https://nuxt.com/vite: https://vite.dev/rollup: https://rollupjs.org/rolldown: https://rolldown.rs/rspack: https://rspack.dev/UnoCSS: https://unocss.dev/antfu/node-modules-inspector: https://github.com/antfu/node-modules-inspectorastro: https://astro.build/tc39/proposal-signals: https://github.com/tc39/proposal-signals扩展阅读The /llms.txt file: https://llmstxt.org/

AI 发展太快了，产品出得也挺给力。那么 AI 产品有什么方向吗？编辑器是不是正在进行的新风口？如果你有什么新点子，不嫌弃的话也可以评论区留言，或许有人会有更优化的点子助力也说不定呢？音量问题本期节目已尽量调大，但是可能还是不满足要求，请用户再自行加大音量。（其实我不会用剪辑软件）如果有什么意见建议欢迎发送邮件到 [email protected] 或者在 X(Twitter) 上与我们互动 https://x.com/AsyncTalk主播AnnatarHe: https://annatarhe.comLouis: https://x.com/louistang151Timeline00:46 AI 发展太快了05:06 Deepseek 的影响挺大07:44 聊天 → RAG → Agent14:55 Agent 做代码编辑器好像挺靠谱17:45 新的代码编辑器应该是什么样子26:45 Cursor 这种代码编辑器收费如此高昂，但是能挣钱吗？31:02 AI 编辑器应该有什么新功能会是全功能团队吗？42:02 为什么这种划时代的产品没有在大公司出现？45:33 使用 AI Editor 有哪些 tips 吗？50:55 Agent 新方向？54:51 思想开源挺重要相关链接Introducing ChatGPT: https://openai.com/index/chatgpt/GPT-4 is OpenAI’s most advanced system, producing safer and more useful responses: ****https://openai.com/index/gpt-4/OpenAI o3-mini**:** https://openai.com/index/openai-o3-mini/Deepseek: https://www.deepseek.com/Transcript for DeepSeek, China, OpenAI, NVIDIA, xAI, TSMC, Stargate, and AI Megaclusters | Lex Fridman Podcast #459: https://lexfridman.com/deepseek-dylan-patel-nathan-lambert-transcript/RAG: https://blogs.nvidia.com/blog/what-is-retrieval-augmented-generation/LLM Agents: https://www.promptingguide.ai/research/llm-agentsCursor: The AI Code Editor**:** https://www.cursor.com/Windsurf: https://codeium.com/refer?referral_code=3bfa98e9ccTrae: https://www.trae.ai/V0: https://v0.dev/Bolt: https://bolt.new/Zed editor: https://zed.dev/Three.js: https://threejs.org/Devin AI: https://devin.ai/TablePlus 管理数据库: https://tableplus.com/Sonnet 3.7: https://www.anthropic.com/claude/sonnet在 Gmail 中使用智能撰写功能: https://support.google.com/mail/answer/9116836?hl=zh-Hans&co=GENIE.Platform%3DDesktopCursor Notepad: https://docs.cursor.com/beta/notepads扩展阅读Introducing the Model Context Protocol: https://www.anthropic.com/news/model-context-protocolBuilding effective agents**:** https://www.anthropic.com/engineering/building-effective-agentsAnthropic thinks you should build agents like this**:** https://www.aihero.dev/building-effective-agents花了大半个月，我终于逆向分析了Github Copilot**:** https://github.com/mengjian-github/copilot-analysis

本期节目从油腻的中年男人的自我辩解开始，探讨了如何挣钱，如何做自己的项目一直到大厂的生活。当然也是分享了一些在大厂生存的小技巧。如果听众朋友有考虑做一做副业，也欢迎大家一起做播客和我们来卷一卷 �有任何意见建议欢迎在评论区留言，发邮件至 [email protected] 也可以关注 X(twitter): https://x.com/AsyncTalk主播AnnatarHe: https://annatarhe.comLouis: https://x.com/louistang151Timeline01:00 刚毕业的状态04:20 油腻中年男人的自我辩解08:05 挣钱的路子：打工，投资，黑产，副业17:27 Selling 也非常重要21:50 个人与职业的成长路径，以及成本25:46 大厂的集体意志: 他人评价并不等于真实反馈。而绩效把人变得平庸29:57 保护自己，不能 all in 大厂34:41 如何在菜场买肉39:50 离了大厂，还能做点儿什么42:20 大厂的小招数可能对老外不是很好用44:44 会是 AI 送我们毕业吗？48:48 如何在大厂生存64:40 保留自己的想法，找到自己的兴趣。早日赎身。相关链接Roc: https://x.com/roczhang9673Lok: iPad 也能有桌面: https://apps.apple.com/us/app/lok-board/id1621242252EP19 上班也就图一乐，真挣钱还得卖 App （吗？） https://asynctalk.com/posts/ep19孙哥的香蕉: https://x.com/justinsuntron/status/1865831394146140547Kimi 助手: https://kimi.moonshot.cn/豆包 AI 助手: https://www.doubao.com/chat/Bolt: https://bolt.new/v0: https://v0.dev/稚晖君: https://space.bilibili.com/20259914/stormzhang: https://github.com/stormzhangEvan You: https://github.com/yyx990803

RTE 大会将在 25， 26 号在北京举行，包含了众多音视频和前沿 AI 的内容，关键这么好的活动还免费。欢迎大家来参加呀： https://www.bagevent.com/event/sales/qlyy24ejnpq8qd31qk7se84msx4zzjv4本期节目借着 Deno 2 的发布，又来聊了 Node.js 的发展变迁。js 社区的折腾是有意义的，它带来不断的新变化，新机遇。一成不变，最为无聊。Deno 2 还是很有趣的，各位可以试试看 �内容中如果有任何不正确，或者你有自己的意见建议，欢迎留言或者在 twitter 中沟通: https://x.com/AsyncTalk主播AnnatarHe: https://annatarhe.comTimeline00:20 RTE 大会贼牛逼，25， 26 号来北京参加一下吧～01:28 自己一个事业比打工爽多了02:55 很多时候一个事业来源于愤怒的想法03:45 Node.js, io.js 与 deno 的分分合合07:00 稳定的东西很无趣，变化才有机会08:55 Deno 的发展是一步步的妥协与成长14:25 Deno Deploy14:43 我自己会不会用 Node/Deno相关链接Node.js: The Documentary | An origin story https://youtu.be/LB8KwiiUGy0?si=vssFbRqJgWIFi7SdNode.js 中关于 io.js 的部分: https://en.wikipedia.org/wiki/Node.js#:~:text=In December 2014%2C Fedor Indutny,including the updating of io.Node.js Releases: https://nodejs.org/en/about/previous-releasesNode.js Pull Request: module: add --experimental-strip-types https://github.com/nodejs/node/pull/53725关于 js 社区变化大的一条 twitte: https://x.com/AnnatarHe/status/1846757992492159210Announcing Deno 2 https://deno.com/blog/v2.0Deno Deploy: https://deno.com/deployDeno compile: https://docs.deno.com/runtime/reference/cli/compiler/扩展阅读Bash/Sh is an objectively awful programming language: https://news.ycombinator.com/item?id=35992575

AI 发展很猛，可是我们前端却不怕失业。因为我们有表单可以做。 hhhhhh快来听听新一期的播客吧，主播AnnatarHe: https://annatarhe.comTimeline00:53 AI 发展太快了。前端是不是要丢工作？03:33 做表单是 web 开发的安全区04:20 内容大，多级联动，业务复杂是表单不被 AI 取代的原因06:20 技术实现上，表单也不好做：代码设计不好搞09:02 表单校验很重要11:10 校验国际化还是非常重要的12:38 标准化与合规也是设计表单的一部分15:38 做表单不仅要快，更要做好相关链接https://claude.ai/gpt-4o: https://openai.com/index/hello-gpt-4o/https://www.adobe.com/products/dreamweaver.htmlhttps://en.wikipedia.org/wiki/Microsoft_FrontPageEP06 Low Code 到底 Low 不 Low: https://asynctalk.com/posts/ep6EP10 出海，国际化: https://asynctalk.com/posts/ep10Antd.Form: https://ant.design/components/form-cnreact-hook-form: https://react-hook-form.com/BGM by Otologic

状态机自古以来就是前端领域不可分割的一部分。本期节目从状态机开始，讨论了一些开发经验 —— 包括不能走极端框架信仰，同步不一定万恶，状态机不可分割。之后用一个例子介绍了如何用流程和状态管理来进行业务设计。最后，前端的天花板不一定像是外界说得那么低（有没有可能，低是因为视野低？）主播AnnatarHe: https://annatarhe.comTimeline00:07 比较懒，所以更新慢03:40 因为巨大的项目，所以想起了状态机01:58 不要定式思维框架04:21 设计模式确实很有道理，得学，得用05:30 复杂状态下，考虑一下，接上状态机08:20 同步并不是纯粹的坏事，也不应该完全拒绝09:48 状态机可以有效降低维护成本10:12 例子：和机器人聊天的状态与逻辑设计14:14 不要定式思维，不要接到需求就开干14:50 前端的天花板，也许没有外界说得那么低相关链接XState: https://stately.ai/docsState and Lifecycle: https://legacy.reactjs.org/docs/state-and-lifecycle.html扩展阅读Improving State Management with Xstate: Refactoring Authorization Flows: https://annatarhe.github.io/2024/08/04/improving-state-management-with-xstate-refactoring-authorization-flows.html

本期节目从前端性能优化开始，主要还是关于 SSR, RSC 和 Node 如何提升渲染性能。目前这条路径看起来应该是个比较确定的 Web 发展方向了。大家可以考虑追上节奏，升职加薪欢迎评论区留言, 给我们发邮件 [email protected] 或者在 Twitter 留言: https://twitter.com/AsyncTalk主播AnnatarHe: https://annatarhe.comTimeline00:28 从前端性能优化开始02:00 传统的前端性能优化在 Server rendering 面前略显尴尬03:10 后端渲染和 RSC 很不同07:20 后端渲染的网络天生比客户端快10:59 大项目可以考虑自己实现 Server rendering11:30 API Server 的两种设计方式14:50 Node 躲不开，得学习15:21 Node 几个有趣的学习点18:20 后端是个很好的学习入口相关链接HTTP2: https://en.wikipedia.org/wiki/HTTP/2DNS Prefetch: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetchPreload: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preloadReact Server Component: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-componentsPartial Prerendering: https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerenderingBigPipe: https://engineering.fb.com/2010/06/04/web/bigpipe-pipelining-web-pages-for-high-performance/Spring: https://spring.io/MVC: https://en.wikipedia.org/wiki/Model–view–controllerCGI: https://en.wikipedia.org/wiki/Common_Gateway_InterfaceBGM by Otologic

最近工作不容易啊，来和 前端輕鬆聊 的 Eric 一起聊聊在北美的工作情况。有任何意见，建议或者评论欢迎在下面评论或者发邮件至 [email protected]本期剪辑是分开的，也可以去听 Eric 的版本: https://fetalk.dev/episodes/ep34主播AnnatarHe: https://annatarhe.comEric 前端輕鬆聊: https://fetalk.dev/Timeline00:02 欢迎 AsyncTalk 的 AnnatarHe 与 前端輕鬆聊 的 Eric00:46 北美与中国的面试大概要多久？04:45 北美面试流程长吗？08:30 北美招聘市场似乎有回暖10:30 有趣的面试经历16:35 变成面试官什么感觉？17:19 作为面试官，能否合作也许是最重要的19:50 礼貌是面试者和面试官都需要具备的东西20:05 面试时双向的，没有谁高谁低21:42 面试官不要找优越感，找优点22:46 有题库的面试官，本来就不公平24:09 别谦虚26:00 加拿大应届生大概 8 万 CAD ?30:00 级别越高，股票越多？31:50 Eric 的神仙面试33:00 跟人合作也许比业务重要BGM by Otologic

或许是 AI 的发展，文本编辑迎来了又一个春天。从最原始的 Textarea 到一站式的富文本编辑器，再到最近崛起的 Headless framework，文本编辑正在不停迭代在 AI 的加持下，文本编辑会不会是一个新的窗口？如果自己做一个文本编辑器，如何做技术选型？应该做哪些功能呢？来听一听今天 AsyncTalk 吧～欢迎评论区留言, 给我们发邮件 [email protected] 或者在 X 留言: https://twitter.com/AsyncTalk主播AnnatarHe: https://annatarhe.comTimeline00:30 AI 时代，文本编辑发展很快02:40 文本编辑器卷得非常厉害04:05 Word/WPS 早期发展，专业领域依旧强大04:40 Evernote 简单和云服务也许是它当年的优势05:20 Markdown 正在吞噬传统文本编辑07:30 自己造编辑器变得有可能了08:40 云的链接也许是 notion 和 lark 强大的原因09:50 jupyter notebook 很不一样10:41 AI 的革新非常迅速11:20 如何做一个 Web 文本编辑器？Textarea 与 framework12:20 整套的文本编辑方案正在向 Headless 转变13:58 TipTap 与 Lexical18:06 文本编辑的协作，AI 和报表功能不可或缺22:22 Local first 真的那么重要吗？24:20 听众也可以卷文本编辑器，赶上这波 AI 与协作的浪潮相关链接Playwright 的 VSCode 拓展，展示了 block 粒度的编辑控制: https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright印象笔记(Evernote): https://evernote.com/飞书(Lark): https://www.larksuite.com/Jupyter notebook: https://jupyter.org/TipTap Editor: https://tiptap.dev/product/editorLexical Editor: https://lexical.dev/扩展阅读Observable Framework 这个产品看起来非常不错，推荐一把: https://observablehq.com/BGM by Otologic

ShownotesAsyncTalk EP36 来谈论最近很沉重的工作话题。因为 AnnatarHe 最近有些朋友的职业有一些变化，包括网上的一些评论和态度觉得有必要聊一聊。这一期主要是谈论了裁员降薪的背景原因，面试没过十分正常。记得要用闲暇时间放松一下，拓展视野。也不要对互联网沮丧，这依旧是个容量和潜力极为巨大的行业。在公司的话，记得多跟人沟通交流，学习一些自己不会的东西，也要有自己的品味，最重要的，做个好人。祝大家过得开心，熬过这段周期。欢迎评论区留言, 给我们发邮件 [email protected] 或者在 X 留言: https://twitter.com/AsyncTalk主播AnnatarHe: https://annatarhe.comTimeline00:16 谢谢赞赏支持 @Retros回憶 @Asurada00:45 EP34 的 JS Runtime 分类并不准确, Hermes 的原因也不一定正确02:00 最近大家都很压抑，来聊聊03:45 裁员降薪的原因多种多样。大家都很棒，别 PUA 自己06:00 面试没过原因多种多样，别沮丧06:41 面试官水平不一定比你高09:54 休息，读书，拓展视野13:13 AnnatarHe 没觉得互联网下行，基本盘依旧是巨大的影响力15:00 CRUD 也不简单哦 —— 性能，开发者体验，选型，效率16:41 前端玩得很花，也没那么无聊17:32 还在打工就一定要白嫖公司19:00 站不站队？好的工程师一定是有自己的品味的22:58 记得做个好人23:50 大佬也不安全，记得做自己的业务24:52 别沮丧，一定的危机是好事儿相关链接Carousell cuts 10% of total headcount, including about 50 job roles in S’pore: https://www.straitstimes.com/singapore/jobs/carousell-cuts-110-jobs-to-rein-in-costsMark Zuckerberg’s Message to Meta Employees: https://about.fb.com/news/2022/11/mark-zuckerberg-layoff-message-to-employees/The Node.js Event Loop: https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick#event-loop-explainedTokio: https://docs.rs/tokio/latest/tokio/BGM by Otologic

让我猜猜，你是不是也想自己写个博客官网啥的？来听听这期节目试试有没有其他有趣的方案吧～感谢 Roy 的赞赏也记得要关注 twitter 哦: https://twitter.com/AsyncTalk欢迎评论留言 [email protected]名词解释DSL: 专用领域语言 Domain-Specific LanguagesROI: 投资回报率 return on investment主播AnnatarHe: https://annatarhe.comTimeline00:00 感谢 Roy 的赞赏！00:10 我们开通了 twitter: AsyncTalk01:00 最近重写了遍官网，来聊一聊02:02 官网和博客的特点：重 SEO, 低 ROI, 要面子, 高信息密度04:20 技术选型: Gatsby, Astro 或者 Next.js08:53 其他的技术选型？09:51 写文章？选 MDX 吧11:09 OpenGraph 还是要做的12:19 如何生成 OpenGraph 的图？satori + sharp14:00 讨好爬虫的手段: HTML 标签, a11y, RSS16:40 官网博客应该接入其他服务吗？RSS, 打点分析17:08 图片优化 - blurhash18:20 怎么部署（白嫖）?相关链接twitter 账户: https://twitter.com/AsyncTalkEP12 官网与 SEO: https://asynctalk.com/posts/ep12WebWorker No.48 和 Astro Maintainer 瑞丰科普 Astro 使用心得、参与开源和成长感悟**:** https://podcast.webworker.tech/48Gatsby - 曾经的 JAMStack 老大哥: https://github.com/gatsbyjs/gatsbyAstro: https://astro.build/NextJS: https://nextjs.org/Gatsby 5 is dead? https://github.com/gatsbyjs/gatsby/issues/38859Ruby on rails - 曾经的后端框架王者: https://rubyonrails.org/Jekyll - 静态站点生成: https://jekyllrb.com/MDX: https://mdxjs.com/The Open Graph Protocol: https://ogp.me/satori - JSX 转 SVG: https://github.com/vercel/satorisharp - JS 图像操作库: https://github.com/lovell/sharpReact Testing library: https://testing-library.com/docs/guiding-principlesBlurhash: https://blurha.sh/Cloudflare Pages: https://pages.cloudflare.com/Render.com: https://render.com/Vercel: https://vercel.com/DigitalOcean Apps: https://www.digitalocean.com/products/app-platform扩展阅读Domain-Specific Languages https://www.jetbrains.com/mps/concepts/domain-specific-languages/� 勘误BGM by Otologic

Node.js, Deno, Bun, Hermes, LLRT。怎么这年头做 JS Runtime 也这么卷？本期节目介绍了几个 JS Runtime ，来听听看有没有你正在用的 Runtime欢迎大家在评论区分享你对 JS Runtime 的看法，以及你正在使用或计划使用的 Runtime。主播AnnatarHe: https://annatarhe.comTimeline00:24 感谢 @辛宝-WebWorker 和 @烤箱 的赞赏支持01:18 AI 虽然很火，JS Runtime 也很卷02:17 JS Runtime: Node, Deno, Bun, Hermes, LLRT03:36 NodeJS 还是老大哥，但是已经成了背景板04:26 Deno 策略激进, 有力竞争者07:30 Deno 真正的竞争力: Edge Computing, Cloud, 工具链09:10 Bun 高兼容，高性能10:24 Hermes: 启动速度，React Native 专属10:48 Hermes 真正的竞争力是和 Android Webview 对比出来的11:50 LLRT: 启动速度和成本12:38 被遗忘的 Alinode: debug13:04 如何选择 Runtime14:24 不同的 Runtime 有不同的注意事项: 语法，接口16:04 自己做 Runtime 需要注意什么：商业化，云服务，性能，工具链，兼容性20:08 Deno 的几个卖点可能并不够有吸引力相关链接- NodeJS: https://nodejs.org/en- Deno: https://deno.com/- Bun: https://bun.sh/- Hermes: https://hermesengine.dev/- LLRT: https://github.com/awslabs/llrt- The Future of the Web is on the Edge: https://deno.com/blog/the-future-of-web-is-on-the-edge- Deno vs Node.js: Performance comparison for file server: https://medium.com/deno-the-complete-reference/deno-vs-node-js-performance-comparison-for-file-server-9af26133c800- Is Bun really much faster than Node.js? https://medium.com/deno-the-complete-reference/is-bun-really-much-faster-than-node-js-e5b15942a8e8- X5 内核: https://x5.tencent.com/- Alinode: https://cn.aliyun.com/product/nodejs?from_alibabacloud=- QuickJS Engine: https://bellard.org/quickjs/BGM by Otologic

本期节目以最近更新的 react-email 作为引子，讨论了它的出现，功能以及发展方向。同时引申到项目的想法，融资，设计和营销等方面都困难重重，并不容易。最后探讨开发者服务也许是一片新蓝海。如果你对本期节目有任何建议和意见或者希望合作，欢迎发邮件至 [email protected]主播AnnatarHe: https://annatarhe.comTimeline00:01 新出的 react-email 让开发邮件前端更简单03:19 react-email 的 UX 做得非常棒05:00 react-email 支持众多的 SDK 与 integration06:38 react-email 有个平台，商业模型大概率是通过发邮件来收费07:06 这个服务开发难度不高08:16 但这个服务并不简单：这个想法不容易出，投资也很难拿10:47 营销更是困难重重：高强度刷 twitter 也是一种工作12:49 做不出这么酷产品的一大原因：设计的优先级极低15:07 国内做大而全的产品，不会支持第三方服务的15:53 开发者体验的优先级也极低18:26 为何别人能做出 react-email 这样的项目：融资相对简单19:51 为何别人能做出 react-email 这样的项目：自我牺牲的精神导致内部诉求低优先级22:50 做开发者服务或许有些机会23:01 工程师们收入相对不错，有付费意愿，且人数众多，越来越多相关链接react-email: https://react.email/react-email 文档: https://react.email/docs/introductionmjml: https://mjml.io/fix(react-email): ESM Issue with await import of the compiled email templates: https://github.com/resend/react-email/pull/1214野狗 - 云服务: https://www.zhihu.com/org/ye-gou-ke-ji/answersLeancloud: https://www.leancloud.cn/MongoDB Database Skills (Sia Cheap Thrills Parody): https://www.youtube.com/watch?v=0vPt7GI-2kc&ab_channel=MongoDBZeno Rocha: https://twitter.com/zenorochastripe: https://stripe.com

注：本期非技术内容本期和 Philo 及 TK 两位组成了 SG-JP-CA 轴心就海外生活聊了聊天。从出去的原因，方式和目的地选择，到海外业务拓展，商业前景观察。内容很长，聊天蛮愉快。如果你对海外生活感兴趣，可以试着听一听。因为我们三个人呆的时间都不长，如果有什么不对的地方，欢迎评论或邮件留言 [email protected]今天的金句:感觉活着的成分里面，生活比生存更多了一些 - TK名词解释：SRE: Site Reliability EngineerGTA: The Greater Toronto Area主播AnnatarHe: https://annatarhe.comPhiloTKTimeline00:00 嘉宾介绍01:15 Philo 是为了职业发展, AnnatarHe 出去打工去了, TK 则跑去看世界05:00 世界这么大，是怎么选目的地的12:40 多样性带来的文化冲击有点儿大16:30 羡慕极了住在安大略湖旁的大 house 里的 Philo(而且还不贵)24:38 TK 能买房安家落户吗？26:00 HDB 买得起，condo 得努努力，house 就别想了27:20 AnnatarHe 通过中资公司的出海业务出去的27:59 Philo 是创业项目28:52 TK 日文好，工作随便找35:23 读好文档，可以比中介还专业37:40 3k USD === 3k CNY ?38:45 房子便宜，白菜贵了44:08 东京的生活成本可以比上海还低 ???47:50 月薪没 10w 人民币还是别来新加坡了48:00 JP 难高薪，CA 税收高49:40 高税收是 GOV 拿钱分配，低税收靠商业分给国民50:20 东南亚市场潜力大，但是种族，宗教因素很难把控52:15 CA 市场比较佛，熟人社会，流行负债60:00 JP 内外分明，非常保守，难以开拓市场66:20 合规成本不低，本地市场复杂71:20 去做 JP 上云业务是不是有点儿搞头？73:01 CA 做程序员性价比不高76:05 出来之后，发现生活可以不一样；上海的不满都解决了；天气不错，心情也好了，过非 NPC 的生活相关链接日本高度人才准证: https://www.mofa.go.jp/j_info/visit/visa/long/visa16.html香港高端人才通行证: https://www.immd.gov.hk/eng/services/visas/TTPS.html

AsyncTalk 将在杭州和上海举行一场线下聊天（其实就是找个星巴克坐一俩小时）12 月 23 日下午 2 点，杭州城区；12 月 30 日下午 2 点，上海城区。每场活动上限 5 人，若少于 2 人则会取消，参与需要付费 7 元，学生 1 元。有意参与者发邮件到 [email protected] 即可我们一定能复活，一定能彼此相见，高高兴兴、快快活活地互相讲述经过的事情— 卡拉马佐夫兄弟 陀思妥耶夫斯基

本期是 #2023 技术播客节 的一期节目。主要是和 WebWorker 播客联动一起畅聊 AI, Copilot, Next.js 与跨端技术，内容较长但是也同样比较有趣。欢迎大家也一起听一听 WebWorker 的节目若有其他任何意见建议欢迎发邮件联络: [email protected]金句刚刚说 copilot这个事情，copilot 帮我们做的时候，是不是我的思维并没有什么价值— AnnatarHe我日常工作 50% 是 Copilot 完成的 ー 开翼12 月 4 日技术播客节节目单@科技乱炖：37位程序员用GPT写代码的真相和AI职业焦虑@Thoughtworks洞见： AIGC 对程序员的影响@软件那些事儿：人工智能第一次会议：1956年达特茅斯会议@OnBoard!：亲历硅谷的一二级投资思考@开始连接LinkStart：用 AI 打造你的社交助手，两位 90 后创业者有话要说@内核恐慌：编程的终结@AsyncTalk：WebWorker 联动 - OpenAI 和 Github 又有什么新活?@代码不在服务区：前端向未来：AI时代，怎样成为顶尖的前端工程师？@枫言枫语：科技快乐星球21: 大公司都在挤AI主播AnnatarHe: https://annatarhe.comWebWorker: https://podcast.webworker.tech/辛宝: https://twitter.com/ji3206开翼: https://twitter.com/real_kai42小白菜: https://twitter.com/cabbage00001Timeline00:30 OpenAI 发布会回顾07:13 Prompt 管理和调试，可能也没那么容易21:01 Copilot 卖你 $10 块钱有点儿便宜了37:50 Next.js 新的 Server Component 影响有点儿大55:59 小程序你到底行不行啊63:28 老外也有超级 App 的72:59 electron 该请个好公关86:17 快乐戛然而止，下期再见扩展阅读技术播客节: https://podfest.tech/zh-CNPrompPal: https://github.com/PromptPal/PromptPalgithub copoilt chat 节目链接: https://www.xiaoyuzhoufm.com/episode/647f4c3b5ed4bd1a463abff3如何用 Copilot 完整自己 50% 的工作: https://x.com/real_kai42/status/1728280569640018107关于「2023 技术播客节」缘起于2022仲夏时节技术播客之间的梦幻联动，我们感受到了社区共创共建的力量。今年我们再接再厉，集结了30+播客、5大出品人、20+社区，希望拉动更多技术生态的内容创作者，一起用声音来表达，建设自家技术影响力，推动更高粘性、更深互联、更持久共鸣的用户社区构建。

本期节目主要以 next.js 的 Server component 和 Server action 为主题聊了一些 @AnnatarHe 自己的看法。总得来说，next.js 这波做得有点儿过了，但是也是发展的大方向。嘲笑之余，还是得学学。主播AnnatarHe: https://annatarhe.comTimeline00:18 next.js 与 use php01:05 React 最近最大的变化是 Server Component02:00 前端多年来的进化 - 复杂是不可避免的03:06 之前的 SSR 只是为了 SEO, 新的 Server Component 并不一样04:30 更为极端的 Server Action 也来了06:16 Server Action 在嘲笑之余，是有很严肃的场景 —— 长期看好08:10 只是目前的版本大概还略带搞笑 —— 安全的代码很难写，学习曲线更为陡峭09:50 next.js 的 bug 率可能比我的还高。10:30 自己的项目升级了 14，不出所料地挂了11:20 大部分工具库并不支持完整版的 Server Component —— Steaming相关链接React Server Component: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-componentsNextjs-use-php: https://github.com/bufferhead-code/nextjs-use-phpExperimental streaming without prefetching in Next.js: https://tanstack.com/query/v5/docs/react/guides/advanced-ssr#experimental-streaming-without-prefetching-in-nextjs勘误use-shell 在 twitter 上看到的，没能找到当初的链接，请各位自行脑补BGM by Otologic

Shownotes本期节目主要介绍了运行时的校验以及它的一个实现 —— Zod.在越来越大的项目中，运行时校验是逃不开的一个环节，可以应用在表单校验，API 返回值校验和后端的参数校验中。如果你的项目多人协作但是还没有接入类似的功能，可以考虑加一下，降低一些 bug 率如果对节目有任何意见或者建议，欢迎联系 [email protected]名词解释Runtime: 运行时，运行中的情况CI: 持续集成，简而言之，build & test 放到独立的服务器去做Lint: 代码校验，规范协作情况下代码统一主播AnnatarHe: https://annatarhe.comTimeline00:20 最近意识到 zod 蛮有趣的00:50 大型项目协作的问题02:30 Runtime 检查的必要性03:20 Zod 的优势04:30 应用场景 —— 表单校验06:10 应用场景 —— API 校验07:50 应用场景 —— 后端 HTTP 参数校验09:10 Zod 实用小技巧 —— Infer09:50 Zod 实用小技巧 —— Don't Trust, Verify11:10 Zod 的竞争者们 —— Joi, Yup12:20 总结： 用起来呀～相关链接Zod: https://zod.dev/Zodios: https://www.zodios.org/Sentry: https://sentry.io/welcome/Joi: https://github.com/hapijs/joiYup: https://github.com/jquense/yup扩展阅读2 hidden ways to get more from your Gmail address: https://gmail.googleblog.com/2008/03/2-hidden-ways-to-get-more-from-your.htmlDon't Trust, Verify: 很久之前看的文章，找不到了，请自行搜索。Zod 对比: https://zod.dev/?id=comparisonBGM by Otologic

React Server Component 是最近的大事。本期蹭一次热点，锐评 RSC 和 Next.js。做前端的朋友们，这次，必须得学后端了哦。本期内容比较追热点且较为主观。如果有任何想法或者意见也欢迎留言或者邮件交流: [email protected]主播AnnatarHe: https://annatarhe.comTimeline00:30 Server Component 是 React 又一个巨大 feature00:50 从后端主导的 web framework 也许正在慢慢向前端倾斜03:10 Next.js 的 server component 实现大方向很棒，但是小缺点也不少04:40 缺点: 开发思维转换为 Node 模式06:10 缺点: use 指令过于魔法07:10 缺点: CSS in JS 寄了（目前）08:40 缺点: 框架设计可复杂了，比如路由09:40 缺点: Cache 有点儿糙。后端的 Cache 和前端是完全不同的思路11:50 缺点: Fetch 复杂且 HTTP handler 的设计思维不同14:00 JWT 又又又不行了. Make Cookie Great Again15:00 Debug 又不一样了，更更更困难了16:00 必须得学后端了，以及强推去学习 Ruby on Rails17:10 短期问题挺多，长期会把 Web 开发带向新的高度相关链接Routing Fundamentals - Next.js: https://nextjs.org/docs/app/building-your-application/routing扩展阅读RSC From Scratch https://github.com/reactwg/server-components/discussions/5Everything I wish I knew before moving 50,000 lines of code to React Server Components https://www.mux.com/blog/what-are-react-server-componentsRuby on Rails: https://rubyonrails.org/BGM by Otologic

大家好啊，本次更新带来了 Headless Component 的简要介绍，它的优势在于逻辑分离，更好地集成设计系统，易于测试；缺点则是会让架构复杂一层，以及完全不同的开发思维。大家可以考虑在自己的业务中尝试这种新颖有趣的技术方案。但是也要注意业务场景。有任何意见建议想法，都可以在评论区留言或者发邮件至 [email protected]主播AnnatarHe: https://annatarhe.comTimeline00:18 Headless Component 是什么01:27 优势: 逻辑重用，分离 UI，集成自定义设计系统，易于测试05:30 弊端: 架构复杂，不同的开发思维07:00 实例: TanStack table, react-hook-form09:23 btw: 多数组件库不适应新的 React Server Component10:38 大势所趋11:20 但是取决于业务。to C 项目比较适合相关链接React hook form: https://react-hook-form.com/Ant Design: https://ant.design/index-cnMaterial UI: https://mui.com/chakra UI: https://chakra-ui.com/arco design: https://arco.bytedance.net/Puppeteer - a headless browser: https://pptr.dev/TanStack Table: https://tanstack.com/table/v8扩展阅读HEADLESS USER INTERFACE COMPONENTS： https://www.merrickchristensen.com/articles/headless-user-interface-components/BGM by Otologic

最近 AnnatarHe 接了 next.js 的 App dir 出了一些问题，由此想到了一些无疾而终的项目。本期节目主要从这些虎头蛇尾的项目中探讨- 技术选项怎么能不被 “骗”- 项目靠暴力营销能行吗大家有什么想聊的想说的，或者对节目有什么意见或者建议欢迎发邮件到 [email protected]另外，其实还想说 Tengine 但是查了下 commit， 一年里还是有两三次 commit 的，饶过它了主播AnnatarHe: https://annatarhe.comTimeline00:20 从 next.js 的 app directory 画的饼谈起03:25 翻翻 Vercel 的旧账 —— next.js 的类型问题, swc 编译出错04:50 Mongo 当年营销很猛06:05 某大厂虎头蛇尾项目集锦 - weex07:48 某大厂虎头蛇尾项目集锦 - remax09:40 Swift 的用户很励志，每年都学新语言10:25 SwiftUI 用户很善良，每年都被坑13:01 那些无疾而终的框架，有比伤心更严重的后果14:50 员工要挣 credit 升职加薪，企业也要拿信誉做大做强15:20 技术选项，怎么不被骗 - benchmark, 文档和 “代价是什么呢？”19:20 项目需要营销，但是也得考虑长远发展20:35 项目的支点 —— 热情， 责任和钱21:02 (我相信)没有项目一开始只想着割韭菜，项目也得想除了热情，如何持续发展22:50 总结：多问一句 “代价是什么”23:35 总结：在激情褪去之后，靠什么维持项目？相关链接React Server Component: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-componentsRailway.app: https://railway.app?referralCode=Ahd-pkswc: https://swc.rs/weex: https://weexapp.com/react reconciler: https://github.com/facebook/react/tree/main/packages/react-reconcilerreact native: https://reactnative.dev/remax: https://github.com/remaxjs/remax/issues/1977taro: https://docs.taro.zone/docs/BGM by Otologic

Hi, 大家劳动节快乐～新一期的 AsyncTalk 从 Web Container 与 NodeBox 开始，探讨 Web Assembly 的发展与目前的状态，结论是虽然这些相关的产品在 AnnatarHe 看来前景并不乐观，但是 Web Assembly 技术已然成熟，可以尝试参与到我们的业务中，提升用户体验与性能。11:20 部分的英文是 code reusable 不是 code review 主播读音有问题 �主播AnnatarHe: https://annatarhe.comTimeline00:25 主题: web assembly01:10 web assembly 的概述 —— 语言无关，性能，安全03:24 这东西真的有用？！03:40 Web Container05:02 NodeBox06:30 web assembly 有没有缺点？—— 业务复杂度，debug 困难，只能做纯计算08:40 debug 困难也许不是 bug 而是 feature09:09 bundle 过大10:19 应用场景有哪些？ Photoshop 网页版？sandbox？13:35 真正有用的场景在哪里？—— 加密，跨平台15:50 web assembly 已经比较成熟了，可以上生产试试看相关链接Introducing WebContainers: Run Node.js natively in your browser: https://blog.stackblitz.com/posts/introducing-webcontainers/Announcing Sandpack 2.0 and a Node.js runtime for any browser: https://codesandbox.io/blog/announcing-sandpack-2nodebox runtime: https://github.com/codesandbox/nodebox-runtimegzip: https://www.gnu.org/software/gzip/manual/gzip.htmlbrotli: https://github.com/google/brotli扩展阅读事后看了下 web 版的 photoshop，一个 apollo_assets 的 wasm 文件有 58 MB �BGM by Otologic

本期节目成功拉到子龙和大家一起从 Rspack 开始，探讨开源和 ChatGPT，也有一些新加坡的生活。有任何意见或者建议请联系 [email protected]主播AnnatarHe: https://annatarhe.com嘉宾子龙/龙哥Timeline00:11 子龙的自我介绍03:23 Rspack 看起来好像确实能用05:45 ECharts —— 国产开源之光09:36 开源项目也是要吃饭的 —— 大公司做开源项目有什么好处13:15 前端卷 rust 之后，debug 成本也越来越高14:40 前端去搞 rust 做这些性能提升真的有必要吗？18:20 降本增效背景下，大家都想搞副业20:10 做开源(core-js)不太能挣钱22:22 但是，做开源是每个程序员的梦想23:12 ChatGPT 无所不知25:17 但取代专业程序员还尚需时日29:00 很怪，国内程序员限制巨大，但是水平怎么都还比较不错呢？33:10 海外生活 —— 生活成本巨高，房租，吃饭37:20 海外生活的学习 —— 语言，金融系统41:40 这边也卷，但 “卷” 的概念并不一样43:48 新加坡怎么没胖子45:40 新加坡厨师们，请加把劲儿46:50 子龙觉得新加坡挺小，AnnatarHe 觉得新加坡很大49:50 新加坡的公关做得非常好51:40 有机会出去的话，要勇于探索一些不同相关链接turbopack: https://turbo.build/packvercel: https://vercel.com/rspack: https://www.rspack.dev/modernjs: https://modernjs.dev/ECharts: https://echarts.apache.org/zh/index.htmlwebpack: https://webpack.js.org/parcel: https://parceljs.org/扩展阅读TurboPack 卷起来了: https://asynctalk.com/posts/ep20/core-js - So, what’s next? https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.mdBGM by Otologic

本期节目主要介绍了请求数据时常遇到的问题以及React框架下的几种解决方案。最后,我们将介绍本期的主角React Query,包括它的设计和功能。如果有任何意见和建议可以发邮件至 [email protected]如果愿意加入我们的 discord 社区可以点击这里: https://discord.gg/TQczjSJMah主播AnnatarHe: https://annatarhe.comTimeline00:00 开场，确实鸽了段时间00:35 在 discord 上开了个社区，想来聊天可以加01:20 请求数据，不像说的那么简单02:15 loading 说起来容易，做起来麻烦03:20 in/revalidation 也挺麻烦的05:25 cancel 也不好处理07:10 有 devtool 的话，会比想象中更方便07:30 把前后端交互做好，下班时间（也许会）显著提前08:10 ahooks 陪跑08:50 apollo client 仅限于 GraphQL09:30 SWR10:30 SWR 翻页数据有想法12:11 React Query13:23 Mutation 的支持14:10 对 TypeScript 的支持较好14:40 不要 debounce 了，直接取消请求吧16:29 甚至支持直接生成 GraphQL16:45 devtool 要比预想中的好用很多17:07 ReactQuery 的 cache 要是能更强一点儿就更好了18:20 使用 ReactQuery 记得至少分两层架构19:00 实现不难，难的是怎么想出来的20:12 有想法就去实现，下一个万 star 项目属于你相关链接AsyncTalk 的 discord 社群: https://discord.gg/8XXfh6jhDocument: visibilitychange event**:** https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_eventAbortController: https://developer.mozilla.org/en-US/docs/Web/API/AbortControllerReact.Suspense: https://beta.reactjs.org/reference/react/Suspenseahooks.useRequest: https://ahooks.js.org/hooks/use-request/indexapollo client: https://github.com/apollographql/apollo-clientSWR: https://swr.vercel.app/zh-CNReactQuery 对 TypeScript 的支持: https://tanstack.com/query/v4/docs/react/typescriptReactQuery 对于 GraphQL 的集成与支持: https://tanstack.com/query/v4/docs/react/graphql� 勘误SWR 2.0 支持了 Mutation: https://swr.vercel.app/zh-CN/blog/swr-v2#useswrmutationBGM by Otologic