我在去年的总结中说“Blog和Twitter是好东西，它足以记录这变化多端的2008”，而2009年其实有点变化莫测，幸好还是有它们，用Twitter记录和与世界同步，用Blog总结和积累，它们一起去完成互联网上最本质的精神开放与共享。

我是一个对过去时间不太敏感的人，似乎每次回想过去最近几年内的事情在准确时间上总是容易混淆。2009年的最后一天，我翻了翻Twitter，像电影回放一下，看看过去的一年，挺有意思。一年有些事很无聊，有些事注定要埋藏心里，也有些事值得回味、整理和沉积。

有些事关人生

1. 在打破规则之前必须清楚规则是什么 — Robin Williams_2009.01.07
2. 我是边看电影边用Twitter记录有感觉台词，这段说演员的台词和很多人的生活都相似。。。原来，我们都是演员，大家搞一场没有彩排的大戏而已。_2009.01.10
3. 改变能改变的，记住不能改变的，当你走到那个不能改变的背后时，你就能改变它了。_2009.01.15
4. 一旦能够说出什么东西的名字，就会很容易注意到它。你就会掌握它，拥有它，使它在你的掌控之中。_2009.01.19
5. 心态好才能有运气。—《高兴》_2009.02.28
6. 我崇尚可贵的妥协，无论这一妥协在什么时候达成。生活本身就是死亡与生存之间的妥协。我们一生不断地努力，直到伟大的毁灭最终获得胜利。所有的立法、所有的政权和所有的社会都是基于相互礼让的原则形成的，基于礼让原则，一切事物便都有了基础。—-亨利.克莱_2009.03.27
7. 很多时候我们总是，要么是拿别人的优点和自己的缺点比，要么是拿别人的缺点和自己的优点比。于是就有了那么多的没有结果的争吵和辩论。进化论告诉我们不适的物种肯定要灭绝的，即使有时候作为珍惜生物给保留着。_2009.05.05
8. 不要规划你的金钱，但是规划你的时间。不要为了你每天的小平衡而丧失了人生的大平衡。—-卫哲_2009.05.24
9. 理想很丰满，现实很骨感。_2009.08.28
10. 摆脱诱惑的唯一方式就是向它屈服。—-奥斯卡 王尔德_2009.10.07

有些事关社会

1. 一个制假男人的自首日记，让我想起在京几年买了数不清的冷饮和速冻水饺，太需要哈维· 华盛顿· 威利了_2009.04.27
2. 术语“MEME”由Richard Dawkins所创，最早出现在他1976年出版的《自私的基因》。作者以及其它的科学家称MEME是某种文化的碎片或者行为，衍生于一个表示”模仿”的希腊语词尾。它描述思想如何模仿基因的习性, 从大脑转变到大脑,而不是从躯体遗传到躯体。 _2009.05.15
3. Internet上，围墙花园（walled garden）是指一个控制用户对网页内容和服务进行访问的环境。它把用户限制在一个特定的范围内，它允许用户访问指定的内容，同时防止用户访问其他未被允许的内容。尽管它并不能实际的防止用户访问围墙外的东西，但它使访问墙外内容要比内部要难。_2009.05.30
4. 中国的“黑领”是世界上最无耻的群体，挺好的文章，为啥冒名说是郎咸平呢？可惜了。_2009.08.02
5. 2009年10月2日，美国南加州橙县高等法院法官将最终宣判一项未成年人酒醉驾车酿成命案的刑期，创下了当地的一个先例。出车祸时年仅17岁的米拉德- 莫拉伊被视为成年人予以起诉，而且被控以二级谋杀罪。_2009.08.18
6. 卢广在纽约荣获尤金·史密斯人道主义摄影大奖，其作品《关注中国污》_2009.10.18
7. 现在Jack Ma正在谈环境问题，谈钱塘江，谈绍兴水乡，谈癌症，谈水污染，阿里巴巴要用互联网的力量和实际行动保护水资源。买车之前要种树，比如奔驰600要种 200棵树，要推行无纸化办公！我为这个表态感到骄傲，对前端来说首先能做的就是提高前端性能！_2009.11.05

有些事关生活

