大概一年之前，Google在Polymer上宣布了Material Design的存在，并且表示将使用polyfill作为即将到来的统一Web动画API标准。我没有听说过这个API，但是我非常好奇，特别是它提到的MotionPath（运动路径）效果。目前尚未实现（你可以在这系列教程的Part 5中找到相关内容），但是它的目标是提供一种统一CSS、JS和SVG的方法来实现动画，这让我非常感兴趣。一年之后Chrome和Firefox已经开始实现这块内容，polyfill的进展非常平稳，所以是时候来认真研究一下它了。

background-size的contain和cover是怎么用的，大家应该都明白。但是里面也有一些有趣的数学关系。在这篇文章中将带大家一起探讨这里面的故事。

在上一篇文章中我们一起了解了如何在项目中使用Gulp来配置PostCSS。在这篇文章中，我们将一起探讨如何在项目中使用Grunt来配置PostCSS。

这篇文章简单介绍 Web Component 标准，介绍哪些浏览器已经开始支持 Web Components，讨论 Web Components 能解决什么问题，以及它对 Web 开发的重要性。你可以了解到如何利用 Vanilla Javascript 编写一个简单的 Web Component，我还会针对它的潜在优势分享我自己的一些拙见。

如果我告诉你存在一种图像格式和GIF一样，但它是矢量格式的？如果我告诉你这个动画的方向还可以反转？如果我告诉你可以直接拿一张普通的图像，然后让它里边的每一个不同的部分都单独地动起来，而且不同部分的速度也不一样？其实，这种图像格式就是SVG，而且已经存在，并不是我想象出来的，只是还需要一点点温柔的鼓励。

运气爆棚的我总是时不时地能创建出大家都喜欢的案例。SVG Lava Lamp就是其中之一——因为很多人问我关于这个灯的文字，所以我决定写这篇文章来给大家解释解释。一眼看去，这篇教程好像会有很多很多的代码——其实不是这样的。我只是在不停地粘贴相同的代码，所以代码量会慢慢增加，看起来也就好像代码量很大了。还有标题看起来也挺好笑的——虽然我喜欢开玩笑，但也不会影响到后边各小节的内容，它们其实还是挺简单的。如果觉得它们倒了你的胃口，或者你的母语不是英语的话（无法理解我），我还是赶紧先在这里道个歉吧哈哈。

自从我从事 WEB 开发以来，一直都在规规矩矩地使用标准的栅格布局。直到有一次在公司跟实习生交流时，我意识到开发者的思维已经被条条框框固定住了。这里并不是想说栅格布局这种规规矩矩的布局有什么不好，实际上这些布局就像是沃尔沃汽车一样，让人感到安稳和可靠。但是，拥抱变化何尝不是一件趣事？非常幸运的是，我能与众多才华横溢的设计师共同工作。在最近的一个项目中，他们提出了一种基于栅格布局的菱形布局。话不多说，迎战问题(•̀o•́)ง！

Web重构之道是今年十月份参加上海Qcon全球软件开发大会的**新时代的前端**专题的一次分享的主题。这次有幸能跟@达峰、@sofish、@桂川等大神一起同台分享，感到非常的荣幸，也感到无比的压力。还好分享已结束，借此机会重新回忆这次大会上自己分享的主题。在此之前我首先要感谢@贺佬给我上台分享的机会，感谢@winter大大的推荐、建议与鼓励。最后感谢Qcon提供这样的分享平台。

在上一篇文章中，我们介绍了如何在CodePen和Prepros中使用PostCSS。虽然里面的选项设置可以让你第一时间接触和使用PostCSS，但也有很多PostCSS插件限制你不能使用。这篇教程将告诉你如何在Gulp配置中使用PostCSS插件，而且可以根据你自己需要的去配置所要的插件。这才是真正的进入到PostCSS插件生态系统中。

欢迎开启我们PostCSS深入学习系列之快入门指南。在这些初级教程中，可以让我们快速的了解PostCSS和如何最有效的使用PostCSS。在这篇文章中，我们将先告诉你如何设置PostCSS选项，所以你现在开始使用PostCSS只要几分钟。接下来将告诉你如何在Codepen和Prepros中设置PostCSS。