我的快乐！

syntax.fm AI 总结 以下是播客要点的摘要： * OG图像详情可见共享链接时用于社媒预览的Open Graph图像。它们是使用具有“OG： image”等属性的元标记定义的。 * 动态生成OG图像有不同的方法 ，包括使用Satori/Vercel OG、Cloudinary等包，或使用Puppeteer或Playwright以编程方式截屏。q'a'z2 * Satori允许从React组件生成图像，但在CSS支持方面存在限制。Cloudinary涉及通过URL中的命令组装图像，这可能很复杂。 * 使用Puppeteer或Playwright对动态生成的页面进行屏幕截图是一种简单的方法。这允许完全的CSS控制，但需要先渲染页面。 * 要考虑的因素包括支持自定义字体、布局处理、边格、渲染性能和镜像存储/缓存。 * 示例讨论了为博客文章、视频、播客等生成图像。可以包括作者照片、文本、日期等动态数据。 总而言之，播客讨论了什么是OG图像，动态生成它们的不同技术，如Satori、Cloudinary和无头浏览器，以及每种方法的权衡。 内容介绍 本次聊的主题是： og image 基础概念 facebook 2010 推出的 open graph 方案，为了社交媒体的 link 更有表现力，展示社交网站元数据。 能够 preview images。对用户来说为了 SEO。 OG:xxx 有很多，比如文章 视频 照片等。图片的比例不同网站要求不同，比较奇怪。 创建和验证 如何测试 OG 标签在不同网站下的展示效果，也就是如何测试效果？ 测试 og，有软件，有程序 polypane 测试，就很方便，是一个服务。 The browser for ambitious web developers.Build better websites in less time with a stand-alone browser that makes your site more responsive, more accessible and more performant. Save hours on each project, love every minute of it. 雄心勃勃的Web开发人员的浏览器。 使用独立浏览器在更短的时间内构建更好的网站，使您的网站响应更快、更易于访问且性能更高。在每个项目上节省时间，热爱它的每一分钟。 对于 Twitter 和 Facebook 有专门的调试工具 OFFICIAL DEBUGGERS * Facebook * Twitter * Linkedin * Structured Data 这些链接可能会用得上。 如果文章更新了需要更新信息，也有地方主动刷新缓存，重新拉取。 探索动态 SVG 和 Puppeteer 方案 帮助你生成 OG 也有很多动态生成方案： * vercel/satori: Enlightened library to convert HTML and CSS to SVG 框架动态生成，传递参数，使用 jsx 生成动态 svg * 图片视频压缩 Cloudinary 涉及通过URL中的命令组装图像 * 也可以使用 puppeteer 来渲染截图，围绕动态截图，用了 puppeteer 的 sls 版本 * Cloudflare Puppeteer 文档 很强，在 worker 中使用 puppeteer * 主播就做了一个动态的观察网址和效果 地址 * 当然提供缓存支持，不用重复操作，也是按需操作 * 也可以使用 E2E 来做截图，比如 Playwright 知识点引导 og image 比较正式的一个网站介绍 Open Graph protocol ogp.me 开放图协议使任何网页都成为 社交图中的丰富对象。例如，这在Facebook上使用以允许 任何网页具有与Facebook上任何其他对象相同的功能。虽然存在许多不同的技术和模式，并且可以组合 总之，没有一种技术可以提供足够的信息 丰富地表示社交图谱中的任何网页。开放图协议 以这些现有技术为基础，为开发人员提供一件事 实现。开发人员的简单性是开放图协议的一个关键目标，它 为许多技术设计决策提供了信息。 文章和拓展链接 * meta dev 的文章介绍 developers.facebook.com * meta tags Meta Tags Toolkit - Preview, Edit, and Generate * Vercel 的 og 介绍 vercel * 有一些不同的实现和 debugger 工具 ogp.me * Canva api 设定，开发者文档 Yoast SEO是WordPress的插件之一，允许内容制作者在其帖子中添加元标签，包括标题和描述。这些会显示在Google搜索结果中，并将页面的内容广播给潜在读者。 Yoast SEO还允许您将OG图像添加到WordPress上您想要的任何文章中。但是，您需要升级到企业帐户才能访问此功能。

