LayoutUnit & Subpixel Layout

引言

为了更好的支持移动端和 PC 端的缩放,WebKit 增加了subpixel layout(次像素/亚像素布局)为此他们还改变了 rendering tree。一个次像素单元在 WebKit 内被称为 LayoutUnit 用于取代之前使用整数来布局一个元素在页面中位置和大小。从 2013 年开始 WebKit 就已经开启了这个 flag。

LayoutUnit

LayoutUnit 是逻辑像素的一种抽象表示,在 WebKit 的实现中它是一个像素的 1/64,这样我们就可以使用整数来进行布局计算,避免了使用浮点数计算而丢失精度的问题。

虽然我们现在在布局计算时使用了 LayoutUnit,但是在最终将计算值渲染对应到设备上时仍然会出现计算值不能与物理像素对齐的情况。因为计算出的值可能是一个小数而 1 个物理像素已经不能再进行切割。所以出现了这样一个问题,次像素如何与物理像素进行对齐?

回到我们实际的编程过程中,我们会有很多场景遇到次像素的问题,只是很多人不会关注,或者会忽略掉这些细节。比如如果一个 box 的宽度是 10px,我们把它平均分成 3 份,那么里面的三个盒子的宽度分别是多少呢,3.3333px?再比如我们在使用 rem 布局的时候有时候会发现一个正方形设置了 border-raduis 预期让它展示成一个圆形,在一些设备上却并不那么圆,在整体比较小的时候可能会被渲染成一个椭圆形。以及这种时候这个元素还设置了一个 background-size 覆盖整个容器但是背景却被切掉了一小块。这些问题不是那么容易被发现,但是确实是存在的。

Read more

解析移动端滚动穿透

滚动穿透在移动端开发中是一个很常见的问题,产生诡异的交互行为,影响用户体验,同时也让我们的产品看起来不那么“专业”。虽然不少产品选择容忍了这样的行为,但是作为追求极致的工程师,应该去了解为什么会产生以及如何去解决。

什么是滚动穿透

移动端开发中避免不了会在页面上进行弹窗、加浮层等这种操作。一个最常见的场景就是整个页面上有一个遮罩层,上面画着各种各样的东西,具体是什么就不讨论。实现这样一个遮罩层可难不住即使是一个刚开始写前端的小白。但是这里有一个问题就是如果不对遮罩层做任何处理,当用户在上面滑动时会发现遮罩层下方的页面居然也在滚动,这就很 interesting 了。就如下面的例子,一个名为mask长宽都是屏幕大小的遮罩层,我们在上面滑动时,下面的内容也在跟随滚动,即滚动“穿透”到了下方,这就是滚动穿透(scroll-chaining)。

scroll-chaining

上方 demo 的遮罩层底部是一个逐渐变蓝的内容容器,但是滑动上面遮罩层时,底部也跟随滚动了,这只是一个最简单的场景,后面我们会讨论更复杂的情况。

Read more

VSCode 帮助贫困的乌干达儿童

最近把开发环境从 WebStorm 迁移到了世界上最好的编辑器 VSCode,因为需要经常开启多个项目,CPU 和内存都爆了只能弃坑。使用过一段时间 vsc 发现里面自带插件库有个叫做 vscodevim 的插件特别有意思。它使用了一些诡异的键位和模式,和普通编辑体验差别很大,但是一看评价这么高,下载量这么大,我一度怀疑自己。看来大家都很认可这个插件,坚持使用了一段时间,发现这些诡异的键位用起来是真的特别爽,颠覆了我对文本编辑体验的认知。接下来我要开始安利了!

模式

要学会使用 vim 首先要弄清楚它和其他编辑器最大的区别之一就是它拥有多个模式,而其他大部分编辑器就只有编辑模式,直接就能插入修改删除,作为一篇安利入门性质文章,我们需要知道 vim 中最重要的四种模式。

  • normal:可以简单的理解为浏览模式,默认就是 normal,在这种状态下你可以移动光标,跳转翻页,也可以做一些其他如删除等操作,在插入模式下按 esc 回到 normal 模式。
  • insert<i>:就是常用编辑器的编辑态,符合我们常规的使用方式,在 normal 下按 i 键进入插入模式。
  • command<:>: 在 normal 模式下按冒号进入命令模式,比如 :wq 退出 vim。
  • visual:和 normal 类似但是命令会高亮选中区域,类似普通编辑器选中了一段文本。

vim 不止这四种模式,但是这几种是比较常用到的,更多模式可以看 vim 文档。

Read more

awk 入坑指北

awk(/ɔːk/) 是 *nix 下一种强大的文本处理工具,其名称取自三位作者 Alfred Aho,Peter Jay Weinberger,Brian Wilson Kernighan。awk 提供的功能包括不仅限于正则匹配、流控制、算术运算、甚至于函数等编程语言具备的一些特性。它发行于 1977 年,已经超过了 40 岁堪称古董级软件。为了更让人能直接明白它的用途,我把它称为是命令行下的 Excel,其中的一些概念和 Excel 有很多相似之处。

TR;DR

  • awk 是一种高效的文本处理工具。
  • awk 脚本的基本结构 BEGIN -> BODY -> END。
  • 基本语法,awk 脚本语法和 C 语言很很多相似之处。
  • awk 脚本编程实践以及需要注意的地方。

