new Array([],null,undefined,null) == ",,,"; // true

挺神奇，哈？
这里有两件事情，首先当然是“==”这家伙引起了类型转换。 转换的规则是当两个对象a和b作比较时，如果一方是简单类型（假设是b吧），另一方是对象（假设是a）；则把a类型转换成b的类型。前面的代码b（”,,,”）是字符串，简单类型，所以要求a（typeof Array是对象对吧）作类型转换到字符串。
另一件事情就是Array的类型转换，转换成字符串时，数组大概就是这样做的：首先把每一个元素转换成字符串，然后调用数组的join方法。既是本上a对象经历了这样的转变：
1. Array([],null,undefined,null)
2. Array(“”,”",”",”")
3. Array(“”,”",”",”").join()
4. “,,,”
最后变成了”,,,”，自然就返回true了。

同样的道理下面这行代码就不难理解了。

",,," == new Array(4); // true

再看个变态点的：

",,," == Array((null,'cool',false,NaN,4)); // true

其实这里主要是使用了逗号操作符的原因。MDN上时这样说逗号操作符的，从左往右计算，并返回右面的值。
所以(null,’cool’,false,NaN,4)的返回值就是4, 然后这个例子就变成，前面一个例子了。WTFJS。

下面这段代码展示了Javascript对最大最小值的处理，导致了最大值比最小值小的现象。

Math.max();
// -Infinity

Math.min();
// Infinity

看上去不错，只要你真拿他们来跟其他数值进行比较。但是用作不比较，还真不知道最大最小值有什么用途？

console.log(9 < Math.max());
//false
console.log(9 < Math.min());
//true
Math.min() < Math.max();
//false

推荐书目：

实际中使用中, 经常会碰到Javascript变量有时候能成功删除, 有时候却不掉成功删除的情况.
这篇Understanding delete牛文详细解释了, 为什么会这样, 什么样的变量能成功delete, 什么样的不能成功delete.

简而言之, 就是通过”声明“方式创建的变量不能成功删除, 通过”赋值“方式创建的变量能成功删除; 一但一个变量创建后, 它能不能被删除的属性将不会改变. 一个特例是通过eval()函数执行动态代码创建出来的变量,都是可以删除的.
如下面这段代码在Firefox/Chrome/Nodejs里的运行结果如下:

(function(global){
    var aaa = "aaa";
    bbb = "bbb";
    global.ccc = "ccc";
    eval("var ddd='ddd';");
    console.log(delete aaa);
    console.log(delete bbb);
    console.log(delete ccc);
    console.log(delete ddd);
}(this));

Firebug的console里直接定义的变量(不包括在函数里定义的变量), 似乎是因为以eval()的方式在运行代码. 所以通过在Firebug的console里输入代码创建出来的变量,是可以删除的. Chrome等webkit系的浏览器的开发工具没有这个问题. 这一点在调试代码时可能会引起奇怪的现象.

//在console里粘贴运行下面的代码
var aaa = "aaa";
console.log(delete aaa);
//在Chrome的开发工具里返回是false, 在Firebug的console里返回是true.

在对Javascript对象的属性进行赋值时, 原则是这样的:
1. 如果该对象本身有这个属性, 则对该属性赋值
2. 如果该对象本身没有这个属性, 则在该对象上新建一个该属性, 并进行赋值. (这时不会通过__proto__属性, 找该对象的prototype, 检查prototype上有没有该属性, 然后在prototype的属性上赋值.)

举个简单的例子:

var Car = function(){
  this.color = "red";
}
var Jeep = function(){};
Jeep.prototype = new Car();

var myCar= new Jeep();
console.log(myCar.color);
console.log(myCar);
//这时myCar对象本身上并没有color属性,
//访问myCar.color得到的结果是"red",
//因为这时prototype chain起作用了.

myCar.color = "green";
console.log(myCar.color);
console.log(myCar);
//这时myCar对象上新建了一个color属性, 值是"green".
//但是它并没有覆盖掉myCar的__proto__上的color的属性.
//这时候如果读取myCar.color, 按prototype chain的搜索顺序,
//首先找到的是myCar对象自身上的属性color, 值是"green".

看console里打出了的对象应该比较清楚.

用对象的数组写法可能更容易理解些.

var Car = function() {
  this["color"] = "red";
}
var Jeep = function() {};
Jeep.prototype = new Car();

var myCar= new Jeep();
console.log(myCar); 

myCar["color"] = "green";
console.log(myCar);

首先js里面没有类这回子事情, 虽然class是js的保留字, 但是到现在也没派上任何用场. 在js里面, 几乎所有的东西都是对象, 函数也是对象, 所以函数可以赋值给别的变量. 另外js对象也可以用数组的方式访问, 也就是说访问obj1.something, 也可以写成obj1['something'].

在js里虽然没有类, 但是有一个在类编程里常用的的概念, Constructor构造器, 或者叫构造函数. 语法上Constructor跟普通的js函数没有区别, 但是Constructor前面加上new关键字就可以产生新的对象.

那么”new Constructor()”这样调用时到底做了什么事情呢?
1. js运行环境首先创建一个空对象
2. 把this变量指向这个对象
3. 把__proto__指向这个构造器的prototype属性
4. 通过this把属性和方法加在这个对象上
5. 最后会把this指向的对象return出来(当然你也可以显示的return别的对象,这是情况跟我讨论的有点不一样)

这里有2个概念比较重要, 第一是Constructor的prototype属性, 它是Constructor的一个保持共享属性和方法的对象. 二通过该Constructor生成的对象的__proto__属性, 它指向了那个prototype对象. 对象的Constructor可以通过该对象的constructor属性获得.

我们定义一个简单的Constructor Demo(), 然后通过他生成一个aDemo对象, 在Chrome的console里把aDemo打出来看到的结果是这样的,这是我们能很清楚的看出这种关系.

function DemoA(){
  this.title = "this is a demo constructor";
  this.f1 = function(){}
}
var aDemo = new DemoA();
console.log(aDemo);

换一种写法,

function DemoB(){
  this.title = "this is a demo constructor";
}
DemoB.prototype.f2 = function () {};
var bDemo = new DemoB();
console.log(bDemo);

其实跟前面没多大区别, 不过这一次f2()不在创建出来的对象上, 而是在对象的__proto__指向的构造器DemoB上. 这样的好处是当使用DemoB创建很多对象时, 比较节省内存.

js的prototype搜索链 prototype Chain
js的运行环境是这样使用构造器的prototype的. 当我们对第一个对象调用其方法时, js运行环境首先看, 这个对象本身有没有这个方法, 如果有就直接调用. 如果没找到, 就查找这个对象的__proto__属性指向的对象(就是前面说的该对象的构造器的prototype属性), 如果有该方法就调用, 没有继续查找__proto__属性指向对象的__proto__属性指向的对象, 以此类推. 直到最后, 找到js所有的对象都会指向默认指向的Object(算是js的根对象吧). 所以如果我们给Object上增加个方法, 所以的js对象都能使用.

由于js有对对象函数的prototype chain搜索的特性, 我们可以利用这点来模拟类似其他语言里类(class)的效果. 如:

function DemoA(){
  this.title = "this is a demo constructor";
  this.f1 = function(){}
}

function DemoB(){
  this.title = "this is b demo constructor";
  this.f2 = function(){}
}
DemoB.prototype = new DemoA();

var bDemo = new DemoB();
console.log(bDemo);

这时我们通过bDemo对象, 不但能调用bDemo上的DemoB的f2()方法, 也能__proto__同对对prototype的搜索, 在bDemo上直接调用DemoA的f1()方法.

由于这种写法在语法上太啰嗦, 不容易理解, 我可以定义一个这样的函数.

function inherit(Child, Parent) {
  Child.prototype = new Parent();
}

这样我们前面的例子可以写成这样, 效果是一样的:

function DemoA(){
  this.title = "this is a demo constructor";
  this.f1 = function(){}
}

function DemoB(){
  this.title = "this is b demo constructor";
  this.f2 = function(){}
}

inherit(DemoB, DemoA);

var bDemo = new DemoB();
console.log(bDemo);

我马上去试了一下,还是不太满意: ppt大小是固定大小(728x562px), 广告位还是很多.

最后我还是bigfoot关掉了,继续使用这个小Bookmarklet.

javascript: (function() {
    var rz = function() {
        var h = $(window).width() * 3 / 6;
        h = h + "px";
        $(".player").css("min-width", "400px").css("width", "100%").css("height", h);
        $(".column1, .playerWrapper, .player, .slideDisplayer").css("width", "100%").css("height", h);
        $(".playerWrapper").attr('style', 'width: 100% !important');
        $("#player").attr('width', $(".player").width()).attr('height', $(".player").height())
    };
    $(".h-top-ad, .h-skyscraper-ad, .h-related-more-tab").css("display", "none");
    $(window).bind('resize', rz);
    rz();
})();
void 0

这是点击前和点击后的展示效果:

Log.io由两部分组成, harvester和server.
harvester负责监视具体的日志文件,当文件有变化是通知server. harvester可以有多个运行实例, 在不同的机器上收集日志.
server则负责处理与使用浏览器监视日志的用户的交互. server只有一个运行实例.

Log.io的安装步骤如下.

#重新以全局模式安装socket.io connect underscore等模块
su -
npm uninstall  socket.io connect underscore
npm install -g  socket.io connect underscore

#下载log.io,并配置
git clone git://github.com/NarrativeScience/Log.io.git log.io
sudo git clone https://github.com/remy/Socket.io-node-client.git /usr/local/lib/node/socket.io.client/
sudo git submodule update --init --recursive
cd log.io/
cd bin/
./configure

#安装server
./install/server

#安装harvester
./install/harvester

#配置要监视的日志 /etc/log.io/harvester.conf
#我添加了apache和log.io自己的日志文件

#开启harvester收集日志
/etc/init.d/log.io-harvester start

好了,现在可以访问http://”log.io server所在地址”:8998 来看看效果了.

左侧列表按照harvester分组列出来所有监视的日志文件. 右侧上边是当前选中实时监视的日志,支持通过正则表达式搜索. 右侧下面可以显示某个日志文件的历史内容.

看不到图的请看这里, flickr上新上传的图片怎么都看不到呢?!

TermKit就是这两天网络上讨论很多的一个工具.从TermKit作者的blog看,这是运行在Mac,以node.js写服务端,以js+webkit来写客户端,实现的一个图像化的Terminal终端工具.

作者只做了Mac上的开发.我搜索了一个,看到已经有人做了Linux+Chrome的移植.下载下来是了一下,运行不出结果,就在github上comment了一下,没想到作者马上就修正了.

下面是我安装的步骤:

git clone https://github.com/Floby/TermKit.git
cd TermKit/
npm install
node Node/nodekit.js

先你就可以了到Chrome里去访问TermKit了。
可以根据输入动态补齐：

这是ls输出的目录结果：

文件也会动态补齐：

可以直接通过cat查看图形文件：

现在好像还有点问题,就是现实出来的目录没有图标.不知道是不是那些显示依赖Mac的什么环境的原因.

不过感觉这样的工具,很难做到Linux Terminal那么通用.但是做一般的显示目录,运行一些命令,显示图像结果这样的任务还是很方便的.

mobl上关于twitter trends的这个例子，还是蛮好玩的。通过调用twitter的API，得到当下twitter上流行的话题。然后再根据每个话题，显示出最近这个话题的tweets。

2.mobl上的twitter trends例子

照猫画虎，来试试做一个新浪微博的类似应用。查了一下微博的API，遗憾的发现关于话题的API还都处于beta状态。而且要用户登录以后才能调用，不像twitter在不登录的情况下就能调用trends类的API。
新浪微博只有Search类的API有不登录调用的API，我们就拿search模拟一下吧。

http://api.t.sina.com.cn/search.json?source=xxx&rpp=100&q=sugarcrm

3.使用mobl的服务调用json

mobl提供了一个服务service接口，可以通过URL调用json服务。
修改后的新浪search的服务代码如下：

service Twitter {
  resource trends() : JSON {
    uri = "http://me.leonzhang.com/mobl/weibotrends/trendsjson.php"
    encoding = "jsonp"
    mapper = trendsMapper
  }

  resource search(query : String) : JSON {
    //主要要把xxx改成你自己的api key
    uri = "http://api.t.sina.com.cn/search.json?source=xxx&rpp=200&q=" + query
    encoding = "jsonp"
    mapper = tweetsMapper
  }
}

4.构造mobl界面

还后通过上面的trends服务，构造话题首页：

  header(_("Twitter trends"))
  var trends = async(Twitter.trends())
  whenLoaded(trends) {
    group {
      list(topic in trends) {
        item(onclick={ search(topic.name); }) {
		  label(topic.name)
		}
      }
    }
  }

在通过search服务，构造微博结果显示页。

screen search(query : String) {
  header(query) {
    backButton()
  }
  var results = async(Twitter.search(query))
  whenLoaded(results) {
    list(tweet in results) {
      block(tweetStyle) {
        image(tweet.profile_image_url,
              style=tweetIconStyle)
        <b>label(tweet.from_user) ": "</b>
        label(tweet.text)
      }
    }
  }
}

基本上就搞定了，打包上传到PhoneGap，一个微博应用就新鲜出炉了。
通过浏览器，可以在这里试用一下。在Andriod上跑的界面大概是这个样子。

全部代码如下：

application weibotrends

import mobl
import mobl::ui::generic
import mobl::ui::stylemixin

// STYLES
style tweetStyle {
  padding: 10px;
  margin: 5px;
  min-height: 50px;
  background-color: white;
  border: 1px solid #444;
  borderRadiusMixin(10px);
}

style tweetIconStyle {
  float: left;
  margin: 0 10px 0 0;
}

// TYPES
type Trend {
  name : String
  url  : String
}

type Tweet {
  profile_image_url : String
  created_at        : String
  from_user         : String
  text              : String
}

// LOGIC
function trendsMapper(json : JSON) : [Trend] {
  return json.trends;
}

function tweetsMapper(json : JSON) : [Tweet] {
  return json.results;
}

// SERVICE
service Twitter {
  resource trends() : JSON {
    uri = "http://me.leonzhang.com/mobl/weibotrends/trendsjson.php"
    encoding = "jsonp"
    mapper = trendsMapper
  }

  resource search(query : String) : JSON {
  	//注意要换成自己的新浪微博API key
    uri = "http://api.t.sina.com.cn/search.json?source=xxx&rpp=200&q=" + query
    encoding = "jsonp"
    mapper = tweetsMapper
  }
}

// UI
screen root() {
  script {
  	  fetchLanguageBundle("zh.json");
  	}

  header(_("Twitter trends"))
  var trends = async(Twitter.trends())
  whenLoaded(trends) {
    group {
      list(topic in trends) {
        item(onclick={ search(topic.name); }) {
		  label(topic.name)
		}
      }
    }
  }
}

screen search(query : String) {
  header(query) {
    backButton()
  }
  var results = async(Twitter.search(query))
  whenLoaded(results) {
    list(tweet in results) {
      block(tweetStyle) {
        image(tweet.profile_image_url,
              style=tweetIconStyle)
        <b>label(tweet.from_user) ": "</b>
        label(tweet.text)
      }
    }
  }
}

更新：
@很潮的猪头哥贡献了一张在iphone上访问的效果图片。

PhoneGap同样也是多平台手机开发工具，它能把你的web应用打包成各各手机平台的本地应用。
打包iPhone应用需要Mac系统，还需要Apple的开发执照。我都没有，只能望洋兴叹了。
打包Android应用没有这些先决条件，咱们就试试这个吧。

2.准备mobl应用

还是拿小小计算器程序为例，mobl项目编译出来的结果在项目下的www目录里。
我们进入这个目录，把TipCalculator.html改名成index.html。
然后把整个www目录通过压缩工具打包成zip格式。
准备工作就完成了。

3.使用phonegap的在线发布工具phonegap build

到PhoneGap的在线发布工具phonegap build网站，点击“New App”新建一个应用，输入应用名称。
选择“upload an archive or index.html file”，上传我们前面做的那个zip压缩包。

等一会程序就打包好了。

4.下载apk在我的华为C8600上试试

下载打包好的apk文件，通过豌豆荚安装到Android平台的华为C8600上。
运行一下还挺像那么回事的。虽然速度慢了点，但是你也知道，C8600的速度本来就不咋地。

至此我们能通过mobl构建一个真正的Android手机应用了。
现在是功能还很简单，但是慢慢来嘛，mobl的功能也在不断增加中。

接着上次我的的”小小计算器”程序。为了修改它的界面风格，我们首先派生一个mobl的模块。
新建一个叫ui.mobl的文件，在里面输入下面两行代码。第一句的意思是新建的模块名叫ui，第二句的意思是ui模块导入所有mobl::ui::generic的内容（开始我还以为mixin是中文迷信的拼音呢！搞了半天是mix in。唉英文差害死人）。

module ui
mixin mobl::ui::generic

回到tipcalculator.mobl文件，现在可以把里面引用mobl::ui::generic的那句改成引用ui了。

//import mobl::ui::generic
import ui

2.使用从mobl::ui::generic导入的变量

OK，准备功能完毕。现在在ui.mobl里就可以使用或者重写mobl::ui::generic里定义的变量了。
比如mobl::ui::generic里的样式变量（样式变量都是以$开头的）$baseColor，它代表了当前界面的基础色。另外里面还定义了$baseColor,$baseColorGreen，$baseColorRed, $baseColorRedish等颜色。
为了修改当前界面的基础色，只要输入下面一句，界面基础色就变成红的了。

style $baseColor = $baseColoRed

当然我们也可以使用mobl::ui::generic里的rgb函数，比如这样整个界面就变成灰的了。这里有关于具体模块内功能的描述，但是似乎文档还不太全面。

style $baseColor = rgb(100, 100, 100)

3.使用自定义css样式表

我们也可以定义新的样式变量，语法是css的扩展，据说是借鉴了scss的很多特性。
下面定义了两个新的样式变量，相信用过css的应该都能看懂。
但是有一点我没明白，为什么这些变量不再以$开头了呢？而且我换成$还编译不通过。

style mixin myButtonStyleMixin($fromColor, $toColor) {
  border: 1px solid #000;
  padding: 10px;
  line-height: 3em;
  margin: 5px;
  borderRadiusMixin(5px);
  backgroundGradientMixin($fromColor, $toColor);
}

style myButtonStyle {
  myButtonStyleMixin(#ddd, #bbb);
}

style myButtonPushedStyle {
  myButtonStyleMixin(#aaa, #999);
}

现在再打开tipcalculator.mobl文件,把里面的按钮使用我们新定义的样式变量。代码如下，效果见后面的图。

		button(_("Click me"), style=myButtonStyle,
                   pushedStyle=myButtonPushedStyle, onclick={
		  alert(_("You clicked me!"));
		})

运行效果可以看这里.

首先看看mobl的语言文件是什么？

很多php程序都有自己格式的语言文件，一般就是普通的php文件，比如SugarCRM就是以php数组存放语言文件。Linux里的应用程序通常使用gettext来实现国际化。StatusNet就是采取这种方式。
mobl是主要使用web前台技术，内容一般通过javascript动态产生，国际化也是通过javascript调用json格式的文件来实现的。
这是一个简单的不能再简单的mobl的json语言文件：

{
	"Tip calculator":"小小计算器",
	"Click me":"点我",
	"You clicked me!":"被你点了"
}

再看看怎么使用这个语言文件

以小小计算器程序为例，打开TipCalculator.mobl文件。
首先在开头引用“import mobl”，i18n用到的方式在这个包里。
然后通过“fetchLanguageBundle(“zh.json”);”把json语言文件导入。
最后把原来使用字符串的地方，应“_()”函数包起来就得了。（“_()”好像Drupal呀。）
修改后的TipCalculator.mobl文件如下：

application TipCalculator

import mobl
import mobl::ui::generic

screen root() {
	script {
  	  fetchLanguageBundle("zh.json");
  	}

	var amount     =  20
  	var percentage =  10

  	header(_("Tip calculator"))
  	group {
	    item { numField(amount, label="amount") }
	    item { numField(percentage, label="percentage") }
	    item { "$" label(amount * (1 + percentage/100)) }
	}
	group{
		button(_("Click me"), onclick={
		  alert(_("You clicked me!"));
		})
	}
}

完成后的程序，可以在这里测试。

好了虽然能支持中文了，但是还是希望早日用上支持中文的mobl IDE。

mobl 是一个套手机应用开发工具（有自己界面描述语言+编译工具，提供基于Eclilpse的IDE）。完全基于标准web技术(Html+Css+javascript)，可以快速开发手机应用程序，跨平台，支持包括 iOS、Android 和其他支持 HTML5 技术的手机。

优势

• 适合各种支持html5和javascript手机平台
• 开发就是基于web技术,对平台相关的知识需求很少,入手快

劣势

• 不能完全访问移动设备的很多本地特性
• 没有native的app好用,好看

helloworld

从这里下载mobl的开发工具以后。通过Eclipse自动生成一个”mobl project”项目，保存一个简单的应用程序就完成了。生成的代码如下：

application hellomobl

import mobl::ui::generic

screen root() {
	header("Hello world")
}

界面效果是这样的，实际使用效果可以用手机或者支持html5的浏览器直接访问这个页面。

小小计算器

这是一个简单的计算器应用。输入是一个数字和一个百分数，输出是这两个数字乘出来的结果。所有的代码如下：

application TipCalculator

import ui

screen root() {
	var amount     =  20  //定义两个变量
  	var percentage =  10

  	header("Tip calculator") //标题
  	group {
	    item { numField(amount, label="amount") } //把变量amount与数字输入控件绑定
	    item { numField(percentage, label="percentage") } //把变量percentage与数字输入控件绑定
	    item { "$" label(amount * (1 + percentage/100)) } //根据这两个变量，计算，通过标签控件输出
	}
}

界面效果是这样的，实际使用效果可以用手机或者支持html5的浏览器直接访问这个页面。

碰到的问题

• 现在做出来的就是个web应用,如何包装成本地应用,如何发布到app store?
• 中文支持有些问题,在IDE中输入中文会导致编译不通过.但是只是在IDE环境中,直接编辑.mobl文件,通过命令行编译器编译没有问题.

后记

总体来看，使用mobl开发简单的应用速度非常快，语法很简洁。其他的还不太清楚，日后再看。
我不懂移动开发，但是发现mobl还是挺好玩的。欢迎熟悉移动开发的朋友多指正。

作者的主要想法是，通过把编辑器变成一个简单的脚步解释环境，来提高编码的效率。我想这也是VIM这种编辑器反而比一些的IDE效率更高的主要原因。不过Zen Coding的想法更新颖，代码更少。
例如我们要输入这样一段html代码，

<div id=”header”>
    <ul class=”navigation”>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
        <li><a href=”"></a></li>
    </ul>
</div>

以zen coding的方式，就只需要输入“div#header>ul.navigation>li*4>a”，然后按快捷键展开就好了。

心动了，来体验一下zen coding的魅力吧。这个在线的Zen Coding编辑器，是通过js，把普通的html textarea变成了不错的IDE。如何让你网站上的textarea也支持这个功能？试试这个吧。

我常用的代码编辑器是VIM和Eclispe，来看看怎么使它们支持Zen Coding吧。

首先来看看VIM

VIM下支持Zen Coding相对比较容易

• 首先确保你的VIM版本支持python的。我使用的是Debian/squeeze下的vim-nox包，squeeze下支持python的VIM包。
• 然后下载这两个VIM插件，zencoding.vim和zencoding_vim.py，拷贝到VIM的.vim/plugin目录中。
• 再从这里，下载Zen Coding for TextMate v0.3.1.zip，把压缩包里的zencoding整个目录拷贝到.vim/plugin下。注意是目录。

OK，现在可以打开VIM试试了。进入插入模式输入“div#header>ul.navigation>li*4>a”，然后按“Ctrl+E”，看看有什么效果，呵呵。
VIM下的Zen Coding的快捷键设置如下：

插入模式下Ctrl+L ：插入缩略代码
可视模式下Ctrl+L ：在选中的文本前后，重复插入缩略代码
插入模式下Ctrl+E：直接在当前编辑位置，运行并插入生产的代码
插入模式下Tab：同Ctrl+E

再说说Eclipse

Eclipse下支持Zen Coding实际上是通过js做的。就像在Firefox里有Greasemonkey这样的扩展是用户可以通过js来扩充Firefox；Eclipse下也有个类似的叫Eclipse Monkey的项目。

• 首先在Eclipse里添加这个更新站点http://download.eclipse.org/technology/dash/update，更新、安装Eclipse Monkey。
• 然后看这个演示，就知道怎么在项目里加入zen coding的js文件，来扩展Eclipse了。

Zen Coding现在是一个比较新的项目，有兴趣的可以多关心Zen Coding在Google code上的项目。

参考文档：

• http://code.google.com/p/zen-coding/issues/detail?id=16
• http://code.google.com/p/zen-coding/wiki/AptanaHowToEn