早上例行体验一下在做的项目，看看有什么问题。发现编辑界面上周还好好的，这周打开就报错了，还关不掉弹窗那种，不进发问，Vue 你这是怎么啦？上周还运行的好好的。报错如下:

Error in nextTick: "TypeError: Cannot convert object to primitive value"

新加入的团队引入了 KPI 制度，上周开了个会说这周我们要出 KPI。开完会有点懵，这个概念大学的时候上管理学的课程有讲过，不过只是知道大概的概念，其他都还给老师了。同事让我周末想一下自己的 KPI，我也不知道要想啥，我当时就觉得说明我做了啥就行了。周一对 KPI，我只给了两点，同事说我这个太简单，请教了同事和经历过 KPI 制度的同学，说这个要写的复杂点，高大上一点，多点。于是我就从两条扩展到了 9 条，又拿给同事和同学看，同学说可以，挺具体的，就是主旨不是很明确，太散，同事说条目太多了。接着我又收窄了一点，合并成了五条，同学说作为 KPI 差不多了，以他们 OKR 制度的角度看还是差一点，没有明确的的结果和数据说明。

阮一峰在上周的周刊中提到他的网站因为广告拦截器的原因，导致有读者看不到页面的部分内容，并且找到了相应的针对他的个人网站的拦截规则集。

这里个人认为一点点可有可无的广告对于读者而言也没有多大的影响，何况这只是周刊中的一些文字广告，相比某些网站的链接，弹框等影响阅读体验的广告好多了。最让我觉得不可思议的是广告拦截软件的权限竟然这么高，甚至可以禁止 js 脚本的执行，这是让人觉得很不可思议的，要知道前端的交互全靠 js，没了 js 就会回到远古网页的时代，哪有什么体验可言，这对于网站开发者来说真的是好不尊重了。

在讲模块机制之前，先来说说 CommonJs 规范，我们知道在打包的时候经常会看到 cjs 这个选项，这里的 cjs，我自己之前是一直以为就是commonJs，实际上这是 node 对 CommonJs 的实现，是 node 的模块机制。

ComonJs 规范范围除了模块规范之外，还有二进制、Buffer、字符集编码、I/O 流、进程环境、文件系统、套接字、单元测试、Web 服务器网关接口以及包管理等规范。

最近有个需求，要求在部署过程中离开界面与用户有一个交互，询问用户是否离开页面，然后还给出了相应的样式让我实现。我寻思着关闭窗口，意味着页面销毁，执行栈都不存在了，何谈交互呢？于是我果断的拒绝了这个需求，并评论道无法实现。

后来跟同事交流了一下，同事说之前遇到过类似的需求，有相应的回调函数可以做到，去 mdn 找了下，还真有，但是很遗憾，不能自定义样式，而且在不同的浏览器可能表现不一致。跟产品沟通了下，说明了这种情况，能接受，就加上了。

一年一度的破壳日，想写点什么给未来的自己。

人总喜欢用年龄来给自己打标签，什么年龄该做什么，什么年龄不该做什么都有相应的约定俗成的规矩。比如读大学之前，父母会说好好学习，将来考个好大学，选个好专业。出社会之前，父母又会说好好学习，不要想谈恋爱这些杂七杂八的，将来找份好工作。毕业了，父母又会说好好工作，去考个驾照，买个房吧，结婚了父母还会说什么时候要孩子，得趁年轻早点要。诸如此类的父母眼中我们到了什么年纪该做什么，这说的是家里的标签映射。社会上也有标签映射，比如过了三十还不结婚的女性可能会被打上剩女的标签，三十五会被打上中年的标签，随之而来的还有中年危机。那么我们自己呢？很多人也会给自己贴上相应的标签，可能有些自己不自知。我一直的思想是尽量不给自己打标签，客观的看待自己的处境，而这也是我余生需要贯彻的一个思想之一，我不要你觉得，我要我觉得，这并不是说不顾及他人的感受，而是思想上的自我吧。

圆环进度条是我们工作中经常会碰到的一个需求，首先我们来看看要实现一个圆环我们会怎么做？

<div class="wrapper">
  <div class="circle"></div>
</div>

最近发现很多用过的东西过后很容易忘记使用姿势，久了不用就要去翻一翻文档，有一些知道怎么用，但是记忆也很模糊。于是我就想先从一些基础的知识写起，探究知识点背后的运作原理，加深自己对知识的理解。

说到 instanceof，我们大体知道其使用场景，用于检测对象的具体类型。我们一般会怎么用这个操作符呢？

看到张鑫旭大佬的文章讲禁止图片拖动的，我看了看手头的项目，拖了拖一些 icon，拖动会有虚影。于是准备把图片的拖动禁用掉，第一反应是在 App 文件中等视图加载完毕，获取所有的图片，设置为不可拖动，一劳永逸

mounted() {
  this.$nextTick(() => {
    const imgs = document.querySelectorAll('img');
    imgs.forEach((el, i) => { imgs[i].draggable = false; });
  });
}

滚动条样式在火狐、ie、chrome 等浏览器的样式是不一致的，工作中我们经常需要根据自己的需要定制滚动条，这里给出一个兼容的写法

/* The emerging W3C standard
that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(14, 77, 136);
}