Xianqiao's Site

TapUI

2023-12-25T12:14:51.980000Z

定位：移动端 UI 库

原生 UI：

已有：

组件：

action-sheet
accordion(dy-collapse)
alert(dy-modal?)

Vercel & Next.js

2023-12-04T04:14:07.498000Z

Vercel 使用 other 前端框架时需要自己配置缓存策略

v0 是 AI 生产代码

静态资源 Vercel Edge Network

SSR Serverless Functions

Next.js

仅客户端渲染使用 `dynamic`(React.lazy) // 不使用动态导入如何实现？
SSG 使用 getStaticProps，只运行在构建时
SSR 使用 getServerSideProps，运行在每次请求
动态路由 getStaticPaths，只运行在构建时
客户端获取数据 SWR
[…id].js 匹配所有路由，片段以数组形式
fallback 路由
API Routes 无服务器 API
Preview Mode

特点

前端代码后端运行
预渲染的页面只包含最少代码
水合（React 特性）

水印

2023-11-16T10:30:36.716000Z

用于追踪和定位

图像水印：

低对比度水印
显式水印（更多的是威慑作用）
特殊编码，例如水波纹
频域噪声水印（如何实现？）

文字水印：

文字替换
插入零宽空格

独立房屋设计

2023-11-10T08:40:50.450000Z

筑梦-构筑梦想房屋

核心功能

地基设计
户型设计

界面类似 Adobe Illustrator

台词中最长成语接龙

2023-11-11T18:16:21.878000Z

https://github.com/mantou132/javascript-learn/blob/master/chengyu.js

例子：

0-45-0-12-0-23-0-24-0=> 12-24-45

算法：

遍历成语词典使用正则找出所有成语以及成语所在位置
遍历所有成语，并分别向前、向后找所有成语链（需要记录链上成语防止重复查找）
找出最长链

AutoHotKey

2023-09-19T20:57:53.790000Z

让其工作在大多数游戏中：https://www.autohotkey.com/boards/viewtopic.php?f=7&t=11084

admin 运行
将游戏设置成窗口或无边框，避免
延长按键时间
编译成通用名称的 exe 文件
用第二个用户运行脚本
使用虚拟机或远程操作运行游戏

Prioritized Task Scheduling API

2023-09-13T21:38:39.378000Z

https://medium.com/airbnb-engineering/building-a-faster-web-experience-with-the-posttask-scheduler-276b83454e91

https://web.dev/optimize-long-tasks/

目的：方便取消、调整任务优先级

异步，安排在宏任务中

user-blocking 和 user-visible 类似，只是后者排在前者后面

background 类似 requestIdleCallback() ，最低优先级

scheduler.yield() 让任务连续执行，不被第三方代码插入任务

时空旅行

2023-08-06T03:32:45.613000Z

用一段话描述想去的场景，然后游戏带你来到这个场景，开始你想做的任何事情，比如找路人对话、欣赏风景。

简单一些的 Web 版：生成静态场景（MJ 能生成吗？还是从真实照片中选择），找人对话（语音 AI 可以指定角色吗？）。

Denius

2023-05-08T07:10:10.133000Z

调研：

https://cn.eagle.cool/blog/post/must-have-ai-tool-for-designer-2023

一个基于 AI 的创意设计套件 // 基本上是对 Midjourney 的扩展

推广：社交平台机器人

Twitter
Reddit

// @ 机器人传送命令可以做图

// 使用三次后需要进行绑定才可继续使用

// 账号的免费额度用完后需要充值

产品设计要点：

用户体验 Web 优先
优化输入

让用户快速学会使用 Prompt，进行创作
集成 GPT、Whisper
从其他设备中经过同步后导入

输出准备

裁剪、压缩、转换

兼顾后续工作

作为原料继续创作：Canva、Illustrator、Photoshop
作为成品出售或者发布
作为资产导出

创意设计

艺术设计
LOGO 设计

转矢量
加背景
适配各种平台

平面广告设计

缩放
局部修改

Sprite 生成

实用工具

使用文本来编辑图片
转矢量图
缩放
涂鸦
背景移除

AIFine

2023-05-07T03:41:56.204000Z

打造自己的 AI 工作台。

所有 AI 工具都在这里，对话机器人、作图、图片翻新上色、制作音频视频、游戏资产、翻译、文章勘误修饰总结......，一个账号、一个 App 解决你的问题。

潜在问题：

AI 工具是否存在 API，不存在 API 的可能需要无头浏览器操作、沙箱嵌入？
AI 工具并发量，如果AI 工具对 IP、账号有限制，则需要多服务器、多账号

前端：

主界面

添加 AI 工具

筛选 AI 工具
AI 介绍，计费规则

充值（简单的先充值到余额，按使用自动扣除；）

支付宝
微信

提现

未登录用户可免费使用，针对 IP 限制次数

使用历史，起计费监督作用，用户可查询自己如何使用

API：OAuth 认证，不使用 AIFine 也能具备所有 AI 工具的能力，比如命令行工具中

后端：

账户系统

余额

商户端账户，微信、支付宝
各种 AI 工具的访问 API

管理平台：

用量统计，预算
结算系统

监控平台：

各个服务的健康状态，延时、资源占用、当前使用频率

定价：平价，原 AI 服务什么价格就收什么价格，未来添加自己的（开源 AI、自己训练的专用领域 AI） AI 工具

平台：

主要：Web
次要：桌面端 App
最后：移动端 App、Widget 显示用量作为快捷入口
小程序由于入口太深、可能过不了审核先不用管

