army8735

转发一条围脖时，不慎点错了，点到了它上面一条围脖的转发按钮上——这情况应该很常见，眼花手抖脚抽筋儿。常在河边走，哪有不湿鞋的呢？
于是乎，删除，重发。提示信息出来了：啥啥啥不能太贪心，只能发一条。可我已经将刚才的删除了……
猜测之：为防止用户恶意刷重复的内容（比如小广告），每条最新发的围脖（或几条）会被缓存下来；再发新的围脖时，先检缓存中是否有，命中则给予提示不能重复。
可惜这个业务逻辑没有考虑完备，删除上一篇再重发并没有清除记录，于是造成了这一现象。
以上。

在百度偶像内测的时候我得到了邀请码并且也试用了一阵子，目前偶像已进入beta阶段，我给我的一些坛子好友们也发了些邀请，过程中遇到几个细节上可以更完善的地方。于是乎一一述来。
先贴一曲：

如上图，外链的播放器这一点的确很让人享用，但是当歌名太长的时候，文字信息就会超出显示到外边。普通的桌面MP3播放器等，经常会有那种“文字滚动”的效果，即一行之类显示不完全，会让文字慢慢向左方滚动，如此展示完整。我在想偶像是否也可以用类似的或者其它的方式来解决这个问题呢？
再是外链链接方面，比如点击上图中的人名“西国の海妖”，应该是打开这位歌手的主页的，偶像确实也这样做了。但是遗憾的是，链接地址写的是相对地址，那么外链播放器这个链接也太……总之是个很低级的失误……
还有上传方面。我发现偶像在很多方面使用了flash，比如邀请注册的复制code那里，这与我们土豆很像，基本认定了这样一个准则：使用或浏览网站的用户一定是安装了必需版本的flash的。那么在上传方面，批量上传歌曲这种功能的出现就显得很人性化了。譬如从别的站点迁移过来的用户，有许多首歌要上传，一首首点岂不是要累死？以flash做个“高级上传”的页面功能，便可简化许多。
最后是歌词敏感过滤方面，比如我的lrc中如是填写：[01:18.99]上那繁盛帝国的荣耀与辉煌 转眼成荒芜坟场，会提示包含敏感词不能通过。仔细检查，原来是[01:18.99]这里有问题，难道是18.9被认为九月十八号比较敏感？类似的[02:08.96]也会报错，希望验证时对于lrc的[]时间部分可以忽略，毕竟一首歌那么多时间点，一一排查起来很恐怖。敏感提示的话最好也给个范围什么的，我用二分查找都很累……

“订阅按钮在哪里？”
这是昨天域名备好案之后，我和最终妄想－零聊天并告知他个人技术博客开通时，他问的第一句话。
仔细看站点底部，有着“Theme based on iStudio Designed by Xu.hel.”的字样。这套主题是下载Xu.hel的iStudio作品，当然在其基础上大肆修改了一番，比如宽度调到960，色调变成蓝色等等等等，几乎是面目全非了。且不说这些，iStudio主题还是蛮清馨简约的，不得不称赞作者的设计功力。然而文章开头的那句提问，却引发了对话者之间一个细节的讨论。
“我一般就找橙色图标来订阅。当你脑里想着‘橙色’的时候，都无视一切灰色物体了。”
04的这句话绝对可以当成金科玉律！的确，提到RSS订阅，人们第一印象就是想起那个橙色的、圆角矩形的图案来，于是乎每个人眼里第一目标就会去寻找它。当然，不乏有创意十足的设计师们设计出其它个性的图标，但他们也是在一定的原型基础上发挥天马行空的想象：譬如矩形变成圆形，颜色改成近色。很少有脱离原本模样完全让你完全认不出它是RSS的设计，除非制作得特别醒目，能引起人的好奇心把鼠标移上去看看是什么东西。而且这样做需冒一定的风险。google搜索rss图片，便能看到许多特别的的创意。

可以看到，以前的RSS订阅图片是灰色的，鼠标移上去才会显示原本的橙色。现在已经改为默认橙色，鼠标移上去变为橙红色。

