nodePPT是@三水清基于nodejs来写的网页PPT，之前的版本仅仅是html语法，现在可以支持通过markdown来写网页ppt了。nodeppt Demo查看demo：http://qdemo.sinaapp.com/安装nodepptnpm install -g nodeppt##使用nodeppt命令行启动nodeppt start -p port # or nodeppt start -p port -d path/for/ppts创建支持markdown语法快速创建网页幻灯片。nodeppt create ppt-name按照提示输入基本信息后就可以创建，默认创建是markdown版本，如果需要创建html版本，可以使用：nodeppt create ppt-name.html # or nodeppt create ppt-name.htmnodeppt markdown语法说明nodeppt是支持marked语法的，但是为了制作出来更加完美的ppt，扩展了下面的语法配置基本配置如下：title: 这是演讲的题目 speaker: 演讲者名字 url: 可以设置链接 transition: 转场效果，例如：zoomin files: 引入js和css的地址，如果有的话~自动放在页面底部目录关系：可以在md同级目录下创建img、js、css等文件夹，然后在markd ...继续阅读 (38)

这年头不做敏捷开发都不好意思说自己是做软件开发的。很多人都知道敏捷开发或者项目就在敏捷开发中，但是越来越多的人对敏捷开发表示不理解了。我经常听身边的人问：敏捷是什么？究竟什么才是敏捷开发？难道敏捷开发就是这样吗？这就跟早上正常点上个班，周末加个班就喊“狼性”是一个道理：很多人认为早上开站立会就是敏捷了！敏捷开发和每日站会的关系如果要问：敏捷开发和站会是什么关系？我想说：的确有关系，但要知道不是你把敏捷的流程都走一遍就真的敏捷了。scrum会议可以分为：sprint计划会，每日站会，评审会和回顾会。个人认为：敏捷提到的站会只是一天固定时间沟通的会议，主要目的还是跟进进度、暴漏问题，PO和SM意图通过站会来完成自己的职责：协调资源，解决项目的障碍保证项目进度保证团队内角色之间的协作团队跟其他团队的接口人，协调沟通而现实中的站会可能是下面的样子：PM忙着改需求RD讨论解决方案UE听不懂，在打哈欠QA在报bug敏捷开发究竟是怎样的敏捷开发是一套经过多年实践而总结出来的一套方法论。所以不要神化，更不要跟风，适合自己的team就好。敏捷总结了一些项目中常常遇见的问题，并且想通过敏捷的流程来避免这些问题。而现在很多公司很多项目用了敏捷（或者敏捷扩展版），实际参加敏捷的童鞋并没有“敏捷”，而是在抱怨：为什么这么多流程？为什么这么多会议？究竟错在哪里？？！往往大公司一个项目需要牵扯太多人，一次（预） ...继续阅读 (8)

用了好久wordpress，从开始用别人的主题，到后来自己做wordpress主题，博客也有小半年没更新了。其实很早就有迁移的想法了，但是一直很懒，这次趁着数据库出错，就迁移到github了。这样一来写博客，写wiki，甚至写ppt都用markdown语法，关于用markdown语法写ppt，可以看下我写的一个nodeppt，可以方便用markdown语法来写网页版的幻灯片，效果还是不错哈。这次使用的是hexo，hexo是台湾同胞开发的，用起来还是很顺手的。之前wordpress的内容，可以通过xml导入。本来300多篇的文章，从08年在学校开始，从2fool.cn开始，一直到现在的js8.in，经历了5个多年头了，当然文章也每次迁移少一部分，这次迁移只保留了不到200篇。因为之前的文章有一部分html格式用hexo的插件转不过来，所以自己简单写了个脚本来转，内容如下：var fs = require('fs'); var path = require('path'); var _ = require('../node_modules/hexo-migrator-wordpress/node_modules/underscore/underscore.js'); function recurse(rootdir, callback, subdir, judgeFunction) ...继续阅读 (24)