本期是速通 JSJ 588 播客 《How to Build Peer-to-Peer Mobile and Desktop Apps with Socket Supply》 嘉宾是：你不知道的js 作者，目前在 Socket Supply 目前在 advocating for the open web platform 倡导开放网络平台 介绍的这个 Socket Supply 的工具，希望一套代码，支持不同的平台 one code base, solve the problem with kind of the multi-platform. web 技术构建桌面、移动端应用，从十几年前开始看，已经有了一些玩家： * PhoneGap -> apache cordova * nativescript / ionic / react native / tauri / electron 都在试图创建 runtime 包装 web 应用，来实现 app 在不同的原生平台处理。Socket Supply 也加入了其中，提供了开源的运行时通过 open runtime , warps around a web app like a pwa 从而实现上架各平台。 Capacitor建立在Cordova上，这是一个15 +年前的代码库，专为移动设备编写，尽管它确实将Electron用于桌面，但这正在采购整个第二个项目，并且两者结合起来会产生大量的复杂性。Socket 是针对移动、桌面、无头和 Web 从头开始构建的，发明了尽可能少的新 API。更重要的是，Socket专注于采用CSP等Web标准来沙盒原生API，并实现点对点等现代网络。 本产品的特点： * 嫌弃人家老，有历史包袱，说自己新。这是特点的一部分，另一方面，网络部分有创新，独一无二的，是 P2P 网络，不鼓励和前端分开的独立后端。 * 不支持分离的后端进程，就放到 web view 中就完事，所以体积非常小，比 electron / tauri 要小的多。 * 这个运行时有完整的的文件访问、蓝牙、网络等。不能在浏览器里完整使用网络，因为 api 不允许 * 网络协议这里，设计了完整的 serverless p2p 协议，真正的无服务器，由 socket 交流，而不需要服务端支持。 * 做 p2p 的有很多，他们搞了一个协议，真正实现0服务器指令。发现网络通过 udp 为啥是一个 game changer？因为现在的应用都需要后端，需要数据库、存储等。 商业模式介绍。作为基建不需要付费，如果愿意支付分析工具的专业知识，客户分析、性能分析等。为更专业的技能付费，更方便的技能，比如一键部署到商店等。 目标客户是谁，所有公司，大公司，小公司？ 都可以用，可以同时使用。全面上云，支付的费用很高。增加点新的支出，同时运行两种架构，是可行的，做 ab 测试，最后结果可能是大幅减少的一些云服务。 从 s3/db/function 等迁移到 p2p ，细节很多。从实际上看，从云端转为 p2p 需要更长的时间来迁移，也需要 a/b 并行来操作。 I think this is way beyond the depth of what we should get to on ths podcast.用了播客所不能承载的技术细节，听不懂。 使用到了 Web3 技术吗？ 没有使用 web3 的技术，更像是 web3 技术之前的方案，或者叫 web 2.5 用到了 webscoket/web rtc 是吧？ 没有。web stream / web socket / webrtc 不能满足他们建立 p2p 的要求，所以从基础上就是完全使用的 udp 的方案。 ipv6 是我们的救世主吗？ 答案是不行， ipv6 的 nat 遍历很糟糕，至少是基于 udp 的 p2p 他们对 local first 有极大的热情，组建了一个社区。localfirstweb.dev Q: GPT请告诉我，基于 udp 的 p2p 网络，大概什么样，从技术和使用场景上做一个解释。 基于UDP的P2P网络是一种点对点（Peer-to-Peer）网络架构，其中通信使用UDP协议进行数据传输。与传统的基于TCP的P2P网络相比，UDP更适合实时性要求高、带宽要求低的应用场景。 技术上，基于UDP的P2P网络通常采用NAT穿越技术，以克服NAT（网络地址转换）对P2P通信的限制。NAT穿越技术可以通过使用中继服务器或者使用UDP打洞等方式，使得位于不同私有网络中的节点能够直接通信，而无需通过公网IP地址。 使用场景上，基于UDP的P2P网络适用于以下情况： 1. 实时通信：UDP协议具有低延迟和高实时性的特点，适用于实时音视频通话、在线游戏等需要快速传输数据的应用场景。 2. 大规模文件共享：P2P网络可以将文件分割成小块，并通过多个节点同时上传和下载，提高文件传输速度和可靠性。 3. 媒体流传输：基于UDP的P2P网络可以用于流媒体传输，如直播、视频点播等，通过多个节点同时提供媒体数据，减轻服务器负载。 4. 去中心化应用：基于UDP的P2P网络可以用于构建去中心化的应用，如区块链、文件存储等，通过节点之间的直接通信实现数据共享和交换。 需要注意的是，基于UDP的P2P网络相对于基于TCP的P2P网络来说，由于UDP协议的特性，可能会面临一些挑战，如数据包丢失、乱序等问题，因此在设计和实现时需要考虑数据可靠性和传输效率的平衡。