AI 工具

2023-12-01T07:24:41.028000Z

运行模型：https://replicate.com/

Prompt：https://prompthero.com/

https://github.com/just-talks/tech-talks/discussions/42

这些都是基于 ChatGPT？

💡 写作：Copy.ai
👮 虚拟说话头像：Synthesis.io
👩‍⚖️ AI 律师：DoNotPay.com
💬 自动化社交媒体发文：Repurpose.io
📃 写论文： Jasper Ai
🖋 记会议笔记：Fireflies、Otter
🎤 文本语音：Descript
⌨️ 改写文章：Quillbot
🦸🏿‍♂️ Chatbot：Kuki.ai
✉️ 写营销邮件：Addy Ai

读论文：

Coral AI
PopAI

语言转文本：

Whisper（收费 API、开源模型）

文字转语音：

Microsoft 的 AI （API）

对话：

ChatGPT（API）

文字转图片：

MidJourney（暂无 API，非官方）
DALL-E
OpenJourney
Pollinations
Stable Diffusion（开源模型）
Scribble Diffusion（需要简单手绘）
Adobe Firefly
Iconifyai

文字转音频：

Mubert

文字转视频：

Runway

图片转视频：

Kaiber
Boolv（生成产品宣传视频）

图片转高清：

real-esrgan

图片转像素画：

https://pixel-me.tokyo

图片转矢量：

VectorizerAI

照片翻新：

Restorephotos

文字转 PPT：

Tome
Copilot

文字转代码：

CopilotX

视频转口音：heygen

中国法律助手：law-cn-ai.vercel.app

https://openprompt.co/

https://chat.forefront.ai/

Bevy

2023-05-07T03:35:14.626000Z

bevy 的 add_system 函数作为参数 // impl IntoSystemAppConfig

system 支持各种方法 // impl_system_collection 宏

system 的参数支持自由组合 // impl_system_function 宏

system 的 Query 参数支持自由组合 // impl_anytuple_fetch 宏

app.run() 会替换 app 为空（原因未知），不执行 run 就可以一直用 update 手动调度更新

Reflect 组件让 world 能被序列化成 scene，例子

Bevy 例子：https://dev.to/sbelzile/rust-platformer-part-1-bevy-and-ecs-2pci

非官方书 https://bevy-cheatbook.github.io

ECS 是扁平数据结构，但可以逻辑分层 Parent and Children，移除实体时需要双向删除

Bevy 的默认清理策略是每帧清除事件，但使用双缓冲，以便前一帧更新的事件保持可用

Bundle 是创建实体的一种便利，不能直接查询

全局访问的数据适合创建成资源，只在 ECS 模式中访问时创建成组件

系统参数类型：

Res/ResMut 访问资源，可使用 Option
Query 访问实体，可使用 Option、Or<(…)>，With/Without，不需要访问数据时放在第二个参数中

Added Changed 过滤变化，ChangeTrackers 主动检测，由 DerefMut 实现
特殊的移除检测：RemovedComponents ，Option

Commands 管理资源和实体、组件，EventWriter/EventReader 发送和接收事件
Local 绑定到系统的资源，必须实现 Default 或者 FromWorld 用于自动初始化
ParamSet 查询多个

系统能并发运行，.after/.before 指定系统运行顺序

app.add_state 状态能指定系统，系统中能以资源 State 访问，切换 state 后需要 input.rest，能指定为系统运行条件

【0.10 没有了，用 SystemSet 替代】 Stage 是硬同步点，同一个 Stage 上的系统并发运行完才会进入下一个 Stage，内置 Stage：

PreStartup, Startup, PostStartup
First, PreUpdate, Update, PostUpdate, Last
Extract, Prepare, Queue, PhaseSort, Render, Cleanup

FixedTimestep::step(1.0) 指定固定刷新周期

play() 播放音频

interaction 组件判断按钮状态

动画？

秒杀系统

2023-05-07T03:35:28.613000Z

https://xie.infoq.cn/article/e0e97967cd2d421f23e4494b7

特点：限时、限量、限价；活动预热；持续时间短；

技术特点：瞬时并发量非常高；读多写少；流程简单；

阶段：预热阶段；秒杀阶段；结算阶段；

提升性能方案：

异步解耦，将整体流程进行拆解，核心流程通过队列方式进行控制
限流防刷，控制网站整体流量，提高请求的门槛，避免系统资源耗尽
资源控制，将整体流程中的资源调度进行控制，扬长避短

Redis 分片缓存库存数据

使用 OpenResty 查询

ChatGPT

2023-10-06T03:16:17.568000Z

快速开始一个自己的类 ChatGPT 服务：https://hacks.mozilla.org/2023/07/so-you-want-to-build-your-own-open-source-chatbot/

Hugging Face 运行的模型需要 GPU 加速，llama.cpp 使用 CPU
LLaMA 2 模型开源且商业可用，上下文窗口 4096 个 token，大约 3000 个单词
使用嵌入（all-mpnet-base-v2）和矢量搜索（FAISS）来扩展（LangChain）聊天机器人的知识

prompt：https://volnet.hashnode.dev/gpt-prompt-dev-deeplearningai

4.0

插件系统 // 能用自然语言编写插件？
在沙盒中运行的代码解释器
开源检索插件

使用 GPT-3 模型 // 当前闭源，通过 OpenAI 的 API 调用

使用 2021 年前互联网上所有数据训练出来的

