2024年汇总-今日阅读-工作相关内容

2024-10-11

JSON中不存在NaN, 会被输出为null
JSON.stringify({a: null / null}) => ‘{“a”:null}’
该问题常见于python和js的对接过程 nan、inf 和 -inf可参考 Python的json模块文档https://docs.python.org/zh-cn/3.11/library/json.html#infinite-and-nan-number-values

2024-09-14

Antd的设计价值观
https://ant-design.antgroup.com/docs/spec/values-cn

2024-08-20

Stable Diffusion 工作原理
- 解释了扩展模型的原理
- 渐构这个网站看起来也可以, 有小程序. 中午可以试一下

2024-08-19

世界上的所有字母(unicode码表)
- 来自这个知乎回答如何用HTML在文字上加上带声调拼音
- 答案是利用unicode中的Combining Marks 组合字符, 将两个unicode<span>ā</span>
Node Network Devtools
- 基于CDP, 让node程序支持用chrome devtool的network选项卡调试

2024-08-18

斯坦福提供的公开课: 计算机教育中缺失的一课
- 大学里的计算机课程通常专注于讲授从操作系统到机器学习这些学院派的课程或主题，而对于如何精通工具这一主题则往往会留给学生自行探索。在这个系列课程中，我们讲授命令行、强大的文本编辑器的使用、使用版本控制系统提供的多种特性等等。学生在他们受教育阶段就会和这些工具朝夕相处（在他们的职业生涯中更是这样）。
- 因此，花时间打磨使用这些工具的能力并能够最终熟练地、流畅地使用它们是非常有必要的。
- 精通这些工具不仅可以帮助您更快的使用工具完成任务，并且可以帮助您解决在之前看来似乎无比复杂的问题。

2024-08-08

satori: 将jsx转换为svg, 进而渲染成png图片
- vercel下的项目, 通过限定支持的css语法和html元素, 来解决svg样式问题. 生成svg图片后再转换成png, 可以有效解决使用chrome生成图片运行成本高/速度慢的问题
- 这里是去哪儿使用satori + sharp生成火车票的实践

2024-08-05

咨询程序员问题价目表
epubkit, 可将网页整理为epub电子书

2024-08-01

五年前端三年面试
- 各种前端基础知识

2024-07-26

字幕截图生成器
- 上传图片后可以生成任意字幕效果

2024-07-23

图像抖动及其应用
- 直接将图像从彩色二值化降级为黑白, 会带来明显的色带. 效果很差
- 但通过引入抖动, 让颜色散布在一片区域中, 可以在低端设备上模拟出彩色的效果(eg: 单片机面板/电纸书).
- 常用方法: 阈值抖动、随机抖动、规则抖动(进阶: Bayer抖动)、Floyd–Steinberg抖动(误差扩散算法)
- 原文
- 在计算机以及数字信号处理技术发展，有限的数据位宽带来了量化误差，在相当一段时间内制约着数字系统的精度以及效果。而抖动（Dither）则是一种对信号人为加入噪声，以使量化误差随机化的手段，以避免大片不自然的信号出现。
- 最早对抖动的应用可追溯至第二次世界大战。当时，轰炸机使用装有成百上千齿轮的机械计算机进行导航和弹道计算。事实证明这些仪器在空中比在地面上表现得更为准确。工程师意识到这是因为飞机的振动使得哪些传动部件由短促的抽动变为了更加连续的运动，从而减小了行程的误差。于是他们特地在计算机中安装了振动电机以提高精度，同时，这种振动手段也被称为“dither”——源于中世纪英语动词“didderen”。如今，当你敲动机械仪表想让它指示得更准确时，其实就是在利用抖动。在现代的词典中，“dither”被定义为紧张、混乱或激动的状态，不过在此处，它是件使数字系统更接近模拟现实的好事。
- 不同算法下的抖动效果也不一样.
- 使用了相同的色彩，效果却截然不同，左侧：直接量化；右侧：Floyd–Steinberg抖动

2024-07-12

如何获取excel内表格的超链接
- 答: 另存为html后用浏览器打开, F12执行以下代码const list = [...document.querySelectorAll('tr td a')].map(item => item.href);console.log(JSON.stringify(list, null, 2))

2024-07-11

wechat-need-web
- 一个Chrome插件, 通过修改header的方式, 允许账号登录web端微信

2024-07-08

