AsyncTalk

Latest Episodes:

EP35 让我看看博客和官网应该怎么写 Mar 29, 2024

Show notes

让我猜猜，你是不是也想自己写个博客官网啥的？
来听听这期节目试试有没有其他有趣的方案吧～
感谢 Roy 的赞赏
也记得要关注 twitter 哦: https://twitter.com/AsyncTalk
欢迎评论留言 async.talk@gmail.com
名词解释
DSL: 专用领域语言 Domain-Specific Languages
ROI: 投资回报率 return on investment

主播
AnnatarHe: https://annatarhe.com

Timeline
00:00 感谢 Roy 的赞赏！
00:10 我们开通了 twitter: AsyncTalk
01:00 最近重写了遍官网，来聊一聊
02:02 官网和博客的特点：重 SEO, 低 ROI, 要面子, 高信息密度
04:20 技术选型: Gatsby, Astro 或者 Next.js
08:53 其他的技术选型？
09:51 写文章？选 MDX 吧
11:09 OpenGraph 还是要做的
12:19 如何生成 OpenGraph 的图？satori + sharp
14:00 讨好爬虫的手段: HTML 标签, a11y, RSS
16:40 官网博客应该接入其他服务吗？RSS, 打点分析
17:08 图片优化 - blurhash
18:20 怎么部署（白嫖）?

相关链接
twitter 账户: https://twitter.com/AsyncTalk
EP12 官网与 SEO: https://asynctalk.com/posts/ep12
WebWorker No.48 和 Astro Maintainer 瑞丰科普 Astro 使用心得、参与开源和成长感悟**:** https://podcast.webworker.tech/48
Gatsby - 曾经的 JAMStack 老大哥: https://github.com/gatsbyjs/gatsby
Astro: https://astro.build/
NextJS: https://nextjs.org/
Gatsby 5 is dead? https://github.com/gatsbyjs/gatsby/issues/38859
Ruby 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/satori
sharp - JS 图像操作库: https://github.com/lovell/sharp
React Testing library: https://testing-library.com/docs/guiding-principles
Blurhash: 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

EP34 JS Runtime 怎么也卷起来了 Feb 26, 2024

Show notes

Node.js, Deno, Bun, Hermes, LLRT。怎么这年头做 JS Runtime 也这么卷？
本期节目介绍了几个 JS Runtime ，来听听看有没有你正在用的 Runtime
欢迎大家在评论区分享你对 JS Runtime 的看法，以及你正在使用或计划使用的 Runtime。
主播

AnnatarHe: https://annatarhe.com
Timeline
00:24 感谢 @辛宝-WebWorker 和 @烤箱的赞赏支持
01:18 AI 虽然很火，JS Runtime 也很卷
02:17 JS Runtime: Node, Deno, Bun, Hermes, LLRT
03: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: debug
13:04 如何选择 Runtime
14: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

EP33 这能搞钱吗？ —— 从新邮件到开发者服务 Jan 28, 2024

Show notes

本期节目以最近更新的 react-email 作为引子，讨论了它的出现，功能以及发展方向。同时引申到项目的想法，融资，设计和营销等方面都困难重重，并不容易。最后探讨开发者服务也许是一片新蓝海。

如果你对本期节目有任何建议和意见或者希望合作，欢迎发邮件至 async.talk@gmail.com

主播

AnnatarHe: https://annatarhe.com

Timeline

00:01 新出的 react-email 让开发邮件前端更简单

03:19 react-email 的 UX 做得非常棒

05:00 react-email 支持众多的 SDK 与 integration

06: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/introduction

mjml: 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/answers

Leancloud: https://www.leancloud.cn/

MongoDB Database Skills (Sia Cheap Thrills Parody): https://www.youtube.com/watch?v=0vPt7GI-2kc&ab_channel=MongoDB

Zeno Rocha: https://twitter.com/zenorocha

stripe: https://stripe.com

EP32 npm run Jan 12, 2024

Show notes

注：本期非技术内容

本期和 Philo 及 TK 两位组成了 SG-JP-CA 轴心就海外生活聊了聊天。从出去的原因，方式和目的地选择，到海外业务拓展，商业前景观察。内容很长，聊天蛮愉快。如果你对海外生活感兴趣，可以试着听一听。

因为我们三个人呆的时间都不长，如果有什么不对的地方，欢迎评论或邮件留言 async.talk@gmail.com

今天的金句:

感觉活着的成分里面，生活比生存更多了一些 - TK

名词解释：

SRE: Site Reliability Engineer

GTA: The Greater Toronto Area

主播

AnnatarHe: https://annatarhe.com

Philo

Timeline

00: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

SP03 杭州上海见 Dec 20, 2023

Show notes

