YY in Limbo 混沌海狂想 » 网络

《新版阿尔法城背后的前端MVC实践》的幻灯片和⋯⋯这次没剧本⋯⋯

Dexter.Yy — Sun, 10 Jul 2011 03:16:25 +0000

拖到最后一天才开始准备，所以没时间写剧本照着念了T___T

幻灯片上的吐槽跟实际的讲话其实是属于两个平行世界：

http://www.slideshare.net/dexter_yy/mvc-8554206

新版阿尔法城背后的前端MVC实践

View more presentations from Dexter Yy

精选几张梗：

心中的闹钟和罗盘

Dexter.Yy — Mon, 07 Mar 2011 17:49:15 +0000

四年前写过《Hero’s come back》，现在又到了要写这种文章的时候，却发现想说的东西跟当初完全一样：

Dakkon：『知道』自己是一条艰苦的道路。
The Nameless One：知道后，我知道再过不久我要到那里去。时间和命运即将临到，我不会再留在这里。

但是要告别四年的时光，无论如何都需要一个郑重的解释，我年前写过一封farewell letter，就直接帖过来用了=_=，末尾附上我的专用告别歌曲《call me call me》 XD

From: “Yang,Dexter”
Date: January 21, 2011 4:58:07 AM GMT+08:00
To: “Xie,Grant”
Cc: “Zhang,feng”

呃，先自白一下，我在心理上有两个情结：1、最讨厌让别人扫兴。2、最害怕让别人失望。——所以这件事情我一直不想说，不过其实不管怎么拖还是无法避免，拖到年后可能对公司会有损害，所以我觉得去TMD还是赶快告诉人家罢：我在年后就需要离职了～

我觉得张峰应该会觉得很突然，因为刚加入一年左右，可能想象不到我的心境。公司年会里最后上台的十几位有四、五年历史的老员工，也让我非常感动（绝对不是场面话），实际上我也只差3个多月就可以上台了，现在我可以很清晰的回忆起07年，刚毕业和工作满一年，3月份辞职，在家宅一个月，4月中旬开始找工作，4月25日来上海加入土豆。

但我注定成不了那个能上台的人，在我内心里，有一个要求“前进”的闹钟，其实在一年前就开始鸣叫了。实际上我对时间非常敏感，最近几年我一直以这样的心态生活：总觉得自己其实得了绝症，只剩下最后几年时间。因为跟别人不一样，我在22岁之前的人生存在至少七年的空白（就类似三井寿罢），虽然我有一个原则是绝不后悔、绝不否定自己的过去，虽然我觉得那段时间有得有失，是那段时间造就了我现在的人格，形成了我现在做事的方法和态度（感谢互联网）。但必须承认的是：在过去相当漫长的一段时间里，我没有去做我应该做的事情，没有获得我能够获得的东西。所以我已经被束缚的太久了，也已经回归的够晚了，我没有时间可以停留。

内心里还埋藏着一个叫作“初衷”的罗盘。我有一个原则是绝不忘记初衷。忘记初衷相当于失去自我，但实际上人很容易在做事和与人交往过程中忘记原本的梦想和渴望。在土豆的最近几年里，我给人的印象可能就是对技术的专注和热爱，我也确实越来越把目光聚焦在技术本身上面。记得Yuki曾经说过我有很多想法，好像也很久没有那种交流了，库、框架、工具、模式、解决方案、尝试新技术，这些仿佛就是我的全部，每个项目、每个需求对我来说都好像是一个借口，只是为了在开发过程中挖掘、提炼和积累出更好的技术，至于产品本身的价值、意义、甚至体验，我都无法控制，无法影响，于是也就不关心。李戎让我给他们的前端介绍经验，我说的第一句就是“很多优秀的技术都来自失败的产品”。——但这个不是我的本意，而是妥协，技术对我来说只是手段和工具，我的初衷是创造新事物，让别人看、让别人用、让别人喜欢，换句话说，产品才是我的目的，学习技术、磨练技术、追求技术，都是为了创造更好的产品，实现那些以前做不到的事情。就好像一个魔法师，背诵咒语，苦练技巧，只为追求力量，然而为什么要获得力量呢——这个就是他的初衷。

我至今仍觉得土豆是一家很棒的公司，虽然已经物是人非，虽然在扩张过程中出现各种大公司的弊病，但它仍然保留着最好的那些部分（至少在局部范围内），这些优点也是我今后选择工作的标杆。另一方面，土豆的前端技术和前端团队，一直都让我自豪。如今土豆即将IPO，算是走完了一段路。前端的主要产品也基本上都转移到其他人（以前我即使没兴趣没效率，也像强迫症一样把东西都控制在自己手里，这样确实很不好），即便需求仍然繁多，反正我在生产力上占的比例也不大。广告和统计之类的系统都趋于稳定，技术架构的演化和规范虽然没有完成（本来我就不觉得有完成的那天），也一直保持在正确的、有前瞻性的路径上，张峰有足够的能力和执行力去推进，其实如果没有我，他还有更大的空间和自由度。我也很好奇：我留下的代码库有多少部分能保持生命力。我觉得要排除掉资历之类的因素，在“第二系统综合症”的影响下，完全由开发者的实际需求来选择，才能检验出真正有价值的部分。

现在是一个很合适的时候，不论对我还是对公司。需要强调的是，我离开不是因为工资低，这几年来一直有很多机会提供两倍以上的薪资标准，我离开也跟上市前景没关系，我好像要到6月份才能拿到最后1/4的期权，在近期离职应该是有损失的。记得加入土豆几个月之后，Vivian刚走（刚开始感到一点物是人非），有网上的老朋友邀请我去北京创业，当时我的回答是”我喜欢善始善终“，也就是说一切都取决于我自己的节奏和我个人的进展，而不是外界环境的变化，实际上从第一家公司开始，我就习惯了眼前人来人往。我不是被土豆的期权和许诺诱惑了四年，留下只是因为我在土豆想做的事情还没做完。

接下来我准备去北京，连带生活环境生活方式也一起改变，因为我觉得僵化的、习以为常的、缺少未知和期待的生活只是浪费生命。我接下来的工作会在豆瓣，实际上四年前我找工作的时候，是先投给豆瓣，然后才找到土豆——我一直都不算典型的视频网站用户，虽然日常看很多视频，但是我对片源、质量、字幕组乃至发片时间都有很宅的要求，很少在视频网站上看片，只能勉强算是一个youtube用户，所以我本来也不适合开发视频网站的产品（我觉得想从开发者的角度创造好产品，吃自己的狗粮是最重要的），我是Google, Apple和豆瓣的用户，我信仰技术，喜欢技术导向、工程师主导的产品文化，喜欢创新的、能拉近未来的事物，希望能为网络上那些在需求被忽视的情况下，仍然能自发组织起内部体系，创造出网络上大多数新内容新文化的“小众”用户们服务。

如果能完整读到这里其实有点超乎我预料了，也许对他人来说，有价值的信息就到第一段为止，我一向比较自我中心，所以写了过多的个人想法，不过，一方面是我真的很重视土豆同事对我的看法，即使要离开上海，也不希望留下任何误解和不良的影响，另一方面，我也是在梳理自己的内心，我觉得『知道』自己是一件很困难又很重要的事情，向前迈步之前，必须先重新审视自己，搞清楚自己到底是谁。

———————片尾曲的分隔线——————–

call me call me

———————片头曲的分隔线——————–

Across the Borderline

Google的大危机——本地app重新流行！浏览器和web已死？

Dexter.Yy — Sat, 21 Aug 2010 14:02:58 +0000

这个星期连线杂志的文章《浏览器已死，互联网永生》（中文）成功的引发话题，即使在中国都引发了广泛激烈的争论，以下这段评论我本来是像往常一样用google reader的note来写的，但是不小心写长了-__-b，干脆发到这里，文字没时间修改所以也没有笑点，我只是觉得这些很明显的道理，在很多人的文章里没看到提起，所以如梗在喉……

引发连线思考的，并非一份统计数据，而是本地应用（native app）重新流行的现象，连线把这种现象解读为：商业战胜乌托邦、垄断战胜混乱、封闭战胜开放、便利战胜多样、营销战胜传播、性能战胜创新、稀少战胜丰富、内容战胜技术……显然YY过头了，这些观点随便抽出一个都不可能不引发争议。而实际上呢，这个现象背后真正分出胜负的对战双方，应该是移动设备战胜传统电脑。

先想想web的优势：跨平台、即需即用、一致性、安装和升级的成本为0、托管数据、托管计算任务、自由开放、实现和分发新产品新内容的成本低门槛低——最后两条导致新产品新内容层出不穷。

在桌面电脑上，这些都是绝对无敌的杀手级特性，本地软件即便在用户体验和性能方面有优势，在web的巨大优势面前也是杯水车薪。所以我们看到：即使在第三方软件用户体验最高（平均…）的OS X平台上，本地软件替代web的情况都极少，相反，因为google reader，像NetNewsWire这样的阅读器软件销声匿迹。因为gmail，困扰开源社区多年的outlook终于有了替代品。我们也并没有下载安装一大堆本地app专门用来访问连线、NYT、维基、google maps、facebook……只有在那些web还没发展出成熟技术的领域，本地app才会无法取代，比如代码编辑器（vim/eclipse）和音乐管理（itunes）。也许有人认为twitter是一个app取代浏览器的例子……请问，早期的twitter真的是一个website或者webapp么？实际上只是一个数据服务罢？

正因如此，就在不久前，人们还经常畅谈web和浏览器取代操作系统，google也毫不动摇的坚守在浏览器里。为什么现在突然变调，开始有人怀疑浏览器将死了？

是因为移动设备火了。开头列举的web优势，并不全都适用于移动设备——我指的是“跨平台、即需即用、一致性”，人们经常需要使用不同的电脑：住宅里的台式机、公司里的工作站、咖啡馆里的笔记本……但是移动设备，比如手机和ipad，却几乎肯定是一人一机，没有切换的可能性，于是“即需即用”变成了“事先装好以后常用”、跨平台和一致性的需求也没了。另一方面由于app store的出现，移动平台上软件的安装和升级成本也大幅降低了（虽然对像我这样装了200+软件的用户来说升级还是很麻烦）。而“托管数据”和“托管计算任务”，也不再是浏览器的专利，在随时与网络连接、自身资源有限的移动设备上，本地app也大量使用云端的托管。因为这些原因，web/浏览器的优势被抵消了大半，本地app在用户体验和性能方面的优势凸显出来，成了最佳选择……

但是别忘了，web的优势还剩下两条：“自由开放、实现和分发新产品新内容的成本低门槛低“。仅凭这两条，web就拥有独一无二的生命力，也永远不会被app取代。想想看：世界上真正有几家企业的软件或内容服务，能为广大用户熟知，能轻易的说服广大用户下载安装甚至购买？假如没有浏览器里的web，这个世界就只有大厂商和传统媒体能生存，只会有封闭的、不一致的平台。新事物、新内容、新企业的出现都会变的很难、很慢、很少。一个成员数量接近七十亿的人类社会能接受这种世界么？

一种产品或内容，不论多么优秀多么创新的，都不会一直是最好，因为永远会出现更好。一种现状，无论多么尽善尽美，都不可能抑制住一些人对创造和自我实现的向往。一个企业，无论多么强大，也不可能满足长尾上的每一点需求、不可能看到每一个能通向引爆点的新方向。一个平台，即使是apple出品，即使它值得学习值得崇拜，但是值得去局限自己的视野、封闭自己的思维么——我觉得《连线》的编辑就是这样做的。

另外，就算是移动设备，也不适合所有人都一窝蜂推出本地app，上上周在书店遇到都市客的技术总监小叶同志，我也对他们的周末画报app泼过类似的凉水，小叶同志说重要的是”先圈地“，我认为……地是很有限的。比方说，我喜欢google reader的web界面，更喜欢ipad上的本地客户端Reeder，但要是你以为你的产品也能复制这种成功，用本地app来取代web界面，那就大错特错了——除非你是真正的杀手级应用，或者极少数垄断性内容媒体，否则除了死geek，没人会把你的app，连同另外上百个类似的app都安装保留在移动设备上面，我们只可能在web上，通过链接的跳转，偶尔访问到你。如果没有web，没有浏览器，你早就死了。

Google I/O大会keynote摘要

Dexter.Yy — Wed, 19 May 2010 19:10:19 +0000

VP8开源，免专利费，发布新的web视频格式 WebM
- WebM的组成包括：VP8（视频编码） + Vorbis（音频编码） + Matroska（即mkv，容器格式），文件后缀.webm
- VP8的FAQ：http://www.webmproject.org/about/faq/
- 来自x264开发者的VP8深度技术分析：http://x264dev.multimedia.cx/?p=377

几乎所有浏览器厂商都宣布支持VP8：
- Chromium：http://build.chromium.org/buildbot/snapshots
- Chrome在24号更新
- Firefox：http://nightly.mozilla.org/webm/
- Opera：http://labs.opera.com/news/2010/05/19/
- 微软宣布IE9将支持VP8：http://windowsteamblog.com/windows/b/bloggingwindows/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx
- Adobe在会上宣布flash支持webm/VP8，这样flash将支持5种codec：Screen sharing, Spark, VP6, H.264, VP8

Adobe发布HTML5开发工具
- dreamweaver的HTML5 Pack：http://labs.adobe.com/technologies/html5pack/
- 同时测试多种浏览器设备（Multiscreen Preview panel）
- 支持编辑和渲染CSS3，包括动画，有一个demo看上去很像用flash开发广告banner

Chrome Web Store
- 帮助用户寻找web app，可以在Chrome app tab上创建软件的快捷方式：http://code.google.com/chrome/apps/
- 内建支付系统，支持付费软件
- 包含flash软件
- 包含Native Client应用（原生程序＋HTML5 API），3D游戏可以全屏运行
- 包含出版物，演示了HTML5 magazine

Google Wave正式开放，包含一堆API和扩展机制，跟gmail整合

API更新
- Font API：http://code.google.com/apis/webfonts/
- Feed API支持PubSubHubbub：http://googleajaxsearchapi.blogspot.com/2010/05/google-feed-api-now-with-instant.html
- Maps API v3从labs里毕业

Google Web Toolkit 和 Google Ap Engine
- 跟VMware合作，整合 GWT 和 Spring（SpringSource Tool Suite， Spring Roo）http://www.springsource.org/node/2595
- GWT 2.1 Widget Libraries，支持移动设备
- Google Ap Engine企业版

以国家之名

Dexter.Yy — Sun, 10 Jan 2010 15:51:45 +0000

从我的Gmail里翻出的记录：

Mon, Feb 4, 2008 at 5:16 AM

subject: 注册信息

尊敬的用户，您的用户信息注册成功！用户名:dexter_yy

Thu, Feb 14, 2008 at 2:14 AM

subject: ICP备案审核通知（审核拒绝）

尊敬的用户:dexter_yy，很遗憾的通知您，您的ICP备案申请不能通过审核，拒绝原因是：您所备案的网站：请确认网站服务内容一栏填写是否准确.
接入商的核实意见：
(1) 信息不正确请重新核对准确接入商

Mon, Feb 23, 2009 at 8:36 PM

subject: 关于网站备案用户执行“找回密码”操作后新密码的通知

尊敬的用户：dexter_yy，您于2009-02-23 20:33:34使用了备案用户找回密码功能，您找回的密码是：[马赛克]。请慎重保管注册密码！工业和信息化部网站备案系统

Wed, Mar 4, 2009 at 1:54 PM

subject: 关于ICP备案信息不符合备案要求退回修正的通知

尊敬的用户，很遗憾的通知您，您的ICP备案申请(limboy.com)，经[上海市通信管理局2]审核，不符合备案要求，现退回修改，原因请登陆系统查询。

Sat, Dec 12, 2009 at 2:59 PM

subject: 关于网站备案用户执行“找回密码”操作后新密码的通知

尊敬的用户：dexter_yy，您于2009-12-12 14:48:31使用了备案用户找回密码功能，您找回的密码是：XXXXXX。请慎重保管注册密码！工业和信息化部网站备案系统

Wed, Jan 6, 2010 at 10:45 AM

subject: 关于ICP备案申请审核通过的通知

尊敬的用户：您的ICP备案申请已通过审核,备案/许可证编号为: 沪ICP备10000943号，审核通过日期：2010-01-06。

撒花～

本来我准备只贴出以上这些邮件内容，然后就结束本文点submit按钮发POST请求……但是这种把思考的工作托付给读者的写法，我还是有些不太放心，我担心这会让人误解我的意图，以为我是在嘲讽帝国衙门的政策法规和办事效率，不，如果这是你的理解，你错了，我是在嘲讽自己。

我的blog被关闭了大概有一两个月，在这段时间里，有很多人来问我，我都没回应，因为实在没什么好说的，没有黑幕，没有冤情，没有河蟹。我有充足的时间（早在一两年前我就知道不备案的后果），我有足够的帮助（盘古有专人为客户的备案提供支持），我有相对宽松的环境（直到现在，工信部仍然不会在处理申请的时候去审查网站的内容，甚至都不在乎网站是否存在，你只要去申请，只要你提供的信息不会对他们的工作流程造成困扰，他们就给你发ICP许可证），但我却把早就应该完成的备案，一直拖延到现在。都是我自己的错。

也许有人会说：你到底是真傻逼还是在装逼，错的首先是政府啊，你的blog被关闭，是因为现在这种荒谬愚蠢的国家政策，是因为统治阶层不懂得也不喜欢互联网的开放精神，是因为伟光正要控制信息，是因为工信部的备案系统太难用，是因为公务员的办事效率太低……总之，你怎么能不抱怨呢，你这不是麻木顺从的劣根性么

我会从土豆网里搜出一个视频来作为回答，不是什么经典大片，而是TV动画，如果不是宅男宅女应该就没看过——《地狱少女》第二部的第15话，标题是“以國家之名的墮落”，在这集故事里，女主角百合子的父亲是一个loser，家境穷困，生活很艰辛，他认为一切不幸的根源都是日本当时的首相大泉太一郎（这个名字应该不用注解罢），把全部时间投入到基层的助选活动中，支持另一个首相候选人，为此还不断借债，把自家的小工厂扔给妻子一人支撑。百合子在故事开始的时候就求助于地狱少女，希望把大泉首相立刻送进地狱，因为在这种家庭环境的影响下，她也认为只要没有大泉，人民生活就会幸福。但是后来，她的母亲劳累过度病倒了，在病床上，母亲说出了朴实的真相：

母亲：“不工作就不能生存……”
百合子：“果然这个国家的政治体制很异常！竟然要让人工作到弄跨身体才能生存！这都是大泉政府的错！”
母亲：“不是这样的……”
百合子：“什么不是啊，大泉首相上台前，我上小学的那个时候，生活不是还很轻松吗？！”
母亲：“更痛苦的时候也遇到过。可那时候一家人一起克服过来了，挥汗如雨的工作”。
百合子：“诶？”

虽然大泉的政策确实对百合子家工厂的衰败负有责任，但是导致境况越来越差的却是自己，不幸的根源是自己。自己的生活和自己的事业，最终还是需要自己的努力工作来改善，百合子的父亲把希望完全寄托在大环境的剧变上，但是大环境却不可能永远满足个人愿望，因为社会永远都由各种少数派和多数派拼凑而成，时代永远都像洪流一样让人身不由己的“前进”，正如比古清十郎说的那样：“时代和人心都有弊病，无论你有再强大的力量，也阻止不了时代的洪流。现今如此，今后亦然”。

最后，即使大环境真的剧变了，就能立刻体验到改善么？说到这里我想到了台湾的“马上就好”，想到了美国的“Change Has Come To America”，想到了日本的“政权更迭”……只要自己不行动，改善就不可能从天而降。如果等到那时才行动，就更不可能“马上就好”。既然早晚要行动，为什么不从现在就开始？

以国家之名的懒惰，以国家之名的松懈，以国家之名的放弃，也许能赢得一些同情和理解，但是最终失去那些东西的仍然是我们自己。

最后，百合子委托给地狱少女的不是大泉首相，而是自己的父亲。完整视频：

PS：其实我并不是因为没及时备案就妄想出这些，而是因为长时间以来在twitter上体验到的氛围，积压在心底。

PS2：我的“拖延”习惯貌似是一种症状，叫“Procrastination”，由于最近帝国对网络的打击，相关文章的链接失效了^_^b…..请自行搜索……如果不是看了那些文章，我还以为这是个性呢……

PS3：虽然我常常几个月都不更新blog，但是在blog关掉的这段时间里，却叛逆似的积压了好几篇……有的发在论坛，有的放在evernote里，接下来会找时间发出来，希望不要拖延-___-b

我觉得做NARUTO TV动画的人应该切腹

Dexter.Yy — Sun, 20 Sep 2009 15:45:48 +0000

