c4605's blog

TypeScript 如何真正 keyof 一个枚举

2020-05-05T00:00:00+08:00

有一个朋友问我怎么才能 keyof 一个 TypeScript 里的枚举，因为如果你直接 keyof Enum 的话，得到的结果是类似 keyof number ，而不是得到枚举的所有可能的 key 。

于是我简单写了一下跟他解释，顺手发上来：

在 TypeScript 里，你在声明一个枚举的时候，其实声明了两个类型，一个是枚举容器的类型（是一个对象），一个是枚举成员的类型（是数字/字符串或者其他类型的子类型）。

TypeScript 的 keyof 操作符预设后面跟着的是类型，所以我们 keyof Enum 时，其实相当于是在 keyof (作为 number 的子类型的 Enum) ，也就是相当于 keyof number ，所以会得到 number 的属性和方法名。

而 typeof 操作符预设后面跟的是一个值，所以当我们这么写 keyof typeof Enum 的时候，我们是把 Enum 作为一个值（也就是上文提到的“对象”），展开来以后就是 keyof (作为类型的 Enum) ，所以能够得到枚举的 key 。

尝试用 TypeScript 模拟一个带 Payload 的枚举

2020-05-02T17:28:03+08:00

这两天逛 GitHub 时突然又注意到了 folktale ，发现它现在带了一个 adt/union 。看起来 folktale 现在的 Maybe, Result, Validation 都是从 union 里派生出来的，使用方法和 Swift/Rust 里的枚举非常相似：

const Either = union('Either', {
  Left: (value) => ({ value }),
  Right: (value) => ({ value }),
})

console.log(
  Either.Right(1).matchWith({
    Left: ({ value }) => `left ${value}`,
    Right: ({ value }) => `right ${value}`,
  })
)

正好我想在 TypeScript 里模拟一个带 Payload 的枚举机制已经想了很久了，觉得这个 API 设计得不错，可惜的是没有 TypeScript 的类型定义，在各种抓耳挠腮之下写了一个不完美的版本（下面解释）：

// 这是一个假的函数，只是做个占位而已
export function union<P extends BaseUnionPatterns>(
  typeId: string,
  patterns: P,
): UnionTypes<P> {
  return null as any
}

export type UnionModelMatchPatterns<P extends BaseUnionPatterns, R> = {
  [K in keyof P]: (patternFnReturn: ReturnType<P[K]>) => R
}

export type UnionModelMatchPatternsWithAny<P extends BaseUnionPatterns, R> = {
  [K in keyof P]?: (patternFnReturn: ReturnType<P[K]>) => R
} & {
  $$any: (patternFnReturn: ReturnType<P[keyof P]>) => R
}

export type UnionInstance<P extends BaseUnionPatterns, Type extends keyof P> = {
  equals: (unionInstance: UnionInstance<P, any>) => boolean
  matchWith: <R>(
    branches:
      | UnionModelMatchPatterns<P, R>
      | UnionModelMatchPatternsWithAny<P, R>,
  ) => R
}

export interface UnionType<P extends BaseUnionPatterns, K extends keyof P> {
  (...args: Parameters<P[K]>): UnionInstance<P, K>
  hasInstance: (model: UnionInstance<P, keyof P>) => boolean
}

export type UnionTypes<P extends BaseUnionPatterns> = {
  [K in keyof P]: UnionType<P, K>
}

export interface BaseUnionPatterns {
  [type: string]: (...args: any) => any
}

事情并不如愿，总归还是没有办法完全实现我想要的效果，最终的成效是：

// 在这段代码里

// Maybe 变量的类型是对的
const Maybe = union('Maybe', { // patterns 参数的类型约束是对的
  Nothing: () => null,
  Just: <T>(value: T) => ({ value }),
  Other: <T>(arg1: T, rest: T[]) => [arg1].concat(rest),
})

