昨天在B站刷到一位叫“鱼皮”的Up的视频，内容是介绍面向广大程序员发起的“码神挑战”答题活动。想要证明自己的“编程实力”的同学可以去看看，答题的同时巩固一下自己的编程知识，同时收获一份快乐～ 😆

点击此处开始挑战。

P.S.

已通关，学无止境！（全程开发者控制台工具没关过～有几关没解出来，切到移动端视图跳过去的）

公司有一个Life平台，登录之后可以查看饭卡的余额和消费记录等数据。但体验下来，觉得这个平台有诸多需要改进的地方：一是Life平台后端的Token有效期非常短，没多久就失效要重新登录；二是前端没有适配移动端，操作不便；三是金额消费和充值没有动账提醒，无法实时查看消费情况。

为了解决上述诸多不便，花时间用Python实现了一个数据实时爬取、更新、统计、动账推送的脚本。利用Cron定时任务，在一般时段设置频率为半小时执行一次数据同步任务，在饭点高峰时段每分钟执行，一旦监测到有新的动账记录，会通过PushBullet将动账相关信息发送到手机上。

目前服务端部署在了一台Root了的随身Wi-Fi上的Linux Deploy里，刚好可以把每个月用不完的流量分担出去一点。

同时，也为随身Wi-Fi的后台写了一个插件，可以手动刷新查看当前的账户资金情况和最近的一条交易记录。

目前唯一的不足：受限于国内厂商系统推送政策，PushBullet需要一直挂在后台运行，才可以收到推送消息；而且，尽管已经设置了PushBullet省电策略为“无限制”了，但切到后台后，仍然有概率会延迟几分钟才可以收到推送通知，打开App后是可以立即接收到的，未来可能需要看看有什么省事的通知替代方案。

9小时体验评价：质量还是一如既往高，无论是美工场景虫物设计还是音乐音效，亦或是手柄的振动反馈。唯一的槽点，游戏翻译仍有待加强。

IEEE 754（IEEE Standard for Floating-Point Arithmetic，即IEEE二进制浮点数算数标准），定义了表示浮点数的格式（包括-0）与反常值（denormal number），无穷Infinity与非数值（NaN，Not a Number）等数值表示规则和方法 ^[1]。

二进制浮点数表示法

JS使用IEEE 754双精度64位二进制格式来表示数值类型 ^[2]。在IEEE 754标准中，一个双精度64位数字包含以下几个部分（从左往右）：

• sign（符号位，占用1bit），表示这个数是正/负数，0表示正数；1表示负数
• exponent（指数位，占用11bit），表示将这个浮点数以科学计数法形式展示的指数
• mantissa（有效数字位，占用52bit），表示这个浮点数以科学计数法形式展示的底数

二进制、十进制互相转换

回顾一下，二进制和十进制互相转换的方法：

二进制转十进制：例如一个二进制整数：01101101，转换为十进制的运算过程如下：

$$0 \times 2^7 + 1 \times 2^6 + 1 \times 2^5 + 0 \times 2^4 + 1 \times 2^3 + 1 \times 2^2 + 0 \times 2^1 + 1 \times 2^0 = 109$$

得到 $(1101101)_2 = (109)_{10}$。

十进制转二进制：例如十进制数109，转换为二进制的运算过程如下：

$$\begin{align*} 109 \div 2 &= 54 \quad &\text{余 } 1 \\ 54 \div 2 &= 27 \quad &\text{余 } 0 \\ 27 \div 2 &= 13 \quad &\text{余 } 1 \\ 13 \div 2 &= 6 \quad &\text{余 } 1 \\ 6 \div 2 &= 3 \quad &\text{余 } 0 \\ 3 \div 2 &= 1 \quad &\text{余 } 1 \\ 1 \div 2 &= 0 \quad &\text{余 } 1 \end{align*}$$

得到 $(109)_{10} = (1101101)_2$。

十进制转二进制：对于小数例如0.8125，使用“乘2取整法”：

