Scroll Indicator称之为滚动指示器，是Web中常见的一种效果。用户滚动垂直滚动内容时，页面顶部有一个类似进度条的效果，当内容滚动到页面最低端，进度条效果填满整个进度条。

最近，我在一个React同构网站工作。这个网站建立在React上，运行于Express服务器上。一切都进行得十分顺利，但是我仍对CSS包的加载阻塞不满意。因此，我开始考虑如何在Express服务器上进行关键路径的优化。这篇文章主要是如何使用Express和Handlebars进行安装以及配置一个关键路径的性能优化的笔记。

你喜欢挑战么？你愿意承担一项以前从没遇到过的任务并且按时完成么？如果在进行任务中，你碰到来一个似乎无法解决的问题呢？我想分享我使用CSS 3D效果的经历，那是第一次用于实际项目中，以此来激励你接受挑战。那是平常的一天，当Eugene（ CreativePeople的经理）写信给我的时候。他寄给我一个视频，说他正在为一个新项目开发一个概念，而且想知道我是否可能开发一个像视频里那样的东西。这是一个绕着一个轴旋转的3D物体（准确地说是个立方体）。对于用CSS 3D工作我已经有一些经验了，于是我的脑海里开始形成一个解决方案。我Google搜索了像“CSS 3D cube”这样的关键词来确认我的想法，随后我回复Eugene说我可以。

大家知道，==是JavaScript中比较复杂的一个运算符。它的运算规则奇怪，容易让人犯错，从而成为JavaScript中“最糟糕的特性”之一。在仔细阅读了ECMAScript规范的基础上，我画了一张图，我想通过它你会彻底地搞清楚关于==的一切。同时，我也试图通过此文向大家证明==并不是那么糟糕的东西，它很容易掌握，甚至看起来很合理。

JavaScript中的递增和递减运算符都是一元操作符，言外之意就是只能操作一个值的操作符。递增和递减操作符直接借鉴自C语言，各有两种版本：前置型(递增++i，递减--i)和后置型(递增i++，递减i--)。在JavaScript中，递增（递减）的前置和后置运算符对于初学者都非常容易混淆。我就属于这一类型，这次下定决心把这两者的使用和不同之处了解清楚。如果你和我一样，不仿一起来了解一二。

CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes，让动画可以根据帧定制不同的动画效果。

平面设计已成为2016年可见的趋势，显然，这就是SVG用法又重新走入人们的视野的原因。好处有很多: 独立的分辨率、跨浏览器兼容性以及DOM节点的可访问性。本文中，我们将看看如何使用SVG从简单的插图创建看似复杂的动画。

CSS 的 animations （动画） 和 transitions（变换）擅于实现从点 A 到点 B 的直线运动，运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后，无论你如何调整贝塞尔曲线，都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性，做出弹动的效果，但是它沿着 X 和 Y 轴相对移动的值永远是相同的。

在CSS中要实现一个动画按一个指定的路径运动，相对而言是较为困难的。虽然通过transform能模拟出来一定的效果，但要达到很完美的效果是非常的痛苦的，也较为困难的。那么今天给大家介绍的motion-path属性虽然 还未成为W3C中的正式规范，但这个属性能帮助大家轻易实现一个动画按指定路径运动。

CSS最近介绍了一个关于scroll snap points的新功能，为触控以及输入设备的用户提供一个流式、精确的滚动体验。关于创建scroll snap效果，有许多jquery插件可供你选择，但是我们今天所讲述的不是通过安装一个插件来控制滚动的行为，而是使用原生的CSS scroll snap points来实现。