介绍 from 听悟 辛宝Otto 通过录制视频版本的播客，分享了他的个人思路和近期的生活变化。他提到了自己被裁员后的心态调整和休息时间，以及宅在家中做喜欢的事情，如学习新技术、骑自行车、看视频和读书。他还表示目前不急于找工作，倾向于找一些初创型的小公司，并希望有机会从事开发者运营等工作。最后，他提到和其他被裁员的同事相比，他感觉自己的状态最好，能够完全放松。 时间轴 00:00 裁员后的心态和宅属性 06:49 工作日的时光和就业形势 08:59 播客的状态和规划

《咿呀 能跑就行》是我的个人 solo 播客，草稿版本的 web worker 播客。主打随意和快速消费，如果你对我聊的话题感兴趣，想在 web worker 播客中认真讨论，欢迎和我互动。 本次带读速通 20230731 发布的 Syntax.fm 647 Rust for JavaScript Developers - Node vs Rust Concepts，原时长大概30多分钟，速通大概13分钟。 在比较JavaScript（JS）和Rust的生态方案时，我们可以从基本层面进行介绍，而不需要对Rust的使用经验。 包管理工具 包管理工具 Package Manger node 可以使用 npm/pnpm/yarn rust 使用 Cargo cargo 除了包管理，还可以运行测试，而不是 node 中的 vitest/jest/mocha/chai 还可以 build your doc 还可以发布 rust library 还可以 run code - like npm run start main package file Cargo.toml 类似 package.json 关于 Cargo.toml Cargo.toml 是 Rust 语言中的一个配置文件，用于描述和管理项目的元数据和依赖项。在一个 Rust 项目中，Cargo.toml 文件位于项目的根目录下。它使用 TOML（Tom's Obvious, Minimal Language）格式来描述项目的配置信息。TOML（Tom's Obvious, Minimal Language）是一种用于配置文件的轻量级格式，由 Tom Preston-Werner 创建。它的设计目标是易于阅读和编写，同时保持简洁和明显的语法。TOML 的设计目标是使配置文件易于编写和阅读，同时保持简洁和明显的语法。它在 Rust 社区中得到了广泛的应用，成为了 Rust 项目中常用的配置文件格式之一。 类似 yaml cargo build 构建 发不到一个 rust 内部的注册表，类似 npm crates.io node 中有不同的选项，Python中更多了，rust 只有一个。有一个 rust fork， crab Cargo doc cargo doc 是 Rust 语言中的一个命令行工具，用于生成项目的文档。它会根据项目中的注释和文档注释（doc comments）生成一个 HTML 格式的文档网站，以便开发者可以方便地查看和浏览项目的文档。 从代码注释中提取为文档， 继续看 crates.io ，每隔项目都有 readme，而且大部分都很清晰。因为生成文档太容易了。 阅读 docs.rs 文档，不仅可以学习rust，还能学习这种风格，在js中也可以收益。 类似 jsdoc，比 jsdoc 更容易，但需要学习语法。practice.rs 的 comments-docs rust is fully typed，类似 ts 的静态类型，也有泛型。在 ts 中的经验可以用于 rust 继续看内存安全 memory safety。是个复杂话题，js中是有 垃圾回收机制的，Rust 没有垃圾回收的基础上构建内存安全。细节比较复杂，就略过了。 并发concurrency，在 js 中是 single thread 单线程。Rust 支持 multi threading Promise/async-await Rust 中叫 feature。 Rust 有 async-await 单线程中，和js很像。 谈到了 await 关键字出现的位置和js 不同。 有时候看 Rust 能看到很多 javascript-like 的代码。 Rust 没有 try..catch，处理异常类似模式匹配，有点想 switch 总结来说，Rust 中的错误处理方式使用模式匹配来处理错误，这种方式更加安全和可靠。与传统的 try-catch 机制相比，它可以在编译时捕获到潜在的错误，并提供更好的代码可读性和可维护性。 import 导入。导入语法不同，Rust先导入模块在使用具体方法，类似 Python，js中无法使用这种推导。具体双冒号和斜杠的用法就忽略。 在 js 中都是对象，所以我们 a.b.c 就能访问对应的数据、功能。在 Rust 中使用 :: 双冒号 high level 表述： 什么地方不同？ * 技术选择更快乐，使用 Rust 提供的足够，很多东西不需要选择。 * Rust 有时候像 Typescript/JavaScript 基本类型13种，包含大量整数类型。两种不同的 flow type。后面可以继续讲，比如类型type、结构、变量。

