AsyncTalk

View Top 200 Chart

Back to Rankings Page

Technology
**AsyncTalk**

和我们一起，把 web 开发带向下一个高度

AsyncTalk 是一档中文，面向对 web 开发感兴趣的朋友所录制的 Podcast 节目。

后续我们会讨论更多更为前沿，工程化的话题，感兴趣可以持续关注。

联系我们请发邮件至 async.talk@gmail.com 期待沟通。

Latest Episodes:

EP16 定宽容器长文本缩放 Aug 25, 2022

Show notes

本期从一个问题开始

如何在一个定宽 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

EP15 前端的状态管理 Aug 18, 2022

Show notes

这一期我们一起看一些前端状态管理的方案，从 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

**EP14 bun 新生煎出炉啦** Aug 11, 2022
Show notes

这期节目我们追一追时下比较火的 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

EP13 浏览器最近的新功能 Aug 04, 2022

Show notes

第二季的开始我们先从浏览器近几年出的 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

SP2 第一季结束啦 Jul 28, 2022

Show notes

这是一期特别节目，主要内容是我们第一季节目结束，第二季会在 8.11 继续更新。

有任何意见建议欢迎留言或邮件至 async.talk@gmail.com

EP12 官网与 SEO Jul 14, 2022

Show notes

在节目进行到第 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

EP11 与 Event 斗争的血泪史 Jun 30, 2022

Show notes

本期节目主播们在谈天说地之余聊了些关于 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

EP10 出海，国际化 Mar 09, 2022

Show notes

本期节目我们请到了一位强力外援李叶(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 总结 — 出海还真不容易

相关链接

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

EP08 金三银四，来场面试(下) Jan 14, 2022

Show notes

第七期内容我们趁着年前各位跳槽前录了期关于面试的话题，包括了面试官和候选人的视角。也谈到了应该用什么样的态度来面试，问什么问题，也包含最后的薪酬话题。

其中关于 “面试造火箭，入职拧螺丝” 的部分我们讨论比较激烈，但内容上是关于 “预期管理” 的讨论。后续也激烈讨论了老生常谈的 “性能 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 结束 + 休假 + 请假

Our TOPPODCAST Picks

Follow Us

Stay Connected

Related Podcasts

Links

Stay Connected