在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。那么下面我们就来看看服务器端缓存的原理。

前言

现在设计师同学越来越高大上了，纯色背景已经不能满足人民群众日益增长的物质文化需要了，必须整渐变背景 o(╯□╰)o。怎么还原呢，设计师直接丢过来一个几十 K 的图片，这怎么行。。。

还好我们有 CSS 第三代！这次就来唠唠 CSS3 Gradient(/ˈgreɪdɪənt/) 的用法。

介绍这个工具前不得不先介绍一下积木系统。

积木系统是 imweb 团队出品、为产品运营而生的一套活动页面发布系统，详细介绍见 PPT

简单可以这么理解它的理念:

1. 一个页面 = 一个模板 + 多个组件
2. 一个组件 = 一份代码 + 一份数据
3. 一个组件开发一次，复用多次
4. 一个页面使用多个组件拼装后，实时预览、快速发布上线

此前在阿里实习的时候也接触过一个叫 TMS（淘宝内容管理系统）的系统, 专门用于快速搭建电商运营活动页面.

这种系统可统一理解为运营活动页面发布系统。

先贴上文地址：http://www.alloyteam.com/2016/03/and-a-star-on-different-pixel-pathfinding-algorithm/

之前说到了起点和终点连线平移方式的不足，那这篇文章就介绍另一个给力的方法

演示地址：

http://westanhui.github.io/navigate/index2.html

注意：点击画障碍物，通过左键单击画多边形最后右键自动闭合图像

前言：

寻路是游戏中非常重要的一项功能，这项功能将直接体现出 AI 的智商如何。那说起寻路的算法，就不得不提标题上面的 A star 算法了。A Star（又称 A*），是结合了 Dijkstra 算法和贪心算法优点的算法，对此不了解的同学可以去搜索一下，这里不具体介绍实现，而是简单的说一下原理，为后面我们的主角铺垫。

A Star 的核心在于将游戏背景分为一个又一个格子，每个格子有自己的靠谱值，然后通过遍历起点的格子去找到周围靠谱的格子，接着继续遍历周围…… 最终找到终点。好了，A Star 的介绍就到这里了，因为它不是文章的主角。

文章篇幅较长所以分为上下文，下文地址：

上下文各有一种实现方式，区别看了就知道，此外上文包含了一些研究寻路的思考。

随着移动设备的升级、网络速度的提高，用户对于 web 应用的要求越来越高，web 应用要提供的功能越来越。功能的增加导致的最直观的后果就是资源文件越来越大。为了维护越来越庞大的客户端代码，提出了模块化的概念来组织代码。webpack 作为一种模块化打包工具，随着 react 的流行也越来越流行。

webpack 在官方文档上解释为什么又做一个模块打包工具的时候，是这样说的：

The most pressing reason for developing another module bundler was Code Splitting and that static assets should fit seamlessly together through modularization.

开发一个新的模块打包工具最重要的原因就是 Code Splitting，并且还要保证静态资源也可以无缝集成到模块化中。其中 Code Splitting 是 webpack 提供的一个重要功能，通过这个功能可以实现按需加载，减少首次加载时间。

随着 Javascript 语言的发展，ES6 规范为我们带来了许多新的内容，其中生成器 Generators 是一项重要的特性。利用这一特性，我们可以简化迭代器的创建，更加令人兴奋的，是 Generators 允许我们在函数执行过程中暂停、并在将来某一时刻恢复执行。这一特性改变了以往函数必须执行完成才返回的特点，将这一特性应用到异步代码编写中，可以有效的简化异步方法的写法，同时避免陷入回调地狱。

本文将对 Generators 进行简单介绍，然后结合笔者在 C#上的一点经验，重点探讨 Generators 运行机制及在 ES5 的实现原理。

每次必说题外话

话说貌似好久没有写技术文章了，自从娃娃出来后，很少能有时间做技术研究，思考的时间也不足。不过有得必有失，世上事也就酱紫了。但是作为一个前端攻城师，不写代码，不研究技术，是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个 CSS 问题，一直很喜欢 CSS 的，能 CSS 解决的问题绝对不用 JS，于是就抽时间整整看。

什么是斜线拼接

回到本文主题上，” 斜线拼接“ 是我自创的词语，因为我也不知道怎么描述这个需求，o(╯□╰)o，实际的效果是下面所示：

眼力好的筒子应该就能发现，上面这张图是两个帅锅拼接在一起的，看中间的斜线。

但是呢，刚接到这个需求的时候，开发是抓狂的—— 第一反应就是用 canvas 画图，这得多累啊，只是要显示张图片而已，竟然还要动用一坨 JS，O__O "…

不过依稀记得，CSS 貌似有个遮罩的特性，可以实现图片的部分显示的效果的。

gulp 已经成为很多项目的标配了，gulp 的插件生态也十分繁荣，截至 2015.1.5，npm 上已经有 10190 款 gulp 插件供我们使用。我们完全可以傻瓜式地搭起一套构建。

然而，我们经常会遇到一种情况，我们好不容易按照文档传入对应的参数调用了插件，却发现结果不如预期，这时候我们就要一点点去排错，这就要求我们对 gulp 插件的工作原理有一定的了解。本文以实现一个 gulp 插件为例，讲解一下 gulp 插件是如何工作的。

原文：https://blog.risingstack.com/react-js-best-practices-for-2016/

作者：Péter Márton

译者按：近几个月 React 相关话题依旧火热，相信越来越多的开发者在尝试这样一项技术，我们团队也在 PC 和移动端不断总结经验。2016 来了，这应该是 React 走向成熟的一年，不管你是新手，还是已经对 React 有所了解，是时候总结一下最佳实践了，让我们看看国外的开发者总结了哪些好的实践吧~

========================译文分割线===========================

2015 可以算是 React 之年了，关于其版本发布和开发者大会的话题遍布全球。关于去年 React 的发展里程碑详情，可以查看我们整理的 React 2015 这一年。

2016 年最有趣的问题可能是，我们该如何编写一个应用呢，有什么推荐的库或框架？

作为一个长时间使用 React.js 的开发者，我已经有自己的答案和最佳实践了，但你可能不会同意我说的所有点。我对你的想法和意见很感兴趣，请留言进行讨论。

如果你只是刚开始接触 React.js，请阅读 React.js 教程，或 Pete Hunt 的 React howto。