// a 变量的类型是对的
const a = Maybe.Just(1)
// b 变量的类型被成功推断
const b = a.matchWith({ // branches 的类型约束是对的
  Nothing: (arg) => 'no value', // arg 的类型确实是 null
  Just: (arg) => `value: ${arg.value}`, // arg 的类型是 { value: unknown } （问题一）
  Other: (arg) => `values: ${arg.join(',')}`, // arg 的类型是 unknown[] （问题二）
})
a.matchWith({
  Just: (arg) => `value: ${arg.value}`,
  // TypeScript 里指定的 Symbol 没办法作为 key 的类型，所以只能用特殊 key $$any
  // 来替代 folktale 里的 any Symbol （问题三）
  $$any: (arg) => `values: ${arg}`,
})

console.log(b)

我们来一个个看这些问题：

关于问题一，让人比较不爽，毕竟 Maybe.Just 的参数类型是出现过的，只是因为 patterns 参数里的 Just 函数是一个泛型函数，而我们在做类型转换的时候又没办法传递类型参数，所以没办法推断出 { value: T } 里 T 的类型；
关于问题二，其实可以理解的，毕竟整个 a 变量的生命周期里从来没提到过 Other 的 Payload 类型；
关于问题三，和问题一一样，都是属于语言设施功能上的缺位，大概只能等 TypeScript 支持相关的特性。

后来结合问题一问题二一想，其实这两个问题可以尝试一起解决，我们只要在声明变量 a 的时候给它传递一个更完整的类型信息就可以了，于是又一阵抓耳挠腮之后，终于写出来一个粗糙的方案：

export type UnionV<
  T extends UnionTypes<any>,
  WrappedValues extends T extends UnionTypes<infer P>
    ? { [K in keyof P]: ReturnType<P[K]> }
    : never
> = UnionInstance<
  { [K in keyof T]: (...args: Parameters<T[K]>) => WrappedValues[K] },
  keyof T
>

const Maybe = union('Maybe', {
  Nothing: () => null,
  Just: <T>(value: T) => ({ value }),
  Others: <T>(con: T, rest: T[]) => [con].concat(rest),
})

type MaybeNumber = UnionV<
  typeof Maybe,
  { // 这里填进去 patterns 各个函数的返回值类型
    Nothing: null
    Just: { value: number }
    Others: number[]
  }
>
const a = Maybe.Just('a') as MaybeNumber
// 这回 b 的类型被成功推断为 number | null
const b = a.matchWith({
  Nothing: (arg) => arg,
  Just: (arg) => arg.value, // arg 的类型为 { value: number }
  Others: (items) => items.length, // arg 的类型为 number[]
})
console.log(b)

目前这套方案在 patterns 的参数都是具体的类型时，不需要 UnionV 就能够工作得很好；在出现泛型函数时，我只能想到通过 UnionV 来为 tsc 提供额外的类型信息。

那么，我们这算是大功告成了吗？并没有，因为整套方案是真的不够优雅，UnionV 的第二个类型参数实在是让人倒胃口。而且如果你仔细看的话，会发现我上面这段代码里 Maybe.Just 的参数是一个字符串，而 tsc 并没有报错。我知道是因为我用了转型，但是如果我这么写 a: MaybeNumber = ，tsc 会报错说 Type '{ value: unknown; }' is not assignable to type '{ value: number; }'. ，所以……这就是为什么这个方案不够优雅的原因之二了。

目前还想不出来更好的方案，只能再等等了，看看 TypeScript 接下来会不会提供这套方案需要的东西吧。

无固有尺寸的 SVG 图片在各浏览器中的渲染尺寸问题

2020-04-16T23:18:25+08:00

故事

公司同事在做图片预览功能时发现，很多 SVG 图片在 Firefox 下通过 img 标签加载成功后，naturalWidth/naturalHeight 是 0，和其他浏览器表现不同。

