专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

2011年5月

  • editplus 更新了 and 推荐款编辑器

    / 分类: 工具 / 3 Comments

    喜欢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的文章:http://www.fantxi.com/blog/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

  • cmd 设置java jdk环境变量

    / 分类: 工具 / No Comments

    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 css、js实现的动画 logo

    / 分类: 开发,实践 / No Comments

    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

  • as3 unescape 转义后的unicode中文

    / 分类: 开发 / No Comments

    比如在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'));