作者： meathill

爱编程，爱旅游，爱吐槽。
今年的目标是完成并运营至少一个 Side Project。
《Electron + Vue 实战开发》龟速创作中……

分类
扩展

Chrome 扩展大升级 Manifest V3：设计原则

Chrome 前阵子发布了 Chrome Extension Manifest V3 规范，算是为浏览器扩展开发的下一步明确了方向。虽然目前只在 Chrome 浏览器里有效，不过鉴于 Chrome 的统治级地位，相信只要不出大问题，将来肯定会成为 Browser Extension 规范——实际上，Browser Extension API 就约等于 Chrome Extension Manifest V2。

我最近一两年的工作大多围绕浏览器扩展展开，所以对这个规范很关注，近期也研读了不少，准备写几篇博客分享一下。这是第一篇，主要分享下 MV3 规范的设计原则。

1. 保护隐私

最初的浏览器扩展给了开发者非常大的自由，可以让浏览器扩展大大加强浏览器的能力，但是也会给普通用户带来大量数据外泄的风险。

新规范支持浏览器扩展在不需要特殊权限的时候先正常运行，有用到某个权限的时候，再向用户请求使用许可。另外，权限的授予也不再是永久的，避免长期授权可能导致的问题。

2. 保障安全

扩展要上商店，必须经过审核，很多功能可能没那么容易过审。于是很多应用开发者都会想方设法使用外部资源来绕开平台对应用的监管，这样做能带来更强大的功能，也会带来更大的隐患。比如我厂，Showman 必须用外部 JS 才能驱动网页；但如果是恶意开发者，他们可能会利用这点干坏事。

对于外部资源的使用，新规范采用了更严格的限制。V3 里，只能使用静态外部资源，比如图片视频等，外部脚本彻底不能跑了。这对我厂 Showman 是不利消息。

3. 提高性能

Chrome 的性能一直被人诟病，内存杀手的恶名背负已久。可能很多人不知道，其实 Chrome 扩展架构一直是个大问题。出于安全考虑，扩展里的 JS 会运行在很多不同环境下，比如 content script，background script，都会跑在独立的沙箱里，也就是说，哪怕你一个页面都不开，可能也有好几个扩展 background page/script 在悄悄运行，占用你的内存。

所以新版本也作出改进，强制限制只能使用一个 background script，而且这个 background script 必须以 service worker 形式来跑。保证浏览器扩展不会吞噬掉所有系统资源。

4. 追随统一的 Web 平台

以前为了提供更强大的功能，给扩展增添了很多专享 API，比如文件读写。如今 Web 平台不断发展，一些经过验证的 API 被吸纳到 Web 标准，一些步子太大的 API 被证明其实没啥用。总之，为了让降低开发者的心智负担，也让更多的代码可以一次开发导出运行，新规范会尽量向 Web 平台靠拢，减少专享 API，鼓励使用 Web API。

5. 改善功能

当然，说到底，大家之所以用浏览器扩展，还是因为它的功能比 Web 强。所以新版本还会继续探索新的可能性，让扩展平台更强大、功能更丰富，以便给用户带来更大的价值。

总结

MV2 已经过去了大约十年，确实有一些不合时宜之处，各个平台也逐步摸索了一些更好的策略，比如，权限和安全性的改进很明显是从 iOS、Android 学习而来。至于性能表现，我也很期待。

以上内容主要来自于我对新老 API 的理解和这篇官方介绍：Extensions platform vision – Chrome Developers。推荐阅读。

分类
直播

年后直播总结及初版 BB 酱

今年，我本着再努力一把试一试的想法，重新开始直播。一开始还在斗鱼，后来在群里同学的建议下转移到 B 站。每个工作日晚 9:00 至 10:00，除了个别情况，基本上都播了。

现在小小总结一下。

观看人数：个位数

首先，观看人数基本上都在个位数。群里有几个同学比较捧场，来得挺积极；不过可能跟开播时间有关，来看的人并不多。接下来还要再努力一些：

  1. 下周把 b 站送的礼品卡用掉，看能不能多拉几位观众
  2. 微博上要介绍直播内容和直播时间
  3. 朋友圈也保留一周一次的公告频率
  4. 适当找亲朋好友刷点量

