走走停停看看

显示一些如title/meta之类的特殊元素

Shawphy — Mon, 12 Jul 2010 09:30:51 +0000

title代表的是页面的标题，很多时候跟h1的内容是一样的。
我在写页面的时候感觉总是重复一次很麻烦，
于是就索性把h1给删了，把title给显示出来参与页面布局，
这样整个页面就有趣多了
代码很简单

head,title{display:block;}

是的，只有一句话，让head和title都显示。
此外如果还对其他有兴趣，可以把meta、script还有style等都显示出来

另外，下面这句也会很有趣

body style, body script{
display:block;
white-space: pre;
}

可以让body中的script何style都原样显示出来，
怎么用好就靠大家自己发挥了。

当然，我们亲爱的IE6是不支持上面两个小功能的。
Firefox 3.6.6 和 Chrome 6.0.458.1 测试通过。

自动刷新浏览器 for IE 的脚本

Shawphy — Mon, 14 Jun 2010 18:24:47 +0000

上回说到，可以设置好编辑器，让编辑器保存的时候自动生成文件。
对于firefox已经有一个扩展了，而对于ie则没这么容易了。
庆幸的是，我测试IE6通常是在虚拟机里的。这就带来了极大的便利。具体方法是：

虚拟机中共享一个文件夹
让编辑器在保存时在那个文件夹中写入文件
在虚拟机中允许一段脚本来检测文件
如果检测到文件，则刷新浏览器，并删除文件

具体的脚本如下，保存成vbs文件即可。

var WshShell = WScript.CreateObject("WScript.Shell"),
fso = new ActiveXObject("Scripting.FileSystemObject");
while(!(fso.FileExists("c:\\tmp\\stop"))){
WScript.Sleep(100);
if (fso.FileExists("c:\\tmp\\refresh.ie6")) {
try {
fso.DeleteFile("c:\\tmp\\refresh.ie6");
}
catch (e) {
}
WshShell.SendKeys("{F5}");
}
}
fso.DeleteFile("c:\\tmp\\stop");

这段脚本的目的就是每0.1秒检测一下c:\tmp\下是否存在refresh.ie6文件。如果存在就发送F5来刷新页面。
如果存在c:\tmp\stop文件，则结束这个脚本。

这对于用虚拟机测试浏览器兼容性的开发人员特别有用。

EasyUI for jQuery

Shawphy — Fri, 07 May 2010 14:54:58 +0000

今天看到这个EasyUI for jQuery，感觉还行。比jQuery UI看上去舒服点。有兴趣的可以试试。文档也比较齐全。

http://jquery-easyui.wikidot.com/

groove边框的使用

Shawphy — Wed, 24 Mar 2010 11:46:25 +0000

最近一个项目中，迷恋上了groove边框。灰色的背景下使用这个边框看上去就好像是刻在金属上的感觉。再配合上text-shadow，文字也好像是蚀刻在金属上的了，我很喜欢。

点这里直接看demo
关键代码如下，我选用了Calibri字体，看上去实在一点。用其他字体效果就不会很好。
Update:经网友Sinina提醒，Tahoma也很有质感。上面的demo里我已经换成Tahoma字体了。Tahoma在各个平台下通用性更高一点。推荐优先考虑Tahoma。

body{
background: #ddd;
font-family:Calibri;
color:#444;
}
table{
border-collapse:collapse;
}
th,td{
border: 2px groove #fff;
text-shadow: 0px -1px #bbb,1px 1px #fff;
}
td:active{
border-style: solid;
border-color: #aaa #fff #fff #aaa;
}

用版本控制工具管理VIM配置文件和插件

Shawphy — Sat, 06 Mar 2010 13:45:19 +0000

方便多台电脑，以及不同系统之间同步VIM配置文件

如果在win下，把配置写到 vimfiles/vimrc
如果在linux下，就是把配置写在 ~/.vim/vimrc 里