1. 刚才看到老同学的短信，2.14那天生下一个胖儿子，情人节诞生爱情结晶，真不错。_2009.02.16
2. 今天收到安婧的明信片，很是高兴。在通讯技术如此发达的今天，当你去一个新地方使用明信片，真是一个很优雅的问候方式，手写字体是更优美亲切的。从今天开始积累亲朋好友的通信地址。_2009.02.27
3. 尖叫的饮料瓶的确是最好的油瓶、酱油瓶、醋瓶……，好用又环保啊。_2009.04.19
4. 戒掉一个口头禅“说一个很简单的事情”，往往让对话人感觉到不爽的反而是看起来不起眼的内容，要戒掉估计就靠憋了。虽然让自己爽起来是好事，但是目标是为了把好东西有效的传达出去，所以还是先从自己做起了。_2009.04.23
5. 经常看到电影中男主角们被车拖来拖去，最后还能爬上车，英雄了得。看了这个新闻，就不得不好好感叹一下人生了。
6. 印度尼西亚西爪哇的一个地区的法律规定，如果要结婚的话，必须要先种10棵树，如果要离婚的话，就必须要先种50棵树。_2009.05.05
7. 听着“我终于失去了你”，打开这段视频，居然哭得稀里哗啦_2009.05.10
8. 一个挨过饿的人和一个没有挨过饿的人对一碗红烧肉的感情是迥然不同的。 —-柳传志_2009.06.17

有些事关组织

1. 彼得原理_2009.02.25
2. 如果是上班族，我觉得应该养成站在比自己高两级的管理者的立场上思考问题的习惯。如果只是站在比自己高一级的直属上司的立场上思考问题，就容易纠结，而高两级，正好合适。—-大前研一_2009.06.02
3. 工作应该体现人的社会价值，如机会、社交、认同以及个人满足，而非仅仅反映成本、效率之类的商业价值。_2009.09.01
4. 帕金森的结论是：“一份工作所需要的资源与工作本身并没有太大的关系，一件事情被膨胀出来的重要性和复杂性，与完成这件事情花的时间成正比。”_2009.11.07
5. 雨林木风负责人赖霖枫说，环境不是最重要的，但良好的办公环境可以给予我们更好的创意和激情。看到这句使我想起了阿里巴巴前台的MBP和UED的硬件现状。硬件也不是最重要的，但不合理的设置和形式主义完全能抑制人的创意和激情。不患寡而患不均。_2009.11.26
6. 站在2009年的尾巴上，想想这一年来其他团队有很多同事让我感动，所以在这个下午我把这种感动写信告诉TA的主管。_2009.11.30

有些事关产品

1. 目前我希望的交互设计师和产品经理一样是非常资深的，做过前端、后端开发的技术研发人员晋升而来的。好的产品最好交到一个有技术能力的、有经验的交互手上，会让大家更加放心。如果交互太烂，让很多兄弟陪着干，结果发现方向错误是非常浪费和挫伤前端士气的。_2009.01.14
2. 一个大型产品的发布或大规模更新到其稳定往往需要较长时间的跟踪和维护，这期间往往针对用户的反馈有若干小的调整，所以需要全体人员快速响应，但不知道为啥很多公司的都喜欢在春节前几天干这事，难道是因为春节流量小而开发人员都不休假么？这是做给用户用，还是做给对头看，更或者是做给老板瞧呢？_2009.01.18
3. 我一直认为“全部服务”对一个大型网站来说至关重要，它可能是树或者是网，反应了这个网站的产品架构和发展方向，对用户的展示可能是“更多服务”或“有选择的推送”。有谁清楚公司的“全部服务”么？太多的人关注“首页”超过“全部服务”了。_2009.02.03
4. 改版的一种境界或许润物细无声，有点类似闷声发大财一样，让用户感觉变的自然，变得清切，变得好用，心中窃喜，不知不觉变得越来越爽。_2009.02.24
5. twitter.com的创始人是Evan Williams，他也是blogger.com的创始人； friendfeed.com的创始人是Paul Buchheit，他也是gmail.com的创始人。产品、技术和人一样，暗中是很有延续性的。_2009.03.03
6. Web是一个新媒体，最核心的是内容，最重要的是重复和清晰，我们要多考虑它的伸缩性。_2009.03.03
7. 光鲜的表面赢得奖项，真正的内容赢得用户—- Gerry McGovern_2009.03.06
8. 马化腾讲产品：让产品自己召唤人[不能不说企鹅不仅仅在说，大老板也能说出如此多的产品细节，也看到他们在做，就连“北外女生”，人家在炒内容吸引流量，抓住核心]_2009.03.26
9. 真正的挑战在于：收集我们能够找到的所有被数字化记录下来的行为碎片，分析其内在的联系，并通过简单明了的界面，最终发掘出大众的智慧。_2009.04.17
10. “在我们未进入的一个全新领域进行产品开发，对公司已拥有的成熟技术以及可以向社会采购的技术利用率低于70%，新开发量高于30%，不仅不叫创新，反而是浪费，它只会提高开发成本，增加产品的不稳定性。凡是说：我的项目全部都是我做，未利用别人的成就，这种人一定不能加薪。”- 任正非_2009.05.12
11. 亚马逊首席执行官杰夫·贝佐斯称：“我们的愿景是，Kindle在60秒时间内向读者提供已印刷，正在印刷或绝版的各种语言书籍，不过这是一个需要几十年才能实现的远景。”_2009.10.08