$$\begin{align*} 0.8125 \times 2 &= 1.625 &\Rightarrow&\quad \text{取整 } 1 \\ 0.625 \times 2 &= 1.25 &\Rightarrow&\quad \text{取整 } 1 \\ 0.25 \times 2 &= 0.5 &\Rightarrow&\quad \text{取整 } 0 \\ 0.5 \times 2 &= 1.0 &\Rightarrow&\quad \text{取整 } 1 \\ \end{align*}$$

得到 $(0.8125)_{10} = (0.1101)_2$

二进制转十进制：对于二进制小数如0.1101：

$$1 \times 2^{-1} + 1 \times 2^{-2} + 0 \times 2^{-3} + 1 \times 2^{-4} = 0.8125$$

得到 $(0.1101)_2 = (0.8125)_{10}$

双精度64位浮点数表示

如果使用IEEE 754标准来表示双精度浮点数数值0.1，可按照如下步骤来手动计算推导：

首先，可以比较简单地知道符号位(Sign)的位的值为0；

$$S_\ = 0$$

接下来，利用“乘2取整法”，将0.1转换为二进制：

$$\begin{align*} 0.1 \times 2 &= 0.2 &\Rightarrow&\quad \text{取整 } 0 \\ \\ 0.2 \times 2 &= 0.4 &\Rightarrow&\quad \text{取整 } 0 \\ 0.4 \times 2 &= 0.8 &\Rightarrow&\quad \text{取整 } 0 \\ 0.8 \times 2 &= 1.6 &\Rightarrow&\quad \text{取整 } 1 \\ 0.6 \times 2 &= 1.2 &\Rightarrow&\quad \text{取整 } 1 \\ \\ 0.2 \times 2 &= 0.4 &\Rightarrow&\quad \text{取整 } 0 \\ 0.4 \times 2 &= 0.8 &\Rightarrow&\quad \text{取整 } 0 \\ 0.8 \times 2 &= 1.6 &\Rightarrow&\quad \text{取整 } 1 \\ 0.6 \times 2 &= 1.2 &\Rightarrow&\quad \text{取整 } 1 \\ & \ ... &....& \end{align*}$$

得到 $(0.1)_{10} = (0.0\overline{0011})_2$，是一个无限循环小数，循环节为 0011。

然后使用科学计数法，将这串二进制小数写成科学计数法形式：

$$(0.000110011...)_2 = (1.110011001...)_2 \times 2^{-4}$$

可以知道，指数位为-4，因为指数部分(Exponent)采用“偏移编码”（目的是为了在二进制中能同时表达正指数和负指数，并且避免使用额外的符号位，还可以保留特殊值），所以实际的指数 $E_\ = -4 + 1023$（为什么是+1023？因为指数位占用11bit，$2^{11} = 2048$，中点是1023）。

故：

$$E_\ = -4 + 1023$$

1019转换为11位的二进制：

$$(1019)_{10} = (01111111011)_2$$

接下来是有效数字位(mantissa)，即二进制科学计数法的底数 $(1.110011001...)_2$，取出小数点后52位（为什么只取小数点后的值？因为在科学计数法下，只保留小数点前1位，而在二进制形式下小数点前的那一位永远会是1，所以可以直接直接忽略）。

所以：

$$M_ \ = 1001\ 1001\ 1001\ 1001\ 1001\ 1001\ 1001\ 1001\ 1001\ 1001\ 1001\ 1001\ 1001$$

最终，我们得到0.1的双精度64位浮点数每位的值：

封装函数doubleToBinaryString和binaryStringToDouble

/**
 * 数字转 IEEE 754 双精度二进制字符串
 * @param {Number} num 任意数字
*/
function doubleToBinaryString(num) {
  const buffer = new ArrayBuffer(8); // 64 位 = 8 字节
  const view = new DataView(buffer);

  // 把数字写入 buffer（使用大端模式）
  view.setFloat64(0, num, false); // false 表示使用 big-endian

  let binaryStr = "";
  for (let i = 0; i < 8; i++) {
    const byte = view.getUint8(i);
    binaryStr += byte.toString(2).padStart(8, '0');
  }

  return binaryStr;
}

