前端开发

nodePPT使用nodejs写的，可以手机端控制pc端的演示文档框架。nodePPT是在webSlide基础上二次开发的，使用nodejs做服务器，通过websocket来实现手机端和PC的通信，主要功能是手机端可以控制pc端PPT播放进度，并且手机端可以给每张PPT做备注。

第一次做个程序的nodejs作品，并且测试时间比较短，肯定会有很多问题和bug，希望大家一起斧正。另外页面样式css高手可以自己写，包括动画自定义都可以在css文件中直接修改添加。

说明

因为是PPT演示文档，所以需要投影仪分辨率，所以演示页面的最佳分辨率为全屏模式下的 1024*768 ，如果在自己电脑上查看，可以通过 ctrl + - 和 ctrl + + 缩放到合适的比例查看效果。

建议浏览器chrome 16+，全屏模式（F11），以达到最佳动画效果。在Firefox下会出现拖尾现象，个人认为是Firefox 8下对CSS3动画效果渲染太慢导致，其他浏览器未测试。

nodePPT iphone手机端截图

使用说明

1. 配置route.json
2. 配置ppt的文件
3. 启动node：node server.js
4. PC访问：如127.0.0.1:3000/demo.ppt
5. 手机端访问：127.0.0.1:3000/ctrl
6. 手机端setup，选择控制用户后，开始控制

具体使用方法启动node server.js之后访问127.0.0.1:3000/index.ppt，里面有详细的介绍

快捷键

• 空格/→/↓/Tab/pageDown：下一页
• ←/↑/pageUp：上一页
• P：开画板
• C：清除画板

版本库地址

继续阅读全文……

昨天无意中看到一篇老外的文章，文章提到了addEventListener第二个参数可以传入object，并且对象中handleEvent为事件处理函数。例如下面的javascript代码：

var obj = {
	handleEvent: function() {
		alert('body clicked');
	}
};
document.body.addEventListener('click',obj,false);

测试发现这段代码在IE9+，chrome，FF，opera等浏览器是正确的（测试范围可能不够宽），而且可以成功的绑定click事件。在Qwrap群里一问才知道是DOM2中接口，很有意思的一个发现，@貘大大 也发微博说自己先入为主了，我相信很多人跟@貘大大 一样都先入为主了。

addEventListener的handleEvent应用

发现了这个“新大陆”有什么用法呢？哈哈~首先想到的是对象引用。看下面的javascript代码：

<script type="text/javascript">
var obj = {
handleEvent: function() {
	alert('body clicked');
}
};
document.body.addEventListener('click',obj,false);
function fn2(){
	obj.handleEvent = function(){
		alert('fn2');
	};
}
</script>
<button onclick="fn2();">change</button>

因为对象的引用关系，点击下button就可以切换绑定事件的处理函数，而不需要remove之前的事件，然后重新绑定一个新的处理函数。
继续阅读全文……

互联网公司内部难免会有些技术分享之类的活动，需要用到PPT，前端开发工程师都喜欢自己的PPT帅一点，当然我也一样。于是开始用impress.js做PPT，所以有了上一篇PPT《XSS注入和防范》。不过在用的过程中发现impress.js性能有问题，假如页面太多，或者图片太多，就会出现卡的现象。于是开始琢磨自己写个javascript演示文档框架。嗯，于是webSlide就诞生了！

webSlide是用于在线PPT演示文档的javascript框架

鸣谢

webSlide的想法来自于impress.js，但是本人在使用过程中发现impress.js经常卡，尤其是当演示文档页面和图片比较多之时，经常出现动画效果不流畅。

写webSlide代码过程中，研究过impress.js和reveal.js，向两位作者表示感谢。

演示页面

演示页面地址http://ksky521.github.com/webSlide/，由于页面比较多，所以需要一定的加载时间。

国内可以访问SAE上的演示页面：http://qdemo.sinaapp.com/ppt/udc.htm。

演示页面内容为给公司UDC部门同事进行javascript入门培训的内容~

说明

因为是PPT演示文档，所以需要投影仪分辨率，所以演示页面的最佳分辨率为全屏模式下的 1024*768 ，如果在自己电脑上查看，可以通过 ctrl + - 和 ctrl + + 缩放到合适的比例查看效果。

建议浏览器chrome 16+，全屏模式（F11），以达到最佳动画效果。在Firefox下会出现拖尾现象，个人认为是Firefox 8下对CSS3动画效果渲染太慢导致，其他浏览器未测试。

继续阅读全文……

最近练手php，一个地方需要缓存来支持，想来想去还是用memcached做缓存，可是电脑是windows系统，如果是linux系统安装memcached就比较容易，敲入几行shell就搞定，windows下还没搞过，于是记录下过程，备用。

Windows下的Memcache安装

1、下载memcache for windows。下载地址：http://jehiah.cz/projects/memcached-win32，推荐下载binaries版本，解压(本例中解压到c:\\memcached)。
2、在命令行状态下输入： c:\\memcached\\memcached.exe -d install 。至此memcached已经安装成windows服务
3、在命令行下输入： c:\\memcached\\memcached.exe -d start 以启动memcached服务。当然也可以选择在windows服务中启动
你没看错，就是这么简单，简简单单的三步memcache的服务器端就准备完毕

php安装Memcached模块支持