虽然早在火影沦为四大民工漫之首的若干年前，我就已经没怎么追了（漫画偶尔看看），但是早期几个章节的tv动画（比如卡卡西vs再不斩，中忍考试李洛克vs我爱罗）曾经让我非常非常感动，我不是指那些纠结的人性和搅基的情感之类的玩意让我感动，是指镜头变化和速度感都非常华丽的打斗场面，最近的一部能让我有类似热血感觉的作品是BONES的SOUL EATER。

那段时期大概也是西尾铁也和他手下那帮超强的作画人员还在全力参与的阶段，西尾铁也这个人在国内不算出名，但是他参与过原画的几乎全是神作：《攻壳机动队SAC GIG》，《交响诗篇eureka7》，《精灵守护者》，《东之伊甸》（刚完结，前段时间最喜欢的），押井守最近的剧场动画《空中杀手》（The Sky Crawlers）的人设也是他，主要人物的脸和身体就像火影里一样圆润……

Rock Lee vs 我爱罗的一个MAD版

精灵守护者里的第一场打斗片段

精灵守护者里评价最高的打斗片段

西尾铁也并不是一个人在战斗，他的背后是日本最强（在西方人眼里，对我来说只能算“之一”，BONES，MADHOUSE等公司也能保证必出精品）的动画公司IG，跟他同级别能保证作品质量的强者还有：沖浦啓之（罗德斯岛战记原画，MEMORIES原画，攻壳GIS作画监督，COWBOY BEBOP剧场版OP分镜，演出和原画），黄瀬和哉（天空战记作画监督，EVA TV/旧剧场版/新剧场版作画监督，浪客剑心原画，攻壳SAC SSS原画），此三人合称IG作画三大神。他们参与过的神作不止这些，我只拿自己熟悉的举例。

Cowboy Bebop剧场版天国之扉的op《Ask DNA》，菅野洋子作曲

实际上早期的火影创作团队简直是精英云集，比如音乐是由天才作曲家増田俊郎（他为《虫师》创作的两张碟可能更有名）和擅长日本民俗乐器的摇滚乐队“六三四Musashi”（演奏尺八的那位：http://www.douban.com/subject/2213500/）合作的，包括前三张OST专辑，我最喜欢其中的摇滚部分，比如OST1里的Need To Be Strong和OST3里的自来也主题。

自来也主题曲

但是像西尾这样的人才不可能一直把精力花在柯南般的没完没了的国民动画上，再加上投入的成本大幅降低，为避免进度赶上漫画而搞出的大量脑残般的回忆段落和原创剧情，早期那些热血的动作场面和CG再也看不到了……后期的火影tv版给我的最深刻印象是：主角们在树和树之间跳跃可以花上几十分钟的片长，其滞空时间和思维活动的复杂深邃，远远胜过当年灌篮高手在角色跳投或抢篮板过程中让观众发表五分钟评论的场面。

昨天晚上~~哥很寂寞~~，一边看书一边在台式机的chrome上挂豆丸，无意中发现火影最新的OP《萤之光》很好听（可能是因为结合了画面才好听，生物股长这个乐队在红白歌会里看到过，没什么特殊印象），在豆丸里切换了几个相关视频，发现一个MAD版本（MAD即MADMOVIE，这个词起源很宅，反正在日本动漫社区里指二次创作影像），大部分画面是从PS3游戏Naruto: Ultimate Ninja Storm里剪辑出来的，身为一个没买过任何次世代主机被别人主动赠与X360长达两周时间连GTA4都没通关的坚定的久经考验的PC玩家，当时我就震精了……靠这战斗画面太华丽了口牙！速度感满分（比如阿斯玛的斩击，日向雏田的八卦六十四掌），还表现出了漫画里没出现过传说中的技能（四代火影的时空忍术，效果确实像金色闪光）。相比之下现在的动画究竟算什么水平口牙！为什么差距这么大，难道就因为~~南梦宫更有钱么~~（纠正……好像是开发.hack的那个工作室搞的），关键还是认真的充满爱的态度罢！

视频来源是niconico，土豆上只能找到三部，基本上所有人物都出场了，优酷上搜不到：

然则画面实在是太模糊了，土豆的MPS系统应该不至于把好片源压成这个鬼样子，因此，这就是我写这篇blog的目的叻！虽然你看完之后可能以为我在发软文……咳……但是……人家没有骗你～人家真的就是想知道这个视频的出处地址或者其他清晰版本嘛～～跪求！（我把别人以前共享的niconico帐号给忘了T___T）

P.S. 最后我要指出……在写这篇blog的时间内很轻松的搜出以上关键词比较特殊的视频，感觉土豆自己研发的搜索系统还是蛮好用的喔活活活活……唯一失败的是soul eater的打斗片段……如果在youtube上搜索“Mifune vs Blackstar”，一定是大把的两三分钟左右的片段，而国内视频用户上传的几乎全是25分钟左右的完整动画……汗……

[内销转出口]寻找最好的JavaScript面向对象模式和封装结构

Dexter.Yy — Sun, 20 Sep 2009 05:02:22 +0000

好久不见，这次发的不是笔记啦，是我在公司内部的前端wiki上更新的文档……这个抛弃所有wiki语法要求用户直接手写语义化html用json配置导航的wiki排版相当漂亮，让我这样的懒人也有了码字的欲望，发起人小麦实在系功德无量……

这篇文章去年就准备写，想用循序渐进的形式推演出一个Module Pattern的最佳实践，不过想法越多，归纳总结表达出来的成本就越高，所以一直拖延……这次发的文档是一个简化版，去掉了各式各样乱七八糟的写法，只包含几个常用的，说明文字也不多主要看代码-__-b……初衷是作为给土豆前端team里新来的同事看的提纲（对了由于某人叛逃到产品设计部门，现在又空出一个名额，有兴趣的同学抓紧时间投简历，这次是魔都总部的职位，不是成都的），所以要解释一下，文档中提到的TUI是一个js库（名字是很俗，不过我上次发现某年纪一大把的人也跟我一样俗），土豆一直采用双库并行（不要看成双工并行…）的形式，在紧跟开源社区发展的同时自己掌控所有环节和基础架构，没有使用jQuery UI和那套基于DOM的插件结构，而jQuery自己几乎不提供OOP工具（这是好事），实际上自己创建这类工具非常简单快捷，相关的代码我提取了一下直接帖在末尾了，仅供参考。

另外，为了符合Nicholas Zakas在最近的国际会议上传达的精神，我修改了若干变量名跟他ppt里的例子保持一致——这件事教育我们，平时多上slideshow.net对保持先进性是多么重要。

Tudou’s JavaScript Guideline — OOP and Module

介绍土豆在面向对象和模块化设计方面的工具和实践

“Don’t Repeat Yourself.” (DRY)

“Rather than construction, programming is more like gardening.”

Quote from: Andy Hunt and Dave Thomas, The Pragmatic Programmer

创建类，继承，混入，实例化

我们依赖的核心工具是TUI.clone

简洁的，支持私有属性，不需要prototype的写法：

JS是基于原型而不是基于类的面向对象语言，JS是“无类型”的，类是仿造出来的概念，实质只有对象。
new只是用来复制对象，构造函数只是用来返回对象, 两者对JS的OOP来说并不是必须的。

var dog = function(options){
var privateAttr = 1; //私有属性
var private_method = function(){}; //私有方法
return {
option: options, //实例属性
method1: function(){}
};
};
var xiaobai = dog({});

对私有属性/方法的支持比较好
最适合单例模式(Singleton)
延迟单例的初始化，提高页面初始化的速度
缺点：对继承的支持不佳
缺点：在需要频繁创建大量对象，而方法非常多的场合，浪费资源（因为每个实例的方法指向的都是不同的函数对象，每次实例化都要重新生成所有函数）

在第2个缺点的场合，传统的prototype写法效率更高，支持继承，但是代码分散，不易读，TUI.clone提供了更好的写法——

传统的、支持继承的、仿Ruby风格的Class写法：

//创建新类
var Dog = TUI.newClass({
initialize: function(options){ //构造函数
this.option = options;
}
});
//实例化
var xiaobai = new Dog();
//继承
var Cat = TUI.newClass(dog, { //只允许单继承
mixin: [TUI.event], //混入其他方法
initialize: function(options){
this.superClass.call(this, arguments); //调用父类构造函数
}
});

风格类似mootools的new Class
TUI.newClass只是TUI.clone的封装
mixin相当于在构造函数里$.extend(this.prototype, TUI.event)
实际上应该少用继承，多用mixin和组合模式，后者更符合JS的特点
缺点：封装效果不好，不支持私有属性和方法

TUI.clone既可以复制构造函数的prototype，也可以直接复制对象（跟jQuery.extend不同，依靠原型继承），所以利用它直接生成实例。

这样可以在不引入prototype和语法糖的情况下把第一种方法改造的同样高效——

对象克隆工厂的写法：

var dog = (function(jQuery, TUI){ //传入需要访问的全局命名空间
var a = "xxx"; //不作为状态的私有属性
var private_method = function(){ //私有方法
alert(this.option);
};
var PublicObj = { //相当于prototype对象
method1: function(){
private_method.call(this); //访问私有方法, 共享状态
}
};
return function(options){ //对象工厂
var obj = TUI.clone(PublicObj); //克隆
obj.aption = options; //构造函数中的常规任务
$.extend(obj, cat); //mixin其他对象的方法
return obj;
};
})(jQuery, TUI);
var xiaobai = dog({});

效率高，封装好，耦合少易于修改和扩展
缺点：私有属性不能作为实例状态

把以上第一种方法和第三种方法结合互补，为module模式——

模块化 Module Pattern

核心工具是TUI.module

TUI.widget.dog = (function($, TUI){ //除了库的命名空间，尽量不访问全局变量
//所有模块代码都封闭在这个区域内
var a = "xxx"; //不作为状态的私有属性
var private_method = function(){ //私有方法
alert(this.option);
};
var privateObj = {}; //可作为状态的私有属性
var privateAttr = function(name, value){ //读写私有属性的方法，只能在内部使用
var p = private[this.objectId];
if (!p)
p = private[this.objectId] = {};
if (value)
p[name] = value;
return p[name];
};
TUI.dog = TUI.newClass(parentClass, {
mixin: [TUI.event], //混入其他方法
initialize: function(options){
this.superClass.call(this, arguments); //访问父类构造函数
},
public_method: function(){
var b = a + privateAttr.call(this, "c"); //访问私有属性
private_method.call(this); //访问私有方法
}
});
//工厂方法，给别人使用的接口
return function(options){
var obj = new TUI.dog(options)
//实例加上唯一的ID，类似Ruby，注意只用+new Date()不能避免重复
obj.objectId = "tui_object" + ( +new Date()*10000 + Math.random(1)*10000 );
return obj;
};
})(jQuery, TUI);

为了便于理解，以上代码是集中在一起的简单实现，进一步封装之后，有些步骤可以省略：

objectId的初始化已经由TUI.clone实现
privateAttr方法和私有属性map由TUI.newModule实现
TUI.newModule是TUI.namespace和TUI.module.create的封装

基于 TUI.clone 和 TUI.newModule 的写法

TUI.newModule("TUI.widget.dog", function(sandbox, $, TUI){
TUI.dog = TUI.newClass(parentClass, {
mixin: [TUI.event],
sandbox: sandbox, //有sandbox属性传入时，attr属性会被转化为外部无法访问的私有属性
attr: { //初始化私有属性的默认值
a: 1,
b: 2
},
initialize: function(options){
this.superClass.call(this, arguments); //访问父类构造函数
},
public_method: function(){
var b = this.attr(sandbox, "a") + this.attr(sandbox, "c"); //访问私有属性，通过sandbox参数来验证身份
}
});
return function(options){
var obj = new TUI.dog(options)
return obj;
};
}, [jQuery, TUI]);
var xiaobai = TUI.widget.dog({});
console.log(xiaobai.sandbox); //undefined
console.log(xiaobai.attr); //undefined

这里的sandbox其实还可以做很多事——

沙盒，模块间的解耦，与外部通信

TUI.module.create方法其实来自TUI.moduleClass的实例，其他独立应用同样可以继承TUI.moduleClass，构造自己的沙盒对象

var Douwan = TUI.newClass(TUI.moduleClass, {
notify: TUI.clone(TUI.event), //事件在这里可以理解为通信器
initialize: function(options){
var me = this;
this._sandbox.notify = this.notify; //把通信器指向自己，避免跟全局的事件命名冲突
//给沙盒增加ajax方法，让module内的代码通过沙盒来通信，屏蔽url路径和响应格式之类的细节
var url = "http://www.tudou.com/path/service.action"
this._sandbox.getJSON = function(param, fn){ //模块只需要传url参数
me.getJSON(url, function(text){
var jsondata = me.toJSON(text);
fn(jsondata); //无论返回格式是什么，都传json给模块
});
};
},
toJSON: function(){},
getJSON: function(){}
});

让应用的不同模块之间解耦，避免在模块内部直接使用外部的命名（除了库的api）

var douwanObj = new Douwan({});
var module1 = douwanObj.module.create(function(sandbox, $, TUI){
sandbox.getJSON({ iid: 10000 }, function(json){
//通过通信器调用module2.update
sondbox.notify.fire("module2-update", [json.date]);
});
}, [JQuery, TUI]);
var module2 = douwanObj.module.create(function(sandbox, $, TUI){
var obj = {
update: function(){}
};
//注册一个update消息的接收器
sondbox.notify.bind("module2-update", function(date){
obj.update(date);
});
return obj;
}, [JQuery, TUI]);

页面初始化时并不一定需要渲染或操作所有模块，因此有些模块的代码可以放在外部文件里，需要的时候再注入到页面里，类似Python的import

按需加载模块 On-demand Lazy Load

自动管理各个模块之间的依赖关系，根据代码内容加载不同的文件，这样做的成本太高，适合大型企业应用，我们的设计原则是“恰到好处”，所以通过文件名来管理模块

注册模块

TUI.module.join("http://js.tudouui.com/js/fn/saleloader_10.js", { domain: "http://uidev.tudou.com", version: 0 });

配置从url里获取，第二个配置参数是可选的，优先级更高，用于调试（指向开发环境）
域名其实可以省略，js文件的域名通过TUI.domain和autodomain.js脚本来自动配置
版本号很重要，支持a_10.js/a.v10.js/a_v10.js等写法

使用模块

TUI.module.use("/fn/saleloader", function(){
adExtension.load(); //这个是saleloader.js内的方法，必须等js加载完后执行
//这个区域是执行saleloader.js内代码的安全空间
});

类似YUI3的Y().use，省去了版本冲突之类无用的特性
第一次use时会向页面里加载对应的script
函数区域内的代码是异步执行的，会等到saleloader.js加载完后依次执行，如果已经加载过了，直接执行，类似jQuery.ready

总结

以上方法虽然有递进关系，但并不是要表示最后面的才是最好的方法
最好的方法不是唯一的，要根据场合选择最适合的方法，以上方法都有适用场合
本文档涉及到的API：TUI.clone, TUI.newClass, TUI.moduleClass, TUI.module.create, TUI.newModule, TUI.module.join, TUI.module.use, TUI.event

=============开始帖源码的分割线=============

TUI.clone


	/**
	 * @public 继承一个类或复制一个对象
	 * @note
	 * @param {object|function} oldone是需要继承的构造函数或需要复制的对象
	 * @param {object|function} ex为函数时，是子类的构造函数，或者用来加工新对象
	 * 						ex为对象时，为子类的方法, 其中initialize方法为构造函数, mixin为混入的超类
	 * @return {object|function}
	 */
	clone: function(oldone, ex){
		var newobj,
			isClass = !oldone || $.isFunction(oldone), //继承操作
			constructorFn = ex && !$.isFunction(ex) && ex.initialize || ex; //子类构造函数
		if (!isClass) {
			newobj = function(){
				if(constructorFn)
					constructorFn.apply(this, arguments);
			};
			newobj.prototype = oldone;
			return new newobj();
		} else {
			 //为module内部定义的类提供相关方法
			var c = { _sandbox: ex.sandbox, _default: ex.attr };
			newobj = function(){ //构造函数
				if (this.constructor === newobj) { // 如果this指向子类实例，已经执行过以下的初始化代码
					this.objectId = "TUI-object-" + ++obj_uuid; //实例的唯一ID
					var p = c;
					if (p._sandbox && p._default)
						this.attr(p._sandbox, p._default); //初始化私有属性的默认值
				}
				if(constructorFn) //执行构造函数的自定义部分
					constructorFn.apply(this, arguments);
			};
			// 原型继承, 子类构造函数里需要显示调用父类构造函数
			var newproto = oldone ? this.clone(oldone.prototype) : {};
			// 混入其他超类方法
			if (ex.mixin)
				this.mix.apply(this, ([newproto]).concat(ex.mixin));
			// 加入子类方法, 覆盖混入和继承
			this.mix(newproto, ex, {
				constructor: newobj, // 恢复
				superClass: oldone || Object //在子类的构造函数中可以用this.superClass访问父类
			});
			delete newproto.initialize;
			if (c._sandbox) {
				delete newproto.sandbox; //沙盒一定要删除，不能暴露出去
				newproto.attr = function(sandbox, attrname, value){ //通过sandbox参数杜绝来自外部的访问
					return sandbox.attr.call(this, attrname, value);
				};
			}
			newobj.prototype = newproto;
			return newobj;
		}
	}

TUI.moduleClass


/**
 * 存放实例的私有状态
 * @private
 */
var privateAttr = {};
/**
 * module的抽象类
 * @note 可以继承到其他应用上, 构造独有的sandbox
 */
TUI.moduleClass = TUI.newClass({
	initialize: function(){
		this.notify = new TUI.eventClass();
		this._sandbox.notify = this.notify; //被继承的时候，notify可以另外指向到别处
	},
	_sandbox: {
		attr: function(name, value){ //this指向调用它的实例
			if (typeof name === "object") {
				privateAttr[this.objectId] = TUI.clone(name); //初始化私有变量的默认值
				return true;
			}
			var p = privateAttr[this.objectId];
			if (!p) //尽量在module里初始化
				p = privateAttr[this.objectId] = {};
			if (value)
				p[name] = value;
			return p[name];
		}
	},
	/**
	 * 创建一个模块，提供封闭的代码作用域和沙盒
	 * @public
	 * @param {function}
	 * @param {object} args参数
	 */
	create: function(wrap, op){
		var sandbox = TUI.clone(this._sandbox),
			args = op.args || [],
			ns = {};
		args.unshift(sandbox);
		return wrap.apply(ns, args) || ns;
	}
});

$.extend(TUI.module, new TUI.moduleClass());

HTML5, CSS3, ES5…新的web标准和浏览器支持一览

Dexter.Yy — Mon, 29 Jun 2009 00:40:26 +0000

好罢这篇本来是我私下做的笔记，我特别喜欢在Evernote上做备忘的笔记，虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击！比如跟别人讨论The Dark Knight里小丑在医院对检察官说了什么让他变成双面人，我一句对白都想不起来，还有big bang theory s2里penny玩age of conan时的人物名字是”Queen Penelope”，我看的时候印象很深，一个月后就连奥德赛都想不起来了。留份笔记总觉得心里踏实些……啊又跑题了

本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是w3c的草案，离Recommendation级别还早，却已经成为新一轮浏览器大战中备受追捧的明星，开发者社区里也涌现出大量相关的demo和API封装，有些已经进入生产环境（比如google在iphone上实现的gmail离线应用），其实我觉得如今的web领域里，从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了，是因为现在web application的需求太高了么…… UPDATE：刚才在solidot发软文的时候我突然想明白怎么表述这个问题：其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者，就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样，所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准，即时它们还是W3C Working Draft，相比之下IE team就比较缺乏动力，果然计划经济缺乏活力亚XD……

由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。

===================废话结束的分割线=======================

CSS3 Media queries

对整个外链css文件和部分css代码使用的媒体类型侦测，人气高的原因显然是因为移动设备……

<link media=“all and (orientation:portrait)” src="screen.css" type="text/css">

@media all and (min-color: 4) { ... }

w3c标准：http://www.w3.org/TR/css3-mediaqueries/
MDC文档：https://developer.mozilla.org/En/CSS/Media_queries
Opera文档：http://www.opera.com/docs/specs/css/

支持：Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transforms

css变形，有人用这个实现伪3d效果以及旋转效果的jquery插件

-moz-transform: rotate(-45deg) skew(15deg, 15deg);

sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c标准：http://www.w3.org/TR/css3-2d-transforms/
MDC文档：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍: http://webkit.org/blog/130/css-transforms/

支持：Firefox 3.5+, Safari 3.1+
替代/过渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

CSS3 Transitions and CSS Animations

备受期待的css动画，webkit团队提出的草案，transition实现简单的属性渐变，animation定义更复杂的动画效果

transition-property: width;
transition-duration: 1s;
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
@keyframes 'diagonal-slide' {}

w3c标准：http://www.w3.org/TR/css3-transitions/
w3c标准：http://www.w3.org/TR/css3-animations/
webkit博客的介绍：http://webkit.org/blog/138/css-animation/
约翰同学的介绍：http://ejohn.org/blog/css-animations-and-javascript/

支持：Safari 3.1+

CSS3 Downloadable fonts