应用：

儿童教育
生活助手：常识、分析 Idea
代码助理：实现思路和示例
文案助理：纠错、润色文章，提炼文章要点
产品 FQA：根据文档回答客户问题

危险：

虚假信息横行
人和人更加疏远、虚假

Meta 提出一个更先进的语言模型 Toolformer，能够训练自己来调用 API、做数值操作或其他操作，最终实现自动定酒店等操作

Web3 后端开发

2023-05-07T03:35:30.579000Z

去中心化需要很多硬件资源，在区块链上存东西是要付钱的，所以现在只存核心数据到区块链上

以太坊交易的状态保存在交易凭证（TransactionReceipt）中，而且即使交易被12次确认也不意味着交易在业务层面的成功，这只代表交易已经被矿工打包并在以太坊虚拟机上执行

合约：运行在以太坊的应用，既然是应用那么就包含编码、编译、部署、执行等方面，智能合约的出现使得人人都可以拥有自己的代币（Token Coin）

区块是交易的载体，而交易则记载了账户间的信息互动。智能合约则是运行在以太坊虚拟机（EVM）上的应用

通过智能合约和区块链进行交互

web3.js 通过RPC调用与本地节点通信

工具：

Truffle: 提供了一个使用以太坊虚拟机编译和测试智能合约的开发环境，用作项目中的构建依赖项
Remix IDE: 编写和使用智能合约的完美环境，我们可以使用它直接从浏览器创建、修改和执行智能合约。它更像是一个编辑器
MetaMask: 一个 Chrome 扩展程序，可让您从浏览器连接到以太坊区块链网络
Ganache: 提供了一个本地区块链环境来测试您的智能合约

Vite Plugin Font Chunk

2023-10-30T11:39:08.352000Z

优化中文字体加载性能：分块懒加载

类似标准：https://www.w3.org/TR/IFT/

Rust CLI：

将源字体按 unicode-range 切割成多块
跨平台

Python: https://github.com/fonttools/fonttools

Rust: https://github.com/simoncozens/rust-font-tools

Plugin：

生成 CSS 并插入 html

Win10 任务栏不能正常工作

2023-05-07T03:35:32.896000Z

不能搜索，不能右键访问 App，不能打开 Action Center

https://answers.microsoft.com/en-us/windows/forum/all/taskbar-action-centre-and-start-menu-not-working/6e8305d8-b671-4c79-a7d0-81f885dd0686

// win+r -> ctrl + shift + enter 以管理员打开 cmd

DISM.exe /Online /Cleanup-image /Restorehealth
sfc /scannow

// win+x 以管理员打开 powsershell

Get-AppxPackage Microsoft.Windows.ShellExperienceHost | foreach {Add-AppxPackage -register "$($_.InstallLocation)\appxmanifest.xml" -DisableDevelopmentMode}
Get-AppXPackage | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register "$($_.InstallLocation)\AppXManifest.xml"}
重启

// win+r 打开 control

Troubleshooting Windows Store Apps

Microsoft Store 更新 Apps

CheatEngine 基础教程

2023-05-07T03:35:38.115000Z

系统有读取其他进程内存的 API，比如 ReadProcessMemory

https://www.bilibili.com/read/cv12546549/

地址空间配置随机化（ASLR）: 用模块名+偏移量的形式记录地址

esp 一直表示栈内存顶部地址的指针，也就是栈顶数据的内存地址

eip 这个寄存器很特殊，它存储了当前执行的代码的位置

gdb 调试原理

2023-05-07T03:35:35.115000Z

https://zhuanlan.zhihu.com/p/336922639

gdb 常用指令：run, next, step, quit, break n, delete n, enable n, disable n, clear, where, bt, set args, show args, watch

gcc -g 加入调试信息

方式一：以子进程使用 ptrace 系统函数启动被调试程序

方式二：gdb 使用 ptrace 函数将被调试程序收养为子进程

被调试程序的所有信号都被父进程 gdb 来接管，并且父进程 gdb 可查看、修改子进程的内部信息，包括：堆栈、寄存器等

断点调试：替换为 INT3 指令让程序中断，汇编代码中 PC 指针(一个内部指针，指向即将执行的那行代码)执行到 INT3 指令时，于是操作系统就发送一个 SIGTRAP 信号给被调试程序，gdb 会首先接收到这 SIGTRAP个信号，把 INT3 替换为断点链表中原来的代码，把 PC 指针回退一步，也即是设置为指向原行。

数字操作的溢出行为

2023-05-07T03:35:37.998000Z

https://doc.rust-lang.org/std/num/struct.Saturating.html

当涉及整数的算术操作超过最大值或最小值时，结果设置为最大值或最小值。这被称为"饱和"

https://doc.rust-lang.org/std/num/struct.Wrapping.html

当溢出或超过最大值或最小值的任何数量被缠绕到相反的极端。这被称为"包装"。

https://docs.rs/checked/latest/checked/

超过最大值或最小值保留 None 结果，这称为 Checked

WebRTC NACK 和 PLI

2023-05-07T03:35:41.516000Z

https://its301.com/article/qq_41681715/109821871

TCP 协议栈都要等对端的 ACK 确认，才能确定是否进行报文重传或者发送下一包数据

RTCP 当确认没有收到包是会像发起者发送 NACK 报文，让对方重发

// 所以 webrtc-rs 需要读取数据包，才能经过默认拦截器，才能自动发送 NACK

