引言
为了更好的支持移动端和 PC 端的缩放，WebKit 增加了subpixel layout（次像素/亚像素布局）为此他们还改变了 rendering tree。一个次像素单元在 WebKit 内被称为 LayoutUnit 用于取代之前使用整数来布局一个元素在页面中位置和大小。从 2013 年开始 WebKit 就已经开启了这个 flag。
LayoutUnit
LayoutUnit 是逻辑像素的一种抽象表示，在 WebKit 的实现中它是一个像素的 1/64，这样我们就可以使用整数来进行布局计算，避免了使用浮点数计算而丢失精度的问题。
滚动穿透在移动端开发中是一个很常见的问题，产生诡异的交互行为，影响用户体验，同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为，但是作为追求极致的工程师，应该去了解为什么会产生以及如何去解决。
什么是滚动穿透
移动端开发中避免不了会在页面上进行弹窗、加浮层等这种操作。一个最常见的场景就是整个页面上有一个遮罩层，上面画着各种各样的东西，具体是什么就不讨论。实现这样一个遮罩层可难不住即使是一个刚开始写前端的小白。但是这里有一个问题就是如果不对遮罩层做任何处理，当用户在上面滑动时会发现遮罩层下方的页面居然也在滚动，这就很 interesting 了。就如下面的例子，一个名为mask长宽都是屏幕大小的遮罩层，我们在上面滑动时，下面的内容也在跟随滚动，即滚动“穿透”到了下方，这就是滚动穿透（scroll-chaining）。
最近把开发环境从 WebStorm 迁移到了世界上最好的编辑器 VSCode，因为需要经常开启多个项目，CPU 和内存都爆了只能弃坑。使用过一段时间 vsc 发现里面自带插件库有个叫做 vscodevim 的插件特别有意思。它使用了一些诡异的键位和模式，和普通编辑体验差别很大，但是一看评价这么高，下载量这么大，我一度怀疑自己。看来大家都很认可这个插件，坚持使用了一段时间，发现这些诡异的键位用起来是真的特别爽，颠覆了我对文本编辑体验的认知。接下来我要开始安利了！
键盘作为程序员写各种 BUG 的作案工具，你对自己在用什么样的键盘有所了解吗？最近身边的同事在换键盘的比较多，但是貌似不是所有程序员都对键盘有所了解，甚至基本不了解。本文对各种常见类型的键盘做一个简单的介绍包括但不仅限于主要构成、工作原理、手感。
按照内部结构的不同，键盘大致可以分为薄膜键盘，机械键盘，静电容键盘，本文也主要介绍这三种类型键盘。由于价格和使用人群的不同，这三种键盘也有一个鄙视链顺序。静电容 => 机械 => 薄膜，然后用薄膜键盘的无限嘲讽用其他键盘的，用这么好的键盘有什么用，还不是拿来写 bug 的？
在某些 XSS 场景中我们需要劫持页面中的一些请求，前端页面中主要使用 XHR 来上报/获取数据。但是在一些对兼容性要求很高的 PC 端页面，网络请求可能是通过 JSONP 的方式发送的，如果是 XHR 请求就很简单，直接第三方页面上的 XHR 对象就可以拿到请求或响应的数据，如果是 JSONP，就不能直接拦截了，但是可以通过一些巧妙的方式来实现。
拦截 JSONP 首先我们得知道他是如何工作的，简而言之就是直接在 head 标签动态插入一个 script 标签，然后在 url 上带上需要执行的回调函数名称，script 标签发起一个不受同源策略限制的 GET 请求，服务端将返回的数据塞给回调函数作为参数，然后页面上直接就执行对应的回调函数。所以要劫持 JSONP 请求我们需要做到：
- 捕获请求发送的时机以及获得请求的参数；
- 重写页面上已经定义的回调函数，步获传入的参数；
- 重新执行页面上正确的回调函数，保证之前的逻辑正常。