音频听不了？可通过下面方式收听： * 小宇宙 * 苹果播客 IPFS 这一期 Syntax 邀请到了 nodemailer 的作者。老哥是一个爱沙尼亚人，难怪口音是这样的。 他们一起聊了很多 email 的技术话题。nodemailer 这个库已经持续维护了 13 年了，从早期 Node.js 0.9x 时候就开始了。目前每周下载 280w 令人尊敬是因为持续开源迭代、mail 技术本身就很复杂。 作者谈到 email 早在 50 年前就有了。提到了 SPF/DMARC 等 也谈到了 mail 为什么可以商业化、如何做、有哪些坑。 相关链接 * Syntax 646

音频听不了？可通过下面方式收听： 介绍 本期尝试介绍 Soft Skill 播客和 355 期内容。 soft skill 播客是 每周建议，软件开发者在技术领域遇到的非技术事情。 本周两个问题，以下是中文直译 问题一 我的建筑师太忙于他的孩子了！在过去的几个月里，他的孩子遇到了很多学校和医疗问题，他最终为了照顾他们而付出了很多努力。这会导致会议被重新安排或安排在遥远的未来，这导致一些需要更多关注的大型项目的时间表延迟。我不想粗鲁地坚持认为他把公司放在家庭之上，但他需要推动组织协调，而不是他的孩子！我不知道他什么时候有空，不得不做额外的工作或参加重要的会议而没有他作为后备，这让我感到压力很大！ 大致关键词：平衡、优先级、公平对话、找经理、资源分配、异步沟通、倾斜资源等。 问题二 你能帮我了解这里发生了什么吗？我被安排了一个“绩效改进计划”（PIP），从我第一次审查时的负面反馈中，我很清楚，我根本没有达到所要求的水平的技能。我没有立即寻找新职位，而是决定花一些个人时间来锻炼自己和心理健康，并利用绩效改进计划的剩余时间来为自己的情感和经济做好准备。我没有放手，但我也没有投资于绩效改进计划。在我最终审查的前几天，我辞职了，而不是被解雇。当我辞职时，管理层似乎真的很困惑和愤怒。如果他们无论如何都要解雇我，他们为什么会这么难过？特别是一个人开始回溯并假装我不会被解雇。 大致关键词：赔偿金、礼貌和法律要求、do better、PUA、立刻跑路、尝试一下再跑路、你值得更好的。 相关链接 * Episode 355

音频听不了？可通过下面方式收听： 本期音频时长 14 分钟，较短，可安全收听。 介绍 本期我们带读 《syntax.fm 635 - lightning css》 Lightning CSS 是一个 Rust 编写的 CSS 工具，类似 JS 领域的 EsBuild their tagline is an extremely fast CSS parser, transformer, bundler, and minifier. 他们的标语是一个非常快速的CSS解析器、转换器、构建工具和压缩器。 作者是 the creator of parcel，因此对开发者体验还是比较满意的，也让人信任。 比如 * css颜色，不同色域，更多颜色的支持 * 嵌套语法 * 更新的浏览器兼容列表，前缀 * css color function * css module * css layer * text decoration 主播提到 should we be using lightning CSS in Vite to make it even faster? 结果 Vite v4.4 就说 Experimental support for Lightning CSS 开始提供支持了。 早在去年的 ViteConf 上猫头老哥就提到未来可能会使用 LightniingCSS 替换 PostCss，这里我有个图。 相关链接 * lightning css 网站 * Vite v4.4 开始支持 lightning css 文档 * syntax 635 lightning css

音频听不了？可通过下面方式收听： * 小宇宙 * 苹果播客 * [IPFS]ipfs://bafybeicgf6whp52nfwuhtmxov2rxof6s3pqomuxaw7xxfmxsnncvbbr3ja 本期音频时长 7 分钟，很短，可安全收听。 介绍 还有听友聚会，面基约饭两个新朋友！ 近期使用了不同的数据库服务，之前提到过 strapi/sqlite/laf/mongoDB 等等。最近把国内的一个服务商也用起来了 Postgres 的托管服务，memfiredb.com，谈了谈使用感受和延伸想法 忘了提的是本期播客可以在苹果播客上进行收听，我已经成功收录和托管了。 相关链接 * 提供 postgres 服务的 Memfire

