推荐nodeppt:使用markdown语法来写网页ppt

nodePPT@三水清基于nodejs来写的网页PPT,之前的版本仅仅是html语法,现在可以支持通过markdown来写网页ppt了。

nodeppt Demo

查看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

谈敏捷开发

这年头不做敏捷开发都不好意思说自己是做软件开发的。很多人都知道敏捷开发或者项目就在敏捷开发中,但是越来越多的人对敏捷开发表示不理解了。我经常听身边的人问:敏捷是什么?究竟什么才是敏捷开发?难道敏捷开发就是这样吗?

这就跟早上正常点上个班,周末加个班就喊“狼性”是一个道理:很多人认为早上开站立会就是敏捷了!

敏捷开发和每日站会的关系

如果要问:敏捷开发和站会是什么关系?我想说:的确有关系,但要知道不是你把敏捷的流程都走一遍就真的敏捷了。

scrum会议可以分为:sprint计划会,每日站会,评审会和回顾会。

博客迁移到github

用了好久wordpress,从开始用别人的主题,到后来自己做wordpress主题,博客也有小半年没更新了。其实很早就有迁移的想法了,但是一直很懒,这次趁着数据库出错,就迁移到github了。

这样一来写博客,写wiki,甚至写ppt都用markdown语法,关于用markdown语法写ppt,可以看下我写的一个nodeppt,可以方便用markdown语法来写网页版的幻灯片,效果还是不错哈。

这次使用的是hexo,hexo是台湾同胞开发的,用起来还是很顺手的。之前wordpress的内容,可以通过xml导入。

本来300多篇的文章,从08年在学校开始,从2fool.cn开始,一直到现在的js8.in,经历了5个多年头了,当然文章也每次迁移少一部分,这次迁移只保留了不到200篇。

FIS和FISP使用心得

fis的wiki整理的不是很好,结合最近几天的体会,整理了FIS常用的功能,加上自己对fis的理解,整理了这篇文章

FIS 和 FISP

fis是百度的开源的前端开发解决方案,另外还有个fisp(即fis-plus,前身是fis-pc),fisp可以说是百度业务定制版,主要集成(并扩展)了smarty模板,本地调试等功能。

fisp是在fis基础上做的一层封装,订制了一些 config 配置,所以一些fis的配置,在fisp里面是会自动忽略,不会生效的,比如说jswraper配置。

FIS原理

fis其实是一个 半成品 ,只有经过更多的包装(例如插件)才能发挥最大的作用,fis的核心是生成的 map.json ,很多想法可以通过 map.json 这个表来实现。比如我自己订制的require inline方式。

fisp结合 map.jsonFISSource.class.php ,对smarty语法进行了扩展,扩展出来了 html、widget、require、script等smarty自定义标签。

想了解详情的童鞋,可以直接看下fisp的 plugin

FISP环境部署

安装

  • 安装node环境
  • 配置java环境,并放入环境变量
  • 安装php环境,并且将php.exe放进环境变量

然后进入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——前端任务管理工具

Gruntjs是前端项目构建工具,基于node的命令行工具。很多公司或者js项目都是用gruntjs来搭建,例如jQuery,twitter,Qunit等。主要功能有:

  • 合并文件
  • 压缩html/js/css/图片文件
  • 语法检测
  • 单元测试(基于Qunit)
  • watch功能

相对于Ant的打包工具,grunt更加灵活,语法采用json,比xml语法更加简洁,作为前端工程师可能更喜欢写json。

GruntJS的安装

Grunt是基于nodejs的,所以安装GruntJS之前,需要保证你的电脑有nodejs环境,node环境比之前安装简单多了,现在windows平台只需要下载node安装程序,一路next就可以了。

双屏切图:使用livereload实现自动刷新

livereload是一个web开发辅助工具,当我们修改完html、css和js的时候会自动刷新浏览器,解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率。livereload有很多版本,比如基于ruby的版本,我们今天介绍的是node+grunt+chrome插件一体化方案。

我们使用的这个livereload的基本原理是试用node开启一个websocket服务,并且检测文件变化,浏览器打开一个页面时候,引入固定的livereload.js(chrome插件会帮忙加上)会建立ws请求,当node检测到文件变化,则自动推送消息给浏览器,实现刷新。

livereload环境搭建

  • nodejs安装
  • grunt安装
  • grunt-contrib-watch:npm install grunt-contrib-watch –save-dev
  • grunt-livereload:npm install grunt-livereload –save-dev
  • chrome插件:安装

javascript实现比较相似图片算法

昨天看了阮一峰老师的文章:《相似图片搜索原理》,于是把直方图和向量那块算法用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函数来处理

怎么清空javascript数组

这是一个很基础的问题,但是我们往往经常做错。

当一个数组需要清空的时候,很多人使用下面的方法:

a = [];

我们知道javascript变量存储方式分为引用类型和直接量。数组属于对象,即引用类型,引用的是变量指针地址,之所以这样设计也是为了节省内存。

再说到上面的请空数组的方式,如果采用直接赋值一个新数组的方式,那么之前引用的数组可能不会被释放(有其他的引用),例如下面的代码:

var a = [2,3];
var b = a;
a = [];
console.log(b);

这时候a和b就不是同一个数组了,清空了a而b还是指到之前的引用地址,除非你是故意的,否则这将会有隐患。

所以最佳的请空数组方式是:将length设置为0,即:

a.length = 0;

javascript的类型数组(Typed Array)

在《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 图片像素

html5 canvas图像转换成数组

html5的canvas可以进行图片处理,图片是由像素组成的。我们知道canvas有方法getImageData,返回的对象中可以取出,image的data 数组(类似数组的Type Array类型数组,Uint8ClampedArray)。

假设canvas宽高是500*400,那么应该有200000个像素点,而通过getImageData().data获取的data数组的length是800000。

我们还知道rgba表示颜色的方法:

  • r=red
  • g=green
  • b=blue
  • a=alpha

即红绿蓝三原色和透明值。

所以这个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];

}