直播内容

接下来说直播内容。一开始直播很大程度上是想逼自己赶紧把实战教程录完，现在等待平台审核，就开始随便播。尝试了讲解设计模式、开发浏览器扩展、以及直播加班（如果内容合适直播的话）。总结，如果完全不做准备，想一次性播好，还是很难。即使是以前写过的内容，比如 jQuery 设计模式，因为没有做 PPT，也没有画图，讲起来还是比较枯涩。

直播写代码更是各种翻车，尤其是浏览器扩展。我本以为我现在天天写 Showman，随便抄起 Vue 3 写个扩展还不是探囊取物。结果赶上 Chrome 更新 Manifest V3，background script 大改，导致我现在都还没法顺利推进。争取这个周末把 background script => service worker 这一关给过了。

直播编程比较难做。首先需要大量时间作准备，不然就会被迫各种现场读文档，信息密度急剧下降，一些观众就流失了；可是我白天要上班，没有那么多时间作准备。相对来说，游戏直播只要有现场反应就行，主播技术不行反而可以让弹幕找到智力上的优越感。

另一方面，讲道理不能光用嘴，还得画图、写字。所以教室里都要备黑板。但是直播过程里切换不同内容输出设备也没那么容易，尤其还要留出足够的空间放 IDE 和预览窗口。这方面需要补充工具。

直播平台对比：斗鱼 vs B站

我一开始在斗鱼播，后来在群里做了个小调查，大家都建议我去 B 站，看来 B 站在严肃内容方面，已经基本上占据了大家的思维定位。

不过我个人感受，斗鱼直播做得更好一些。首先带宽充足，连接稳定；其次互动工具更多，弹幕抽奖、弹幕投票等都有；第三有很多免费小礼物，方便观众和主播互动。另外，B站不提供直播录像下载，得自己记得录。

B站在与视频结合方面比较有优势。因为以前就传过很多视频，所以可以方便地设置录像联播。相对来说，B站更强调直播是 up 主作品的一部分，而斗鱼基本直接跟直播划等号。

BB酱

B站产品力不足也给我们留下了一些空间，比如我就做了一个弹幕扩展：BB酱，可以记录弹幕，并且提供一些增强功能。

接下来会开发用户登录以及弹幕投票功能，开发完成后就提交市场，争取找一些直播主来试用。

关于这个项目的其它想法都会更新在：应用（直播）创意：弹幕收集器。

这个项目使用了 Vue3 全家桶、Manifest V3、Bootstrap 5、Leancloud（Serverless），开发过程全程录像，将来计划剪辑成一个教学视频。

计划&总结

我的目标是直播一年，年底实现 100 人在线（DAU），目前来看还很遥远。希望随着几个开源项目发布，能多渠道获取一些观众。

分类
分享

应用（直播）创意：弹幕收集器（BB酱）

BB酱 v0.1

2021-03-27 更新

经过近两周的开发，我已经用上了 BB酱 v0.1。目前支持以下功能：

  • 支持读取并上传弹幕
  • 按用户名搜索、筛选
  • 取特定时间段弹幕进行抽奖

在 B 站直播了一段时间，发现 B 站没有弹幕记录——其实斗鱼也没有。这里面的产品逻辑应该是：弹幕比评论更短、更情绪化、与视频内容关系更紧密，量也太大，独立的弹幕存在价值稀薄，单独做一个列表的性价比很低。

不过我觉得，对于主播来说，弹幕还是有一些价值的，尤其是我这种没什么人看的小主播，很多时候翻翻弹幕能找回很多继续播的动力。

所以我想做一个浏览器扩展，自动收集直播里的弹幕，然后保存起来。这样需要的时候我就能回看，或者搜索，野炊就经常用这个功能跟弹幕互怼。

另外，B 站的直播互动功能不强，连基础的弹幕投票和弹幕抽奖都不支持，也可以利用这个插件实现。