能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype

@font-face {}

w3c标准：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档：http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档：https://developer.mozilla.org/en/CSS/@font-face

支持：Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+

附赠：其他CSS3 property的兼容性

ppk同学维护的文档: http://www.quirksmode.org/css/contents.html
css3.info维护的文档：http://www.css3.info/modules/selector-compat/
一个测试页面：http://westciv.com/iphonetests/

HTML5 DOM Storage

简洁的持久存储，键值对的形式

window.localStorage
window.sessionStorage //可跨域，标签页关掉就清空

w3c标准：http://www.w3.org/TR/webstorage/
ppk同学维护的兼容性列表：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档：https://developer.mozilla.org/en/DOM/Storage
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

支持：Firefox 3.5+, Safari 4.0+, IE 8.0+

HTML5 Offline Application Cache

用一个manifest文件缓存静态资源（图片,css, js之类）在离线状态下使用，不是结构化数据

<html manifest="foo.manifest">

CACHE MANIFEST
index.html
style/default.css
images/logo.png

w3c标准：http://www.w3.org/TR/offline-webapps/#offline
MDC文档：https://developer.mozilla.org/en/Offline_resources_in_Firefox

支持：Firefox 3.5+

HTML5 Database Storage

本地数据库，支持sql，最早是google gears实现，现在的w3c草案的编辑也是google的工程师……但奇怪的是，gears的api跟现在的草案不兼容，chrome甚至为了保留捆绑的gears的数据库api而删除了webkit实现的html5 api……而google在iphone上实现gmail离线功能的时候又采用webkit的api……真纠结……

var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576);
db.transaction(function(tx) {
tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {});
});

w3c标准：http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介绍：http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
iphone的文档：http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1

支持：Safari 3.1+
替代/过渡：Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

多线程，在后台执行复杂运算，不能操作dom，线程之间通过消息事件通信

var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) { event.data };
myWorker.postMessage(str);

w3c标准：http://www.w3.org/TR/workers/
MDC文档：https://developer.mozilla.org/En/Using_web_workers

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation

地理api

window.navigator.geolocation

w3c标准：http://www.w3.org/TR/geolocation-API/
MDC文档：https://developer.mozilla.org/En/Using_geolocation

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop

原生拖拽事件

ondragstart
ondrag
ondragend
//拖拽过程中
ondragenter
ondragover
ondragleave
ondrop

w3c标准：http://www.w3.org/TR/html5/editing.html#dnd
MDC文档：https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple文档：http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

支持：Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+

HTML5 Audio and Video

用html标签来嵌入视频音频的好处并非是“开源格式”，而是“开放性”，让多媒体可以与其他页面元素交互，或者用页面技术去跟视频“mashup”，这种随意组合和交互的能力是web技术兴盛的基石，也是像flash这类封闭RIA容器最大的缺点。

<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>
<source src=“zombie.mp4″ type=“video/mp4″/>
video>

MDC文档：https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介绍：http://webkit.org/blog/140/html5-media-support/

支持：Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/过渡：用video标签嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/

HTML5 Canvas

apple发明，最早应用于dashboard，目前主流的js图像技术，mozilla已经在实现OpenGL ES标准的Canvas 3D了，另外据说ie team为支持canvas做了大量工作……实际上canvas api相当底层，特别是交互方面，不如svg直观，所以出现了很多封装它的库

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

MDC文档：https://developer.mozilla.org/en/Canvas_tutorial

支持：Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：excanvas.js http://code.google.com/p/explorercanvas/

SVG

w3c标准：http://www.w3.org/TR/SVG12/
IBM DW教程：http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896

支持：Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：raphael.js http://raphaeljs.com/

XMLHttpRequest 2

主要是增加跨域能力以及请求过程中的事件

w3c标准：http://www.w3.org/TR/XMLHttpRequest2/
MDC文档：https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

支持：Firefox 3.5+（实现了部分）, IE 8.0+（实现了部分）

Access Control

千呼万唤的跨域访问控制，目前firefox3.5和ie8有一些不同，ie8搞的XDR和XDM我也不知道是不是准备提交给w3c标准化的东西……

Access-Control-Allow-Origin: http://foo.example

w3c标准：http://www.w3.org/TR/cors/
MDC文档：https://developer.mozilla.org/En/HTTP_Access_Control
Cross-document Messaging (XDM)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

支持：Firefox 3.5+, IE8.0+

E4X (ECMA-357)

Firefox和ActionScript3早就实现了的东西……不过其实现在json这么流行，有没有E4X好像都无所谓了～（瞎说的，其实在js代码里直接写dom对象而不是html字符串，会方便很多）

MDC文档：https://developer.mozilla.org/en/E4X

支持：Firefox 1.5+

ECMAScript 5 Native JSON

原生的JSON支持，速度和安全性都比eval强一百倍亚一百倍，另外要注意Douglas Crockford的json2.js是一个用js实现的js解释器，所以安全性更好

JSON.parse( text, translate )
JSON.stringify( obj, translate )
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
Date.prototype.toJSON

MDC文档：http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN文档：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

支持：Firefox 3.5+, IE8+
替代/过渡：json2.js http://www.json.org/json2.js

ECMAScript 5 Array Extras

js1.6里实现的数组方法，主要是forEach, map, fliter这几个函数式编程里非常重要的方法，还有反向查询

Array.prototype.indexOf( str )
Array.prototype.lastIndexOf( str )
Array.prototype.every( fn )
Array.prototype.some( fn )
Array.prototype.filter( fn )
Array.prototype.forEach( fn )
Array.prototype.map( fn )

MDC文档：https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

支持：Firefox2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：都可以通过扩展Array.prototype来模拟

ECMAScript 5 isArray()

区分数组和对象

Array.isArray([]); // true

支持：无
替代/过渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]“;};

ECMAScript 5 Object

用GOOGLE I/O演讲里的话来说：更鲁棒(robust)的对象系统

Object.getPrototypeOf( obj )

约翰同学的讲解：http://ejohn.org/blog/objectgetprototypeof/

支持：Firefox3.5
替代/过渡：object.__proto__ 或 object.constructor.prototype

Object.create( proto, props ) //克隆或继承对象
Object.keys( obj ) //数据结构的映射
Object.getOwnPropertyNames( obj )
Object.preventExtensions( obj ) //不能添加新属性
Object.isExtensible( obj )
Object.seal( obj ) //不能删除和修改属性的配置，不能添加新属性
Object.isSealed( obj )
Object.freeze( obj ) //不能删除和修改属性的配置，不能添加新属性，不能写属性
Object.isFrozen( obj )

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.create和Object.keys可以自己实现

ECMAScript 5 Property Descriptor

对象属性的访问控制

Object.getOwnPropertyDescriptor( obj, prop )
Object.defineProperty( obj, prop, desc )
Object.defineProperties( obj, props )
desc = {
value: true,
writable: false, //修改
enumerable: true, //for in
configurable: true, //删除和修改属性
get: function(){ return name; },
set: function(value){ name = value; }
}

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.defineProperties其实相当于jQuery.extend，用来实现Mixin

ECMAScript 5 Getters and Setters

python和ruby里都有的属性访问方法

obj = {
get innerHTML() { return …; },
set innerHTML(newHTML) { … }
};

MDC文档：https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：

非标准，Firefox1.5里的旧方法

HTMLElement.prototype.__defineGetter__("innerHTML", function () {});
HTMLElement.prototype.__defineSetter__("innerHTML", function (val) {});

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+

标准

Object.defineProperty(document.body, "innerHTML", { get : function () {} });

MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支持：IE8+ (只能对DOM使用)

ECMAScript 5 Strict Mode

ES5的严格模式，删除了旧版本中容易引起问题的元素，并且会显式的报错，方便调试

"use strict"; //以下情况下抛出异常
//对未定义的变量赋值
//操作被设置为不可写，不可配置或不可扩充的属性
//删除变量，函数，参数
//在对象直接量里重复定义属性
//eval做关键字，在eval的字符串里定义变量
//覆写arguments
//使用arguments.caller和arguments.callee（匿名函数必须具名才能引用自己）
//(function(){ ... }).call( null ); // Exception
//使用with

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

支持：无
替代/过渡：……从现在开始养成严谨的编程习惯

ECMAScript 5 其他新特性

传递函数的引用时，绑定this

Function.prototype.bind(thisArg, arg1, arg2....) /

支持：无
替代/过渡：prototype http://www.prototypejs.org/api/function/bind

ISO-formatted dates

Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ

支持：无
替代/过渡：datejs http://code.google.com/p/datejs/

String.prototype.trim()

支持：Firefox3.5
替代/过渡：各种正则实现 http://blog.stevenlevithan.com/archives/faster-trim-javascript

===================废话又开始的分割线=======================

其实我把这个东西发出来是希望能促进创新的氛围，让更多人认识到很多新技术已经进入到“实用”阶段。

如果只是想做个实验性的webgame，或是只能用于特定平台的应用（比如iphone，greasemonkey），firefox3.5+webkit的支持就已经足够罢。

如果不能无视主流平台，有很多技术能让你gracefully degrade（优雅的退化）或者选取不同的方法实现兼容的接口。

如果你等不及IE x在若干年后实现xx，希望提前享受福利，有些技术的设计原则就是让你能在没有native支持的情况下可以自己实现一模一样的功能或语法糖（syntactic sugar），比如ES5对象的继承和访问控制，从ES4/ActionScript3时期那些老土的关键词（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn)，不会只是为了酷炫罢……

很多人都喜欢抱怨“我这辈子都没机会用HTML5”，但是只要把视线从自己脚下那巴掌大块地移开看看别处，会发现世界其实一直都在改变喔XD

土豆招聘Javascript工程师的JD，终于谷出来一个

Dexter.Yy — Sat, 16 May 2009 08:34:02 +0000

原本是小麦的文案，被我改的啰嗦了，虽然最近在地铁上读了The Elements of Style，但是文字要写的简洁真的需要足够冷酷，我热血而且贪婪，不忍心漏掉一个信息点，所以简洁与我无缘……这篇JD发到其他地方的时候可能会删减很多，我先自己留一份……另外虽然这份JD仅仅提出了对雇员的要求，没有介绍雇主，但如果你仍然有兴趣，可以直接给我发email。

职位：Javascript开发工程师

简单的说，我们需要的是能“正确”使用Javascript的开发者。不同情况下，“正确”的标准也不尽然相同，作为土豆的javascript工程师，我们希望你大致符合如下的描述：

熟悉JS的语法特性和运行机制，比如词法作用域，闭包，原型链，无类型的OO，并乐于在此基础上钻研和探索用JS开发富客户端和复杂web应用的最佳实践和设计模式（这句话用英文写还蛮好，中文怎么拆哑啊啊啊啊～）
jQuery、YUI、MooTools等JS库，对你来说不仅只是开发工具，更是你学习代码风格、接口设计与程序架构的良师益友，你愿意了解他们，不盲目遵从，也不随意使唤。
重视团队协作，愿意探寻和改进目前还不成熟的前端开发流程，了解各种常用工具，如Firebug，YSlow，JSLint，YUI compressor……
在前端领域，你发布过一些有趣的个人项目，或是参与过开源项目，或是致力于构建自己的库和开发框架，或是作为团队核心成员开发过产品级的web应用。
一些基本前端技能如CSS或PS切图就毋需赘述了。

此外，我们乐见一些更优秀的特质：

持续关注业界的新话题和新技术。你喜欢泡在javaeye，reddit之类技术社区灌水和答疑解惑，或者总是最早读到John Resig，Douglas Crackford，Dion Almae，PPK，Dean Edwards等大牛们的新作品和演讲ppt，或者长年维护自己的博客，分享自己的经验和新实践。
你具备其他语言的开发经验，比如java和php，比如Actionscript3/Flex。这给你带来了更深入的程序设计经验和更高更全面的视角。
对于浏览器中的各种可用资源、特性和差异，你都玩弄于鼓掌之间，你有大量优化和重构方面的经验，致力于编写安全，稳定，简洁而强壮，易于扩展的客户端代码。

以上不是必需的，但如果你完全符合，我们可以考虑将土豆网总部迁至你家附近（哈哈）。

最后，如果你目前还不符合以上的描述，但很渴望做到这些，我们也很愿意为你提供面谈的机会。

—————————–最后吐槽的分割线——————————-

我觉得小麦写的最后两句是经典哑，一个字未改～

PS：题图其实是蜘蛛侠里的犀牛人……

twitter like和传统论坛

Dexter.Yy — Sat, 16 May 2009 07:20:11 +0000

以前字符姐姐说我和绯雨叔叔都是彼得潘，另外我还以腹黑正太闻名，但是我也不得不承认，时间既是最难战胜的敌人也是最有价值的财富。如今面临的困扰，就是上网习惯变化很大，虽然firefox的书签工具栏上依然保留了很多论坛的链接（不常上的网站我都放到delicious里），但是别说跟人论战，就连踩遍各大论坛的时间也没有叻。我现在更习惯阅读feed（通过google reader和igoogle，后者类似报纸的体验）以及twitter模式的推送信息（通过桌面客户端和像friendfeed那样实时更新的网页）。

但是支持这种阅读习惯的环境却不是很理想（对国内而言）——SNS/twitter里的信息价值不高，多数都是缺少上下文的唠叨和零碎的感悟，以及只有熟人会感兴趣的琐事和闲扯；个人博客的内容同质化严重，而且热度早已降温，更新频率普遍下降（我除外喔，我更新一直都这么少XD）。大量有价值的信息仍然深藏在论坛和社区网站（其中我最反感的形式是通过积分或虚拟货币的形式设定阅读权限，人为阻止信息传播和再利用），没有进入社会化网络。其实我大学时做的最深的地下城，也出于类似的考虑：很多有价值的信息隐藏在论坛这种“深层网络”（或者叫黯网络罢~）中，只被社区内部的核心成员所熟悉，虽然这样能把讨论维持在较高的质量，也能保证读者跟作者的直接联系，但是如果能借助更开放更易于接触的平台来传播，原本可以影响到更多人。

插图：这张图是我的书签工具栏，除了这个地方，书签的其他位置不放东西，也就是让真正的常用网站都位于随手可点的位置，不常用的网站扔到另一个管理体系里

不过幸好技术的普及速度永远比用户习惯的迁移要快，现在很多论坛都开始提供feed了（感谢Discuz!），借助friendfeed就可以很好的转换成推送信息。

也就是在friendfeed里建一个group，把feed用custom rss/atom或blog的形式导入进去，并且勾选“Include entry description as a comment”，也就是把rss里的描述节点转换成friendfeed里的评论（毕竟仅凭一个标题链接，很难决定是否深入阅读）。然后设置deliver为IM方式，便可以通过gtalk接收信息了，感觉跟IRC或群差不多~

缺点是导入的评论全都会算到自己头上……

另外由于论坛feed通常只包含新主题，如果是像过去的NT那样，大家都愿意在十几页的回帖里长篇大论的拍砖并且跑题现象严重的论坛，就很难track到有价值的内容，不过对于那样的论坛，直接参与才是更好的阅读方式罢

这个是我刚刚弄的一个聚合，收集web前端技术的资讯和资源：

https://friendfeed.com/frontend-feed-cn

这个效果也很不错，track国内的SF/F社区：

https://friendfeed.com/fantasycn

但是接下来的计划就麻烦了…动漫方面，破狗，云中之类的论坛都没feed（用VBB不是错，但是要升级到新版哑！）

还想搞一个pc game的，但是TLF，NGA之类的站帖子太多……指挥官，铁资网之类的论坛也是没feed……让我感觉有折腾这个的工夫，还不如去打demigod……

柠檬基拉老爷提醒说有很多网页转rss的工具，这个我以前确实见过很多但都没怎么体验过，想来也不太靠谱………其实我觉得，一个真正的强者，在这种情况下就应该挺身而出，开发出一个兼具抓取，聚合，呈现，通知等功能的web应用，来满足自己的需求……当然由于我最近很懒，这个idea由我来实现的可能性小于10%罢……

我还是希望有更多社区网站都能以开放的心态，把自己的内容用更友善更易于传播的形式输出，开放永远是互联网的根基，而后web2.0时代的互联网应该是有机的整体，内容在一个站点产出后，可以通过“云”的加工变得更易于查找，更易于阅读，更易于传播，而互联网用户则能接触到更广阔更个性化的信息。

————————–肆无忌惮跑题的分割线————————–

PS：题图是我最近在追的新番《东之伊甸》，要素是：近未来，游戏规则，社会弊端，写实的科技应用（围绕手机），对西方电影的引用，整体风格非常像攻壳SAC，可惜……好像只会有11话，单季都不够哑！神山健治老师请多做一些类攻壳的作品罢！

另外最近还在追《苍天航路》，要素是气势！无论人物，动作，姿态，对话，打斗场面，都燃的像港漫，我觉得多看这个一定能改善我最近多愁善感的非主流形象，成为无所畏惧的强者挖哈哈哈哈哈哈～

每个成功的社区背后都有一个教主——评solidot的浏览器连接数事件

Dexter.Yy — Sun, 08 Feb 2009 09:05:00 +0000

我就一直很羡慕国外技术社区reddit和slashdot的评论，无论数量还是质量，无论趣味性还是信息含量，都让国内的网站相形见绌——先声明一下我绝对没有拿国内评论方面最火的cnbeta来比较喔，它们看上去根本不属于同一个位面……

我也经常看国内的solidot，时间长了都能猜出某篇文章会不会有评论，从google reader里点过去看，命中率相当高，这些文章通常就涉及那么几个话题，比如操作系统，比如国内it企业的丑闻，比如抨击zf针砭时弊，这种现象很好理解喔，毕竟年纪大点的人都更关心跟自己生活关系紧密的东西，而且这些话题的门槛也比较低，对国内网民来说，太geek的东西相当于太阳春白雪，应者寥寥，那是宿命～

但是今天我对solidot的印象大为改观！就在我下午昏昏欲睡不抱期望的点开一个帖子之后，意外的发现了非常娱乐非常有信息量的评论——说的更直接点，是发现了一个有教主潜质的用户：cuthead。这位老爷必将拯救solidot！实际上他如果不在技术圈混，转战天涯S1之类的地方，定能跻身年度强者哑！

你可以按照我的阅读顺序来观摩这个从1月16日发展到前天的，非常戏剧性的事件：

1，solidot《BT大站海盗湾提供下载者地理分布图》, 从lark的评论#32105和cuthead的回复#32111开始
2，moztw论坛《Firefox并发连接数限制是针对网址还是针对服务器IP？》，看到台湾的Dark Shenada的第一个回复和cuthead的反应为止
3，solidot 《Ubuntu下的网速快过XP》，从#31504开始～
4，贴吧《firefox 连接数限制分析》，看完这个再回头来继续看moztw论坛《Firefox并发连接数限制是针对网址还是针对服务器IP？》

好罢其实真正的时间顺序是3,2,1,4……

下面按照时间顺序收集cuthead老爷的语录——不好意思这是教主的传统待遇了，旧习惯改不了……

教主找茬：

我以前的评论有没有犯过这么明显的错误？

教主既淡定又超然：

没意思，我不是给你出脑筋急转弯那个初级阶段了，我是向你赔礼道歉来了！三年了，在这个世界上最对不起的人就是范厨师，多么好的人，我常跟你们说，你说我忽悠他干啥？多么忠厚老实！你打我两下，你下不去手，你骂我两句，你张不开嘴，这样，反正你原谅我也来了，不原谅我也来了，原谅不原谅我都带着诚意铺面而来地！

教主讲解技术：

浏览器连接同一个服务器默认最大连接数不超过10，所以这个限制对网页浏览的影响是0。这也是为什么微软要把TCP并发连接设为10的原因。

教主又超然了：

哈哈，当某些人不喜欢夹着尾巴做人的时候，我也要把尾巴露出来，这是人类的一项本能。

教主愤青了：

你的最后一句话恰恰阐明了我为什么喜欢攻击你们这些语文爱好者。每一个玩文字游戏的人遇到我都应该学会哭泣，我恨所有的现代文学。就像你和那个normalsb,一个喜欢扩写，一个喜欢鸡蛋挑骨头。扩写也就扩写好了，一点新意和技术含量也没有。另一个normalsb更是搞笑，我说浏览器连接同一个服务器默认最大连接数不超过10，他跟我扯子域名和主域名绑定IP可以不同。你们这些牵强的说一些驴唇不对马嘴的废话的scum的存在只能证明一件事情，我的逻辑天衣无缝。另外奉劝你们，这里是solidot，不是电脑城，不要把扯淡的一套拿到这里来和我讨论那些毫无用处的过家家，如果你们真的喜欢废话，这些就是我送你们的压岁钱。

教主急了：

你觉得你水平能赶上我吗？

如果我没错你诬蔑我错的话，我要你的人头落地，你敢跟我打这个赌吗？你还有脸说废话，normalsb也犯了一个明显的错误却不自知。我不知道你们这些扯淡流的话是自己胡编出来还是跟哪个更扯淡的大虾鹦鹉学舌而来，但我的话在网上都可以找到根据。我说浏览器连接同一个服务器默认最大连接数不超过10，我这句话就撂这里了，谁敢用论据反驳？

