Ghost 是由 John O’NolanHannah Wolfe 创立的开源博客平台。Ghost 由 node.js 所驱动,因此配合上 nginx 有着非凡的表现。这篇文章将会帮助你编写一个高性能 nginx 虚拟主机配置方案使它能和 Ghost 一起高效运作。

“不要在处理静态资源上使用 nodejs ”—— @trevnorris。如果你的 node 服务器没有 nginx 作为前端服务器,那么你很可能正在做着错误的事。

——Bryan Hughes (@nebrius)

在看到这条推文之后,我决定开始编写我自己的 nginx 配置文件来使得它能和 Ghost 一起高效运作。

...

一、不堪回首的过往

在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function>。它的取值中除了常用到的三次贝塞尔曲线以外,还有个让人比较困惑的 steps() 函数。在许多相关文章里,关于这个函数的解释都比较含糊其辞,比如:

steps() 第一个参数 number 为指定的间隔数,即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。

又如:

steps 有两个参数

  1. 第一个肯定是分几步执行完
  2. 第二个有两个值
    1. start 第一帧是第一步动画结束
    2. end 第一帧是第一步动画开始

年少无知的我轻易就相信了大家的说法,每次应用 steps() 函数时都要先考虑一番:嗯,start 对应末态,end 对应初态,末态是 OOOO,初态是 XXXX……卧槽!跑起来不对!

...

一、很久很久以前

遥远的 CSS 大草原上,生活着一群草泥马前端攻城狮,在这里攻城狮们捕捉着各种各样属性和创造新属性,施以魔法来构建他们的玩具。有一天,攻城狮们发现了一直被冷落在角落里的 clip 属性……

二、发动咒语

在 MDN 的魔法书上,clip 属性的语法是这样被规定的:

clip: <shape> | auto  

值得注意的是,clip 属性仅在设置了 position: absolute | fixed 的元素上生效

<shape> 仅接受 rect() 矩形裁切,看起来似乎很废柴,因此一直被大家忽视,但用好 clip 属性能创造出许多黑魔法般的效果。

...

一、源起

今年的开发者大会上,Google 发表了 Android L 和跨屏统一 UI 风格—— Material Design。

这个承载着 Google 统一大愿的设计语言,恰恰给一味扁平化的 Designers 敲了一记闷棍:

一切都仿佛变成了色块加文字。哪个是按钮?哪个不是?哪些是重要的信息?哪些不是?当扁平化的风格让信息层级也扁平化,影响了「信息的正确沟通」这个最终目的时,我们知道这样的扁平化已经跳得太远。

所以 Google 选择了往回跳一小步。在扁平化的基础上,保留了物理世界的阴影和动作。

Material Design 等于是强调了物理定律的扁平化设计。 Google is trying to bringing physicalityinto Flat Design.

——Material Design:向拟物回跳一下的扁平化设计 - 笔戈科技 - 知乎专栏

偶然有一天,后端同学给我发了 Polymer Project 这个网站,第一次看到 Material Design 的前端组件化实现的我惊艳不已,尤其是 Button Click 时的水波纹效果 的那种交互效果,简直让人感动到想哭 (笑)。

于是按捺不住激动,便开始考虑自己实(chao)现(xi)一个类似的效果。

...

最近在考虑用 DOM 实现 2D 游戏基本动作,其中需要实现精灵(sprite)的行走,跳跃等动作,因为 Canvas 才刚开始学习,于是便想用 CSS3 来实现这个动作。

首先从 dribbble 上找来某位大师的作品:

作为 2D 游戏,要响应键盘的动作就肯定不能直接使用 Gif 图了,于是在 Photoshop 中打开这张图,提取出所有帧:

...