随网之舞web2.0 & so on

《高性能网站建设进阶指南》译者序和样章

秦歌 — Wed, 21 Apr 2010 15:30:25 +0000

经过大半年的努力和等待，口碑网前端团队5位成员共同翻译的《高性能网站建设进阶指南（Even Faster Web Sites）：Web开发者性能优化最佳实践》终于面市了。翻译的过程本身就是学习的过程，又经过了在口碑网的实践，我们深刻地感受到本书内容不仅和每个Web开发者的日常工作结合得非常紧密，而且对于每个开发者都有着重大的指导意义。在此，我们诚恳地向所有的Web开发者推荐本书，欢迎大家就本书内容进行交流、批评和指正。

本书的主要作者Steve Souders是《高性能网站建设指南（high Performance Web Sites）：前端工程师技能精髓》的作者，Web性能优化领域的权威，前Yahoo!首席性能工程师，现在Google负责Web性能和开源组织。他是Firebug的性能分析扩展YSlow的创建者，也是O’Reilly Web性能与运作会议Velocity的联合主席。通过他的个人网站http://stevesouders.com/能了解全球最新的Web性能动态和技术发展。

译者序

“信息网络的扩展正在为我们的星球建立一个新的神经系统”，而Web正是我们与这个系统对接的最重要平台。现在，信息与用户量在Web平台上呈爆炸式增长，用户与Web界面的交互越来越复杂，会话时间也越来越长，速度已经成为Web产品使用体验好坏和市场成败的最重要指标之一。在Google，网页呈现速度慢500毫秒将丢失20%的流量；在Yahoo!，慢400毫秒将丢失5%~9%的流量；在Amazon，慢100毫秒将丢失1%的交易量……反之，网站速度越快，越有利于用户汇聚、流量增长及交易量的上升。所以作为Web开发者，我们不会满足现状，要让网页变得更快更好。

本书作者Steve Souders在他上一部震惊业界的大作《高性能网站建设指南》中告诉我们，Web的80%~90%的性能由前端决定，并为提升Web性能设置了14条规则。本书中，Souders与8位Web开发界顶级大牛（Dion Almaer、Douglas Crockford、Ben Galbraith、Tony Gentilcore、Dylan Schiemann、Stoyan Stefanov、Nicole Sullivan 和 Nicholas C. Zakas）通力合作，一起向我们传授让网站速度更快的思想和原则，以及相应的技术和工具。它是上一部作品的进阶之作，如果说上一部作品使Web开发者有机会实现高性能的网站以满足当前用户的需要，那么本书将帮助我们立足现在更着眼于未来，以实现超出用户期望的速度体验。

Web的高速发展让开发者应接不暇，开发者应该把智慧、时间和精力放在用户最需要的地方，因此在做性能优化时不能盲目行动、捉小放大，需要事前有效评估找到重点，事后建立监控和保证机制，把有规律的、重复的、精确的工作交给机器去做。9位大牛把众多的思想、原则、方法和自动化工具融汇到这本书中，让Web开发者有机会站在巨人的肩上，借助于全球业界的最新成果，用自己的智慧、行动和坚持开发出令人赞叹的Web产品来。

如果你稍加留心就会发现，这两本书副标题的变化很有趣，第一本书的副标题是“前端工程师技能精髓”，而本书的是“Web开发者性能优化最佳实践”。Web性能优化不只是前端工程师的工作，而是需要所有Web开发者协作完成。在实际工作中，如果没有人关注Web性能，那么，不管我们作为Web开发者的哪种角色都应该挺身而出勇于担当，不仅要担当建设高速网站的责任，还要担当Web性能优化的布道义务，团结一切可以团结的力量。这是我们所有Web开发者的使命。在口碑网我们已经开始这样做了，前端工程师与对此有兴趣的后端工程师和产品经理一起组建了一个虚拟的Web性能优化团队，在完成工作之余，一起学习、研究、分享、布道和推动性能优化项目。虽然刚刚开始，但是已经有了一些令人欣喜的成果，这就是团结的力量。

本书由口碑网前端团队的鄢学鹍（三七）、郑旭东（正旭）、刘志涛（钨龙）、崔明达（灵佑）和姜凡（展炎）协作译成。翻译的过程也是自我学习、应用实践和总结提升的过程，我们深感本书的博大精深，同时也感到自己知识面的浅薄狭窄。我们把学习和实践本书思想及方法过程中收获的心得和相关资料作为译注补充在译文中，希望会对大家有所帮助。我们深信学习本书正是学习大牛思想、提升专业技能的最好途径之一，把它的精华最精确地传递给每位读者是我们现在的想法和最大动力。

