**您使用 flexbox吗?**上周我在 twitter 上，问了这个问题，很惊讶地发现，不少于 50%的人回答是。之所以感到惊讶是因为，直到最近，我并不在我的任何项目中使用 flexbox ，我想我一定是唯一的一个。我不使用 flexbox 有几个原因。但是，经过一些调查研究之后，我的担忧得到明显的减弱，我已经开始了转变。所以这里有你应当开始使用Flexbox的六个理由。

**background-size属性用于指定背景图像的大小。**背景图像可以被设置为覆盖该元素的整个背景区域，或者被设置为由CSS作者所定义的明确的尺寸大小。可以使用 cover 关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例，那么该图像的高度和宽度的固有比率将被保留。

现在，Web App 日益重视用户的交互体验，了解性能优化的方式则可以有效提高用户体验。阅读和实践下面的性能优化技巧，可以帮你改善应用的流畅度、渲染时间和其他方面的性能表现。对 Web App 进行性能优化是一份冗杂沉重的工作，这不仅是因为构建一个 Web App 需要前后端协作，而且需要多方面的技术栈：数据库、后端、前端，需要运行在多种平台：iOS，安卓，Chrome，Firefox，Edge。这太复杂了！不过，还是有一些历经实践的通用方式可以用来优化 Web App 的性能。在接下来的小节中，我们将逐步介绍相关的细节。

给HTML中的内容添加动画的三种方法之一是，CSS animation【另外两种方法是：CSS transitions及JavaScript】。CSS动画相对简单。它允许你使用元素的CSS属性来添加动画。它可以让你创造出很多非常酷的效果，如移动、淡入淡出、改变颜色，等等。

JavaScript为操作已经包含在数组中的项提供了很多方法。比如push()、pop()、shift()和unshift()实现数组的增删操作、sort()和reverse()对数组项进行排序操作。今天学习操作数组的其他方法：concat()、slice()和splice()。

如果你使用过SVG，你应该知道可以使用SMIL给SVG添加动画。CSS Transitions和keyframes动画都可以操作CSS属性来添加动画。 requestAnimationFrame() 使得浏览器可以在下一帧执行之前，请求一个动作。但是每一中动画技术都不是完美的，各自有各自的问题。

object-fit和object-position是我最近最喜欢的两个CSS属性。他们使开发人员可以操作img或video中的内容，类似于我们可以用background-position和background-size操作背景内容一样。

网页字体排版的最佳实践之一就是使用相对单位，如rem和em。问题是，你应该使用哪一个呢?一直以来，rem支持者和em支持者之间都存在着争辩，认为应该使用自己支持的那个。在这篇文章中，你会找到我如何在rem和em之间做抉择.你也将了解rem和em到底是什么以及如何使用它们来构建模块化组件。

在实际的业务当中，很多时候要对定义好的数组重新排序。在JavaScript中自带了两个方法，可以对数组进行排序操作。这两个方法就是sort()和reverse()。今天就来学习这两个方法相关的知识。

在一个机构工作意味着我的工作大部分都是基于项目的。意味着每隔几个月(或更少，如果你明白我的意思)就会开始一个新的设计。有趣的是，一段时间后，我发现了每个设计师的风格和喜好。一个例子就是连续做过的三个项目中，导航UI的设计都有类似的风格。这种特殊的元素对我来说十分显眼，不仅因为我之前见过两次，而且我发现它涉及了盒子模型的各个方面。