有些事关创意

1. 创造与创意犹如生命与生活。_2009.02.14
2. Pixazza把每张图片自动变成广告赚钱, 这个创意阿里妈妈完全可以参考，太帅了。_2009.03.27
3. UNIQLO是一个建立品牌认知度方面新的尝试–面对全球市场进行传播。为全世界的博客们制作了一个功能性widget，结合跳舞、音乐、钟表等等，看视频，插件会根据春夏秋冬、时差等而显示不同的内容_2009.04.17
4. 如果有关系，什么都没有关系！_2009.05.14
5. 9875321，1.它是一个质数。2.它的各位数字是依次递减的。3.把它的数字逆转过来，变成各位数字递增的1235789，仍然得到一个质数。4. 它是满足以上三条性质的数字中最大的一个。5.它是一个在天朝完全合法的数字。6.在数字键盘上输入这个数字，既是用手画出了佐罗记号。_2009.06.05
6. 有地有钱有闲就自己盖别野，稻语间和可以居虽然算是很老的帖子，但是也看得心痒痒，如果能动手盖一套自己的房子也真的不错，就像黄永玉老爷子一样_2009.07.30
7. 创造者的品味。伟大的作品的秘诀是——非常精准的品味，加上能够使它满足的能力。_2009.07.31

有些事关设计

1. Web 最强大的力量，一直以来被视为局限与缺点，然而 Web 的天性是弹性，我们作为开发者与设计者，需要拥抱这种弹性，实现一个自适的，容易访问的 Web，这些努力从释放我们的控制欲开始。_2009.01.05
2. 如果设计不从开发人员的角度考虑，那肯定有缺失，越复杂缺失越大。让开发人员理解设计，是好设计的必由路。_2009.01.15
3. 佐野研二郎（Kenjiro Sano）：我认为最理想的设计可以概括为三个词——Simple（简洁）、Clear（清晰）、Bold（夸张）。所谓设计，就是整理复杂的事物，使其形成一种明快的视觉效果。_2009.01.19
4. 我们推出的东西并非基于竞争，而是基于用户需求，另外，市场上（云应用）上只有我们一家并不是好事。在 Google 做产品经理和在别的公司不同是，你不必担心销售收入的问题，我们也有压力，但我们的压力是如何让用户高兴。–Google Docs PM Jonathan Rochelle_2009.02.02
5. 我们应该用我们自己的网站服务来改善我们的生活。_2009.02.03
6. 我的WEB设计简单默认原则是：链接在本窗口打开，链接有下划线，没有交互弹出层，不用tab切换，字体是14px，不用ICON，不用Ajax。当你认清它们是如何和产品结合时，可以随时overload。_2009.02.12
7. 有两种方式构建软件设计：一种是把软件做得很简单以至于明显找不到缺陷；另一种是把它做得很复杂以至于找不到明显的缺陷。_2009.02.20
8. “我们听到的或者看到的，没有任何东西时完美的。但是恰恰处于这种不完美之中，才让世界变的完美。” – Shunryu Suzuki_2009.03.25
9. 8%的男性以及0.4%的女性都存在不同程度的色觉障碍。实际上，由闪烁的UI元素引起癫痫的比例都要比非红-绿色觉障碍的比例高出400倍。_2009.05.13
10. 昨天又看了一遍《This is it》，看到一句台词是“设计必须以人为本。”_2009.11.04

有些事关前端