这个想法吸引我的还有几个点，我觉得很适合用来做直播：

  1. 足够简单，一次直播半个小时就能完成基本功能
  2. 涉及到的技术点也不少，比如 Chrome extension API、Vue 项目搭建、Mutation Observer、Serverless 等，展开讲能讲不少，不展开直接口播介绍一下也可以
  3. 做出来之后可以给其他主播用
分类
工具

视频粗剪工具

今年业余时间主攻视频和直播，有大量视频剪辑的需求。一个一个细细剪对我来说实在不现实，一直想找人帮忙——但是没钱，所以退而求其次，想找工具自动化处理。所以才有了上篇博客：使用 jumpcutter 粗剪视频，移除静音片段。

可惜的是，这个工具不够强大，也不太合适我用。我不是 Vloger，我的视频大部分都是对着屏幕讲解代码和效果，所以我不太可能用👍👎拆分视频，也无法让👍👎帮我处理视频。我需要的是：

  1. 自动剪掉“嗯”、“啊”、“哦”、“这个”、“那个”
  2. 自动剪掉没有声音的空白帧
  3. 根据语音命令，自动生成补帧：
    1. 强调“XXXX”：自动在屏幕上打上“XXXX”几个大字
    2. 前面这段不要：提醒我要删掉一段内容
    3. 插图“XXXX”：插入一张图片，内容是“XXXX”搜索的结果
  4. 修改文字，等同修改视频
  5. 利用剩下的文字自动生成字幕
  6. 导出 Pr/FCP 等的项目工程文件，方便继续编辑
  7. 在线剪辑

大约是即整合这三个视频之所长：

Automatic on-the-fly video editing tool!
我開發了自動剪輯神器！讓Youtuber更快產片！剪輯師接更多案！【六指淵 Huber】
Introducing Descript

目前看来，除了在线剪辑、输出配置文件，其它功能都不太难：

  1. 从视频中提取音频（ffmpeg）
  2. 使用阿里云 STT 服务将音频转换成包含分词、包含时间节点的字幕文件
  3. 展示文案，允许编辑，跳到指定位置播放
  4. 输出 ffmpeg 命令，直至输出视频

似乎这些我都能做，好像可以试着动手了。但是这样一来，就没时间剪上周录的视频了……不知道究竟是工欲善其事必先利其器，还是给自己挖下一个新坑呢……

分类
工具

使用 jumpcutter 粗剪视频，移除静音片段

今年打算在直播和视频上做点努力，所以通过直播录了不少视频，周末想剪一剪，但是一方面我不擅长剪视频，另一方面也没有合适的工具，所以颇费了一些周折。

后来发现 jumpcutter，按照其作者的设计，它可以识别视频中的 👍 和 👎，只保留 👍 的片段，剪掉 👎 的片段；并且可以自动剪掉没有声音的部分，这样视频可以很快完成初剪。

前面的功能很炫酷，不过对于我来说不太实用，后面的功能比较有价值，于是我试用了一下，记录过程如下：

# clone 代码到本地
git clone git@github.com:carykh/jumpcutter.git

# 安装依赖，位于 requirements.txt
pip3 install Pillow audiotsm scipy numpy pytube

# 然后就可以使用了
python3.9 jumpcutter.py --input_file left.mp4 --output_file ./1.mp4 --silent_threshold 0.06 --silent_speed 99

其它参数如下：

--input_file目标视频
--urlYouTube 视频，国内用户用途不大
--output_file输出视频
--silent_threshold静音阈值，即多小的声音可以认为是有声音的（浮点数，0～1，默认 0.03）
--sounded_speed有声音的片段，以怎样的速率播放（浮点数，默认 1）
--silent_speed静音的片段，以怎样的速度播放（浮点数，默认5，即 5 倍速度）
--frame_margin在有声音的片段两边保留多少间隔（默认1）
--sample_rate声音取样率
--frame_rate帧数
--frame_quality质量
参数列表

比如前面我用的命令，就是认为小于 0.06 的声音为静音，静音播放速率 99（基本上直接跳过了）。

我处理了两段视频，感兴趣的同学可以试一试：

