和我们一起,把 web 开发带向下一个高度
AsyncTalk 是一档中文,面向对 web 开发感兴趣的朋友所录制的 Podcast 节目。
后续我们会讨论更多更为前沿,工程化的话题,感兴趣可以持续关注。
联系我们请发邮件至 async.talk@gmail.com 期待沟通。
php/* */ ?>
和我们一起,把 web 开发带向下一个高度
AsyncTalk 是一档中文,面向对 web 开发感兴趣的朋友所录制的 Podcast 节目。
后续我们会讨论更多更为前沿,工程化的话题,感兴趣可以持续关注。
联系我们请发邮件至 async.talk@gmail.com 期待沟通。
Copyright: © AsyncTalk@喜马拉雅FM
本期节目从油腻的中年男人的自我辩解开始,探讨了如何挣钱,如何做自己的项目一直到大厂的生活。当然也是分享了一些在大厂生存的小技巧。
如果听众朋友有考虑做一做副业,也欢迎大家一起做播客和我们来卷一卷 �
有任何意见建议欢迎在评论区留言,发邮件至 async.talk@gmail.com 也可以关注 X(twitter): https://x.com/AsyncTalk
主播
AnnatarHe: https://annatarhe.com
Louis: https://x.com/louistang151
Timeline
01: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/roczhang9673
Lok: iPad 也能有桌面: https://apps.apple.com/us/app/lok-board/id1621242252
EP19 上班也就图一乐,真挣钱还得卖 App (吗?) https://asynctalk.com/posts/ep19
孙哥的香蕉: https://x.com/justinsuntron/status/1865831394146140547
Kimi 助手: 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/stormzhang
Evan 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.com
Timeline
00:20 RTE 大会贼牛逼,25, 26 号来北京参加一下吧~
01:28 自己一个事业比打工爽多了
02:55 很多时候一个事业来源于愤怒的想法
03:45 Node.js, io.js 与 deno 的分分合合
07:00 稳定的东西很无趣,变化才有机会
08:55 Deno 的发展是一步步的妥协与成长
14:25 Deno Deploy
14:43 我自己会不会用 Node/Deno
相关链接
Node.js: The Documentary | An origin story https://youtu.be/LB8KwiiUGy0?si=vssFbRqJgWIFi7Sd
Node.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-releases
Node.js Pull Request: module: add --experimental-strip-types https://github.com/nodejs/node/pull/53725
关于 js 社区变化大的一条 twitte: https://x.com/AnnatarHe/status/1846757992492159210
Announcing Deno 2 https://deno.com/blog/v2.0
Deno Deploy: https://deno.com/deploy
Deno 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.com
Timeline
00: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.html
https://en.wikipedia.org/wiki/Microsoft_FrontPage
EP06 Low Code 到底 Low 不 Low: https://asynctalk.com/posts/ep6
EP10 出海,国际化: https://asynctalk.com/posts/ep10
Antd.Form: https://ant.design/components/form-cn
react-hook-form: https://react-hook-form.com/
BGM by Otologic
状态机自古以来就是前端领域不可分割的一部分。
本期节目从状态机开始,讨论了一些开发经验 —— 包括不能走极端框架信仰,同步不一定万恶,状态机不可分割。
之后用一个例子介绍了如何用流程和状态管理来进行业务设计。
最后,前端的天花板不一定像是外界说得那么低(有没有可能,低是因为视野低?)
主播
AnnatarHe: https://annatarhe.com
Timeline
00:07 比较懒,所以更新慢
03:40 因为巨大的项目,所以想起了状态机
01:58 不要定式思维框架
04:21 设计模式确实很有道理,得学,得用
05:30 复杂状态下,考虑一下,接上状态机
08:20 同步并不是纯粹的坏事,也不应该完全拒绝
09:48 状态机可以有效降低维护成本
10:12 例子:和机器人聊天的状态与逻辑设计
14:14 不要定式思维,不要接到需求就开干
14:50 前端的天花板,也许没有外界说得那么低
相关链接
XState: https://stately.ai/docs
State 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 发展方向了。大家可以考虑追上节奏,升职加薪
欢迎评论区留言, 给我们发邮件 async.talk@gmail.com 或者在 Twitter 留言: https://twitter.com/AsyncTalk
主播
AnnatarHe: https://annatarhe.com
Timeline
00:28 从前端性能优化开始
02:00 传统的前端性能优化在 Server rendering 面前略显尴尬
03:10 后端渲染和 RSC 很不同
07:20 后端渲染的网络天生比客户端快
10:59 大项目可以考虑自己实现 Server rendering
11:30 API Server 的两种设计方式
14:50 Node 躲不开,得学习
15:21 Node 几个有趣的学习点
18:20 后端是个很好的学习入口
相关链接
HTTP2: https://en.wikipedia.org/wiki/HTTP/2
DNS Prefetch: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
Preload: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
React Server Component: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components
Partial Prerendering: https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering
BigPipe: 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–controller
CGI: https://en.wikipedia.org/wiki/Common_Gateway_Interface
BGM by Otologic
最近工作不容易啊,来和 前端輕鬆聊 的 Eric 一起聊聊在北美的工作情况。
有任何意见,建议或者评论欢迎在下面评论或者发邮件至 async.talk@gmail.com
本期剪辑是分开的,也可以去听 Eric 的版本: https://fetalk.dev/episodes/ep34
主播
AnnatarHe: https://annatarhe.com
Eric 前端輕鬆聊: https://fetalk.dev/
Timeline
00:02 欢迎 AsyncTalk 的 AnnatarHe 与 前端輕鬆聊 的 Eric
00: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 吧~
欢迎评论区留言, 给我们发邮件 async.talk@gmail.com 或者在 X 留言: https://twitter.com/AsyncTalk
主播
AnnatarHe: https://annatarhe.com
Timeline
00: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 与 framework
12:20 整套的文本编辑方案正在向 Headless 转变
13:58 TipTap 与 Lexical
18: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/editor
Lexical Editor: https://lexical.dev/
扩展阅读
Observable Framework 这个产品看起来非常不错,推荐一把: https://observablehq.com/
BGM by Otologic
Shownotes
AsyncTalk EP36 来谈论最近很沉重的工作话题。
因为 AnnatarHe 最近有些朋友的职业有一些变化,包括网上的一些评论和态度觉得有必要聊一聊。
这一期主要是谈论了裁员降薪的背景原因,面试没过十分正常。记得要用闲暇时间放松一下,拓展视野。
也不要对互联网沮丧,这依旧是个容量和潜力极为巨大的行业。
在公司的话,记得多跟人沟通交流,学习一些自己不会的东西,也要有自己的品味,最重要的,做个好人。
祝大家过得开心,熬过这段周期。
欢迎评论区留言, 给我们发邮件 async.talk@gmail.com 或者在 X 留言: https://twitter.com/AsyncTalk
主播
AnnatarHe: https://annatarhe.com
Timeline
00:16 谢谢赞赏支持 @Retros回憶 @Asurada
00: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-costs
Mark 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-explained
Tokio: https://docs.rs/tokio/latest/tokio/
BGM by Otologic
让我猜猜,你是不是也想自己写个博客官网啥的?
来听听这期节目试试有没有其他有趣的方案吧~
感谢 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/� 勘误
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
本期节目以最近更新的 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
注:本期非技术内容
本期和 Philo 及 TK 两位组成了 SG-JP-CA 轴心就海外生活聊了聊天。从出去的原因,方式和目的地选择,到海外业务拓展,商业前景观察。内容很长,聊天蛮愉快。如果你对海外生活感兴趣,可以试着听一听。
因为我们三个人呆的时间都不长,如果有什么不对的地方,欢迎评论或邮件留言 async.talk@gmail.com
今天的金句:
感觉活着的成分里面,生活比生存更多了一些 - TK
名词解释:
SRE: Site Reliability Engineer
GTA: The Greater Toronto Area
主播
AnnatarHe: https://annatarhe.com
Philo
TK
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
AsyncTalk 将在杭州和上海举行一场线下聊天(其实就是找个星巴克坐一俩小时)12 月 23 日下午 2 点,杭州城区;12 月 30 日下午 2 点,上海城区。每场活动上限 5 人,若少于 2 人则会取消,参与需要付费 7 元,学生 1 元。有意参与者发邮件到 async.talk@gmail.com 即可
我们一定能复活,一定能彼此相见,高高兴兴、快快活活地互相讲述经过的事情
— 卡拉马佐夫兄弟 陀思妥耶夫斯基
本期是 #2023 技术播客节 的一期节目。主要是和 WebWorker 播客联动一起畅聊 AI, Copilot, Next.js 与跨端技术,内容较长但是也同样比较有趣。
欢迎大家也一起听一听 WebWorker 的节目
若有其他任何意见建议欢迎发邮件联络: async.talk@gmail.com
金句
刚刚说 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.com
WebWorker: https://podcast.webworker.tech/
辛宝: https://twitter.com/ji3206
开翼: https://twitter.com/real_kai42
小白菜: https://twitter.com/cabbage00001
Timeline
00: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-CN
PrompPal: https://github.com/PromptPal/PromptPal
github 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.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
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
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
大家好啊,本次更新带来了 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
最近 AnnatarHe 接了 next.js 的 App dir 出了一些问题,由此想到了一些无疾而终的项目。
本期节目主要从这些虎头蛇尾的项目中探讨
- 技术选项怎么能不被 “骗”
- 项目靠暴力营销能行吗
大家有什么想聊的想说的,或者对节目有什么意见或者建议欢迎发邮件到 async.talk@gmail.com
另外,其实还想说 Tengine 但是查了下 commit, 一年里还是有两三次 commit 的,饶过它了
主播
AnnatarHe: https://annatarhe.com
Timeline
00:20 从 next.js 的 app directory 画的饼谈起
03:25 翻翻 Vercel 的旧账 —— next.js 的类型问题, swc 编译出错
04:50 Mongo 当年营销很猛
06:05 某大厂虎头蛇尾项目集锦 - weex
07:48 某大厂虎头蛇尾项目集锦 - remax
09: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-components
Railway.app: https://railway.app?referralCode=Ahd-pk
swc: https://swc.rs/
weex: https://weexapp.com/
react reconciler: https://github.com/facebook/react/tree/main/packages/react-reconciler
react native: https://reactnative.dev/
remax: https://github.com/remaxjs/remax/issues/1977
taro: 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.com
Timeline
00:25 主题: web assembly
01:10 web assembly 的概述 —— 语言无关,性能,安全
03:24 这东西真的有用?!
03:40 Web Container
05:02 NodeBox
06:30 web assembly 有没有缺点?—— 业务复杂度,debug 困难,只能做纯计算
08:40 debug 困难也许不是 bug 而是 feature
09: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-2
nodebox runtime: https://github.com/codesandbox/nodebox-runtime
gzip: https://www.gnu.org/software/gzip/manual/gzip.html
brotli: https://github.com/google/brotli
扩展阅读
事后看了下 web 版的 photoshop,一个 apollo_assets 的 wasm 文件有 58 MB �
BGM by Otologic
本期节目成功拉到子龙和大家一起从 Rspack 开始,探讨开源和 ChatGPT,也有一些新加坡的生活。
有任何意见或者建议请联系 async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
嘉宾
子龙/龙哥
Timeline
00: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/pack
vercel: https://vercel.com/
rspack: https://www.rspack.dev/
modernjs: https://modernjs.dev/
ECharts: https://echarts.apache.org/zh/index.html
webpack: 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.md
BGM by Otologic
本期节目主要介绍了请求数据时常遇到的问题以及React框架下的几种解决方案。最后,我们将介绍本期的主角React Query,包括它的设计和功能。
如果有任何意见和建议可以发邮件至 async.talk@gmail.com
如果愿意加入我们的 discord 社区可以点击这里: https://discord.gg/TQczjSJMah
主播
AnnatarHe: https://annatarhe.com
Timeline
00: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 仅限于 GraphQL
09:30 SWR
10:30 SWR 翻页数据有想法
12:11 React Query
13:23 Mutation 的支持
14:10 对 TypeScript 的支持较好
14:40 不要 debounce 了,直接取消请求吧
16:29 甚至支持直接生成 GraphQL
16:45 devtool 要比预想中的好用很多
17:07 ReactQuery 的 cache 要是能更强一点儿就更好了
18:20 使用 ReactQuery 记得至少分两层架构
19:00 实现不难,难的是怎么想出来的
20:12 有想法就去实现,下一个万 star 项目属于你
相关链接
AsyncTalk 的 discord 社群: https://discord.gg/8XXfh6jh
Document: visibilitychange event**:** https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
AbortController: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
React.Suspense: https://beta.reactjs.org/reference/react/Suspense
ahooks.useRequest: https://ahooks.js.org/hooks/use-request/index
apollo client: https://github.com/apollographql/apollo-client
SWR: https://swr.vercel.app/zh-CN
ReactQuery 对 TypeScript 的支持: https://tanstack.com/query/v4/docs/react/typescript
ReactQuery 对于 GraphQL 的集成与支持: https://tanstack.com/query/v4/docs/react/graphql�
勘误
SWR 2.0 支持了 Mutation: https://swr.vercel.app/zh-CN/blog/swr-v2#useswrmutation
BGM by Otologic
前期准备不太充分,节目中有些内容没有表达出来。
一个是我们在做库或者框架的时候,要有一个特点,更重要的是要有设计哲学。
第二点忘记推荐 unix philosophy,非常精彩。
第三点忘记对比几种设计哲学了,设计思想之间的碰撞非常有意思。
在很多时候,软件工程的设计是一个 trade off 的过程。如果我们想要 clickhouse 那样超强的写入计算,那么事务就很难加入进去。
迷茫的时候,这些哲学思想可以帮助我们走出困境,设计出更好的 API,提供更好的开发体验,优化出更好的性能。
节目中没有提到的可维护性也是非常重要的一点,尤其在这样降本增效的大背景下,运营维护成本也不容忽视。
最后,还是节目中提到的,所有的设计哲学的前提是要有基础的能力。千万不能只会拼凑名词,夸夸其谈。一定要先写好代码
有任何意见或者建议,可以联系我们 async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Timeline
00:44 更新频率又更新了
01:20 今天的主题 —— Code is cheap, let’s talk
02:18 文档中 Principles 一节非常重要
03:12 react, redux, react-testing-library, tailwind 的设计哲学
07:12 很多时候写代码不是能做什么,而是不做什么
08:24 我们在做库的时候,可以从哪些方面考虑 —— 性能,颜值正义,开发便捷,语法简单,高可用
12:00 负面例子 —— 我不能理解它设计逻辑的某个库
14:06 做产品一定要有设计哲学/原则。
15:10 基础能力是设计原则的基础,不能只会装。
16:20 抄作业最好也只能抄到第二名
相关链接
Flux: In-Depth Overview https://facebook.github.io/flux/docs/in-depth-overview
React Testing Library: Guiding Principles ****: https://testing-library.com/docs/guiding-principles
TailwindCSS: Utility-First Fundamentals: https://tailwindcss.com/docs/utility-first
ByteByteGo: System Design: Why is Kafka fast?: https://www.youtube.com/watch?v=UNUz1-msbOM
Starship: https://starship.rs/guide/
Formik: https://formik.org/
React hook form: https://react-hook-form.com/
BGM by Otologic
本期节目讨论了一些 GraphQL 相关的内容。介绍 GraphQL 的发展,优势,缺点以及对应的一些解决方案。
有问题可以联系 async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Timeline
00:14 没有听众群,刷题和 chatGPT
02:30 首富不懂 GraphQL?
04:30 介绍 GraphQL 以及为什么有用
10:50 GraphQL 的发展,应用,变种
16:25 有谁在用 GraphQL
17:40 GraphQL 有什么优势 —— 沟通成本降低,类型更加健壮,前端缓存更好做
18:49 GraphQL 有什么缺点? —— 学习成本较高,后端性能不好控制,过度请求
20:40 缺点的解决方案有哪些 —— 学,做性能追踪,做 query 管理服务
27:30 关于 Cache
30:00 安利 —— 快试试 GraphQL !
相关链接
首富吐槽 Twitter 慢是请求比较多. https://twitter.com/elonmusk/status/1591853644944932865?s=61&t=uoOc4m9XOFxNqcCksnbcgw
GraphQL - A query language for your API: https://graphql.org/
Relay Modern: Simpler, faster, more extensible**:** https://engineering.fb.com/2017/04/18/web/relay-modern-simpler-faster-more-extensible/
DSL - Domain specific language
graph-gophers/graphql-go: https://github.com/graph-gophers/graphql-go
Apollo CLI(deprecated): https://www.apollographql.com/docs/devtools/cli/
GraphQL code generator: https://the-guild.dev/graphql/codegen
BGM by Otologic
本期节目我们来蹭一下 Turbopack 的热点,谈了一些关于 packer 相关的变化。那么假如听众你要来做一个新的 packer,你会怎么设计呢?
本期用了新软件剪辑,也许有很多问题,听众有问题可以直接留言或发邮件。节目内容如有错误也请帮忙纠正,非常感谢~
邮件地址: async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Timeline
00:00 介绍及团队说明
00:42 Vercel 新的发布会与 Turbo pack
03:40 天下苦 Webpack 久矣?为什么?
06:10 Babel 也许并不是很好的选择
07:10 也许语言也会拖慢 Webpack
09:30 loader 们同样的事情做了很多次
10:10 Vite 的赢面看起来挺大,Rome, Parcel 也不错
13:22 Webpack 由于生态和兼容,大概还是会继续统治前端构建
15:40 假如来做一个新的 packer, 会怎么做呢?
19:15 听众你会怎么做呢?
相关链接
Turbopack 的 release tweet: https://twitter.com/vercel/status/1584961746418208774
Is Turbopack really 10x Faster than Vite? https://github.com/yyx990803/vite-vs-next-turbo-hmr/discussions/8
https://twitter.com/ruanyf/status/1392101064866885638
Announcing Rome v10****:**** https://rome.tools/blog/2022/11/08/rome-10/
Parcel v2.8.0: https://parceljs.org/blog/v2-8-0/
esbuild benchmark: https://esbuild.github.io/faq/
SWC benchmark: https://swc.rs/docs/benchmarks
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!: https://parceljs.org/blog/parcel-css/
BGM by Otologic
在又一次紧张刺激的停更后,我们和 Roc 一起谈了谈 side project 与独立开发的一些事情。主要包括为什么要做独立开发,收益如何,最后再打个绩效。
希望大家可以 happy coding~
有任何意见建议也欢迎联系我们: async.talk@gmail.com
名词解释
ROI: Return on Investment 投入产出比
RD: Research & Development 本节目中多数意为 工程师/开发/程序员
PM: Product Manager 本期节目中特指 产品经理
主播
Roc: https://twitter.com/roczhang9673
AnnatarHe: https://annatarhe.com
Sleaf: https://twitter.com/Sleaf_
Timeline
00:33 Roc 与停更的说明
01:40 独立开发一般做点儿什么 App ?
03:20 Roc 做的一些 App
07:50 为啥不太高兴做 Android ?
11:20 完全不上班,靠卖 App 生活现实吗 ?
14:30 除开资金,还会有什么其他收益 ?
25:30 Sleaf 与 AnnatarHe 做 AsyncTalk 是怎么想的
27:00 Roc 给自己的独立开发生活打个绩效吧
28:00 做独立应用会有一些意想不到的 bonus
30:40 替 Roc 做的广告
33:00 Roc 的个人感悟
34:20 如果你迷茫颓废了,做个 App 开心一下吧
相关链接
App: X Progress https://apps.apple.com/us/app/x-progress/id1359786804
App: Mr. Weather https://apps.apple.com/us/app/mr-weather-2/id1453150372
BGM by Otologic
第 18 期几位主播聊了一些关于我们自己日常用的编辑器,插件和 App。
如果有什么好用的东西也可以评论或者留言给我们哦: async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Sleaf: https://twitter.com/Sleaf_
Tinko: https://space.bilibili.com/290664
小鹿
Timeline
00:40 编辑器,IDE 与插件
09:05 开发相关的一些 App 也很好用~
18:00 Atom —— 时代的眼泪
相关链接
Jetbrains’ Free Educational License: https://www.jetbrains.com/community/education/#students
Emmet: https://emmet.io/
VS Code Remote Development: https://code.visualstudio.com/docs/remote/remote-overview
GitLens: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
rust-analyzer: https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer
AnnatarHe 的 vimrc 配置: https://github.com/AnnatarHe/vim-config
Emacs Evil mode: https://github.com/emacs-evil/evil
Alfred: https://www.alfredapp.com/
uTools: https://www.u.tools/
raycast: https://www.raycast.com/
Xcodes.app: https://github.com/RobotsAndPencils/XcodesApp
NetNewsWire: https://netnewswire.com/
reeder app: https://reederapp.com/
craft: https://www.craft.do/
shottr: https://shottr.cc/
TablePlus: https://tableplus.com/
sqlectron: https://sqlectron.github.io/
Sunsetting Atom****:**** https://github.blog/2022-06-08-sunsetting-atom/
扩展阅读
安裝 Xcode 的正確姿勢: https://www.notion.so/Xcode-dfbe2d934ff84b2d84e34ffceef56fe0
weak self ep85 iOS 開發者之痛、iOS 開發者之恥 — Xcode 管理學: https://weakself.dev/episodes/85
BGM by Otologic
第 17 期几位主播聊了一些关于我们自己日常用的一些 Terminal, Shell 和命令。
如果有什么好用的东西也可以评论或者留言给我们哦: async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Sleaf: https://twitter.com/Sleaf_
Tinko: https://space.bilibili.com/290664
小鹿
Timeline
01:17 入题:差生文具多
01:22 Terminal
10:18 Shell
14:20 命令
23:30 结语,还有下一集哦
相关链接
iTerm2: https://iterm2.com/
Dracula Theme: https://draculatheme.com/
tmux: https://github.com/tmux/tmux/wiki
Powerline fonts: https://github.com/powerline/fonts
Maple Mono font: https://github.com/subframe7536/Maple-font
Warp Terminal: https://www.warp.dev/
tldr: https://github.com/tldr-pages/tldr
thefuck: https://github.com/nvbn/thefuck
hyper.js: https://hyper.is/
putty: https://www.putty.org/
Microsoft terminal: https://github.com/microsoft/terminal
Zsh: https://www.zsh.org/
oh my zsh: https://ohmyz.sh/
fish shell: https://fishshell.com/
oh my fish: https://github.com/oh-my-fish/oh-my-fish
ash: https://en.wikipedia.org/wiki/Almquist_shell
nushell: https://www.nushell.sh/
fkill: https://github.com/sindresorhus/fkill-cli
ripgrep: https://github.com/BurntSushi/ripgrep
jq: https://stedolan.github.io/jq/
httpie: https://httpie.io/
fzf: https://github.com/junegunn/fzf
ag: https://github.com/ggreer/the_silver_searcher
bat: https://github.com/sharkdp/bat
delta: https://github.com/dandavison/delta
diff-so-fancy: https://github.com/so-fancy/diff-so-fancy
beyond compare: https://www.scootersoftware.com/
zx: https://github.com/google/zx
BGM by Otologic
本期从一个问题开始
如何在一个定宽 div 中展示一个可能会略长一些的文本
在探索方案的同时,我们也聊了一些关于如何提问可以更有效地获取答案的方式。
有任何问题可以邮件或评论区联系: async.talk@gamil.com
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline
01:00 问题起因,如何在定宽文本中放入文本
08:00 质疑需求
16:16 提问的智慧
相关链接
Letter spacing: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
Marquee tag: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee
html2canvas: https://www.npmjs.com/package/html2canvas
Canvas.fillText: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText
录播软件 OBS: https://obsproject.com/
提问的智慧: https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
BGM by Otologic
这一期我们一起看一些前端状态管理的方案,从 window.store 到 Flux 的变化,双向绑定与单向数据流又是怎样的妥协与融合,从客户端手动管理到 type based cache 的发展又有怎样的经历。
有任何想法欢迎邮件联系: async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline
02:05 全局状态的用处
04:00 全局状态管理的进化
05:33 Flux 的新时代
07:45 this.$store.x = 1 违背了 Flux 原则吗?
10:20 双向绑定是不是一个错误的方向
12:28 新方案 Pinia 与 Recoil
17:19 没有 store 的全局状态管理怎么样呢?
22:18 状态机?
相关链接
IIFE: https://developer.mozilla.org/en-US/docs/Glossary/IIFE
Flux:https://juejin.cn/post/6844904054921887758
Redux: https://redux.js.org/
Vuex: https://vuex.vuejs.org/
Mobx: https://mobx.js.org/README.html
Recoil: https://recoiljs.org/
Pinia: https://pinia.vuejs.org/
useSWR: https://swr.vercel.app/
GraphQL: https://graphql.org/
Apollo Cache: https://www.apollographql.com/docs/react/caching/overview
BGM by Otologic
这期节目我们追一追时下比较火的 bun — a fast all-in-one JavaScript runtime 来听听主播们都看了点儿什么。
节目中有任何问题,意见或者建议均可邮件联系: async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
小鹿
节目中提到的 fib 代码如下:
运行结果如图:
Timeline:
0:54 最近新出了个 bun
3:26 bun 的性能到底有多好?
6:31 所以 deno 的意义是什么呢?
7:26 bun 的一些 API 似乎不全?
10:21 bun 的串口通信怎么样
10:59 Zig lang 看不懂呀
13:10 你用 bun 装包了吗?
14:00 bun 的 IO 似乎很快
18:33 Edge computing
21:03 阿里前端近年来风评问题
23:15 bun 就到这里了
相关链接
https://bun.sh/
https://hhvm.com/
https://hacklang.org/
carbon lang: https://github.com/carbon-language/carbon-lang
bun 的 fs IO 有点儿快: https://twitter.com/jarredsumner/status/1556948257007210496
Web-interoperable Runtimes Community Group: https://wintercg.org/
egg.js: https://www.eggjs.org/
typescript LLVM: https://github.com/ASDAlexander77/TypeScriptCompiler
os.arch() and os.platform() are not correct: https://github.com/oven-sh/bun/issues/173
BGM by Otologic
第二季的开始我们先从浏览器近几年出的 API 谈起,聊一聊浏览器能多做些什么
联系我们: async.talk@gmail.com
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
Timeline
00:30 新一季想多聊聊新东西
02:05 monaco 做得不错~
02:55 Permission
03:53 新的 API 好像大多需要 HTTPS 了
05:00 Local Notification & Push Notification
08:50 剪切与粘贴
12:26 video 的自动执行
16:17 主播自用 API
相关链接
Monaco Editor: https://microsoft.github.io/monaco-editor/
Progressive Web Apps: https://web.dev/progressive-web-apps/
棱镜门事件: https://zh.m.wikipedia.org/zh-hk/稜鏡計畫
Notification API: https://developer.mozilla.org/en-US/docs/Web/API/notification
Firebase: https://firebase.google.com/
clipboardjs: https://clipboardjs.com/
Clipboard API: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
Selection API: https://developer.mozilla.org/en-US/docs/Web/API/Selection
execCommand API: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
ClipboardActionCopy 的实现: https://github.com/zenorocha/clipboard.js/blob/2b2f9eef6fd1cf951612740e16e422db2848c00a/src/actions/copy.js#L27
safari 在低电量模式下不会播放 muted video: https://developer.apple.com/forums/thread/709821
Battery Status API: https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API
Fullscreen API: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Picture in Picture API: https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API
修正
节目中提到execCommand的复制内容,经过测试实际上是无须用户先进行真人交互的click操作的
BGM by Otologic
这是一期特别节目,主要内容是我们第一季节目结束,第二季会在 8.11 继续更新。
有任何意见建议欢迎留言或邮件至 async.talk@gmail.com
在节目进行到第 12 期的时候,我们终于写了个自己的官网。以此为契机聊了一些 SEO (搜索引擎优化) 相关的话题
联系我们: async.talk@gmail.com
关键名词:
SEO: Search Engine Optimization
CSR: client side rendering - 客户端渲染
SSR: server side rendering - 服务端渲染
Nextjs: 一个支持 SSR 的 React 框架
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline
0:00 开场
0:19 我们写了个官网
1:02 什么是 SEO
3:42 搜索引擎是怎么看网页的
15:00 OpenGraph 是个好东西
18:37 有些网站其实不想被爬
21:30 怎么提高网站的搜索权重
24:03 搜索引擎的流量在减少
25:42 怎么搜索引擎爬到东西
31:30 自己做一个 SSR ?
39:45 一些有趣网站的实践
相关链接
https://asynctalk.com/
puppteer: https://github.com/puppeteer/puppeteer
语义化标注 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
robots.txt
Open Graph Protocol: https://ogp.me/
uBlacklist: https://chrome.google.com/webstore/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe
https://prerender.io/
https://nextjs.org/
如何移除你项目中 99% 的JS代码: https://mp.weixin.qq.com/s/UG3T9mpzGA-Co1TBywNCNw
https://archive.org/
分享图生成 https://imgg.gg/
next 的 bug? 一个关于 typescript 执行不一致的问题: https://github.com/vercel/next.js/issues/27871
PageRank: http://ilpubs.stanford.edu:8090/422/1/1999-66.pdf
v2ex - 程序员论坛: https://v2ex.com/
BGM by Otologic
本期节目主播们在谈天说地之余聊了些关于 Event 相关的话题,从浏览器事件模型到性能优化都没丢下。
由于 lock down 带来的影响尚未散去,主播们普遍未能恢复到完全的状态,本期节目还请大家多多包涵。
但如果内容有误请务必不要照顾我们,可以通过邮件或者直接评论留言的方式联系我们指正。感谢~
邮件:async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline
0:48 引题 - Event
1:24 Event 是什么
5:11 浏览器事件模型
9:10 AbortSignal 与 once
10:58 浏览器生命周期事件
14:35 I'm not robot!
17:47 event.target & currentTarget
18:47 无聊的面试题:事件委托
20:39 不是面试题的 Event Loop
23:51 Node Event Loop 以及你为啥不该知道
32:08 脱离前端的 Event
32:38 Event 有啥用呢?挣钱,解耦
33:56 ”事件“ 概念的杰出代表 — Nginx
35:37 一道有趣的面试题
39:15 解决问题可以靠工程,也可以用算法
40:52 如何优化高复杂度的问题
42:09 蹭个 react fiber 的热度
43:15 性能有问题?分片!
45:21 关于未发布节目的说明 — 我们倾向于做正能量节目
相关链接
Document: visibilitychange event: https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
What is the exact difference between currentTarget property and target property in JavaScript: https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property
React SyntheticEvent: https://reactjs.org/docs/events.html
The Node.js Event Loop, Timers, and process.nextTick(): https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/
tauri: https://github.com/tauri-apps/tauri
This new iOS 16 feature will rid the web of pesky CAPTCHA verification puzzles: https://9to5mac.com/2022/06/20/ios-16-bypass-captchas/
Difference between microtask and macrotask within an event loop context: https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context
SPEC task queue: https://html.spec.whatwg.org/multipage/webappapis.html#task-queue
tokio: https://github.com/tokio-rs/tokio
Thread Pools in NGINX Boost Performance 9x! https://www.nginx.com/blog/thread-pools-boost-performance-9x/
React Fiber Architecture: https://github.com/acdlite/react-fiber-architecture
扩展阅读
How Apple could kill CAPTCHAs with Private Access Tokens https://appleinsider.com/articles/22/06/14/how-apple-could-kill-captchas-with-private-access-tokens
BGM by Otologic
本期节目我们请到了一位强力外援 李叶(https://github.com/leeyeh/) 来一起谈一谈出海国际化的各种问题。
这期节目只有大概一小时,但是内容却相当丰富,谈及了语言,数字及文化方面的国际化注意事项及一些解决方案。
最后发现还是做国内市场最简单 :)
主播:
李叶: https://github.com/leeyeh/
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline:
0:34 为什么要出海啊
2:17 i18n, l10n 都是什么?
5:30 语言的国际化要解决什么问题
7:41 单复数还挺复杂的哦
10:59 千?万?
14:43 什么?windows 日版路径分隔用 ¥
17:30 语法与语言
20:43 国际化那么多标准,哪儿来的数据?
28:07 大型项目的国际化文案怎么做?
36:44 时间的国际化
44:16 只做国内产品挺好的
44:41 国际化是怎么区分语言和地区的呢?
48:51 国际化 — 隐私与政策
52:14 国际化 — 圣诞节到底过不过
54:03 国际化 — 顿涅兹克的地图该怎么画
57:06 国际化 — 手机号就算了吧
58:39 国际化 — 性别可别用 boolean 哦
1:00:16 总结 — 出海还真不容易
相关链接:
i18n 与 l18n 的区别: https://www.w3.org/International/questions/qa-i18n
CLDR: https://cldr.unicode.org/index
IETF BCP 47 language tag: https://en.wikipedia.org/wiki/IETF_language_tag
Ant Design 圣诞节事件(注:链接中被离职的文字并没有找到有力证据佐证):
Ant Design 圣诞地雷:
https://www.v2ex.com/t/520690?p=1
https://github.com/ant-design/ant-design/issues/13098#issuecomment-449786093
https://github.com/ant-design/ant-design/issues/13098#issuecomment-449786560
https://github.com/ant-design/ant-design/issues/13098#issuecomment-449786655
Intl: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
为什么日语Windows下的路径分隔符使用¥? https://www.zhihu.com/question/41218947
SwiftUI LocalizedStringKey: https://developer.apple.com/documentation/swiftui/localizedstringkey
陈浩关于飞书国际化的批评: https://twitter.com/haoel/status/1497197608908976128
GitHub 的地图像素化: https://octoverse.github.com/#future
open street map: https://www.openstreetmap.org/
mysql 的 boolean 实际上是 tinyint: https://stackoverflow.com/questions/3751853/boolean-vs-tinyint1-for-boolean-values-in-mysql
扩展阅读:
李叶做的关于国际化的内部分享: https://zealous-visitor-b16.notion.site/Internationalization-Localization-1-a6f564c41f2f49189b7caecec969f02f
GDPR 2 周年,我们分析了近 300 起罚款事件 https://www.infoq.cn/article/pCqvqVaD46m4NAWcoLIC
勘误:
意大利,挪威,西班牙用 . 做千的分割,而非德国 https://docs.oracle.com/cd/E19253-01/819-0402/overview-48/index.html
BGM by Otologic
大家新年快乐~我们年后回归一起聊一聊 CSS 。主要介绍了几种 css 工程的思想及相关实现的代表作,探索更好的 CSS 工程形式。
有任何意见或建议,欢迎联系邮件:async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline
00:30 听众反馈
02:43 让人头疼的样式表
13:02 预编译器哪家强
22:38 怎么限制 css 作用域?
25:21 BEM?简单而臃肿
28:03 Vue 送来了 scoped
30:46 CSS Modules 好用吗
33:06 ALL IN JS!
35:43 原子性 CSS 是不是一个好的方案?
41:22 小结,以及还有其他小众方案
42:26 这些方案有哪些落地的框架?
46:39 最近蛮火的 Tailwind 用起来怎么样
1:02:15 styled-componets 是不是一个完美的方案?
1:05:17 说了这么多,现在主播们会选哪个?
1:11:02 在未来什么会消亡什么会壮大?
相关链接
BEM: http://getbem.com/introduction/
LibSass is Deprecated: https://sass-lang.com/blog/libsass-is-deprecated
CSS 语法 [符号]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#符号
最佳化文字資產的編碼和傳輸大小: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer?hl=zh-tw
CSS Houdini: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Houdini
扩展阅读
An Introduction To Object Oriented CSS (OOCSS): https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
Just-In-Time: The Next Generation of Tailwind CSS: https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css
Real-world CSS vs. CSS-in-JS performance comparison: https://pustelto.com/blog/css-vs-css-in-js-perf/
postcss-rs: https://github.com/postcss-rs/postcss-rs
parcel-css: https://github.com/parcel-bundler/parcel-css
BGM by Otologic
第七期内容我们趁着年前各位跳槽前录了期关于面试的话题,包括了面试官和候选人的视角。也谈到了应该用什么样的态度来面试,问什么问题,也包含最后的薪酬话题。
其中关于 “面试造火箭,入职拧螺丝” 的部分我们讨论比较激烈,但内容上是关于 “预期管理” 的讨论。后续也激烈讨论了老生常谈的 “性能 vs 效率“ 的话题。听众有自己的看法也欢迎留下评论或者发邮件讨论。
由于本期内容过长,我们分了上、下两集。同时春节临近,我们也请假一期。下次更新时间是 2022.2.24 祝大家新年快乐~
联系方式: async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline(上)
00:31 上期反馈及回应
03:35 面试
05:22 为什么需要招人
09:00 面试官的基本素养
26:30 面试题 - “八股文” 什么看法?
29:45 简历记得要扬长避短
36:10 开始吧,请先做个自我介绍
40:12 智力题?态度题?
46:45 正经 web 面试题
Timeline(下)
00:24 面试题 —— 浏览器事件
01:44 面试题 —— 新规范
05:34 面试题 —— 实现 deepclone
06:44 面试题 —— 浏览器输入 url 后,发生了什么
15:54 面试题 —— 关于网络,关于加密
19:29 面试题 —— 计算机基础
24:24 面试题 —— 算法
34:49面试造火箭,入职拧螺丝?
41:16 算法的真实应用
50:56 工程经验与个人学习
54:59 对面试官有什么需要了解的
57:47 钱和另一个东西,怎么算?
60:36 如何选 Offer
67:31 钱怎么算
77:29 结束 + 休假 + 请假
相关链接:
中国程序员容易发音错误的单词: https://github.com/shimohq/chinese-programmer-wrong-pronunciation
How to vertically align an image inside a div: https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div
POSIX 标准: https://en.wikipedia.org/wiki/POSIX
Coroutine: https://en.wikipedia.org/wiki/Coroutine
ES6 Tail Recursion Optimisation Stack Overflow: https://stackoverflow.com/questions/42788139/es6-tail-recursion-optimisation-stack-overflow
薪酬报告:https://www.zhipin.com/salaryxc/c101020100_p100901.html
扩展阅读
Let it crash: https://wiki.c2.com/?LetItCrash
A Crash Course In Failure: http://web.archive.org/web/20090430014122/http://nplus1.org/articles/a-crash-course-in-failure/
Announcing TypeScript 4.5: https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/
TypeScript 类型体操挑战题: https://github.com/type-challenges/type-challenges
RSA: https://en.wikipedia.org/wiki/RSA_(cryptosystem)
BGM by Otologic
第七期内容我们趁着年前各位跳槽前录了期关于面试的话题,包括了面试官和候选人的视角。也谈到了应该用什么样的态度来面试,问什么问题,也包含最后的薪酬话题。
其中关于 “面试造火箭,入职拧螺丝” 的部分我们讨论比较激烈,但内容上是关于 “预期管理” 的讨论。后续也激烈讨论了老生常谈的 “性能 vs 效率“ 的话题。听众有自己的看法也欢迎留下评论或者发邮件讨论。
由于本期内容过长,我们分了上、下两集。同时春节临近,我们也请假一期。下次更新时间是 2022.2.24 祝大家新年快乐~
联系方式: async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline(上)
00:31 上期反馈及回应
03:35 面试
05:22 为什么需要招人
09:00 面试官的基本素养
26:30 面试题 - “八股文” 什么看法?
29:45 简历记得要扬长避短
36:10 开始吧,请先做个自我介绍
40:12 智力题?态度题?
46:45 正经 web 面试题
Timeline(下)
00:24 面试题 —— 浏览器事件
01:44 面试题 —— 新规范
05:34 面试题 —— 实现 deepclone
06:44 面试题 —— 浏览器输入 url 后,发生了什么
15:54 面试题 —— 关于网络,关于加密
19:29 面试题 —— 计算机基础
24:24 面试题 —— 算法
34:49面试造火箭,入职拧螺丝?
41:16 算法的真实应用
50:56 工程经验与个人学习
54:59 对面试官有什么需要了解的
57:47 钱和另一个东西,怎么算?
60:36 如何选 Offer
67:31 钱怎么算
77:29 结束 + 休假 + 请假
相关链接
中国程序员容易发音错误的单词: https://github.com/shimohq/chinese-programmer-wrong-pronunciation
How to vertically align an image inside a div: https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div
POSIX 标准: https://en.wikipedia.org/wiki/POSIX
Coroutine: https://en.wikipedia.org/wiki/Coroutine
ES6 Tail Recursion Optimisation Stack Overflow: https://stackoverflow.com/questions/42788139/es6-tail-recursion-optimisation-stack-overflow
薪酬报告:https://www.zhipin.com/salaryxc/c101020100_p100901.html
扩展阅读
Let it crash: https://wiki.c2.com/?LetItCrash
A Crash Course In Failure: http://web.archive.org/web/20090430014122/http://nplus1.org/articles/a-crash-course-in-failure/
Announcing TypeScript 4.5: https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/
TypeScript 类型体操挑战题: https://github.com/type-challenges/type-challenges
RSA: https://en.wikipedia.org/wiki/RSA_(cryptosystem)
BGM by Otologic
本期节目我们终于蹭上了热点 —— 低代码(Low Code)。主播们根据自己的经历谈了些应用场景和实现等相关话题,展望未来的低代码平台应该是什么样子。
希望能对听众在构建自己的低代码平台时有一定的启发。
联系我们: async.talk@gmail.com
主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
小鹿
Timeline:
00:00 开场及短消息速报
04:13 进入主题:低代码
04:34 什么是低代码以及低代码的历史
08:03 低代码在 ERP ,表单,组件等实现
10:36 低代码在 to C 场景上的应用
11:40 主播们做过的低代码平台
16:37 低代码真的是毒瘤吗?
19:50 向左图灵完备,向右垂直领域。低代码该往哪里走。
20:30 JSON 作为低代码沟通的 interface,是个合适的结构吗?
27:39 eval ? with ?
29:32 蹭个热点 Log4j (顺便再黑一把 Java)
30:10 低代码的渲染选型与实践
33:10 低代码是不是需要预编译?
39:30 运行时的性能有那些潜在问题
49:16 低代码平台对 leader 的要求比较高
50:12 低代码平台还有哪些需要解决的问题
54:00 github copilot 会是低代码的竞争对手吗?
57:57 低代码平台未来会成为什么样子,它会让我们失业吗?
62:28 废话时间
相关链接
dreamwaver: https://www.adobe.com/hk_en/products/dreamweaver.html
DSL(Domain-specific language): https://en.wikipedia.org/wiki/Domain-specific_language
图灵完备: https://zh.wikipedia.org/wiki/圖靈完備性
Node.js Helps NASA Keep Astronauts Safe and Data Accessible: https://openjsf.org/wp-content/uploads/sites/84/2020/02/Case_Study-Node.js-NASA.pdf
上线了: https://sxl.cn
Ali 的 formily: https://designable-antd.formilyjs.org/
plasmic: https://www.plasmic.app/
image cook: https://www.imgcook.com/
“行业毒瘤”低代码: https://www.huxiu.com/article/424995.html
github copilot: https://copilot.github.com/
BGM by Otologic
️ 本期三位主播围绕 "包管理" 聊了些 js 的包管理历史,版本管理,如何发包等问题。
联系我们: async.talk@gmail.com
��� 主播
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf: https://twitter.com/Sleaf_
⏰ Timeline
00:00 开场简介
01:52 JavaScript 包管理历史
07:48 包管理是用来解决什么问题的
10:47 版本管理
13:50 包管理器的百家争鸣
17:53 .lock 文件即版本号的设计
24:12 how to patch a package
27:00 发个包吧
28:40 package.json 的字段有哪些
37:57 type: module
41:10 npm scripts
45:30 npm link & tag & publish
51:41 总结以及开发一个新包应该有哪些注意事项
� 勘误
Rust 是有不同的构建依赖类型的:https://doc.rust-lang.org/cargo/reference/manifest.html
� 相关链接
AMD: https://github.com/amdjs/amdjs-api/blob/master/AMD.md
UMD: https://dontkry.com/posts/code/browserify-and-the-universal-module-definition.html
CMD(commonjs): https://nodejs.org/api/modules.html
ES Module: https://tc39.es/ecma262/#sec-modules
IIFE(自执行函数): https://developer.mozilla.org/en-US/docs/Glossary/IIFE
require.js: https://requirejs.org/
bower: https://bower.io/
tree-shaking(摇树): https://webpack.js.org/guides/tree-shaking/
yeoman: https://yeoman.io/
yarn: https://yarnpkg.com/
pnpm: https://pnpm.io/
patch-package: https://github.com/ds300/patch-package
io.js: https://github.com/nodejs/iojs.org
lerna: https://github.com/lerna/lerna
包管理处理的依赖问题是比较复杂的,没能找到合适的文章,可以先从这里看起: https://en.wikipedia.org/wiki/Dependency_hell
� 扩展阅读
lerna 放弃维护:https://github.com/lerna/lerna/issues/2703#issuecomment-777089520
BGM by Otologic
本期我们邀请到了子亭(@jysperm)来和我们一起聊一聊 node.js 及相关的后端和全栈概念。
也欢迎大家留下自己对话题的看法及节目的评价。感谢各位的收听。
联系我们: async.talk@gmail.com
主播:
AnnatarHe: https://annatarhe.com
Tinko: https://space.bilibili.com/290664
Sleaf https://twitter.com/Sleaf_
嘉宾:
@ziting https://jysperm.me
Timeline:
00:00 开场及自我介绍
03:41 关于用 JAVA 写后端这件事
06:57 用 Rust 来写是不是一个好的选择?
13:10 回归正题!用 Node.js 来写后端怎么样,TypeScript?Deno?
29:02 BFF 是啥?是不是为了升职加薪炒出来的概念?
34:31 那这些我都写了,现在我算全栈工程师了吗?
42:00 前端和后端各自的关注点以及专业性
45:10 我们现在可以不管运维了吗?SRE 工程师是啥职位?
51:30 聊聊现在的云平台,k8s 到底是强大还是臃肿?有替代方案吗?
57:04 总结时间
相关信息:
Rust: https://www.rust-lang.org/
我们并不需要 Deno:https://jysperm.me/2021/05/we-dont-need-deno/
errors are values: https://go.dev/blog/errors-are-values
Design Doc: Use JavaScript instead of TypeScript for internal Deno Code: https://docs.google.com/document/u/0/d/1_WvwHl7BXUPmoiSeD8G83JmS8ypsTPqed4Btkqkn_-4/mobilebasic
Traefik Migration Guide: From v1 to v2 https://doc.traefik.io/traefik/migration/v1-to-v2/
Frontends and Backends Are Dead... ... Long Live Routers, Middlewares, and Services
《黑客与画家》: https://book.douban.com/subject/6021440/
Unix Pipeline: https://en.wikipedia.org/wiki/Pipeline_(Unix)
付费删除 NPM 包 https://drewdevault.com/2021/11/16/Cash-for-leftpad.html
节目中提到的 K8S 竞品:
https://www.hashicorp.com/products/nomad
https://mesosphere.github.io/marathon/
https://docs.docker.com/engine/swarm/
扩展阅读:
Rust Is The Future of JavaScript Infrastructure: https://leerob.io/blog/rust
BGM by Otologic
为了达成 OKR 聊点儿主题相关的,这次的主题是关于前端工程化的问题,以及对未来的展望,如何身体力行地去参与创建下一代前端。
内容主要三个部分 —— 开发,部署,运维
希望大家可以开拓视野,尝试用初次相见的眼光看待事物,不拘泥于目前的限制。毕竟比马更快的不是马,比 TNT 更爆裂的也不是炸药。那么,比 React, Webpack 更好的,是什么呢?
主播:
AnnatarHe: https://web.okjike.com/u/20965c29-1f92-4df8-9107-45043db29278
Tinko: https://space.bilibili.com/290664
Sleaf
Timeline:
00:00 开场
01:03 前端工程化的前世今生
05:05 现代工程化 - 开发(分支管理与 Git Flow)
12:36 当前部署流程 CI/CD
14:32 下一代构建/部署展望
23:10 下一代的 CSS 样式要怎么写?
31:55 我们需要更高压缩率的图片格式吗?
38:07 关于测试的讨论
46:25 下一代运维是什么样,Serverless?
52:28 上线之后我们要做什么?
56:37 畅想重构 web 开发流程
ref:
Backbone.js https://backbonejs.org/
各种 git 工作流 https://www.ruanyifeng.com/blog/2015/12/git-workflow.html
Git-flow 已经过时 https://nvie.com/posts/a-successful-git-branching-model/
Google 不再兼容 IE https://9to5google.com/2021/10/01/google-search-internet-explorer-11/
常见图片格式 https://juejin.cn/post/6844903625731358727
E2E 测试工具 Cypress https://www.cypress.io/
自动文档生成工具 https://typedoc.org/
TDD(Test Driven Development) https://en.wikipedia.org/wiki/Test-driven_development
Sentry https://sentry.io/
NewRelic https://newrelic.com/
Uptrace https://uptrace.dev/
Prisma https://www.prisma.io/
Rome https://rome.tools/
更多资料:
软件开发的工作流: https://blog.forecho.com/software-development-workflow.html
LeanCloud 开放资源 - 文案风格指南: https://open.leancloud.cn/copywriting-style-guide/
How We Build Code at Netflix: https://netflixtechblog.com/how-we-build-code-at-netflix-c5d9bd727f15
不需要追求 100% 的测试覆盖率 https://medium.com/@joshuakgoldberg/in-defense-of-100-unit-test-coverage-7fd1a9873ca4
联系方式:async.talk@gmail.com
BGM by Otologic
在社交媒体上看到一位朋友发的牢骚,内容是这样的:
想学一种前端技术,毕竟自己对产品还是也很喜欢的,想着是不是自己也能瞎搞点啥,然后就去搜:js快速入门图书推荐、学typescript之前需要先学js么、Electron跨平台使用js还是ts,vue和react哪个好?angular还值得学么。。。
然后我决定学swift了
我们 AsyncTalk 作为主要做 web 开发方向的工程师,针对这个问题聊了聊自己的看法。
如果你刚入行前端,或者希望能学一门 GUI 技术,可以来听听看
时间线:
00:00 引言
00:46 入门 JS 图书推荐
05:20 关于跨行到前端工程师的讨论
07:44 入门 CSS&HTML 图书推荐
11:01 学 TypeScript 之前需要学 JavaScript 吗?
16:52 项目里用 TS 还是 JS?
21:35 React, Vue, Ng 的技术应该从哪里入门
36:50 SwiftUI 的看法
41:02 结论小结
主播:
SleafH
Tinko: tinko@bilibili
AnnatarHe: AnnatarHe
联系方式: async.talk@gmail.com
注:由于收音问题,请在 21:50 左右加大音量,后期我们会尝试改进
Ref:
《JavaScript DOM 编程艺术》https://book.douban.com/subject/6038371/
《JavaScript 高级程序设计》(红皮书): https://book.douban.com/subject/10546125/
《JavaScript 语言精粹》https://book.douban.com/subject/3590768/
《你不知道的 JavaScript》https://book.douban.com/subject/26351021/
《ES6 标准入门》https://book.douban.com/subject/27127030/
《CSS 世界》https://book.douban.com/subject/27615777/
《CSS 揭秘》https://book.douban.com/subject/26745943/
Vite:https://vitejs.dev/
W3School:https://www.w3school.com.cn/
recoiljs: https://recoiljs.org/
redux saga: https://redux-saga.js.org/
SwiftUI 多 sheet 的 bug: https://twitter.com/bigmtnstudio/status/1371590366709776391?s=21
SwiftUI NavigationStack 会被 pop to root 的 bug: https://developer.apple.com/forums/thread/677333
后记:
TS 官方的态度是,学习 TS 之前必须学习 JS: https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html#learning-javascript-and-typescript
eval或with等用法需要了解,一般项目里不应该使用,因为会带来额外的风险,但是在一些底层库中为了实现更加灵活的特性是需要使用这些语言特性的。
BGM by Otologic
这里是AsyncTalk一档面向能听懂中文,对 web 开发感兴趣的朋友所录制的 Podcast 节目。
在第 0 期我们主要介绍了一下这个节目的背景和目标。
后续我们会讨论更多更为前沿,工程化的话题,感兴趣可以持续关注。
联系我们请发邮件至 async.talk@gmail.com 期待与您的沟通。
BGM by Otologic