教主寻求支援：

我多年一直有一個疑問，Firefox並發連接數限制是針對網址還是針對服務器IP？官方網站說的也不清不楚。

教主觉得mozilla忒傻X怎么搞出这样的命名：

並發連接數是否會超過此参数的限制？如果是的話，證明此此参数是用來限制域名的。但這個參數後面跟的是server而不是site

教主急着等米下锅：

这咋还没人回复呢，是不是大家认为我比较菜所以不屑于回答？其实我也是一个Linux资深用户，刚刚用Windows只是临时的。大家看我帖子底下就全明白了

教主看到想象中的大牛赶紧拍马：

高手，感謝Dark Shenada。看您頭像就知道您不簡單，您的大作我一定會仔細閱讀的。我閱讀英語有輕微障礙，經常需要使用翻譯單詞的bookmarklet，所以 lwn.net這個網站我貌似Delicious過，不過確實沒仔細看。其實我是一個Linux菜鳥，經常被Linux某些難題難住。你也知道在大陸人人都很喜歡裝，我把這壞毛病帶到這裡了。 (也有開玩笑的意思)。當時發帖比較著急所以沒注意字裡行間的問題。大陸一個人發帖說Firefox是根據網址來限制連接數。我當時很氣憤這人睜眼說瞎話。

拿到“台湾人”的令牌后，教主回来了：

举不出实例就是举不出实例，我特意发到台湾论坛上去了，台湾人说了我是正确的 [moztw.org]。建议你以后说话最好带上良心。哥们我这次放过你，但不代表我认可你令人恶心的行为。你只是在说一些你自己编造的谎言罢了。

教主要求检方举证：

你如果能提供Firefox是根据域名限制并发连接数的英文参考文章链接我就真服了你

教主突然变成“语文爱好者”：

这不是一个链接吧？

教主欣欣然的在其他地方继续找茬：

摆脱你怎么又写出这么多垃圾信息啊？谁问你了？以后你想写垃圾信息麻烦请在地址栏输入 http://tieba.baidu.com/ [baidu.com]

教主得理不饶人：

另外你那个连接数问题，我特意发到台湾论坛上去了，台湾人说了我是正确的 [moztw.org]。建议你以后说话最好带上良心。哥们我这次放过你，但不代表我认可你令人恶心的行为。你如果不是一个程序员就不要指望我以程序员态度对你。

对于之后moztw论坛上的戏剧性发展，教主暂时还没有表示影响不大……

必须承认我实在是太喜欢教主这种时而超然时而愤世嫉俗从不透露真才实学却又不容质疑非常理直气壮非常troll的语气了！

====================论事不论人的分割线======================

另外从这个话题本身来说，我还发现了一个很有趣的差异性：浏览器的连接数限制这个东西是web前端优化里最重要的知识，但是跟这些C/C++程序员不同，多数“前端工程师”都不会对“浏览器根据域名来限制连接数”有任何疑问，更不会像lark这样去看firefox源码来验证，因为……这，这可是“标准”耶！我们只认W3C和IETF的唷！-___-b

……不过，RFC2612上对“server”的解释，教主老爷真的需要看一下，server并非实体的服务器也并非具体的website，抽象层面没有那么低，其实只是代指一种接受http request返回http response的应用程序而已：

server

An application program that accepts connections in order to service requests by sending back responses. Any given program may be capable of being both a client and a server; our use of these terms refers only to the role being performed by the program for a particular connection, rather than to the program’s capabilities in general. Likewise, any server may act as an origin server, proxy, gateway, or tunnel, switching behavior based on the nature of each request.

写javascript是否要“预留退路”

Dexter.Yy — Tue, 20 Jan 2009 08:31:36 +0000

早上收到一封邮件，问的正好是我一直如哽在喉的事情：

对于web开发中的预留退路问题，我一直犹豫不决。在安全方面，自然是不能完全相信JavaScript，这点是确定的。但在用户体验方面，是否真的需要处处”预留退路”，照顾那些不支持JS或者对JS支持不好的用户吗？而UED工程师们又一直在说，不”预留退路”会惹恼数量不少的用户，但却从没有人提起具体会是多少用户、多少比例。不知道YY大神手里有这方面的数据吗？记得YY您在建立Limbo混沌海的时候，就选择了”不预留退路”的方式，不知当初又是出于什么原因这样考虑的呢？非常想听听您对”预留退路”问题的看法，期待您的回信。

这种设计观念，或者说原则，不管它叫什么名字，比如“预留退路”/“平稳退化”（Graceful Degradation），“渐进增强”（Progressive Enhancement），“不唐突的javascript”（Unobtrusive JavaScript）……从UE的角度来说是非常重要的，它的重要性不仅仅来自“有多少比例的用户不开启javascript支持”，而是因为如今访问web的方式正在变的越来越丰富多样，平板电脑（Tablet PC），上网本（netbook），掌上电脑（UMPC/MID），手机，iphone/ipod touch，这些平台有完全不同的性能，屏幕尺寸，浏览器，和操作方式，它们对javascript的支持也可能不一致（比如我以前抱怨过iphone的差别）。很多“严肃”的网站还需要考虑到“可访问性”（Accessibility），要保证能支持屏幕阅读器之类的设备，让那些有视觉缺陷的用户也可以无障碍的使用。此外还有语义网方面的要求，随着web2.0带来的海量信息，互联网也在向一台超级计算机的方向发展，需要靠网络本身去处理网络上的信息，而不是靠人的肉眼去一张网页一张网页的识别，现在的网页不仅仅是供人阅读，同样也需要面向机器，所以不能因为javascript的使用而影响到内容，让机器无法抓取和识别。

不过，以上这些观念有两方面的局限性：

第一，它们仅仅适用于传统的，“文档”式的网页，互联网的原始形态，只是内容的组织形式和传播手段，对于多数网页来说，内容才是根本，JS只是锦上添花，或者说是调料，最重要的是保证内容的完整语义，可访问性，以及适应过去/现在/未来的多种平台的能力。但是，除了“文档”类型的网页，现在也开始兴起大量的”web应用”，它们是在线的服务，也是在线的软件，对它们来说，浏览器是一个容器，网页是一种界面呈现方式，数据是异步获取的，频繁变化的，而且是细粒度的（比如并非一篇完整的文章，而是一若干来自数据库的字段），虽然同样以内容为中心，但是在这个语境里，“内容”是指纯粹的数据，而并非整块整块的HTML，一旦缺少了界面的交互功能，缺少了JS程序的支持，数据根本就无法呈现，也就根本不具备访问这些应用的条件，对于这种类型的网页来说，“预留退路”并非是不可侵犯的信条。

更多情况下，网页是复合的，会同时包含文档和软件应用的特点，于是就应该有选择的采纳那些适用于自己的原则，比如把JS和CSS与内容有效的分离，兼容多种平台，保证核心内容能被搜索引擎抓取，等等。

有一个很好的例子是土豆网的播放页，这是在土豆网全站当中，最重要同时也是web应用特征所占比例最大的页面之一，javascript和flashplayer对它来说是必不可少的基础运行环境，所以你可以看到它的html设计跟其他页面有很大差别：

script标签出现在html顶部——在其他网页里，我们习惯把css放在顶部，js放在底部，让页面先呈现，之后再附加行为，但是在播放页面里，播放器是最重要的内容，播放器加载的速度是最关键的用户体验。
HTML里会包含JS代码——只有一处，就是TUI.player.load，理由同样是为了保证播放器加载速度这个核心用户体验，不得不祭出document.write这种“非常不提倡”的必杀技来写入flash元素
有大量内容通过AJAX获取——比如评论，还有侧栏里的某些模块。因为它们是分离的数据，并非主要内容
没有使用正常的流式布局——player和toolbar都是脱离文档的独立区域，采用绝对定位
侧栏上的视频截图并没有把原始文件地址放在src属性里——延迟加载，如果不拖动滚动条，很多图片就不会无意义的下载

但是在很多方面同样也要做到Unobtrusive：

对于核心内容，比如视频信息，作者信息，都是遵循文档式网页的设计原则，对搜索引擎友好
在豆单播放页里，播放器下面的界面列表虽然是一个界面元素，但是也应该包含在文档的语义中，所以采用html的UL/LI来实现

第二个局限性是：这些原则早晚会过时。以前WaSP成员们千辛万苦推广这些观念的时候，互联网上到处都是惨不忍睹的网页，建立标准和规范，进行观念的革新，这些需求胜过了对技术的应用，而现在web标准早已普及，web应用需要进一步发展。以前Douglas Crockford，PPK在传道的时候，国外的网站还必须支持ie5.5甚至5.0之类的浏览器，恶劣的环境让web设计者和开发者们必须自我约束JS的使用，避免形成门槛。而现在，ie6在国外的占有率已经开始低于firefox（20%），很多网站已经开始放弃对ie6的支持，google和yahoo也在引导用户替换ie6。刚才我提到过，通过各种移动设备访问web的用户正在迅速增多，而这些设备对JS的支持不一致，但是这就像桌面电脑上的发展过程一样，同样是一个暂时现象，随着webkit变成iphone，android，palm pre这些新平台的统一标准，Mozilla也在积极把XUL技术应用到移动平台，环境的变化其实比桌面电脑要快的多。

我认为Graceful Degradation，Progressive Enhancement，Unobtrusive JavaScript这类东西都不适合过度的鼓吹，它们只是基础概念，是在特定时期特定环境中形成的经验和指导，而不应该是束缚前端开发人员和产品设计人员的教条，实际上，这些保守的观念来自技术的局限，而技术的局限不是我们逃避使用技术的理由，相反，我们可以仍然使用技术来打破这些局限，我们需要的是像ie7.js，excanvas.js，jquery.js这样的解决方案，而不是在开发中畏首畏尾，把每个前端开发者都教唆成原教旨主义者（上次我们公司的小麦对我说：前端开发都有这种倾向……我要说这是历史遗留的伤痕，将在世代中流传下去……）

================吐槽结束的分割线================

最后回复两个邮件里的问题……

关于用户的统计数据，土豆网是有的，可以想象由于多数用户比较大众和小白，IE6的比例相当高，比较冏的是，腾讯TT的比例也很高，等同于Firefox，我必须说它那种跟QQ绑定在一起，经常无意中启动，启动之后就设置为默认浏览器的套路，确实很强大……在普通用户当中，“默认”是强大的力量，默认的通常就是最熟悉的，最熟悉的就是最好的……不过，统计数据有时并不能真正反映出用户数量，比如Opera用户在你的统计数据里只占到0.01%，你就要思考一下究竟是Opera用户确实只有这么多，还是你的网站对Opera支持太差，导致人家都不来……

关于我的blog……其实我很早就计划重做这个blog了，现在的版本是一年半前的，从技术上来说很幼稚，我都懒得优化和修补了……但是，即使重做，我仍然不会把别人的“用户体验”放在第一位，就像侧栏里说明的那样：“优先满足个人喜好”。blog有很多类型，有的是个人媒体，有的是文集，有的是日记，有的是个性化空间，而我想要的blog是“个人信息聚合”，除了满足阅读的需求，必然还要包含大量个性化内容，也就是说，用户首先是我，其次才是读者和我的好友，而对于阅读者来说，浏览方式不止一种，比如我自己就更习惯用google reader来阅读blog，如果用户愿意选择网页形式来访问，就会被强加很多个性化内容，桀桀桀，喜欢的继续看，不喜欢的关掉页面离开，这也算双向选择罢……

iframe和异步的跨域请求，结合土豆网的实例

Dexter.Yy — Tue, 30 Dec 2008 19:00:46 +0000

这篇文章将会探讨一下在网页里做异步的跨域请求，以及借助iframe来获取数据的方法。

呃，本来我觉得这个话题没什么好说的了，因为如今好像没有几个web应用能离开这类request，google和facebook用iframe来做comet的时候也基本上把能hack的都hack遍了，所以我估计开发者社区里应该早就形成所谓的”最佳实践”（best practices）了罢。不过最近看到有一些关注前端技术的blog（比如realazy）在讨论相关的话题，发现还是有一些东西值得写下来。

一、借助script的异步跨域请求

先说跨域的问题，首先要指出的是，iframe里的js宿主对象一样也躲不开同源策略（Same Origin Policy），仅仅能解决二级域名的跨域而已，比如www.tudou.com和so.tudou.com，如果要请求某个八杆子打不到一起去的域名下的数据（例如你想搞mashup），建议老老实实的用script标签去请求JSONP罢。关于JSONP要附带说一下的是，jQuery对JSONP请求的封装方式很值得提倡：

$.getJSON(url, params + "&jsoncallback=?", function(json){
/* do something */
});

用jsoncallback作为服务器端支持的标准jsonp参数，而每次执行这个方法都会用时间戳生成一个唯一的全局函数名，替换这个“?”，这个细节被封装到黑盒里，使用者不必了解，可以像普通的ajax请求一样，用匿名的回调函数作为最末尾的参数（这是jquery强调的风格），这种语法糖（syntactic sugar）的作用绝对不仅仅是让前端开发人员可以偷懒而已，对代码的可读性，兼容性和今后的维护都有好处。（我经常要向服务器端的开发人员解释这个道理，否则他们才不给你支持什么jsoncallback参数呢，直接给你返回一个“yy({……})”就算完工……囧）

二、利用前沿技术的跨域方法

当然了，我们还可以走一些目前来看比较野的路子来实现跨域，比如在页面里嵌入一个不到1K的swf，借助flashplayer向部署了crossdomain.xml的服务器请求数据，再用actionscript里的ExternalInterface类把数据还给javascript（我觉得这种方法忒有调用dll的感觉～大心）。

我们还可以指望ie8里支持的XDomainRequestAllowed，和firefox3.1支持的Access Control，甚至传说中的HTML5 socket……噢喔喔，多么甜美的梦……/掐一把脸蛋

三、用iframe直接发送跨域请求

跟script标签一样，iframe也可以用来替代ajax，而且在修改document.domain之后（比如上面提到的两个域名，可以设置document.domain = “tudou.com”），还可以解决部分跨域问题。

通过iframe请求数据的方法，最直接的莫过于在页面里动态的嵌入一个iframe标签，用它的src属性直接请求包含数据的网页，然后利用那个网页里的js把数据传给父页面，比如：

<iframe id="crossdomain" width="0" height="0" style="visibility:hidden;" src="http://yoursite.com/request_url/" >iframe>

这种方法耦合的太紧，非常不推荐。你请求的URI代表一个资源，应该是单纯的数据，它会作为xml，json，js代码还是html来处理，这个并不重要，不应该把你的程序逻辑跟数据混杂到一起，数据也不应该因为跨域或不跨域，用iframe，script还是ajax来请求就变成完全不同的东西。

有人会说：为了让数据能够被JS处理，返回的内容难免有差异。——但是小的差异可以通过合理的封装隐藏起来，比如JQuery的getJSON方法

有人会说：请求的URI是一个动态页面，同样可以在URI里支持类似jsoncallback的参数，生成一个script标签和其中的JS代码，把数据“包裹”在JS里，比如请求“http://yoursite.com/request_url/?callback=cb1304344”，返回：

<script type="text/javascript">
document.domain="tudou.com";
top.cb1304344({ /* 数据 */ });
script>

——首先，很多情况下你请求到的不会是动态页面，在这个到处都强调高负载的web世界里，你拿到的经常是squid之类的代理程序返回的缓存。其次，如果你请求的是HTML格式的文本，为了能作为JS代码来执行，服务器端必须对这段文本做转义和清理工作，而且安全性还不一定能保证（因为HTML里经常包含很多来自UGC的内容），如果你请求的是JSON格式的数据……那何必用iframe咧……直接嵌script罢……

四、用iframe直接请求数据的最佳实践

我推荐在上述方法的基础上做改良，首先在服务器端，直接返回数据本身，并且把数据“包裹”在一个textarea标签里，比如：

<textarea><div><p>yyyyyp>div>textarea>

textarea的优点是可以支持任何格式的内容，而且这些内容不会在iframe子页面里解析（比如创建DOM树，执行JS），接下来前端要做的，只是在父页面里获取到子页面的DOM，把textarea的内容取出来（注意不能取innerHTML而要取value）。

这里存在一个判断iframe是否加载完成的问题，解决方法之一是在iframe标签上写onload事件，不过这样就需要显式的调用一个函数。

方法二如下：

(function(){
try{
callback(document.getElementById('crossdomain').contentWindow.document.body.getElementsByTagName("TEXTAREA")[0].value);
}catch(e){
setTimeout(arguments.callee,0);
return;
}
})();

最后我们可以封装出这样一个方法：

window.TUI = window.$ = {};
/**
* @public 通过iframe异步请求数据
* @param {string} url是请求的地址
* @param {function} cb是处理返回数据的回调函数
*/
TUI.getIframeData = function(url, cb){
var f = document.getElementById('crossdomain');
if(f)
f.src = url;
else{
var t = document.createElement("DIV");
t.innerHTML = '' + url + '" >';
document.body.appendChild(t.firstChild);
}
(function(){
try{
cb(document.getElementById('crossdomain').contentWindow.document.body.getElementsByTagName("TEXTAREA")[0].value);
}catch(e){
setTimeout(arguments.callee,0);
return;
}
})();
};
//像这样执行
$.getIframeData("http://yoursite.com/request_url/", function(data){
/* do something */
});

只要再增加一个可选的param参数，这就是一个很标准的jQuery AJAX API，我们还可以在jQuery的$.get上面封装，增加一个是否跨域的判断，当这个request的URI修改成同样的域名后，自动切换到普通的AJAX方法来请求，把返回的文本用类似这样的正则/<(textarea)>(.+)<\/(textarea)>/删掉多余的字符，再传给回调函数，前端和服务器端都不用修改代码。

五、用iframe直接请求数据的缺陷

必须指出的是，iframe在ie里获取数据时会引发一些“小问题”，dojo的创始人Alex Russell把它们称作“灵异点击（phantom click）”和“噩梦般的指示器（throbber of doom）”，前者是指在iframe请求内容的时候会出现一次点击链接的音效（让用户怀疑闹鬼，多差的体验口牙！），后者是指iframe加载过程中，ie的界面上会出现正在读取的提示（比如左下的进度条，右上的图标）……好罢，其实以我个人的标准，这两个问题都可以无视……

这种方法还有一个明显的缺陷，就是只支持GET类型的请求。

六、用iframe结合ajax

不过iframe还有一种使用方法，不但可以避免上面提到的问题，也不需要服务器端做任何调整，简单来说：在iframe的src里调用一个包含ajax方法的页面，然后父页面调用这个方法来发起跟子页面同域名下的ajax请求。在土豆网的播放页面上，我使用这种方法请求用户评论统一接口里的HTML内容，例如这个WH40K:DOWII的视频：

http://www.tudou.com/programs/view/iPcprDz_LhI/

获得评论部分HTML的接口类似这样:

http://comments.tudou.com/itemcomment.srv?method=get&iid=21283123&page=1&tm=5&ban=1

这个接口在独立的一组服务器上实现，在视频播放页，豆单播放页，豆单封面，相册，个人主页都会被调用。由于包含大量用户提交的内容和复杂的HTML结构，如果用JSON形式，前端后端处理起来都效率低，此外，提交新评论，回复，删除，也会用到comments.tudou.com这个域名下的接口，而这些操作显然需要POST类型的请求。在这种需求下，借助iframe的AJAX方法

首先在comments.tudou.com域名下部署一个供iframe调用的跨域文件，感觉很像flashplayer的crossdomain.xml……

http://comments.tudou.com/crossdomain/index.html

可以看到源文件里仅仅包含一个stand-alone的ajax方法……呃……你觉得很眼熟？不用怀疑，就是在jQuery源代码的基础上修改来的-___-b，支持最基本的需求。这个页面可以设置很长的过期头让浏览器缓存起来，因为不会再有变动。

在父页面里通过TUI.videoComment.request提供统一的接口，不做详述了，只列举其中访问跨域方法的部分：

(function(){
try{
$('#crossdomain')[0].contentWindow.TUI.ajax(o);
}catch(e){
setTimeout(arguments.callee,500);
return;
}
})();

七、总结一下

iframe适用于 ( 跨域的 && ( 返回大量数据 || 返回HTML内容 || 需要发POST请求 ) ) 的场合，除此之外还有comet里的串流技术（streaming）——本文不涉及。使用时需要注意保持资源的纯粹性，并尽可能隐藏那些跟其他异步请求差异很大的或包含hack的细节（比如嵌入iframe，触发回调函数，处理数据），设计出一致的，兼容性和扩展性良好的，不碍眼的接口XD

关于跨域还要补充一点：修改document.domain可能会产生一些无法预料的问题，比如在firefox里，document.styleSheets的cssRules属性会被拒绝访问。

新项目”YyOPML”——把OPML转换成web界面——大家一起来晒feed订阅列表吧！

Dexter.Yy — Fri, 30 May 2008 17:28:30 +0000