接下来我还想做两个功能，有了这两个功能视频处理后基本就能满足我的需求了：

  1. 找到“嗯”、“哦”、“那个”等无意义的语气助词，把它们干掉
  2. 识别“上一段不要”这样的语音命令，并且找到最合适的片段干掉
分类
工具

Windows 10 配置 WSL2 以及图形界面

前阵子把台式机的 WSL 升级到了 WSL2，顺便配置好图形界面，写篇博客记录一下。

0. 卸载 WSL，开启 CPU 虚拟化功能

如果之前安装过 WSL，需要先备份重要数据，然后卸载，再安装 WSL2。

重启，在 BIOS 设置里开启 CPU 虚拟化支持。

1. 简单安装：利用 Windows Insider

加入 Windows Insider 计划，升级到预览版本（>=20262），直接安装。好处是方便，而且可以安装最新版本，可以访问 Linux 分区。

坏处是不太稳定，预览版嘛。我觉得不太放心，决定还是在稳定版上安装。

2. 手动在 Windows 10 标准版上安装

2.1 检查 Windows 10 版本

需 >= 1903（18362）。我每周更新，没有问题。

2.2 启动虚拟化支持

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

2.3 下载 WSL2 升级包并安装

WSL2 Linux kernel update package for x64 machines

2.4 配置 WSL 默认版本为 2

# 设置 WSL 默认版本
wsl --set-default-version 2

# 列出所有 WSL 版本
wsl --list --verbose

# 将特定发行版设置为指定版本
wsl --set-version <distribution name> <versionNumber>

2.5 在 Microsoft 商店里安装 Linux 发行版

我安装的是 Ubuntu 20.04。安装后需要进行一些配置工作，此处不再赘述。

至此，WSL2 配置完成，接下来配置图形界面。

3. 配置 WSL2 的图形界面

3.0 更新系统

按照惯例先把能更新的系统组件更新到最新：

sudo apt update
sudo apt upgrade

3.1 安装 GUI 组件

sudo apt install -y tasksel
sudo tasksel install xubuntu-desktop
sudo apt install gtk2-engines

WSL2 目前并不支持图形界面，所以这里计划让 Ubuntu 使用 Windows X-server 来绕过。安装的过程会比较久，因为要下载很多东西，请耐心等待。

3.2 配置显示器信息

接下来要配置显示器信息，方便 Linux 使用：

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0
export LIBGL_ALWAYS_INDIRECT=1
sudo /etc/init.d/dbus start &> /dev/null

把上面这段配置加入 ~/.bashrc，当我们登入 WSL 时，就会自动完成配置。不过这样一来，每次登入都要敲密码，也有点麻烦，所以可以自己取舍一下。或者把上面的配置单独存放一个脚本文件，需要使用 GUI 的时候再运行启动。

3.3 在 Windows 10 安装 X-server

参考文档中推荐了两个软件：VcXsrv（免费）和 x410（收费）。我本来想花钱点，可是后者不支持国区购买，所以只好选用 VcXsrv。

下载，安装，启动 VcXsrv。接下来 VcXsrv 会要求我们配置使用方式，依次选择“Multiple Windows”、“Start no client”，并且勾选“Disable access control”，然后保存配置文件到本地，完成启动。以后可以通过双击配置文件启动 VcXsrv。

此时，在系统托盘里可以看到 VcXsrv 服务。

3.4 启动 GUI 程序

接下来正常启动 GUI 程序即可，比如 Firefox：

sudo apt install firefox

# 安装完成后，启动 firefox
# 注意，这里必须用 sudo
sudo firefox

总结&参考文档

至此，安装配置完成。安装配置中我参考了以下文章：

遗留问题

涉及到硬盘操作的功能会非常慢，比如打开目录，到目录内容完全呈现出来，需要数分钟之久。我记得当年初用 WSL 的时候也遇到过这个问题，后来通过关闭安全扫描解决了，不知道这次是不是同样的问题。（这次没找到关闭安全扫描的位置……）

分类
分享

喜获思否 Top Writer