紧接上篇，正太米想要八抬大轿明媒正娶回大家闺秀——Canon IXUS 95 IS，得先准备好聘礼。凑巧今日同住的一只loli（同学的GF，非闪光弹）要过生日，早先曾说过把淘宝上某个商店的泰迪熊送给她，可是却没有银行卡给支付宝付款。今日试了下拉卡拉，很是便捷，只是要付手续费……
充值之后，正太米兴奋地要登录淘宝，输入密码时突然发现页面提示大写锁定键打开了！幸好咱及时更正，要不然又要白输一遍了。记得以前英俊（EyesOnline）曾说过我们能不能也弄一个这样的提示功能，来提升用户体验？俺回答说淘宝人家是装了本地插件才能检测CapsLock，一般页面可没有办法。
时过境迁，如今正太米功力大增，思路扩展也今非昔比，于是乎一款网页版大写锁定键提示功能的想法跃然纸上……
为什么一般页面很难做到？
想要拥有大写锁定键提示功能，很显然，假如安装了本地插件那么键盘相应的状态自然很容易就侦测到了，做出提示功能水到渠成。而想基于网页的话，js还没有足够强大的能力来应付，只能做到一点点：在密码框按键或输入时侦测按键代码。凭此想要弄出相同功能的大写锁定键提示的话，明显是不可能的，只有另辟蹊径了。

跳出局限思维
既然js不能胜任，那么flash呢？目前网页上可用的技术有很多，但普遍的无非这两种：js和as。as是有能力检测大写锁定键的（flash.ui.Keyboard类），那么我们便可借助它来完成。
不过这里有个难题，那就是flash player想要检测按键，必须在激活的状态下才行。也就是说密码输入框需要做成flash，这可是我们不愿意看到的，那么有其它的办法吗？
解决之道
问题的回答是：当然有！结合js和as来做的话，这一问题便迎刃而解！可是有人又要问了：假如用户没有安装flash player 9及以上的怎么办，或者版本太低怎么办（即使fp9的普及率已经相当高）？不要急，综合考虑的结果是为安装flash player 9及以上版本的人提供全面的大写锁定键检测功能，没有安装的提供部分检测功能，如此便完善了很多。>
详细思路
首先用户分为2种：安装flash player 9及以上版本的和没有安装的。
假如安装了的用户在密码输入框输入密码时，onfocus和每个按键都会被侦测，一旦按键的keyCode是20（CapsLock的键值），那么便会通过ExternalInterface调用as3的接口，判断Keyboard.capsLock的值true或false，再回调js函数来显示或隐藏提示框。当然做这一切之前需要将焦点移至flash上，做完之后焦点移回密码框。
假如没有安装的用户只能部分体验到它的功能。依旧我们会侦听按键的onkeydown和onkeypress，两者区别是前一个包括功能键，后一个只侦测输入。并且我们设置了一个mode变量以区分大写锁定键为打开、关闭以及未知的情况。这样在已知mode的情况下，按下CapsLock键就能知晓其是否被打开了；而未知mode的情况下就需判断输入的字母的大小写并且是否同时按下了shift键来判断是否给予大写锁定键提示。
/wp-content/web/2009/09/capslock/index.html