北大编译实践在线文档
- 一个别人的实现示例, 来自一个知乎回答
- 所以, 什么时候才有空写一个编译器呢
Linux入门教程
- 南大计算机系统基础课程试验配套教材
- 同时还有以下文章
  - 提问的智慧
  - 别像弱智一样提问

2024-07-04

软件的影响力体现在可以让大公司基础库为这个软件单独修改代码
- 示例: Mac OS的libmalloc库里, 就有这么一行代码(PS: 文件名是 make_tapi_happy, TAPI 是腾讯官方 API 的名称简写)
- 微信用到了这一行, 但这个明明没有任何用途, 天知道他们为啥这么用
- /* WeChat references this, only god knows why. This symbol does nothing. */
- 相关新闻: 苹果底层开源代码被发现包含兼容微信的代码

2024-06-26

利用GPT实现Excel函数编写.
示例提问: 帮我编写EXCEL函数,对于B列的第n行，在C列中查找是否有和A列第n行元素相同的元素,如果没有,返回0,如果在第m行匹配到了结果,返回D列m行的元素的值
豆包回答: =IFERROR(INDEX(D:D,MATCH(A1,C:C,0)),0) 你将这个公式放在与B列第n行对应的单元格，然后向下填充公式即可。这个公式先使用 MATCH 函数在C列中查找与A列第n行相同的元素，如果找到则返回其行号，然后 INDEX 函数根据这个行号从D列中获取对应的值，如果查找不到则 IFERROR 会返回0.

2024-06-20

通过屏蔽模块, 解除Llama 模型内置的审查策略
- 太长不看版: 运行这段代码, 可以在本地跑一个无限制的大模型

2024-06-06

Web Vibration API
- 可以通过Vibration API, 触发手机震动. 且当前大多数浏览器都支持该接口(截止2024-06-06, Safari尚不支持)
- 手机示例地址

2024-05-09

Zed基于GPT实现代码自动生成的原理
- 本质仍是prompt工程
cursor基于GPT实现代码自动生成的原理
- 本质仍是prompt工程
system
You are an intelligent programmer. You are helping a colleague rewrite a piece of code.

Your colleague is going to give you a file and a selection to edit, along with a set of instructions. Please rewrite > the selected code according to their instructions.

Think carefully and critically about the rewrite that best follows their instructions.

user
This is my current file. The selection will be denoted by comments “Start of Selection” and “End of Selection”:
1
2
3
4
5
6
7
8
9
10
// Start of Selection <这里是代码> ...(about 356 lines omitted)... <这里是代码> // End of Selection
Potentially helpful context

(no additional relevant context found)

user
Please rewrite this selection following these instructions:

Edit Prompt

<这里是用户输入的改写要求>

Selection to Rewrite
1
2
3
// Start of Selection <这里是被选中的代码部分> // End of Selection
Please rewrite the selected code according to the instructions. Remember to only rewrite the code in the selection.

