丁宇 | blog

继连续参加了两届D2前端论坛以后（第一届和第二届参会感受），第三届我以个人身份报名，被拒了：

“感谢您报名参加 D2. 因为名额有限，我们经过认真考虑，非常遗憾地通知您：您未能受邀参与本届 D2 前端技术论坛。”

花了点时间写了这个Greasemonkey的小脚本，作用是：

在论坛上点开帖子的时候，如果帖子里面有歌曲，因为心里一点准备都没有，常常被吓一跳。这个脚本可以让播放器默认隐藏起来，想听的话点播放就行，或者你也可以下载此歌曲。

源代码及下载地址见：http://userscripts.org/scripts/show/37123。

顺便说一句，userscripts.org这个网站做得真不错！

截图如下：

试用了一下刚出的Dreamweaver CS4，第一感觉是速度比以前快了。试用了一会儿就关了，在这个CSS决定表现的时代，想不出有什么理由还用它。“网页三剑客”的说法现在已经几乎听不到了。

做网页，我的常用工具包括Editplus、Coda和CSSEdit。

Editplus

在Windows上，Ultraedit太复杂，Aptana太笨重。Editplus小巧轻便，想开就开想关就关，一个字：快！无论是CSS、HTML还是Javascript我都用它包圆了。

Coda

Mac上很多人喜欢用Textmate，尤其是写Ruby的人更是对它赞不绝口。我则偏爱Coda，主要的原因是其用户体验好。不光是我这么认为，Apple也是如此－实际上，Coda是2007年的“Apple Design Award”获得者，奖项是“Best Mac OS X User Experience”。现在知道它的厉害了吧！

关于Coda的具体功能和特点，你可以去它的网站详细了解一下。顺便说一句，它的网站做的也是一流的棒！不仅视觉效果非常漂亮，而且和Coda的界面风格统一，更绝的是，就这样一个看似简单的网站，却发明了两种Javascript特效，一是“Download”按钮上面的浮动提示框，二是网页主体部分的滑动面板。目前这两种效果都已被jQuery爱好者封装为jQuery的插件。

Coda的官方网站

CSSEdit

其实Coda也可以编辑CSS，并且功能也不赖，可是和CSSEdit比起来还是稍逊一筹。

CSSEdit最让我满意的，有两个地方。一是其代码提示的手感非常好，这手感堪比MS的IDE（比如VB），写代码时干净利落、一气呵成，爽快得很！二是其“实时预览”功能非常好用，屏幕大的话，左面放预览窗，右面是编辑器，一边写CSS一边看效果，不用保存、刷新和切换，工作效率之高可想而知！

CSSEdit和24寸宽屏

另外，CSSEdit也是2007年“Apple Design Award”得主，奖项则是“Best Mac OS X Developer Tool”，它的官方网站做得也很棒！

D2前端技术论坛马上就要迎来它的第三次活动（第一届和第二届的参会感受），这次的主题是“前沿技术与前端协作”。我比较感兴趣的是这个“前端协作”，因为前端技术越来越像“后端技术”，那么相比较而言，在团队协作方面它的流程、方法和工具有哪些新的东西或经验，是个颇有意思的话题。比如，有多大可能做到像Java基于Eclipse的那种团队开发模式？

其中特别有2个主题我比较期待，一是由阿里巴巴的徐湛带来的“前端敏捷开发-质量与效率的战争”，因为敏捷并不等于损失质量，或者这里边的“敏捷”不是“Agile”？二是“IE8 as future platform”，虽然在前端工程师眼里IE以问题多闻名，但以MS的水平来说，这未必是技术上的问题，所以听听MS对“未来平台”的展望，或许可以从技术上了解浏览器接下来的发展趋势。

其实Javascript的本意是增强客户端的用户体验，但如果使用不当，反倒会适得其反。比如以下几种情况：

滥用Ajax

最典型的，就是Chinaren的校友录。校友录目前的设计很奇怪：先载入HTML后，再使用Javascript把同学们的留言载入并填充到HTML里。我不清楚其用意何在，但每次打开留言页面都绝对不是一次愉快的体验，一是有时候因为网速的原因，等半天只能看到页面布局而不见留言内容，哪怕我这次来只想看看最新的两条留言也不行；二是如此大范围的DOM修改，再加上页面上原有的乱七八糟的元素，经常搞得Firefox响应变慢。

其实像这种页面完全没必要使用Ajax来载入并填充数据，传统的设计不是挺好？我记得2000年前后Chinaren的设计非常清爽，大面积的色块、线条，整个页面的布局显得井然有序，当时还是我学习和临摹的对象之一。现在的Chinaren臃肿不堪，甚至多次直接导致Firefox崩溃。这还是我启用了Flashblock扩展的情况下，现在我要考虑是不是用Greasemonkey重新设计这个页面了。指望用NoScript访问Chinaren？想都别想。

上图是2001年时Chinaren首页的截图，是从我的光盘备份中翻出来的，你注意到那些不同层次的灰色背景和黑色线条了吗？我当时觉得这样的视觉设计非常棒－现在看起来也仍然不错。

链接到网页还是脚本？

先说校内。

在校内上处理好友申请时，我喜欢批量操作。所以按照习惯，按住CTRL（Mac上按Command）然后在一个个"接受"按钮上点过去，以便分别打开新的页面处理每一个申请。可打开了一大堆页面后发现，这个"接受"按钮分明是链接到Javascript脚本的，这个脚本的作用就是在原有页面上展开一个对话框，来让我填写详细的好友信息。于是我现在所面对的情况就是：数个Firefox标签页，每页中不同好友的详细信息对话框，我在第一个标签页中接受好友申请，第二个标签页中此申请还在，而我则一边操作一遍抱怨为何早不告诉我可以在同一个页面上操作。

今天校内发布了新的设计－他们也意识到这个问题并改掉了。目前的设计很棒，"接受"不再是一个链接，而是一个真正的按钮（input标签），上述问题也就不存在了。

当然这个问题相当普遍，如果要对那些有问题的设计做出改进的话，校内的做法值得借鉴。

顺便说一句，校内在Mac下和Windows下居然表现不一样，下图是Mac下FF的截图：

再说开心。

这个网站本身如何我就不评论了，反正我是被它的垃圾邮件烦得不行，索性注册并试用了一下。登录进去的10秒之内我就感觉非常不爽，因为它的导航链接完全使用了Javascript。我不能打开多个标签页同时查看它导航里的各个内容，通过滥用Javascript，开心网完全剥夺了我的这一权利。我仍旧无法理解把好端端的、标准的、简单的HTML链接替换为Javascript的意义何在。

可访问性（accessibility）一塌糊涂

Web Accessibility Initiative（WAI）对可访问性的定义是"残疾人也应能够使用网站（Web accessibility means that people with disabilities can use the Web）"，其实这个定义本身是不够全面的，因为WAI自己也说可访问性也应包含对非残疾人的考虑，比如支持键盘操作以提升专家用户的使用效率等。

但目前的网站太过于依赖Javascript了，把Javascript一关，很多网站直接瘫痪。好的设计应该具有比较强的包容性，这有点类似于程序中的容错能力，无论CSS/Javascript是否开启，网站应至少提供最基本的功能，而不是直接使用户无法访问。