自从前后端开始分离之后，前端项目工程化也显得越来越重要了，之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程，有兴趣的可以点这里去看

但是有些项目可以使用这种方式，但有些却不太适合，或者我们就是想要去尝试新的框架。比如最近我就尝试着使用了webpack+react+es6的方式开发项目，感觉很不错，然后很多项目都用了这种方式。所以为了不需要每次开发的时候都从头开始新建文件，就想着能不能弄个工具，使用命令能够快速的生成这样一套跑的通的项目模版，正好，有个工具叫yeoman。

其实canvas本身很简单，就是去学习它的API，多看实例，多自己动手练习，多总结。但是canvas的API实在是有点多，对于初学者来说，可能学到一半就止步不前了。我也有这种感觉，在学习的过程中，编写实例，用到了其中很多的属性和方法，但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的API，方便以后查阅，也顺便造福一下大家。

另外：附一个之前学习的时候自己跟着教程写的一个小游戏：tinyHeart小游戏

前言

话说现在很多很多项目需要用到文件上传，自从有了HTML5之后，上传就变的超级简单了。HTML5支持多图片上传，而且支持ajax上传！而且支持上传之前图片的预览！而且支持图片拖拽上传！而且还是纯粹利用file控件实现！而且代码还超级简单！！！原谅我这个没见过世面的人这么激动==，但是说真的，有这么多优点，想不让人称赞都难啊！

CSS3系列已经学习了一段时间了，第一篇文章写了一些css3的奇技淫巧，原文戳这里，还获得了较多网友的支持，在此谢过各位，你们的支持是我写文章最大的动力^_^。

那么这一篇文章呢，主要是通过一个3D立方体的效果实例来深入了解css3的transform属性，下面是这个实例的截图，加上动画还能旋转起来哟，是不是很酷炫？换上你喜欢的女生的照片，就可以大胆的撩妹了，哈哈！ 想要查看demo，请点击这里，3D transform立方体效果

刚开始搭建博客的时候觉得很好玩，可是玩的久了，问题慢慢就出来了，就跟谈恋爱一样＝＝。比如现在我访问博客的时候就感觉慢的要死，不可否认，使用hexo搭建服务器方便快捷，但是由于github作为服务器，也会有速度稍慢的代价产生。既然我不能放弃github，那就只有另寻出路了，作为一名前端，有哪些地方我们可以自己来优化呢？

先来说说我们在面试中经常遇到的一个问题，在浏览器输入url到页面打开，都做了些什么？

自CSS3流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。

在正式开始css3之前，先来介绍一些比较经典的css3实例，让大家好好感受一下css3的魅力，本文会提到以下几个css3的属性：

border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow

最近除了做业务，也在尝试学习h5和移动端，在这个过程中，学到了很多，利用h5和canvas做了一个爱心鱼的小游戏。源码在github上，down下来直接就能够运行。要是觉得还行，就给个star吧！源码地址点这里

下面我就做游戏的步骤来分享总结一下用到h5和canvas的API和一些常见的数学函数。推荐你先去玩一玩游戏，才能更好的明白这些逻辑。点这里去玩一下

React 的核心思想是：封装组件，各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。

最近前端界闹的沸沸扬扬的技术当属react了，加上项目需要等等原因，自己也决定花些时间来好好认识下这个东西。然后学习的时候顺便花时间写了一个demo：react-todos， 为了提起兴趣，你可以先点这里去看react-todo

首先react值得拍手称赞的是它所有的开发都基于组件（component），然后组件和组件之间通过props传递方法，每个组件都有一个状态（state），当某个方法改变了这个状态值时，整个组件就会重绘，从而达到刷新。另外，说到重绘就要提到虚拟dom了，就是用js模拟dom结构，等整个组件的dom更新完毕，才渲染到页面，简单来说只更新了相比之前改变了的部分，而不是全部刷新，所以效率很高。