2011年5月

喜欢edtiplus的速度、小巧。
download：http://www.editplus.com/download.html
patch file：http://www.editplus.com/trouble.html
最新的3.30 build 555
vim装了一些插件+打开较多的文件感觉还是有点延迟的感觉。前两天玩了下textmate，感觉挺不错的。就是中文支持不太好，要安装textmate中文字体，看起来中文都是窄窄的。虽然有些瑕疵，但蛮喜欢的，不需要像VIM那样太折腾，可惜要在mac下用。

用了editplus新版，说下新增的功能。
1.file菜单多了TSVN，自带了几个简单的svn命令，比如：提交、更新、对比等。我之前发布的那个给ed添加svn的文章：https://xhl.me/archives/658/ 现在基本可以无视了。
2.ctrl+w -选择word,相当于vim的viw。之前貌似没有，好像默认是close的功能。选中行-ctrl+r。
3.ctrl+[ -匹配html的tag
ctrl+shift+[ - 选择tag，相当vim的vit
ctrl+] - 匹配脚本的()[]{}等括号
ctrl+shift+] -选择括号 内的内容。

暂时发现这么多。和vim的自定义比起来当然没法比，但是用户体验的确增加了。

---------

下面说下昨晚找到了2个不错的编辑器，这两款都被评为以后Windows下面textmate的替代品。

1、Intype，http://intype.info。最新alpha 0.3，中文需要改成宋体无论从长相or实用性上，目前都还一般。打开2M的文件测试，拖动滚动条的时候，就有卡住的感觉了，当显示拖到的内容时，高亮已经没了，就像语法高亮还没渲染到那里。

2、Sublime Text，http://www.sublimetext.com，更像textmate的感觉，用python写的。最新版下载：
http://www.sublimetext.com/2，有portable版本提供。不注册可以照常使用。比Intype成熟多了。就是感觉打开第一个文件的时候有延迟，之后就好些了。默认的语法高亮配色是黑色调的，这点不错哦。功能大体上还可以了，有些功能有点其他编辑器的影子(作者可能比较上心，借鉴别人的优点)。支持win、mac、linux，又一亮点，难道想和vim等神奇竞争？字体在配置文件里面可以更改，默认打开中文不乱码，用的系统默认的等宽字体-宋体，我改成圆体，不行，应该是必须要等宽字体才可以。

当然，我推荐Sublime，Intype目前还很弱。Sublime支持的语法高亮非常多，python、ruby、as都支持，Intype就差多了。两个都有snippet功能，比如输入if,然后tab，就自动出来if语句了，当然vim装插件也可以。Sublime已经自带了一些插件了，支持插件，我感觉以后会有前途。
不过，目前Code folding这两个还不支持。

