YY in Limbo 混沌海狂想

Google I/O大会keynote摘要

Dexter.Yy — Thu, 20 May 2010 03:10:19 +0800

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企业版

Ip Man 2 和 Iron Man 2

Dexter.Yy — Sat, 15 May 2010 02:40:00 +0800

我的判断力果然无敌。

9点才赶到港汇广场的影院排队买票，下一场的钢铁侠2只剩下第一排的座位，于是我毅然决定连看两场，第一场是叶问2，9点20开始，11点10分结束，第二场是钢铁侠2，11点整开始。

这个选择堪称完美：10点55分，甄子丹第三次倒地在昏迷中看到了雅典娜呃不我是说洪金宝，然后跟天马座VS大熊座那场一样领悟到了敌人的双手就是要害，11点58分开始把对方头部摁在地板上捶打，我立刻收拾东西赶赴下一场，在两个女生中间找到位置之后，钢铁侠2正好开始，叶问的招式已经完全记不起来，眼中只有史塔克的森马西装和全息触控电脑……

两部2电影的直接比较

我离开叶问2放映厅的过程非常顺畅，座位和走道之间没有一只挡路的脚（我坐在正中间的位置），而钢铁侠2虽然是最后一场，放映厅依然已经坐满。

我对叶问的情结

看完叶问1之后的几个月里，我翻遍了youtube上所有Ip Man的打斗片段以及洋大人们天真的评语和严肃的争论——常见的观点包括：”awesome!!!”，“机关枪punch太cooooooooool了！”，“我要成为最后站立的那个Black Belt！”，“你什么都不懂，这些体术大师的动作快的超出你想象”，“ip man是bruce lee的shifu喔！”，“最好的kung fu影片！”……

PS：看过这篇文章才发现叶问2就是我一直搁在硬盘深处没时间看的洛奇4……

回家路上脑海中重放次数最多的段落

1，应景的东西：史塔克世界博览会，史塔克迷你对撞机。

2，托尼用队长的盾牌垫桌子。

3，史塔克电脑支持的3D手势/体感操作，必将启发jobs在未来若干年推出让微软Natal显得老土过时的全息投影设备和革命性人机界面……

4，Hammer先生在keynote开场时跳的那段舞步很惊艳！

5，credits之后出现的雷神之锤没多大看头，不过等待过程中听了三首soundtrack，发现虽然整体来说这次John Debney创作的音乐没第一部里Ramin Djawadi的作品好听（飞行过程中那段Driving With The Top Down太赞了～），但是最后那首还凑合 XD

6，Scarlett姐姐太酷了！我只记得她的招式，不记得甄子丹的……

GrassMudMonkey: 浏览器里的草泥马程序解释器

Dexter.Yy — Sun, 21 Mar 2010 12:38:05 +0800

一款具有划时代意义的产品隆重面世！来自中国民营企业土豆网的高级资深前端总工程师瀚主程序员瀚首席前端架构师德克斯特同志（Fellow Dexter the Advanced Senior Principal Front-end Engineer & Chief Programmer & Lead Architect）胸怀大志，以民族振兴和国家富强为己任，充分发扬自力更生自主创新的精神，在没看过龙书没读完SCIP的简陋条件下，敢打敢拼，艰苦朴素，不吃饭不喝水不晒衣服，终于研发出了可以在浏览器中运行草泥马程序的纯JavaScript实现的草泥马引擎GrassMudMonkey，这标志着中国自主知识产权的编程语言——草泥马语（GrassMudHorse Programming Language）——在核心技术上又取得了重大突破，打破了谷歌，魔斯拉等西方国家企业在浏览器内嵌脚本技术上的垄断，为三网融合瀚大中华局域网的发展创造了良好的技术条件，回首往昔，展望未来，完全基于汉字的编程方式的普及必将推动民族凝聚，促进和谐，有效抵制西方文化入侵乃至外星使徒入侵。

