闲耘.博客

不要使用.clearfix类

闲耘 — Tue, 30 Jun 2009 02:10:16 +0000

经常见到这样的结构:


    Home
    Links
    About

并配合以类似这样的css定义（menus定义省略）¹：

.menus{/* ... */}
.clearfix:after{content:"\0020"; display:block; height:0; clear:both;}
.clearfix{zoom:1;}

这两段代码可以说都很简洁优雅、有语义、兼容性强，基本上都无可厚非，只是有一点：clearfix。

类似的clearfix定义和运用方式有很多，很多牛人都研究过，实现方式各有优缺点，上面举出的算是做的比较好的一个，但是即便样式定义本身完美无缺，仍有一个问题是：xhtml和css之间的耦合。我们提倡基于意识形态、语义化，而非表现形态的样式定义，定义.clearfix和定义.red一样糟糕。

这样的定义，在每个目前需要的xhtml标签上都要加上类似class="clearfix"这样的“冗余”代码，其实是否真的需要清除浮动，在于其子元素是否使用浮动。

对于“目前”使用（向左）浮动的菜单(menus)来说，清除浮动的定义，应该包含在menus中。

.menus{/* ... */}
.menus:after{content:"\0020"; display:block; height:0; clear:both;}
.nemus{zoom:1;}

不过这样解耦后的代码，会带来大量重复的.clearfix定义。

要么带耦合的重复使用.clearfix类，要么无耦合的重复定义多个clearfix实现。

是重复使用，还是重复定义，这是一个问题。什么时候css语法支持调用/包含就好了²。