1、下载php_memcache.dll模块，你可以从http://downloads.php.net/pierre/找到对应的版本，
php5.3的直接下载http://shikii.net/blog/downloads/php_memcache-cvs-20090703-5.3-VC6-x86.zip

2、修改php.ini，添加如下内容：

extension=php_memcache.dll

3、重启apache服务器，然后查看一下phpinfo，如果有memcache，那么就说明安装成功！

测试windows下的Memcached

测试代码如下：

< ?php
$mem = new Memcache;
$mem->connect("127.0.0.1", 11211);
$mem->set('key', 'Hello Memcached!', 0, 60);
$val = $mem->get('key');
echo $val;

更多测试代码，需要移步：
http://www.php.net/manual/en/memcache.examples-overview.php

Memcached的基本设置

继续阅读全文……

这是我前些日子准备的关于《XSS注入和防范》的技术分享ppt，现在放出来，之前是做的powderpoint文件，后来网上流传impress.js做ppt，于是自己也整了个impress.js版本的放在了SAE上面，经过测试发现当ppt的内容较多，带有图片等，impress.js效果就会比较卡。不多说其他的，说说ppt的内容：

《XSS注入和防范》主要从xss是什么，xss的危害，xss的类型及其防范的措施，几个方面来讲解xss。希望对大家理解xss有所帮助，另外多说句cookie的httponly方式，在apache下面有个漏洞，当cookie超过4k的时候就会出现泄漏，所以要注意这个漏洞！（具体代码：狂点此处）

废话不多说了，上ppt地址：【PPT分享】XSS注入和防范，请使用支持chrome浏览器查看ppt页面

XSS注入和防范

IE6 a标签的请求被abort的原因

最近项目中掉进IE6 a标签abort两次坑，第一次是a标签绑定一个事件，href='javascript:;'这样a标签触发了事件，切换验证码图片，结果验证码图片总是显示不出来，通过抓包显示状态为abort。其实这个的原因可以从IE6中a标签执行顺序说起，IE6中a标签执行onclick在执行默认事件（即href跳转）之前，当触发了绑定的事件之后，那么处理完事件之后，如果不return false或者阻止默认事件，则会继续执行href跳转，IE6会认为页面跳转到其他页面或者页面重新刷新，则abort之前onclick事件中的请求。
继续阅读全文……

前端开发工程师都知道javascript有编码函数escape()和对应的解码函数unescape()，而php中只有个urlencode和urldecode，这个编码和解码函数对encodeURI和encodeURIComponent有效，但是对escape的是无效的。

javascript中的escape()函数和unescape()函数用户字符串编码，类似于PHP中的urlencode()函数，下面是php实现的escape函数代码：

/** 
 * js escape php 实现 
 * @param $string           the sting want to be escaped 
 * @param $in_encoding       
 * @param $out_encoding      
 */ 
function escape($string, $in_encoding = 'UTF-8',$out_encoding = 'UCS-2') { 
    $return = ''; 
    if (function_exists('mb_get_info')) { 
        for($x = 0; $x < mb_strlen ( $string, $in_encoding ); $x ++) { 
            $str = mb_substr ( $string, $x, 1, $in_encoding ); 
            if (strlen ( $str ) > 1) { // 多字节字符 
                $return .= '%u' . strtoupper ( bin2hex ( mb_convert_encoding ( $str, $out_encoding, $in_encoding ) ) ); 
            } else { 
                $return .= '%' . strtoupper ( bin2hex ( $str ) ); 
            } 
        } 
    } 
    return $return; 
}

继续阅读全文……

IE中的contains方法可以判断A元素是否包含B元素，如果包含则返回true，否则返回false，在开发中会在事件代理处理上面用到。W3C的方法是compareDocumentPosition，所以综上来说：JS通过contains和compareDocumentPosition方法来确定DOM节点间的关系,判断一个元素(对象)是否为另一个元素的子元素。
IE的contains方法很简单，但是W3C的DOMElement.contains(DOMNode)方法会返回却是一个数值。

DOMElement.contains(DOMNode)

link：https://developer.mozilla.org/En/DOM/Node.compareDocumentPosition。

DOMElement.contains(DOMNode)返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

继续阅读全文……

元旦假期帮朋友折腾VPS，安装了centOS和lnmp，网站部好了，而且定时任务也加上了，觉得应该做个压力测试，之前用过apache自带的ab，不过今天使用的是webbench做压力测试。备份下安装测试过程。
首先我们先来安装webbench吧, 为了测试准确，请将 webbench 安装在别的linux服务器上, 因为webbench 做压力测试时，自身也会消耗CPU和内存资源, 否则, 很可能把自己服务器搞挂掉。于是我切换到了ubuntu系统做webbench测试。

安装webbench

安装过程比较简单，如果你的机子之前安装过一些常用软件直接使用下面的命令就可以了：

wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz
tar zxvf webbench-1.5.tar.gz
cd webbench-1.5
make && make install

webbench安装报错

没有安装ctags

如果没有安装 ctags make 编译会报错：/bin/sh: ctags: command not found
这时当然是要安装ctags啦，于是：

apt-get install ctags

搞定

没有安装gcc

这时候可能会报错：

cc: Command not found

这时需要gcc：

apt-get install gcc

其他报错

如果出现下面的错误：

cannot create regular file `/usr/local/man/man1′: No such file or directory

继续阅读全文……