草泥马语是一种轻量的，简洁的，紧凑的，图灵完备的，基于堆栈的语言，与美国瀚北欧企业开发的JägerMonkey，Nitro，V8，Carakan等浏览器内嵌引擎支持的JavaScript语言相比，草泥马语仅使用“草”，“泥”，“马”三个字符来完成一切任务，其语言设计的先进性和前瞻性，不仅被全球开发社区争相学习借鉴，应用到CPU和单片机的指令设计中，甚至还已经出现了相似度高达97%的山寨项目

学习草泥马语的最快方式是阅读官方项目组发布的草泥马语言规范及其英文翻译版

GrassMudMonkey利用JavaScript来实现词法分析和运行时，完整源代码：http://github.com/dexteryy/GrassMudMonkey/blob/master/grassmudmonkey.js

效果演示 / 在线的集成开发环境（提供控制台）：

默认示例里的程序通过循环输出1到10的整数

[单独打开]

注意事项1: 由于美学智慧上的分歧，GrassMudMonkey跟官方的JAVA版本有细微区别：不支持“河蟹”。

注意事项2：仅仅针对一两段程序做了基准测试，涵盖了大部分指令，但不排除有实现不一致的地方。

注释事项3：输入接口懒得写了，全部返回默认值，whitespace网站上的一些示例程序会因此无法运行。

刘谦手穿桌子魔术完全揭秘

Dexter.Yy — Mon, 15 Feb 2010 22:24:44 +0800

先声明，如果满足好奇心和启发智慧给你带来的快乐，不能超过魔术的惊奇效果带来的快乐，请不要继续看此文～

看了CCAV的春晚重播，最后那个手穿桌子的魔术我已经完全弄懂了～

桌子上那四只白瓷茶杯是第一个关键要素，它们很可疑：1，圆桌周围那些观众根本不会喝茶，为什么要放茶杯呢？2，为什么要用老式的白瓷杯，而不用刘谦面前那种透明玻璃杯？（装点果汁还可以做广告）。因为它们其实是障眼法的组成部分，刘谦左边（观众的右边）的杯子底下，其实掩盖着一个“洞”（节目开始的时候，那个黑桌布跟它放在一起）

桌子本身是第二个关键要素，这张桌子是很少见的圆环形，让观众围在周围其实只是托词，真实目的是让桌子玻璃可以隐蔽的移动（圆环的自转），把右边的那个洞移到刘谦面前。这里有一个难点：移动玻璃的时候也会拖动桌上放的其他东西（比如杯子）。所以他们做了双层的玻璃，刘谦面前那一段圆环只有一层玻璃，而且是下层的，洞就在这一层，旋转的也是这一层，而其他人面前有两层，杯子之类的东西都放在上层。

刘谦让汇源老板拿三只硬币放在桌下，是第三个关键要素，重看这一段节目，在汇源老板把手伸到桌下的时候，会发现镜头拉近来了一个特写，在镜头拉近之前，刘谦面前的玻璃在表演过几个节目之后其实已经很脏了，可以明显的看到有一些污渍的反光跟周围的反光不同，而在“没洗手”的那个特写镜头之后，会看到那些污渍已经没了！因为正是在这个时候，玻璃被提前旋转了。而且旋转玻璃的人就是刘谦正后方那个猥琐男人……

从镜头移回来开始，刘谦的左手就一直遮掩着桌上一个位置，接下来他开始跟董卿扯淡，用布擦桌子，把观众的视线吸引到他擦桌子的右手，而左手始终保持在那个位置没动过，因为左手下面正是刚才移过来的那个洞，然后就开始表演手穿玻璃了，注意他的左手是直接平移到中间的，实际上是把洞移到了中间

总结：

永远不要相信现场观众不是托。
那些看似无意的动作，摆设和插科打诨其实很可能是关键。
魔术师总是试图操纵你的眼睛，只要不看魔术师想让你看的那个方向，你就有可能识破障眼法～

以国家之名

Dexter.Yy — Sun, 10 Jan 2010 23:51:45 +0800

从我的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

我爱灾难片！讨论一下《2012》的细节和背景

Dexter.Yy — Sat, 14 Nov 2009 08:05:11 +0800