感谢博文视点引进如此高品质的图书，这让中国的Web开发者可以从中受益，进而为更多用户提供更快速的Web使用体验。除了封面上列出的译者外，还有很多人为翻译这本书倾注了智慧和汗水。编辑徐定翔老师，包容了我们交稿的一次次延期，正是由于他的信任、帮助、支持和耐心指导才让我们能有这样一次边学习、边成长、边共享的宝贵经历。编辑白爱萍老师负责译稿的统稿编加，她的专业、仔细和辛勤工作保证了我们阅读本书时的良好体验。可爱的同事林枝萍（般若）、高嘉峻（伯灵）、全鑫（泉心）、闻明（阿苏）、沙峰（善朋）、曾焕数（合沙）、王维锋（元天）、严斌锋（邦彦）、何莹莹（冰浠）、周炼（灵落）等，给了我们热情的建议和细心的校对，有效地提升了本书的品质。要特别感谢淘宝网前端团队的赵泽欣（小马）、王保平（玉伯）和郑叶飞（圆心）3位同学，在百忙之中帮我们校对重要章节，解决疑难问题。如果没有家人和同伴的支持，是很难做好翻译的，在此向所有关心和支持我们的朋友表示衷心的感谢！

口碑网前端团队
三七正旭钨龙灵佑展炎
2010.02.25 于杭州

样章等相关信息

样章：
1. 第1章，理解Ajax性能，Douglas Crockford
2. 第3章，拆分初始化负载，Steve Souders
任何交流、建议、批评和指正请写信给kavenyan@gmail.com
购买《高性能网站建设进阶指南》
《高性能网站建设进阶指南》目录表

豆瓣上的《高性能网站建设进阶指南》
封面：

如何做好一份前端工程师的简历？

秦歌 — Mon, 16 Feb 2009 16:25:31 +0000

春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。

一、你是前端工程师

虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。

毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。

二、内容为王

