这样小图都会按原先的目录结构，在上级目录的small目录出现了

其实imagemagick是一个超级神器，上面只是它很简单的一个应用…

解决gvim在Ubuntu 11.04中菜单显示的问题

执行gvim时，gvim的菜单不能立刻显示出来。并且报错：

** (gvim:15150): WARNING **: Unable to register window with path ‘/com/canonical/menu/4200024′: Timeout was reached

解决方法是运行：

echo 'alias gvim="env UBUNTU_MENUPROXY=0 gvim"' >> ~/.bashrc

source ~/.bashrc

解决gvim在Ubuntu 11.10中导致电脑很卡的问题

运行：

echo 'alias gvim="gvim -f"' >> ~/.bashrc

source ~/.bashrc

解决提示“pixmap”的问题

如果终端中提示：

(gvim:2353): Gtk-WARNING **: 无法在模块路径中找到主题引擎：“pixmap”，

解决方法是运行：

sudo apt-get install gtk2-engines-pixbuf

假如现在需要服务器端收到客户端的push后，能自动更新repo目录里面的文件，听起来很简单，用钩子就可以了，不过还是遇到一些问题，好在最后在google帮助下搞定。

总结的步骤如下：

1.先在服务器端运行设置，接受提交

git config receive.denyCurrentBranch ignore

2.把以下内容保存为服务器端repo中的钩子文件（.git/hooks/post-receive）

#!/bin/sh

cd ..

env -i git reset --hard

3.设置权限为可运行

chmod a+x post-receive

好了，这样每当服务器收到客户端的push，就会自动更新文件列表了

安装步骤

1.下载Array Networks提供的客户端程序 array_vpnc.bin

sudo apt-get install libc6-i386 #64位系统也是这个包

wget http://q.pnq.cc/uploads/array_vpnc.bin

chmod a+x array_vpnc.bin

2.下载这个小脚本到同个目录

#下载辅助脚本

wget http://q.pnq.cc/uploads/vpn-for-common.sh -O vpn.sh

#里面会包含重要信息，我们不想别人随便访问

chmod 700 vpn.sh

3.修改vpn.sh中的配置，将vpn_host、user、key修改为你的配置

vpn_host=your_vpn_server

user=your_user_name

key=your_static_passwd #密码中不变的部分

使用方法：

./vpn.sh

然后根据提示输入，当看到这个提示时，就说明成功了：

array_vpnc: VPN TUNNEL SUCCESSFUL!

Have fun!

这个组件获得了很大的成功。上线后不久，阿里巴巴网站上用户的图片上传数量由日均1万张左右上升至日均15万张左右。但在这个上传应用投入应用的两年中，我们遇到了各种问题。

1. bug

在基于IE多标签浏览器中的伪沙箱问题就不说了，最严重的是cookie的问题。使用FileReference.upload的方式上传文件，http请求中附带的cookie信息不一定是当前浏览器进程的cookie，在Firefox、chrome等非IE浏览器中非常严重，可能传输的是IE中的cookie。即便是IE，也可能传输的cookie内容和当前页面的cookie记录不符合。这直接导致服务器端在收到文件之后的安全验证中失败。而对于阿里巴巴这样的大型网站，有比较成熟的java web框架，要去掉对cookie的依赖非常麻烦。于是结果就是，首先我们只有在用户使用IE系浏览器的时候才使用Flash上传，其次我们隔三岔五的还会收到使用IE的某些客户的投诉，在花费了大量的时间排查之后，我发现是由于cookie的问题导致上传失败。这个bug已经存在很多年，但是随着Flash从9升级到10，许多版本过去了，问题依然没有被解决。对于闭源的Flash，我们也帮不上忙。

2.性能

相对于现今数码相机的像素量，5MB的大小限制非常保守。但大于5M的时候，在一些低配置的电脑上，读取文件内容的时候就会发生浏览器假死现象。假死很容易导致浏览器崩溃，所以我们采取了保守的限制——5MB。

另外一个性能消耗是将BitmapData编码成JPEG文件的时候。Adobe提供了JPEGEncoder，但由于是Array实现的，所以性能是个问题。编码一个2880×2880的图片在一台中等配置的电脑上大约需要15秒时间。