音频听不了？可通过下面方式收听： * 小宇宙 * 苹果播客 * [IPFS]ipfs://bafybeicfc2hmjse2k2w75whz37tzj36mpeo6s6cxrne4235i7vb6whjns4 本期音频时长 9 分钟，较短，可安全收听。 介绍 最近使用 laf 写了一套 CURD 页面和接口，把常用的工具弄好了，拿到英文字幕到中文翻译是流畅的了。 最近考虑定制折叠小扇子，打算搞搞定制周边，可以去程序员聚集的地方发一发，比如西二旗、后厂村、线下技术大会 和听友群里的 3 个听友一起聚餐，认识了新朋友。吃饭聊了很久。 相关链接 无

音频听不了？可通过下面方式收听： * 小宇宙 * 苹果播客 * [IPFS]ipfs://bafybeia2wyzfjxirwtztk5bo46pqbangfbxyxglvaf3qqhy6c22wao5p4a 本期音频时长 14分钟，稍长，可安全收听。 介绍 本期带读 syntax.fm 《wtf is an orm》，介绍和数据库有关的 ORM。Object Relation Mapping ORM,对象关系映射 * 主播认为即便不用现成的 ORM，随着业务发展也会沉淀自己的ORM * 1971年 IBM 就有 ORM 的概念了 * ORM 一般支持多种数据库 support multiple types of databases * 和关系数据库 mysql/postgres/sql server 等，NoSQL 也需要数据的 shape 约束。schema/model for type safty * prisma 的流行和问题。own dsl * sequelize 不支持 no sql support sqlite 快速实现 * objection.js 没用过。7k star，持续了半年，常规支持 * knex 没提，其实 strapi 用到了 * drizzle 推特很火，0依赖，lightweight 。http,work in serverless 支持 tcp 链接、支持不同的js运行时 deno/node/cloudflare workers/fastify/alibaba * mongoose -shape of your data。聚合 * typeorm - from nest.js/ also auth/web hooks, service * waterline * 优化、控制权、给出 sql 方案、必须要学习orm语法 * migration 迁移，变化db结构 相关链接 * syntax 633 * drizzle

音频听不了？可通过下面方式收听： * 小宇宙 * 苹果播客 * ipfs ipfs://bafybeiclcqjdwtlqjbdq2r5pulcuwmbypsxak26ht3tkscnguls5zc3ai4 本期音频时长 13 分钟，较短，可安全收听。 介绍 最近 Google Domain 打算卖掉了，由此 Syntax.fm 两位主播，就聊起这个话题。 评判不同的的域名注册商，可以从 ux/dns/privacy/price 等领域考虑。 * a domain name needs to look up, or mail-mx verified * not same,name server and regstrar * all dns in one spot * domain name privacy, free * everyone can be a domain registrar 域名注册商，交钱就可以 * 好的注册商应该team client access name cheap 主要还是附加服务 email / website/ ssl certificate vps core/memeory/dabase * 主播拥有的域名：40/59 * cloudflare 全是一口价、成本价无溢价，推荐 相关链接 * Syntax.fm 632

音频听不了？可通过下面方式收听： * 小宇宙 * 苹果播客 * [IPFS] 发不出，官网看吧 本期音频时长 11 分钟，较短，可安全收听。 介绍 最近发现了一些新玩意，sqlite的实践，分享出来。对前端来说 SQLite 不是很熟悉，使用 BetterSqlite3 配合 ORM 我最近使用 Strapi + SQLite 存储了一些信息。 本期主要聊 Sqlite 在 Serverless 领域有新的消息， Cloudflare D1 产品的介绍 相关链接 * SQLite 天生是 Serverless * SQLite的文艺复兴 * Cloudflare D1 * Strapi 支持 SQLite

音频听不了？可通过下面方式收听： * 小宇宙 * 苹果播客 * [IPFS]ipfs://bafybeidabx2hpmkeft7n6gaa4jdh2e7eese7zxh4owtk3rz6miobghsore 本期音频时长 5 分钟，很短，可安全收听。 介绍 最近工作很苦，多个发声的渠道排解消极情绪。因为 《Web Worker 播客》 还是相对认真、低频的，关注人数也多了，有一些不成熟的技术想法会有顾虑，不如新开个人solo音频播客，草稿版本的 Web Worker，主打随意和快速消费。 未来的主要内容大致有：老外的音频播客、新鲜的讯息、想认识的技术和嘉宾前期调研等等 本期内容主要是介绍节目背景和定位，以及起名字。 播客的名字，咿呀来自杰伦的《流浪诗人》，能跑就行表明了我的态度。It works! 相关链接 * Web Worker播客 * 周杰伦-流浪诗人