个人信息
1. 姓名 _（必需）
2. 性别 _（必需）
3. 年龄 _（必需）
4. 联系电话 _（必需）
5. 学历及学位 _（必需）
6. 薪资期望
7. 个人照片
8. 邮箱
9. Blog
10. 外语能力
职业技能
1. HTML、CSS、JavaScript/ActionScript等
2. Web标准、可用性、可访问性
3. 一门非前端脚本的语言(Java、PHP、Python、C#等)
4. 任何有利于前端开发的技能和兴趣
职业和教育经历
1. 起始时间、单位名、职位（学位）和收获
2. 简而精
3. 按照时间倒序排列
代表作品
1. 能体现自己现在前端技能或者重要经历的作品
2. 简而精，且可以简要附上自己在这个作品中的收获
3. 和别人合作的作品要注明自己具体完成的内容
4. 在线链接要测试以保证可用，如果有其他人的变更应注明，较大变更就无需提交了
5. 提供附件要注明与之对应的文件名
6. 按完成时间倒序排列

依据实际情况，代表作品也完全可以直接融入到职业技能和经历中体现。当然内容不仅仅是这些，可以任意增加能体现前端工程师职业素质的信息。

三、Web是平台

毫无疑问，Web才是真正的平台，当这个平台的后端逐步被云所统治时（Amazon的很多服务和Google App Engine都初见端倪），那么云端的用户代理（比如浏览器）就是前端工程师的战场。前端工程师是可以长期从事且有前途的职业。

简历作为前端工程师迈向新征途而提交的第一份作品，应该毫不迟疑的用它来体现其专业技能和职业精神，所以Web页面是前端工程师简历的最好载体。它能体现前端工程师诸多专业素质：

知道为什么选择的DTD是下面中的一个而不是其他，这是对HTML标准的理解和思考。
针对内容选择合适的HTML标签，合理的id和class命名，尝试使用微格式，这是对语义化的理解和思考。
至少兼容YUI中列出的A-grade浏览器，这是对跨浏览器和CSS Hacks的理解和思考。
虽然Web性能在大访问量下才比较容易凸显，但把尝试把YAHOO性能团队的34条最佳实践应用上，一定会小中见大且受益终生的。
JavaScript的应用
1. 简历的信息结构一般很简单，但是这并不意味着无法使用JavaScript来增强它的交互。找出其JavaScript技能和简历相互结合的地方。
2. 可以尝试使用某种框架（YUI、jQuery、Prototype、Mootools等），很明显框架能提高我们的开发速度，掌握至少一种优秀的框架能增强我们的价值。
3. 可以利用JavaScript做出几个彩蛋在简历里面么？
4. 实现结构、样式和行为的分离。
5. 理解和体现DOM Scripting、预留退路（Graceful Degradation）、渐进增强（Progressive Enhancement ）、无侵入的JavaScript（Unobtrusive Javascript）等思想。空帷翻译的《理解“渐进增强(Progressive Enhancement)”》是篇这方面的好文章。
可访问性，在这上面每一步的深入研究和应用都值得赞赏。
HTML5、CSS3、SVG、Canvas甚至离线技术、安全技术都可以和我们的简历结合起来。列表When can I use…提供了一些新技术在主流浏览器的支持情况。
打印样式，很明显前端简历不仅仅是其主管看，还有HR和大老板看，所以准备打印样式是很重要的，这不仅仅是技能问题，更是一种前端开发的素质。你需要知道，打印样式应该是黑字白底，且尽量少的装饰图片，因为现在的绝大部分办公打印机还是黑白的，且黑色更费墨，所以当你的简历是黑色背景时更应该注意这点。
简单设计，千万不要把你的简历搞一团糟，设计虽然不是前端工程师最重要的技能，但是良好的视觉设计更能体现前端工程师的价值，所以审美其实也是前端工程师的基础素质。如果对视觉设计感到困惑，你可以从看《推荐给大家看的设计书》开始。

四、细节决定体验

标识性的文件名，比如“秦歌的简历”、“秦歌的作品”，而不是“个人简历”、“我的作品”。
发完信后记得检查一下发件箱，确保没有忘记发附件。
简历和众多作品整体打一个包。不要一个大包里面无数个小包。且整个包应该整理过，去掉垃圾，不应该太大。
不要重复发邮件，特别是拒绝以后，还发一个同样的邮件，除非一段时间后你有较大进步。
检查链接有效性，无效链接很伤感情的，可以使用Firefox的插件LinkChecker或Pinger。

实际上，前端工程师的工作成果是直接面向千万用户的，他直接决定了最终的用户体验，所以每个细节都至关重要，就像JavaScript编程一样，只要我们掌握良好的风格要素，我们就能避免很多错误，实际上这个思想贯穿整个前端开发的始终，包括制作简历。

我很喜欢有个人blog的应聘者，因为通过其blog不仅仅可以看出他的前端技能、工作积累、职业素质和分享精神，同时他通过维护blog可以贯穿一个简单开发的始终，从内容、交互、视觉、前端一直到后端维护，而这些角色都是前端在开发过程中的上下游，需要经常协作，这种经历能使前端更高效的沟通和更务实的换位思考。同样，当我推荐前端的简历应该是以Web页面为载体时，也是基于这个想法，并适当的给出一些相关知识以备有兴趣的朋友朝这个方向走下去。虽然我的建议偏向于“HTML+CSS+JavaScript”方向的前端工程师，但实战中肯定有更多能够在简历中体现前端的技能和创意，这本身就是抛砖引玉，这仅仅是一个开始。

简历很重要，但人品、职业精神和专业的前端技能更重要，最重要的是这两者是相辅相成的。虽然很羡慕兄弟团队淘宝UED、支付宝UED和阿里巴巴B2B国际站UED能有创意、时间和精力搞出那么精致的招聘站点，但我更希望我未来的同事用技能、创意、时间和精力整出一个巨牛的前端工程师简历来震住我（kaven.yan@yahoo.com）吧。

Vim、Vimperator和一个小bug

秦歌 — Tue, 29 Jul 2008 15:52:54 +0000

Vim是一个巨牛的编辑器，这是我在经历过Frontpage、Dreamweaver、UltraEdit和Notepad++后的选择，它让我远离让人抓狂的低级的Dreamweaver假死和鼠标给手腕带来的伤痛，剩下的是高效、灵活、强大。了解更多请看《普通人的编辑利器——Vim》。Vim支持多个平台，有兴趣可以去VIM的官方站下载。这里有一些相关资源或许能用到：

Vimperator是Firefox上的扩展，使Firefox使用起来像Vim。习惯了Vim的命令，这个扩展使用起来还是蛮爽的。不过发现了一个小bug，影响的不是本身的使用，而是对CSS和JavaScript的呈现，在Firefox3+Vimperator1.1下可以看到这个bug演示。

ps，今天被这个小bug整的好惨，以后一定要记住在有插件的情况下测试网页首先要排除插件是否产生了影响。

语法图

秦歌 — Wed, 28 May 2008 15:45:13 +0000

语法图（Syntax diagrams ）又叫铁路图（railroad diagrams）是描述形式文法的一种方式。它是巴科斯范式或扩展巴科斯范式的图形化表示。最早使用语法图的书包括Niklaus Wirth写的“Pascal User Manual”（语法图开始于47页）和the Burroughs CANDE manual。在编译领域，像BNF和它的变体这样的文字式表示法都是首选的。BNF能很好的被编译器作者和编译器理解，但是不能很好的被这些语言的大部分用户理解。铁路图能更容易被大多数人理解。数据交换格式JSON之所以流行的部分原因就是它用铁路图来表示。

准则

一个语法的表示法是由一套语法图组成。每个图定义了一个非终结符。有一个主图通过下面方式定义了这门语言：属于这门语言的每句话都必须在主图上描绘一个路径。

每个图都有一个起始点和一个终点。这个图通过穿过其他的非终结符和终结符描绘了这些两点之间的可能路径。终结符用圆形区域表示，同时非终结符用方形区域表示。

例子

我们用一个算术表达式作为一个例子。首先我们提供一段简单的BNF语法：

::=  |  "+" 
::=  |  "*" 
::=  |  | "("  ")"
::= "x" | "y" | "z"
::=  |  
::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

这段语法也能在EBNF中被表示：

expression = term , {"+" term};
term = factor , {"*" factor};
factor = constant | variable | "(" , expression , ")";
variable = "x" | "y" | "z";
constant = digit , {digit};
digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";

关于这段语法的一组可能的语法图：

扩展链接

原文：Syntax diagram

巴科斯范式和扩展巴科斯范式

秦歌 — Sat, 17 May 2008 10:17:54 +0000

巴科斯范式

巴科斯范式（也称为巴科斯-瑙尔范式、巴克斯-诺尔范式）即 BNF 是一种用于表示上下文无关文法的语言，上下文无关文法描述了一类形式语言。尽管巴科斯范式也能表示一部分自然语言的语法，它还是更广泛地使用于程序设计语言、指令集、通信协议的语法表示中。大多数程序设计语言或者形式语义方面的教科书都采用巴科斯范式。在各种文献中还存在巴科斯范式的一些变体，如扩展巴科斯范式EBNF或扩充巴科斯范式 ABNF。

BNF 规定是推导规则(产生式)的集合,写为：

<符号> ::= <使用符号的表达式>


这里的<符号> 是非终结符，而表达式由一个符号序列，或用指示选择的竖杠 ‘|’ 分隔的多个符号序列构成，每个符号序列整体都是左端的符号的一种可能的替代。从未在左端出现的符号叫做终结符。
扩展巴科斯范式
扩展巴科斯-瑙尔范式(EBNF)是表达作为描述计算机编程语言和形式语言的正规方式的上下文无关文法的元语法符号表示法。它是基本巴科斯范式(BNF)元语法符号表示法的一种扩展。
它最初由尼古拉斯·沃斯开发，最常用的 EBNF 变体由标准，特别是 ISO-14977 所定义。
基本
代码，如由终结符即可视字符、数字、标点符号、空白字符等组成的计算机程序的源代码。
EBNF 定义了把各符号序列分别指派到非终结符的产生规则:
digit excluding zero = "1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9" ;
digit = "0" | digit excluding zero ;
这个产生规则定义了在这个指派的左端的非终结符 digit。竖杠表示可供选择，而终结符被引号包围，最后跟着分号作为终止字符。所以 digit 是一个 0 或可以是 1 或 2 或 3 直到 9 的一个 digit excluding zero。
产生规则还可以包括由逗号分隔的一序列终结符或非终结符:
twelve = "1" , "2" ;
two hundred one = "2" , "0" , "1" ;
three hundred twelve = "3" , twelve ;
twelve thousand two hundred one = twelve , two hundred one ;
可以省略或重复的表达式可以通过花括号 { … } 表示:
natural number = digit excluding zero , { digit } ;
在这种情况下，字符串 1, 2, …,10,…,12345,… 都是正确的表达式。要表示这种情况，于花括号内设立的所有东西可以重复任何次，包括根本不出现。
可选项可以通过方括号 [ ... ] 表示:
integer = "0" | [ "-" ] , natural number ;
所以 integer 是一个零(0)或可能前导可选的负号的一个自然数。
EBNF 还包括描述指定次数的重复，和排除产生式的某部分或向 EBNF 文法插入注释的语法。
依据 ISO 的扩展
依据 ISO 14977 标准，提供了两个设施来扩展 EBNF。其一是在 EBNF 文法部分的特殊序列，它是在问号包围内的任意文本，其解释超出了 EBNF 标准的范围。例如，空格字符可以用如下规则定义:
space = ? US-ASCII character 32 ?;
其二利用圆括号在 EBNF 中不能放置到紧随标识符之后的事实。下列不是有效的 EBNF:
something = foo ( bar );
所以 EBNF 的扩展可以使用这种表示法。例如，在 Lisp 文法中，函数应用可以用如下规则定义:
function application = list( symbol , [ { expression } ] );
扩展 BNF 的动机
BNF 有着可选项和重复不能直接表达的问题。作为替代，它们需要利用中介规则或两选一规则，对于可选项，定义要么是空的要么是可选的产生式的规则，对于重复，递归的定义要么是被重复的产生式要么是自身的规则。同样的构造仍可用在 EBNF 中。
可选项:
signed number = [ sign , ] number ;
可按 BNF-风格定义为:
signed number = sign , number | number ;
或
signed number = optional sign , number ;
optional sign = ε | sign ; (* 使用 ε 来更清晰的指示空产生式 *)
重复:
number = { digit } ;
可按 BNF-风格定义为:
number = digit | number digit;
其他增加和修改
EBNF 排除了 BNF 的一些缺陷:

BNF 为自身使用了符号 (<, >, |, ::=)。当它们出现在要定义的语言中的时候，BNF 不能不加以修改或解释的使用。
BNF-语法在一行中只表示一个规则。

EBNF 解决了这些问题:

终结符被严格的包围在引号 (“…” 或 ‘…’) 中。给非终结符的尖括号 (“<…>”)可以省略。
通常使用终止字符分号结束一个规则。

进一步还提供了定义重复次数，排除法选择(比如除了引号的所有字符)和注释等的增强机制。
不管所有这些增强，EBNF 在能定义的语言的意义上不比 BNF 更强大。在原理上用 EBNF 定义的任何文法都可以用 BNF 表达。但是经常导致可观的更多规则的表示。
EBNF 已经被ISO用代码 ISO/IEC 14977:1996(E) 标准化了。
在某些场合任何扩展的 BNF 都被称为 EBNF。例如 W3C 使用 one EBNF 来规定 XML。
另一个例子
只允许赋值的简单编程语言可以用 EBNF 定义为:
(* a simple program in EBNF − Wikipedia *)
program = 'PROGRAM' , white space , identifier , white space ,
           'BEGIN' , white space ,
           { assignment , ";" , white space } ,
           'END.' ;
identifier = alphabetic character , [ { alphabetic character | digit } ] ;
number = [ "-" ] , digit , [ { digit } ] ;
string = '"' , { all characters − '"' } , '"' ;
assignment = identifier , ":=" , ( number | identifier | string ) ;
alphabetic character = "A"|"B"|"C"|"D"|"E"|"F"|"G"
             |"H"|"I"|"J"|"K"|"L"|"M"|"N"
             |"O"|"P"|"Q"|"R"|"S"|"T"|"U"
             |"V"|"W"|"X"|"Y"|"Z" ;
digit = "0"|"1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9" ;

white space = ? white space characters ? ;
all characters = ? all visible characters ? ;
一个语法上正确的程序:
PROGRAM DEMO1
BEGIN
  A0:=3;
  B:=45;
  H:=-100023;
  C:=A;
  D123:=B34A;
  BABOON:=GIRAFFE;
  TEXT:="Hello world!";
END.
这个语言可以轻易的扩展上控制流，算术表达式和输入/输出指令。就可以开发出一个小的、可用的编程语言了。
使用了在标准中提议为正规表示的下列字符:



用途
符号表示




定义
=


串接
,


终止
;


分隔
|


可选
	[ ... ]


重复
{ … }


分组
	( … )


双引号
” … “


单引号
‘ … ‘


注释
	(* … *)


特殊序列
? … ?


除外
-



约定

使用了如下约定:

扩展 BNF 每个元标识符都被写为用连字号连接起来的一个或多个字；
结束于“-symbol” 的元标识符是扩展 BNF 的终结符的名字。


表示扩展 BNF 的每个操作符的正常字符和它所蕴涵的优先级(顶部为最高优先级)为:
* repetition-symbol
- except-symbol
, concatenate-symbol
| definition-separator-symbol
= defining-symbol
; terminator-symbol

下列括号对超越正常优先级:
'  first-quote-symbol            first-quote-symbol  '
"  second-quote-symbol          second-quote-symbol  "
(* start-comment-symbol          end-comment-symbol *)
(  start-group-symbol              end-group-symbol  )
[  start-option-symbol            end-option-symbol  ]
{  start-repeat-symbol            end-repeat-symbol  }
?  special-sequence-symbol   special-sequence-symbol ?


作为例子，下列语法规则展示了表达重复的设施:
aa = "A";
bb = 3 * aa, "B";
cc = 3 * [aa], "C";
dd = {aa}, "D";
ee = aa, {aa}, "E";
ff = 3 * aa, 3 * [aa], "F";
gg = {3 * aa}, "D";
这些规则定义的终结字符串如下:
aa: A
bb: AAAB
cc: C AC AAC AAAC
dd: D AD AAD AAAD AAAAD etc.
ee: AE AAE AAAE AAAAE AAAAAE etc.
ff: AAAF AAAAF AAAAAF AAAAAAF
gg: D AAAD AAAAAAD etc.
有关工作

W3C 使用一种不同的 EBNF 来指定 XML 语法。
British Standards Institute 在1981年出版了一个 EBNF 标准: BS 6154。
IETF 使用在 RFC 4234 中规定的扩充 BNF (ABNF)。

ps，由于中文维基百科尚不可访问，所以就原文转载了其中关于巴科斯范式和扩展巴科斯范式的词条。

用途	符号表示
定义	=
串接	,
终止	;
分隔	\|
可选	[ ... ]
重复	{ … }
分组	( … )
双引号	” … “
单引号	‘ … ‘
注释	(* … *)
特殊序列	? … ?
除外	-



第二届D2见闻和随想
秦歌 — Sun, 27 Apr 2008 18:09:34 +0000
这个周末回京参加了期待已久的第二届D2前端技术论坛，见到众多的前端同行，更聆听了几场高质量的讲演，收获良多。讲演的资料整理后会在第二届D2前端技术论坛的官网上提供下载，同时也会提供会议视频，强烈推荐前端工程师关注。

周爱民的讲演“前端设计与开发的基本模式”，看起来很丰富，很多模式或理念听起来也蛮有争议，避免不了空和虚，但我不能不承认他提供了很多我有兴趣但尚未涉及东西，这些给了我新的视角。
黄继佳的讲演“Silverlight应用”，虽然很高兴他能来参加和支持D2，幻灯片也很cool，但我强烈的感觉这是一个很纯正的Silverlight的产品推广，我不是太喜欢。
Hedger Wang的讲演“Enterprise Ajax in PHP”，是这次D2的精华。他提出管理Ajax在企业级应用的设计模式，很多正是我日常开发中遇到，比如他讲到的映射，我也曾经做过类似的解决方案，比如他讲到的对多次同一请求的管理，我也曾思考过，但那往往是一个个独立的小点，这次讲演终于让我有了从点到线到面的感觉。他的讲演也准备的相当好，既有总结，又有代码，同时利用生活中的例子来说明原理，想听不明白都不行。我不需要如何得称赞hedger的讲演，如果你的开发涉及到Ajax，那么你就应该去看看他的讲演。ps，祝他杭州玩的开心。
Nate Koechly的讲演“Enhanceing Web Sites With The YUI Library”(English)”，作为YUI开发的核心成员，这次讲演虽然有点推广YUI的意味（在此有近一年应用YUI经验的我也强烈推荐YUI），但是仅仅从他幻灯片上就可以看出他事先的准备和用心，甚至他表达出了要学习汉语的意愿。但很遗憾的是，由于语言的原因，这次没有能充分的从Nate身上获取更多的更深的东西，虽然有hedger义务做翻译，虽然对nate的提问是最多的。
章亦春的讲演“Nifty web apps on an OpenResty”，讲的很有激情，也给出了一个新的Web OS，作为一个视角是一个很棒的东西，但是作为我个人来讲我并不赞同这个思路，我一直认为让一门语言处于它最适当的位置才是王道，就像语义化设计一样，应该用合适的标签来组织合适的数据。虽然章亦春提到了不应该对Javascript滥用，但是很遗憾的是我感觉这就是一种滥用。
案例分享阶段，贤安的“如何写一个富文本编辑器”，小马的“前端开发工具介绍”，一位仁兄（不好意思，记不起来名字）的“用Adobe Air开发IM”，都很有意思，这些很务实的小分享越多越好，因为每个人的心得体会小窍门汇聚在一起就有了越来越顺畅的前端开发。


第二届D2已经结束，第三届目前还没有明确的主办方（有兴趣请看如何申办D2），我的一些想法和建议如下：

主办D2是需要费用的，所以建议下一次D2可以有正式的赞助商和门票，这将能保证D2更好的运作。
不少人对我说互动不够，但是由于演讲本身就是一对多的，所以注定了互动是有限度的。建议通过在午餐和晚餐时话题分桌，一边吃，一边彼此认识，一边圆桌会议。
这次D2已经很务实了，下一次希望更务实。可以提前征集大家期望的讲演内容，可以参考大家主题邀请演讲嘉宾。同样也可以提前搜集分享案例，更好的更深入的组织分享。我期望下一次D2能遇到的内容：

语义化的HTML。这是一个最基础的东西，也将是一个巨大的挑战。
Firebug实战。虽然大家开发基本上离不开它，但是我总感觉并没有充分的利用它，每一个小技巧都可以让我们进步。
整站的CSS管理。这肯定是一个百花齐放的问题。
高性能的WEB页面。Yahoo的preformance列了34条，但是我们的实战呢？
前端工程师如何推动整个项目的设计和开发流程？这就是需要实践+经验+效果。



中国雅虎主办第二届D2前端开发论坛

坐着听讲演的开发者。由于2008的原因，北京的会议室不是特别好找，这次的会议室过于细长，hedger首先坐在了地上，并且号召大家都这么做，很多年没有坐在地上了，感觉不错。

Nate正在开讲，首先拿出相机拍一下听讲者。他的幻灯片开始部分用了中文，是他临时学的，拿到他名片的朋友也会发现，有一面是简体中文的。

Nate讲演时发现的一个提示站点是否使用YUI的小工具。在他的演讲过程中，列出了当前哪些站点使用了YUI，估计都是用这个小工具挖掘的。

hedger演讲中…

部分现场的工作人员，我的同事们




如何让Firefox2和Firefox3在Windows下共存并同时运行？
秦歌 — Thu, 31 Jan 2008 16:36:46 +0000
相对于Firefox2来说，Firefox3除了采用全新的Gecko 1.9引擎外，在性能、稳定性和安全性方面进行许多改进，在我们最关心的对站点和网页应用的改进也相当多的。去年底，Firefox3 beta2就已经发布了，正式版的推出也为期不远了，是时候在网页开发中考虑它了，所以我们不仅在要同一系统中装多个浏览器、多个版本的IE（Multiple IE），现在我们也需要装两个版本的Firefox了。在网上很早就有Linux下让Firefox3与Firefox2共存的介绍，下面介绍一种Windows下两者共存的方法。

下载Firefox3，目前是beta2。
打开命令运行窗口（开始>运行或快捷键win+R），然后运行命令firefox -profilemanager -no-remote，打开Firefox的配置文件管理器。–no-remote命名允许浏览器正在运行的时候打开配置文件管理器。

点击“创建配置文件”按钮，创建一个名为Firefox3或者其他名字的配置文件。去掉对“启动时不询问”的选择。这一步是为Firefox3创建一个新的配置文件。

在Firefox2的快捷方式上点击右键，然后选择属性。在“目标”输入框中.exe"的后面输入一个空格和-p default，然后关闭。这步是告诉快捷方式使用默认配置文件来运行Firefox2。

安装Firefox3，“安装类型”选择“自定义”，这样就可以选择安装新的安装地方。虽然默认文件夹名是Mozilla Firefox 3 beta 2，但是最好还是自己重新定义一个，这样以后升级新的版本时候不用做什么修改。


在安装结束时，不选择“立即运行Firefox”选项。如果现在运行，它使用的是默认配置文件，这不是我们想要的。

在Firefox3的快捷方式上单击右键，选择“属性”，在目标输入框的-no-remote -p firefox3。这步是告诉这个快捷方式使用配置文件Firefox3来运行。


这样我们就可以在同一个系统中同时运行Firefox2和Firefox3了。遗憾的是Firefox3基本上不支持Firefox2上的add-on，包括Firebug，幸运的是已经有了适用于Firefox3的Firebug 1.1 beta。
这个方法来自于How to Run both Firefox 2 and Firefox 3 Together。
刚发现有了MultiFireFox，这个是用Python写的跨平台的程序，有兴趣的可以编译试试。对于Mac用户提供了专门的MultiFirefox DMG。谢谢fireyy



OpenID和Email
秦歌 — Wed, 28 Mar 2007 19:21:03 +0000
什么是OpenID？
OpenID就是一套以用户为中心的分散式身份验证系统，用户只需要注册获取OpenID之后，就可以凭借此OpenID帐号在多个支持OpenID的网站之间自由登录使用，而不需要每上一个网站都需要注册帐号。
官网：http://openid.net
如何使用OpenID？
我用一个简单的OpenID的使用实例来理解OpenID

注册OpenID，找到一个OpenID服务网站（当然这个服务网站可以自己建立），比如www.mysceond.name进行注册，我的用户名是dancewithnet，这个时候我获取了我的OpenID是http://dancewithnet.mysceond.name（如果没有自己的域名，可以直接使用这个网址座位OpenID）
在自己网站http://dancewithnet.com的之间加上


这样就可以使用我自己的网址http://dancewithnet.com作为我的OpenID了
访问支持OpenID的应用网站www.zooomr.com，在登录处输入http://dancewithnet.com，确定后网页跳转到www.mysceond.name的登录页面，我输入用户名密码后确定，网页又跳回www.zooomr.com，这样我就登录zooomr.com了(当然还需要填写一下zooomr.com的专有信息，但是已经不需要注册填写用户名和密码了)。如果我在刚才从zooomr.com跳到www.mysecond.name进行验证时，我选上了记住用户名和密码，那么以后就可以直接在www.zooomr.com输入http://dancewithnet.com，无需再到mysceond.com验证，就可以直接登录。
以此类推，我可以只用http://dancewithnet.com这个OpenID和我在mysecond.name注册的用户名和密码来访问其他的支持OpenID的应用网站www.livejournal.com,openprofile.net等等。

OpenID的好处

一处注册，到处通行，同时也是这些支持OpenID的网站一起共享用户，是双赢。这样解决了访问多个站点频繁注册带来多个用户名和多个密码的烦恼，也解决了害怕某些不信任网站获取自己密码信息的担心，因为初始的OpenID的注册可以选择信任的服务网站。
密码永不丢失？忘记密码时，可以采用传统的方法取回密码（目前www.mysecond.name似乎不支持，他支持后面的非传统的方法），比如通过Email，但是还有更简单的是可以在www.mysecond.com重新申请一个dancewithnet1的帐号,然后重新修改一下dancewithnet.com首页的head里关联内容，我一样可以用http://dancewithnet.com这个ID来访问www.zooomr.com，我也可以到其他的OpenID服务网站，比如www.openid.cn,去注册一个dancewithnet.openid.cn的OpenID,然后修改dancewithnet.com首页的head部分的关联代码，我依旧可以用http://dancewithnet.com来访问我以前访问过的网站
OpenID是网址(URI，URL)，可以和个人网站、博客等等网址统一起来,具有唯一性和可识别性，对个人来讲是非常容易记忆的。Spaces.live.com，blog.163.com等都给用户提供了个性网址，虽然现在可能不能作为OpenID，但是这无疑是一个巨大的潜在用户群，况且Microsoft、Digg等等都宣布将支持OpenID。

如果Email作为OpenID
技术上我没有仔细考虑过，但是我想既然URI都可以Open起来，Email也应该可以，搞不好原理都可以是一样的。如果不可以，应该不是技术的问题，而是商业策略的问题，就像QQ不愿意互联互通一样。所以我还是认为Email才是OpenID的最好选择：

Email有强大的用户群，也更容易让人接受，一旦可以变成OpenID，那么就相当于我们现在已经有了很多大型的像Google，Yahoo，Microsoft、163这样的分散的值得信任的ID服务站点，这是用网址作为OpenID所不能比拟的。拥有个人域名和个人网站的毕竟是少数，即使博客盛行且继续发展都暂时不能改变这个现实，所以OpenID那种密码永不丢失的优点只能服务少数人。所以类似邮件服务网站那样的值得信任的OpenID服务网站是大量需要的。只有普及性的使用，OpenID的理念才会真正的深入人心，并且改善我们的网络生活。
参考和延伸阅读

[1]OpenID简介
[2]关于OPENID的单点登陆协议
[3]Passport与openID




URL格式规范
秦歌 — Mon, 29 Jan 2007 22:48:36 +0000
一、格式说明
“|” 表示隔开的两部分只能出现其中一个，方括号[]括起来的表示可选，文字由双引号””括起来，以n*开头表示至少n个或更多的，n的缺省值为0。
二、总体格式
genericurl     = scheme “:” schemepart

scheme         = 1*[ lowalpha | digit | “+” | “-” | “.” ]
schemepart     = *xchar | ip-schemepart

ip-schemepart  = “//” login [ “/” urlpath ]
login          = [ user [ “:” password ] “@” ] hostport
hostport       = host [ “:” port ]
host           = hostname | hostnumber
hostname       = *[ domainlabel “.” ] toplabel
domainlabel    = alphadigit | alphadigit *[ alphadigit | “-” ] alphadigit
toplabel       = alpha | alpha *[ alphadigit | “-” ] alphadigit
alphadigit     = alpha | digit
hostnumber     = digits “.” digits “.” digits “.” digits
port           = digits
user           = *[ uchar | “;” | “?” | “&” | “=” ]
password       = *[ uchar | “;” | “?” | “&” | “=” ]
urlpath        = *xchar    ; depends on protocol see section 3.1
三、常见scheme
; FTP (参见RFC959)
ftpurl         = “ftp://” login [ “/” fpath [ “;type=” ftptype ]]
fpath          = fsegment *[ “/” fsegment ]
fsegment       = *[ uchar | “?” | “:” | “@” | “&” | “=” ]
ftptype        = “A” | “I” | “D” | “a” | “i” | “d”

; FILE
fileurl        = “file://” [ host | “localhost” ] “/” fpath

; HTTP
httpurl        = “http://” hostport [ “/” hpath [ “?” search ]]
hpath          = hsegment *[ “/” hsegment ]
hsegment       = *[ uchar | “;” | “:” | “@” | “&” | “=” ]
search         = *[ uchar | “;” | “:” | “@” | “&” | “=” ]

; GOPHER (参见RFC1436)
gopherurl      = “gopher://” hostport [ / [ gtype [ selector
                 [ “%09″ search [ “%09″ gopher+_string ] ] ] ] ]