在网络环境不是太好的情况下，比如网络拥塞比较严重，丢包率可能比较高，简单实用 NACK 申请重传的机制，这样就会有大量的 RTCP NACK 报文，发送端收到相应的报文，又会发送大量指定的 RTP 报文，反而会增加网络的拥塞程度，可能导致更高的丢包率，导致接收端解码失败，导致花屏等马赛克现象。这时采用申请I帧的方式可能会解决马赛克等现象，申请的I帧方式主要PLI（Picture Loss Indication）和FIR（Full Intra Request）两种方式。由于I帧是关键帧，是图像内编码，图像比较大，占用较多的带宽，接收端在申请I帧时，不要刷I帧刷的太频繁（一般不小于5s），为了避免这种现象，有些厂家对接收端刷I帧刷的比较频繁，忽略掉部分FIR报文，即不响应部分I帧申请

QOI 格式

2023-05-07T03:35:41.518000Z

https://qoiformat.org/qoi-specification.pdf

真彩图片无损压缩

帧：

QOI_OP_INDEX // 新颜色会存到索引中的索引值
QOI_OP_DIFF // 和前一个像素差
QOI_OP_LUMA // 和前一个像素差
QOI_OP_RUN // 连续相同像素数
QOI_OP_RGB // 差异大、无索引的新颜色
QOI_OP_RGBA // 差异大、无索引的新颜色

多人视频通讯架构Mesh/MCU/SFU

2023-05-07T03:35:40.914000Z

https://blog.p2hp.com/archives/8329

// 需打开防火墙 UDP 端口

只有使用 WebRTC 才能传输音/视频流 // insertable mediastream 可以从帧制作视频流

MediaRecord + WebSocket 不行

SKU 筛选问题

2023-05-07T03:35:45.281000Z

https://juejin.cn/post/6844904196349640718

多个商品根据参数和规格进行筛选

解法：

根据每个可供选择商品 SKU 画出无向图（两两节点互相连）
同一个参数下的不同规格互相连（选了红色时允许选其他颜色）
映射到邻接矩阵（所有可能值的二维矩阵，每个节点连接的节点写入矩阵）
筛选（选中一个值时，其他可选项能在矩阵中看出来）

Rust 性能分析

2023-05-07T03:35:45.233000Z

https://juejin.cn/post/7045159135343542280

On-CPU 的性能分析为了找出占用CPU时间多的任务或者函数，进而找出程序的性能瓶颈

linux 下使用 pref 命令

macOS 下使用 dtrace

FlameGraph 可视化调用栈

Rust编译器默认加入了 DWARF 调试信息

Off-CPU 性能分析是为了分析进程花在等待上的时间，等待包括被I/O请求阻塞，等待锁，等待timer，等等

https://github.com/AtheMathmo/cpuprofiler

Bloom Filter

2023-05-07T06:04:57.693000Z

静态全文搜索：

搜索内容集成到搜索引擎中

原始方法：inverted index，缺点体量大

https://www.stavros.io/posts/bloom-filter-search-engine/

https://en.wikipedia.org/wiki/Bloom_filter

https://github.com/tinysearch/tinysearch

https://arxiv.org/abs/1912.08258

布隆过滤器的原理是，当一个元素被加入集合时，通过 K 个散列函数将这个元素映射成一个位数组中的 K 个点，把它们置为 1。检索时，我们只要看看这些点是不是都是 1 就（大约）知道集合中有没有它了：如果这些点有任何一个 0，则被检元素一定不在；如果都是 1，则被检元素很可能在。

// 每篇文章有个位数组，每个单词通过散列函数映射到数组中的几个点并标记成 1，搜索时只需要在散列计算判断那几个点是否为 1 即可。

布隆过滤器的典型应用有：

数据库防止穿库。 Google Bigtable，HBase 和 Cassandra 以及 Postgresql 使用 BloomFilter来减少不存在的行或列的磁盘查找。避免代价高昂的磁盘查找会大大提高数据库查询操作的性能。
业务场景中判断用户是否阅读过某视频或文章，比如抖音或头条，当然会导致一定的误判，但不会让用户看到重复的内容。
缓存宕机、缓存击穿场景，一般判断用户是否在缓存中，如果在则直接返回结果，不在则查询db，如果来一波冷数据，会导致缓存大量击穿，造成雪崩效应，这时候可以用布隆过滤器当缓存的索引，只有在布隆过滤器中，才去查询缓存，如果没查询到，则穿透到 db。如果不在布隆器中，则直接返回。
Web 拦截器，如果相同请求则拦截，防止重复被攻击。用户第一次请求，将请求参数放入布隆过滤器中，当第二次请求时，先判断请求参数是否被布隆过滤器命中。可以提高缓存命中率。Squid 网页代理缓存服务器在 cache digests 中就使用了布隆过滤器。Google Chrome浏览器使用了布隆过滤器加速安全浏览服务
Venti 文档存储系统也采用布隆过滤器来检测先前存储的数据。
SPIN 模型检测器也使用布隆过滤器在大规模验证问题时跟踪可达状态空间。

柯里化函数类型

2023-12-07T06:48:47.105000Z

https://medium.com/codex/currying-in-typescript-ca5226c85b85

// 函数范型，部分开始参数
function curry<FN extends (...args: any[]) => any, STARTING_ARGS extends PartialParameters<FN>>(
  targetFn: FN,
  ...existingArgs: STARTING_ARGS
): CurriedFunction<STARTING_ARGS, FN> {
  return function (...args) {
    const totalArgs = [...existingArgs, ...args];
    if (totalArgs.length >= targetFn.length) {
      return targetFn(...totalArgs);
    }
    return curry(targetFn, ...(totalArgs as PartialParameters<FN>));
  };
}