fis的wiki整理的不是很好，结合最近几天的体会，整理了FIS常用的功能，加上自己对fis的理解，整理了这篇文章FIS 和 FISPfis是百度的开源的前端开发解决方案，另外还有个fisp（即fis-plus，前身是fis-pc），fisp可以说是百度业务定制版，主要集成（并扩展）了smarty模板，本地调试等功能。fisp是在fis基础上做的一层封装，订制了一些config配置，所以一些fis的配置，在fisp里面是会自动忽略，不会生效的，比如说jswraper配置。FIS原理fis其实是一个半成品，只有经过更多的包装（例如插件）才能发挥最大的作用，fis的核心是生成的map.json，很多想法可以通过map.json这个表来实现。比如我自己订制的require inline方式。fisp结合map.json和FISSource.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 ...继续阅读 (30)

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就可以了。安装grunt-cli在命令行中，执行npm install -g grunt-cli，来安装grunt-cli安装grunt插件在项目路径下的命令行中，输入npm install grunt-plugin-name --save-dev就可以完成插件安装，或者直接修改grunt的package.json，然后执行npm install，npm会自动安装想用插件。创建GruntJS管理项目每个GruntJS都包括两个文件：package.json：依赖模块+你可能用到的变量和说明，例如：version、nameGruntfile.js：node module写法的任务管理文件package.j ...继续阅读 (16)

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-devgrunt-livereload：npm install grunt-livereload –save-devchrome插件：安装编写grunt的Gruntfile.js文件进入项目根目录，安装grunt基本服务（参考grunt使用介绍），然后修改Gruntfile.js内容，添加如下：livereload: { options: { base: 'public', }, files: ['src/**/*'] ...继续阅读 (30)

昨天看了阮一峰老师的文章：《相似图片搜索原理》，于是把直方图和向量那块算法用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 ...继续阅读 (22)

这是一个很基础的问题，但是我们往往经常做错。当一个数组需要清空的时候，很多人使用下面的方法：a = [];我们知道javascript变量存储方式分为引用类型和直接量。数组属于对象，即引用类型，引用的是变量指针地址，之所以这样设计也是为了节省内存。再说到上面的请空数组的方式，如果采用直接赋值一个新数组的方式，那么之前引用的数组可能不会被释放（有其他的引用），例如下面的代码：var a = [2,3]; var b = a; a = []; console.log(b);这时候a和b就不是同一个数组了，清空了a而b还是指到之前的引用地址，除非你是故意的，否则这将会有隐患。所以最佳的请空数组方式是：将length设置为0，即：a.length = 0; ...继续阅读 (11)

在《javascript canvas图片像素》中提到了类型数组（Typed Array），javascript这是一种快速操作二进制数据的解决方案。随着web发展和html5的推进，javascript来处理音视频、二进制文件和网络协议等都成为了可能，这时候原生的数组Array已经不能够满足需求，需要一种快速操作二进制流的东东产生，于是ArrayBuffer类型和Typed Array诞生了。类型数组介绍类型化数组类型表示可编制索引和操纵的ArrayBuffer对象的各种识图。所有数组类型的长度固定不变。如下表所示：名称大小（以字节为单位）说明Int8Array18 位二补码有符号整数Uint8Array18 位无符号整数Int16Array216 位二补码有符号整数Uint16Array216 位无符号整数Int32Array432 位二补码有符号整数Uint32Array432 位无符号整数Float32Array432 位 IEEE 浮点数Float64Array864 位 IEEE 浮点数多个类型的数组视图可以指向一个ArrayBuffer，例如下面的代码：// 创建一个16字节的ArrayBuffer var arrayBuffer = new ArrayBuffer(8); //创建一个8位无符号整形类型数组 var u8 = new Uint8Array(array ...继续阅读 (20)

html5 canvas图像转换成数组html5的canvas可以进行图片处理，图片是由像素组成的。我们知道canvas有方法getImageData，返回的对象中可以取出，image的data 数组（类似数组的Type Array类型数组，Uint8ClampedArray）。假设canvas宽高是500*400，那么应该有200000个像素点，而通过getImageData().data获取的data数组的length是800000。我们还知道rgba表示颜色的方法：r=redg=greenb=bluea=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 = 'im ...继续阅读 (17)

可执行代码ECMAScript 5th规定了3种可执行代码：Global code、Eval code和Function code。根据名字就已经知道，Global code和Eval code分别对应全局代码和eval函数中执行的代码。三种可执行代码中最为复杂的就是Function code，即函数代码。因为javascript的特性，所以Function code中还可以嵌入Function code，导致了Function的执行环境会较为复杂。执行环境（执行上下文）当javascript引擎开始执行（进入）一段可执行代码时，就会生成一个执行环境（Execution Context，或称执行上下文）。javascript引擎通过一个栈（Stack）来维护执行环境，当进入一个执行环境，则将当前运行的执行环境压入到这个栈的顶部，代码表示：var ECStack = [];//维护执行环境的栈 function enterExecutabCode(){ var ec = new ExecutionContext(); ECStack.push(ec); }一个执行环境是由：LexicalEnvironment、VariableEvironment和ThisBinding组成的。function ExecutionContext(){ return { ...继续阅读 (22)

自己写了一个js模块加载器，所谓的并行其实也不完全是并行的，只是依赖关系模块是并行的。当然我知道现在有很多类似的js框架，而且MixJS也没有做更加全面的浏览器测试，只是跟我的意识写的一个加载器。项目放在github上面：https://github.com/ksky521/MixJS算是给2012年的一个总结。简单说下功能跟玉伯的Seajs不同，也跟CMD和AMD不同，我使用的是依赖关系明确的声明模块方式，这样减少了扫描代码读取依赖关系的方式，开发者虽然有了一定的束缚，但是总体来说，后期的维护成本，代码效率和实时combo、上线打包都会大大的降低成本。MixJS介绍轻量级前端模块化解决方案，提供模块管理、php实时合并、打包工具等方案。可以用于提供给第三方开发者使用的小组件，核心文件可以单独拿出来作为框架core，在此基础上可以开发出一整套的前端框架MixJS还在开发完善阶段，未作完整兼容性测试，多数代码是出于解决问题的想法而写的，当然也copy了很多牛人的代码，比如cssload回调借鉴了seajs，Deferred来自于jQuery。。。。。。。。鉴于最近前端圈比较乱，我的小手都开始颤抖，造轮子必然会被喷，我只能说我是根据自己的意识码了这些的代码，据此操作后果自负。。。。0.2开发完成，现在开发基于0.2模块的开放平台部分代码，主要包括：Deferred（延迟队列）、API（ ...继续阅读 (13)

对于javascript作用域的理解，之前整理过两篇文章：《javascript作用域和作用域链》《javascript的词法作用域》。最近读了周爱民老师的《javascript语言精髓》，对javascript作用域有了新的认识，特地整理下思路。javascript的作用域广义来分：语法作用域和变量作用域。javascript语法作用域javascript语法作用域是讨论代码的组织结构上抽象，可以理解为讨论的是“圈地”问题，也有书籍中对纯粹的语法作用域称为“静态作用域”。语法作用域分四级，下标依次增高级别作用域级别一表达式级别二语句/批语句级别三函数级别四全局（宿主）同级别可以平行也可以相互嵌套（包含）高级别可以嵌套（包含）低级别低级别不可以嵌套（包含）高级别作用域；假如低级别嵌套高u别，可以理解成相互平行，例如下面的代码是完全等效的if(true){ // function fn(){ // } } if(true){ // } function fn(){ // }批语句作用域批语句作用域的“{}”是用来声明被影响的代码，如果单纯理解为复合语句的“{}”则会报错，例如下面的代码：try var a = 2; catch(e);批语句作用域包括：try{}catch(e){}finally{}和switchfor ...继续阅读 (16)

即上篇文章《手机百度前端工程化之路》，接下来会写几篇文章详细介绍下提到的具体方案，本文介绍：前端js模块库。目标重复代码抽离模块间依赖关系明确方便静态资源管理误入歧途刚开始想给项目做个js基础库的时候，正值手机一个重要版本开发，遇见的问题是引入了zepto.js作为基础库之后，页面性能急剧下降，滑动页面都很卡顿，经过排查发现是zepto默认绑定了一个window的scroll事件导致。于是想，为什么不自己重造个轮子？而且zepto也不过短短千行代码而已！说干就干，当自己实现了一些基础函数（此部分就是后来Bdbox库的core部分）和Ajax之后，发现没有什么可以写的了。原因如下：选择器直接使用document.querySelector*系足矣事件绑定直接使用addEventlistener足矣ajax部分已经写完了DOM操作和class操作部分，手写即可于是跟组里宣布：大家都是用Bdbox吧！但是问题接踵而至，团队成员隔段时间就来找我：为什么没有zepto的xx功能？于是我就实现了xx功能，如此一两天时间内，我实现了：class操作函数event类函数，包括delegate函数简单的DOM操作类函数经过这一两天的折腾，似乎明白了：我们组需要的是一个zepto，Bdbox不是一个基础库！其实这个跟团队的开发效率和整体技术能力有关系。在手机百度大版本的排期中，团队成员都追求开发效率， ...继续阅读 (21)

nodePPT是@三水清基于nodejs来写的网页PPT，之前的版本仅仅是html语法，现在可以支持通过markdown来写网页ppt了。nodeppt Demo查看demo：http://qdemo.sinaapp.com/安装nodeppt1npm install -g nodeppt使用nodeppt命令行启动1 2 3nodeppt start -p port# ornodeppt start -p port-dpath/for/ppts创建支持markdown语法快速创建网页幻灯片。1nodeppt create ppt-name按照提示输入基本信息后就可以创建，默认创建是markdown版本，如果需要创建html版本，可以使用：1 2 3nodeppt create ppt-name.html# ornodeppt create ppt-name.htmnodeppt markdown语法说明nodeppt是支持marked语法的，但是为了制作出来更加完美的ppt，扩展了下面的语法配置基本配置如下：1 2 3 4 5title: 这是演讲的题目 speaker: 演讲者名字 url: 可以设置链接 transition: 转场效果，例如：zoomin files: 引入js和css的地址，如果有的话~自动放在页面底部目录关系：可以在md同级目录下创建img、js、css ...继续阅读 (19)

本文将围绕我半年来在移动前端工程化做的一些工作做的总结，主要从localstorage缓存和版本号管理，模块化，静态资源渲染方式三个方面总结手机百度前端一年内沉淀的解决方案，希望对大家移动开发有所帮助。一年前存在的问题可能因为之前项目节奏紧，人力不足原因，一部分phper承担了前端的工作，于是暴漏了一些问题。粗暴的一刀切从第一次在厂子写代码开始，就被前辈告诉移动页面，所以的静态资源都要内嵌，即写在script和style内，这样的好处是，网络情况不好的时候，减少http请求。因为2G等网络不稳定的情况下，多开一个http请求，对手机资源消耗是巨大的，比如我们在手机信号不好的地方，访问网络，耗电量会急剧增高。但是随着3G，甚至4G的普及，实际统计显示，手机百度上2G用户不到30%，所以上面提到的这种一刀切的方案是不妥的。不成规矩第二个问题是没有规范和模块化的问题。大家写码都是意识流，除了都是用zepto.js之外，没有沉淀下模块。碰到以前写过的代码，都是ctrl+c+ctrl+v。这种粗放的方式，虽然可以暂时解决问题，但是当出现之前的一段代码不能满足需求的时候（比如新版app发布，之前的代码需要做兼容和升级），需要遍历所有的代码，挨个修改，麻烦！高度耦合的工作流程第三个问题是前端角色问题，现在组内的开发是前后端分离的，使用smarty模板，因为产品是hybridAPP，所以较传统前端 ...继续阅读 (18)

上篇已经说了怎么越狱，因为我的pw2是日版的，发现很耗电，删除了很多书了，还是三四天就开始出没电报警了。通过越狱后可以关掉索引，这样耗电量就小好多了，到现在一周了，电量还没消耗掉50%（最近一天看书2小时左右），这对于我来说已经很满意了。ssh登录kindle按照上篇操作，越狱之后 ，在搜索输入框内输入;711就可以看到自己现在wifi的ip。生成SSH密钥为了每次方便，我使用了puttygen.exe生成了ssh密钥。操作跟github的一样，打开puttygen.exe，点击Generate然后鼠标在key下面来回晃动，生成一个key，将生成的key复制，保存为：authorized_keys。点击save private key，将生成的密钥保存在硬盘上，例如：c:\private-key-for -kpw.ppk。usb连上kindle，放在usbnet/etc文件夹下。SSH连接kindle按照上篇中【安装USBNetwork】操作，打开wifi连接ssh。使用;711查询出kindle在现在网络的ip。打开winscp，新建一个ssh会话，例如：sftp://192.168.xxx.xxx，用户名是root，端口22，用户密钥文件，选择上面保存的ppk地址，例如c:\private-key-for -kpw.ppk然后点击登录，就可以登录kindle了。关闭索引kind ...继续阅读 (20)

买了kindle有一段时间了，发现电池并没有官方说的那么给力，我的pw2是从日本托朋友代购的，发现充电满了一天就差不多掉1/3的样子，曾经打电话给国内的亚马逊寻求帮助，但是国内亚马逊以国内还没上线为由没给我处理，要我自己到日亚提问？！上网查了下，听说关掉索引会解决这个问题，于是我就一直琢磨这怎么越狱。kindle越狱工具我的越狱工具是从mobileread下载的：http://www.mobileread.com/forums/showthread.php?t=186645。kindle越狱首先解压上面下载的kindle-jailbreak.zip越狱工具，得到三个文件：bridge.shjb.shupdatejb$(cd mnt && cd us && sh jb.sh).bin将这个这三个文件copy到kindle的根目录下，然后断开USB连接，返回kindle[主页]，点击[菜单]中的[设置]，进入设置页面之后，再点击[菜单]选择[更新设备]，这时候会执行bin文件，过一会儿之后，你就会在这个界面下面看到JAILBREAK就表示已经越狱成功了安装启动器KUAL安装插件之前需要安装KUAL作为启动器。启动器下载地址：http://www.mobileread.com/forums/showthread.php?t=203326下载prerequisites-all-suppor ...继续阅读 (11)

在iOS中，需要调起一个app可以使用schema协议，这是iOS原生支持的，并且因为iOS系统中都不能使用自己的浏览器内核，所以所有的浏览器都支持，这跟android生态不一样，android是可以自己搞内核的，但是iOS不行。在iOS中提供了两种在浏览器中打开APP的方法：Smart App Banner和schema协议。Smart App Banner即通过一个meta 标签，在标签上带上app的信息，和打开后的行为，例如：app-id之类的，代码形如：1具体可以看下开发文档：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html今天Smart APP Banner不是我们的主角，我们说的是schema使用schema URL来打开iOS APPschema类似自定义url协议，我们可以通过自定义的协议来打开自己的应用，形如：1 2 3 4 5 6 7myapplink://# 例如 facebook的fb://# itunes的itms-apps://# 还有短信也是类似的sms://如果要打开一个app，最简单 ...继续阅读 (53)

因为之前的乐谷云集找不到老巢了，官网都挂了，网上说是跑路了，虽然之前有人联系过我说是有他们公司接管，但是等出现问题联系的时候，却是找不到人。所以决定更换vps。简单记录下用到的这次vps迁移用到的命令。新的vps是用的centos 32。登陆后更换密码连上ssh之后，第一件事情就是更换root密码，用到的命令是passwd连续两次输入新的密码就可以。添加新用户wwwpasswd www继续数据www的密码。就可以添加安装软件包命令Yumubuntu的包管理软件是app-get，centos的包管理软件是yum，因为我的vps是centos，所以使用yum。1 2 3 4# 安装yum install xxx# 删除yum remove httpd因为我使用的是lnmp，所以对于默认安装的apache可以删除，使用yum remove httpd。使用screen来管理对话经常就是遇见网络连接不好，ssh中断，那么执行的程序就不知道会不会成功，所以有了screen。如果使用screen --help没有命令，那么需要安装下：yum install screenscreen常用命令1 2 3 4 5 6 7 8# 创建screen对话screen -S lnmp# 查看现在运行的screenscreen -ls# 读取某个screenscreen -r lnmp# 退出screen，在 ...继续阅读 (17)

在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。Weinre移动调试DOM 断点debugger断点native方法hook远程映射本地调试Weinre在移动上面开发调试是很复杂的，所以就有了weinre。安装weinre可以实现pc来调试手机页面，所以对于移动开发调试是很重要的哦~安装weinreweinre可以通过npm来安装：1npm install -g weinre安装完之后，可执行下面的命令来启动：1weinre --httpPort8080--boundHost -all-这样访问自己的127.0.0.1:8080按照提示在需要调试页面中插入一段js，然后就可以调试了。操作界面类似Chrome的 DevTools，具体操作可以看下http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html教程原理通过在需要调试的页面中引入一段weinre的js，实现pc和手机的socket通信，从而实现实时调试。Tips如果你嫌每次都要在调试的页面引入js麻烦，可以做个书签或者chrome插件如果嫌安装麻烦，可以使用phonegap的weinre：http://debug.phonegap.com/DOM断点DOM断点是一个Firebug和chrome DevTools提供的功能，当j ...继续阅读 (14)

最近看老外的ppt，看到了句话：Use tools. not rules!所以今天介绍个利器：liveStyle，liveStyle是Emmet团队开发的，Emmet就是大名鼎鼎的zen coding啊。其实在订阅的weekly里面早就介绍过livestyle，真正用起来还是看了上面老外的这个ppt，试用了下liveStyle，结果一下子就喜欢上了，如果你开发遇见了下面的问题就可以使用liveStyle了：在chrome DevTools中修改了样式，想同步到css文件中修改了css文件，不想刷新chrome，就可以实时看到效果嗯，livestyle解决了这两个问题，提高了开发效率！livestyle安装安装sublime text的liveStyle插件在package control搜索livestyle就可以了，或者去官方下载安装chrome扩展通过这个网址，安装livestyle，如果打不开，可能需要准备梯子，你懂的~ 感谢裆~安装后，在chrome中按F12打开DevTools就可以看到在console后面多了个LiveStyle面板。使用livestyle用sublime text 打开一个css文件，例如a.css随便打开个网址，然后F12切换到LiveStyle选中Enable LiveStyle for current page，这时会把页面的所有css都列出来选 ...继续阅读 (7)

这年头不做敏捷开发都不好意思说自己是做软件开发的。很多人都知道敏捷开发或者项目就在敏捷开发中，但是越来越多的人对敏捷开发表示不理解了。我经常听身边的人问：敏捷是什么？究竟什么才是敏捷开发？难道敏捷开发就是这样吗？这就跟早上正常点上个班，周末加个班就喊“狼性”是一个道理：很多人认为早上开站立会就是敏捷了！敏捷开发和每日站会的关系如果要问：敏捷开发和站会是什么关系？我想说：的确有关系，但要知道不是你把敏捷的流程都走一遍就真的敏捷了。scrum会议可以分为：sprint计划会，每日站会，评审会和回顾会。个人认为：敏捷提到的站会只是一天固定时间沟通的会议，主要目的还是跟进进度、暴漏问题，PO和SM意图通过站会来完成自己的职责：协调资源，解决项目的障碍保证项目进度保证团队内角色之间的协作团队跟其他团队的接口人，协调沟通而现实中的站会可能是下面的样子：PM忙着改需求RD讨论解决方案UE听不懂，在打哈欠QA在报bug敏捷开发究竟是怎样的敏捷开发是一套经过多年实践而总结出来的一套方法论。所以不要神化，更不要跟风，适合自己的team就好。敏捷总结了一些项目中常常遇见的问题，并且想通过敏捷的流程来避免这些问题。而现在很多公司很多项目用了敏捷（或者敏捷扩展版），实际参加敏捷的童鞋并没有“敏捷”，而是在抱怨：为什么这么多流程？为什么这么多会议？究竟错在哪里？？！往往大公司一个项目需要牵扯太多人，一次（预） ...继续阅读 (12)

用了好久wordpress，从开始用别人的主题，到后来自己做wordpress主题，博客也有小半年没更新了。其实很早就有迁移的想法了，但是一直很懒，这次趁着数据库出错，就迁移到github了。这样一来写博客，写wiki，甚至写ppt都用markdown语法，关于用markdown语法写ppt，可以看下我写的一个nodeppt，可以方便用markdown语法来写网页版的幻灯片，效果还是不错哈。这次使用的是hexo，hexo是台湾同胞开发的，用起来还是很顺手的。之前wordpress的内容，可以通过xml导入。本来300多篇的文章，从08年在学校开始，从2fool.cn开始，一直到现在的js8.in，经历了5个多年头了，当然文章也每次迁移少一部分，这次迁移只保留了不到200篇。因为之前的文章有一部分html格式用hexo的插件转不过来，所以自己简单写了个脚本来转，内容如下：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60varfs =require('fs');varpath =require('p ...继续阅读 (24)

fis的wiki整理的不是很好，结合最近几天的体会，整理了FIS常用的功能，加上自己对fis的理解，整理了这篇文章FIS 和 FISPfis是百度的开源的前端开发解决方案，另外还有个fisp（即fis-plus，前身是fis-pc），fisp可以说是百度业务定制版，主要集成（并扩展）了smarty模板，本地调试等功能。fisp是在fis基础上做的一层封装，订制了一些config配置，所以一些fis的配置，在fisp里面是会自动忽略，不会生效的，比如说jswraper配置。FIS原理fis其实是一个半成品，只有经过更多的包装（例如插件）才能发挥最大的作用，fis的核心是生成的map.json，很多想法可以通过map.json这个表来实现。比如我自己订制的require inline方式。fisp结合map.json和FISSource.class.php，对smarty语法进行了扩展，扩展出来了 html、widget、require、script等smarty自定义标签。想了解详情的童鞋，可以直接看下fisp的plugin。FISP环境部署安装安装node环境配置java环境，并放入环境变量安装php环境，并且将php.exe放进环境变量然后进入cmd，依次执行：1 2 3 4 5 6 7 8 9 10 11#安装fis-plus$ npm install -g fis-plus# ...继续阅读 (30)

昨天看了阮一峰老师的文章：《相似图片搜索原理》，于是把直方图和向量那块算法用js实现了一下，源码如下：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37functiongetHistogram(imageData){vararr = [];for(vari =0; i <64; i++) { arr[i] =0; }vardata = imageData.data;varpow4 =Math.pow(4,2);for(vari =0, len = data.length; i < len; i +=4) {varred = (data[i] /64) |0;vargreen = (data[i +1] /64) |0;varblue = (data[i +2] /64) |0;varindex = red * pow4 + green *4+ blue; arr[index]++; }returnarr; }functioncosine(arr1, arr2){varaxb =0, a =0, b =0;for(vari =0, len = arr1.l ...继续阅读 (10)

在《javascript canvas图片像素》中提到了类型数组（Typed Array），javascript这是一种快速操作二进制数据的解决方案。随着web发展和html5的推进，javascript来处理音视频、二进制文件和网络协议等都成为了可能，这时候原生的数组Array已经不能够满足需求，需要一种快速操作二进制流的东东产生，于是ArrayBuffer类型和Typed Array诞生了。类型数组介绍类型化数组类型表示可编制索引和操纵的ArrayBuffer对象的各种识图。所有数组类型的长度固定不变。如下表所示：名称大小（以字节为单位）说明Int8Array18 位二补码有符号整数Uint8Array18 位无符号整数Int16Array216 位二补码有符号整数Uint16Array216 位无符号整数Int32Array432 位二补码有符号整数Uint32Array432 位无符号整数Float32Array432 位 IEEE 浮点数Float64Array864 位 IEEE 浮点数多个类型的数组视图可以指向一个ArrayBuffer，例如下面的代码：1 2 3 4 5 6 7 8// 创建一个16字节的ArrayBuffervararrayBuffer =newArrayBuffer(8);//创建一个8位无符号整形类型数组varu8 =newUint8Array ...继续阅读 (18)

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-devgrunt-livereload：npm install grunt-livereload —save-devchrome插件：安装编写grunt的Gruntfile.js文件进入项目根目录，安装grunt基本服务（参考grunt使用介绍），然后修改Gruntfile.js内容，添加如下：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23livereload: { option ...继续阅读 (30)

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就可以了。安装grunt-cli在命令行中，执行npm install -g grunt-cli，来安装grunt-cli安装grunt插件在项目路径下的命令行中，输入npm install grunt-plugin-name --save-dev就可以完成插件安装，或者直接修改grunt的package.json，然后执行npm install，npm会自动安装想用插件。创建GruntJS管理项目每个GruntJS都包括两个文件：package.json：依赖模块+你可能用到的变量和说明，例如：version、nameGruntfile.js：node module写法的任务管理文件package.j ...继续阅读 (21)

自己写了一个js模块加载器，所谓的并行其实也不完全是并行的，只是依赖关系模块是并行的。当然我知道现在有很多类似的js框架，而且MixJS也没有做更加全面的浏览器测试，只是跟我的意识写的一个加载器。项目放在github上面：https://github.com/ksky521/MixJS算是给2012年的一个总结。简单说下功能跟玉伯的Seajs不同，也跟CMD和AMD不同，我使用的是依赖关系明确的声明模块方式，这样减少了扫描代码读取依赖关系的方式，开发者虽然有了一定的束缚，但是总体来说，后期的维护成本，代码效率和实时combo、上线打包都会大大的降低成本。MixJS介绍轻量级前端模块化解决方案，提供模块管理、php实时合并、打包工具等方案。可以用于提供给第三方开发者使用的小组件，核心文件可以单独拿出来作为框架core，在此基础上可以开发出一整套的前端框架MixJS还在开发完善阶段，未作完整兼容性测试，多数代码是出于解决问题的想法而写的，当然也copy了很多牛人的代码，比如cssload回调借鉴了seajs，Deferred来自于jQuery。。。。。。。。鉴于最近前端圈比较乱，我的小手都开始颤抖，造轮子必然会被喷，我只能说我是根据自己的意识码了这些的代码，据此操作后果自负。。。。0.2开发完成，现在开发基于0.2模块的开放平台部分代码，主要包括：Deferred（延迟队列）、API（ ...继续阅读 (10)