/**
 * IEEE 754 双精度二进制字符串转数字
 * @param {String} binaryString 任意表示双精度二进制的字符串
*/
function binaryStringToDouble(binaryString) {
  const bstr = binaryString.replaceAll(/[^\d]/g, '') // 仅保留数字
  if (bstr.length !== 64) {
    throw new Error("输入必须是 64 位二进制字符串");
  }

  // 将每 8 位转成字节，填入 Uint8Array
  const bytes = new Uint8Array(8);
  for (let i = 0; i < 8; i++) {
    const byteStr = bstr.slice(i * 8, (i + 1) * 8);
    bytes[i] = parseInt(byteStr, 2);
  }

  // 用 DataView 读取 float64（双精度）数字
  const view = new DataView(bytes.buffer);
  return view.getFloat64(0, false); // false 表示 big-endian（高位在前）
}

浮点数的基础运算原理

此处，以0.1 + 0.2为例，介绍一下双精度数值两者+运算的运算过程：

首先，使用封装好的doubleToBinaryString函数，得到两者的IEEE 754的结构：

然后，对齐指数(E)：

0.1的指数位为011 1111 1011，$(011 1111 1011)_2 = (1019)_{10}$，故，指数为 $1019 - 1023 = -4$

继续阅读…

在此页面上传和播放本地的MIDI文件。

最近花时间研究了MIDI这种文件格式，感觉发现了“新大陆”：和常见的音频文件（如.mp3/.flac等）不同，midi文件主要是记录事件（如各个音符的按压事件和控制器相关指令）而不是压缩后的音频数据，这也是为什么midi文件体积可以很小（数十KB）但是歌曲的播放时长却可以达到普通几MB的三、四分钟MP3文件的水平。MIDI文件最终播放时呈现的效果和加载的音色库相关，使用不同细腻度的音色库来播放MIDI文件，最终得到的歌曲听感会有差异。

目前主流的操作系统都可以直接播放MIDI文件，如果要在浏览器内播放MIDI，需要依赖Web Audio API，解析MIDI文件并加载音色库，合成音频再播放。

播放器设计

博客目前已经支持发布MIDI音乐的文章了，文章的路径ID如果是[m]开头的，即表示是带音乐的发文。

播放器的核心实现逻辑和代码参考了开源的在线MIDI编辑器signal-app：https://signal.vercel.app/edit，GitHub上仓库地址：https://github.com/ryohey/signal，这个编辑器实现基于TypeScript + React + Canvas。

博客的MIDI播放器在signal-app原来代码的基础上，精简掉大部分关于MIDI编辑的内容，把它作为一个纯粹的音频文件播放器来进行开发，最终的打包gzip体积仅增加了几十KB。目前播放器支持如下功能（后续播放器的功能会有所调整）：

• 自适应布局，跟随博客切换主题
• 后退5秒
• 单曲循环
• 跳转开头
• 播放/继续播放/暂停/停止
• 静音/取消静音
• 节拍器功能
• 滑动进度条定位
• Track 静音
• 键盘模式(88/76/61/49键)切换
• 音符瀑布流可视化
• 固定播放自定义选择的小节
• 其他功能敬请探索...

博客播放器新的功能在开发中，当然也有一些BUG等待被发现和解决。以及，播放器在移动端上的性能问题，播放时会有一点卡顿，不过在我的开发机器Chrome上测试播放还是很流畅。

播放器初次加载时，因为要下载音色库文件，会比较缓慢，下载完毕后会将前置资源放至indexedDB进行缓存，之后就无需再次等待下载音色库了，点击即可直接播放MIDI。

最后

在博客内第一首发布的MIDI音乐是由德国乐队Fool's Garden带来的Lemon Tree，欢迎聆听。MIDI文件下载自：https://bitmidi.com/lemon-tree-mid

为什么把它作为博客第一首要分享的音乐？一是因为博客是基于Deno Fresh来开发搭建的，而这个Web框架的Logo就是一个柠檬！我觉得十分有意义；而每每听到这首熟悉的旋律，总能让自己回忆起高一开学前夏令营的时光：高中的英语老师在第一堂课上给我们放的就是这首英文歌。