基本用法

在 linux 环境下我们有一些文本处理需求时,awk 就能派上用场了,比如 nginx 的访问日志,文本信息去重等等。awk 可以直接在命令行中执行比如:

1
echo "" | awk '{print "hello world!"}'

也可以将一些逻辑比较复杂的代码写到一个 awk 脚本中,然后指定脚本文件执行:

1
awk -f a.awk test.txt
Read more

关于自由软件与开源协议

在 GitHub 上浏览一些开源软件时,我们经常会看到 README.md 文件下会有一个关于 License 的声明,或者有一个单独的 LICENSE 文件来说明该软件或者类库是基于什么协议开源的,你能拿他做什么不能做什么。或许是因为习惯了在 Google 或者 Stackoverflow 上找到一份代码就开始使用的缘故,很多人不会留意这些软件是基于什么开源协议开源的。比如广泛使用的 jQuery,大家都在用,也没有任何人说直接复制了或者更改了 jQuery 源码产生衍生软件会有什么问题。但是在开发商业软件的过程中如果需要用到开源软件,它使用的何种开源协议对你的软件有直接或者致命的影响。

1 自由软件

在开始谈开源协议之前我们应该需要了解一些自由软件以及著作权相关的知识。

自由软件运动

自由软件运动(free software movement 或 free/open source software movement,简称 FSM 或 FOSSM)是一个推广用户有使用、复制、研究、修改和分发软件等权利的社会运动。接近和相关的运动包括开放源代码运动及自由软件的开放源代码运动。这运动跟 1970 年代的黑客文化有渊源,而理查德·斯托曼是该运动的主要发起人以及精神领袖。 自由软件运动人士认为自由软件的精神应当贯彻到所有软件,他们认为禁止计算机用户行使这种自由是不道德的行为。理察·马修·斯托曼认为贩卖不附带源代码的二进制软件是不道德的,因为这样阻止了软件用户学习以及帮助其他人的权利。

Read more

CPU 挖矿-利用 VPS 挖莱特币

前段时间疯狂的WannaCry蠕虫病毒再一次将比特币带入大众视野,导致最近挖矿的人越来越多,AMD 显卡甚至都脱销还出现了专门的矿机。之前也还没有写过关于区块链技术的博客,后面打算有时间写两篇文章来介绍一下我对区块链技术的认识以及与比特币相关的一些东西。本文主要介绍了挖矿的概念,以及如何利用普通服务器的 CPU 来实现莱特币挖矿。

Read more

Redux 中间件与异步 Action

在之前的浅谈 Flux 架构及 Redux 实践一文中我们初步的谈及了 Redux 的数据流思想,并做了一个简单的加减器。但是还没有接触到 Redux 更多常用的场景,异步操作、API 调用,如何连接到 UI 层等,Redux 可以与很多框架搭配包括 Vue、React 甚至是纯 JavaScript。后面我们会用一个实例–通过 github API 获取个人信息,来将 Redux middleware、async action、连接到 React 贯穿其中。先看看我们最后写的 demo 的样子。

/images/redux-demo.png

Read more

浅谈Flux架构及Redux实践

Flux 概述

Flux 是 Facebook 用来构建用户端的 Web 应用程序的体系架构,与其它形式化的框架相比,它更像是一个架构思想,用于管理和控制应用中数据的流向。这里应用中的数据指包括但不限于来自服务端的数据页面中 view 的一些状态(如一个面板是展开还是关闭),临时存储在本地需要持久化到服务端的数据等。

好了,说了这么多好像还是一脸懵逼,不慌,接下来看看展开式。

Read more

实现一个简单的 HTTP Client

httpclient-cli

Linux 下用 C 语言实现发送 HTTP 请求并获取 html 文档内容的 CLI 程序

理论基础

HTTP 请求报文格式

一个 HTTP 请求报文由请求行(request line)、请求头部(header)、空行和请求数据 4 个部分组成,下图给出了请求报文的一般格式。

Read more

LibGDX 中图元 Mesh 的使用以及参考示例

这篇文章可能不完整

好吧最近撸码撸得想吐,什么都不想干了,抽点时间写写博客。以下是之前在 libGDX 学习中遇到的一些关于 Mesh 问题。关于 Mesh (图元)在 libgdx 中的使用,本来对于国内 libgdx 的开发资料比较缺乏,之前也看了网上的一些教程,感觉很对都没有写清楚(还是我理解能力太差?)或者是把它讲得比较复杂,难以理解。浏览了部分资料后自己写了一个 demo。 本文采用 libGDX-0.99 版本,1.x 版本 API 可能会有变化。

API

qute: A Mesh consists of vertices and optionally indices which specify which vertices define a triangle. Each vertex is composed of attributes such as position, normal, color or texture coordinate. Note that not all of this attributes must be given, except for position which is non-optional. Each attribute has an alias which is used when rendering a Mesh in OpenGL ES 2.0. The alias is used to bind a specific vertex attribute to a shader attribute. The shader source and the alias of the attribute must match exactly for this to work.

大致说明了一个 mesh 包含了多个 vertice 即顶点,每个顶点都有各自的属性,包括颜色、位置、纹理等等。平时常用的构造函数就是:

Read more