然后原先的_vimrc 或者 ~/.vimrc 文件里写入下面这句话
runtime vimrc
这句话会载入运行时中第一个叫做vimrc的文件

如果你有gvimrc文件，则跟上面一样操作

然后只需要对 vimfiles 文件夹进行版本控制就可以了，
换到其他系统，比如 linux 和 mac 下，也只需要在 ~/.vim/下面 update 就可以了

参考：
http://vim.wikia.com/wiki/Version_Control_for_Vimfiles

P.S. 中文资料比较匮乏，先前我使用的是source的方法。
后来用了英文关键字搜索才找到算是官方的wiki的，发现了这个runtime命令。
不得不说，vim作者考虑的很详尽，不愧是发展了~~几十年~~近20年的编辑器了。

附：
我的vimfiles，还很原始，配置中，尚未能用于生产。全中文注释，仅供参考。
http://bitbucket.org/shawphy/vimfiles/src/

文件保存后自动刷新浏览器页面

Shawphy — Sun, 28 Feb 2010 15:44:37 +0000

做前端的就是苦命，前端的键盘最苦命的是F5按键。
每次修改了点页面，写了点代码就要按F5去测试，着实让人崩溃。
除非用DreamWeaver这种工具，或者TopStyle这种，否则就免不了受罪。
这也归罪于微软各个GUI直接通信不良……

今天找到个方案，这位达人写了一个Firefox小扩展，用于修改js和host文件的时候用。
原理请参考上面的链接，我就拿来改了一改

敲击这里下载

注意：这个工具只是一个很原始的模型！！

怎么用呢？

很简单，在Firefox，打开你所要的页面，这个扩展会不停检测 D:\refresh.firefox 文件，
如果存在这个文件，他就会自动刷新当前页面并删除这个文件。

那么如何创建这个文件呢？

For VIM

如果你是用VIM的，在$MYVIMRC中加入这句话

function! b:AutoRefresh()
!start cmd /c echo x > d:\\refresh.firefox
syntax on
endfunction
autocmd BufWritePost,FileWritePost *.html :call b:AutoRefresh()

其中 syntax on 这句是为了可以不会出现一个等待键盘确认的事件。我是参考这里的
这就让html文件保存的时候生成d:\refresh.firefox文件了

For Editplus

如果你像我一样是Editplus用户的话，也很容易。如图

设置Auto Run: After Save里的，添加命令就行了。

cmd /c echo x >d:\refresh.firefox

只不过还是有点后遗症，随便什么文件保存它都会生成……
作为一个不开源，没有插件体系，更新也很不勤快的编辑器……要求也不要太高了……
友情提醒：请使用正版软件~可以在有能力的时候购买许可，或者转用其他开源编辑器，比如Notepad++等。不要让使用盗版成为国内软件开发人员的原罪……

For Others

基本原理都知道了，应该不难办了吧？

系统资源占用

实测下来，我E7200，CPU占用率不到1%。这个setInterval还是很节约资源的。

带来的好处

仔细想的话，节约的不只一步。你要切换窗口，要按f5，看效果，再切换回来继续调整。但如果你是宽屏或者是编辑器背景透明的话，无需切换就可以完成了。节约的是大把时间。如果是虚拟机或者其他电脑测试的情况下，也可以用局域网共享实现，非常好用。其他浏览器只要提供访问文件的接口，也可以如法炮制。

让服务器自动从Hg版本库中下载代码

Shawphy — Fri, 12 Feb 2010 18:58:19 +0000

每次写完代码，提交到版本库，测试可以执行不会冲突，推到远端代码仓库。之后要发布的话，还要通过FTP上传到服务器上，FTP速度又不很理想，严重影响工作效率。

有没有解决之道？有！

直接让服务器从代码仓库中下载代码不就行了么？代码仓库中已经包含最新代码了，让服务器从代码仓库的服务器远程下载代码，方便快捷全自动！

而且，现在用的是hg，而不是svn。svn有个问题，提交的代码可能是未完成的半成品导致程序无法执行。而hg的好处是半成品可以提交在本地，阶段性成果完成后再往远端代码仓库中提交。