（其实年前就发给我了，现在才想起来拍照发……）

2020年，书没有写完，视频也没录完，不过花了很多时间在思否上答题。基本上从年初坚持到年尾，每天至少回答一个问题，能够占据着年度排行榜的一个位置。国庆后工作压力增大，没能坚持住，慢慢掉出排行榜。

幸运的是最终得到思否的认可，获评问答版 2020 Top Writer。感谢思否赋予我这项荣誉，也感谢思否赠送卫衣一件。

（去年坚持锻炼还是有效果的，开始我还担心 3XL 的卫衣会穿不上，没想到还挺合身。）

不过今年可能很难再接再厉了，答题很消耗能量，不是不会答，主要是没有好问题。更有不少鸡贼提问者，先提出问题，等待别人回答，自己验证通过，然后自己答一遍，再把自己选择为最佳答案，骗取声望。

今年打算多输出主观、成体系的内容，播客、视频、项目、书。短期计划先做直播，争取能收获一些稳定的观众群体，把小课堂群扩一扩，这样将来做什么都方便。跟同学们讨论了一下，从斗鱼迁到 了 B 站。作严肃内容的话，B 站的确比斗鱼更合适，对小主播也更友好。

总之吧，今年我厂有希望宏图大展，希望我自己也能在内容领域取得一些新的进展。

分类
招聘

代友招聘：每日优鲜 BI 高级前端

有个关系很好的朋友在每日优鲜负责 BI 系统，现在需要 一名 高级前端开发。

薪资范围：看能力，16个月，股票期权看级别

工作地点：北京望京南

岗位描述：

  1. 负责数据开发平台的前端架构和研发
  2. 参与智能分析平台的前端架构和研发
  3. 通过沉淀和抽象业务场景，打造低代码研发环境及工程落地

岗位要求：

  1. 本科以上学历，计算机相关专业
  2. 熟练掌握JavaScript，CSS，HTML等前端技术
  3. 至少深度用过一种主流前端框架（ React \ Vue \ Angular等），并深入理解其设计原理
  4. 熟悉数据可视化经验优先，熟悉低代码技术者优先
  5. 主动、皮实、乐观、有担当，逻辑分析和解决问题能力强
  6. 良好的学习能力和团队合作意识，有技术追求，乐于分享

有意者请直接跟我联系，我初审后内推。

分类
分享

GitChat 的问题

目前来看，GitChat（gitbook.cn，简称 GC） 已经黄了。网站还在，但是已经基本没人运营。我认识的主创人员也都走了，所以把之前想吐没吐的槽吐一下吧。

0. 起高楼

我跟 GC 结缘较早。基本上，刚好在我投身知识付费领域的时候，GitChat 创办，然后我就加入做了一场：《第一场 GitChat 总结》。

坦率地说，当时我对 GitChat 的印象不错，主要有三个原因：

  1. 采用众筹模式，创作者在开始创作之前就已经对用户需求、用户反馈有一些准备，分享更加有的放矢。尤其对于我这种选题偏门的人来说，很有参考价值。
  2. 文字内容有利于检索。相对于其它网站的视频课程，文字内容可以被更多人找到（如果网站主允许的话，GC 实际上不允许，搜索只能搜到简介）。
  3. 每场 Chat 的最后一个环节，GC 会把订阅者和作者拉到一个群里进行交流。我非常喜欢这个环节，可以交流很多内容，还能获得一个关系群。（可惜的是，交流完之后他们就会把群解散。）

我觉得，GC 很好地填补了技术分享领域的一块空白：中篇收费文章，一次性说清楚一件事，不贪多：

  1. 比短文（例如我的博客）更系统、更完整、更有参考价值。很多时候你很难靠一篇博客完成一项任务，需要多看多试；而长文可以。拿来当参考书很好用。
  2. 比书本更聚焦，阅读压力更小，可以利用碎片时间，稳定的学会一项技能、了解一个知识点。
  3. 文字内容方便检索，可以覆盖更多人群，利用搜索引擎流量。

主创人员很有想法，很熟悉行业，也很有执行力。GC 产品有不少值得称道的创新点，假以时日，凭借合适的市场补位，应该可以有所成就。