首先要说一下目前的矛盾现状：一方面feed订阅和在线阅读器都还不够普及，多数普通网民就算经常访问blog网站，也还没养成订阅的习惯，主要还是通过门户媒体获取资讯，另一个方面，较早开始接触RSS订阅的人——特别是那些blogger和互联网geek们——不但已经对各种在线或离线的阅读器了如指掌，把阅读feed变成了上网的主要活动和习惯，而且很多人收集的feed已经多到让自己烦恼焦虑的程度。后者努力的整理删减自己的订阅列表，前者却经常抱怨不知道怎么寻找可订阅的信息来源…………这种不平衡于是引发了一种禁断的活动——朋友之间交换OPML订阅列表……

OPML是Google Reader乃至所有阅读器都支持导入导出的一种XML规范的“大纲(outline)”数据文件（题头图片里那个蓝色的方块就是OPML的标志，跟feed的著名橙色标志对应，说实话写文前我还不知道OPML也有标志……囧），通常包含用户订阅的所有feed，之所以说是“禁断”……是因为交换这种文件，直接导入到双方的阅读器里之后，很容易使信息爆炸的程度翻倍，而且对于这些导入的feed，不能像原主人那样清楚来历和订阅的理由，于是也不知道该如何看……因此直接交换的下场通常都很惨……

这个项目就是我的解决方案：让导出的OPML源文件支持直接在浏览器里作为网页来展示，而界面上使用完全展开的并排布局，可以像hao123或谷歌网站导航那样一目了然的查找网址，让访问者自己来挑选值得订阅的feed。(不过，你要有使用标签分类feed的习惯，否则显示效果肯定不好…不过那样的话，就算用常规的树状布局，效果也很差的…)

以下是示例页面，这里的“dexteryy.xml”就是我从自己的google reader里导出的OPML文件，包含完整的订阅列表：

http://www.limboy.com/yyopml/dexteryy.xml

还有谁像我一样没什么隐私担心暴露愿意分享OPML的话，可以留下网址或opml文件，我会收集到上面来……

项目主页：http://code.google.com/p/yyopml/

下载程序源码：http://code.google.com/p/yyopml/downloads/list

使用方法是：用文本编辑器打开OPML文件，在第一行后面加上以下内容：

xml-stylesheet href="style/yyopml.xsl" type="text/xsl"?>

然后跟解压出来的style目录一起传到服务器上，保持在同一个目录里，就可以直接用浏览器看opml文件了。

目前我提供的界面主题有两种，都是如上所说的“网站导航”风格，一个是灰色的面板风格（默认），一个是GOOGLE风格，对应的CSS文件分别是style/ui/yyopml_panel.css和style/ui/yyopml_google.css

支持在页面里切换皮肤，如果要更换默认皮肤，请修改style/ui/yyopml.js里的以下代码：

theme = theme || "panel";

把“panel”换成你要改成默认设置的css文件的后缀，比如”google”。

也可以在网址里加上参数，直接调用某种皮肤，比如”http://www.limboy.com/yyopml/dexteryy.xml#theme=google“，可以用google风格作为默认皮肤打开页面。

==================面向Coder的分界线====================

源码包括一个用来把XML转换成HTML来显示的XSL文件，和界面效果相关的文件。其中yy_core.js是我开发中的一个轻量级/FP风格的javascript库，很多代码都基于jquery，同名的方法接口也尽量跟jquery保持一致，命名空间跟土豆网的js库一样叫“TUI”，提供DOM选择器（我重写的精简功能）和一些常用工具，比jquery小很多(压缩后12k)，这个东西其实年初就想发出来……但是后来懒了，这次考虑到完成度的问题，也懒得在google code里开项目了，源码包里的yy_core.js是一个base64压缩过的版本……

另外，yyopml.js里有一个滚动条插件，是做这个项目的时候心血来潮写的，可以用类似这样的代码：$(“.list”).scrollbar(); 给那些外部容器overflow:hidden，内部容器高度超长的元素加上CSS定义的滚动条，支持鼠标滚轮，因为是基于“迷你jquery”来开发，所以应该很容易改成jquery的插件，厌倦了overflow:scroll滚动条的同学可以参考一下。

游戏类暨非IT类blog读者订阅对比报告

Dexter.Yy — Sat, 24 May 2008 10:14:11 +0000

1，我是标题党。

2，数据取自当日，Google Reader的show details功能。

3，选择标准一是要比较有代表性的，二是要跟it不沾边（游戏开发除外），在我熟悉的游戏领域里细分的更多，可以窥斑见豹，而且没有仅限于blog，只要是提供feed的网站就行。

4，feed订阅量是评价一个BLOG的指标，但一般订阅总数其实包含了大量重复的用户，比如有人同时在抓虾，鲜果，google reader，bloglines，豆瓣订阅了同一个blog，甚至是用浏览器自带的书签功能。如果要作横向比较，这个数字就并非很靠谱了，因为建立时间越早，用户越熟悉IT的BLOG，重复订阅的水分会越大。所以我在这里统一比较google reader的订阅量，作为目前几乎稳居霸主地位的feed阅读工具，而且杜绝了重复订阅，google reader的统计数字更有意义。

5，只是列举和对比，请用自己的智商分析

======================
名称：NTRPG
地址：http://www.ntrpg.org/
类型：群体blog，社区，portal
主题：PC游戏，桌面游戏，TRPG，hardcore玩家
======================
Posts per week: 0.0
Subscribers: 297

======================
名称：RPGdot
地址：http://www.rpgdot.com/
类型：资讯站（国外）
主题：PC游戏，RPG
======================
Posts per week: 43.4
Subscribers: 142

======================
名称：EN World
地址：http://www.enworld.org/
类型：社区（国外）
主题：TRPG
======================
Posts per week: 11.9
Subscribers: 397

======================
名称：GamingReport
地址：http://www.gamingreport.com
类型：新闻投递（国外）
主题：桌面游戏
======================
Posts per week: 25.2
Subscribers: 342

======================
名称：Joystiq
地址：http://www.joystiq.com/
类型：商业性blog（国外）
主题：主流video game
======================
Posts per week: 146.3
Subscribers: 23,757

======================
名称：1up
地址：http://www.1up.com/
类型：资讯站，portal（国外）
主题：主流video game
======================
Posts per week: 105.0
Subscribers: 3,895

======================
名称：Gamasutra News
地址：http://www.gamasutra.com/php-bin/news_index.php
类型：资讯站，社区，Portal（国外）
主题：游戏开发
======================
Posts per week: 85.4
Subscribers: 2,414

======================
名称：乌龙的BLOG（TGFC站长）
地址：http://blog.sina.com.cn/wulongx
类型：个人blog
主题：Console game
======================
Posts per week: 19.6
Subscribers: 78

======================
名称：风云的BLOG（网易的明星游戏程序员）
地址：http://blog.codingnow.com/
类型：个人blog
主题：游戏开发
======================
Posts per week: 1.2
Subscribers: 1,385

======================
名称：World of Ming（明星玩家）
地址：http://cn.worldofming.com/
类型：个人blog
主题：竞技游戏，WOW
======================
Posts per week: 4.7
Subscribers: 93

======================
名称：龙骑士城堡
地址：http://www.cndkc.net/
类型：新闻/推介，社区
主题：奇幻文学
======================
Posts per week: 3.3
Subscribers: 87

======================
名称：朱學恆的路西法地獄
地址：http://blogs.myoops.org/lucifer.php
类型：个人blog
主题：网络名人，宅文化
======================
Posts per week: 5.4
Subscribers: 827

======================
名称：漫谈 – 我们的ACG
地址：http://www.acgtalk.com/
类型：群体blog
主题：动漫
======================
Posts per week: 5.4
Subscribers: 513

======================
名称：Blog@Newsarama
地址：http://blog.newsarama.com/
类型：群体blog，社区（国外）
主题：欧美动漫
======================
osts per week: 80.0
Subscribers: 190

======================
名称：格致
地址：http://gezhi.org/
类型：群体blog
主题：科学，科研工作者
======================
Posts per week: 4.2
Subscribers: 122

======================
名称：Psytopic心理杂志
地址：http://www.psytopic.com/mag/
类型：群体blog
主题：心理学
======================
Posts per week: 0.0
Subscribers: 370

======================
名称：影像日报
地址：http://mymovie.blogbus.com/
类型：群体blog
主题：好莱坞电影
======================
Posts per week: 21.0
Subscribers: 1,193

======================
名称：美剧迷
地址：http://www.meijumi.com/
类型：blog，社区
主题：美剧
======================
Posts per week: 30.6
Subscribers: 5,112

拿一个起步比较晚的it类群体blog来对比：

======================
名称：apple4us
地址：http://apple4.us/
类型：群体blog
主题：苹果粉丝
======================
Posts per week: 0.0
Subscribers: 880

土豆网三周年PARTY

Dexter.Yy — Fri, 18 Apr 2008 17:19:05 +0000

PARTY刚刚结束，其实我到现在还没想明白为什么在我关于动画和游戏的记忆里，PARTY都是那么有趣，而现实中的PARTY只给我留下看见一堆站着的人以及自己手足无措的记忆，不明白到底有哪些不同……

好罢，PARTY本身虽然满足不了我的YY，但今天晚上还是很有趣的，本来在这种时候，最适合我的行为是留在二楼开发部里上网，该干什么干什么（这是理性的那部分人格反复告诫我的），但是我还有一部分加盟了感觉会(Society of Sensation)的人格不停的催促我去PARTY现场看看……这种implicate conflict（隐缠冲突，自创词）时常碰到，今天我碰巧找到了平衡两种人格，既能体验PARTY又不至于无事可做让自己很尴尬的方法：帮前台的XIXI姐姐搬运食物（顺便吃）+看守通道（顺便涂鸦）…

涂鸦是土豆办公室的最大特色之一，以下是我去年4月来面试时拍的照片，据说都是从以前的四行仓库搬到现在的仓库时涂的，我来晚了，没机会留下墨宝……但是由于如今土豆规模今非昔比，以前闲置的一楼也被塞满了人，白墙都需要“装修”，所以今天的PARTY搞了新的涂鸦…

我刚才下楼看过，有些画的还是很不错的，比如异型和OOXX的男女，但是重叠的太多，缺乏美学智慧……作为一个极端重视信息可见度和呈现方式的人，我是绝不能容忍这种事情的，所以我的涂鸦都在二楼主过道里…挖哈哈哈………有图有真相：

P.S. 土红色的颜料

图一，有爱

图二，图像和文字无关联

图三，javascript, lambda, closure和currying

图四，全

以下是其他图，请原谅N73的效果，我一直认为“摄影”是伪小资和真小资们为填补精神的空虚和寻求群体认同感而最喜欢选择的兴趣爱好之一（另一个是“旅游”），所以DC是邪恶的，单反是邪恶的，宜敬而远之。内置打印机的polaroid还可以考虑…

邀请函

战前

入口

现场配对，由前微软研究院的老爷开发的算法提供支持

二楼天台，有蛋糕，所以人多

三楼天台，有肉，所以人最多

后来把人赶下来，gary开讲

然后有专业舞者和饶舌者上台，台下很挤很暴力，蛋糕进不了场

再后来没拍了，完，谢谢。

iPhone App开发笔记

Dexter.Yy — Fri, 07 Mar 2008 19:04:13 +0000

第一，标题里的app指的是根正苗红老实本分的Web App，昨天的这个时候，对是在昨天，iPhone Web App就等同于iPhone App，咳咳，虽然现在不是了，但我这笔记是两个星期前的……

第二，不全，主要是我关心的一些细节，以及我自己理解的一些东西……

————————————懒得想小标题的分界线————————————

html里可以调用系统接口，比如电话拨号：

<a href="tel:1-408-555-5555">1-408-555-5555a>

还有mail和google map的接口……

————————————懒得想小标题的分界线————————————

在js里嗅探iphone的safari环境，要注意agent字符串里有额外两处：

“Mobile/1A543″，这个是iphone OS的操作系统版本（注意不是固件版本）
“iPhone”，这个是移动平台的类型，如果是ipod touch的话这里会是“ipod”

此外：

“version/3.0″，Safari的市场版本号
“Safari/419.3″，这个是build版本，虽然iphone跟osx一样都是safari3.0，但build版本号不同

完整的例子：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like
Gecko) Version/3.0 Mobile/1A543 Safari/419.3

————————————懒得想小标题的分界线————————————

调用css的时候，media类型支持CSS3，比如可以用“only”来屏蔽旧浏览器，用“(min-device-width: 481px)”屏蔽小屏幕手机。由于iphone里的safari不支持print和handheld的media类型，可以用它们来对iphone屏蔽一些css文件。
示例：

<link media="only screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" >

也可以作为css选择器里，比如

@media screen {
#text { color: white; background-color: black; }
}

由于safari支持css3，你还可以享受到的福利包括在background里放6张图片做圆角，给文本加阴影，使用属性选择器之类……

————————————懒得想小标题的分界线————————————

iphone的浏览器里有一个很重要的概念是viewport（视区），系统默认的viewport为980像素，可以用meta标签指定，宽度范围从200到10,000，高度范围从223到10,000，还可以使用user-scalable禁止用户缩放页面（常见的iphone web应用，比如facebook,google reader，因为要仿原生界面，都是这样设置的），minimum-scale和maximum-scale可以设置缩放的限制，initial-scale是默认的缩放程度，范围从>0到10
示例：

<meta name="viewport" content="width = 320" />
<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />

iphone默认的浏览器窗口尺寸是: 竖向（body[orient="profile"]）为宽320px，高356px，横向（body[orient="landscape"]）为宽208px，高480px，但实际上这是显示了浏览器地址栏之后剩余的空间，往下拖动页面时，地址栏会隐藏，所以实际的viewport（竖向）是宽320px，高416px。
页面加载之后可以用 window.scrollTo(0, 1) 隐藏地址栏，自动使用最大化的viewport。

关于viewport，还有一个很重要的概念是：iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。所以不但iframe, overflow:scroll的元素没有滚动条，整个窗口也没有的，iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport…………由此引申出的结果很多，比如CSS里的 position:fixed 无效……

————————————懒得想小标题的分界线————————————

浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样：

所有hover动作，还有mouseover，都不存在，链接上的title内容，会在你点击链接并按住不动时弹跳出来（如果你不放开手指，继续移动的话，点击事件不会发生，具体原因下面解释）…………而mouseover，直接转换成了mousedown……

点击页面元素之后发生的事情很复杂…………比如当你用单指按住可点击元素（大约就是默认为block的元素），然后放开，首先触发的event居然是mousemove！接下来如果元素内容不变（这个条件比较难理解，我知道），会陆续触发mousedown，mouseup，click，如果内容改变，就不会再触发任何事件……

如果你恰好不太走运的给网页上一些inline元素绑过js事件（这比较常见，我也知道），比如span，有一个不用修改标签的方法是给它们都加上onclick=”void(0)”，这样iphone就会认为它们是可点击的元素-_____-b

如果按住元素之后移动手指，当然就不要指望会触发mousemove了，啥事情都没有，不过停下的时候，会触发onscroll （因为你刚才移动了viewport嘛……）

如果你用两个手指做缩放的动作，啥事件都不会有啦，但是如果你用两个手指在屏幕上一起移动，而且所在的位置是一个本来有滚动条的页面元素(比如iframe罢)，会触发一个叫mousewheel的事件（但是别指望iframe本身的内容会滚动-___-b）, 停止移动时同样触发onscroll。

OK，你希望像平时那样用onmousedown,onmouseup,onmousemove来做页面元素的拖拽交互把iphone web app的界面做的像原生界面一样活蹦乱跳的梦想已经破灭了，请努力克制骂乔布斯的欲望。

对了，不用我说也应该想得到，onkeyup，e.charCode，e.keyCode这类玩意都不能用罢？

————————————懒得想小标题的分界线————————————

默认的html控件的样式大家都已经知道很cool了，不过也可以自己修改，具体内容请查看《iphone用户界面指南》的第三章：Metrics, Layout Guidelines, and Tips

iphone里的safari调整了默认的文字样式，这些调整被包括在了一个新的css属性“-webkit-text-size-adjust”里面，相当于“-webkit-text-size-adjust:auto;”，你可以覆盖它，根据需要改成none或者200%

————————————懒得想小标题的分界线————————————

web app可以像原生应用一样，在home界面里上添加一个快捷方式图标，方法是增加一个link标签：

<link rel="apple-touch-icon" href="custom_icon.png" />

这是针对单个页面的，如果你把图片命名为“apple-touch-icon.png”，放在网站的某个目录里面，该目录下所有页面都会获得添加图标的功能……

图标的要求是尺寸57×57，png格式，不用画蛇添足的去做圆角渐变或玻璃反光效果，iphone系统会把图片自动裁剪和渲染成统一的风格……

喔对了……不要高兴太早……这个快捷图标的功能，只有1.1.3或更高的固件版本才支持……考虑到国内那些买旧版本破解机器还被商家反复叮嘱不要升级的用户……呃……

————————————懒得想小标题的分界线————————————

关于网页中的媒体文件，普通图片最大支持200万像素（jpg的话，最大可以显示出3200万的，不过超过200万的jpg都会被压成缩略图），支持的最大尺寸是2 * 1024×1024，gif动画最大支持2m（否则只显示第1帧）

iphone支持的视频格式：

H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
MPEG-4 Part 2 video (Simple Profile)
AAC-LC audio, up to 48 kHz
.mov, .mp4, .m4v, .3gp file formats

需要注意的是这里的“Baseline profile”，由于这种编码的质量跟“Extended Profile”和“main profile”相比效果比较差，目前主流的支持“高清”（h264）的视频网站，比如youtube，土豆，都没有采用Baseline profile压缩h264视频，所以iphone不但不能播放网络上流行的flv视频（因为不支持flash），连刚开始流行的h264也不能直接播放…………提供iphone应用的视频网站无法使用现有资源，不得不压缩iphone专用的视频文件，所以不要指望能立即在iphone上观看视频网站上的所有资源……T__T

由于iphone不支持flash播放器，视频文件只能直接嵌在页面里，用自带的quicktime来全屏播放，示例：

<embed src="screen.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1" ...>

更多细节请看官方文档：Including QuickTime In A Web Page

————————————懒得想小标题的分界线————————————

如果想全面了解iphone上的web开发，推荐阅读：

iPhone Human Interface Guidelines(官方还有一份名字类似的文档，简称OSXHIG，是界面设计者的圣经之一)

Safari Web Content Guide for iPhone

Web Page Development: Best Practices(这篇可以凑合看看，2月8号刚更新过的)

此外，ADC on iTunes里有好多iphone相关的视频，讨厌翻文档的可以去弄来看看，这可是iTunes store里少有的免费资源喔……

————————————懒得想小标题的分界线————————————

就像开头说的，这是2周前写的，一直懒得修改整齐了往blog上帖，但是昨天半夜（好罢是今天凌晨）在twitter上不小心看了iphone SDK发布的实况转播……我发现再拖延的话就只能贴到火星去了……

跟华丽的SDK相比，iphone safari上的开发环境可以说很糟糕，非常限制想象力——对javascript和RIA开发者来说，不过只要看看iphone用户上网的热情和相关数据，可以预见在很长一段时间里，iphone平台仍然会是立志开发web app的勇者们争夺的滩头阵地。

啊啊啊啊啊，2.10G的iphone_sdk.dmg终于下载完了，睡觉去……下周买《Cocoa入门–使用Objective-C》……

订阅地址转移到feedsky(12月27日地址再次修改)

Dexter.Yy — Thu, 27 Dec 2007 05:23:33 +0000

以前用feedburner生成的feed我不会删除，如果你用google reader来订阅这个blog，其实可以什么都不用做，仍然会正常更新，不过还是建议你换成下面这个永久订阅地址：

http://feed.limboy.com

12月27日更新：地址修改了！不再是rss.limboy.com，还是feed.limboy.com，旧地址无效），因为feedsky域名映射的问题，订阅有一个月无法使用，如果不是因为生活在大中华局域网，不知道有谁能忍受这种服务……

当然，这也意味着我的blog已经恢复更新……关于离开了blog的这4个月，用一句话总结：没有blog的日子，并不会更轻松。

有一次跟老爸视频聊天的时候，他说了一句更让我触动的话：“人没那么容易累死的”。

喔对了，现在我的blog提供全文输出了……

顺便再推荐另一个feed, 虽然最近更新速度又慢了，不过仍然是国内最顶尖的游戏主题blogmedia喔！

而且ntrpg论坛跟国内大部分论坛有一个显著的不同是：回帖跟主帖有同等的价值，包含非常大的信息量，特别是跑题的帖子，而nt几乎没有不跑题的帖子……看看现在首页blog里的评论数量，或许能继承这个传统……

twitter,UNIX程序和互联网应用……

Dexter.Yy — Sun, 25 Nov 2007 13:30:25 +0000

