wxsm's pace

发表于 Waline：

今天想要打包一个 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。世界终于清净了。

发表于 Waline：

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

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

阅读全文 »

发表于 Waline：

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

638f7ff6d334b2d7616039a3787efe6.png

发表于 Waline：

在没有包管理器之前

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

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

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

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

阅读全文 »

发表于 Waline：

之前在 WSL on Windows 10 中尝试了 WSL，但是几经周折最后发现问题比较多，用得有点难受。最后还是换回了 windows。

下载

https://www.cygwin.com/

设置 Windows Terminal

注意，后面的 C:\cygwin64 换成实际安装路径。

增加 cygwin 配置

效果

设置 IDEA

修改 Shell path

注意里面填的是 C:\cygwin64\bin\env.exe CHERE_INVOKING=1 /bin/bash -l，这样才能在项目目录打开终端：

效果

设置 ssh keys

可以建一对新的 key pair，也可以直接使用 windows 下面建好的。

如果要使用 windows 的，只需将 .ssh 文件夹下面的内容复制到 C:\cygwin64\home\user\.ssh 即可。

发表于 Waline：

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

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

发表于 Waline： 
@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) 上的代码块。

发表于 Waline：

其实不需要装任何插件，IDE 自带的 Markdown 插件即可支持该操作：

  1. 使用任意截图软件截图到剪贴板；
  2. Ctrl + V 复制到编辑器中；
  3. IDE 会自动生成图片文件 img.png（如果已存在，则会加自增后缀），以及相应的 Markdown 标签 ![img.png](img.png)。

但是，默认的插件不能配置保存路径（只能是 markdown 文件所在的路径），也不能配置命名规则，因此找了一个插件来增强这个功能。

阅读全文 »
0%