gtype          = xchar
selector       = *xchar
gopher+_string = *xchar

; MAILTO (参见 RFC822)

mailtourl      = “mailto:” encoded822addr
encoded822addr = 1*xchar               ; further defined in RFC822

; NEWS (参见 RFC1036)
newsurl        = “news:” grouppart
grouppart      = “*” | group | article
group          = alpha *[ alpha | digit | “-” | “.” | “+” | “_” ]
article        = 1*[ uchar | “;” | “/” | “?” | “:” | “&” | “=” ] “@” host

; NNTP (参见RFC977)
nntpurl        = “nntp://” hostport “/” group [ “/” digits ]

; TELNET
telneturl      = “telnet://” login [ “/” ]

; WAIS (参见 RFC1625)
waisurl        = waisdatabase | waisindex | waisdoc
waisdatabase   = “wais://” hostport “/” database
waisindex      = “wais://” hostport “/” database “?” search
waisdoc        = “wais://” hostport “/” database “/” wtype “/” wpath
database       = *uchar
wtype          = *uchar
wpath          = *uchar

; PROSPERO
prosperourl    = “prospero://” hostport “/” ppath *[ fieldspec ]
ppath          = psegment *[ “/” psegment ]
psegment       = *[ uchar | “?” | “:” | “@” | “&” | “=” ]
fieldspec      = “;” fieldname “=” fieldvalue
fieldname      = *[ uchar | “?” | “:” | “@” | “&” ]
fieldvalue     = *[ uchar | “?” | “:” | “@” | “&” ]
四、杂类
lowalpha       = “a” | “b” | “c” | “d” | “e” | “f” | “g” | “h” |
                 “i” | “j” | “k” | “l” | “m” | “n” | “o” | “p” |
                 “q” | “r” | “s” | “t” | “u” | “v” | “w” | “x” |
                 “y” | “z”
