我的技术和生活

npm 支持开发者添加募款链接
昨天随手升级个人首页的依赖，更新完之后，npm 提示：
```
6 packages are looking for funding
  run `npm fund` for details
```
如果你执行 npm fund，可以看到类似这样的信息：
```
your-repo@0.1.0
├─┬ core-js@3.4.2
│ ├── type: opencollective
│ └── url: https://opencollective.com/core-js
├─┬ eslint@6.7.0
│ └── url: https://opencollective.com/eslint
└─┬ swiper@5.2.1
  ├── type: patreon
  └── url: https://www.patreon.com/vladimirkharlampidi
```
opencollective 和 patreon 都是众筹网站，只不过众筹的内容不是实物商品，而是支持你喜欢的创作者，无论他是摄影师、画家，还是开源软件作者。据说 Vue 的作者尤雨溪每年可以从 Patreon 上获得将近 $20w 的捐赠，这笔钱可以帮助他以独立身份继续开发 Vue，还可以雇佣一名全职开发者帮助他把这份工作做得更好。

我去 NPM 官网找了一下，npm fund 的文档还没更新上去，只找到这篇 RFC: Add funding support to package.json，大意是包开发者可以在包的描述文件（package.json）里放上一段募款声明，这样包的用户在安装的时候，就会看到我开篇写的那些文字。提醒包的开发者：你们可以通过捐赠的方式，表达对依赖开发者的感谢。

我觉得这种形式挺好的。当然，有些人可能看不惯这种有“伸手嫌疑”的行为，但是，与其在无酬工作中纠结、放弃自己的项目、甚至被别有用心的人利用埋后门，任何不影响安全性、不增加使用负担的变现方式都是合理且值得鼓励的。

希望开源软件开发者越过越好，开源基建开发者越过越好，世界越来越好。
2019年11月25日
在新 Mac 上配置 Perl
最新的 macOS Catalina 10.15.1 自带 Perl 5.18，但是不包含包管理工具 Cpanm，所以要手动安装。

第一步，安装 xcode。

第二步，安装 homebrew。

第三步，安装最新 Perl 5.30（没有 Perl 6……）
```
brew install perl
```
安装完成之后，需要验证一下当前使用的 perl 路径 perl -v 如果还是 5.18，那么检查一下引用 whereis perl，应该能看到 /usr/local/bin/perl 在 /usr/bin/perl 前面，并且指向 /usr/local/Cellar/perl/{version}/bin/perl，那么就退出当前 Terminal，重新打开，应该就好了。

第四步，安装 Cpanm
```
brew install cpanm
```
第五步，安装其它包
```
cpan install Test::Base
cpan install IPC::Run
```
2019年11月23日
诡异的 `height: intrinsic`

我厂最新也是最重要的产品 OpenResty XRay 即将开始邀请测试，所以官网上自然要添加对应的网页。目前该网页已经部署到生产环境，大家可以访问 https://openresty.com.cn/cn/xray/ 简单了解一下。

这个页面的最下面，“信任与合规”区块是一些标准化组织的认证，按照需求应该放几个 logo。然后我就很自然的用 display: flex 来做了。在桌面浏览器显示正常。

但是在 iPhone Safari 上，上面的两个图标会变得瘦长，看起来是高度计算有问题。我尝试修复这个问题，却除了写明高度，只有 height: intrinsic 可以让它显示正常。去 MDN 一搜，竟然没有这个属性？！只提到 max-content 和 min-content 两种“intrinsic”的属性。

在 caniuse 上，可以看到 intrinsic 是个非标准化的属性，应该是以前浏览器自发实现过，后来被 max-content 和 min-content 取代。但是为何 Safari 明明支持这几个属性，但是只有 height: intrinsic 能显示正常，我就不知道了，也没有查到。

先记一下吧，将来再看。如果有同学遇到类似的，图片在 display:flex 横排时尺寸出现问题，可以试试这个。

