官网第一章节 al.fg-games.co.jp

展示了最近的一些思考，过去经历的事情，当下的心理状态，对未来的一些期待。

文字稿 blog.ijust.cc

文字版本 blog.ijust.cc

- antfu 的年演讲，集合的理论，交集、并集，让你的开源项目更成功！ - b 站官方搬运 www.bilibili.com

- 猫头老哥是 vite 负责人，Matias Capeletto ， patak - B 站搬运视频 www.bilibili.com - 详细展开 vite 的五条哲学思考，行动准则，解释自己做的行为和未来的思考方式

- Vite 大的要来了，Rustify 锈化 Vite - Rolldown 要来了 - b 站搬运视频 www.bilibili.com

收听方式# * 小宇宙 * 苹果播客 * IPFS 介绍# lwj = learn with jason 视频播客 官网 learnwithjason.dev 当期视频 youtube 地址 国内搬运 b 站地址 嘉宾 daniel roe 是 nuxt3 nitro 的核心维护者 补充内容： 04:18 补充一下， 造 nitro 这个轮子主要是为了能让生产环境下的 nuxt 跑在各个 runtime 下 (通过 preset)，包括但不限于 node，deno，bun 或者 vercel 等 edge 上。 另一个原因是 nitro 可以把 node_modules 依赖也打到生产环境下 (像 spa 打包一样)，可以提高部署的速度，同时加快 edge 类运行时的冷启动时间。 当然也支持了开发时的 hmr (注意是服务端的 hmr) 最后因为用的文件路由，所以 dx 会比传统服务框架好很多。 辛宝 - WebWorker: 嗯嗯，是啊，最近有了新感受，打算再更新一期 封面图 点击选择文件 留空则使用文章中的第一张图片 标签 短链接 此文章将可通过以下链接访问 blog.ijust.cc 摘要 留空则使用自动生成的摘要 高级设置

收听方式# * 小宇宙 * 苹果播客 * IPFS 介绍# 看完了 Elon Musk 的传记，再看他的一些访谈，更容易了，这里带读最近的一个访谈。 * 马斯克的视频播客访谈

收听方式# * 小宇宙 * 苹果播客 * IPFS 介绍# * 最近还是比较松弛和放松，尝试完善自己想做的东西 * 做了播客的管理后台。vue3 + laf 写 CURD，独立做后端系统 * 做了单机版本的 RSS 阅读器，indexedDB + vue3，学会了不少 tailwind 的用法 * 读完了 伊隆马斯克传，废弃忘食，心流状态 * web worker 播客两周年了，关注破 4k 了，不容易 * 未来说不定可以讨论独立开发、产品运营

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、结构、变量。