1. 写框架对个人来说的确是一个很好的锻炼和学习机会，对公司和工作来说就未必了。这就是很多人怂恿写框架的原因，毕竟彻底打破表面上又干净又牛X，其实有一个职业精神问题。_2009.01.13
2. 全站性上线是一个很复杂的问题，即使很小功能，如果没有规划好也是非常复杂的。我要把全站性的东西比如头、尾、CSS和JS等这些东西都用CMS统一控制起来，建立稳定、统一、便捷、高效的前端环境。_2009.02.05
3. 我认为现在的HTML语义化至少有三个方面可以做：1、HTML标签本身的理解和应用，这有规则的，2、微格式，3、合理的ID和Class。HTML5 的改变也可以看出这些。有一个前提，就是对产品和内容的理解和把握，需要我们在做之前要理解产品，想清楚再做。很难有绝对标准，我们需要最佳模式_2009.03.25
4. 一起给支付宝的前端做分享时，圆心很好的总结的前端代码的三种境界：1、与人友好。2、与机器友好、3、与开发人员友好。语义化直接关系到后两者包括 SEO。_2009.03.25
5. 前端主要的发展方向：1、资深前端。2、前端管理。3、产品设计或产品经理。4、交互设计师。曾和同事交流过，前端发展到一定程度有人会遇到技术上的天花板或兴趣转移，产品和交互是最自然的方向，后端也如此，而现实我们又太缺乏有技术背景的产品和交互了。_2009.05.06
6. 刚刚看了老片《钢铁侠》感慨了一下：一个牛B的人不仅要创造新的高技术含量的东西，同样重要的是还要会制造帮助自己实现理想的自动化工具。_2009.08.30
7. RT：@lifesinger Steve Souders 也离开雅虎了，我火星着很伤感……//是有点火星，曾经我也为雅虎的垂落而伤感，后来我释然了，这就是前进的代价，@souders 去了Google，有了Let’s make the web faster的号召和相关产品，挺好_2009.11.19
8. “在这么多男人当中，我最喜欢做前端的男人，你一定要来D2哦！”_2009.11.04
9. 刚才在MSN上一个同学说“两年前差不多这个时候你面试过我~两年前如果没有你，我根本不知道原来自己的路走的太篇了~ 从心里感谢你！ 一直没机会和你说这句话”，他现在是国内一知名站点的前端负责人了，当年的面试能有如此积极的效果，很开心_2009.11.28
10. 多年来我在每个面试快速结束的时候都会彼此交流一下自己的看法，现在想起来可能主要有4个方面：1、前端定位及他在前端上的发展。2、学会利用互联网学习。3、学会站在巨人的肩上。4、互联网的精神。不过这也导致我的面试时间比较长。_2009.11.29

有些事关研发

1. 我现在看到的最大问题是，在开发投入前，没有人把需求明确，没有人对需求进行版本分离迭代开发，我们太多的项目是边做边想边拍大腿了。还好，去年推动项目的时候有些进展，更注重原型，更注重项目启动前的需求明确。_2009.01.23
2. 明确需求时，不仅仅是PD在闭门造车，在产品方向确定明确要做后,ID就参入了，细化的过程就要把开发加入进来，这时可以确定架构问题，可行性问题，开发模式问题，可以做一些实验，更重要的是开发理解了产品和以后发展方向，绝对避免很多弯路。这个过程就是需要立于本职的尊重和换位思考才能做好的。_2009.01.23
3. 需求确认是建立在开发理解并认可产品的基础上。原型是确认需求的主要产物，我们不需要精美的高保真原型，我们需要明确需求快速呈现的原型。一旦需求确定，开发的各个角色就可以进入并行开发阶段，这个时候PM、PD和ID除了解决意外情况外，就可以进行下一个版本的需求准备中。如此循环。_2009.01.23
4. “许多公司面临短期压力而取消或者从不进行任何纯粹的基础研究活动。他们认为，可以通过收购或通过产品开发而得以维持公司的发展，但我认为恰恰是这种想法铸就了他们的慢性消亡——因为他们的做法的确有助于改善短期回报，但并不能保证其长期生存。”微软三号人物，微软首席研究及战略官克瑞格•蒙迪说_2009.03.03
5. 其实最影响用户体验的除了内容就是线上Bug，其他的都先靠边。所以要有统一线上Bug记录系统和有效修复流程；所有线上bug要得到记录，这反映产品的服务状态和改进方向；所有人都应该乐于使用公司产品、乐于提交bug，这是一种职业品质；提交线上bug最多的人（QA除外）应该得到奖励。_2009.03.05
6. 需求方应该用流程降低目前的提需求速度，实施方不能用流程做挡箭牌。_2009.03.12
7. 贝佐斯说：“技术使亚马逊在零售业出人头地。传统的零售业最重要的三个因素是场所、场所，还是场所。而对亚马逊来说，三个最重要的因素是技术、技术，还是技术。”在亚马逊，雇员中最多的不是门市部店员，而是软件工程师。它的应用技术软件不断地开发创新，使企图抄袭者难以得逞。_2009.04.28
8. Yahoo关于安全的最佳实践_2009.05.04
9. 开发工程师永远是公司的资产，不是成本。_2009.09.12
10. “项目时间的问题项目经理说了算，老大的需求也是作为消费者提出的需求。”这句话我喜欢，就用它敲开2010吧。_2009.11.31

