咿呀 能跑就行!
Technology

咿呀 能跑就行!

作者: 辛宝Otto
最近更新: 2024/4/6
个人 Solo 播客,草稿版本的 Web Worker 播客,如果你对我聊的话题感兴趣,请互动,有机会在 Web Worker 播客上好好聊。

Recent Episodes

15-速通 lwj 访谈 nuxt3 nitro 作者 daniel

15-速通 lwj 访谈 nuxt3 nitro 作者 daniel

收听方式# 小宇宙 苹果播客 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摘要留空则使用自动生成的摘要高级设置

2023/10/1
12分钟
12-速通Syntax.fm 659 OG Image

12-速通Syntax.fm 659 OG Image

syntax.fmAI 总结以下是播客要点的摘要: 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上您想要的任何文章中。但是,您需要升级到企业帐户才能访问此功能。

2023/9/7
11分钟
11-速通 JSJ 588 介绍 Socket Supply 构建桌面、移动应用,基于 UDP 的 P2P 方案

11-速通 JSJ 588 介绍 Socket Supply 构建桌面、移动应用,基于 UDP 的 P2P 方案

本期是速通 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.devQ: GPT请告诉我,基于 udp 的 p2p 网络,大概什么样,从技术和使用场景上做一个解释。基于UDP的P2P网络是一种点对点(Peer-to-Peer)网络架构,其中通信使用UDP协议进行数据传输。与传统的基于TCP的P2P网络相比,UDP更适合实时性要求高、带宽要求低的应用场景。技术上,基于UDP的P2P网络通常采用NAT穿越技术,以克服NAT(网络地址转换)对P2P通信的限制。NAT穿越技术可以通过使用中继服务器或者使用UDP打洞等方式,使得位于不同私有网络中的节点能够直接通信,而无需通过公网IP地址。使用场景上,基于UDP的P2P网络适用于以下情况: 实时通信:UDP协议具有低延迟和高实时性的特点,适用于实时音视频通话、在线游戏等需要快速传输数据的应用场景。 大规模文件共享:P2P网络可以将文件分割成小块,并通过多个节点同时上传和下载,提高文件传输速度和可靠性。 媒体流传输:基于UDP的P2P网络可以用于流媒体传输,如直播、视频点播等,通过多个节点同时提供媒体数据,减轻服务器负载。 去中心化应用:基于UDP的P2P网络可以用于构建去中心化的应用,如区块链、文件存储等,通过节点之间的直接通信实现数据共享和交换。需要注意的是,基于UDP的P2P网络相对于基于TCP的P2P网络来说,由于UDP协议的特性,可能会面临一些挑战,如数据包丢失、乱序等问题,因此在设计和实现时需要考虑数据可靠性和传输效率的平衡。

2023/8/22
14分钟
09-速通 Syntax 647 对比 Node/Rust 基础概念

09-速通 Syntax 647 对比 Node/Rust 基础概念

《咿呀 能跑就行》是我的个人 solo 播客,草稿版本的 web worker 播客。主打随意和快速消费,如果你对我聊的话题感兴趣,想在 web worker 播客中认真讨论,欢迎和我互动。本次带读速通 20230731 发布的 Syntax.fm 647 Rust for JavaScript Developers - Node vs Rust Concepts,原时长大概30多分钟,速通大概13分钟。在比较JavaScript(JS)和Rust的生态方案时,我们可以从基本层面进行介绍,而不需要对Rust的使用经验。包管理工具包管理工具 Package Mangernode 可以使用 npm/pnpm/yarnrust 使用 Cargocargo 除了包管理,还可以运行测试,而不是 node 中的 vitest/jest/mocha/chai还可以 build your doc还可以发布 rust library还可以 run code - like npm run startmain package file Cargo.toml 类似 package.json关于 Cargo.tomlCargo.toml 是 Rust 语言中的一个配置文件,用于描述和管理项目的元数据和依赖项。在一个 Rust 项目中,Cargo.toml 文件位于项目的根目录下。它使用 TOML(Tom's Obvious, Minimal Language)格式来描述项目的配置信息。TOML(Tom's Obvious, Minimal Language)是一种用于配置文件的轻量级格式,由 Tom Preston-Werner 创建。它的设计目标是易于阅读和编写,同时保持简洁和明显的语法。TOML 的设计目标是使配置文件易于编写和阅读,同时保持简洁和明显的语法。它在 Rust 社区中得到了广泛的应用,成为了 Rust 项目中常用的配置文件格式之一。类似 yamlcargo build 构建发不到一个 rust 内部的注册表,类似 npm crates.ionode 中有不同的选项,Python中更多了,rust 只有一个。有一个 rust fork, crabCargo doccargo doc 是 Rust 语言中的一个命令行工具,用于生成项目的文档。它会根据项目中的注释和文档注释(doc comments)生成一个 HTML 格式的文档网站,以便开发者可以方便地查看和浏览项目的文档。从代码注释中提取为文档,继续看 crates.io ,每隔项目都有 readme,而且大部分都很清晰。因为生成文档太容易了。阅读 docs.rs 文档,不仅可以学习rust,还能学习这种风格,在js中也可以收益。类似 jsdoc,比 jsdoc 更容易,但需要学习语法。practice.rs 的 comments-docsrust is fully typed,类似 ts 的静态类型,也有泛型。在 ts 中的经验可以用于 rust继续看内存安全 memory safety。是个复杂话题,js中是有 垃圾回收机制的,Rust 没有垃圾回收的基础上构建内存安全。细节比较复杂,就略过了。并发concurrency,在 js 中是 single thread 单线程。Rust 支持 multi threadingPromise/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、结构、变量。

2023/8/4
12分钟
07-速通 SoftSkills 355

07-速通 SoftSkills 355

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

2023/7/10
17分钟
06-速通 Syntax.fm 635 lightningcss

06-速通 Syntax.fm 635 lightningcss

音频听不了?可通过下面方式收听:本期音频时长 14 分钟,较短,可安全收听。介绍本期我们带读 《syntax.fm 635 - lightning css》Lightning CSS 是一个 Rust 编写的 CSS 工具,类似 JS 领域的 EsBuildtheir 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

2023/7/10
14分钟
03-速通 syntax.fm 633 讲 ORM

03-速通 syntax.fm 633 讲 ORM

音频听不了?可通过下面方式收听: 小宇宙 苹果播客 [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

2023/6/28
14分钟
02-速通 syntax.fm 632 讲注册域名

02-速通 syntax.fm 632 讲注册域名

音频听不了?可通过下面方式收听: 小宇宙 苹果播客 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 accessname cheap 主要还是附加服务email / website/ ssl certificatevps core/memeory/dabase 主播拥有的域名:40/59 cloudflare 全是一口价、成本价无溢价,推荐相关链接 Syntax.fm 632

2023/6/27
12分钟
00-咿呀,能跑就行!新想法,个人solo播客

00-咿呀,能跑就行!新想法,个人solo播客

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

2023/6/26
5分钟