下面就以使用BitBucket为例，其他服务大同小异。

编译 hg

首先需要在服务器端编译一份 hg ,编译起来还是很方便的，直接从官网下载一份源码，解压缩后make && make install 一下就行了。他源码包里的README里就这么写的。

Mercurial/Hg 下载地址

第一次clone

第一次使用需要先clone一份代码仓库到本地，以后就可以简单的使用pull命令获取更新了。
所以第一次使用需要 hg clone <你的仓库地址>
仓库地址可以在 BitBucket里的项目里找到。

编写 PHP

然后在服务器端写一个文件up.php，放在需要更新的目录下面，如下代码：

passthru("/< hg命令行工具的绝对地址>/hg pull -u https://<你的用户名>:<你的密码>@<你的代码仓库地址>");

以我的空间为例，就是：

passthru("/home/shawphy/bin/hg pull -u https://shawphy:******@bitbucket.org/shawphy/test/");

其中最关键的一步是要把密码也写在URL里，否则的话就得用popen()函数来处理密码交互了，比较麻烦。

这样，只要访问这个php文件，就能更新这个网站了。

配置Hook

然后，只需要在 BitBucket 项目管理中，Admin标签里，右边Additional options/settings面板下找到Services，点进去。然后添加一个POST服务，URL地址就填写你那个PHP文件的地址就可以了。

这样就能实现往代码仓库中提交代码后，网站服务器自动下载并更新代码了。

其他

如果要自己搭建的服务器上配置的话，参考 Hg 官方Wiki

Google Chrome 下也有 Firebug 了！

Shawphy — Sun, 07 Feb 2010 15:33:22 +0000

是的，你没有看错，Google Chrome 下也终于又 Firebug 了。
本人测试下来，手感相当棒。不愧是原团队的作品。
虽然是lite，但大部分功能已经都有了。
如果你像我一样用不惯Chrome自带的开发者工具，就用这个吧！
围观地址：http://getfirebug.com/releases/lite/chrome/

TortoiseHg 设置语言成中文

Shawphy — Sun, 07 Feb 2010 10:30:12 +0000

最近逐步打算把各种项目从 svn 迁移到 hg，之所以不用 git，
一方面是第一次用的时候感觉很痛苦，没掌握门道；
另一方面是google code 他们也选择了hg而不是git；
还有一点是，我更喜欢Python。

google 专门撰写了文章分析了为何选择使用hg而不是git，
翻译的可以看这篇 [翻譯]Git 與 Mercurial 的分析

而 hg 在 windows 平台上最好用的除了直接用命令行之外，
还有就是这个 TortoiseHg 。
但他有点小小的问题，就是中文化起来很不方便，
这个问题已经提交过issue，不知道以后版本会不会有所改善。

其实设置语言的方法在文档里有详细说明：
如果你安装后还是英文，想要切换语言的话，只需要设置环境变量，增加一个 LANGUAGE，设置为zh_CN 就可以了

哪里设置环境变量？
系统属性（就是“我的电脑”属性）里，高级，环境变量，
然后在下面的系统变量里边增加一个 LANGUAGE，设置为zh_CN 就可以了

仅仅这样你会发现他右键菜单还是英文的，设置右键菜单需要到
C:\Program Files\TortoiseHg\cmenu_i18n\
里边，找到对应的语言，比如简体中文是 thg-cmenu-zh_CN.reg
导入注册表就可以了。

jQuery 1.4.1 中文文档 CHM 版发布

Shawphy — Mon, 01 Feb 2010 16:16:24 +0000

新鲜出炉，更新了大量内容，应该还有一些BUG，欢迎纠错：

http://code.google.com/p/jquery-api-zh-cn/downloads/list

本来更早出来的，结果半路又杀出1.4.1，而且发现bind、live还有ajax等方法有大量更新，所以重新翻译这三个方法，消耗了大把时间。所以今天才发出来。