2019年11月18日
使用 <input type=”file”> 上传 ZIP/RAR 文件
上传文件要用到 <input type="file">，这个元素有个 accept 属性，可以用来筛选文件类型，方便用户选择。按照 MDN 的说法，这个属性的值支持以下几种形式：
1. 合法的文件扩展名，大小写不敏感，以 . 作为开头，比如 .jpg，.pdf
2. 合法的 MIME type，不需要扩展名
3. 媒体文件，audio/* 适配任意声音文件，video/* 适配任意视频，image/* 适配任意图片
同时，属性值可以使用 , 连接，表示“或”的意思。注意，这里只能是单独的 ,，不能有空格，不然有空格的部分会失效。所以，比如，一个上传图片、以及 PDF 的元素就可以写成：
```
<input type="file" accept="image/*,.pdf">
```
使用扩展名比较方便，但是扩展名太多不方便管理，比如 .jpg 和 .jpeg，容易漏掉，所以我更喜欢 MIME type。那么压缩文件的 MIME type 是什么呢？经过一番搜索和尝试，是：.zip,.rar,application/x-rar-compressed,application/zip,application/x-zip-compressed,application/octet-stream。
2019年11月12日
基于 @vue/cli 的项目配置 browserslist

前些日子虽然写了最近折腾 @babel/preset-env 的一些小心得，但其实没有正确的理解和配置 browserslist，所以今天问题又来了。
（更多…）

2019年11月4日
Nuxt.js 支持 core-js 3
Vue CLI 升级到 v4 之后，将内部的 core-js 依赖升级到 v3，关于 core-js v3 和 core-js v2 之间的区别，我在最近折腾 @babel/preset-env 的一些小心得里简单介绍过。

升级完 Vue CLI 之后，在调用 nuxt generate 生成静态页，就会报错，因为 Nuxt.js 默认使用 core-js 2。这个时候，如果 Nuxt.js 版本在 2.6.0 之后，就只需要修改 nuxt.config.js 里的配置，指定 core-js 的版本：
```
module.exports = {
  build: {
    babel: {
      presets({ isServer }) {
        return [
          [
            require.resolve('@nuxt/babel-preset-app'),
            // require.resolve('@nuxt/babel-preset-app-edge'), // For nuxt-edge users
            {
              buildTarget: isServer ? 'server' : 'client',
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}
```
参考文档：https://nuxtjs.org/guide/release-notes#v2.6.0

说起来 Nuxt.js，用它发布静态页比想象中复杂，如果你想快速掌握这个技能，不妨看下我的这本小书：
2019年11月3日
解决 Firefox 下的 race 问题
我厂有几个产品，需要从后端获取大量的信息，为了让用户能够近乎实时的看到这些信息，大部分数据都是通过 WebSocket 发给前端。这些产品在 Chrome 下表现正常，但是在 Firefox 下经常把数据格式搞乱，最终渲染失败。

因为 Firefox DevTools 没法解析 WebSocket 数据，而且市场占有率比较低，所以我一直没有解决这个问题。前几天终于把最小可复现实例搞出来，正准备研究，结果同事已经修好了。

预览版的 Firefox 终于可以在 DevTools 里查看 WebSocket 每一帧的数据，所以她尝试看了一下，发现从解析二进制数据的角度来看，Firefox 应该没问题。于是又回到代码，发现了一个可能产生 race 的点：
```
if (data instanceof Blob) {
  data = await new Response(data).arrayBuffer();
}
```
因为服务器返回的数据是二进制，所以我需要进行一次转换，把它变成 ArrayBuffer，然后再通过 TextDecoder 转换成文本，然后处理。Response.arrayBuffer 返回的是 Promise，所以我就很自然的用 await，并且在 Chrome 上运行良好。

但是在 Firefox 里，某些帧会后发先完成转换，a b c 变成 a c b，于是数据格式错乱，无法正常解析。我怀疑 Chrome 并没有真的把这一步保留到用户，而是同时存了两份数据，这样转换的时候直接给出数据就好，所以是微任务，不走 Event loop，不会产生 race。而 Firefox 则是实时转换，所以是宏任务，所以出问题。

我尝试去翻了一下源码，无奈平时没看过，所以没能找到证据。如果有哪位同学刚好知道，可以在评论里告诉我。
2019年11月1日
代友招聘：每日优鲜 BI 部门招前端技术经理

有个关系很好的朋友近期加盟每日优鲜，负责 BI 系统，据他描述，组内有三名初级前端，需要一个高级前端做技术经理，负责带团队。

薪资范围：30K~40K，16个月

工作地点：北京望京
（更多…）

2019年10月26日
ZOL 惠州总部招聘

据说老东家在惠州得到当地政府扶持，准备把总部搬过去。友情转发招聘启示，详情见此：ZOL中关村在线北京&惠州总部 2019年秋季校招火热开启！

招聘对象：前端、PHP

我那会儿的同事应该走的差不多了，不过应该还有几个能说上话，所以珠三角地区的同学感兴趣的话可以联系我。
（更多…）

2019年10月18日
代友招聘：Oppo 招前端工程师，负责 H5 营销页面开发

（更多…）

2019年9月30日