这个事情让我有点好奇，按照经验，我觉得 Firefox 一般是最跟随标准的，但是它又何其他浏览器的实现都不相同。所以查了一些资料做了一些测试。经过简单测试后发现，没有固有尺寸¹ 的 SVG 在不同浏览器上使用 img 标签渲染时的尺寸是不同的。

我用几个浏览器跑了一遍 CodePen 上的例子[^github-#3510]

这个例子一共有四张图：

有 viewBox 属性的正方图片
有 viewBox 属性的非正方图片
没有 viewBox 属性的非正方图片
有 viewBox 和 width, height 属性的非正方图片

分别在 Firefox v74, Chrome v80, Safari v13 里跑了一下代码：

document.querySelectorAll('img').forEach(el => {
  console.log(
    'width', el.width,
    'height', el.height,
    'naturalWidth', el.naturalWidth,
    'naturalHeight', el.naturalHeight,
  )
})

结果如下：

Firefox v74：
- img.naturalWidth/img.naturalHeight
  - 1, 2, 3 的这个属性都返回 0
  - 4 返回 SVG 图片 width, height 属性的值
- img.width/img.height
  - 1, 2 的 img.width 都是 100% 的计算值，img.height 按比例缩放
  - 3 返回 300x150
  - 4 返回 SVG 图片 width, height 属性的值
Chrome v80
- img.naturalWidth/img.naturalHeight
  - 1, 2 的 naturalHeight 都返回 150 ，naturalWidth 按比例缩放
  - 3 返回 300x150
  - 4 返回 SVG 图片 width, height 属性的值
- img.width/img.height 和 Firefox 表现一致
Safari v13
- img.naturalWidth/img.naturalHeight
  - 1, 2 的 naturalWidth 都返回 100% 的计算值，naturalHeight 按比例缩放
  - 3 返回 300x150
  - 4 返回 SVG 图片 width, height 属性的值
- img.width/img.height 和 Firefox 表现一致

然后我查了一下 2020-04-09 时的 HTML 的标准对 naturalWidth 的描述：

The IDL attributes naturalWidth and naturalHeight must return the density-corrected intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is available, or else 0.

看起来好像是 Firefox 的实现比较贴近当前的 HTML 标准。

那么如果我想体面地渲染一张随机的 SVG 图片，我该怎么办呢？

目前我没有想到什么特别好的方案，可能会需要自己根据需求来确定方案

如果可以获取到 SVG 文件的代码，而且可以执行 JavaScript ，那么我们可以通过判断 <svg> 标签有没有 width, height 来确认图片是否有固有尺寸，有的话就直接使用 naturalWidth/naturalHeight ，没有的话就使用一 img.width/img.height 计算出宽高比，然后使用我们预置的宽度/高度来渲染图片，另外一边等比缩放
如果没办法获取 SVG 文件的代码，或者没办法执行 JavaScript ，那么我们就只能给图片的外部套一个限制了宽高的容器了。如果图片有固有尺寸，那么图片会按照固有尺寸进行渲染（如果超出了我们限制的宽高它会等比缩放）；如果没有固有尺寸，它就会自动缩放以适应我们限制的宽高

其他资料

Intrinsic sizing of SVG in responsive web design - That Emil.

固有尺寸（Intrinsic Dimensions）在 CSS 里指的是 object 内置的偏好（preferred）/原生（natural）的尺寸（the intrinsic height, intrinsic width, and intrinsic aspect ratio），CSS 标准里没有定义如何获取这部分信息。而在 SVG 图片这个上下文里，我们可以认为 SVG 图片的 width/height 属性就是它的固有尺寸。 https://drafts.csswg.org/css-images-3/#intrinsic-dimensions ↩

关于 React 和 Angular 的看法

2016-11-28T00:40:41+08:00

我最近也用了一段时间的 reactjs ，所以我想有还是稍微有点资格来谈论 angularjs 和 reactjs 的。

有一些文章会提到 angularjs 的两个很关键的问题：controller 拥有了自己的状态，和声明依赖比较容易出现循环依赖。

Facebook 确实提出了一个非常不错的解决方案，但这方案与 Virtual DOM 没有直接的关系（一些文章总是提这东西，我承认这是一个很重要的特性，但和解决 angularjs 的问题关系不大）。

这个方案是 Flux ：通过发布事件的方式来提醒模型更新状态，进而更新所有相关 DOM ，一个很巧妙的解决方案。而 Virtual DOM 只是这个解决方案里保证性能的一环而已。

而 data-binding ，实话说看到一些 reactjs 的拥趸一天到晚扯 data-binding 是邪恶的让我觉得很莫名其妙。data-binding 只是一种模式而已，reactjs 内置了数据的单向绑定难道这就不是 data-binding ？而且 reactjs 还带了一个扩展 ReactLink 用来实现数据的双向绑定又是什么意思？难道在 Vitrual DOM 的 onChange 属性里传一个回调函数然后更新 state 或者发出事件更新模型就不是数据绑定了？那么其他框架实现双向绑定的方法 “监听 DOM 事件，更新 ViewModel” 也不能算是双向绑定咯？因为这其实和在 reactjs 里做的没有任何区别。

我的观点就是，reactjs 是一个不错的东西，Flux 解决了不少其他 MVVM 框架的问题，而 data-binding 绝对是一种进步，因为它大量的减少了开发者的代码量（早就有人实现了一个使用 flux 模式的双向绑定扩展了）。

OS X 下推荐的一些命令行工具

2015-04-21T10:31:14+08:00

太常见的我就不记录了：

homebrew 这个不用多作介绍，之所以列出来主要是为了列一些扩展工具
- homebrew services 一个勉强算是 OS X 下的 /etc/init.d ，一开始 brew services list 的时候是什么都没有的，你得手动 brew services start nginx 这样子才算是正是把它交给 homebrew services 管理。虽然有点蛋疼，但不管怎么说，有总比没有强，是吧？
- homebrew-rmtree 删除指定包的时候顺手删除没有被别的包用到的依赖，其实就是帮你做了 brew cleanup package 和 brew rm --force package \join <(brew leaves) <(brew deps package)`` 的工作
fzf 一个可扩展的模糊查询工具，可以过滤历史命令、kill -9 进程名称、ssh 的帐号和服务器地址什么的。也支持作为 Vim 的扩展来过滤命令什么的
hub 算是 git 的扩展吧，很好的把 GitHub 和 git 命令融合了起来，比如 git create reponame 或者 git clone reponame 什么的，开坑方便了不少
ffmpeg 神器不用多作介绍，不过以前年轻不懂事，一直不怎么有在意这个，最近终于知道这玩意有多好用了，所以这里还是要列一下
aria2c 如上
mosh 嗯，如果到服务器的连接不稳定，那就用这个吧，反正我之前连 linode 日本的服务器一天到晚断线，用了这个再也没断过了
coreutils GNU 的那套命令行工具比如 ls ，因为 OS X 的工具很多都是 BSD 系的，很多参数和 GNU 系的不一样，但很多时候我们自己写的脚本需要到 Linux 下面去跑，所以干脆还是直接在 OS X 下也用 GNU 的那套工具得了
reattach-to-user-namespace 这个算是比较蛋疼，是为了解决在 tmux 下无法将文本复制到系统剪贴板的问题

Gentoo 上部署 ocserv

2015-04-12T00:43:30+08:00

终于忍受不了 iOS 上翻墙的蛋疼劲了，VPN 一锁屏就断。和废掉完全没区别。所以，查查资料，我们来装 ocserv 吧。

安装 GnuTLS

sudo emerge -av gnutls

安装 ocserv

这个教程一抓一大吧，而且问题似乎都不大。

cd ~
wget ftp://ftp.infradead.org/pub/ocserv/ocserv-0.10.2.tar.xz
tar xvf ocserv-0.10.2.tar.xz
cd ocserv-0.10.2
./configure
make -j2 && sudo make install

这样子就编译安装完成了。接下来配置 ocserv 。

配置 ocserv

先建证书：

sudo mkdir -p /etc/ocserv/certificates
cd /etc/ocserv/certificates

创建 ca.tmpl 模板，这里的 cn 和 organization 可以随便写：

cn = "Your CA name"
organization = "Your fancy name"
serial = 1
expiration_days = 3650
ca
signing_key
cert_signing_key
crl_signing_key

创建 server.tmpl 模板，这里的 cn 必须对应最终提供服务的 hostname 或 IP ：

cn = "Your hostname or IP"
organization = "Your fancy name"
expiration_days = 3650
signing_key
encryption_key
tls_www_server

然后来建证书：

sudo certtool --generate-privkey --outfile ca-key.pem
sudo certtool --generate-privkey --outfile server-key.pem
sudo certtool --generate-self-signed --load-privkey ca-key.pem --template ca.tmpl --outfile ca-cert.pem
sudo certtool --generate-certificate --load-privkey server-key.pem --load-ca-certificate ca-cert.pem --load-ca-privkey ca-key.pem --template server.tmpl --outfile server-cert.pem

然后来改配置：

sudo cp ~/ocserv-0.10.2/doc/sample.config /etc/ocserv/ocserv.conf
sudo vim /etc/ocserv/ocserv.conf

文件内容：

# 登陆方式，目前先用密码登录
auth = "plain[/etc/ocserv/ocpasswd]"
# 允许同时连接的客户端数量
max-clients = 4
# 限制同一客户端的并行登陆数量
max-same-clients = 2
# 服务监听的IP（服务器 IP ，可不设置）
listen-host = 1.2.3.4
# 服务监听的 TCP/UDP 端口，这个自己看着办，客户端以 IP:PORT 的格式来连接
# 如果改了的话两个端口最好不同，我在使用时发现如果端口相同的话，会导致请求被阻塞的情况
tcp-port = 9000
udp-port = 9001

# 自动优化 VPN 的网络性能
try-mtu-discovery = true
# 服务器证书与密钥
server-cert = /etc/ocserv/certificates/server-cert.pem
server-key =  /etc/ocserv/certificates/server-key.pem
# 客户端连上 VPN 后使用的 DNS
dns = 8.8.8.8
# 注释掉所有的 route ，让服务器成为 gateway
#route = 192.168.1.0/255.255.255.0
# 启用 cisco 客户端兼容性支持
cisco-client-compat = true
# 开着这个会报错：error: 'isolate-workers' is set to true, but not compiled with seccomp or Linux namespaces support
# 好像是内核不支持，反正自己看着办
isolate-workers = false

最后生成帐号密码文件：

sudo ocpasswd -c /etc/ocserv/ocpasswd username

其他配置

以 Linode 的配置为例，新建或修改 /etc/iptables.firewall.rules 文件：

# 如果是新建文件才需要这行
*filter

# 这里的端口填 ocserv 配置里的 tcp-port 和 udp-port
-A INPUT -p tcp -m state --state NEW --dport 9000 -j ACCEPT
-A INPUT -p udp -m state --state NEW --dport 9001 -j ACCEPT

# 注释这行，允许转发
# -A FORWARD -j DROP

# 如果是新建文件才需要这行
COMMIT



#启用NAT
*nat
-A POSTROUTING -j MASQUERADE
COMMIT

完成之后导入新配置并检查配置正确：

sudo iptables-restore < /etc/iptables.firewall.rules
sudo iptables -L
sudo iptables -t nat -L

接着打开 IPv4 的流量转发：

sudo vim /etc/sysctl.conf

启用此项：

net.ipv4.ip_forward=1

刷新配置：

sudo sysctl -p /etc/sysctl.conf

测试一下

sudo ocserv -f -d 1

如果运行成功，就下载一个 AnyConnect 客户端来测试一下。

如果证书是自己签发的，那么 iOS 客户端在连接前先到 Settings 标签页关闭 Block Untrusted Servers 。

Troubleshooting

ocserv: error while loading shared libraries: libgnutls.so.28: cannot open shared object file: No such file or directory

启动 ocserv 的命令改一下：

sudo LD_LIBRARY_PATH=/lib:/usr/lib:/usr/local/lib ocserv -f -d 1

无法访问国内网站

错误信息：

ocserv[15995]: main: 客户端IP:1035: unexpected DTLS content type: 23; possibly a firewall disassociated a UDP session

给 /etc/ocserv/ocserv.conf 加两个路由：

route = 0.0.0.0/128.0.0.0
route = 128.0.0.0/128.0.0.0

无法访问外网

去设置一下 iptables ，我被这个坑两次了。

余话

关于开机自动启动 ocserv ，开机自动载入 iptables 配置，客户端证书自动连接，这些东西我就不在这里写了，可以看下面的参考文章。

我建了一个 Gist ：Gentoo 的 ocserv 启动脚本：https://gist.github.com/bolasblack/9f53b048e46f538cf08d

记得把 PIDFILE 的路径改成 /etc/ocserv/ocserv.conf 里配置的 pid-file 路径。

最后，祝 GFW 早日被终结。

参考文章：

Gentoo 上安装 Jenkins 的若干个坑

2015-04-09T17:52:38+08:00

嗯，在 Gentoo 上装了一下 Jenkins ，记录一下遇到的坑吧。

Overlay

Gentoo 官方的 portage 和 gentoo-zh 里都是没有 Jenkins 的，所以得自己去找一下 overlay 。我在 http://gpo.zugaina.org/ 这个网站找到了相应的文件，然后由于下文中会提到的一些事情，所以对文件做了一些改动，push 到了自己的仓库 bolasblack/overlay 。版本是 1.577 ，官方最新是 1.578 ，不过看了一下 changelog 似乎没啥太大的变化，就懒得写了。

Jenkins 现在已经进入到了官方的 portage 里了，可以使用 emerge -av jenkins-bin 来安装。

部署上的一些零碎

Gentoo 的 Init Scripts 配置文件一般都在 /etc/conf.d/servicename 里面， Jenkins 也不例外，改监听的端口什么的都去那边改。

虽然过了一年半了， Nginx 的配置文件还是可以参考 Jenkins 的 Wiki 的：https://wiki.jenkins-ci.org/display/JENKINS/Running+Hudson+behind+Nginx。

这里有一份简化了感觉好像还能用的配置文件，就是不知道什么时候会不会遇到坑 https://gist.github.com/bolasblack/578d9f086a93ab69bf3b 。

No valid crumb was included in the request

如果在点击某些选项后页面上什么都没出来，JS 控制台提示某个 POST 请求被响应 403 ，Status Text 是标题的话，那就是你在全局安全设置里开了“防止跨站点请求伪造”，然后被 Nginx/Apache 坑了。

Apache 我只知道要禁用 ignore_invalid_headers 。Nginx 的话要在 server 块里添加一行 ignore_invalid_headers off; 来防止 Nginx 过滤掉 Jenkins 为了防止 CSRF 发出的 .crumb 或者 Crumb 请求头。

示例代码：https://gist.github.com/bolasblack/578d9f086a93ab69bf3b#file-jenkins-conf-L5

参考链接：

http://www.myexception.cn/ruby-rails/1617396.html
https://issues.jenkins-ci.org/browse/JENKINS-12875

Git commit 乱码

具体的处理方法是在系统变量 JAVA_TOOL_OPTIONS 里设置默认编码，我们需要的就是 -Dfile.encoding=UTF-8 。

参考链接：

http://bbbush.livejournal.com/392149.html
http://www.tuicool.com/articles/f6J3I3

SSH Username with private key

这个 key Jenkins 是不会自动创建的，需要你手动执行 sudo -u jenkins ssh-keygen -t rsa 来新建。

由于官方的 conf.d 里把 jenkins 的家目录默认设置在了 /var/lib/jenkins ，所以找 ssh 的 pub key 的时候也要去那个目录下找。

It appears that your reverse proxy set up is broken

我也不知道怎么解决，反正用了我自己那个 nginx 配置文件以后就解决了

可能有帮助的链接（反正我没得到帮助）：

http://www.phase2technology.com/blog/running-jenkins-behind-nginx/

设置“启用安全”后所有页面都需要 Basic HTTP Authorization

尝试一下在 /var/lib/jenkins/home/config.xml 文件保持 <useSecurity> 的情况下删除 <authorizationStrategy> 和 <securityRealm> ，然后重新激活“启用安全”。

参考链接：

http://stackoverflow.com/questions/29530558/how-to-disable-basic-http-auth-of-jenkins

如何设置 Jenkins 监听的地址

修改 /etc/conf.d/jenkins 文件的 JENKINS_ARGS="--httpListenAddress=127.0.0.1" 来把监听地址设置为 127.0.0.1 。

也可以通过命令 java -jar /opt/jenkins/jenkins.war --help 来获取其他配置参数。

Audio 标签的若干个坑

2014-08-22T14:51:58+08:00

这两天写了一点和 Audio 标签相关的代码，于是就被浏览器坑的昏天暗地，在这里做个笔记

状态码

Chrome, Safari, Firefox 实现的 Audio 标签是不支持对响应状态码为 200 的文件进行循环的，目前看起来这似乎已经变成了行业的潜规则似的。说是潜规则，是因为我没有在规范里找到任何与此有关的描述，我没有对 IE 进行测试。这里也有人遇到了和我一样的问题：HTML5 video will not loop。

Audio 标签的 load 方法

在 30/31 版本的 Firefox 中 audio.load() 方法是基本没什么作用的（我没有测试更低版本的），如果一个 Audio 标签 preload 属性的值为 none ，那么它不会自动地去加载这个音频文件，在其他浏览器中可以通过 audio.load() 来触发下载音频文件的行为进而实现按需预加载的效果，但这在 Firefox 下是无效的，只有调用 audio.play() 时它才会遵循规范触发下载资源的行为

循环播放的间隔

不同浏览器实现的循环播放的间隔是不同的，测试代码：

结果如下：

# Chrome - 1
1161
# Chrome - 2
10215

# Firefox - 1
1264
# Firefox - 2
10280

# 最令人发指的 Safari - 1
2324
# 最令人发指的 Safari - 2
11330

目前没有找到比较好的办法来处理这个问题。

Socket.io 如何切换 Namespace 和 querystring

2014-07-01T23:29:20+08:00

目前的 Socket.io 的情况似乎是，当我发起过一次连接后，接下来的所有新连接的 namespace 和 query 等内容都会使用第一次的配置，蛋疼无比。

看了下代码，然后又尝试了一些时间，找出了办法：

var socket = io.connect('/path', {query: {key: 'value'}})

// 当需要切换的时候
socket.close()
socket.io.opts.query.key = '...' // 设置 querystring
socket.io.opts.path = '/newpath' // 切换 namespace
socket.open()

为什么我喜欢在 Terminal 里使用 Vim

2014-05-09T17:48:53+08:00

其实很简单，因为 Shell 好用~

在 Terminal 打开 Vim ，然后 Ctrl-z 。

“biu!”，不见了。

再开个 node ，然后 Ctrl-z 。

“biu!”，又不见了。

然后输入 jobs ，回车：

[1]  - suspended  vim
[2]  + suspended  node

然后输入 fg %2 ，回车，“biu!”，Vim 又出来了。

退出 Vim ，然后输入 fg ，“biu!”，node 回来了。

什么？你说 Terminal 下复制麻烦？

:'<,'>w !pbcopy<CR>