AsyncTalk - 节目列表

在又一次紧张刺激的停更后，我们和 Roc 一起谈了谈 side project 与独立开发的一些事情。主要包括为什么要做独立开发，收益如何，最后再打个绩效。 希望大家可以 happy coding~ 有任何意见建议也欢迎联系我们: [email protected] 名词解释 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。 如果有什么好用的东西也可以评论或者留言给我们哦: [email protected] 主播 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 和命令。 如果有什么好用的东西也可以评论或者留言给我们哦: [email protected] 主播 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 中展示一个可能会略长一些的文本 在探索方案的同时，我们也聊了一些关于如何提问可以更有效地获取答案的方式。 有任何问题可以邮件或评论区联系： [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