b 站上的歌姬,很多歌只发布在 b 站。比如说直播时唱的歌,或者一些发布到正经音乐平台上会有版权问题的歌。然而,对于爱听歌的人来说,b 站的听歌体验实在是太差了,这里就不展开细说。

我习惯用网易云听歌。网易云虽然版权方面很惨,但有它一个很好用的功能:云盘。每个用户有 60G 的云盘容量,基本用不完,不管是什么歌,有没有版权,只要上传上去了就能随时随地听。因此,我的目标是,希望可以有一个自动化的工具,帮我把 b 站上的歌以 mp3 的格式下载下来,让我可以上传到云盘,这样我就可以用网易云听歌了。

综上所述,我就做了这么一个小工具:bv2mp3 ,这是一个开源工具,完整的代码可以在代码仓库中找到。下面,我主要讲一下这个工具的实现思路以及优化过程。

126f0ee04db59831d6a9820ac89c471.jpg

阅读全文 »

今天想要打包一个 Docker 镜像,里面只包含一些静态的前端文件。为了使体积足够小,想到的方案是把命令全部集中在一个 RUN 上,类似这样:

FROM node

WORKDIR /usr/src/app
COPY . .

RUN yarn --frozen-lockfile --check-files --ignore-engines && \
yarn build && \
rm -rf node_modules

但是打包出来的镜像,死活都是 2.2G,node 镜像自身 900MB,静态文件总共才 10MB+,run container 进去查看 node_modules 也确实删掉了,百思不得其解。一度以为是 Docker 出了 bug,遂升级 Docker,但仍不能解决。

折腾了一下午后,尝试去掉 rm -rf node_modules,观察到打出来的镜像 2.8G,突然觉得是不是还有什么东西没删干净,然后很快就想到了 yarn 的缓存。添加 yarn cache clean 后,打出来的镜像来到 910MB。世界终于清净了。

Vue3 与 Vue2 的最大不同点之一是响应式的实现方式。众所周知,Vue2 使用的是 Object.defineProperty,为每个对象设置 getter 与 setter,从而达到监听数据变化的目的。然而这种方式存在诸多限制,如对数组的支持不完善,无法监听到对象上的新增属性等。因此 Vue3 通过 Proxy API 对响应式系统进行了重写,并将这部分代码封装在了 @vue/reactivity 包中。

本文将参照 Vue3 的设计,从零开始实现一套响应式系统。注意本文引用的代码与实际的 Vue3 实现方式有所出入,Vue3 需要更多地考虑高效与兼容各种边界情况,但此处以易懂为主。 文中提到的大部分代码可以在 https://github.com/wxsms/learning-vue 找到。

阅读全文 »

昨天正式受邀(实际上是我申请的)进入了 vuejs 组织。虽然目前只是 doc team,但是我相信以后可以做更多的事情。

638f7ff6d334b2d7616039a3787efe6.png

在没有包管理器之前

正确来说 Node.js 是不存在没有包管理器的时期的。从 A brief history of Node.js 里面可以看到,当 2009 年 Node.js 问世的时候 NPM 的雏形也发布了。当然因为 Node.js 跟前端绑得很死,这里主要谈一谈前端在没有包管理器的时期是怎样的。

那时候做得最多的事情就是:

  1. 网上寻找各软件的官网,比如 jQuery;
  2. 找到下载地址,下载 zip 包;
  3. 解压,放到项目中一个叫 libs 的目录中;
  4. 想更方便的话,直接将 CDN 链接粘贴到 HTML 中。

四个字总结:刀耕火种。 模块化管理?版本号管理?依赖升级?不存在的。当然,那时候前端也没有那么复杂,这种模式勉强来说也不是不能用。

阅读全文 »

博客迁移至 Hexo。主要原因是:

  1. Vuepress 有部分 bug 难以忍受,而且 v1 仓库已经停止维护了;
  2. Vuepress 的功能对于 blog 来说还是有些弱;
  3. Vuepress v1 存在文章数量增加,首屏加载大小不断变多的问题;
  4. Vuepress 没有 blog 主题,而我自己写的主题是基于 v1 的,且无法升上 v2 (因为:为了解决问题 3,v2 中 $posts 变量被移除了,而该主题的首页依赖这个变量做渲染);
  5. …… (其它难以忍受的问题)

@media (prefers-color-scheme: dark) {
html {
filter: invert(90%) hue-rotate(180deg);
}

img, video, svg, div[class*="language-"] {
filter: invert(110%) hue-rotate(180deg);
opacity: .8;
}
}

具体效果参考本站(打开系统级别的暗黑模式)。 解释:

  1. invert 将所有色值反转,hue-rotate 将黑白以外的其它主色调再反转回来(防止页面主题色出现大的变化);
  2. 网上的 invert 通常取值为 100%,但是这样反转得到的黑色往往太过黑,眼睛看起来有点累,因此我觉得 90% 是一个更合理的值;
  3. 将图片、视频等其它不需要被反转的元素再反转回来,并加一个透明度,让其不那么刺眼;
  4. 如果 html 反转 90%,则图片等元素需要反转 110%
  5. div[class*="language-"] 对应的是本站 (VuePress) 上的代码块。
0%