.menus{/* ... */ #include .clearfix;}

参考：

免费获得SSH权限，享受翻墙的童趣

闲耘 — Thu, 25 Jun 2009 08:51:12 +0000

本文将提供一种一劳永逸的翻墙方式（ssh -D），实施之后，那道墙——对你来说——将从此透明。

本文面向的用户：使用Windows作为操作系统并且使用Firefox作为常用浏览器。

第一步：免费获取拥有SSH权限的帐号和密码。

默认的免费获取方式：将本文转载到你自己的博客上，将转载后的文章网址发送到。

转载方式：拷贝文章代码至博客后台HTML编辑器中，直接发布即可，文章标题自拟，可在前后文插入自己的评论。

经过人工审核，你将收到一封附有五个拥有SSH权限的帐号和密码的电子邮件，你可以将它们赠与你信任的人。

更多获取方式将在今后陆续激活，请关注我们的最新更新：https://friendfeed.com/fuckgfw

第二步：配置MyEnTunnel软件

下载并安装MyEnTunnel，该软件全名为My Encrypted Tunnel。

一键下载：https://dl.getdropbox.com/u/873345/download/myentunnel.exe

按照上图将第一步收到的帐号信息填写到相应的地方后，点击按钮，再点击按钮。

第一次连接过程中会出现一个认证对话框，按照提示确认即可。以后的自动连接中将不再出现此认证对话框。

最后点击按钮，使对话框隐藏到系统任务栏中。

提示：

为MyEntunnel创建一个快捷方式，将其复制到系统的【启动】（C:\Documents and Settings\当前用户名（需要修改成你自己的）\「开始」菜单\程序\启动）文件夹中，今后开机便可自动启动软件，并自动连接服务器。

绿色代表连接成功且稳定；黄色代表正在连接或重新连接；红色代表连接失败。

第三步：配置Firefox浏览器

假设你正使用Firefox浏览器阅读本文。

一键安装：http://autoproxy.mozdev.org/latest.xpi

点击立即安装，安装后，重新启动Firefox。然后你会看到如下对话框，选择gfwlist (P.R.China)后，点击确定。

接着你会看到Firefox主界面右上角出现有一个“福”字图案，点击“福”。

点击“代理服务器——编辑代理服务器”。

随即出现如下画面，你会看到如GAppProxy、Tor和Your Freedom这样一系列代理服务器名称。

将GAppProxy一栏的参数修改为如下图所示。

修改完毕后，点击确定。至此配置已全部就绪。

获取更多帮助，请关注反馈中心：https://friendfeed.com/fuckgfw-feedback

第四步：支持fuckGFW

如果您翻墙成功，请大笑一声并用充满磁性地低音说出：Hello, world!
如果由于线路原因，始终翻墙不成，不要气馁，给我们发Email，咱们一起解决问题。
假如哪天突然无法正常连接，请先到反馈中心汇报，我们会及时做出反应。
目前您有如下几种方式及时获取我们的最新动态：FriendFeed | Twitter | Blog。
保持默契，我们相信您一定可以做到。

版权信息：您可以自由复制、传播、演绎本作品且无需署名、无需注明原始出处。

电子邮件桌面客户端畅想

闲耘 — Fri, 19 Jun 2009 20:40:02 +0000

最近“谣言”四起，传说Gmail快要被GFW屏蔽了。我尽量不单以最坏的恶意来揣测这帮人，但是如今的中国正处于量变到质变的癫狂时期，什么事都有可能发生。中国已经没有新闻，即使有，也很可能是谎言。

由于这个荒谬的谣传也不乏可信度，尽管在有了Gmail这样优秀的邮件系统后我从来都不使用桌面邮件客户端，但这次不得不例外了，我要备份属于自己的邮件，由此便想到找一款优秀便利的邮件客户端。

现如今的邮件客户端市场也算是遍地奇葩，非常多的优秀产品可供选择，有微软的Outlook，腾讯的Foxmail，还有DreamMail，Yahoo最近推出的Zimbra，另外更有开源的Thunderbird和Claws Mail（基于GTK，传说支持标签和会话，未试用成功），还有及箩筐知名不知名的邮件客户端。

今天在公司初步试用了Thunderbird和Claws Mail，回家后又试用了Zimbra，加上以前用过的Outlook和Foxmail，也看过他人的评测，目前的感想是这几款客户端都很不错，Thunderbird, Outlook, Foxmail基本趋同，只是在性能和某些细节上有不同之处或强弱之分，不支持/不足够支持标签和会话；Claws Mail基于GTK，界面比较独特，从Google Images搜索的图片看来（可惜没欣赏到违禁图片），部分支持标签，也支持邮件会话，列表中以树形分支结构呈现，算是比较直观的，但跟Gmail比起来还是有差距；Zimbra支持的（彩色）标签功能很弱，支持会话但有许多错误，而且呈现方式并不直观，而且是基于客户端的网页版，安装了一堆东西，用着不算太舒心，也不太放心。

Zimbra-conversation

总之，目前仍未寻到一款真正让我心满意足的邮件客户端产品：友好支持邮件会话，支持（彩色）标签。Gmail offline如果也算是客户端的话，那这个比较靠谱，但是它目前还不是一款纯正独立的客户端，可以用来支持其他的邮件提供商。

p.s. 另外想到邮件备份格式问题，目前貌似还没有统一的标准，每一家邮件客户端生产商都各自为政，也没有注意到各种格式互转的工具。

班级说明书

闲耘 — Fri, 12 Jun 2009 23:49:00 +0000

[主函数]

他，孕育于2002年全国普通高考，同年9月，出生在古都安阳一个偏僻而又智慧的角落，从此，他开始了他短暂而平凡的一生。

[组成原理]

他外貌平凡，全身共有60个不分割的肢体部分。成长过程中，由于生长的新陈代谢，由于发育的青春勃发，有时他剪了指甲，有时他长了痘痘。但他的身材依旧，没有长个，然而他的每部分肢体，每部分肢体的思想精神却都有了长足的发展进步。

[进程]

大部分肢体都能平衡发展，当然，有的偶然发生矛盾、产生冲突，也是难以避免的，好在自己的“矛”不肯刺向自己的“盾”，好在努力“冲”刺几次，总能“突”破防守。

[特点：缺点]

他唯一的毛病就是太“大男子主义”，阳刚气十足，阴柔面十分贫乏。这与古都安阳的“太极相通，阴阳相济”大为不协，实是可惜。又或者，又可能，这是我们新时代，新潮流，新新人类的创新与逆向思维吧。我反叛，我喜欢！

[特点：优点]

他，多才多艺，有书法天赋，有文学细胞，有音乐才能，有领袖气质，有经济头脑，有外语能力，有运动技能，有美术功底，是不折不扣的大才子、大强人。我对他的赞赏如滔滔江水，连绵不绝，一发而不可收拾……..

[函数返回]

可惜，“天下无不散的筵席”，世间还没有不死的躯体，三年，只短短的三年，普通人还没有长大，他却流星般逝去。
逝去，
也就升华。
他的灵魂，他的精神正走在海角天涯…………

–
这是我在大学（计算机应用专业）将毕业时，给班级做的主页上的“关于本班”（“话说我们班”）的文章。
陈年老货，供大家一笑：D。

跨平台大一统 vs 原生平台

闲耘 — Fri, 05 Jun 2009 17:21:03 +0000

lifesonger详细对照了各主流浏览器后退操作后的表单数据状态，并提出跨平台让浏览器都保持行为一致的解决方法。我也有过这样的经历，埋头苦苦追寻跨平台，并让这些平台行为表现一致，但有时这只是自己一时兴起或临时偏好，这是用户真正需要的吗？

先就事论事。

作为一个默认浏览器为Firefox的用户，我下意识的知道，我的浏览器后退操作，以前一直是保留网页状态的（如表单数据，有些更先进的浏览器甚至可以记住最后的显示/隐藏区域，甚至是js的值。。。），而且多数情况下，我也期望保留/不丢失之前的数据数据，我相信许多Spammer也这样想：D。如果某个网页突然强行违背了我的期望，这给我的印象会是非常糟糕，因为我辛苦写下的评论被丢失了。

这是用户的事情，让用户来决定行为。

对照桌面应用程序的跨平台，也经历过类似的历程，如Firefox2，Java AWT，在所有平台下都表现一致，但是这个一致性并没有真正给用户带来好的体验。普通用户是不会在多个操作系统下面对比这个应用程序是否完全一致的，他们只关心这是否符合操作系统的原生特性/使用习惯，Windows放在右上角的关闭按钮，Mac放在左上角，一个跨平台的应用应该怎么办才不至影响用户？

Windows Mac

这也就是Firefox 3， Eclipse都使用各平台下的原生特性的原因之一。

话说回来，就后退这一功能本身的意义来说，我认为就应该回到页面最后的状态，包括css渲染，js操作，和表单的值，而可以不受网站设计者的控制，依此观点，再对照lifesonger的表格，发现被“忘记”的Opera9是做的最好的，依次是IE8, FF3, Chrome2，Safari则榜上无名。

lifesonger的功课是做的很好的，这个对照表及提出的特定解决方法也有它的价值。

另外扩展开来，一个跨平台网站的外观/特性，也应该和用户使用的浏览器，至少是操作系统的某些重要特性保持一致。那些模拟窗口关闭按钮所在的位置，要做自适应了。

20年前的今天

闲耘 — Wed, 03 Jun 2009 16:00:13 +0000

I REMEMBER!

同步/异步处理数据的设计模式

闲耘 — Mon, 01 Jun 2009 12:43:47 +0000

function action(get_data){
    get_data(callback);
}
function callback(data){
    alert(data.join());
}

function get_asyn_data(callback){
    // ...
    xmlhttp.onreadystatechange = function(){
        // ...
        callback(json.parse(xmlhttp.responseText));
    };
}
function get_sync_data(callback){
    return callback([1,2,3]);
}

action(get_asyn_data);
action(get_sync_data);

折腾Pidgin手记

闲耘 — Sun, 24 May 2009 08:53:04 +0000

一般朋友都会有QQ帐号（装B不用的另外再说），腾讯的TM做的还是不错的，所以主要是使用TM上QQ。

现在公司要求使用旺旺，同事间用旺旺交流较多，而且没有替代软件，这个没有办法。

新装的系统上没有安装msn程序，因为好友不多，通信数量也少，加上新版安装不上，旧版太丑，尤其是讨厌大面积入侵的广告，所以很久都不登录msn了。

Gtalk上倒是有一些geek好友，虽然交流不算多，但对Gtalk本身还是很满意的。常用Gmail，而且Web端的Gtalk也很强大，甚至超过了桌面应用程序，所以客户端是不考虑安装的。

突然手贱想再折腾下Pidgin玩玩，这次除了旺旺和百度HI没办法外，我将所有的可用帐号都给折腾上了，包括一起没折腾好的Gtalk自定义域名（customer domain）帐号，以下为各个帐号的设置及其注意事项。

1. Gtalk(gmail帐号)
内置支持，无需插件。
帐号设置很简单，基本不会出什么乱子，而且Google 官方有给出详细的设置指南(http://www.google.com/support/talk/bin/answer.py?hl=en&answer=24073)。参考设置如下：
基本：
协议：Google Talk/XMPP
用户名：Gmail帐号用户名，不包括@gmail.com/@googlemail.com部分。
Domain: gmail.com
资源： Pidgin
密码：******(你的密码)
其他设置自行掂量，注意：但是不要选中“Create this new account on the server”
高级：
[*]Require SSL/TLS
[ ]强制旧SSL(5223端口)
[ ]允许在不加密流上的纯文本验证
连接端口：5222 (默认)
连接服务器：talk.google.com
File transfer proxies: proxy.jabber.org (默认)
[*]Show Custom Smileys
代理类型：使用全局代理设置

2. Gtalk(自定义域名，customer domain)
内置支持，无需插件。参考：http://www.google.com/support/a/bin/answer.py?hl=en&answer=49147
帐号设置如下：
基本：
协议：Google Talk/XMPP
用户名：自定义邮箱用户名，不包括@you-domain.name部分。
Domain: you-domain.name
资源： Home
密码：******(你的密码)
其他设置自行掂量，注意：但是不要选中“Create this new account on the server”
高级：
[ ]Require SSL/TLS
[ ]强制旧SSL(5223端口)
[ ]允许在不加密流上的纯文本验证
连接端口：5222 (默认)
连接服务器：talk.google.com
File transfer proxies: proxy.jabber.org (默认)
[ ]Show Custom Smileys
代理类型：使用环境设置

3. msn(自定义邮箱)
通过正规途径无法使用自定义邮箱注册到msn，至少以前是，但我们能够通过其他方式办到。我很早之前就使用自定义邮箱注册的msn了，而且中途换了好几次，以前的@hotmail之类的帐号已经忘记了，但是有Pidgin登录的过程是一样的，没有Gtalk那么多不同，因为msn的自定义邮箱只是一个登录名，跟Hotmail之类的邮箱是没有关系的，而Gmail自定义帐号不同。
Pidgin内置支持，无需插件。
基本：
协议：MSN
用户名：msn注册邮箱全名，如 msn@xianyun.org
密码：****** (你的邮箱)
其他的自行掂量。
高级：
使用默认即可。

4. QQ
内置支持，无需插件。
基本：
协议：QQ
用户名：QQ号码
密码：****** (QQ密码)
其他设置默认即可
高级：
默认即可，最新版可以选择Client Version。

5. Yahoo(ymail)
我这里使用较新的@ymail.com邮箱，我想yahoo.com和yahoo.com.cn, yahoo.cn帐号更没有问题。
基本：
协议：Yahoo
用户名：邮箱完整地址，如hotoo@ymail.com
密码：****** (你的邮箱密码)
其他选项自行斟酌。
高级：
保持默认选项即可。

6. 飞信
需要插件支持。目前较常见使用的是一个SourceForge开源项目（http://sourceforge.net/projects/fetion）。参考：http://thisischen.com/2008/04/windows-pidgin.html，在这里下载插件（一个动态链接库）解压到 %PIDGIN_HOME%/plugin/ 下,重启Pidgin即可。进入账户管理,添加,即可看到协议中多了一项fetion.
基本:
协议:fetion
用户名:你的手机号,如果从未使用过飞信服务,需要进入飞信官方网站(http://www.fetion.com.cn/)激活.激活过程中需要填入你的手机号,激活后,飞信会给一个飞信号.
服务器:留空即可
密码:激活过程中填入的密码
其他选项默认即可.
高级:
默认即可.

7. Twitter
需要插件支持.这里用的microblog-purple的Pidgin plugin(http://code.google.com/p/microblog-purple/),参考:http://lorz.me/be-a-twitter-on-pidgin/ .这是一个可执行程序,安装后会增加一个TwitterIM协议.
基本:
协议:TwitterIM
用户名:Twitter用户名,如hotoo
密码:******* (Twitter登录密码)
其他选项默认即可.
高级:
保持默认即可.

8. AIM
国内用户较少,而且设置没有特殊的地方,这里不详细介绍.

快速定位到Google Reader指定的订阅条目和标签

闲耘 — Mon, 18 May 2009 17:59:50 +0000

当Google Reader订阅数量或者其中的标签使用过多时，要找到某个指定的订阅条目或者标签则会显得困难（查看指定的标签可以使用快捷键gt，然后输入标签名）这里提供一个Greasemonkey脚本，在Google Reader中增加一个文本框，辅助快速定位到指定的被订阅者和标签。

安装：
1. 需要先安装Greasemonkey (Firefox)。
2. 点击这里安装脚本。

使用：
安装完成后，刷新Google Reader即可看到左侧订阅列表栏上方多了一个文本输入框。
在文本框中输入关键字即可。

未知选项的表单设计

闲耘 — Sat, 09 May 2009 06:06:30 +0000

发现许多的注册表单设计中，性别部分的设计大都这样：使用单选按钮（radio）并默认选中一个（大都为男性，某些女性频道为主的可能为女性）。例如网页申请QQ帐号和注册网易通行证等

网页申请QQ （qq.com）帐号

注册网易（163.com）通行证

雅虎（yahoo.com）的设计比较特立独行，使用选择框（select），并默认不选中任何一个。我觉得本身只有两个选项，用选择框（select）比较费事，要多点一下（最近我怕了我这弹力十足的鼠标左键）。

而雅虎中国（yahoo.cn）的设计也是使用单选框（radio），但是不选中任何一个。

按常理来说，注册系统并不知道用户的性别是什么，默认选中任何一个都不合理。yummy有一篇文章《中文按1，For English, press 2》提到“如果用户必须做出选择，那就先给他做好一个选择。”，这个道理在某些情况很不错，但是用在这里不合适。

如果不足够了解用户，就不要替用户做选择。

以下为2009年5月10日更新，感谢yummy。
关于涉及隐私的表单设计，大体上有两种情况：
1. 不想向任何人（包括网络服务商）提供资料；
2. 向网络服务商提供资料，但是不想向第三方公开。

综合上面的未知选项表单设计，原型图如下：

第1个和第2个设计可以进行探讨，目前我认为第二个设计（默认选中“保密”）较好，可以明确引导用户心理，同时可以避免用户多点选一次，也不会导致不同性别用户的反感。

至于第3个设计，可以根据需求默认是否选中“不公开”。