我对twitter本身没什么兴趣，虽然它在IT圈子里是无人不知无人不用的东西，但我注册后一直没用过，不过我今天突然想在blog里加入一种更快捷更像说话或msn签名的更新方式，想表达观点或感想时可以直接说一句话，自动显示在首页上，而不用为此专门发一篇文章。twitter正好能完美的实现以上功能，还提供了很方便的gtalk机器人，所以我没有选择重新写代码，而是直接把twitter整合到blog里……

unix系统有一个理念是：“do one thing and do it well”，就是指每个程序/软件只负责做一件简单的事，但要把这件事做到最好。当其他人或程序也需要做这件事情的时候，都可以直接使用现成的应用，而不需要重复开发相同的功能（windows则不同，很多软件都尽可能做的大而全，程序之间没有合作，功能重复，随着版本更新越来越臃肿，包括微软自己的产品）。我觉得这种理念也很适合互联网，如果把互联网看作一个巨大的操作系统平台，实际上在很多领域都有那么一些出类拔萃的应用，第一名第二名统治了大部分市场（很多新应用根本就没有竞争者），如果它们能专心的完善本身的功能（像google那样），做到无法复制，无法取代，同时加强开放性，提供友好完善的接口，支持各种形式的mashup，就可以成为系统中必不可少的组成部分，每当用户或开发者有一种需求时，都会自然的去使用现有的那个web产品，而不是重复劳动，或是在上百种选择之间不知所措，用户可以消除顾虑，放心的贡献内容，积累使用经验，开发者也可以省去重新发明轮子的麻烦，集中精力去创新，解决问题或满足新的需求……

当然这只是我期望的理想状态，现实中很多网站，特别是国内网站，都喜欢向大而全的方向发展，不管是新闻，聊天，相册，视频，blog还是论坛，别人有的我也要有（在国内还产生了这样一种现象：都喜欢做社区，因为社区是包罗万象的，最容易扩张的），好像只有这样才能获得大量用户，才能靠规模效应赚钱。但是我觉得，假如每个网站都做成门户，又有几个能获得大量用户呢，相反如果专心的在一个很简单的领域做到最好，像feedburner, paypal, amazon那样成为市场垄断者，却可以获得市场中大部分的用户，甚至还可以成为其他网站的底层基础……

以上划分出了两种选择，一种选择是成为门户和社区，特点是大而全，一种选择是成为专业的工具，平台，或服务提供者，特点是“do one thing and do it well”。前者确实能做的非常成功，但是互联网好像只能容下少数几家这样的成功者。我觉得，那些掌握技术的人和掌握资源的人都应该把精力更多的放在后者上面……

有人会说，做单一的服务容易被人模仿被人复制，在激烈竞争中如果不扩张就没有出路，其实这方面最典型的例子莫过于国内的“三百家视频网站”，看上去很恐怖，其实能打的也只有土豆，油库和五六几家，做的早和做的好的仍然会是赢家。自己的事情都还没做好，就开始想扩张想“做社区”，有非常好的案例：抓虾和鲜果。

btw，这是我的facebook主页地址：

http://www.facebook.com/profile.php?id=701759082

我的twitter主页地址：

http://twitter.com/dexteryy

宅男行为统计工具

Dexter.Yy — Sat, 17 Nov 2007 07:34:40 +0000

昨天在机器上挂了一晚上RescueTime（具体的功能，请看E-space里的介绍），感觉还不错，有相同版本的windows和mac的客户端，运行时占资源很少，统计的项目不仅是软件，还包括在不同网站上花费的时间。web2.0网站都喜欢做用户行为收集/分析，数据挖掘，我觉得对个人而言也应该做一些类似的统计分析，并不是为了做时间管理（你看，我也不喜欢把自己榨干），仅仅是为了了解自己。套用Dakkon的话来说，”In knowing your time, you know yourself, and you know, now, there is very little you cannot do”。

我昨天晚上的统计图：

嗯嗯……看了4集kaiji…………

这种软件，尤其是在线服务，面临的最大问题就是隐私保护，你既然能收集用户使用软件和访问网页的信息，用户自然会怀疑你还能收集他的表单信息，帐号密码，聊天记录………………
rescuetime也做了详细的隐私政策说明：http://www.rescuetime.com/privacy/，不过我看还不够醒目，应该把链接做成大图标放到页面顶端去……

rescuetime存放log文件的目录：

Windows XP (and I’m pretty sure 2000, 2003, etc will also be in the same location – just not tested):
C:\Documents and Settings\\Local Settings\Application Data\RescueTime.com\logs\pending

Windows Vista:
C:\Users\\AppData\Local\RescueTime.com\logs\pending

OS X:
Macintosh HD//Library/RescueTime/Logs/Pending

这个客户端默认每隔2秒会获取你当前操作窗口的信息，记录到Pending目录的log文件里，每隔30分钟把log转移到sending目录，向服务器提交，我看了pending里的log文件，是yml格式(用过rails的人应该都对这个不陌生)，比如其中一个节点是这样的：

- os_username: Dexter-Grimoire\dexteryy
app_name: Firefox
window_title: ‘Mozilla Firefox’
extended_info: ‘http://www.google.com’
start_time: 2007-11-17 14:52:19
end_time: 2007-11-17 14:52:21

可以看到，记录的信息只包括：计算机名和用户名，软件名称，窗口标题栏名称，标签栏名称（好像只有浏览器有这个属性），开始结束时间……

透明，开源，这是消除用户顾虑的最好方式，rescuetime应该向last.fm的客户端学习一下（同样是收集信息）

ps: 又发现一个BUG, osx的某些程序窗口（比如磁盘工具和预览），rescuetime似乎识别不了，会弹出一个对话框，但如果设置了隐藏dock图标，就看不到对话框，程序实际上处于锁死状态，不再记录信息了…………唉，果然是beta版…………

为什么信仰apple

Dexter.Yy — Sat, 17 Nov 2007 05:58:09 +0000

土豆的老大gary这段时间在硅谷，好像是去参加NewTeeVee大会（陈士俊在演讲中宣布youtube将推出高清视频），前天还去了苹果总部，有跟steve jobs见面，内部邮件里传出的八卦新闻非常劲爆，说是jobs当时表示“中国人stupid”，而老大又似乎是很血性的文青，于是当即拍桌子大怒，吵了一架，出门时连纪念品都没买………不过昨天老大的blog更新………似乎p事都没有……也没说要砸自己的macbook pro（/失望），同去的marc也有更新blog，描述的状况更是大相径庭，还说“but he said that he loves China”……啊啊啊，都是幻觉！吓不倒我的！……

不过假如jobs真的说了“中国人stupid”，又会怎样？这次帝都的网志年会上，据说macbook普及率都很高了(我在facebook上还发现，keso和tinyfool也买了macbook pro)。大家为什么要砸钞票买苹果，肯定不是因为jobs是中国人民的老朋友……我不是很清楚别人的想法，不过我买苹果产品，其实就跟用ubuntu的原因一样：它能让我感受到科技的未来和人类的梦想。

正好在论坛写过一个相关的回帖，这种观点以后也许还要复述，为了避免每次都浪费时间重新组织观点构造上下文，还是copy到blog上来罢：

sunnix ：

我认识到苹果的SB就是从第一代shuffle开始的……而我认识到苹果粉丝的SB则是从对岸的 frostyplace这个网站，苹果粉丝就是两个凡是的坚定拥护者——凡是苹果出的，都是伟大的，创新的，艺术的，合理的，友好的，直觉式的，精美的，典范的，blahblahblah;凡是非苹果的就是愚蠢的，笨重的，保守的，不方便的，丑陋的，吃不到葡萄说葡萄酸的，抄袭的，眼红的， blahblahblah。

Dexter.Yy :

这“两个凡是”我很理解，你看，虽然mac是建立在大量开源软件和技术的基础之上，但它跟Linux是两个相反的极端：

Linux会给你提供无数的选择，强烈的参与感，让你和整个开源社区一起共同打造心目中的“未来操作系统”。同样的功能都有几个不同风格的项目供你选择，即使在一个软件里，比如Compiz Fusion，也会给你一大堆选项，让你定制出osx的效果，vista的效果，或是osx和vista都没有的效果。用图形界面改不出来，可以改文本形式的配置文件，配置文件里也没有，可以写脚本，脚本也实现不了，可以改源代码重新编译。还有无数的文档来支持你做这些事情………………firefox也很类似，我可以在一个光秃秃的浏览器上安装各种扩展，定制出一个符合自己需求的网络平台……

而mac只给你一个选择（不是指软件），它明白无误的让你感觉到：这就是“未来的操作系统”。虽然它提供了完善的unix命令行工具（osx10.5是标准的UNIX系统, Linux都只能算unix like）和开发工具（这些工具的强大我难以形容，只能截图），自带了ruby，python，php这样的开源语言，只要你有深入的了解，一样可以控制系统的大部分，但归根结底，它为了给大众用户最方便最简洁的体验，实际上是封装了刚才说的那些东西，把强大的技术隐藏在华丽的图形界面之后。“设计”和 “整合”，这就是apple最擅长的事情。

你可以自己定制，安装各种新东西，却总是觉得自己很笨拙，生怕打乱整个系统的和谐和完美（没有linux上那种自由自在，搞砸事情也不怕的感觉），你可以创作出各种界面，却就是觉得比不上cocoa的原生界面（cocoa是osx的GUI库），那种简洁，高效，细致，优雅，让你除了学习和模仿之外完全没有别的想法。很多人可能看不出来，现在web上流行的一些设计风格和元素，都是从osx里模仿来的。apple的作品几乎从没让你失望过，apple提供的选择虽然少，但几乎就是最好的选择，用mac的过程实际上是不断的在强化这种感觉。所以难免会产生“两个凡是”的思维定式。还有一个例子是：比较一下 windows软件的界面，各种风格都有，就算外观上接近windows的原生界面，面板的布局，按钮位置也可能完全不同。形成鲜明对比的是，mac上的软件（先声明，mac软件的数量不少）几乎都有一致的界面和用户体验，因为mac平台的开发者都谨守apple的GUI规范和建议。

我没有说绝对自由是最好的，也不认为应该让一个强势的偶像级的独裁者给你提供唯一的最好的选择。linux和osx都是能让我感受到未来的科技产品，在两者间做取舍时，我其实是抱着很务实的态度：在现阶段，osx要更优秀更成熟，而且我需要的是能提高效率提高生活质量的工具，而不是把精力和时间消耗在操作系统本身，我既希望享受到开源技术的好处，又不想为此浪费太多时间，所以我用mac……

魔戒风格的”web技术冒险地图”

Dexter.Yy — Wed, 14 Nov 2007 04:11:04 +0000

其实这张手绘地图的名字应该是“和谐web，和谐世界”（The Web is Agreement） ….

地图从左到右是作者心目中的善良阵营和邪恶阵营……开源社区、创作共用协议、web2.0里的blog圈,tag,mashup技术，RDF, RSS之类的开放架构都在左边……而微软的FUD，DRM技术，病毒，垃圾邮件，SOA之类的企业架构被放在右边……出人意料的是“google的全知全能之眼”也在邪恶一边，是因为google的平台不够开放还是因为用户隐私问题？

中间的圣山顶端是W3C组织和IETF，很多人在下面争吵和游说……

地图从下到上的象征意义比较复杂，有点像web技术从简单到复杂，也像是从前端到后端的关系……最下面是最简单的URL地址和REST/HTTP架构的设计者Fielding博士……往上是各种前端技术，javascript/ajax是一座跨越“富用户体验”的桥梁……最上面的终点是一片混沌，叫做“不兼容的大漩涡”，右边的魔多软件（微软）往里面排入ie，activex之类的私有技术，左边的开源社区往里面排入更多的技术，产品和代码……从 perl, php，java到linux……

还有很多很多细节……总之这张地图告诉我们的是：web技术这个世界很危险……好孩子不要来玩……

注释版，下载PDF

p.s. 这个东西我准备用大度4开的80克哑粉纸打印，裱起来帖到公司墙上……

再p.s. 我的桌子搬家了：

不过窗外的景色很无趣……很乏味……

土豆生活翰部落格（上）

Dexter.Yy — Thu, 19 Jul 2007 16:06:56 +0000

讲谈社的少年向棒球漫画《王牌投手－振臂高挥》的改编动画，由于有安达充FEEL、有《热带雨林的爆笑生活》的监督水岛努、还有非常适合BL的男性角色们，所以最近似乎大受欢迎，提到这部动画是因为我突然想到了其中的一段对白，说是在人的身体之中，有三种非常重要的物质，它们分别代表着你的过去、现在和未来，它们是多巴胺、肾上腺激素、甲状腺激素。

我觉得自己现在一定很缺乏多巴胺，加入土豆网已经有两个多月，4个月以前的激情仍然潜伏在大脑里，但是好像离皮层太远……按照我以前的想法，逃离专门培养代码民工和项目经理的Outsourcing产业，加入到web2.0技术革命的最前沿，进入我所热爱（用keso的话来说应该是“信仰”？）的互联网的中心，从无趣的武汉来到真正的国际化都市，接触更多强者，第一次独立生活……这些都应该是很值得高兴、很值得满足一阵子的事情，但事实上……我的大脑很快就被紧张的工作、生活中的琐事、物质欲望、以及其他各种烦恼填充的快要内存溢出，满足感从一开始就被挤出大脑，再也找不回来……

正因为我自顾不暇，所以进入土豆以后，这个BLOG反而更新的少多了，虽然与以前相比，好像有更多可写的素材，但如果你知道我写BLOG的理由，就应该可以理解：一个自己都缺乏满足感，没时间去品味、消化的人，是不会舍得花时间写BLOG跟别人分享的……

缺乏写BLOG的欲望，也可能与成本太高有关，现在流行的twitter和饭否，都是因为降低了BLOG的参与成本，增强了交流，才大受欢迎的，虽然我不习惯用这种随时随地记录的WEB服务，但是也许我应该把这个blog的撰写、修改流程简化到像Aether的Avalon那样……

说到Avalon项目，当然要大力推荐一下，这是一个不管从哪方面说都很有新意的BLOG程序，前端完全用XML/XSL取代了XHTML，而且保持很好的兼容性，内容组织方式类似twitter，以时间来区分，简化到连标题都没有，非常大胆，牺牲文章的可见性和读者的易用性，换取作者的超爽体验和简易流程……哎呀，我其实是想描述优点的-____-b……没有任何后台界面，不用登录（使用openID），直接在文字段落上点击就可以增删修改，自动保存，没有任何按钮，发表新文章时也像在纸上写字那么简单，还可以通过GTALK来提交……总之，这是一个完全为作者利益服务，UI方面有很多创新的BLOG程序，缺点除了上面提到的，还有一点就是：它是基于.net的……

Aether是我在土豆认识的第一个同事（因为他是前端开发小组的lead，负责招聘-____-b），他可以利用偶尔的业余时间在星巴克用笔记本写Avalon，晚上加班的时候写BLOG，这种方式与我的习惯差之千里……实际上，在我刚进入土豆的一个多月里，几乎连业余时间都没有……一些在做外包开发的同学，都以为互联网公司很轻松，拿过VC的互联网公司更是休闲场所，实际上这里的前端开发工作更加繁重，要考虑的细节更多（文字/符号提示、整体流程），项目不但一个接一个，还有并行的，你需要主动替用户发现新需求（等到让用户来告诉你时，通常意味着已经落后了），实现过程中不能太随意太大胆，要考虑用户习惯，项目提交之后等待你的是QA的折磨和几轮DEBUG，谁也不敢掉以轻心，“在足够多的眼球下，任何BUG都无处隐藏”，Eric Raymond的名言其实说的是WEB2.0应用……上线之后还要持续跟踪、改进。更麻烦的是……土豆网恰好处于国内WEB2.0行业里竞争最激烈的领域，虽然土豆有很大优势，但是2006年已经涌现出了两三百家视频网站，除了YOUTUBE式的视频分享，还有很多五花八门打视频旗号的概念，有垂直领域的专题视频网站，也有新浪这样的门户参战，颇有以前互联网泡沫的feel，视频网站做大以后也是最烧钱的，也许过不了一年多，90%的视频网站都会扑街，这里的竞争和压力，远远超过豆瓣之类的网站……

本来打算在这篇文章里简单总结一下在土豆的感受，还有我来土豆之后做的几个项目……但是由于在NTRPG养成的跑题习惯……这篇文章已经太长了，到此结束……下一篇再作补充……

服务器扑掉3天的原因……

Dexter.Yy — Thu, 19 Jul 2007 14:39:19 +0000

从周一开始，BLOG无法访问，FTP也不能登录，目前我的BLOG和其他个人项目，都是放在盘古的合租服务器里，机房在重庆，但是查看路由就会发现根本访问不到服务器的IP：

traceroute to www.limboy.com (219.153.7.230), 64 hops max, 40 byte packets
1 192.168.0.6 (192.168.0.6) 117.929 ms 4.141 ms 0.582 ms
2 192.168.1.3 (192.168.1.3) 0.924 ms 1.114 ms 0.815 ms
3 222.66.106.193 (222.66.106.193) 3.843 ms 2.707 ms 1.569 ms
4 10.0.1.17 (10.0.1.17) 3.616 ms 21.227 ms 29.201 ms
5 218.1.21.253 (218.1.21.253) 4.599 ms 5.930 ms 30.725 ms
6 218.1.21.249 (218.1.21.249) 49.200 ms 21.189 ms 27.175 ms
7 221.133.230.1 (221.133.230.1) 22.736 ms 26.635 ms 28.824 ms
8 61.151.252.37 (61.151.252.37) 59.189 ms 6.389 ms 6.187 ms
9 61.151.250.49 (61.151.250.49) 22.326 ms 11.619 ms 6.467 ms
10 61.152.81.46 (61.152.81.46) 32.429 ms * 10.027 ms
11 202.101.63.242 (202.101.63.242) 68.323 ms 20.295 ms 33.171 ms
12 202.97.34.133 (202.97.34.133) 40.942 ms 33.185 ms 32.624 ms
13 202.97.53.86 (202.97.53.86) 33.241 ms 32.021 ms 29.937 ms
14 * * *
15 * * *

202.97.53.86是电信的骨干网节点，从盘古客服得知，电信的说法是骨干网服务器有故障，但没说过何时修复，三天过去了，这个BLOG终于重见天日，却不是因为电信解决了“故障”，星服务器（也就是我参加合租的那台）的用户现在得知，我们在无法登陆星服务器的同时，却都能登陆其它服务器，而其它的用户都能登陆星服务器，也就是能登陆其它的IP段，这与电信的解释相矛盾……

这再次证明中国的网络环境是非常fantastic的……

我不知道这次“故障”的真正原因是什么，用myIPneighbors可以方便的查到与同一台服务器的其他网站，我查了一下自己的，除了菅野洋子中文网、以前在CGT公司的同事搞的d5power工作室之外，没看到其他熟悉的网站，也没看到不和谐的东西……

Mozilla的中文译名太可笑了！

Dexter.Yy — Sun, 03 Jun 2007 04:30:12 +0000

Mozilla中国终于要正式成立了，前几天的消息是Windows Live中国区前任总经理宫力（也是前任Sun公司中国工程研究院院长）将担任Mozilla中国的董事长兼CEO，今天在他的BLOG上看到进一步的消息：在中国成立的公司名叫Mozilla Online Ltd，而中文译名是谋智网络！全称：Beijing Mou-Zhi Network Technologies Ltd.（北京谋智网络技术有限公司）…………

这个名字让我很郁闷，本来mozilla这个名字来源于“哥斯拉（Gozilla）”和Mosaic（第一个可以显示图片的浏览器，Netscape的前身），LOGO上的图案也是一个类似恐龙的怪物，中文就应该译成“魔斯拉”哑！“魔斯拉在线”，多么华丽！多么强势！现在居然起了一个跟谷歌差不多风格的名字……真是作孽哑……

这次在北京举办的Google开发者日活动里，除了发布Google Gears，也邀请了Mozilla负责研发的副总裁Mike Schroepfer，solidot的记者对他做了采访，从笔录里可以看到，firefox在中国的占有率只有1%，远远落后于西方国家，要改善这样的状况，我觉得Mozilla必须在两个方面做大量工作，一方面是针对开发者，中国WEB开发者的整体素质明显偏低，Mozilla不仅应该致力于推广标准，也应该跟国内的开发社区加强沟通，比如51js（我在这个地方看帖无法坚持5分钟以上，否则会憋出病）。另一方面，应该研究一下“中国国情”，调查一下中国特殊的用户需求，推出适合中国小白用户的firefox套件/定制版，包括必要的扩展和初始设置。当然也要在用户中提高能见度和影响力，即使不做市场推广，我觉得也应该起一个响亮的名字……