1. 宴宾客

接下来我在 GitChat 上创建了多次 Chat，还不断记录下一些 Chat idea，从我的博客可以看到：https://blog.meathill.com/?s=gitchat。

GC 也不断拓展运营方向。首先增设专栏，即加长版 Chat，长度最长可以接近书本。接下来引入年卡，首充打折，¥512/年，可以看所有 Chat（能看多少专栏我不太记得了）。对了，还有严选，即品质比较好的文章，可以有区别于普通文章的标记，相当于平台为作品背书，可以卖得更好。

专栏的竞品不少，掘金也在做，而且投入的资源更多；传统图书虽然不挣钱，但是品级高，所以大家也都愿意做。年卡价格其实不贵，Chat 定价多半在 10～20之间，512 相当于能看 50 篇高质量的长文，即使暂时用不上，也可以先加到已购里，等需要的时候在看。

后来，GC 出了一篇爆款，好像叫《Java 200 道面试题全解析》，卖出了 1w+。我感觉，很多变形操作就是从这篇爆款面世后出现的……

2. 楼塌了

在爆款之前，GC 存在的最大问题就是内容稂莠不齐。跟其它平台比起来，GC 是行业新人，缺少积累，所以作者门槛设得比较低。有些作者甚至对自己写的内容都搞不清楚；有些作者文笔很差，前言不搭后语；有些作者会在用户群里发盗版资源，拉人头报名自己的 Chat……

GC 团队似乎没有什么特别好的办法，只好推出“严选”标签，帮好文章背书。但是 GC 是专业平台，编辑本身对技术不是很在行，所以严选标签的选择也一言难尽……

这个问题随着爆款出现变得更加严重。爆款有成瘾性，不仅对作者，对平台更是如此。从《200+ Java 面试题》之后，普通作者的生存环境更加严酷。一方面，混杂其中的低端垃圾文拉低了整个平台的质量，付费阅读很少，大部分都是年卡会员打卡，分成很少。另一方面，平台不断把有限的资源投入到推广爆款文章和“看起来像”爆款文章的文章里面，一时间，“面试题”与“面试技巧”齐飞，“进大厂”共“快拿 offer”一色。普通作者（就是我）的文章更难出头，甚至连想加“严选”都要跟编辑反复沟通。

而普通作者的微信群沟通更是直接被取消了。

于是，我的创作欲望越来越低；别的作者也是如此，微信群也越来越沉寂。终于有一天，有个作者问：“GitChat 是不是黄了？”没人回答，可能真的是黄了吧。

3. 总结

在我看来，GitChat 初期的产品定位有独到之处，产品形态也做得不错。但是运营时遇到两个问题：

  1. 作者能力良莠不齐，作品质量参差不齐。为了降低读者购买的决策成本，加设年卡；结果又降低了作者的收益，进而降低了创作热情。
  2. （可能）由于资金压力和流量成本，片面追求爆款。导致平台上一时间充斥着各种无营养的面试文，损害了真正知识获取者的体验。

当然，吐槽容易，解决问题很难。即使假设大家都现金购买，我一篇文章也不过几百块，完全覆盖不了我写文章的成本。所以，搭建一个作者愿意写，读者愿意花钱看的中篇平台，还有编辑负责内容审核和读者群搭建，这个商业模式是否真的成立，我也说不准。

不过，我真的希望有个这样的长文平台，希望将来会有。

分类
css

重发老视频：使用 CSS 制作工序流程图

整理之前录的视频，发现一个漏掉没有上传的：

这个视频里，我演示了如何使用纯 HTML + CSS 制作工序流程图。涉及到的技术包括：

  1. display:flex Flex 布局
  2. 使用 order: N 调整显示顺序，以实现响应式
  3. 使用 position:XX 调整定位

虽然项目不大，不过大部分布局相关的技术都有所涉及，很适合刚入门和初级同学学习。

今年想继续在直播、视频方面发力，希望大家支持。如果有什么想听的想看的想学的，也欢迎点菜。