我确信第四届D2标志着中国前端经过四年的成长正在蜕变中。

1. 论坛主题涉及前端架构、框架、安全、性能、自动化和RIA大型应用，如果仔细地深入主题，你就会发现它们每个都直接和一个或多个服务成千上万人的互联网产品直接相关。我们的前端论坛不再仅仅是交流具体的某项技能或团队协作的方式，更多是和中国最流行的大型互联网产品的实践结合起来，共享其思考、探索、权衡和最佳实践。这些内容的出现暗示着前端行业的规模显现和逐步成熟。
2. 500人的气场，让这个没有暖气的会场热力肆意。我看到大部分中国优秀的互联网公司都出钱让其前端工程师来参加这次交流，毫无疑问这些公司重视前端技术关注前端人才的培养，值得我们去信赖和施展自己的才华。更让我感动的是，很多人特别是在校学生自费来参加D2，这份内心的热情和执着应该正是前端蜕变的内在动力吧。
3. HTML、CSS、JavaScript的最大的共同特点是可以直接看到源码，它们的结合也覆盖了绝大部分的前端内容。这些很基础的东西真实地反应了互联网开放、共享和协作的特点，这也正是D2论坛要表达的。我们身在互联网中，立足于前端去开放、共享和协作，这正是互联网发展的趋势，也是我们快速成长的契机，这样的成长让我们有了从量到质的变化。

内容

在D2开始的前两天，我看到克军在Twitter上说“昨晚熬夜总算把d2的ppt整完了，彻底推翻原来准备的”，而实际上我也在最后三天结合同事的意见颠覆性地修改了后面的50%，我想其他嘉宾也会如此，这至少说明了大家的用心准备。实际上，那天内容让我收获良多。

1. 大为的《模板语言与大前端》的确给我一个非常不错的视角，至少我感觉到这套思路应用在以处理数据为主要任务的产品（比如后台管理系统）是非常合适的，配合模版能大大的简化DOM操作，直接面向数据。至于大前端的定义，我想说现在的前端尚未处于它正确的位置上，从MVC的模型上讲前端应该包括整个View层和与之相关的Control层，从BS结构模型上讲，前端应该完成Browser能做的一切。其实从Google App Engine、YQL都能看到这样的迹象来。现在相当一部分本应该是前端工程师的工作是由后端工程师在做，这样导致这部分开发效率和质量都很低，但由于前端工程师的数量、前后端工程师的能力以及目前系统架构导致这部分的工作难以很快的划分清楚，但这肯定是一个发展趋势。
2. 克军的《从YUI2到YUI3看前端的演变》直观而有趣的表达了前端技术的进步和思想的演变的过程。前端的演变也是伴随着互联网应用的深入，YUI3不仅提供一套非常好的方法，更重要的背后有一套指导我们进行前端快速开发的思想和保证前端质量的流程。我们当然不应该仅仅局限于YUI这个框架，框架的应用场景可能是有限的，但是其蕴含的思想却可以是无限的。另外，克军这句“好的设计驱动技术创新（Design） + 好的技术为设计提供无限的想象（Development）= D2”总结的很好。
3. 焱鲲的《SilverlightQQ项目实践——Silverlight架构思考》，让我看到一个很Cool的产品。在一个成功的产品上面尝试新技术其实是要付出更多努力的，特别是台上包含深情的对微软的质问，让我很有感觉。
4. 明城的《前端安全概览及防范》虽然很早已经听过大纲，但是这次听来依旧有不少心得。其实这场也应该来号召后端工程师听听，说实话在平时开发中我们在网站安全这个角度上考虑的不多，明城在前端的安全问题上走出了一大步。
5. 我自己的《前端性能优化和自动化》其实都是平时学习和实战中很基础的东西。如果你善于利用互联网学习，前端性能优化的大部分内容都应该有所了解，后面自动化的实践是把性能优化的很多环节融入其中，最大可能的提升效率简化流程。前端自动化的处理思想，其实很早就有很多人在研究，但是结合公司的实际落地成为有效的工具进行大规模应用的并不多，因为这个过程不仅仅是性能优化、还有开发流程、前端架构、质量保证以及和如何打通与前端相关的所有角色等等问题。口碑前端团队已经应用这套思路很长时间了，我们边持续改进也边享受成果。在这个过程中最重要的是思想和人。
6. Show阶段，我必须要为阿里巴巴中文站和日文站的两位同学鼓掌，愿意站在D2的讲台上分享自己的感受非常值得鼓励。hax和army的代码性能PK注定会成为大家眼中的经典，虽然是小小的代码高亮显示，但那种为质量和速度而努力的比拼和较量正是我们心中永不熄灭的激情。
7. 其实除了讲台上的内容之外，这么多全国各地的前端相聚在一起，是一个非常难得的交流机会。纵然很多都是短短的几句话或者一群人杂聊，但相当多的话题都让人兴致勃勃浮想联翩。我很享受这种感觉。

