AsyncTalk

本期从一个问题开始

如何在一个定宽 div 中展示一个可能会略长一些的文本

在探索方案的同时，我们也聊了一些关于如何提问可以更有效地获取答案的方式。

有任何问题可以邮件或评论区联系： [email protected]

主播

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 的发展又有怎样的经历。

有任何想法欢迎邮件联系： [email protected]

主播

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 来听听主播们都看了点儿什么。

节目中有任何问题，意见或者建议均可邮件联系： [email protected]

主播

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 谈起，聊一聊浏览器能多做些什么

联系我们： [email protected]

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 继续更新。

有任何意见建议欢迎留言或邮件至 [email protected]

在节目进行到第 12 期的时候，我们终于写了个自己的官网。以此为契机聊了一些 SEO (搜索引擎优化) 相关的话题

联系我们： [email protected]

关键名词：

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 带来的影响尚未散去，主播们普遍未能恢复到完全的状态，本期节目还请大家多多包涵。

但如果内容有误请务必不要照顾我们，可以通过邮件或者直接评论留言的方式联系我们指正。感谢～

邮件：[email protected]

主播

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 工程形式。

有任何意见或建议，欢迎联系邮件：[email protected]

主播

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 祝大家新年快乐~

联系方式： [email protected]

主播

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