hialpha        = “A” | “B” | “C” | “D” | “E” | “F” | “G” | “H” | “I” |
                 “J” | “K” | “L” | “M” | “N” | “O” | “P” | “Q” | “R” |
                 “S” | “T” | “U” | “V” | “W” | “X” | “Y” | “Z”

alpha          = lowalpha | hialpha
digit          = “0″ | “1″ | “2″ | “3″ | “4″ | “5″ | “6″ | “7″ |
                 “8″ | “9″
safe           = “$” | “-” | “_” | “.” | “+”
extra          = “!” | “*” | “‘” | “(” | “)” | “,”
national       = “{” | “}” | “|” | “\” | “^” | “~” | “[” | “]” | “`”
punctuation    = “<” | “>” | “#” | “%” | <”>

reserved       = “;” | “/” | “?” | “:” | “@” | “&” | “=”
hex            = digit | “A” | “B” | “C” | “D” | “E” | “F” |
                 “a” | “b” | “c” | “d” | “e” | “f”
escape         = “%” hex hex

unreserved     = alpha | digit | safe | extra
uchar          = unreserved | escape
xchar          = unreserved | reserved | escape
digits         = 1*digit


转自:http://nosound.my.gsdn.net/2004/12/09/6276/

随网之舞web2.0 & so on

《高性能网站建设进阶指南》译者序和样章

译者序

样章等相关信息

如何做好一份前端工程师的简历？

一、你是前端工程师

二、内容为王

三、Web是平台

四、细节决定体验

推荐给大家看的设计书

Vim、Vimperator和一个小bug

语法图

准则

例子

扩展链接

巴科斯范式和扩展巴科斯范式

巴科斯范式

扩展巴科斯范式

基本

依据 ISO 的扩展

扩展 BNF 的动机

其他增加和修改

另一个例子

约定

有关工作

第二届D2见闻和随想

如何让Firefox2和Firefox3在Windows下共存并同时运行？

OpenID和Email

什么是OpenID？

如何使用OpenID？

OpenID的好处

如果Email作为OpenID

参考和延伸阅读

URL格式规范

一、格式说明

二、总体格式

三、常见scheme

四、杂类