会议

1. 4月份的D2操办因H1N1而打乱，使我们这次无法现场感受Douglas Crockford和Bill Scott的演讲，但之所以赶到2009年末还要继续，就是因为前端分享交流的机会太少了，这正是D2要做的。这次我全程参入了第4届D2的组织，深知操作一次大型活动的不容易。非常感谢阿里巴巴的主办，感谢组委会和所有志愿者精心的准备和无私的付出。
2. 这次会议在D2历史上或许是把大会场形式办到了极致，随着互联网和前端的发展，肯定会有更多的人要参入D2，也会有更多的话题可以分享，所以下一次D2或许能分成几个平行的专题，每个专题一个会场有若干个主题组成，每个主题的时间更长一些，主题后的交流时间也更长一些。

每一次的D2都能带来很多思考和思想上的冲击，现在是边消化边期待下一届D2的时候了。

在D2上我们曾交流过某项具体的前端技术，也曾探讨过团队协作的方式，那些美妙的话题都深入到我们频繁敲键盘的指尖。回首我们过去四年的坚持和梦想，现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候，我们自己也在悄然发生质变，而推动这些变化的人和事正是D2想告诉你的。

• 本届主题：蜕变·成长
• 论坛时间：2009年12月19日(星期六)
• 论坛地点：杭州市滨江区网商路699号, 阿里巴巴B2B园区 （地图）
• 举办单位：阿里巴巴
• 特别致谢：CSDN、JavaEye、谋智网络、百度、豆瓣、华章图书、口碑网、蓝色理想、腾讯网、
  　　　　　 图灵教育、淘宝网、支付宝。
• 官网地址：d2forum.org
• 推广视频：http://v.youku.com/v_show/id_XMTM2NDI0MDU2.html
• 报名地址：http://www.d2forum.org/d2/4/sign_up.html（截止时间：2009.12.14 0:0:0）
• 日程安排：
  

  时间	主题	嘉宾
  08:45 – 09:15	入场
  09:15 – 10:15	《模板语言与大前端》	金大为（百度）
  10:30 – 11:30	《从YUI2到YUI3看前端的演变》	张克军（豆瓣）
  11:30 – 13:00	午饭/休息/参观（阿里巴巴免费提供午餐）
  13:00 – 14:00	《SilverlightQQ项目实践——Silverlight架构思考》	甄焱鲲（腾讯）
  14:15 – 15:15	《前端安全概览及防范》	吕峰军（淘宝）
  15:30 – 16:30	《前端性能优化与自动化》	鄢学鵾（口碑）
  16:30 – 18:00	交流互动

  注意：以上安排可能会根据具体情况进行一些补充与修改。

ps，口碑办公区张贴的第四届D2宣传海报

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式：

body{
  font: 12px/1.5 arial;
}

字体：arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

1. Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
2. 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
3. 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
4. 因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

1. 12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
2. 不用考虑基于字体大小（em）的设计。
3. 在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

1. 这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
2. 在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
3. 设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
4. 深入CSS 行高非常有利于理解line-height，值得一读。

性能和效率

1. 大部分平台都有arial，减少浏览器的查找时间。
2. 代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。
3. 所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。
4. 中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。
5. 使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

1. 通过对中英文及符号混排的测试，我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话，在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。
2. 虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

最后推荐一下玉伯的《再谈 Web 默认字体》

YUI的Get就专门提供了一套动态加载的机制，是YUI最基础的功能之一。在YUI中利用Get加载JavaScript和CSS资源会在HTML的head节点中插入如下代码：

<script id="..." type="text/javascript" src="some.js"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css">

当页面编码和JavaScript或CSS资源编码不一致时，常见的方法是通过charset属性声明其编码，比如页面是gb2312，而资源文件为utf-8，则设置编码后其插入的代码是

//YUI3.0.0 和 YUI 2.8.0中
<script id="..." type="text/javascript" src="some.js" charset="utf-8"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css" charset="utf-8">

然而，在IE的一些特殊情况下加载JavaScript时，当你刷新页面时会看到状态栏上有如下的错误提示：