AsyncTalk 将在杭州和上海举行一场线下聊天（其实就是找个星巴克坐一俩小时）12 月 23 日下午 2 点，杭州城区；12 月 30 日下午 2 点，上海城区。每场活动上限 5 人，若少于 2 人则会取消，参与需要付费 7 元，学生 1 元。有意参与者发邮件到 async.talk@gmail.com 即可

我们一定能复活，一定能彼此相见，高高兴兴、快快活活地互相讲述经过的事情
— 卡拉马佐夫兄弟陀思妥耶夫斯基

EP30 Server Action 是有点儿搞笑，但前端得学 Nov 12, 2023

Show notes

本期节目主要以 next.js 的 Server component 和 Server action 为主题聊了一些 @AnnatarHe 自己的看法。

总得来说，next.js 这波做得有点儿过了，但是也是发展的大方向。嘲笑之余，还是得学学。

主播

AnnatarHe: https://annatarhe.com

Timeline

00:18 next.js 与 use php

01:05 React 最近最大的变化是 Server Component

02: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-components

Nextjs-use-php: https://github.com/bufferhead-code/nextjs-use-php

Experimental 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

EP29 装上 Zod 没有 Bug Oct 08, 2023

Show notes

Shownotes

本期节目主要介绍了运行时的校验以及它的一个实现 —— Zod.

在越来越大的项目中，运行时校验是逃不开的一个环节，可以应用在表单校验，API 返回值校验和后端的参数校验中。

如果你的项目多人协作但是还没有接入类似的功能，可以考虑加一下，降低一些 bug 率

如果对节目有任何意见或者建议，欢迎联系 async.talk@gmail.com

名词解释

Runtime: 运行时，运行中的情况

CI: 持续集成，简而言之，build & test 放到独立的服务器去做

Lint: 代码校验，规范协作情况下代码统一

主播

AnnatarHe: https://annatarhe.com

Timeline

00:20 最近意识到 zod 蛮有趣的

00:50 大型项目协作的问题

02:30 Runtime 检查的必要性

03:20 Zod 的优势

04:30 应用场景 —— 表单校验

06:10 应用场景 —— API 校验

07:50 应用场景 —— 后端 HTTP 参数校验

09:10 Zod 实用小技巧 —— Infer

09:50 Zod 实用小技巧 —— Don't Trust, Verify

11:10 Zod 的竞争者们 —— Joi, Yup

12:20 总结：用起来呀～

相关链接

Zod: https://zod.dev/

Zodios: https://www.zodios.org/

Sentry: https://sentry.io/welcome/

Joi: https://github.com/hapijs/joi

Yup: 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.html

Don't Trust, Verify: 很久之前看的文章，找不到了，请自行搜索。

Zod 对比: https://zod.dev/?id=comparison

BGM by Otologic

EP28 这次咱肯定全栈了 - React Server Component Aug 24, 2023

Show notes

React Server Component 是最近的大事。本期蹭一次热点，锐评 RSC 和 Next.js。

做前端的朋友们，这次，必须得学后端了哦。

本期内容比较追热点且较为主观。如果有任何想法或者意见也欢迎留言或者邮件交流: async.talk@gmail.com

主播

AnnatarHe: https://annatarhe.com

Timeline

00:30 Server Component 是 React 又一个巨大 feature

00: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 Again

15:00 Debug 又不一样了，更更更困难了

16:00 必须得学后端了，以及强推去学习 Ruby on Rails

17: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/5

Everything I wish I knew before moving 50,000 lines of code to React Server Components https://www.mux.com/blog/what-are-react-server-components

Ruby on Rails: https://rubyonrails.org/

BGM by Otologic

EP27 组件开发和路易十六有什么关系？- Headless Component Jul 30, 2023

Show notes

大家好啊，本次更新带来了 Headless Component 的简要介绍，它的优势在于逻辑分离，更好地集成设计系统，易于测试；缺点则是会让架构复杂一层，以及完全不同的开发思维。

大家可以考虑在自己的业务中尝试这种新颖有趣的技术方案。但是也要注意业务场景。

有任何意见建议想法，都可以在评论区留言或者发邮件至 async.talk@gmail.com

主播

AnnatarHe: https://annatarhe.com

Timeline

00:18 Headless Component 是什么

01:27 优势: 逻辑重用，分离 UI，集成自定义设计系统，易于测试

05:30 弊端: 架构复杂，不同的开发思维

07:00 实例: TanStack table, react-hook-form

09:23 btw: 多数组件库不适应新的 React Server Component

10:38 大势所趋

11:20 但是取决于业务。to C 项目比较适合

相关链接

React hook form: https://react-hook-form.com/

Ant Design: https://ant.design/index-cn

Material 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

Our TOPPODCAST Picks

Follow Us

Stay Connected

Related Podcasts

Links

Stay Connected