《2012》最大的缺点还是世界毁灭的太快了，悬念做的不够，我更喜欢cloverfield那种调调，此外视觉效果还是有点单调，这年头只靠一个卷起肯尼迪航母的海啸背景已经唬不住人了，观众眼里尽是绿幕。不过要求太高也是不厚道的，总体来说，《2012》只要把那些传统的美式英雄主义和小范围人道主义的部分剪掉换成特效就相当完美叻！

先说几个细节：
　　
1，好莱坞影片里常见的mac笔记本，这次完全没有看到，VAIO则至少清晰的出现了5次，主角之一的科学家和白宫官员都用sony笔记本，此外加长林肯在主角逃出加州过程中的表现很明显的说明福特也是出过钱的。
　　
2，黄石公园的超级火山喷发让华盛顿特区进入核冬天，我感觉这个不太靠谱，要吸收大部分太阳辐射的能量，浮尘的直径至少要能小于远红外的波长，也就是13微米，核爆可以做到，而火山灰貌似达不到这个程度。
　　
3，通过各国领袖在方舟上进行的表决，我们可以发现：3亿人口的美国独占了一艘船，13亿中国人翰1亿多日本人还有可以忽略的俄国人共用另一艘船，5亿人口的EU占了第三艘船——棒子和阿三明显被抛弃了。而非洲由于陆地上升，反而损失相对较小，重新成为人类发源地，这充分说明出来混迟早要还 XD
　　
4，US军方感叹：选中国没错，只有中国能完成这样的工程。其实中国的优势不光是那些继承能吃苦、能战斗、能奉献的优良传统，一切听党指挥的工人兄弟——登上方舟的船票价格是10亿欧元，按照09年的水平，全球只有790多位大爷买得起，就算2012年经济景气了，筹集资金不过万把亿，这点小钱其实单凭我们帝国自己就可以埋单嘛。

然后是背景。

《2012》的背景是玛雅预言，这个预言并非宗教产物，而是由一个非常华丽的历法计算出的，玛雅的历法是世界上最精确的历法之一，比儒略历早600年以上，玛雅人日常使用的历法由一个260天历和一个365天历共同组成，前者称作Tzolkin，以13天为一个单位，称作Trecena，20个Trecena为一年；后者称作Haab，以20天为一个单位，称作Veintena，一年为18个Veintena加上5个Wayeb日，这两套历法结合起来给每天起名字，可以保证18980天（也就是52个Haab年）没有重复，超出那个时候人的平均寿命，由于这套历法只适合计日而不适合计年，玛雅人在记录历史时会使用数列来表示年份，通常包含5位，换算成天的方式是：a*18*20^3 + b*18*20^2 + c*18*20 + d*20 + e，其中最高位叫作Baktun，计数方式是13,1,2,3…,11,12，所以玛雅的创世日记为13.0.0.0.0，按照GMT换算法，下一个13.0.0.0.0就是2012年12月21日。

这里有一个用python写的玛雅历换算工具：http://www.pauahtun.org/Calendar/tools.html ，比如我的生日1984年6月14日，在玛雅历里是12.18.11.1.1（妈的怎么这么多1呀！难道是在预言我的宿命就是单身么！）……在Tzolkin历里是第一个月：Imix （我靠好强大，Tzolkin的260天貌似就是指一个分娩周期），在Haab历里是第4个月：Sotz （哎可惜，要是生在那个5天的Wayeb月就能获得优越感了……）

这个玛雅历中的特殊年份在西方人眼里可能还有两种意义，一个是著名的占星术士诺查丹玛斯（Nostradamus），他预言1999年是世界末日，而据说他那些已经验证过的其他预言，最大误差不超过13年，正好是2012。另一个原因是基督教，众人皆知旧约的创世纪（Genesis）里有诺亚方舟的故事，但这里面有一个很诡异的地方，根据我常用的KJV版（King James钦定版），Genesis 7:4的原文是：

For yet seven days, and I will cause it to rain upon the earth forty days and forty nights;

以God的第一人称提到了“七天”。然后问题出在《彼得后书》（Second Epistle of Peter），3:5到3:7的原文：

For this they willingly are ignorant of, that by the word of God the heavens were of old, and the earth standing out of the water and in the water

Whereby the world that then was, being overflowed with water, perished

But the heavens and the earth, which are now, by the same word are kept in store, reserved unto fire against the day of judgment and perdition of ungodly men.