大概在3年前得到了人生中第一个Xbox游戏手柄，随后它就一路陪伴了自己多年来的游戏时光。最近，自己花了几天时间研究了浏览器W3C关于 Gamepad （游戏控制器）的API规范文档，希望博客能够实现像游戏一样支持手柄操作，达到手柄基本替代键盘鼠标操作来浏览页面的效果。目前为止，已经对手头设备上安装的浏览器博客页面的手柄操作的兼容情况做了测试，暂时没发现什么问题。

如果想要测试你的浏览器是否支持Gamepad的API，可以到博客“关于”页面，在页面底部点击“此客户端”选项查看。

如果点击没有反应、或者没有显示 控制器：支持 等字样的话，说明你所使用的浏览器已经太过时，是时候该升级WebView内核或者更新你的浏览器了！（远在十多年前——2012年Gamepad API在Chrome21被支持 ^[1]）。

热键设计

这些按键组合在所有页面基本都适用，部分页面和功能弹窗的热键布局可能会有差异，目前的热键布局未来可能有所调整。当前场景热键提示可以通过按下左菜单键查看。

控制器测试

设备在连接手柄后，打开博客的任意界面，按下右菜单键，即可打开控制器测试弹窗，测试控制器的按钮：

鼠标滚动切换手柄，在Chrome上navigator.getGamepads()会返回一个长度为4的数组，故最多支持4个控制器的连接和测试。测试窗口下，支持测试手柄的震动功能（扳机震动/手柄震动），如果手柄带有振动模块，但是点击“测试震动”无反应，很有可能是浏览器不支持，升级浏览器到最新版本即可。

功能设计

博客适配手柄操作是以替代键盘功能键方向去设计的：

• 例如在浏览界面时可以将十字键的右方向键当作键盘的“Tab键”来使用，切换聚焦的元素，然后按下右扳机键相当于键盘按下“回车”或者“空格”触发元素的点击事件；
• 左摇杆上下抬起，相当于按下键盘的上下方向键，滚动页面，根据摇杆翘起程度，分级加速滚动；
• 十字键上下方向键，相当于键盘的PageUp/PageDown按钮，上滑/下滑一页；
• 左扳机键+十字键左右方向键，相当于按下Home/End键，回到当前页面顶部/底部；
• 按下右肩键可以快捷呼出菜单，选择切换跳转博客板块子页

目前还不能在文本框键入文字，未来将考虑加入虚拟键盘输入文字功能。

继续阅读…

如果想要测试网络带宽性能，可以使用iperf这个工具。Iperf在使用时，分为服务端和客户端两部分，通过运行iperf命令，可以得到两个终端设备之间的网络带宽性能数据 ^[1]。

安装和使用

Iperf3 是从头重写的 iperf，目的是创建一个更小、更简洁的代码库 ^[2]，不同操作系统下都可以比较方便安装它：

• Termux: pkg install iperf3
• Ubuntu: apt install iperf3
• MacOS: brew install iperf3
• Windows: 在 https://files.budman.pw/ 下载解压iperf3二进制可执行文件

完整的官网使用说明文档见此：https://iperf.fr/iperf-doc.php

启动服务端

iperf3 -s

将会启动iperf3服务，默认监听端口5201。

开始测试

iperf3 -c < 服务端IP地址 > -t 30

在客户端运行上面的命令，终端命令行将显示从客户端到服务器的网络带宽，包括吞吐量、丢包等信息，测试时间30s。服务端的终端也会同时相应输出测试数据。

如果想要将带宽速率单位展示为 MB/s 可以加上参数 -f M，例如：

iperf3 -c 10.7.0.1 -t 30 -f M

结果解读

🟢 服务端 iperf3 -s -f M 输出：