// 柯里化后的返回值，参数（NEW_ARGS）是剩余参数的一部分，如果参数不够则需要迭代
type CurriedFunction<PROVIDED extends any[], FN extends (...args: any[]) => any> = <
  NEW_ARGS extends PartialTuple<RemainingParameters<PROVIDED, Parameters<FN>>>,
>(
  ...args: NEW_ARGS
) => CurriedFunctionOrReturnValue<[...PROVIDED, ...NEW_ARGS], FN>;

// 没有剩余参数时返回函数返回值，否则返回多了已有参数的柯里化函数

type CurriedFunctionOrReturnValue any> = RemainingParameters<

PROVIDED,

Parameters

> extends [any, ...any[]]

? CurriedFunction

: ReturnType;

// 转换为可选元组

type PartialTuple =

// If the tuple provided has at least one required value

TUPLE extends [infer NEXT_PARAM, ...infer REMAINING]

? // recurse back in to this type with one less item

// in the original tuple, and the latest extracted value

// added to the extracted list as optional

PartialTuple

: // else if there are no more values,

// return an empty tuple so that too is a valid option

[...EXTRACTED, ...TUPLE];

// 获取部分参数（可选）

type PartialParameters any> = PartialTuple>;

// 获取剩余参数，提供的参数类型必须符合期望参数类型

type RemainingParameters =

// if the expected array has any required items…

EXPECTED extends [infer E1, ...infer EX]

? // if the provided array has at least one required item

PROVIDED extends [infer P1, ...infer PX]

? // if the type is correct, recurse with one item less

//in each array type

P1 extends E1

? RemainingParameters

: // else return this as invalid

never

: // else the remaining args is unchanged

EXPECTED

: // else there are no more arguments

[];

素数伴侣

2023-05-07T03:35:56.407000Z

若两个正整数的和为素数，则这两个正整数称之为"素数伴侣"

判断素数：

不是偶数且不能被5整除且不能被小于它的平方根（因为大于平方根的数的另一个乘数必须小于它，小于平方根的数已经被测试过了）的所有奇数整除
正则非贪婪匹配再判断是否整除 !/^.?$|^(..+?)\1+$/.test(Array(num+1).join('1'))

匈牙利算法：

将输入的奇数偶数分两组，建立二分图，两两相组合能得到素数的就赋 1；
再建立全局的连接表 modd 和 meven，记录该奇数（偶数）连接的偶数（奇数）；
然后遍历每个奇数，每个奇数在寻找合适的偶数时，建立一个 visit 记录在该轮查找中已经搜过的偶数，匈牙利的原则就是"先到先得，能让就让，不能让就拜拜"，所以在确定合适偶数对象时，如果该偶数没有被配对过，直接绑定，若它被配对了，那就让配对它的那个奇数再去找其他的偶数进行配对，以此类推进行递归，若到了某个位置发现找到了，则这条新的配对方案建立，比之前的配对个数多了 1，若没找到，则保持原先的方案。

工业互联网产品

2023-05-07T03:35:56.708000Z

行业厂商：https://www.honeywell.com.cn

ERP：企业资源规划

MES：制造执行系统

WMS：库存管理系统

PLM：产品生命周期管理

工程师软技能

2023-05-07T03:36:00.471000Z

批判性思考并提出合理的论点，如果我们没有充分考虑原因和后果，这可能会带来风险

熟练掌握"可转移"技能，包括：语言、框架、堆栈、数据结构（数组、对象、模块、哈希）、算法（搜索、排序）、架构（设计模式、状态管理）甚至性能优化（例如缓存、延迟加载等）

专注于用户，其余的将随之而来

打造技能的深度与广度，T 型

通用代码与特定代码，避免未来重构

在维护项目中学习

设计文档的重要性，不仅仅要需求类的文档，也可以有代码实现的设计文档

拒绝的力量，过度承诺是一种责任

坚持优先处理技术债务

工作与生活的平衡，专注于深度工作

localStorage

2023-05-07T03:35:53.289000Z

localStorage 由于是同步的，浏览器为了保证性能，所以是异步持久化的，在两个标签页不同步，同步有百来毫米延迟。

NESBox 平台

2023-12-22T05:11:11.089000Z

类似产品：

UI 参考 Steam、App Store、LOL

类似 Unity 的游戏引擎

攻能：

Dashboard

挑选游戏开始（实际是开私人房间）

游戏详情
设置

昵称
自定义按键
画质增强

多人游戏

公共房间，可以选择进入
上下机
换房主
换游戏
房间聊天

文字聊天
语音聊天

用户系统（当前 WebSocket 的使用方式导致不满足云原生应用要求，接 MQ 可解决）

自己喜欢的游戏
游戏评论
游戏存档，可继续游戏
好友系统

聊天
邀请

TV 版功能：

Library
Recents
Rooms
Room

上下文菜单

连接/断开语音
邀请好友
保存截图

设置

语言

数据库：https://app.sqldbm.com/PostgreSQL/Edit/p214596/

技术栈：

后端

diesel-pg
juniper
actix-web

websocket 消息订阅

webrtc 语音通话

gemjs
nes_rust_wasm tetanes

Mobile：Flutter
Desktop：Tauri

遇到的问题：