当你通过随机参数让JavaScript文件不缓存时，或者让script元素中的charset属性位于src属性之前（比如利用YUI2.8.0之前版本加载）就不会有这个错误提示。所以，这个问题可能是IE的缓存解码机制的bug，也可以看着是YUI的bug（已经提交给YUI开发团队，将在3.1.0中解决）。

因此，动态添加script或CSS资源时，把charset放在资源路径前面是最佳实践。对于YUI，暂时可以这样修改源码来修复。

2009年10月14日中国纪实摄影师卢广的作品《关注中国污染》荣获2009年尤金·史密斯人道主义摄影大奖。卢广说：“我现在考虑的就是怎么能好好地解决这些问题，解决不了也没关系，我先记录，记录对我来说是第一位的。”向其致敬。以下是部分获奖作品。

2009年6月11日：江苏省常熟市氟化学工业园污水处理厂，负责收集处理各化工厂的污水，但他们并没有处理污水，通过管道从长江底延伸1500米处排放污水。

2008年7月19日：江苏连云港盐场工人在愤怒地说，风往我们这边吹时，化工厂排入的气体又臭又刺鼻受不了，到了晚上毒气放得更多

2008年3月18日：河北省涉县天津钢铁厂是重污染企业，企业规模还在不断扩大，严重影响当地居民的生活

2008年3月18日：河北省涉县固新村现有癌症病人50多人，每年癌症死亡20多人

2007年9月24日：在山西临汾市污染严重地区，农民在棉花地里干了两小时的活之后全身都是煤灰

2006年4月23日：在黄河边放羊的老汉受不了第三排水沟散发的臭气

2006年4月22日：宁夏石嘴山湖滨工业园区高大的烟囱上粉尘从天而降，当地居民叫苦连天，他们出门就得做好防范措施

2005年11月25日：广东省贵屿镇河流、水塘都已被污染，村民们只好在被严重污染的水塘里洗涤

2005年7月26日：内蒙古拉僧庙工业园区每天大量的工业污水流向黄河滩

2005年4月10日：宁夏西吉县民工马某带上5个孩子来到内蒙古黑龙柜工业区白灰厂打工，孩子最大的9岁，没有上学，最小的不到2岁。他们在污染严重的地区，孩子们的手脸整天都是脏兮兮的

2005年4月10日：在高耗能、高污染企业的民工没有任何防护措施，照样卖命的干活，每天大量粉尘吸进肺部。在这里干一、二年，他们就感到身体不适，甚至发病，这些民工大多是贫困地区来的

2005年4月8日：15岁的甘肃天水人杨新闰，上完小学二年级就辍学了，跟着父母来到黑龙贵工业区，他一天能赚16元

延伸阅读：

• 卢广在纽约荣获尤金·史密斯人道主义摄影大奖
• “记录是第一位的”
• 卢广，为什么出错的总是你
• 对贺老师“卢广，为什么出错的总是你”一文的回复
• 蜂鸟视觉盛宴：关注中国污染（全部获奖作品）
• 中国水污染地图

DEMO中的style.css有4913个选择符，大小为554kb，但在IE中却在4095个选择符之后失效，所以说明IE的CSS文件不存在不能超过288kb的限制。

所以在IE中对style标签使用addRule方法和cssText属性添加样式时都可能会碰到这个限制，比如使用addRule方法添加第4096个选择符时会报“Invalid Argument”的异常。

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

1. body、img、table、tr、th、td等元素的hasLayout一直为true。
2. type为text、button、file或select的input的hasLayout一直为true。
3. 设置{position:absolute}的元素的hasLayout为true
4. 设置{float:left|right}的元素的hasLayout为true
5. 设置{display:inline-block}的元素的hasLayout为true
6. 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：
   1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
   2. 元素在怪癖模式（compat mode）下。
7. 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。
8. 设置了{writing-mode:tb-rl}的元素的hasLayout为true。
9. 元素的contentEditable的属性值为true。
10. 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样：

{
    filter:alpha(opacity=30);
    opacity:.3;
}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的2.8.0中依旧存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是bug，具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话，YUI第一、Prototype第二、jQuery第三、Mootools垫底。

我简单的实现了设置和获取Opacity的函数，可以避开上面框架存在的bug，请在IE8标准模式下看demo12：