说到中国的浏览器用户，我想起上周在开发中遇到的一个小任务，土豆网需要在首页和搜索页面临时增加一个调查表单，设计人员给的是一种很传统的小窗口，所以便做成一个固定在右下角的浮动层，在Maxthon里测试时，发现这个层会被当作广告过滤掉——随着滚动条移动几次之后，便毫无缘由的消失。判断的依据似乎是：absolute定位的层，且里面包含a标签（多么傻X的规则），于是去请示负责产品的Hans大人，他答复：先不用管Maxthon，给我确保腾讯浏览器里能正常显示……我差点晕倒。我还没看过土豆网的用户统计，如果按照Mike Schroepfer的“10％理论”，Maxthon的占有率居然低到可以忽略，而腾讯浏览器的用户高于10%……这实在太可怕了，虽然以前就知道像土豆网这样的视频网站，在中国的用户会比较低端比较小白，不过现在发现要真正理解国内的用户，我还有很多功课要做……

补发前天的照片

Dexter.Yy — Wed, 25 Apr 2007 13:25:57 +0000

临街的小门：

隔壁的房子，旁边还有酒吧和设计书店……

通过一条小道，便看到涂鸦：

大门：

顶楼：

Dev部门的工作场地：

涂鸦……以及面试BOSS NO3……

涂鸦……这次是技术主题：

休息室之一：

休息室之二：

苏州河旁的其他仓库：

THE END

YY专用Wordpress主题终于完成了……

Dexter.Yy — Wed, 04 Apr 2007 07:43:53 +0000

上次Blogger被GFWED的时候，我说过坚决不转移到WORDPRESS是因为它太迎合我把东西做复杂的欲望，现在实践证明确实如此……

由于形势所迫（不仅因为GFW），我不得不放弃Blogger重新建立一个稳定的BLOG，熟悉WP的插件加上制作这个主题花了4天时间，超乎想象了……时间主要浪费在设计、浏览器兼容上面……本帖我将用来发牢骚，并且分享一些经验教训，没兴趣的同学可以跳转到其他地方去了……

页面设计在中途大幅度修改了3次，这次我想恢复到传统风格，因为如今那种简洁大字体大空白色彩明亮固定宽度居中对齐边缘有阴影的WEB2.0风格太普遍了，作为代表个人形象的BLOG，我希望有一些不同的个性，而且我虽然也喜欢“简洁”，但不喜欢“简单”。本来是想把WEB2.0的设计元素和配色与奇幻游戏元素结合在一起，但尝试过之后发现很困难，主要是配色很难，而且“留白”在WEB2.0风格里确实占很重要的地位，但在这个页面里我没办法留很多空白（何况最初就决定要做三栏布局）。与做图和配色相比，我还是更喜欢写代码，所以我懒得花更多时间来完善目前的设计了……

这个BLOG的布局可以说是实验风格的……三栏的液态布局，左栏的宽度是自适应的，还有一部分内容固定在窗口顶部，无论怎样拖滚动条，它都会随着页面移动，实际上我是受了Westeros的启发才想用这种相对窗口固定的设计，但是实现起来很麻烦（Westeros的效果其实也只支持IE7和FIREFOX，在IE6里会变得像框架布局一样），如果用JS来实现，移动就不可能是平滑的，衔接的效果不好，用CSS来实现却有很严重的缺陷，首先IE7以下版本的浏览器不支持position:fixed属性，必须用HACK来模拟，我采用的方法是用一个DIV来包含所有元素，在IE7以下版本里给它height:100%;overflow-y:auto;的属性，把顶部元素的定位改成绝对，所以IE6用户看到的右侧滚动条其实不是浏览器本身的……

由于用了两种布局方式，而液态布局的三栏里既有浮动也有非浮动，再加上中间的羊皮纸效果必须在左右边缘采用不同的背景图，很多地方的定位都要精确到像素……所以这个主题的CSS写起来很头疼，DEBUG花了很多时间，目前在opera里似乎还有一个毛病，但我一向都是歧视opera用户的（因为占有率才0.8%左右嘛），暂时懒得改了……

由于设计上的限制，有2个地方的布局不得不用JS来调整，一个是改变顶部fixed层的宽度，因为它的定位方式是fixed或absolute，无法做出液态的宽度（也就是说宽度随浏览器的大小自动填充，但是与右侧总保持固定距离），另一个是让左栏和中栏的高度相等，由于无法使用统一的背景图片，所以这里也只能用JS来调整……

我倒不在意什么“预留退路”、“无障碍”之类的JS设计观念，反正如今在WEB上混没有JS已经寸步难行了，而且我没有用JS来影响内容…………但是用JS来调整布局会遇到另一个问题，如今的JS代码都是放在window.onload里运行的，因为页面加载完成、DOM建立之前，很多方法都不能用，但问题在于，window.onload不仅要等DOM加载完，还要等图片（指img标签）加载完，我的BLOG页面里整合了很多东西，每篇文章的题图、YUPOO的相册、豆瓣的封面……如果要等这些东西都加载完才修正布局，显然是不现实的，幸好我在国外一个BLOG上找到解决办法（地址忘记了，抱歉），可以在onload事件触发之前、DOM刚加载完时就执行修正布局的函数：

// for Mozilla DOM onloaded
if (document.addEventListener)
{
document.addEventListener("DOMContentLoaded", DOMsinit, null);
}

DOMsinit就是我要执行的函数，第三个参数本来是布尔值，用来决定事件在冒泡还是捕获阶段触发，但DOM加载的事件显然没这些东西，所以必须传空值，以上是适合标准兼容浏览器的方法，对IE要用完全不同的代码（放在HTML里）：

ie_onload.js就是要执行的函数……为了IE要专门增添一个JS文件，真是麻烦……我还没搞清除defer是什么鬼东西，反正这样用就没错了……

就算你只是使用window.onload，也要考虑到：WP本身和某些插件，都可能有自己的JS函数，会用到window.onload，如果你直接写window.onload=function(){……..}，就会把其他功能覆盖掉，一定要用这类方法：

if ( typeof window.onload!='function')
{
window.onload=function()
{
yysinit(); //页面加载完成时调用的函数
}
}
else
{
var oldonload=window.onload;
window.onload=function()
{
oldonload();
yysinit(); //页面加载完成时调用的函数
}
}

本来我还希望用户在改变浏览器窗口大小后，顶部的宽度也能跟着调整（因为用CSS实现的自适应都有这种效果），所以用了window.onresize事件，但大家都知道，即使是液态布局，当窗口小于一定宽度后，布局也会乱掉，因为容器虽然可以自动变形，但内容却不会改变，浮动定位在这方面最敏感……由于我的BLOG页面里内容比较多，所以宽度不能少于900多px，在window.onresize里我也做了相应的处理，但是问题就出来了……这个该死的事件在不同浏览器里的行为不一致，在按住窗口边框——拖动——放开鼠标的操作之后，onresize在firefox里会触发1次，在IE7里会触发2次，而在IE6里……居然触发3次……结果就是：限制最小宽度的函数在IE6里会导致浏览器假死……我觉得没必要为这种BUG自找麻烦，所以把onresize改成这样了：

window.onresize=function(){
var aVersion=navigator.appVersion;
var version=parseInt(aVersion.split("MSIE")[1]);
if(document.body.offsetWidth<941)
{
if(version>=7 || aVersion.indexOf("MSIE")==-1)getid('outwrapper').style.width="942px";
}
else
{
if(version>=7 || aVersion.indexOf("MSIE")==-1)getid('outwrapper').style.width="";
}
getid('top').style.width=getid('sidebar-1').offsetLeft+"px";
}

version>=7 和 aVersion.indexOf(“MSIE”)==-1 都是浏览器校验，表示只有当IE版本大于或等于7，或者在非IE浏览器里，才限制页面的最小宽度……

本来还想加一些JS效果，比如可折叠的侧栏widget之类，但是把兼容性改下来之后就完全没心情了………………

最后还是回到设计话题，自适应宽度的布局其实还是比较迎合大屏幕（高分辨率），可以充分利用空间，改善用户体验，但是如果页面里内容比较紧凑，那么对于普通分辨率的用户（1024×768）来说，效果反而不如固定宽度……目前主流的BLOG设计是固定宽度，单栏或两栏，底部再加上一栏放各种列表，所以我的布局方法虽然技术上麻烦的多，但也许并不讨好，那也没办法的事……

新作品：可以自由编辑的Google地图，700行javascript+70行php

Dexter.Yy — Tue, 13 Mar 2007 10:20:23 +0000

以前在龙骑士城堡提过一种想法，就是用GOOGLE MAPS来做桌面游戏玩家的主题地图。当时推荐的是EEMAP的服务，然则这个网站的注册一直需要邀请码，很不方便，而且界面难看，速度也很慢……

当时就想过自己来做一个GOOGLE MAPS API的应用，但一直没时间看API文档。这几天总算有空闲（辞职就是好哑），把想象中的东西基本上做出来了，我把它叫作Free Map Folio v1.0（取自DND设定集的名字），可以像维基百科那样自由编辑，前端是静态的HTML，数据库用xml，方便部署，而交互操作的程序完全用Javascirpt来写，只需要打开一个HTML页面，然后整个使用过程都不需要刷新页面，也不需要从外部获取数据（只用AJAX提交数据）。

实际应用：桌面游戏玩家主题地图（乱加东西要记得删掉）——http://www.ntrpg.org/yy/maps/
演示地址(上面的镜像)：http://www.limboy.com/project/maps/

Javascirpt的主要代码有700行，都写在一个对象里(yymap)，我本来想把每个单独的功能都封装起来，避免重复代码（DRY原则？），不过后来页面右侧栏加入了“地点列表”之后，程序就改复杂了……………以后有空要做一下重构……

用户只需要访问一个静态的HTML页面，唯一一次从外部获取数据是在地图加载的时候，用了API提供的XmlHttpRequest对象，非常方便，比如GXml.parse可以把responseText获得的文本转换成XML DOM。不过用GXmlHttp和GDownloadUrl的时候，IE7都会遇到一个缓存问题（IE6没试过）：刷新页面后，不会重新下载XML文件，因此页面上的数据不会更新。解决方法是在xml文件的地址后面加随机参数（感谢tinyfool的帮助）：

var ramnum = parseInt(100000*Math.random());var request = GXmlHttp.create();
request.open("GET", "db.xml?x="+ramnum, true);

标记（Marker）的样式可以自定义，所以我做了一个选择图标的功能，先建立所有图标的基本属性（yymap.baseIcon），包括阴影图片和各种尺寸，然后在创建新标记时，根据用户选择的图标，把地址传给icon.image就行了。其实还可以做一个自定义图片的功能，允许用户在编辑器里上传自己的图片（比如照片）当作图标，只是必须把图片处理成固定大小的32位PNG……

点击标记弹出的信息窗口是最麻烦的东西，因为页面里同时只能存在一个信息窗口，而信息窗口里的内容也不能保存在标记的对象里，所以要修改某个标记对应的信息窗内容，就只能修改它的点击事件：

GEvent.addListener(marker, "click", function(){
yymap.whenClickMarker(marker,info,point,icon.image);
});

我在点击事件里传了4个参数：点击的标记对象 , 信息窗的内容, 标记的经纬度, 标记使用的图标，除了用来显示信息窗，也是为了把它们传给全局变量（因为编辑这个标记的时候会用到）。

为了让右侧栏列表与地图上的图标一一对应，我在列表的每个链接上设了跟标记对应的ID，每次做添加、编辑或删除的操作时，除了修改标记本身的点击事件，还要用ID找到列表上对应的链接，修改链接的点击事件…………总之，感觉这个侧栏列表很添乱……却又是必要的功能……

在我写这篇文章时，还有一个搜索地名的功能没做好。本来API提供了地理译码的功能，可以把符合格式的地名转换成JSON数据（用JS对象来传递数据的格式），但这么方便的东西我却享受不了——地理译码还没有支持中国的地名…………在地图上就能很明显的看到：周围日本、印度，都有详细的城市名字，放大后还有交通信息，而中国是一片空白…………

因此对于不熟悉地理的用户来说，要在这样的中国地图上找到某个城市可能太难了，搜索地名是必须的功能。由于没有地理译码，目前使用GOOGLE MAPS API的网站，比如EEMAP，都是自己建立地名和经纬度对应的数据库。我找到了一个很全的“乡镇级中国行政区划地标”，是GOOGLE EARTH用的KMZ文件，但其实就是压缩过的XML，用WINRAR打开就能看到一个KML文件，可以直接拿来当搜索数据库。我考虑过两种实现方法：把用户输入的中文地名用AJAX发给PHP，让PHP搜索这个XML文件里匹配的标签，然后返回相应的经纬度；或者直接用GXmlHttp下载XML，然后用JS的DOM方法来搜索相应的标签，第二种方法很合我的胃口，不需要借道PHP，遗憾的是…………这意味着搜索时要用AJAX获得19M的XML数据……

更新：地名搜索已经完成了，模糊搜索范围包括省会、地级市、县城、村镇……足行匹配，搜索对象在KML文件里排名越靠后，搜索时间越长，不过最多应该不超过5秒……

我刚才测试了一下，搜索不到结果时4.36s，搜索最后一个地名“番阳”需要4.02s，搜索北京1.16s，搜索克拉玛依只需要华丽的328ms

php是由以前的同事Skylin帮忙写的，由于PHP只负责根据AJAX提交的数据，修改XML文件，所以内容很少……然则Skylin不肯用PHP5自带的XML类，而是自己写正则……最后代码只有几十行……果然是高手风范……

比如，这是remove.php:

include "./globals.php";
$file_content = join('',file("../db.xml"));if(preg_match("/rn".intval($_POST['id']).".*rnrn/isU",$file_content,$array))
{
$file_content = str_replace($array[0],'',$file_content);
}
$fp = fopen("../db.xml","w+");
flock($fp,LOCK_EX);
fputs($fp,$file_content);
flock($fp,LOCK_UN);
fclose($fp);
?>

不过正则也容易出现问题，例如：在我最初做的XML数据库里面，标签的前面都有缩进，大概因为有的缩进是TAB，有的是空格，导致正则一直出错，只好把XML里的缩进全部删掉了……

目前已经全部完工，可能还有一些小BUG需要修改，比如：在简介里输入全角字符（比如·和——），会导致后面的字符都无法保存。P.S. 单引号、双引号和”&”容易引起JS错误，我把它们都屏蔽了-_____-b

海缆故障以后的生活很不正常

Dexter.Yy — Sat, 06 Jan 2007 04:24:52 +0000

自从地震导致海底光缆故障以后，Google算是表现最好的国外WEB服务，据说是因为Google有自己的专用线路，毕竟真正直接影响网络访问的应该是路由和带宽方面的资源和调配，考虑到目前参与修理光缆的都是日本和韩国的船和机器人，看来中国的网络至少要到2月份才能恢复正常……实在是不能忍……

不过GOOGLE也有很多服务不能正常使用，比如GMAIL经常只能用HTML界面，还有Google page creator，不知道是因为GFW还是海缆，似乎彻底扑街了……而我把BLOG的CSS背景图片和一个重要的JS文件都放在Google pages的空间里，所以BLOG一直无法访问。最近忙着熟悉UBUNTU，到今天才解决这个问题……

海缆故障使得很多BLOG都停止更新，比如CW的成员、格志、还有租dreamhost主机的人。既不能访问国外网站又缺少了国内的传播者，最近八卦消息的来源就很成问题。唯一让人欣喜的是，搞digg同步翻译的“煎蛋－Digg Digest”，不但没有停止更新，还开始改用全文翻译的方式。另外CNET中文站的访问没出现问题，更新也很勤，而且新闻的速度和翻译质量都比它旗下的GAMESPOT中文站要强多了。

在这个闭塞时期，也偶然看到好消息：Blogger现在允许用户绑定自己的域名代替blogspot.com域名了，我已经在设置里看到这个选项。这样一来应该就不用再担心GFW了，除非它连GOOGLE的DNS服务器也不放过……

最近因为上不了国外网站，就经常跑到CSDN上看热闹，大概是因为在那里微软技术占主流，所以人们的忧患意识也很强，每天看见的热门文章都是“C语言已经死了”、“Ajax 的再生与幻灭“、“Web才是老大！”之类的东西，还有传说中的21岁副总裁吴莹莹…………我估计多数程序员过得都是上班后先泡杯茶再打开电脑看邮件然后来CSDN看八卦的生活……真羡慕哑！

不过有趣的是，我以前写的一篇BLOG文章居然也出现在CSDN软件开发频道首页的新闻里了……这东西本来是发在solidot上的，被CSDN的编辑采集过去的原因……可能是因为我标题党的功力太深厚XD 虽然评论里骂我的人不够多，但是看到自己那些个人化语言原封不动的出现在主流媒体的新闻里，确实相当有趣……桀桀桀……

NTRPG的服务器在新年期间也一直处于扑街状态，这也是让人心理不正常的一大原因，虽然现在服务器又能访问了，但MYSQL数据库还是有问题，就在我写BLOG的时候，论坛又上不去了，实在是不能忍……我过去真应该好好学学LAMP的配置。最后补充一件事，NT服务器的不稳定不但意味着最深的地下城会同步塌方，也可能会影响这个BLOG的浏览……我不是说过已经把BLOG图片和JS从Google pages里移出来了么？你想的没错，我把它们都传到NT服务器里去了……

没有Blog的日子里，有很多事都想记录下来

Dexter.Yy — Sat, 02 Dec 2006 19:21:49 +0000

没写BLOG的这一月发生了很多事情，比如：

我把Firefox升级到2.0，更新了原有的72个扩展，在试用Yahoo!官方的del.icio.us扩展时把自己的书签和TAG都搞乱了，虽然主要是因为中文乱码，但这个扩展的设计也很有问题。而且我很奇怪del.icio.us为什么没有批量删除和删除标签的功能。

所以我的del.icio.us书签一直处于废弃状态，Blog上的相关功能都不能用了，比如RSS里的新网页推荐，我准备删掉帐号重建一个，按照Firefox的书签重新整理del.icio.us。至于扩展，我还是更喜欢用del.icio.us Complete 1.3。

目前我装的扩展仍然维持68个，最常用的那些都快速发布了兼容Firefox2.0的新版本，我一直觉得这些扩展比Firefox本身更有活力——看看它们的更新频率。

不过有一些还没有中文版，比如最重要的开发工具Firebug（PS：Firebug刚刚发布了1.0 beta版，功能更加强大！真是爱死这个东西了，目前我在开发中最常用的三个工具：Aptana、Firebug、Editplus）

过去最普及的扩展Tab Mix Plus似乎完全被Tab Mix Lite CE取代了，TML CE也趁势在最近的更新里增加了一些TMP的功能。

隐藏菜单的Compact Menu似乎没有得到原作者的支持，现在出现的两个支持2.0的版本都来自第三方，加上了自定义的图标，但这些图标对某些界面很不友好，所以我改用最简单的Tiny Menu

比较可惜的是，唯一的国产扩展，能够自动进行简繁体转换的“新同文堂”似乎没有更新到2.0……

今天在digg上看到人家的Firefox界面截图，才发现我装的扩展并不算多……这位兄弟自称安装了所有可能的扩展……101个，界面效果让人想起IE6的流氓工具条……
无冬之夜II的0day终于发布，从最早PROCYON的CLONEDVD到RELOADED版、CLONECD版，版本也升到1.03 BETA，然则正当大家玩的热火朝天的时候——有人还突然对吉斯洋基人和吉斯泽莱人的历史瓜葛产生兴趣——我的RADEON X1600PRO显卡却挂掉了，系统无法辨认，也不能安装驱动，因为无法确认（其实应该是：没有空闲去确认）是显卡坏了还是WINDOWS坏了，我度过了两个星期没有GPU的生活。最后只好把显卡拿去电脑城检查，结论是必须回总部返修，他们借给我一个7100的N卡，回家后发现……N卡同样无法安装驱动，终于下定决心重装系统，结果所有问题都解决了-_____-b 现在我的X1600PRO仍然在“返修”中，暂时不能玩3D游戏
这次装系统是具有历史意义的！……我在整个大学阶段只装过一次操作系统，工作后升级机器，从win2k换成“装机人员专用的winxp特别版”（在电脑城工作过的同学给我的，非常棒），一直到现在都还没有重装过。因为我装的软件非常多，个人定制的东西也多，重装系统要付出高昂的代价，还要浪费大量时间重新配置。此外由于我不用IE不用QQ，下载的软件也都是开源或国外的0day，所以几乎没有什么安全问题，本来就没有必要装系统。我认为计算机是学习技术、应用技术的工具，而不是技术本身，把时间花在操作系统上面是非常不值得的，即使是Linux……其实我这次本来准备改用ubuntu一劳永逸的解决问题，但是运行LiveCD时遇到硬件兼容问题，便放弃了，这样也好，反正作为一个游戏Fans，我并不适合用Linux……