附上我使用几个小时后，发觉比较有用的快捷键：
ctrl+shift+m - 选中括号内的内容
ctrl+m - 跳转到匹配括号
Ctrl+P - 跳转(默认搜索文件名，@-搜id、函数名等(可直接ctrl+r)；#-当前文件搜索文字；:-跳转到行(可直接ctrl+g))，功能挺NX的。
批量修改 - ctrf+F 查找word,Find All（或者按alt+enter），输入文字就把当前文件所有查找的文字修改了
ctrl+shift+d - 克隆行
ctrt+space - 自动完成（由于和切换输入法冲突，被我改成alt+space了，方法：Preferences-Default Key，搜auto_complete）
diy配置：Preferences - User File Preferences。可以写在这里，比如设置Sublime Text的字体：
"font_face": "DejaVu Sans YuanTi Mono",
"font_size": 10

FlashDevelop等很多软件需要用到java，以前重装系统后都是手动设置环境变量。用这个批处理就方便多了。

@echo off
color b0
set JDK_PATH=D:\WebDevelopment\JDK
if "%JAVA_HOME%" == "" (
    setx JAVA_HOME "%JDK_PATH%"
    setx /M Path "%Path%;%JDK_PATH%\bin"
    echo.
    echo JDK 环境变量设置完毕..
    echo.
) else (
    echo.
    echo JDK 环境变量已设置过.
    echo.
)
pause

google纪念玛莎·葛兰姆的logo，一大早就听群里面讨论，也许这个logo创意不错，得到大家的热捧。晚上抽空研究了下google的实现方法，此次的logo利用css的背景图定位+js实现。

自己找了个gif图改成css sprite背景图，做了个演示：查看
google的那个logo动画：查看

css、js部分其实不难，不过话说google攻城师的水平真不错。难点是把原始动画制作成CSS Sprites的部分，要规划好：如何才能用最小的图实现这个动画，如果仅仅单纯把动画里每帧的图铺起来，那意义就不是很大了。下面是注释过的js部分：

(function() {
	var K = {
		get:function(I){
			return document.getElementById(I);
		},
		create:function(T){
			return document.createElement(T);
		},
		remove:function(E){
			return E && E.parentNode && E.parentNode.removeChild(E);
		},
		on:function(E, N, FN){
			E.addEventListener ? E.addEventListener(N, FN, !1) : E.attachEvent("on" + N, FN);
		}
	},
	//把每个div的left、top、width、height信息存在js数组里
	coords = [
		[1, 6, 70, 74], [10, 4, 70, 76], [10, 4, 69, 76], [9, 4, 69, 76], [8, 4, 70, 76], [8, 5, 69, 75], [8, 6, 68, 74], [7, 6, 69, 74], [6, 7, 69, 73],[6, 6, 69, 74, 1], // 这里多了个值，表示下面开始调用背景图的下一行了
		[5, 6, 69, 74], [4, 6, 70, 74], [4, 6, 70, 74], [3, 6, 70, 74], [2, 6, 70, 74], [1, 6, 70, 73], [1, 6, 70, 74], [1, 6, 70, 74], [1, 7, 70, 73], [1, 7, 70, 73, 1], [1, 6, 70, 74], [1, 6, 70, 74], [1, 7, 70, 74], [1, 7, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74, 1], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74]
	],
	length = coords.length, num, repeatX, repeatY, rowHeight, timer = -1,
	logoId = K.get("hplogo"),
	nav = function() {
		alert("跳转页面");
	},
	draw = function() {
		var arr = coords[num];
		if ( logoId && arr[0]) {
			var b = K.create("p");
			b.id = "hplogo" + num;
			b.style.left = arr[0] + "px";
			b.style.top = arr[1] + "px";
			b.style.width = arr[2] + "px";
			b.style.height = arr[3] + "px";
			b.style.backgroundPosition = - repeatX + "px " + - repeatY + "px";
			b.onmousedown = nav; //for IE、opera 点击涂鸦跳转
			arr[3] > rowHeight && ( rowHeight = arr[3]); //记录当前背景片段所在行的高度(sprite图片中)
			//如果有arr[4]，就表示开始调用背景图的下一行了，背景图的y坐标就需要 + 上一行的高度；背景x坐标当然要重置为0了， rowHeight当然也重置为0。
			//如果没有arr[4]，表示还在调用同一行的背景图，那么只需要增加x坐标的位置就OK了。
			arr[4] ? ( repeatX = 0, repeatY += rowHeight, rowHeight = 0) : repeatX += arr[2];
			logoId.appendChild(b);

			//本动画比google 动画简单，上一帧图像没有用途，所以直接隐藏掉了，google的那个这句就没必要了
			num != 0 && (K.get("hplogo"+(num-1)).style.display="none");

			++ num;

			//num < length && ( timer = setTimeout( draw, 83)); //播放1次

			timer = setTimeout( draw, 120); num === length && init(); //循环播放
		}
	},
	init = function() { //加载sprite图片完成，开始涂鸦
		rowHeight = repeatY = repeatX = num = 0; //变量值初始化

		//下面的代码起到循环播放的作用;只播放一次,可以删掉
		timer != -1 && (clearTimeout( timer), timer = -1);
		for (var a = 0; a < length; ++a) {//如果已经添加了动画div，就移除
			K.remove(K.get("hplogo" + a))
		}
		draw(); // 开始涂鸦
	};
	//加载完成后才绘制动画
	var bg = K.create("img");
	K.on(bg,"load",init);
	bg.src = "sprite.png"
})();

对比这个葛兰姆logo，我更喜欢“罗伯特·本生诞辰200周年”的logo，利用canvas、css、js。

verne，这个也还可以，支持css3的浏览器使用transform来做动画，不支持css3使用position来定位实现。

围观更多logo：http://www.google.com/logos/index.html

比如在php里，json_encode后的中文就被转成前面是反斜线开头的unicode形式，比如“汉字”->\u6c49\u5b57。
在as3里unescape解码的是%u6c49%u5b57这样的百分号开头形式。
所以需要替换json字符串里面的\u->%u。

PHP里面：
$str = preg_replace("/\\\\u/u", '%u', $str);
而AS3里面：
str = unescape(str.replace(/\\\u/g, '%u'));