Chrome 扩展: URL to QR-Code

URL to QR-Code 是一个 Chrome 扩展,适用于 Chrome 浏览页面的同时希望把在手机设备(当然手机得支持 QR-Code 的扫描)也能访问.我总结可以适用于以下情景:

  • 这个网页必须使用手机设备访问
  • 这个网页是一个手机应用的安装链接(AppStore/Google Market),用手机访问可以直接安装
  • 我就是想用手机浏览此网页,怎么着
  • 好吧,基于以上情景,我做了一个 Chrome 扩展,恩,没错,只适用于 Chrome,也许会有人说,这个东西网上已经有了,为什么你还要重造轮子.我的理由是,虽然我的功能非常简单,鉴于目前现有的一些应用,都会把功能显示在 Chrome 的 Tab 上面,其实这个功能用的几率并不多,放在 Tab 实在是浪费了太大的空间,我的 Tab 的 Icons 已经负载过多了(大家可参考我之前分享的 我常用的 Chrome 扩展集合),因此我决定把 Icon 丢在地址栏的右侧,这里相对于的利用空间更小.点击之后直接弹出 QR-Code,方便手机扫描.

    安装地址: http://icyleaf.googlecode.com/svn/javascript/Chrome/url_to_qr_code_v0.1.crx

    ————–需要更新的分割线—————-

    发现 Google Chart API 居然提供支持 QR-Code ,文档在此后面准备更换生成QR-Code的服务接口支持选文字生成和文字链的原始链接的生成.这里算是埋下一个坑,大家可以提醒我来填满。。。

    文档地址:http://code.google.com/apis/chart/image/docs/gallery/qr_codes.html

    如何保持在 Git Submodule 代码的开放和私有共存

    假设我在 github 有一个开源的版本库 x 供大家使用,该库里面又包含了好些个 submodules,其中有一个 submodule 名为 a 是自己在 github 又创建的:

    $ git submodule add  http://github.com/icyleaf/a.git modules/a
    

    现在问题是,由于代码需要更新,同时涉及到了 a 这个 submodule,但是它的添加 url 是 read-only,由于 x 这个库是供大家使用,因此 a 又不能设为 private:

    $ git clone git@github.com:icyleaf/a.git modules/a
    

    目前想到的方法是在 x 库以外 clone 下来 a,进行私有的写入和 push 到 github 上面,然后在 x 库的 a 里 git pull 下来获得最新的代码。

    如何解决这样的问题,能够当大家全部 clone 下来,而自己开发也能避免麻烦?

    在一篇文章上面找到了灵感,折腾了一番搞定了

    该文章有一节讲到,开发者如果经常需要更新 submodule ,即可更换 submodule 的 remote url:

    $ cd commonlib
    $ git remote rm origin
    $ git remote add origin ssh://mark@git.mysociety.org/data/git/public/commonlib.git
    $ git remote -v
    origin    ssh://mark@git.mysociety.org/data/git/public/commonlib.git
    
    However, you’ll find that two helpful config options will have been deleted when removing and adding back origin, so you’ll want to add these back.
    
    $ git config branch.master.remote origin
    $ git config branch.master.merge refs/heads/master
    

    首先我也先对 a 进行 git remote -v,结果显示:

    origin	http://github.com/icyleaf/a.git (fetch)
    origin	http://github.com/icyleaf/a.git (push)
    

    发现和文章里面的显示的结果不一样,于是我就在想能不能在 remote 上面做些手脚,首先看下 git remote 的 help,发现有一条是可以单独设置 remote push 的 url ,也就是更换上面 git remote -v 中 push 的 url,尝试:

    $ git remote set-url --push origin git@github.com:icyleaf/a.git
    

    再次执行 remote -v:

    origin	http://github.com/icyleaf/a.git (fetch)
    origin	git@github.com:icyleaf/a.git (push)
    

    执行成功!然后随意 commit 并 push orgin master,成功!

    搞定!

    Nginx+FastCGI 环境搭建 Kohana

    Kohana 默认仅对 Apache 环境提供的部署支持,其实对于 Nginx+FastCGI 也是很容易支持的。本文搭建环境是 Ubuntu 10.4 并采用 apt-get 方式安装,喜爱编译的朋友可以自行解决 :)

    1. 安装 MySQL

    sudo apt-get install mysql-server mysql-client
    

    安装过程在会提示设置 root 账户的密码,如果是本机测试开发可以留空后稍候设置。

    2. 安装 Nginx

    # 安装 Nginx
    sudo apt-get install nginx
    # 启动 Nginx
    sudo /etc/init.d/nginx start
    

    完成上面两步之后,打开浏览器,输入 localhost 或 127.0.0.1 如果看到 Welcome to Nginx! 字样就说明安装成功了,是不是很简单 :)

    注意,如果你的机器上面如果安装了其他 web 容器(比如 Apache,Lighttd等),启动 ngnix 的时候肯定会报错,因为这些 web 容器启动均占用的 80 端口,更改的方法如下:
    编辑 /etc/nginx/sites-available/default 文件,修改 server 段中的 listen 为 localhost:8080,其中 8080 是更改的监听端口:

    server {
    	listen   localhost:8080;
    	server_name  localhost;
    
    # [...]
    

    保存后重启Nginx:

    sudo /etc/init.d/nginx restart
    

    Continue reading

    如何获取 Element 的 XPath [PHP/Javascript]

    这两天研究 HTML 的 DOM 需要寻找某个 Element 元素的完整 XPath 路径,由于使用的是 PHP Simple HTML DOM Parser 开源库,这个库类的使用方法几乎兼容 Javascript 的 DOM 语法并附带 DOM 选择器。虽然功能强大但是并不能直接获取 Element 的 XPath。这个怎么办呢,依稀记得 Firebug 有一个功能,选择某个元素在它的控制台可以显示 XPath。嗯,着手实践一下发现不仅可以显示而且还可以复制 XPath。

    于是想,如果可以找到 Javascript 版的相关代码就一定可以改成 PHP 版本的,结果在 Google 搜索找到了…

    var elt = document.getElementById('table');
    var xpath = getElementXPath(elt);
    alert(xpath);
    
    // Get full XPath of an element
    function getElementXPath(elt)
    {
    	var path = "";
    	for (; elt && elt.nodeType == 1; elt = elt.parentNode)
    	{
    		idx = getElementIdx(elt);
    		xname = elt.tagName;
    		if (idx > 1) xname += "[" + idx + "]";
    		path = "/" + xname + path;
    	}
    
    	return path;
    }
    
    // Get Idx of an element
    function getElementIdx(elt)
    {
        var count = 1;
        for (var sib = elt.previousSibling; sib ; sib = sib.previousSibling)
        {
            if(sib.nodeType == 1 && sib.tagName == elt.tagName)	count++
        }
    
        return count;
    }
    

    PHP 改进版:

    // Use it before import PHP Simple HTML DOM Parser
    $html = file_get_html('http://www.google.com/');
    // find a sample element by id
    $elt1 = $html->find('#footer', 0);
    // find a sample element by tag name
    $elt2= $html->find('div', 10);
    
    // it will return if found it: //*[@id="footer"]
    $xpath = getElementXPath($elt1);
    
    // it will return if found it: html/body/div[10]
    $xpath = getElementXPath($elt2);
    
    function getElementXPath($elt)
    {
    	$path = '';
    	$first = TRUE;
    	for(; ($elt AND $elt->nodetype == 1); $elt = $elt->parent())
    	{
    		$xname = $elt->tag;
    		$idx = getElementIdx($elt);
    
    		if ($first AND isset($elt->attr['id']))
    		{
    			$path = '//*[@id="' . $elt->attr['id'] . '"]';
    			break;
    		}
    
    		if ($idx > 1)
    		{
    			$xname .= '[' . $idx . ']';
    		}
    
    		$path = '/'.$xname.$path;
    
    		$first = FALSE;
    	}
    
    	return $path;
    }
    
    function getElementIdx($elt)
    {
        $count = 1;
        for($sib = $elt->prev_sibling(); $sib ; $sib = $sib->prev_sibling())
        {
            if($sib->nodetype == 1 && $sib->tag == $elt->tag)
            {
            	$count++;
            }
        }
    
        return $count;
    }
    

    大家同样可以把上面的代码直接 crack 到 PHP Simple HTML DOM Parser 库中。