-----------------------------------------------------------
Server listening on 5201 (test #1)
-----------------------------------------------------------
Accepted connection from 192.168.128.3, port 58816
[  5] local 192.168.128.1 port 5201 connected to 192.168.128.3 port 58828
[ ID] Interval           Transfer     Bitrate
[  5]   0.00-1.00   sec   643 MBytes   641 MBytes/sec                  
[  5]   1.00-2.00   sec   676 MBytes   677 MBytes/sec                  
[  5]   2.00-3.00   sec   682 MBytes   682 MBytes/sec                  
[  5]   3.00-4.00   sec   682 MBytes   683 MBytes/sec                  
[  5]   4.00-5.00   sec   688 MBytes   686 MBytes/sec                  
[  5]   5.00-6.00   sec   684 MBytes   684 MBytes/sec                  
[  5]   6.00-7.00   sec   678 MBytes   679 MBytes/sec                  
[  5]   7.00-8.00   sec   682 MBytes   682 MBytes/sec                  
[  5]   8.00-9.00   sec   681 MBytes   681 MBytes/sec                  
[  5]   9.00-10.00  sec   680 MBytes   681 MBytes/sec                  
[  5]  10.00-11.00  sec   683 MBytes   683 MBytes/sec                  
[  5]  11.00-12.00  sec   688 MBytes   687 MBytes/sec                  
[  5]  12.00-13.00  sec   685 MBytes   686 MBytes/sec                  
[  5]  13.00-14.00  sec   687 MBytes   684 MBytes/sec                  
[  5]  14.00-15.00  sec   682 MBytes   684 MBytes/sec                  
[  5]  15.00-16.00  sec   684 MBytes   683 MBytes/sec                  
[  5]  16.00-17.00  sec   682 MBytes   682 MBytes/sec                  
[  5]  17.00-18.00  sec   672 MBytes   671 MBytes/sec                  
[  5]  18.00-19.00  sec   683 MBytes   682 MBytes/sec                  
[  5]  19.00-20.00  sec   627 MBytes   629 MBytes/sec                  
[  5]  20.00-21.00  sec   583 MBytes   581 MBytes/sec                  
[  5]  21.00-22.00  sec   679 MBytes   679 MBytes/sec                  
[  5]  22.00-23.00  sec   683 MBytes   684 MBytes/sec                  
[  5]  23.00-24.00  sec   680 MBytes   682 MBytes/sec                  
[  5]  24.00-25.00  sec   679 MBytes   679 MBytes/sec                  
[  5]  25.00-26.00  sec   660 MBytes   661 MBytes/sec                  
[  5]  26.00-27.00  sec   682 MBytes   680 MBytes/sec                  
[  5]  27.00-28.00  sec   679 MBytes   680 MBytes/sec                  
[  5]  28.00-29.00  sec   682 MBytes   681 MBytes/sec                  
[  5]  29.00-30.00  sec   672 MBytes   671 MBytes/sec                  
- - - - - - - - - - - - - - - - - - - - - - - - -
[ ID] Interval           Transfer     Bitrate
[  5]   0.00-30.00  sec  19.8 GBytes   674 MBytes/sec                  receiver
-----------------------------------------------------------
Server listening on 5201 (test #2)
-----------------------------------------------------------

可以看到服务端收到了IP地址为 192.168.128.3 设备的连接请求，往下就是测试的结果数据：第一列 [ID] 表示连接的流ID，第二列 Interval 表示测试时间间隔，第三列 Transfer 表示该时间段（1s）内传输的数据量（单位MB），第四列 Bitrate 表示此时间段的传输速率。再往下，就是在以上整个测试期间内的总体性能。

🔴 客户端 运行命令 iperf3 -c 192.168.128.1 -t 30 -f M 输出：

Connecting to host 192.168.128.1, port 5201
[  5] local 192.168.128.3 port 58828 connected to 192.168.128.1 port 5201
[ ID] Interval           Transfer     Bitrate         Retr  Cwnd
[  5]   0.00-1.00   sec   653 MBytes   652 MBytes/sec  179   1.44 MBytes       
[  5]   1.00-2.00   sec   674 MBytes   674 MBytes/sec    0   1.41 MBytes       
[  5]   2.00-3.00   sec   682 MBytes   682 MBytes/sec    0   1.72 MBytes       
[  5]   3.00-4.00   sec   676 MBytes   675 MBytes/sec   40   2.12 MBytes       
[  5]   4.00-5.00   sec   690 MBytes   690 MBytes/sec  212   2.31 MBytes       
[  5]   5.00-6.00   sec   681 MBytes   681 MBytes/sec    0   1.43 MBytes       
[  5]   6.00-7.00   sec   677 MBytes   678 MBytes/sec   81   1.72 MBytes       
[  5]   7.00-8.00   sec   681 MBytes   681 MBytes/sec   44   2.05 MBytes       
[  5]   8.00-9.00   sec   674 MBytes   674 MBytes/sec    0   1.84 MBytes       
[  5]   9.00-10.00  sec   678 MBytes   677 MBytes/sec    0   1.44 MBytes       
[  5]  10.00-11.00  sec   687 MBytes   688 MBytes/sec    0   1.33 MBytes       
[  5]  11.00-12.00  sec   680 MBytes   681 MBytes/sec    0   1.28 MBytes       
[  5]  12.00-13.00  sec   686 MBytes   686 MBytes/sec    0   1.98 MBytes       
[  5]  13.00-14.01  sec   679 MBytes   676 MBytes/sec    0   1.75 MBytes       
[  5]  14.01-15.00  sec   679 MBytes   681 MBytes/sec   32   1.43 MBytes       
[  5]  15.00-16.00  sec   684 MBytes   685 MBytes/sec    0   1.73 MBytes       
[  5]  16.00-17.00  sec   684 MBytes   682 MBytes/sec   23   1.82 MBytes       
[  5]  17.00-18.00  sec   672 MBytes   672 MBytes/sec    0   2.02 MBytes       
[  5]  18.00-19.00  sec   679 MBytes   680 MBytes/sec    0   1.77 MBytes       
[  5]  19.00-20.01  sec   629 MBytes   628 MBytes/sec    0   5.66 KBytes       
[  5]  20.01-21.00  sec   578 MBytes   580 MBytes/sec   89   1.72 MBytes       
[  5]  21.00-22.01  sec   681 MBytes   678 MBytes/sec    0   1.62 MBytes       
[  5]  22.01-23.00  sec   675 MBytes   678 MBytes/sec    0   1.65 MBytes       
[  5]  23.00-24.00  sec   681 MBytes   680 MBytes/sec    0   1.33 MBytes       
[  5]  24.00-25.00  sec   672 MBytes   672 MBytes/sec    0   1.22 MBytes       
[  5]  25.00-26.00  sec   646 MBytes   645 MBytes/sec    0   1.87 MBytes       
[  5]  26.00-27.00  sec   689 MBytes   691 MBytes/sec   66   1.41 MBytes       
[  5]  27.00-28.00  sec   681 MBytes   681 MBytes/sec   85   1.83 MBytes       
[  5]  28.00-29.00  sec   681 MBytes   681 MBytes/sec    0   1.44 MBytes       
[  5]  29.00-30.00  sec   672 MBytes   671 MBytes/sec   43   1.19 MBytes       
- - - - - - - - - - - - - - - - - - - - - - - - -
[ ID] Interval           Transfer     Bitrate         Retr
[  5]   0.00-30.00  sec  19.8 GBytes   675 MBytes/sec  894             sender
[  5]   0.00-30.00  sec  19.8 GBytes   674 MBytes/sec                  receiver

iperf Done.

上方客户端输出的数据，前4列代表的意义和服务端的一致，只不过客户端这边是作为数据发送的角色；后面的 Retr 一列表示在此时间间隔内的TCP重传次数（或者出错次数）；之后的 Cwnd（Congestion Window，拥塞窗口），表示当前的TCP拥塞窗口大小。

参考：Supported emoticons - Emoticon@GitHub

Emoji语法测试区

继续阅读…

很久没用过VLC Player了，今天偶然打开一个midi文件时，发现VLC的“雪糕帽”图标变得有一点点不一样，很有趣，遂记录一下。

“关于软件”里展示的应用图标也发生变化，戴上了一顶圣诞帽 😃：

于是乎在网上查了一下，不出所料就是开发者留下的彩蛋：VLC在圣诞节的前后各一周（12月18日至翌年1月1日）会自动把软件图标设置为一个戴圣诞帽的交通锥 ^[1]。

如果想要关闭这个特性，可以在播放器的偏好设置中取消勾选“允许自动更改图标”，然后关闭窗口重启软件即可，配置项的大概位置在 “界面 - 主界面” 里。不同系统或者不同软件版本，可能会不一样。