根据游戏 ROM hash 进行状态储存，使用 Caches API，截图、日期存在 URL 参数中，避免使用复杂的 indexedDB，缓存 Wasm.memory 或者 Rust 对象二进制序列化
传输 Canvas 流会压缩导致颜色失真，使用 qoi 压缩传输帧。曾尝试过 WebCodec 媒体流，它有音画不同步的问题。
视频延时大，根据 Ping 值使用降帧方案，并禁用 WebRTC 的顺序传输，修剪帧传输
语音系统，使用服务器 WebRTC 转发
添加金手指功能，游戏组件庞大，拆分组件
Tauri 的问题：MacOS localstorage、加载白屏
消除噪音（不需要改变播放速度），远端音画同步
统一渲染滤镜到前端（WebGL）
支持自制 js 游戏，沙盒保证安全（暴露 OffscreenCanvas，AudioContext 和 WebGPU）

字体渲染
音频输出
动画
资源压缩
半像素渲染
2d 碰撞？

支持自制 wasm 游戏（同步、资源无限制）

安全性 // 有些意外导入，例如 Function 构造器
使用 bevy_ecs
input resource
schedule
save state(bevy example, 依赖 bevy_render, bevy_assets) // wasm memory
render plugin

层级，变换
文本
贴图

audio plugin
渲染顺序 // 当前用的 z 轴比较
五子棋 AI // 博弈树极大极小值 alpha-beta 剪枝搜索
2d 碰撞？

支持街机(ROMs 下载)，Emscripten 编译 C++ 模拟器

Libretro 的 wasm4：

无胶水代码 // 如何渲染到屏幕？
类似 NES 平台，资源有限制
支持 rollback netcode // 预测，内存回滚

8bit font: https://load.retroemulator.com/fonts/8bit.woff2

NES 图像：

背景

8x8 为 tile，16x16 为 block
一个 tile 从 chr 中索引到，chr 最多存 256 个 tile，用命名表来索引 // 总共 960 字节的索引
一个背景 4 个调色板，1 个调色板 4 个颜色，包括一个共享颜色，16 字节 // 所以最多 10 个颜色
一个 block 最多 1 个调色板，属性表用来表示 block 使用的调色板 // 64 字节的调色板索引
2 个命名表形成滚动效果

Sprite

也是一个 Tile 8x8，一般是多个 Sprite 组成一个角色
也有自己的 CHR 页，一套 4 个调色板
一个 Sprite 需要 Y 坐标、Tile 索引、属性（调色板、翻转、和背景相对深度）、X 坐标 4 个字节
总共 256 字节空间记录所有 Sprite 的位置和状态 // 所以最多 64 个 Sprite，多于 64 时只会保存最新存在内存中的，所以会闪烁

MacOS 禁用手柄按钮打开 launchpad：

defaults write com.apple.GameController bluetoothPrefsMenuLongPressAction -integer 0
defaults write com.apple.GameController bluetoothPrefsShareLongPressSystemGestureMode -integer -1

Rust 临时声明周期扩展

2023-05-07T03:35:52.916000Z

https://doc.rust-lang.org/reference/destructors.html#temporary-lifetime-extension

fn main() {
  let foo = &String::new();
  foo;
  // compile error
  let bar = String::new().as_bytes();
  bar;
}

zhihu:

能编译通过的例子中有两个value，一个是String，一个是&String，后者是个 ordinary pointer，后者被赋值给了一个变量，前者没有赋值给任何变量，因为前者一直被后者指向，所以在后者的生存期内前者一直存活，所以前者在当前语句结束后、在当前语句块结束前一直存活。再看不能编译通过的例子，也有两个value，一个是String，一个是&[u8]。后者是个two-word pointer，指向前者管理的堆内存地址而不是指向前者本身。所以前者既没有被赋给一个变量（绑定一个alias）也没有被其他指针指向，所以rust认为它的生存期该结束了，决定销毁这个value，同时决定free掉这个value所管理的堆数组，这样以来第二个value 就变成 dangling pointer了。所以编译无法通过。下面返回&'static [u8]这个就更好理解了，因为那个那个数组字面量的内容和长度已经在编译时刻就确定了，指定了’static，编译完成的时候这个数组是放在静态数据区的，而不是运行时刻在栈上构造的。返回一个指向静态数据区的指针当然没问题。

Node 程序员对 Rust 的疑问

2023-05-07T03:35:16.873000Z

dyn Foo 和 impl Foo 的区别是代码量和运行速度？

let x: &dyn Foo = &Impl;

用于引用的转化操作？

let v: &mut i32 = Box::new(0).as_mut();

下面的冒号相当于 ts 的 extends？

struct Bar(T);

trait FromStr: Sized {}

Unity

2023-05-07T03:36:10.482000Z

火锅下楼梯：

https://www.youtube.com/watch?v=nPW6tKeapsM

Entity & Component：

Camera

Player

update:

Time.deltaTime

Time.timeScale

KeyCode

SpriteRenderer // 渲染图片

BoxCollider2D // 碰撞体

OnCollisionEnter2D

normal // 法线

other // 碰撞目标

RigidBody2D // 自由落体

Animator

Parameters:

Boolean

Trigger // 触发动画

Controller: PlayerController

BaseLayer: idle <-> run // 按条件执行转换

PlayerHurt: SpriteRenderer color change // 执行 3 次后自动退出

Audio

FloorManager

Prefab: Nails // 样板

tag

Canvas // 具有类似 DOM 的事件系统

Text