//设置CSS opacity 属性的函数，解决IE8的问题
var setOpacity = function(el,i){
  if(window.getComputedStyle){// for non-IE
    el.style.opacity = i;
  }else if(document.documentElement.currentStyle){ // for IE
    if(!el.currentStyle.hasLayout){
      el.style.zoom = 1;
    }
    if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block
      el.style.display = 'inline-block';
    }
    try{
      //测试是否已有filter
      //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx
      if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}

//获取CSS opacity 属性值的函数
//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
var getOpacity = function(el){
  var value;
  if(window.getComputedStyle){
    value = el.style.opacity;
    if(!value){
      value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
    }
    return value;
  }else if(document.documentElement.currentStyle){
    value = 100;
    try { // will error if no DXImageTransform
        value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
    } catch(e) {
        try { // make sure its in the document
            value = el.filters('alpha').opacity;
        } catch(err) {
        }
    }
    return value / 100;
  }
}

不得不说，这些事都是IE整出来的……

1. 辣椒（青椒和尖椒）
2. 黄瓜
3. 香菜：又叫香荽、胡菜、原荽、园荽、芫荽、芫茜、胡荽、莞荽、莚荽菜、莚葛草、满天星、盐熟菜（安徽庐江方言）
4. 大葱
5. 香油、酱油、味精和盐

做法

1. 辣椒、黄瓜和大葱洗净后切成细丝
2. 香菜洗净后切成寸段
3. 把加工好的菜放入大碗中，加入酱油、盐和味精（依据个人口味还可以加入糖和醋），然后进行充分搅拌
4. 最后浇上香油就搞定了
   

传说

这道菜是去了北京才吃到，当时就是因为这个有趣的菜名才点的，吃了之后就喜欢上。来杭州后就一直再没有吃过，于是这周就动手做了一把。当然，有趣的名字也意味着有趣的故事：

1. 传说在东北有一个儿媳妇不太会做家务事，对做菜更是一窍不通。一天家中的婆婆让儿媳妇做一道拿手菜，儿媳妇犯了难，不知从何下手，但还是逞强的将辣椒、黄瓜、大葱、香菜等原料洗净切丝。胡乱的扔在一起用调料凉拌。当这盘“自创”的菜端上桌子，婆婆看见如此离谱的做法，尝了一口不禁感叹的说道：“媳妇，你可真虎啊。”（虎：在东北方言中除了指老虎之外，还意指此人傻、缺心眼。）于是，此后人们就将这道菜称之为“老虎菜”。
2. 张作霖统治东北时，有一段时间不思饮食。就在这时，有个厨师顺手拿起几样蔬菜，举刀就切，黄瓜、大葱、尖辣椒切成丝，香菜切成段，然后放入盐、醋、糖，凉拌一番，就端上了餐桌。张作霖一尝，食欲大振，胃口大开，便向厨师问起这道菜的名字。厨师自知此菜本无名，是随意而为，可又不好据实回答，于是想到这菜是做给“东北虎”张大帅吃的，便顺水推舟地说：“这菜，叫老虎菜。”张作霖一听十分高兴地说：“吃老虎菜好开胃啊。”老虎菜后来走出张氏帅府，成为东北百姓的家常菜。再后来，老虎菜走出东北，又添加了香油、蒜蓉、辣椒粉等调味料，成为许多地方的旺销菜。一拌即成的老虎菜，居然成了一道名菜。
3. 究问其名，有人说这是创新菜，爽脆的黄瓜、鲜嫩的香菜、酸味的米醋、辣味的尖椒、大葱、大蒜，凉拌生吃，爽脆鲜香，强烈刺激舌尖味蕾，无法抵挡，如老虎一般，故称“老虎菜”。如此一说，也不无道理，也就如此这般地传开了。

关于菜料的营养和注意事情请参看百度百科的老虎菜条目。

所谓食物的酸碱性，是指食物中的无机盐属于酸性还是属于碱性。食物的酸碱性取决于食物中所含矿物质的种类和含量多少的比率而定：钾、钠、钙、镁、铁进入人体之后呈现的是碱性反应；磷、氯、硫进入人体之后则呈现酸性。

很早就看过《治疗癌症：酸性体质和碱性食品》，也听说过“弱碱性体质更健康，多吃碱性食物有助于保持身体弱碱性”。但最近有专家说：“明确一种因果关系：人体因不健康而‘酸’，并非因‘酸’而不健康”。人体处于亚健康或不健康状态时，体质确实呈酸性。但如果器官已经受损，即使有办法调整为碱性体质，也不可能恢复健康。人体有强大的激素、神经调整机制，其酸碱度就是通过神经体液调整系统来进行的。与其变着法的找碱性食品，不如维护好神经体液调整系统。要做到这一点，就要养成健康的生活习惯，平衡膳食，坚持适量运动等。

虽然有各种各样的观点，我也无意证明什么，不过从小三同学总结的酸/碱性食物表来看，碱性食物的确符合目前的健康饮食方式。

酸/碱性食物表

常见食 品 酸 碱 度 表