引言
为了更好的支持移动端和 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 请求我们需要做到:
- 捕获请求发送的时机以及获得请求的参数;
- 重写页面上已经定义的回调函数,步获传入的参数;
- 重新执行页面上正确的回调函数,保证之前的逻辑正常。
现在已经是 2018 年的 3 月份了,按照以往的惯例,每年到年终的时候都会更新一下博客,总结一下过去一年的学习与生活,由于去年比较懒,这篇文章迟迟没有写,一直推到了现在。过去的一年经历了太多的事情,从学生到职场人的角色转变,从重庆到北京。一路走来,很艰辛也很快乐。
2017 的上半年大部分时间都在小米实习,直到五一节后回到学校,重修之前大三挂掉的专业课,同时忙着做毕业设计,写水论文,然后就是和同学们开黑玩游戏、踢球。这段时间的日子可以说是非常的充实了。后面放弃参加毕业典礼来了一场说走就走的毕业旅行,从此告别了雾都到霾都正式入职。可能是之前在公司实习了太久(2016.6-2017.5)的原因,回到公司后感觉和之前的状态没有太多改变。同时身边的朋友有些已经离开了公司,有的创业有的回到了自己的城市。突然想到在豆瓣上看到的文章,问一个刚毕业的人为什么要选择来北京,她的回答是:我来北京的目的是为了离开北京。