大致上就是说世界是按照神的指令，从水中诞生，神要毁灭世界时，就会让水重新覆盖世界，目前天和地还根据当初的指令继续存在，直到开始审判和毁灭那些不信神的人的日子，会“reserved unto fire”，沉沦到火焰之中

很明显是一段警告，而下一段3:8的原文是：

But, beloved, be not ignorant of this one thing, that one day is with the Lord as a thousand years, and a thousand years as one day.

不要忘记一件事：主视一日如千年，视千年如一日。

我们都知道神在第7天不愿意加班，那么第6天就该开始毁灭世界了罢，~~否则项目就要延期了~~，在此之前有5天也就是5000年时间，而很多历史研究表明诺亚那次的大洪水发生在公元前3000年左右……

其实说到神的创世和对人类的惩罚，我很难不联想到最近玩的Dragon Age: Origins，这个游戏的历史设定很有趣：只有一个创世神，称作Maker，他最先创造的世界叫fade，居民叫spirit，这个世界的形态不定，受意识影响，居民也很强大，却没有想象力和创造力，Maker不满意，又创造了另一个物质世界，它没有fade那么“美好”，有固定的形态和法则，却可以在其居民（人类精灵矮人）的努力下不断发展。物质世界和fade世界中间有veil阻挡，不能随意穿越，但是物质世界的生物可以通过做梦的形式，让自己的精神进入fade，Maker还在fade里建造了自己的住所黄金之城（the Golden City），也就是天堂，物质世界里信神的生物死后可以在这里跟主子一起享福。fade里的spirit有善良的也有邪恶，邪恶的就是恶魔，他们嫉妒物质世界的生物，诱惑那些做梦的人，于是人类学会了魔法，建立了一统天下的魔法帝国Tevinter，帝国的法师（Magister）越来越自傲，欲望越来越大，终于有一天他们把手伸向天堂，企图以肉身进入黄金之城，这个行为导致神离开了世界，抛弃了自己的造物，黄金之城堕落为黑城（the Black City），不再有天堂接纳死去的凡人，他们的灵魂只能永远在fade游荡。而那些法师被诅咒转变成了怪物，当他们回到物质世界时，差点毁灭了帝国，历史上称作第一次枯潮（Darkspawn）

The mages had sought to usurp Heaven, but instead they destroyed it.

相比起遮遮掩掩模棱两可的基督教文献，奇幻游戏的故事要丰满的多，寓意也更明显。所以我觉得很适合作为一篇灾难片评论的结尾。

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

Dexter.Yy — Sun, 20 Sep 2009 23:45:48 +0800

虽然早在火影沦为四大民工漫之首的若干年前，我就已经没怎么追了（漫画偶尔看看），但是早期几个章节的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 13:02:22 +0800

好久不见，这次发的不是笔记啦，是我在公司内部的前端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 08:40:26 +0800

好罢这篇本来是我私下做的笔记，我特别喜欢在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

继续补充vim配置技巧——上次的vimrc还不够强力

Dexter.Yy — Sun, 07 Jun 2009 02:52:27 +0800

首先要补充一些MacVim的配置，其实写上篇文章的时候我还在用已经过时的基于Carbon界面的vim for osx，更接近传统的unix版本，但是好久没更新，只支持vim6.0，soureforge上有一个7.2的版本，bug诸多，其中的乱码和字体抗锯齿的问题让我完全无法忍。而MacVim是基于Cocoa开发，支持到7.2，还含有很多讨好mac用户的设计，比如对标签的良好支持，华丽的界面（背景颜色支持透明度，字体抗锯齿更漂亮，几乎跟TextMate的效果没区别）……非常后悔以前没仔细试用这个版本！目前为止只发现行高linespace的设置会无法生效，不过这个bug在最新的快照版里已经修正了。

插播一个道歉：由于spam太多，我前段时间在wordpress黑名单里加了一个很苛刻的条件，把所有评论都挡到待审核列表里去了，好像还直接删了一部分……咳……

我在.vimrc里增加了一些专门针对MacVim的设置：