具体代码
var bFlash = (function(){
var…

正太米最近想明媒正娶一个ＤＣ，几经对比后选中Canon IXUS 95 IS，于是立刻上淘宝上找既是低价又在上海有实体的店铺，准备择一良辰吉日将她迎回家中。在寻找的过程中偶然发现，淘宝的那个浮动工具条设计相当之性化！于是乎又择一良辰吉日下一喜帖，将她层层剥开细细品味之后写在了博客上。
在哪里能看到她呢？
很简单，随便到淘宝上搜索一件商品，出来的列表中就有她的身影。我将她的芳容截下，以便日后观赏。

人性化在哪里？
众里寻她千百度，找到之后你可能会问：她与旁人相比究竟有何不同之处？温柔贤惠还是可爱迷人？假设你搜出来的列表很长，请将浏览器滚动条往下拉，随后你就会发现窗口上部犹抱琵琶半遮面的她了（红框标出，IE6及以下此功能无法看到）。假如滚动条再拉回去，你会发现她又回到原来的位置对你含情脉脉，观察着你对滚动条的一举一动。

用户体验
为何要做这样一个功能呢？很显然，在列表过长用户浏览的时候，假设他想使用工具条中的某些功能（比如按价格排序），没有这种体验的话就需要将滚动条拉回顶部，然后一点一点在冗长的页面中寻找她的身影。这样实在是太麻烦了！我们能为用户考虑到的就是最最最方便懒惰的办法！现在是一切以用户为中心的时代，丢失了用户就等于丢失了一切！
于是乎工具条摇身一变，将用户服侍得舒舒服服。试问谁不会被这样一个细心体贴的人儿所吸引呢？
技术实现
好了，给诸位ＹＹ完了之后，该到正统的技术原理细节了。她的实现其实很简单，侦听window.onscroll事件，当拖动到一定程度时（这里是工具条看不见时，可以根据scrollTop值来确定），工具条的position变成fixed，如此实现了相对于窗口固定。拖回去的话再变回去，就这么简单。
底部的阴影使用了css3的功能，当然ie是用了滤镜：
-moz-box-shadow:rgba(0,0,0,0.2) 0 3px 3px;
-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=3,Color=#16000000,Positive=true);
最后说下为什么IE6下不支持，很简单，那是因为IE6没有fixed定位。一般情况要么我们选择无视，要么使用absolute定位并通过侦听window.onscroll事件来不停地变化其top值（scrollTop + clientHeight）。淘宝选择了前者，不知是因为技术维护复杂或者用户体验不佳还是推动浏览器升级。

Yslow整体评分93，当然中间内容还没有填上去，填满了肯定要掉死了。只放到了局域网上。
http://192.168.1.171/ol/

美贝网账户页面：http://passport.mypavo.com/passport
重构后页面地址（仅限局域网访问，并且需要我的机子处于开机状态）：http://192.168.1.171/mypavo/passport.html
重构后效果图：

可能表面上看不出来什么，但细细体味之后便会发现不同之处。且听我慢慢道来……
一切用数据说话，要对比的第一步，自然是整体页面大小、http请求数等了。打开firebug，请看：
线上版本
http请求数16个（主页面1个，css文件6个，js文件1个，图片9个），其中有一个重复icon.gif可以忽略不计，而附带的两个结果图片是xhr请求结果后动态添加的。
整体页面大小为161.8KB。
重构版本
http请求数11个（主页面1个，css文件2个，js文件2个，图片6个），其中有一个重复icon.gif可以忽略不计，无附带多余的其它请求，结果图片已合并到icon.gif中。
整体页面大小为39.4KB（gzip过）。
—
仅看数据对比，并不能体验到什么，那么细节上的重构、改动和用户体验等我列表一下，你就会明白。线上版本甚至有很危险的bug存在。
主页面
唯一的一个html页由7.2KB重构至3.18KB，不仅标签数量更少，而且将原本混在内容中的js部分提取出来。控制导航栏的放置在nav.js中，全站共享；唯一和此页面相关的passport.js单独保存。这也是为什么重构后1个js文件反而变成2个的原因（并不是失误）。
css文件
由6个变为2个，线上版本过于冗余，加在太多不相干的文件（比如room房间的css）。重构后一个全局globle.css，外加一个与页面相关的login.css。而且线上版本通过css来import另外的css，后期渲染会影响浏览器速度。
js文件
前面已经说过为何1个变为2个了。导航栏全站都有，所以应该提出单独的js文件进行缓存，而与账户控制相关的js则提取与此页面单独关联。
图片
由9个缩减至6个，合并可能合并的图片，这点线上版本已经做的很好了。改进的3张中2张是将xhr的结果请求合并到icon.gif中；另外一个就是将nav的背景图重新提取，用border-color代替边框颜色，并将渐变图合并到同一个bg.gif中。
—
好了，再说说用户体验上的改进，这点要看纯js功力了。
以注册为例，侦听keyup事件发送xhr请求验证用户名是否已经被注册。那么假如已经被注册了，显示结果是什么呢？
“不可用，请使用不少于3个字母数字组合。”
这是告诉用户已经被抢注名字了么……
keyup事件在诸多浏览器上表现不一，ie上支持输入和回退触发，ff上虽无回退，但却支持所有按键触发！
所以了，想搞死浏览器或者服务器太简单了：一个按键精灵，疯狂任意键，瞬间n多xhr请求冲上前去……
就算没恶意的人，打字快一点的话，xhr请求是无序的，说不定后面的返回结果就被前面的延迟覆盖了，orz……
再看看密码重复，我把重复密码输入和密码一样，ok没问题。我再更改密码，结果依然正确！那我再更改用户名试试看怎么样？好奇怪啊……
用户id输入中文会如何？也产生了一个xhr请求，而且本身就包含无效的字符的话继续输入还会产生新的xhr请求。虽说前端验证没有后端可靠，可是必要的前端验证可以节省很多非必要的消耗。
在用户名无效后关闭密码框，可是重复密码框却仍然打开。下面的注册按钮却依然可以用，而取消按钮却一直不可用。
—
花了一天多时间重构了下，感觉收获还是蛮多的。想做好一流的页面和交互以及体验，真得不是一件容易的事。