我用Vector改写了这个类，时间缩短为3.5秒左右。使用Alchemy，时间进一步缩短到1.5秒左右。但还是不够安全，所以最后采用了异步Vector的方式，延长编码的时间，以保证程序的稳定性。（评测在这里）

3.图片质量

Flash内置的最好的图片缩小算法（用BitmapData.draw，并将smoothing参数设为true），在缩小图片的时候容易产生锯齿。因此我改写了Jacwright提供的缩小算法，图片质量的问题解决，但代价是性能又降低了一些。

4.安全限制

Flash10.0之后，增加了一个安全限制——当URLLoader以标准文件上传的方式发送POST请求的时候，需要由用户的UI操作（鼠标点击或按键事件）触发。因为我们对用户的图片做了处理，已经无法再通过FileReference上传，只能通过URLLoader。这个安全性限制规定每次发起一个上传文件的URLLoader请求，都必须让用户点击一下鼠标才可以。如果用户选择了20张图片，就要点击20次鼠标。这显然是无法接受的。因此我们放弃了用标准文件上传，采用普通post形式。代价是失去了对上传进度的跟踪，不知道文件上传的百分比；同时服务器端也需要改造。

改变

最近，我们做了一个决定：开发一个类似功能的ActiveX控件，替代Flash作为图片上传的主要解决方案。ActiveX的优势是性能，不足之处在于只能在Windows+IE浏览器中使用，但实际上我们的Flash上传目前也只能在IE中使用。Flash真的适合像阿里巴巴这样的网站使用吗？闭源和性能是Flash最大的问题。但在HTML5被广泛支持前，Flash和传统Ajax还是我们最主要的富客户端应用开发技术，相对于ActiveX、Silverlight、JavaFX、Gear等技术来说，Flash还是有安装率优势的。我们看到Adobe最近在新功能开发方面非常给力，值得称赞，但基础的功能的持续完善对开发者也同样重要。目前Flash依然是我们很重要的RIA技术，但是HTML5完全到来的那一天，现在很难说。

你是怎样启动Windows虚拟机的呢？是不是 1. 运行Virtualbox 2. 点选虚拟机的图标 3.点“启动”

那么可以考虑一下给单个虚拟机创建快捷方式，提高工作效率。别小看这点时间哦，每天节约下来的时间不可小视呢！

在桌面/Dock上创建一个程序快捷方式: /usr/bin/VBoxManage startvm 虚拟机名称

例如我的虚拟机叫做XP，那么这个命令就是 /usr/bin/VBoxManage startvm XP

不同的系统可能VBoxManage所在的地方不一样，用这个命令查找VBoxManage所在路径： which VBoxManage

至于怎么创建快捷方式，可以参考网上的教程。这是我的Ubuntu上的效果：

ps. 图标是在iconfinder找到的

比如我今天在目录/home/ued66/asproj-builder 下写了一个 build-all.sh: svn up #更新代码 ./compile.rb --all >> ./log/run.log #编译，并将结果记录

在shell中运行这个命令是正常的： /home/ued66/asproj-builder/build-all.sh

