R·e^x / Zeng

由于浏览器的优化导致的 Bug 们

按理说，随着时间的发展，浏览器会做各种各样的优化来提升网页浏览的性能，但不是所有优化都能起到积极的效果，有的优化甚至属于“智障”级别。下面我就分享三个我遇到或听说的、由于浏览器自身的优化导致的一些 Bug。Passive Event Listeners我之所以知道了这个东西，是因为昨天邻居向我抱怨的一个问题，他的移动端页面使用了一个日期选择器，但在上下滑动选择日期的时候，Console 里面会报一堆这样的错误：[Intervention] Unable to preventDefault ...

Babel 如何转换 async-await 至 ES5

背景中午吃饭的时候跟同事讨论起了 async-await，我认为 async-await 是 Promise 的语法糖，但同事认为更贴近 Generator。于是趁下午摸鱼的时间查了一下资料，并自己用简单的例子对比了一下转换前后的代码，大概有了一定的了解。讲真，在刚看到转换结果的时候我整个人是懵逼的（虽然很早以前就看过了，毕竟每次 async-await 函数报错的时候调试器都会断在一个奇怪的文件里），因为这两段代码几乎没有太多的相似之处，转换之后还多了一段奇怪的函数（WTF?!）：// ...

从前端性能监控发现的 Chrome Bug：eval、onerror 与同源策略

背景最近在做公司的一个前端监控项目，有一个需求是需要捕获前端错误并上报。这个需求其实很简单，使用 window.onerror 或者 window.addEventListener('error', ...) 就可以捕获异常数据，MDN 的 这篇文章 讲述了具体的用法，AlloyTeam 的 这篇文章 也讲了一些例子，以及针对触发了同源策略的应对方案。但是当我开始写自己的库时，才发现这个需求并不是那么一帆风顺。我在我们的前端项目里引入了自己写的库，然后故意触发一个语法错...

雪碧图的应用场景 & 一种生成算法

CSS 雪碧图相信上古时期搞过前端的同学都知道，可以通过合并一些小图片、使用 CSS 控制 background-position 的方式来减少 HTTP 请求次数，从而优化网页加载时间，这就是 CSS 雪碧图（Spritesmith）。不过自从 HTTP/2 出来之后，这个用途就已经没什么意义了。当然，它也可以避免当正常状态与 hover 状态使用不同的图片时，首次 Hover 要现场加载图片的问题，所以雪碧图还是有一些用武之地的。CSS 雪碧图的优缺点以及其它资料网上太多，这儿就不写了...

对 CSS 变量的一点实践

什么是 CSS 变量之前我刚接触 CSS 预处理器的时候，被里面的变量功能给吸引了，你可以跟正常的编程语言一样定义变量，里面的值可以是各种各样的东西，例如 2rem 或者 #123456，甚至还可以对变量做一些运算，例如两个数值相加，或者把这个颜色变深 10%。后来无意间听说了 CSS 变量这个概念，于是上网查了一下，这儿的变量其实更相当于预定义的常量，因为 CSS 还不支持很多预处理器中的运算（calc 只能对数值进行运算）。用法其实很简单，例如我要写一套配色（这也是我网站目前的配色）：...

代码高亮的可行方案

Update 20180704：负向零宽断言我手边只有 Chrome 支持，所以目前还是不可用的，还好 PrismJS 提供了一种 Hack 的方法可以支持这个特性的很有限的部分：当传入 lookbehind 属性时，会删掉 match 数组的第零项，这样第一个括号的内容就成了匹配到的东西……我已经给 PrismJS 提了 Pull Request（地址在 这里），但尚未被合并，仅供参考。背景作为一个强迫症，我对博客里的代码高亮一向是要求很高的，一个好的代码高亮库，需要满足如下几点：屏幕大...

编写状态驱动的业务代码

什么是状态驱动的业务代码别看概念似乎很高大上，其实是我胡扯出来的……简单来说，就是把业务按照一个个状态进行拆分，然后通过状态来计算当前要执行的操作（后端）或当前要展示的界面（前端）。虽然这个做法很早就有了，而且绝对有很多人实践过了，但似乎一直没有一个专门的名词（也可能是我不知道），于是我就将其描述为“状态驱动的业务代码”了。几个业务场景多个步骤的页面我们的一个业务场景是（部分逻辑已修改）：提供一个拣货的页面，操作员首先扫描订单上的条形码，页面上显示这个订单所需的货物列表，然后操作员再依次扫...

由 npm link 引发的一个坑

什么是 npm link可能很多同学没有接触过这个命令，就先提一下吧。NPM 文档在 这里。假设我们开发了一个 NPM 的包 a，然后我们的项目使用了这个包，那么正常情况下，每次 a 有变动，我们都要更新到项目中。npm 的 link 命令可以解决这个问题，步骤如下：进入 a 的根目录，执行 npm link，这会创建一个软链接 $PREFIX/lib/node_modules/a，指向 a 的根目录，也会将包里的 bin 指定的文件放到 $PREFIX/lib/bin 下；进入项目的根目...