Image: HpBar

active

ReplayButton

onClick

System：

Scene

Init

Loop

Time

Assets

点是否在多边行中

2023-05-07T03:36:10.771000Z

在拓扑学中，若尔当曲线（英語：Jordan curve）是平面上的非自交环路（又称为简单闭曲线，英語：simple closed curve）。若尔当曲线定理（英語：Jordan curve theorem）说明每一条若尔当曲线都把平面分成一个"内部"区域和一个"外部"区域，且任何从一个区域到另一个区域的道路都必然在某处与环路相交。

面积和判别法：判断目标点与多边形的每条边组成的三角形面积和是否等于该多边形，相等则在多边形内部。

夹角和判别法：判断目标点与所有边的夹角和是否为360度，为360度则在多边形内部。

引射线法：从目标点出发引一条射线（例如水平射线），看这条射线和多边形所有边的交点数目。如果有奇数个交点，则说明在内部，如果有偶数个交点，则说明在外部。

取半开半闭区间，即将顶点算入线中，但是每条线只计算其一边的顶点（若为闭区间，则会重复计算顶点）

https://github.com/substack/point-in-polygon

https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html

2D 碰撞检测

2023-05-07T03:35:55.707000Z

https://jelly.jd.com/article/6006b1045b6c6a01506c87dc

Broad phase 能为你提供有可能碰撞的实体列表。这可通过一些特殊的数据结构实现，它们能为你提供这些信息：实体存在哪里和哪些实体在其周围。这些数据结构可以是：四叉树（Quad Trees）、R树（R-Trees）或空间哈希映射（Spatial Hashmap）等

Narrow Phase：

外接图形判别法

轴对称包围盒（Axis-Aligned Bounding Box），即无旋转矩形：判断任意两个（无旋转）矩形的任意一边是否无间距，从而判断是否碰撞
圆形碰撞：通过判断任意两个圆形的圆心距离是否小于两圆半径之和，若小于则为碰撞
圆形与矩形（无旋转）：通过找出矩形上离圆心最近的点，然后通过判断该点与圆心的距离是否小于圆的半径，若小于则为碰撞
圆形与旋转矩形（以矩形中心点为旋转轴）：将画布（即 Canvas）反向旋转即转换为上述问题。

光线投射法：通过检测两个物体的速度矢量是否存在交点，且该交点满足一定条件，适合运动速度快的物体 // 例子
分离轴定理：通过判断任意两个凸多边形在任意角度（其实投影轴的数量与多边形的边数相等即可）下的投影是否均存在重叠，来判断是否发生碰撞。若在某一角度光源下，两物体的投影存在间隙，则为不碰撞，否则为发生碰撞 // 不适用于凹多边形
其他

地图格子划分
像素检测 // 先通过运算得到两者相交区域，然后只对该区域内的像素进行检测

通过将两个物体在 offscreen canvas 中判断同一位置（坐标）下是否同时存在非透明的像素
利用 canvas 的 globalCompositeOperation = 'destination-in' 属性。该属性会让两者的重叠部分会被保留，其余区域都变成透明。因此，若存在非透明像素，则为碰撞

乘、除、求余运算

2023-05-07T03:35:55.012000Z

常数乘法：如果乘数是 2 的幂，那么乘法可以看出是按位左移

x*14 => (x<<4)-(x<<1)

2 的幂除法右移，但不能推广到任意常数

并行除法器电路：

xor: 异或

fadd: 乘积累加运算

https://leetcode-cn.com/problems/divide-two-integers/solution/liang-shu-xiang-chu-by-leetcode-solution-5hic/

固定步长（除数）
指数递增步长

云原生

2023-05-07T03:36:14.403000Z

https://jimmysong.io/

云原生本身甚至不能称为是一种架构，它首先是一种基础设施，运行在其上的应用称作云原生应用，只有符合云原生设计哲学的应用架构才叫云原生应用架构

云原生技术有利于各组织在公有云、私有云和混合云等新型动态环境中，构建和运行可弹性扩展的应用。云原生的代表技术包括容器、服务网格、微服务、不可变基础设施和声明式 API。这些技术能够构建容错性好、易于管理和便于观察的松耦合系统。结合可靠的自动化手段，云原生技术使工程师能够轻松地对系统作出频繁和可预测的重大变更。

云原生系统的设计理念如下:

面向分布式设计（Distribution）：容器、微服务、API 驱动的开发；
面向配置设计（Configuration）：一个镜像，多个环境配置；
面向韧性设计（Resistancy）：故障容忍和自愈；
面向弹性设计（Elasticity）：弹性扩展和对环境变化（负载）做出响应；
面向交付设计（Delivery）：自动拉起，缩短交付时间；
面向性能设计（Performance）：响应式，并发和资源高效利用；
面向自动化设计（Automation）：自动化的 DevOps；
面向诊断性设计（Diagnosability）：集群级别的日志、metric 和追踪；
面向安全性设计（Security）：安全端点、API Gateway、端到端加密；

云原生应用程序特征：

微服务
健康报告
遥测数据
弹性
声明式的，而不是命令式的

坦克大战

2023-05-07T03:36:09.611000Z

2D FC 坦克大战重制版 // 放在个人 "xBox" 中

画面尺寸 4:3
WebRTC 联机
URL 带房间名共享
自动创建房间名

挑战：

碰撞检测（每帧检测？）
图片（使用代码绘制？）

玩家坦克（L1，L2，L3）
敌方坦克（L1，L2，L3）
主堡
草
水
冰
砖
铁