至于无冬之夜II，我才玩到第二章，没什么资格评论，一些肤浅的印象是：镜头形式的剧情叙述方式很不错，任务的设计很有意思，比如法庭辩论，然而战斗的难度却简单的掉渣……看来重点在于多人部分。这款期待很久的RPG在NTRPG并没有引发热潮，讨论的人气甚至不如当年的狮心王，也许是因为NTer现在工作都太忙（这点我不太相信，因为这些人有空玩MMORPG和网页游戏），也许是因为单机游戏现在真的没落了，不但新玩家在网络游戏和电子竞技中成长起来，对PC GAME的理解和看法跟我们完全不同，老玩家也习惯了WOW的操作和游戏方式，不知道还有多少人怀念黑岛式的角色扮演和城市冒险。当然我更愿意相信的理由是：NWN2本来就是多人联机游戏，目前的版本是无法引发什么热潮的，阳光娱动的汉化也很重要，黑石头加油！（注：黑石头是人的名字）
在传媒大学读书的表妹现在也开始Blogging,而且在我的推荐下，她从百度转投GOOGLE：http://cookiesimple.blogspot.com/ 但愿她的网络体验中不会出现GFW的阴影……这个BLOG我还没有时间仔细看，就不做评论了XD，但是从最新的一篇文章可以看到，这个桌面美化newbie终于放弃了GEEK们喜欢的Widget和Google Gadget，在桌面上真正反映出自己的兴趣——超女、会踢球的帅哥（好罢我是德国队球迷，所以不知道那张照片里的家伙是阿根廷的谁）、会射箭的精灵帅哥、SD娃娃、等等——呃，可喜可贺……
……其他的我还是单独发帖罢，否则就太长了。顺便说一下，我看过一些讨论如何让Blog成功/受欢迎的文章，其中之一是：那些成功Blogger的习惯都是更新快，字数少……但我的习惯不是这样，我喜欢把信息集中，也喜欢跑题，即使有些人不习惯看字数多的文章。

恢复更新 & 为什么要恢复更新

Dexter.Yy — Sat, 02 Dec 2006 18:13:25 +0000

好罢，其实11月22日的时候我就知道Blogspot被解封了，但是拖到今天才恢复更新，一方面是担心像中文WIKI那样昙花一现，一方面也是因为最近工作太忙了……

现在做的项目——美国ICPS协会的医生数据库&网站，在本周三终于完成了一期的计划，为了按时交付，这几周大部分的工作日都要加班到晚上9至10点，周六也是一样。这个网站完全采用符合WEB标准的DIV+CSS结构，包括后台管理，连复杂的表单都没有用TABLE排版，而公司里的PHP程序员对CSS并不熟悉，所以大部分页面的布局和调整都要由我来做，工作量很大，另外网站应用了大量AJAX（我说的AJAX不仅包括XMLhttpRequest，也包括DHTML……），有时JS代码比PHP代码还要多，大部分人都是JS和DOM编程的新手，所以在开发中遇到过很多问题（有时间的话我会在BLOG上总结一下，并且写一些重用性更好的代码），虽然最后都解决了，但也耽误了一些时间，另外设计上也有很多不成熟的地方，甚至还有人问我是不是把项目当作实验品……总之，频繁加班一方面是因为客户需求不明确、没有清晰稳定的设计，一方面也是因为技术上的不成熟，不过我觉得这种不成熟的阶段是必须经历的，而且很有好处，通过这种实践，不但积累了经验、加深了认识，也暴露很多问题，而这些问题在以后的开发中都可以避免，团队和个人的能力都得到了提高，以后的工作就会更容易。唯一的遗憾是，虽然这个网站采用了大量WEB2.0技术，强调用户体验，在二期还会加入BLOG和SNS的功能，但它没有做到信任用户，管理功能非常“强大”，实际上是一个披着2.0皮的1.0网站……

最深的地下城也有很长时间未更新了，NTRPG的DDO专题也没有精力去帮忙，真是很惭愧（不过，我也不是什么都没做）。虽然ICPS项目做完了也不一定意味着有更多空闲时间，但我还是要慢慢调整回正常状态，BLOG也一定要恢复，重新写BLOG的时候我也考虑过一些事情，比如为什么要坚持用blogger.com，而不是用Wordpress或drupal重新做一个？为什么要继续写Blog，对自己对别人都有什么意义？对于这两个问题，我的答案是：

坚持用blogger.com首先是因为我认同Google，并不是盲目信任，而是因为Google符合我的价值观和我对互联网的理想。我也很喜欢blogger.com的UI设计，这种使用体验可以提高我对Blog的热情，虽然Wordpress的后台设计也很棒，功能也要强大的多，但这就会太迎合我把东西做复杂做华丽的欲望，我现在不能把太多精力花在BLOG的外观和功能上，而是要创造实实在在的内容，我需要的不是一个华丽的Blog网站，而是一个Blogging的工具。另外，Wordpress的功能太强也是很无趣的事情，我更喜欢自己用hack来实现那些功能。
我分析过别人写Blog的理由，一般都是以下几种：
“我有很强的表现欲望，喜欢展示个性”
“我一直想做个人网站，想通过它展示自我/出名/赚钱，但我不熟悉相关技术，而建立Blog的门槛要低的多”
“我本来就是一个写手”
“我是一个名人，需要一个直接与公众交流，反映真实想法的私人平台”
“我很羡慕别人的Blog，所以想要模仿”
“我只是写简单的个人日志，没有什么别的意义”
……这里有一个帖子也可供参考。

至于我写Blog的理由嘛……首先我想引用播磨拳儿的话，当塚本八云问什么是“男女之间的交往”的时候，他说：

“我也不是很懂……不过例如……早上骑着机车在海岸线奔驰的时候……看到朝阳……从海面上升起的那一瞬间，会觉得那个景色很漂亮，还有吃到非常美味的美食时，或是看到好看的电影等等的时候，希望能够跟自己一起感受这个瞬间，彼此的心中都能够有这种想法……而一起累积这样的时间，是不是就是所谓的交往呢……”

这大概就是我写BLOG的主要理由。我看过太多东西，想过太多东西，有很多喜欢的东西，有很多感动的时刻，但是在日常生活中却找不到可以分享这些东西的人，我以前觉得这种烦恼是很可笑的：我可以独自看书，独自学习，独自享受音乐动画电影游戏，多么快乐，何必自找麻烦，我连自己都无法满足，哪来有时间去给别人介绍、解释，哪有时间去聊天和写文章。但是累积的东西越多，我就越来越觉得这种烦恼是切实存在的，获取的越多，反而越觉得空虚，周围的人越多，反而越觉得寂寞。Blog这种东西比较个人化，与传统的论坛相比，虽然自由、公开，却也伴随一定局限性，简单的说，不会有很多人来看，来看的人当中不会有很多人感兴趣，感兴趣的人当中也不会有很多人参与讨论。但是能有这样一个平台，已经应该满足了。

最后补上那段漫画：

请使用pkblogs访问这里

Dexter.Yy — Thu, 26 Oct 2006 14:10:29 +0000

大约从10月25日21点30分开始，帝国各大行省都传出消息，无法浏览由Blogger beta支持的网页，而使用代理则可以正常访问，因此基本可以确定Blogspot域名再次被GFW封锁，具体原因不明，也许跟这类事有关联？……

如果把帝国的网络比做FORGOTTEN REALMS，GFW就是AO，你无法理解它，它也不抛头露面，却掌握有终极的权力。而Google只能算是信徒数量不足的外来神祗。

本来Blogger beta刚推出的时候，Blogspot正好解封，很多人都以为这是“谷歌”努力的结果，我当时也认为Blogger在Google的本地化战略中占有一个重要地位，现在看来并非如此

其实我从一开始就可以选择用WORDPRESS来建立BLOG，感谢NTRPG，我不并缺少PHP+MYSQL空间。我使用Blogger的目的其实就是想用行动来支持Google，而且比起WORDPRESS强大的插件库，用Blogger做出新的功能和效果，显然更有挑战性。

我准备暂时观望一段时间，如果确定没有挽回的余地，那就只好用WORDPRESS重新做一个BLOG了。目前我已经修改了feedburner生成的RSS地址，今后访问这个BLOG请使用新地址：http://www.pkblogs.com/dexteryy/

我尝试着列举GOOGLE的所有服务

Dexter.Yy — Sun, 15 Oct 2006 02:20:23 +0000

看了标题你可能会认定我是一个宅男，双休日在家闲的发慌就搞这种东西……这种想法是完全不对的！第一，我不承认自己是宅男，因为我的外貌还没有达到南方公园里的程度，第二，我今天其实很忙哑！正在校对PHB3R法术部分……这事情的起因是：表妹的同学考进了北大国际关系学院，新学期一开始，可敬的老师们就布置学生写一篇关于Google的作业，好像是《GOOGLE带来什么影响》之类的题目……你说这不没事找事么，据我所知在校园网里，特别是北方，访问GOOGLE是很困难的，这也是前段时间CNNIC的2006年搜索市场调查报告显示GOOGLE在大学生市场中占有率比百度低很多的原因之一。反正为了完成作业，她需要GOOGLE所有服务的网址和一些参考资料……

我本来是准备把Google cheat sheet之类的东西发给她，但是那上面只有网址没介绍功能，内容也有些过时，更重要的是……中文版的地址现在无法访问，幻灭那里也找不到类似的东西，于是我只好自己写了：

*带星号的是我常用的服务

GOOGLE官方的BLOG
Official Google Blog

Google （谷歌）中国的博客网志
Google 黑板报 — Google 中国的博客网志

搜索产品：

除了普通的网页搜索外，GOOGLE还有

图片搜索

新闻搜索

BLOG搜索（搜索博客上的信息）

书籍搜索（GOOGLE与多家图书馆和机构签定协议，把藏书和文件制作成电子版放到网上）

金融信息搜索

本地搜索（中文）（与GOOGLE地图结合搜索本地区的信息）

学术信息搜索（搜索论文）

froogle （搜索购物方面的信息）

代码搜索（搜索各种程序语言的源代码）

交通信息搜索

GOOGLE趋势（各种关键词的搜索次数和地区，通过比较可以了解大众更关心什么）

Google Catalogs （搜索各类目录出版物）

Google Directory （分类网址目录）

此外还可以在搜索框里进行数学运算，查看汇率，等等。关于搜索功能的具体说明看这里：
http://www.google.com/help/features.html

GOOGLE个性化主页 *
http://www.google.com/ig?hl=en
用户可以自己定义主页上的内容和布局，比如来自不同网站的新闻、邮件、日历、各种小工具，等等
插件列表：
http://www.google.com/ig/directory?hl=en

Google 资讯
http://news.google.com/
GOOGLE的新闻服务，把一个地区的新闻网站的最新内容整合到一个网页里
Google Alerts *
http://www.google.com/alerts

Gmail *
http://mail.google.com/mail/
GOOGLE的邮箱服务，自动过滤垃圾邮件，容量持续增加（已经接近3G）可以搜索邮件、设置过滤器，给邮件帖标签，还可以在网页上即时聊天、播放音乐等功能

GOOLGE VIDEO：
http://video.google.com/GOOGLE的视频服务，可以搜索、上传视频文件，中国地区暂时无法访问。

GOOGLE MAPS *
http://maps.google.com/
GOOGLE的地图服务，GOOGLE从商业公司购买卫星照片和航拍照片，免费提供给用户
类似的有
Google Mars
http://www.google.com/mars/
Google Moon
http://moon.google.com/

GOOGLE EARTH *
http://earth.google.com/
GOOGLE MAPS的软件版，功能更强大，用3D地球的模式来显示卫星图

Blogger *
http://www.blogger.com/
GOOGLE的博客服务，全世界最大的博客服务提供商之一，可以免费创建个人BLOG，自动生成静态页面发布到FTP里面，也可以使用GOOGLE提供的空间创建动态页面的BLOG。

orkut
http://www.orkut.com
GOOGLE的社会化交友网站

GOOGLE GROUP *

http://groups-beta.google.com/

类似论坛的服务，还包括发布在新闻组里的旧数据

Google翻译工具 *
http://www.google.com/language_tools
可以在多种语言之间进行翻译，包括少量文字的翻译和网页全文翻译

Google Calendar *
http://www.google.com/calendar
GOOGLE的日历服务，可以制作日历，公开自己的个人日程安排

Google Docs & Spreadsheets *
http://docs.google.com/
类似OFFICE办公软件的服务，可以在线创建/编辑文档和表格，保存在网络上或本地硬盘里，也可以公开发布

Google Reader *
http://www.google.com/reader/view
RSS在线阅读器

Google书签 *
http://www.google.com/bookmarks
在线书签服务

Google Notebook *
http://www.google.com/notebook
在线记事本

Google Checkout

https://checkout.google.com/

GOOGLE提供的在线支付方式，类似EBAY的PAYPAL服务

Google Analytics *
http://www.google.com/analytics/zh-CN/
google分析，提供网站访问量、用户来源、关键字和广告方面的统计服务

Google Adsense*和Google Adword
http://www.google.com/ads/
GOOGLE的广告服务，允许你发布自己的广告（Adword），或是在自己的网页上放广告（Adsense）

Google Page Creator *
http://pages.google.com/
让用户可以通过所见即所得的方式制作网页

Google Code – Google’s Developer Network *
http://code.google.com
为开发者提供的服务，可以发布和管理开放源代码项目。其中包括GOOGLE自己提供的开发工具和代码

Google Labs
http://labs.google.com/
还处于在测试阶段的GOOGLE产品

Google工具栏 *
http://toolbar.google.com
安装在浏览器上的工具条

Google桌面 *
http://desktop.google.com/
GOOGLE开发的软件，可以给电脑里所有内容建立索引（可以包括删除过的文件），用户可以用关键词快速搜索到自己想找的东西，还提供了很多桌面小工具

Google Talk *
http://www.google.com/talk/
GOOGLE开发的即时聊天工具

Picasa *
http://picasa.google.com/
GOOGLE提供的图片管理工具，可以方便的查找、编辑图片

SketchUp *
http://sketchup.google.com/
GOOGLE提供的3D绘图软件

Google Pack
http://pack.google.com
GOOGLE提供的免费软件包，包括很多实用的工具

Google Web Accelerator
http://webaccelerator.google.com/
GOOGLE提供的代理软件，可以提高网络浏览速度

Google Mobile
http://www.google.com/mobile/
GOOGLE的为移动设备提供的服务

以上应该包括了大部分GOOGLE的服务……当然具体的功能没办法三言两语说清楚……

GOOGLE的理念和公司概况：
http://www.google.com/intl/zh-CN/corporate/index.html

GOOGLE的价值观：
http://www.google.com/intl/zh-CN/corporate/tenthings.html

《GOOGLE的中国问题》来自纽约时报
http://chn.blogbeta.com/134.html

这是国内最优秀的GOOGLE专题网站：
旧地址：
http://www.kenwong.cn/
新地址：
http://www.gseeker.com/

写完之后的感想是，想要用简短的文字介绍这些GOOGLE服务的功能和特点，根本是不可能的事情，比当初写D&D法术摘要要困难多了……

顺便说一下，本文最上面的图列举了2084年GOOGLE的服务……

使用Tor其实是很容易的事哑

Dexter.Yy — Wed, 04 Oct 2006 01:43:09 +0000

最近NT论坛上又有人询问上维基的方法，仍然有人推荐https加密地址，也仍然有人推荐torpark，而tor仍然无人问津，莫非这东西真的很难用？

大概很多人已经注意到了这点，最近网上突然出现了很多新的tor教程，什么“Tor代理全套解决方案”、“Firefox＋Tor必备教程”……

这个叫“边栏”

经常搜索英文D20资料的人一定都很熟悉geocities.com这个网址，实际上它以前是全世界最大的免费网页空间提供商，94年创建，保存了很多旧资料，当时它的管理方式也很有趣，按主题、兴趣来分类，设立了几十个Neighborhood，每个Neighborhood都用真实地名来称呼，比如关于电脑的网页都在“SiliconValley”(硅谷)里；与娱乐有关的网页都在“Hollywood”(好莱坞)里……这个网站后来被Yahoo!收购（在成为社会型web2.0网站收购狂之前，Yahoo!已经表现出这方面嗜好了），现在的名字是“雅虎地球村”，网址也变成了Yahoo!的二级域名，已经完全没有当年的特色了……而那些以www.geocities.com开头的网址都是过去的旧网页……不知道为什么，这个域名被GFW了，跟wiki一样需要用Tor才能方便的访问

内容非常“傻瓜”，大概小学生都能看懂（这大概也不是好事，有很多东西，当它们走向大众化的时候，也就离末路不远了），里面无一例外的都推荐了Vidalia + Tor + Privoxy + Torbutton…

我觉得这并不是最好的搭配，比如平时上网经常会在google里搜索到wiki或geocities的页面（如果你在找英文资料），如果当时不能直接点这些链接，每次都要另外去打开torpark，或是启动Vidalia和Privoxy再激活，这就太麻烦了。当然，也不可能把Torpark作为主浏览器(访问不需要代理的页面时速度太慢，也缺乏Firefox的其他功能)

其实事情已经很简单了，现在有了很多新工具，Tor的使用方法比以前要简单多了

只需要做三件事：

装一个Vidalia套件。其中包括Tor和Privoxy，Vidalia是Tor的图形化管理界面，但你安装之后不需要改它的设置，用默认的9050端口。Tor获得的是sock代理，所以需要Privoxy把它转成网页用的代理，但如果你用Firefox的话其实并不需要装这个东西。

Vidalia套件的下载页面（请点击Stable Bundles的Windows版本，10月3日出了最新版）

对Firefox用户来说，以后只需要保证Vidalia在系统托盘里处于启动状态，就OK了
装一个Firefox扩展：FoxyProxy，这是Firefox里最强的代理管理工具，它本身自带有Tor设置向导，第一次使用时只要按它的提示操作就可以了（记得选择不使用Privoxy）
中文版下载地址
设置FoxyProxy，给那些必须用Tor才能访问的网址添加模版。在选项——代理服务器——“使用TOR的代理服务器”上双击，添加新模版，不懂正则的话也可以用最简单的通配符
比如维基就写：*.wikipedia.org/*
BBC中文网：*.bbc.co.uk/chinese/*

设置好之后重启Firefox就行了，以后上网时遇到这些网址会自动使用Tor，而访问其他网站时不受影响

YY in Limbo 混沌海狂想 » 网络

《新版阿尔法城背后的前端MVC实践》的幻灯片和⋯⋯这次没剧本⋯⋯

心中的闹钟和罗盘

Google的大危机——本地app重新流行！浏览器和web已死？

Google I/O大会keynote摘要

VP8开源，免专利费，发布新的web视频格式 WebM

几乎所有浏览器厂商都宣布支持VP8：

Adobe发布HTML5开发工具

Chrome Web Store

Google Wave正式开放，包含一堆API和扩展机制，跟gmail整合

API更新

Google Web Toolkit 和 Google Ap Engine

以国家之名

Mon, Feb 4, 2008 at 5:16 AM

Thu, Feb 14, 2008 at 2:14 AM

Mon, Feb 23, 2009 at 8:36 PM

Wed, Mar 4, 2009 at 1:54 PM

Sat, Dec 12, 2009 at 2:59 PM

Wed, Jan 6, 2010 at 10:45 AM

我觉得做NARUTO TV动画的人应该切腹

[内销转出口]寻找最好的JavaScript面向对象模式和封装结构

Tudou’s JavaScript Guideline — OOP and Module

索引

创建类，继承，混入，实例化

简洁的，支持私有属性，不需要prototype的写法：

传统的、支持继承的、仿Ruby风格的Class写法：

对象克隆工厂的写法：

模块化 Module Pattern

基于 TUI.clone 和 TUI.newModule 的写法

沙盒，模块间的解耦，与外部通信

按需加载模块 On-demand Lazy Load

注册模块

使用模块

总结

TUI.clone

TUI.moduleClass

HTML5, CSS3, ES5…新的web标准和浏览器支持一览

CSS3 Media queries

CSS3 2D Transforms

CSS3 Transitions and CSS Animations

CSS3 Downloadable fonts

附赠：其他CSS3 property的兼容性

HTML5 DOM Storage

HTML5 Offline Application Cache

HTML5 Database Storage

HTML5 Web Workers

HTML5 Geolocation

HTML5 Drag and Drop

HTML5 Audio and Video

HTML5 Canvas

SVG

XMLHttpRequest 2

Access Control

E4X (ECMA-357)

ECMAScript 5 Native JSON

ECMAScript 5 Array Extras

ECMAScript 5 isArray()

ECMAScript 5 Object

ECMAScript 5 Property Descriptor

ECMAScript 5 Getters and Setters

ECMAScript 5 Strict Mode

ECMAScript 5 其他新特性

土豆招聘Javascript工程师的JD，终于谷出来一个

twitter like和传统论坛

每个成功的社区背后都有一个教主——评solidot的浏览器连接数事件

写javascript是否要“预留退路”

iframe和异步的跨域请求，结合土豆网的实例

一、借助script的异步跨域请求

二、利用前沿技术的跨域方法

三、用iframe直接发送跨域请求

四、用iframe直接请求数据的最佳实践

五、用iframe直接请求数据的缺陷

六、用iframe结合ajax

七、总结一下

新项目”YyOPML”——把OPML转换成web界面——大家一起来晒feed订阅列表吧！

游戏类暨非IT类blog读者订阅对比报告

土豆网三周年PARTY

图一，有爱

图二，图像和文字无关联

图三，javascript, lambda, closure和currying