crontab中这样写： */5 * * * * /home/ued66/asproj-builder/build-all.sh (为了测试方便，设成每5分钟运行一次，实际是每天运行一次足矣）

虽然是同个命令，但是compile.rb却没有被正确调用。

经过调试，发现问题有两个：

1. 路径问题 既然用了相对路径，必须要把当前目录设置正确。把crontab写成这样： */5 * * * * cd /home/ued66/asproj-builder && ./build-all.sh

2. 环境问题 compile.rb 是用ruby写的一个脚本，而我的ruby程序是用源码编译安装的，安装目录是/usr/local/ruby。compile.rb的第一行是 #!/usr/bin/env ruby 这是告诉shell使用ruby来执行这个脚本。但问题在于crontab运行的时候是没有加载用户环境变量的，“which ruby“运行结果为空也验证了这点。所以compile.rb不能被正确执行也很好理解了。

最后把build-all.sh写成这样，问题解决： #!/bin/sh svn up /usr/local/ruby/bin/ruby compile.rb --all >> ./log/run.log

看着程序自动运作起来，非常开心啊！

Google之，尝试了很多方法，都没有效果。

最后偶然发现，安装完增强功能包之后，居然桥接模式就正常了。进一步证明，这个增强功能包是必备的东东。

安装增强功能包，一开始是从Virtualbox菜单中安装，发现下载速度太慢。在apt里面搜到原来有个包：virtualbox-guest-additions，所以先执行这句： sudo apt-get install virtualbox-guest-additions

然后再到VB虚拟机里面点安装增强功能，可以节约一点时间。

在Flash播放器运行时，将不同来源的资源划分到独立的沙箱(sandbox)内，不同沙箱之间不能彼此操作数据（除非目标沙箱做过一些设置，授权其他沙箱可访问），这就是Flash的跨沙箱问题。当Flash文件(.swf) 和页面(.html)不在同一个域名下时，如果不经过Flash内部声明System.allowDomain，html无法访问flash定义的接口；不经过html设置allowScriptAccess为’always’，Flash也无法调用页面上的js函数。

那么如果html和flash都设置了互相可以访问，是否Flash和html之间就可以互相访问了呢？理论上是的，然而实际上却不是。

在Chrome、Firefox等非IE浏览器上，是没有问题的。在“纯正”的IE6、IE7、IE8上也是正常的。但是在傲游、360浏览器、腾讯浏览器等基于IE的多标签浏览器中，刷新页面的时候，Flash播放器还是会抛安全沙箱错误。

点击访问测试页面。

使用上面说的“基于IE的多标签浏览器”访问，你会看到，第一次是正常的，刷新之后就不正常。如果你安装的是debug版本的播放器，可以看到Flash运行时发生了异常。

SecurityError: Error #2060: 安全沙箱冲突:ExternalInterface 调用者 http://pnq.cc/temp/test-dmm-crssdmn.swf 不能访问 http://q.pnq.cc/works/test/test-dmm-crssmn.html。
    at flash.external::ExternalInterface$/_initJS()
    at flash.external::ExternalInterface$/call()
    at Main/start()
    at Main/init()
    at Main()

Flash的源码：

package 

{

    import flash.display.Sprite;

    import flash.external.ExternalInterface;

    import flash.system.Security;

    import flash.text.TextField;



    /**

     * Flash缓存造成的伪沙箱问题演示

     * @author qhwa

     */

    public class Main extends Sprite 

    {



        public function Main():void 

        {   

            var tf:TextField = new TextField();

            tf.text = 'flash ready';

            tf.autoSize = 'left';

            addChild(tf);



            //允许被所有其他沙箱中的js或flash调用

            Security.allowDomain("*");



            start();

        }



        private function start():void

        {

            //在基于IE的多标签浏览器中，这里运行时可能出错

            ExternalInterface.call("alert", "Hi, flash is ready!");

            ExternalInterface.addCallback('drawCircle', drawCircle);

        }



        private function drawCircle():void

        {

            TextField(getChildAt(0)).appendText('nDraw a circle');



            graphics.beginFill(Math.random() * 0xFFFFFF, .5);

            graphics.drawCircle(

                Math.random() * stage.stageWidth,

                Math.random() * stage.stageHeight,

                50);

            graphics.endFill();

        }



    }



}

似乎一旦swf是从缓存中读取的，allowScriptAccess这个配置就不起作用？为了验证是不是缓存引起的，我们每次为swf文件地址后面加上随机的数字，发现就不存在上面的问题了。可见这个问题确实是浏览器缓存造成的。

为swf文件动态加时间戳或随机数，通过防止缓存可以回避掉这个问题。不过这不是一个很好的方案，因为这会极大增加服务器的压力，并且导致页面加载速度一直都很慢。

不过好消息是，目前有个比这个更好的方案：延迟Flash的初始化功能。通过将Flash的ExternalInterface.addCallback时机延后一些，就可以解决这个问题。

修改一下Flash的代码，加一个setTimeout：

...(略)



public class Main extends Sprite 

{



    public function Main():void 

    {   

        ...(略)          

        //start();

        setTimeout(start, 500);

    }



    ...(略)



}

测试修改后的效果

那么，延迟多少比较合适呢？如果太多，用户会感觉到明显的延迟；太少，一些性能较差的电脑上问题依然存在。根据我一年多总结的经验，500ms是比较合理的数字。目前阿里巴巴中国网站上使用的Flash应用程序，如果有需要和js通信，都是延迟500ms初始化。

顺便说一下，延迟500ms还有另外的一个作用。IE6中，Flash初始化的时候无法得到 stage.stageWidth正确的数字，返回是0（stageHeight也一样）。延迟一点初始化就可以得到正确的数值了。

目前我还没有发现比延迟初始化更好的解决方案，如果你有更好的办法，欢迎交流！

在上一篇（介绍篇）中，我们对Fiddler Web Debugger有了简单的接触，也许你已经开始在用Fiddler进行HTTP相关的调试，在这一篇，我们将通过一个实例了解Fiddler的神奇魔法。

在我们前端开发的日常工作中，发现服务器上某个css/javascript文件有问题，需要修改，那真是家常便饭。通常，我们需要将文件进行修改，然后重新发布再验证，这样就很容易影响到生产环境的稳定性。更普遍的做法是，我们在开发环境中修改文件并验证，然后发布到生产环境。虽然安全，却比较繁琐。而利用Fiddler的可以修改HTTP数据的特性，我们就非常敏捷地基于生产环境“修改——验证——发布”。

假设我们发现这个页面有问题，需要修改所引用的js文件（http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102）。

第一步：用Fiddler查看页面的数据流列表，找到这个js文件的session

tip: 最好是没有缓存的返回内容（Result Code是200），这样可以进行下一步的保存。不是200也没关系，你只要本地硬盘上有这个文件就好了。

第二步：将js文件保存到本地（如果本地已经有这个文件，可以跳过这步）

在这个js session上右键点击，选择“Save – Response –Response Body…”，将js文件的内容保存到本地。记住存的位置，下面我们会用到这个保存下来的文件。

第三步：开启Fiddler的请求自动重定向功能

打开AutoResponder标签设置。有没有看到界面上有两个复选框？第一个的作用是开启或禁用自动重定向功能，我们就可以在下面添加重定向规则了。第二个复选框框勾上时，不影响那些没满足我们处理条件的请求。

第四步：创建重定向规则，将目标是这个js的HTTP请求重定向到本地文件

我们可以通过“Add…”按钮手动添加规则，不过这个URL已经出现在我们的session列表中，可以直接拖动过来。在左侧的Session列表中选择第一步找到的session，拖动到AutoResponse标签中。这样就创建了一个针对这个URL的规则。

Fiddler帮我们生成的规则是：

• 当URL为：http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102
• 返回200，使用和Session 4一模一样的内容返回

我们需要修改这个规则，

选择“Find a file…”，就可以选择本地的文件作为返回的body内容。

选择我们刚刚保存下来的文件。

刷新一下浏览器页面，看一下session列表，如果像下面这样，这个session的底色是灰色的，那么恭喜你，你已经成功将这个请求重定向到本地文件了！

tip: 如果浏览器用的是Firefox，记得先清一下临时文件缓存，因为Firefox是真正的缓存，当判断文件的缓存还未过期时，就不会再发请求出来，Fiddler就获取不到了。

第五步：修改本地文件，进行测试

我们在本地的js文件中加一句alert(‘hello’)

刷新浏览器，看看效果，如果alert出来，那就成功了。

继续修改这个文件并测试，成功修复问题后，我们就可以发布修改后的文件了。

小结：自动重定向功能是Fiddler最实用的功能，这里的Rule可以自由地设定，可以使用搜索（默认）、精确匹配（EXACT）、正则表达式匹配（REGEX）。处理方式可以选择使用文件，也可以选择合适的时间暂停数据流（bpu、bpafter），人工干预。通过以上几个步骤，我们演示了怎样将HTTP请求重定向到本地的文件，进行web调试。这种调试方式不需要发布到线上再验证，避免了修改不成功、对用户造成影响的风险，而且不需要搭建复杂的开发服务器等开发环境，非常适合快速web调试。

延伸阅读：

1. Fiddler使用帮助
2. Fiddler AutoResponder标签说明