nodePPT 是@三水清基于nodejs来写的网页PPT，之前的版本仅仅是html语法，现在可以支持通过markdown来写网页ppt了。
查看demo：http://qdemo.sinaapp.com/
nodeppt
npm install -g nodeppt
##使用nodeppt命令行
nodeppt start -p port
# or
nodeppt start -p port -d path/for/ppts
支持markdown语法快速创建网页幻灯片。
nodeppt create ppt-name
用了好久wordpress，从开始用别人的主题，到后来自己做wordpress主题，博客也有小半年没更新了。其实很早就有迁移的想法了，但是一直很懒，这次趁着数据库出错，就迁移到github了。
这样一来写博客，写wiki，甚至写ppt都用markdown语法，关于用markdown语法写ppt，可以看下我写的一个nodeppt，可以方便用markdown语法来写网页版的幻灯片，效果还是不错哈。
这次使用的是hexo，hexo是台湾同胞开发的，用起来还是很顺手的。之前wordpress的内容，可以通过xml导入。
本来300多篇的文章，从08年在学校开始，从2fool.cn开始，一直到现在的js8.in，经历了5个多年头了，当然文章也每次迁移少一部分，这次迁移只保留了不到200篇。
fis的wiki整理的不是很好，结合最近几天的体会，整理了FIS常用的功能，加上自己对fis的理解，整理了这篇文章
fis是百度的开源的前端开发解决方案，另外还有个fisp（即fis-plus，前身是fis-pc），fisp可以说是百度业务定制版，主要集成（并扩展）了smarty模板，本地调试等功能。
fisp是在fis基础上做的一层封装，订制了一些 config 配置，所以一些fis的配置，在fisp里面是会自动忽略，不会生效的，比如说jswraper配置。
fis其实是一个 半成品 ，只有经过更多的包装（例如插件）才能发挥最大的作用，fis的核心是生成的 map.json ，很多想法可以通过 map.json 这个表来实现。比如我自己订制的require inline方式。
fisp结合 map.json 和 FISSource.class.php ，对smarty语法进行了扩展，扩展出来了 html、widget、require、script等smarty自定义标签。
想了解详情的童鞋，可以直接看下fisp的 plugin 。
然后进入cmd，依次执行：
#安装fis-plus
$ npm install -g fis-plus
#安装fis-plus调试环境
$ fisp server install pc
# 启动fisp
$ fisp server start
# 这时应该会自动打开系统默认浏览器访问127.0.0.1
# 查看www路径
$ fisp server open
# 清理www路径，慎用，会清理掉之前安装的调试环境
$ fisp server clean
Gruntjs是前端项目构建工具，基于node的命令行工具。很多公司或者js项目都是用gruntjs来搭建，例如jQuery，twitter，Qunit等。主要功能有：
相对于Ant的打包工具，grunt更加灵活，语法采用json，比xml语法更加简洁，作为前端工程师可能更喜欢写json。
Grunt是基于nodejs的，所以安装GruntJS之前，需要保证你的电脑有nodejs环境，node环境比之前安装简单多了，现在windows平台只需要下载node安装程序，一路next就可以了。
livereload是一个web开发辅助工具，当我们修改完html、css和js的时候会自动刷新浏览器，解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率。livereload有很多版本，比如基于ruby的版本，我们今天介绍的是node+grunt+chrome插件一体化方案。
我们使用的这个livereload的基本原理是试用node开启一个websocket服务，并且检测文件变化，浏览器打开一个页面时候，引入固定的livereload.js（chrome插件会帮忙加上）会建立ws请求，当node检测到文件变化，则自动推送消息给浏览器，实现刷新。
昨天看了阮一峰老师的文章：《相似图片搜索原理》，于是把直方图和向量那块算法用js实现了一下，
源码如下：
function getHistogram(imageData) {
var arr = [];
for (var i = 0; i < 64; i++) {
arr[i] = 0;
}
var data = imageData.data;
var pow4 = Math.pow(4, 2);
for (var i = 0, len = data.length; i < len; i += 4) {
var red = (data[i] / 64) | 0;
var green = (data[i + 1] / 64) | 0;
var blue = (data[i + 2] / 64) | 0;
var index = red * pow4 + green * 4 + blue;
arr[index]++;
}
return arr;
}
function cosine(arr1, arr2) {
var axb = 0,
a = 0,
b = 0;
for (var i = 0, len = arr1.length; i < len; i++) {
axb += arr1[i] * arr2[i];
a += arr1[i] * arr1[i];
b += arr2[i] * arr2[i];
}
return axb / (Math.sqrt(a) * Math.sqrt(b));
}
function gray(imgData) {
var data = imgData.data;
for (var i = 0, len = data.length; i < len; i += 4) {
var gray = parseInt((data[i] + data[i + 1] + data[i + 2]) / 3);
data[i + 2] = data[i + 1] = data[i] = gray;
}
return imgData;
}
有个问题，假如图片是灰色的跟原图进行比较，那么要比较相似度，需要将图片都转成灰色的，即使用上面代码的gray函数来处理
这是一个很基础的问题，但是我们往往经常做错。
当一个数组需要清空的时候，很多人使用下面的方法：
a = [];
我们知道javascript变量存储方式分为引用类型和直接量。数组属于对象，即引用类型，引用的是变量指针地址，之所以这样设计也是为了节省内存。
再说到上面的请空数组的方式，如果采用直接赋值一个新数组的方式，那么之前引用的数组可能不会被释放（有其他的引用），例如下面的代码：
var a = [2,3];
var b = a;
a = [];
console.log(b);
这时候a和b就不是同一个数组了，清空了a而b还是指到之前的引用地址，除非你是故意的，否则这将会有隐患。
所以最佳的请空数组方式是：将length设置为0，即：
a.length = 0;
在《javascript canvas图片像素》中提到了类型数组（Typed Array），javascript这是一种快速操作二进制数据的解决方案。
随着web发展和html5的推进，javascript来处理音视频、二进制文件和网络协议等都成为了可能，这时候原生的数组Array已经不能够满足需求，需要一种快速操作二进制流的东东产生，于是ArrayBuffer类型和Typed Array诞生了。
类型化数组类型表示可编制索引和操纵的ArrayBuffer对象的各种识图。所有数组类型的长度固定不变。如下表所示：
| 名称 | 大小（以字节为单位） | 说明 |
|---|---|---|
| Int8Array | 1 | 8 位二补码有符号整数 |
| Uint8Array | 1 | 8 位无符号整数 |
| Int16Array | 2 | 16 位二补码有符号整数 |
| Uint16Array | 2 | 16 位无符号整数 |
| Int32Array | 4 | 32 位二补码有符号整数 |
| Uint32Array | 4 | 32 位无符号整数 |
| Float32Array | 4 | 32 位 IEEE 浮点数 |
| Float64Array | 8 | 64 位 IEEE 浮点数 |
html5的canvas可以进行图片处理，图片是由像素组成的。我们知道canvas有方法getImageData，返回的对象中可以取出，image的data 数组（类似数组的Type Array类型数组，Uint8ClampedArray）。
假设canvas宽高是500*400，那么应该有200000个像素点，而通过getImageData().data获取的data数组的length是800000。
我们还知道rgba表示颜色的方法：
即红绿蓝三原色和透明值。
所以这个data数组是每四个数组值代表一个像素点。这样一来，一个图像就转化成了数据表示的数组。如下面的代码：
var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
ctxt.drawImage(img, 0, 0);
var data = ctxt.getImageData(0, 0, 480, 480).data;
console.log(data, data.toString());
}
img.src = 'img/pic.jpg';
如上面的代码，我们可以看到数组data就是图片转换成的数组，那么遍历这个数组就可以取得图片的像素点内容：
var data = ctxt.getImageData(0, 0, 480, 480).data;
for(var i =0,len = data.length; i<len;i+=4){
var red = data[i],
green = data[i+1],
blue = data[i+2],
alpha = data[i+3];
}