if has("gui_macvim")
"取消默认的快捷键
let macvim_skip_cmd_opt_movement = 1
let macvim_hig_shift_movement = 1
"设置背景透明度
set transparency=2
"隐藏工具条
set guioptions-=T "egmrt
"绑定自己需要的cmd快捷键
macm File.Save key=<D-s>
macm File.Save\ As\.\.\. key=<D-S>
macm Edit.Undo key=<D-z> action=undo:
macm Edit.Redo key=<D-Z> action=redo:
macm Edit.Cut key=<D-x> action=cut:
macm Edit.Copy key=<D-c> action=copy:
macm Edit.Paste key=<D-v> action=paste:
macm Edit.Select\ All key=<D-A> action=selectAll:
endif

之所以要取消MacVim默认的一些快捷键是因为它们都占用了cmd苹果键，而我习惯用这个键来替代ctrl在vim里的作用（在mbp的键盘上就算我想用ctrl也不方便……），不过其中有几个快捷键是非常非常有价值的，比如保存（省去了输入:w的麻烦），全选（否则要摁六下：ggVG），复制粘贴剪切（否则为了使用剪贴板，比如猛摁这种玩意：”+y，还不能在插入模式下使用），幸好它们的快捷键都不跟vim其他操作冲突，所以自己设置。为了完全删除MacVim默认的cmd快捷键，还需要打开app中自带的vimrc文件（可以这样编辑：:tabe $VIM/vimrc ），删除末尾那些macm开头的代码。

MacVim的安装包里包含一个mvim，是像gvim一样的脚本，用来在命令行中调用GUI版的vim，但是mvim默认会在新窗口打开文件，我相信多数人都喜欢在当前窗口的新标签页里打开罢，需要在命令后加–remote-tab参数，不过这篇文章里给出了直接修改脚本的方法，把mvim底部从# Last step: fire up vim开始的部分删掉，改成：

tabs=true
# Last step: fire up vim.
if [ "$gui" ]; then
if $tabs && [[ `$binary --serverlist` = "VIM" ]]; then
exec "$binary" -g $opts --remote-tab-silent ${1:+"$@"}
else
exec "$binary" -g $opts ${1:+"$@"}
fi
else
exec "$binary" $opts ${1:+"$@"}
fi

P.S. 上面给出的那个blog不能直接打开，也许是需要翻墙，不过我顺便介绍一个很方便的利用google网页快照的方法～用谷歌翻译打开这个网址 XD

刚安装好的MacVim打开gb编码的文件仍然把中文显示成乱码（好无奈，GBK编码是土豆网的历史遗留问题，页面里的script标签也几乎都没加charset=”utf-8″，所以大部分js文件都只好用gb18030的编码，textmate正是因为不支持gb编码才被我降为二等公民的，其实我有正版cdkey……），我在.vimrc里加上了encoding似乎能解决这个问题：

set encoding=utf-8
set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936

解释一下：对于编码，vim里有三个设置选项，encoding是设置vim以何种编码显示文件（缩写enc），fileencoding是当前文件实际的编码（缩写fenc），而fileencodings指示vim如何解码（缩写fencs），因此vim在打开一个文件时实际上会先根据fileencodings里的列表反复测试，直到成功解码，转换成encoding指定的编码，然后正常显示，转码的过程是用iconv实现的（所以windows上用vim还要配置iconv的dll路径和参数……麻烦），保存的时候会根据fileencoding来保存，跟是否显示为乱码没有关系。

所以如果想转换一个文件的编码，比如从utf-8转换到gb18030，可以在编辑器中直接输入两个命令：

:set enc=gb18030
:set fenc=gb18030

然后保存就ok了～其实如果不用继续编辑的话，第一行都可以省去，因为它的目的只是让编辑器用gb18030来显示当前文件，避免乱码，但是并不影响文件保存时的编码和正确性。

以前我都是依赖mac上的Coda来转换编码（确实最方便）……vim又成功了抢了它的饭碗……

MacVim还有一个问题是会显示一个很宅很不人性的标签栏名称，比如我编辑/usr/local/bin/mvim这个文件，标签栏上写的是“/u/l/b/mvim”，如果目录结构再深一点就看不到真正的文件名了，在.vimrc里加入下面这行可以让标签栏只显示文件名：