Please format your output as:
1
2
3
// Start of Selection // INSERT_YOUR_REWRITE_HERE // End of Selection
Immediately start your response with ```

2024-04-28

Android的离奇陷阱 — 设置线程优先级导致的微信卡顿惨案
- 三行代码导致微信客户端的一次线上故障
- 当GetTid()为0时, setPriority会设置调用线程的优先级, 而非当前实例的优先级. 而start()方法正好是异步方法.
- 属于代码API不符合预期导致的惨案
1
2
3
Thread t = new Thread(); t.start(); t.setPriority(3);

2024-04-01

在web中实现docx的渲染
- 开发周期一个月, 1万行代码
在web中实现excel的渲染
- 同上, 但是逻辑更复杂

2024-02-23

web端各种劫持技巧汇总
- 通过劫持请求, 实现开发者工具
- 网络 API （xhr, fetch, WebSocket）
  - 性能监控、统一错误码处理
  - 添加额外 HTTP 参数（header, query）实现接口染色功能
  - 修改 Host 将接口自动转向代理服务，实现远程调试接口、Mock 数据
- 修改原型（Array.prototype.at = …）
  - polyfill 库的必备手段
- 页面跳转 API （window.open, history.go back pushState）
  - 修改跳转的目的页面
  - 自动添加页面跳转埋点
- 删除特定 API 禁用浏览器功能
  - 禁止 js 访问摄像头 navigator.mediaDevices.getDisplayMedia = null
  - 禁止 p2p 连接 window.RTCPeerConnection = null

2024-02-17

阿里云各类产品SLA协议汇总
- 可用于制定自身服务SLA时进行参考
- 阿里云serverless的SLA协议

2024-02-06

尝试基于@php-wasm/node, 使用node运行adminer. 能跑出来界面, 但有几个明确会失败的case, 无法投入正常使用. 比较可惜, 待后续官方改进吧
- bad case 列表
  - 登录完成后执行自定义SQL, 稳定失败.
  - 进入数据表详情页, 选择任意条件进行搜索时, 概率性失败
  - 似乎不能编辑数据项或者创建新数据项
- 可以考虑屏蔽掉post功能后, 作为一个查阅数据库的工具提供. 但意义不大. 后续再说吧.
WordPress/wordpress-playground项目的e2e测试示例, 可用于参考
diode-cli这个项目也是类似思路, 一年前试图基于0.2.0版本启动laravel.

2024-01-29

2024-01-17

JS的浮点数精度问题

关于浮点数精度问题最有名的案例是0.1+0.2 !== 0.3

不过这里有个现实版, Number.parseInt(`${+16.124 * 1000}`) / 1000 === 16.123, 代码目标是对16.124进行取整精确到厘(三位小数), 结果算出来少了1厘钱

如果愿意尝试的话会发现有很多这样的例子
- 16.127*1000 => 16.126
- 16.130*1000 => 16.129
- 16.141*1000 => 16.140

进一步探索发现, 上边的 bad case 会在一个范围内密集分布

/**
 * 返回整数为baseNumber, 小数为precision位的所有转换后不相等的数字列表
 */
function getAllErrorNumber(baseNumber = 10,precision=2){
    const transErrorList = []
    if( precision < 1){
        return transErrorList
    }
    const maxNumber = Math.pow(10, precision) 
    for(let i = 0; i < maxNumber; i++) {
        const iStr = `${i}`.padStart(2, '0')
        const legalNumber = parseFloat(`${baseNumber}.${iStr}`)
        if(legalNumber !== Math.floor(legalNumber * 1000) / 1000){
            transErrorList.push(legalNumber)
        }
    }
    if(transErrorList.length > 0){
    console.log(`[base][${baseNumber}]total error number => ${transErrorList.length}`)
    }
    return transErrorList
}
const allErrorList = []
for(let i = 0; i<1000;i++){
    allErrorList.push(...getAllErrorNumber(i, 2)) 
}

用脚本跑了一下, 当小数位数为2/3位时, 前1000位异常数字数分布如下(出现问题时的整数位都一样)

整数位	x.00~x.99之间的异常数字数	x.000~x.999之间的异常数字数
2	2	2
4	2	2
8	5	27
16	9	76
32	19	182
64	24	243
65	13	121
128	24	238
129	24	238
130	24	238
131	2	2
256	24	239
257	24	239
258	24	239
259	24	239
260	24	239
261	24	239
262	4	14
512	24	239
513	24	239
514	24	239
515	24	239
516	24	239
517	24	239
518	24	239
519	24	239
520	24	239
521	24	239
522	24	239
523	24	239
524	6	51

核心原因是大部分十进制下的小数不能转成有限长度的二进制值, 例如0.1在二进制下是.0001100110011...(无限循环0011)
微软总结了四点注意事项
- 在涉及单精度和双精度的计算中，结果通常不会比单精度更准确。如果需要双精度，请确定计算中的所有术语（包括常量）均以双精度指定。
  - 备注: js中没有单双精度转换问题, 所有数字(不止小数)都是双精度数
- 切勿假定在计算机中准确表示简单的数值。大多数浮点值不能精确地表示为有限的二进制值。例如， .1 是在 .0001100110011… 二进制 (它永远重复) ，所以它不能在计算机上使用二进制算术（包括所有电脑）以完全准确的方式表示。
- 切勿假设结果准确到最后一个小数位。 “true”答案与任何浮点处理单元的有限精度可以计算的内容之间始终存在很小的差异。
- 切勿比较两个浮点值，以查看它们是否相等。这是规则 3 的必然结果。数字之间几乎总是有小的差异，“应该”是相等的。相反，请始终检查数字是否几乎相等。换句话说，检查它们之间的差异是小的还是微不足道的。
按照这篇文章分析, 但凡没有自己实现基于十进制的数字运算的语言，都这种问题. 解决方案是使用对关键问题使用十进制计数. 例如decimal.js库.
缺点是性能比较差, 简单的对比结果显示计算100万次两数加法, decimal.js比原生慢500倍(decimal cost: 1234, native cost: 2)

2024-01-11

解决vue2.6升级2.7时的异常case

el-table 在 vue2.7 渲染失败问题
- 业务代码用的是 “module”: “dist/vue.runtime.esm.js”,而 element-ui 用的是 “main”: “dist/vue.runtime.common.js”，因此页面加载了两个不同的vue, 但因为只有一个vue的实例可以正常使用, 因此会导致渲染失败, 形成白屏. 指定vue指向同一个运行文件即可修复.
  via https://github.com/ElemeFE/element/issues/21984
进阶: 特定场景下, vite将vue指定为vue/dist/vue.esm.js后, 读取到其他目录下的vue/dist/vue.esm.js问题
- 改为path.resolve(__dirname, 'node_modules', 'vue/dist/vue.esm.js'), 通过绝对路径指定文件

进阶v2: 项目中包都依赖vue2, 但某一个依赖的依赖需要vue3

若项目中依赖vue3的项目需要实际执行 => 略过, 暂未想到解决方案
若项目中依赖vue3的项目不需要实际执行, 只进行编译即可 => 通过自定义依赖加载函数, 根据当前执行导入的文件动态替换vue2/3

代码示例

resolve: {
    alias: [
        // {
        //     // 升级vue3时使用用
        //     find: "vue",
        //     replacement: '@vue/compat',
        // },
        {
            find: 'vue',
            customResolver: (source, importer, options) => {
                // 通过指定vue解析算法, 解决vue2/3依赖共存时, 代码白屏问题

                // 首先解决el-table 在 vue2.7 渲染失败问题
                // 业务代码用的是 "module": "dist/vue.runtime.esm.js",而 element-ui 用的是 "main": "dist/vue.runtime.common.js"，因此页面加载了两个不同的vue, 但因为只有一个vue的实例可以正常使用, 因此会导致渲染失败, 形成白屏. 指定vue指向同一个运行文件即可修复.
                // via https://github.com/ElemeFE/element/issues/21984
                // 注: 文件本身需要使用绝对路径, 以避免相对路径时文件指向错误
                // replacement: path.resolve(__dirname, 'node_modules', 'vue/dist/vue.runtime.common.js'),
                const vue2Uri = path.resolve(__dirname, 'node_modules', 'vue/dist/vue.esm.js');

                // platforms/TreeSelect.vue 中的服务树组件需要执行特殊hack逻辑

                // @sre/service-tree中使用了@sre/common@0.1.1, 而该包引用了@element-plus/element-plus@0.1.0(该包又依赖了@element-plus/icons-vue). @element-plus/element-plus 中的代码虽然并未实际使用, 但也会阻塞编译过程, 导致白屏. 且其既要求使用vue3, 又对vue是peerDependencies依赖, 不会直接安装. 所以要通过工具包@infra/only-dependency-vue3来强制保证项目中存在vue3包. 并通过以下代码找到其位置, 在运行时进行主动替换, 确保项目可以正常运行

                // 根据工具包在node_modules中的路径, 确认其在.pnpm目录中的真实路径, 进而找到实际vue3文件的路径
                // 工具包原始地址
                // /Users/yao/www/project/platforms/node_modules/@infra/only-dependency-vue3
                const utilPackageUri = path.resolve(__dirname, 'node_modules', '@infra/only-dependency-vue3');
                // 转换成实际地址
                // /Users/yao/www/project/platforms/node_modules/@infra/only-dependency-vue3
                // ../../../../node_modules/.pnpm/@infra+only-dependency-vue3@1.0.0_typescript@5.2.2/node_modules/@infra/only-dependency-vue3
                const utilPackageRealLinkRelative = fs.readlinkSync(utilPackageUri);
                // 将相对路径转换成真实路径
                // /Users/yao/www/project/node_modules/.pnpm/@infra+only-dependency-vue3@1.0.0_typescript@5.2.2/node_modules/@infra/only-dependency-vue3
                const utilPackageRealLinkAbsolute = path.resolve(
                    utilPackageUri,
                    '..',
                    utilPackageRealLinkRelative
                );
                // 最终拼接成@infra/only-dependency-vue3 在pnpm中实际依赖的vue@3.4.5路径
                const vue3Uri = path.resolve(
                    utilPackageRealLinkAbsolute,
                    '../..',
                    'vue/dist/vue.esm-browser.js'
                );

                for (let keyword of ['@element-plus/element-plus', '@element-plus/icons-vue']) {
                    if (importer?.includes(keyword) === true) {
                        // 命中关键字才按vue3进行返回
                        return vue3Uri;
                    }
                }
                // 默认直接返回vue2的文件路径
                return vue2Uri;
            },
        },
    ],
},

2024-01-10

PAKE
- 基于Tauri 直接封装h5页面作为桌面客户端. 缺点是只支持h5, 不支持node
- EXPO也可以考虑
知乎回答对柯氏复杂度的介绍
- 随机生成5位数，得到11111和得到54176的概率相同，为什么遇到前者时我们会觉得随机算法有问题
- Kolmogorov复杂度给出了这样一种洞见: 一个序列是否 “足够随机/有规律” , 可以用 “我最短能用多短的语句描述这个序列” 来衡量, 描述能压缩得越短, 就说明规律性越强.
- 1111111111可以用10个1描述, 复杂度为3, 而5417627465只能原样讲述, 所以5417627465的复杂度更高, 更"没有规律"
- 这篇介绍写的也不错
  - 算法信息论是计算机科学的一个分支，研究 Kolmogorov 复杂性和字符串（或其他数据结构）的其他复杂性度量。
零知识证明の百万富翁问题
- 如何在AB互相不透露有多少钱的情况下, 得到AB谁的钱更多

2024-01-04

pnpm支持在package.json中通过pnpm.neverBuiltDependencies字段, 跳过指定包的preinstall、install 和 postinstall阶段.
- 用法一: 如果用不到某个包的特定依赖. 例如typeorm中的libpq, 而这个包的script脚本构建时间又极长甚至构建不成功会阻塞lock文件的生成, 可以通过该选项跳过该包的安装脚本执行
- 用法二: 流水线排障中, 若某个包安装时间过长且和最终排障目标无关, 可以在排障阶段临时略过该包的执行过程, 例如fsevent/grpc等

#what-read-today

2024年汇总-今日阅读-工作相关内容

https://www.yaozeyuan.online/2024/01/01/what-read-today/2024-工作相关/

作者

姚泽源

发布于

2024年1月1日

许可协议

（转载）望星-汪汇慧上一篇

2024年汇总-今日阅读-生活相关内容下一篇

整数位	x.00~x.99之间的异常数字数	x.000~x.999之间的异常数字数
2	2	2
4	2	2
8	5	27
16	9	76
32	19	182
64	24	243
65	13	121
128	24	238
129	24	238
130	24	238
131	2	2
256	24	239
257	24	239
258	24	239
259	24	239
260	24	239
261	24	239
262	4	14
512	24	239
513	24	239
514	24	239
515	24	239
516	24	239
517	24	239
518	24	239
519	24	239
520	24	239
521	24	239
522	24	239
523	24	239
524	6	51

整数位	x.00~x.99之间的异常数字数	x.000~x.999之间的异常数字数
2	2	2
4	2	2
8	5	27
16	9	76
32	19	182
64	24	243
65	13	121
128	24	238
129	24	238
130	24	238
131	2	2
256	24	239
257	24	239
258	24	239
259	24	239
260	24	239
261	24	239
262	4	14
512	24	239
513	24	239
514	24	239
515	24	239
516	24	239
517	24	239
518	24	239
519	24	239
520	24	239
521	24	239
522	24	239
523	24	239
524	6	51

2024年汇总-今日阅读-工作相关内容

2024-10-11

2024-09-14

2024-08-20

2024-08-19

2024-08-18

2024-08-08

2024-08-05

2024-08-01

2024-07-26

2024-07-23

2024-07-12

2024-07-11

2024-07-08

2024-07-04

2024-06-26

2024-06-20

2024-06-06

2024-05-09

Potentially helpful context

Edit Prompt

Selection to Rewrite

2024-04-28

2024-04-01

2024-02-23

2024-02-17

2024-02-06

2024-01-29

2024-01-17

2024-01-11

2024-01-10

2024-01-04

整数位	x.00~x.99之间的异常数字数	x.000~x.999之间的异常数字数
2	2	2
4	2	2
8	5	27
16	9	76
32	19	182
64	24	243
65	13	121
128	24	238
129	24	238
130	24	238
131	2	2
256	24	239
257	24	239
258	24	239
259	24	239
260	24	239
261	24	239
262	4	14
512	24	239
513	24	239
514	24	239
515	24	239
516	24	239
517	24	239
518	24	239
519	24	239
520	24	239
521	24	239
522	24	239
523	24	239
524	6	51