音效（bfxr）

学习 Cypress

2023-05-07T03:36:15.486000Z

https://docs.cypress.io/guides/references/best-practices

测试的执行上下文时 Cypress Web 测试节目，测试目标在测试上下文的某一个 iframe 中

捆绑了 jquery 并暴露出 jquery 的 API

使用重试和超时策略包装 DOM 查询，then 获取结果（一些条件测试也要放到 then）

cy 的各种操作其实是添加任务，然后顺序执行，所以不要写 async/await

Cypress.$ 同步查询

contains('tr', TEST_NAME)

查询 dom 只能简单的穿 shadow，如一个类名、tag name，使用 get().find().find() 获取 shadow dom

@layer

2023-05-07T03:36:18.402000Z

https://ishadeed.com/article/cascade-layers/

CSS 级联：

Origin and Importance
Inline Styles
Layer
Specificity
Order of appearance

样式规则优先级：

Important Browser Styles
Important User Styles
Important Developer Declarations
Normal Developer Styles
Normal User Styles
Normal Browser Styles

layer 覆盖会忽略内部选择器权重

将第三方 css 分配给 layer: @import url(flickity.css) layer(vendors);

极端很容易，平衡很难

2023-05-07T03:36:16.070000Z

春节期间玩大乱斗，随到一把青钢影，在一遍一遍送死的时候这位哲学大师突然说了这句台词，顿时让我陷入了沉思，之前简单的处理一些事情的时候方法是不是太极端了呢，是的，太极端了。

提供 ESM 加载的服务

2024-01-15T00:04:05.711000Z

https://jspm.dev 按源文件加载依赖模块（依赖多的话会比较慢，依加载瀑布比较明显），但必须正确的 package.json 导出，加载自定义元素只能用这个，不然依赖的模块不能复用有可能导致重复定义。另外，这个服务的延时好像比较大，刚发布的版本可能只有部分功能可用，生产环境必须带版本号，不更新了

https://esm.sh 各个依赖打包构建，也会转换 CJS，但似乎哪里有问题 // deps 指定依赖，external 指定外部依赖，exports 支持 Tree Shaking，bundle 构建成单个文件，?no-bundle 禁用打包，deno 兼容, ?raw 禁止编译（raw.esm.sh）

https://cdn.skypack.dev 深度依赖不构建了，比如 duoyun-ui 的元素不构建 lit-html，不更新了

await import('https://cdn.skypack.dev/ts-morph') 会错误，但 esm.sh 是正常的；

await import('https://cdn.skypack.dev/duoyun-ui/elements/keyboard-access') 会在 esm.sh 和 skypack 都失败。

社会规则与人性的冲突

2023-05-07T03:36:17.777000Z

在社会体系中，有许多规则，众多法律法规和道德约束，其中的一些规则在学校中就有所学习，又有一些会在电视、网络等媒体中宣传。

而人性则是生来便具备的，不需要学习，人性是利己的，它只有一条规则——让自己活下去，其他的则都可以不在乎。

一些社会规则和人性是有冲突的，比如"说话算数"，人在某个时刻说出的话可以是出于人性，而兑现自己的承诺是违背人性的，只有道德高尚的人才能做"算数"。

所以，人们在做事情时不能全依赖社会规则。

IM 系统设计

2023-05-07T03:36:19.015000Z

https://www.cnblogs.com/yexiaochai/p/15782253.html

多媒体消息

长链接、心跳

集群负载均衡 // 避免重连

消息时序&一致性：分片，群 id，分布式递增消息 id

消息丢失问题、已读：回执、批量回执

Self-Profiling API

2023-05-07T03:36:21.533000Z

https://calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/

性能分析有两种方法：

Instrumented (or "structured" or "tracing") Profilers, in which an application is invasively instrumented (modified) to add hooks at every function entry and exit, so the exact time spent in each function is known
Sampled Profilers, which temporarily pause execution of the application at a fixed frequency to note ("sample") what is running on the call stack at that time

Self-Profiling API 使用采样分析，虽然不准确，但是开销小

UI 库开发检查项

2023-05-07T03:36:20.121000Z

行为定义

可选项

样式自定义

注释/装饰器

相对尺寸

规范颜色

对比度

书写方向

可访问性

键盘访问

国际化支持

拿手菜

2023-05-07T03:35:43.328000Z

青椒炒肉

青椒胡萝卜

小米椒花菜

小米椒土豆

黄瓜火腿

清炒白菜苔

四季豆炒肉

青椒炒蛋

韭菜炒蛋

剁椒肉丝汤

丝瓜汤

煎饼

捞面

太平天国

2023-05-07T03:36:23.690000Z

童年的多人游戏做成电子版

通过猜拳/掷骰子的方式决定玩家单次回合的胜负，胜者可以提示自己的防御力（城墙）/攻击力（炮筒和子弹）

攻破城墙之后可以选择摧毁炮筒/子弹还是基地，基地被推完才算出局

入侵风险：被攻击方可以申请结盟一起抵御入侵者，盟军会被消弱攻击力

入侵限制：田字里面的4个字写（笔画）完了才可以攻击他人

入侵奖励：获取出局玩家的剩余炮筒和子弹

邀请方式：二维码扫描进房间 // 游戏保存：一个房间只进行一局游戏，开始下局游戏时进行跳转？

玩家人数：2-56789？

开发平台：Web

视觉风格：Q 版 3D

离线机器人：无脑堆防御