set guitablabel=%t

上次的.vimrc里还增加了两处很重要的设置，主要是受这位老爷写的《vim使用进阶》的启发，首先是让.vimrc每次编辑保存后自动生效，避免重启：

autocmd! bufwritepost .vimrc source ~/.vimrc

autocmd实际上是vim脚本的事件机制，表示在某个事件触发后自动执行的命令

接下来要实现的是保存和恢复编辑器的当前状态，类似Eclipse的Workspace，不过vim的session更强大，几乎可以还原一切状态……Easwy老爷介绍的命令比较繁琐，缺乏“一键恢复”的快感……身为一个习惯使用“高级语言”的程序员，在这种时候就抑制不住继续封装和提高抽象层的欲望……所以自定义了以下两个命令：

function! GetMySession(spath, ssname)
if a:ssname == 0
let a:sname = ""
else
let a:sname = "-".a:ssname
endif
execute "source $".a:spath."/session".a:sname.".vim"
execute "rviminfo $".a:spath."/session".a:sname.".viminfo"
execute "echo \"Load Success\: $".a:spath."/session".a:sname.".vim\""
endfunction
function! SetMySession(spath, ssname)
if a:ssname == 0
let a:sname = ""
else
let a:sname = "-".a:ssname
endif
execute "cd $".a:spath
execute "mksession! $".a:spath."/session".a:sname.".vim"
execute "wviminfo! $".a:spath."/session".a:sname.".viminfo"
execute "echo \"Save Success\: $".a:spath."/session".a:sname.".vim\""
endfunction
" load session from certain path
command! -nargs=+ LOAD call GetMySession(<f-args>)
" load session from certain path
command! -nargs=+ SAVE call SetMySession(<f-args>)

为了用最简单的方法选择路径，使用时需要先在终端的初始化脚本（比如~/.bashrc，在我的OSX系统里通常用~/.profile）里添加相应的环境变量，比如我常用的三个路径：

export TUISVN="/Users/dexteryy/Sites/Tudou/ui/ui/"
export TUIDEV="/Volumes/ui.tudou.com/"
export MYWEB="/Users/dexteryy/Sites/www/"

当我在MYWEB的路径下做项目的时候，如果需要保存当前状态，只要输入:SAVE MYWEB 0就行了，这里的0是因为考虑到在同一个工作目录里可能需要使用到不同文件组合的工作区，提供的一个简单的版本号，这段命令执行后会在/Users/dexteryy/Sites/www/目录里生成两个文件： session.viminfo和session.vim，如果版本号是大于0的整数，比如2，文件名会是session2.viminfo和session2.viminfo

需要恢复的时候只要输入命令：:LOAD MYWEB 0 就行叻～

喔对了，为了能在VIM命令里使用bash中定义的变量，你需要在MacVim的preferences里把“Launch Vim processes in a login shell”勾选，熟悉Mac应用的同学应该都能想到这个设置会记录在/Library/Preferences/或~/Library/Preferences/里的某个配置文件里，MacVim对应的是~/Library/Preferences/org.vim.MacVim.plist，所以你也可以直接用这个命令在终端里修改：

defaults write org.vim.MacVim MMLoginShell 1

如果使用的是Gvim或windows版本的vim，也可以直接把路径变量写在.vimrc里，比如：

let g:TUISVN="/Users/dexteryy/Sites/Tudou/ui/ui/"

然后修改上面的两个函数GetMySession和SetMySession，把a:spath前面的$都删掉…………因为VIM里的变量只能由大写字母开头……

完整的.vimrc在这里…………呃好罢我发现google code真是备份和维护配置脚本的好地方XD

最后继续讨论一下插件～

首先是Taglist，这是一个能让vim具备类似Aptana的Outline View的功能，还能像JAVA的IDE那样通过类名和方法名直接跳转到相应的源码，它借助了一个叫ctags的工具，可以解析源码生成标签文件（在同一个名录下，叫tags），详细的介绍请参考Easwy老爷的文章，记得务必安装最新版的Exuberant Ctags……我是用MacPorts装的：sudo port install ctags

