神灯神灯,我有一个愿望,

我不要金钱、权利;

也不要长生、不老。

我只想要遇到一个女孩,

能陪着她哭,陪着她笑,陪她一起细水长流。

越了解,越喜欢;

越喜欢,越害怕。

你转身向北,

侧脸还是那么美,

我用眼光去追,竟听见你的泪。

置身在灯红酒绿的城市,

站在车水马龙的街道,

灯光的美,

夜晚的静,

更加衬托出了人们的寂寞。

从此故乡再无春秋,

从此青春再无当时。

你爱诗歌,我便学着写作;

你爱远方,我便离开故乡。

欢迎您,您是本站第 0 位访客

Let's Begin

开发自己的yeoman脚手架(generator-reactpackage)


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

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

canvas学习之API整理笔记(一)


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

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

两种文件上传的实现-Ajax上传和form+iframe


前言

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

实例demo之3D transform立方体效果










CSS3 3D立方体效果-transform也不过如此


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

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

hexo博客进阶-性能优化


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

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

CSS3初体验之奇技淫巧


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

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

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

实例demo之小游戏tinyHeart



TinyHeartview on github



游戏规则:


1. 大鱼跟着鼠标的位置移动而吃到果实,如吃到红色果实,身体变红,画布下方的个数加1;如吃到蓝色果实,身体变蓝,下方的倍数加1。

2. 画布右上角显示着小鱼的体力值,初始为10,身体为红色,随着时间的推移,体力值减小,身体颜色变淡。

3. 大鱼吃到果实之后去喂小鱼,此时小鱼的体力值也会相应增加,画布上方的分值等于画布下方的倍数乘以个数的累加和。

4. 当小鱼体力值减到0时,游戏结束;点击画布,则可重新开始游戏。好了,拯救小鱼行动开始,躁起来吧!


h5+canvas实现酷炫的小游戏


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

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

React入门最好的实例-TodoList


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

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

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