Exuberant Ctags号称支持34种语言，包括javascript，但是它对javascript的理解非常OUT……比如现在定义JS方法几乎主要依靠匿名函数了，ctags却无法识别这种形式……

已经有人在尝试自己添加匹配规则，我自己也写了一大坨：

--langdef=js
--langmap=js:.js
--regex-js=/[ \t.]([A-Z][A-Z0-9._$]+)[ \t]*=[ \t]*[0-9"'\[\{]/\1/n,constant/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*=[ \t]*\{/\1/o,object/
--regex-js=/['"]*([A-Za-z0-9_$]+)['"]*[ \t]*:[ \t]*\{/\1/o,object/
--regex-js=/([A-Za-z0-9._$]+)\[["']([A-Za-z0-9_$]+)["']\][ \t]*=[ \t]*\{/\1\.\2/o,object/
--regex-js=/([A-Za-z0-9._$]+)\.prototype[ \t.=]/\1/c,class/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*=[ \t]*$function\($/\1/c,class/
--regex-js=/['"]*([A-Za-z0-9_$]+)['"]*:[ \t]*$function\($/\1/c,class/
--regex-js=/var[ \t]*([A-Za-z$][A-Za-z0-9_$()]+)[ \t]*=[ \t]*function[ \t]*\(/\1/f,function/
--regex-js=/function[ \t]+([A-Za-z$][A-Za-z0-9_$]+)[ \t]*$([^)])$/\1/f,function/
--regex-js=/['"]*([A-Za-z$][A-Za-z0-9_$]+)['"]*:[ \t]*function[ \t]*\(/\1/m,method/
--regex-js=/([A-Za-z$][A-Za-z0-9_$]+)[ \t]*=[ \t]*function[ \t]*\(/\1/m,method/
--regex-js=/([A-Za-z0-9_$]+)\[["']([A-Za-z0-9_$]+)["']\][ \t]*=[ \t]*function[ \t]*\(/\2/m,method/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*=[ \t]*\[/\1/a,array/
--regex-js=/['"]*([A-Za-z$][A-Za-z0-9_$]+)['"]*:[ \t]*\[/\1/a,array/
--regex-js=/([A-Za-z0-9._$]+)\[["']([A-Za-z0-9_$]+)["']\][ \t]*=[ \t]*\[/\1\.\2/a,array/

匹配以下语法形式，其中粗体部分是标签名称：

var MY_CONSTANT = 250; //constant
ns.myobject = {}; //object
myobject: {}, //object
ns["myobject"] = {}; //object, 生成的tag是”ns.myobject“
ns.myclass.prototype.myfunc = function(){}; //class
ns.myclass = (function(){return {};}); //class
ns["myclass"] = (function(){return {};}); //class, 生成的tag是”ns.myclass“
var myfunc = function(){}; //function, 必须有var, _开头的忽略
function myfunc(){}; //function
myfunc: function(){} //method
ns.myfunc = function(){}; //method
ns["myfunc"] = function(){}; //method, 生成的tag是”ns.myfunc“
ns.myarray = []; //array
myarray: [], //array
ns["myarray"] = []; //array, 生成的tag是”ns.myarray“

使用方法是建一个~/.ctags文件，把上面那段代码放进去就行。为了在taglist窗口里显示类别（比如class和method），还需要在.vimrc里设置一个变量：

let g:tlist_javascript_settings = 'javascript;f:function;c:class;o:object;m:method;s:string;a:array;n:constant'

另一个要强烈推荐的插件是NERD Commenter，从名字能看出跟上次推荐的NERD Tree是同一个强者写的，功能是针对各种文件类型快速的添加和删除注释，除了单行，多行，还提供“sexily”的注释……比如js里添加文档内容时常用的那种（如果首行写成/**，在aptana里会认作script doc格式）

不过这个插件默认使用了大量,c开头的快捷键……而,在vim里一般都用作自定义的键（的默认值是\，很显然小拇指没食指方便……），我没有找到相关的设置选项……所以直接修改了插件脚本……

唔唔就先写到这里罢，虽然vim无论日常使用还是hack都很爽，但是写起来还是挺枯燥的，头有点晕555……