WEB标准化交流会让我认识了不少新朋友、今天更巧的是遇到了一年前项目合作过的同事：）

IE9的分享 重点在于IE系列终于迈向标准化 并且将GPU引入浏览器引擎，对于渲染速度和性能大大提升，同时透露出XP下无论哪个浏览器都是无法使用GPU加速的，虽然不知道这个说法的可信性，但是这次IE的预览，还是有一些收获的，至少让我们看到了浏览器越来越标准，当然更重要的是kill IE6！

第二场爱民老师的分享让我比较有收获，几个方面吧

1.解决问题的思路-共性、本质，找到问题的根源
现场的例子：以为运营说需要在这里加一个按钮，他的需求真的是要多加一个按钮么？实际上可能是觉得原来按钮的位置并不合适
2.系统框架、框架、库、应用的概念
说实话，听的确实有些模糊，不过两个例子很精彩，由浅入深的，讲解了是如何一步一步的抽象出最终的系统框架。
从我的理解，库是相互没有依赖关系的，框架是来将库进行一个抽象关联，而系统框架，是更本质的抽象出了某一类业务的底层逻辑包括一些必须的数据和逻辑关联

给我印象比较深的一张图片如下：

当我们更多的关注于插件机制、组建机制、消息机制的时候、我们更应该从需求变更、版本升级、产品整合的视角来看待他们的本质

而我的观点是-人人都是”架构”师

为什么这么说呢?哈,首先我所说的架构是加了引号的

我理解的”架构”呢,更贴近我们的生活,工作,架构可大可小,”系统架构师”可能我们确实需要很多积累、天赋，而我们要把架构的意识引入到我们的日常生活中来

几个例子：
1.职业规划 是不是架构？
2.当我们保存站点文件，站点文件的目录是不是架构？
3.CSS的reset、grid、form等算不算架构呢？
4.我们经常用js写的weiget又算不算架构呢？
……
我相信在我们的生活、工作中、架构无所不在-人人都是”架构”师

您可能还关注的？

• WEB标准化交流会第九期：前端工程师的知识收集与管理
• 2010年3月 – WEB标准化交流会 -腾飞吧前端们
• 第六期WEB标准化交流会 会后总结 By 刘钢
• 第四期 WEB标准化交流会 参会总结

CanvasPaint 是一个基于 HTML5 的标准 Windows 画图程序，它拥有和 Windows 画图程序一模一样的界面和操作，功能也几乎完全一样，在特定浏览器的支持下，你甚至可以将最后的作品保存到本机。这并不是最近的项目，2006年就有了， 因此，目前绝大多数支持标准的浏览器（Firefox，Safari，Chrome，Opera）都可以正常使用这个程序。以下是作者对这个项目的一些解 释。

为什么要开发这个程序？

目的不是为了开发一个 Windows 画图程序，而是体验 HTML5 的 Canvas 功能。

如何使用

和标准 Windows 绘图程序一样。

能保存吗？

是的，但只支持 Firefox 2 和 Opera 9 （译者注：这是作者2006年就实现的一个程序）。在本机保存，选择 File 菜单中的 Download，在线保存，选择 Save online，会自动生成一个 URL 在线显示你的作品。

浏览器本身的右键菜单影响使用

可以在浏览器的设置中禁用右键菜单。

为什么有些功能不能用？

一些功能支持特定版本的浏览器（译者注：这是就2006年而言）:

Color picker

Firefox 2.0

Opera 9

Flood fill

Opera 9

Save image

Firefox 2.0

Opera 9

Open URL

Firefox 1.5

Opera 9

Latest WebKit

Canvas 对象好用吗?

对那些不需要跨浏览器支持的应用很好用。但在绘画中，最大的问题是，受限于 mousemove 事件的刷新率，你不太容易发现光标的位置，使用喷笔的时候尤其明显。另外，当尺寸变得很大时，速度变得很慢，没有 getPixel() 功能。

技术细节

程序中使用了 5 个 Canvas 对象。

一个主画板，一个是透明画板层浮动在上方显示预览绘画内容，一个隐藏的 Canvas 用来缓存选择的内容，另一个用来缓存反悔状态，一个用在程序标题栏，用来显示渐变色。

其他人的 HTML5 Canvas 实验

Canvascape 3D （用 HTML5 实现简单的第一人称射击游戏）
CanvasGraph （一个 HTML5 Canvas 绘图 JavaScript 类库 ）
Image reflections （用 HTML5 Canvas 实现图像倒影）
Canvas Painter （一个更为简单的 Canvas 画图程序）

真正令人赞叹的 HTML 画图程序

如果上面的程序已经让你对 HTML5 的 Canvas 功能感到鼓舞，下面这个画图程序会让你赞叹 。拥有不输桌面的界面体验和流畅 感，在多屏幕电脑上，我甚至有将那些浮动工具面板拖到第二个屏幕的冲动。

演示地址：http://mugtug.com/sketchpad/

本文素材来源：http://canvaspaint.org/#
http://mugtug.com/sketchpad/

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

您可能还关注的？

• 揭秘HTML5和CSS3(2)
• 揭秘HTML5和CSS3(1)
• 你需要知道的CSS3 动画技术

先感谢一下北京腾讯给我们提供了场地，水，和公仔，今天听了很多“大虾”们的分享，感受颇深
就说一下小公司前端开发在研发中如何更好的协作吧 

今天会议上几个突出的词：“流程”，“沟通”，“专业“，“吃饭喝酒”：） 

那我就分别说一下自己的见解
1.“流程”，存在即是合理的，社会所必须承受的，就像高房价一样，很多时候“流程”被我们吹捧的就像一个神一样，貌似能解决一切问题，而实际上我认为，流程只是一个比较虚的东西，什么是流程？就是一种大家认可的协作方式，在中小企业里我认为无流程就是最好的流程 

2.“沟通”，为什么沟通？怎样沟通？今天腾讯的页面组leader说得好：“沟通就是情商，情商会从你的绩效考评里反映出来”，什么意思呢？也就是“强制沟通”，我认同这个观点，有效的沟通能够大大提升我们的效率，以及信息不对称等问题，我也希望所有的前端朋友们，一定要学会使用“沟通”这个武器，很多时候他能解决你技能所解决不了的问题 

3.“专业”，专业是什么？kejun兄补充的好-“专业就是饭碗”，我们要提升自身专业度，在研发流程中承担更多的职能，现在有多少公司里，后端不做一些“前端”的活呢？这也可能目前前端开发是“解耦”的最好途径 

4.“吃饭喝酒”，同事间朋友间，需要有一些私下的沟通与了解，适当的有些活动，能够在工作配合上更加的顺畅，当然了吃饭喝酒只是其中之一，更多的在轻松地环境下交流交流，增进一下友谊,本次讨论会后聚餐共16人哦：） 

kejun在最后公布了之前出的html面试题的答案 有兴趣的 移步这里
http://www.iamued.com/qianduan/1373.html

最后借用一张崔凯发的合影结尾吧：） 

第六期WEB标准化交流会合影{点击放大}

您可能还关注的？

• 第四期 WEB标准化交流会 参会总结
• 太NB了：Google Docs Ctrl + C 技术浅析
• WEB标准化交流会第九期：前端工程师的知识收集与管理
• 判断 iframe 是否加载完成的完美方法
• WEB标准化交流会第七期-人人都是”架构”师

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
下周（3.27）交流会上我会公布答案  点击查看第六期WEB标准化交流会 总结

＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题（引自http://twitter.com/RageCarrier/status/10712084993）考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点：

考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说

xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>

转自kejun的blog：http://hikejun.com/blog/?p=548

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 6-27 互联网那点事聚会—北京站
• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• 第六期WEB标准化交流会 会后总结 By 刘钢

　　北京时间3月17日消息，据国外媒体报道，微软当地时间周二发布了面向Web开发者的预览版IE 9(下载地址)。

　　微软IE团队总经理迪恩·哈克莫维奇(Dean Hachamovich)今天发表声明称，IE 9与以往的IE版本有很大不同。他表示，微软将每8周对预览版IE 9进行一次升级，第一次升级将在5月中期。但哈克莫维奇没有披露正式版IE 9的发布时间。

　　微软称，预览版IE 9还不是一款完整的浏览器，目前还不包括地址栏等用户导航工具以及安全功能。微软发布了一个它称之为“Test Drive”的网站，方便网站设计人员、应用开发者了解预览版IE 9的功能。

　　预览版IE 9只支持Windows 7、Windows Vista SP2和Windows Server R2。IE 9可以利用图形处理器的处理能力加速文本和图形的渲染。

　　用户可以从Test Drive网站下载大小为31MB的预览版IE 9。（阳光）

　　附：IE 9预览版下载地址：http://ie.microsoft.com/testdrive/

您可能还关注的？

• offsetLeft and offsetTop gives wrong coords in IE

面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的 前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸索，我总 结出了自己的一套很有效的面试前端工程的方法。

有的应聘者说我不好对付，但留给他们这样的印象也并非我所愿。我觉得之所以他们说我不好对付，主要是因为我问他们问题时问得太细了。以前我曾专门写过一些东西，告诉应聘者怎么才能通过我的面试以及怎样才能成为优秀的前端工程师应该具备什么样的素质，而我的面试可以说完全是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题，也不认为出几道逻辑题就能考出人的真实水平。我唯一的想法就是确定你能否胜任我们要招的这个职位。为此，我需要简单地考察如下几个方面。

基本知识

我们生活在互联网时代，你想知道的任何事情几乎都能在15分钟内找到相关信息。可是，能找到信息并不等于你会使用它。我认为所有前端工程师至少都应 该掌握某些基本的知识，才能有效地完成自己的工作。如果一遇到问题，就停下工作上网四处搜索解决方案，怎么可能保证按期完成工作呢？听听，还有谁在说“我 不知道，但我可以上网搜到。”请这些同学把手举起来，让大家认识一下（immediately raises a flag for me.）。下面我列出一些基本的知识点，这些都是我认为一名前端工程师（无论工作年头长短）在没有任何外来帮助的情况下就应该知道的。

• DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
• DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
• 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
• XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
• 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
• 盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。
• 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
• 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
• HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
• JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

重申一下，上述这些知识点都应该是你“想都不用想”就知道的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到，但我觉得你至少应该掌握这些，才有可能跟我坐到一间办公室里来。

少量提问

我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平，也很无聊。我在任何一次面试中，通常只问三个大问题，但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤，这样我就可以在每个步骤中穿插着问一些小问题。比如说：

这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你换一种处理股票价格的方式，或者让 你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富的应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区 别、安全问题、容量问题，等等。

我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。我需要的是真正理解库背后的机制，特别是能够徒手写出一个自己的库的人。

解决问题

做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘 者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到 两个目的。

首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都 明白。可是，只要一跟这些人谈到怎么查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够 好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。

其次，可以测试出他们已经掌握的（还是那句话，“想都不用想”就知道的）浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。

对一名前端工程师来说，这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很平常的事。一个方案无效就无计可施的人，做不了前端工程师。

考核应聘者解决问题能力的另一层原因，与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后，我就会想着问一个他们知识领域之外的问题。这样 做的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一言不发，对我 评价这个人毫无帮助）。我真正感兴趣的，是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。

注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的信息。

有激情

要成为一名优秀的前端工程师，最重要的莫过于对自己做的事要有激情。我们的技能都不是从学校中或者研讨会上学来的，因此前端工程师必须具备自学能 力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐 怕还是必须得这么做。

你怎么知道谁对这种工作有没有激情？实际上非常简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣？”这个问题永远不会过期，而且也几 乎不可能出错……除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有 对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能；这些人才是我真正想要的。当然，我会让他们详细解释自己提到的技术，以保证他们不是随 口念叨了几个时髦的新词汇。

最后一点

计算机科学或者Web设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可 是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。另外，高级前端工程师与一般工程师相比，肯定需要掌握更多的技能。而面试几 乎没有经验的大学毕业生，我也会有一套完全不同的程序。我在这篇文章里列出来的都是一些最基本的东西。

对于那些还没有多少面试经验的人，我总是喜欢告诉他们，面试完了只要问自己一个问题就行：你想以后跟这个人在一起共事吗？如果不管为什么，回答是不，那就是不。

免责声明：本文的任何观点与意见都只跟Nicholas C. Zakas有关，与Yahoo!公司、Wrox出版公司、O’Reilly出版公司乃至其他任何人无关。我在这里说的话，仅代表我自己，不代表上述公司。

你可以在这里留言，也可以在你自己的站点上发送一个引用通告。

您可能还关注的？

• 精品学习网招聘产品经理/产品专员

腾飞吧 前端们

本期新增深圳站的交流！

• 话题：前 端开发在研发流程中与其他岗位协作效率的提升
  1. 研发流程
  2. 协同规范
  3. 有效沟通

  有 想法？去讨论

• 时间：2010-3-27 14：00－18：00
• 报名时间：2010-3-1 至 2010-3-21 交流会邀请会在3-23日统一发出，请留意您的邮件。
• 地点：
  • 北京：海淀区中关村腾讯北京
  • 上海：携程旅行网 上海市长宁区福泉路99号[地铁2号线淞虹路终点站5号口出]
  • 广州：天河区天河路208号粤海天河城大厦39楼新浪公司
  • 深圳：深圳市南山区高新南一道飞亚达大厦508室

W3Ctech-交流会 官方网站 http://www.w3ctech.com/

您可能还关注的？

• WEB标准化交流会第九期：前端工程师的知识收集与管理
• WEB标准化交流会第七期-人人都是”架构”师
• 第六期WEB标准化交流会 会后总结 By 刘钢
• 第四期 WEB标准化交流会 参会总结

CSS 高级应用 Photoshop

JavaScript 拓展技能 Ajax+UE+SEO+PHP+Mysql 文章摘要 前几天有一个网友留言，提到他正在阅读 “Javascript,CSS,XHTML,Ajax,jQuery” 等等一系列书籍。回想我上学的时候，也是看了很多东西，最终却没有用上，所以，在此写写自己学前端的一些感想。

前端这一行，入门并不困难，掌握XHTML+CSS之后，基本上就可以找到一份工作。
其他的东西，我们可以入职后再慢慢学习。

1. 那怎么才算掌握？掌握到什么程度？
   检验自己水平的最好方式就是实战！学代码，就要边学边做。
   这是最基本的东西，一定要把基础打扎实。
2. 做什么内容？
   我们既然是做前端的，为什么不用标准化的语言来写自己的简历？同样出去找工作，递一份doc的简历好使，还是递一个通过W3C验证的页面更有说服力？实在 不知道拿什么东西练手，甚至可以去重构yahoo的网站，看看他们怎么写的，再对比一下自己的代码。琢磨琢磨他们为什么那么写，有什么优点，有什么缺陷。

之后呢？

1. 掌握JS
   进了公司门，从第一天开始，就要学习JavaScript， 玩到精。JS也是前端必备的技能之一。之所以把它列出去，是让初学者有一个渐进的步骤。同时学太多东西，难以消化，这样分开一步一步的玩精通，压力会小一 些。学完这个，基本上就可以称为一个前端工程师了，对将来的工作非常有帮助。
2. 选择性掌握PS
   Photoshop也是一定要学的，学到什么程度可以根据你自己的需求来定。如果将来想自己做单子，那PS就要玩的很地道。如果将来靠前端吃饭，去大公司 是不需要前端开发做设计稿的，会分层切图就可以了。当然，如果PS玩的很好，是不错的事情。

最后谈一下拓展技能

1. Ajax、jQuery
   这些绚烂的名词，等你工作1-2年，JavaScript玩的烂熟于心的时候，自然会接触到。把他们列为拓展技能，是因为目前中小型企业的网站上应用这些 还不是很多，甚至应用JS的都不是很多。做到前边几项基本上就可以找到一份工作，再掌握这些，自然是画龙点睛之笔。但我的建议是，不妨先看一下下面几个技 能，我个人感觉，更有价值。
2. PHP+Mysql或者ASP或者JSP或者….
   职业的特殊性决定了我们需要跟后端工作者频繁的沟通，掌握这方面的一些知识有利于更有效的交流问题。提升前端在整个团队中的形象，进而提升自己的待遇。另 外，学好这部分东西，有企业找你做网站的时候，你可以拿的更稳妥。至于学PHP还是学JSP，根据自己的爱好来定，我个人比较喜欢 PHP，wordpress是很好玩的东西。
3. SEO+UE（用户体验）
   用户体验是王道，而SEO是吸引用户的王道。我投入了很大的精力在这一领域，所阅读的书籍甚至比前端的书籍还要多。当然，我也一直认为UE就是前端开发不 可缺失的一部分。玩好这一点，往上，可以晋升到产品经理、部门经理的位置；往下，可以博得自己客户的满意。况且这东西并不难学，多留神观察生活就是了。何 乐而不为？

做好一个前端开发工程师，并不是我们最终的目的，前端是一个一专多长的职业，为什么不放大一下自己所学的知识，去做更有意义的工作？掌握了这些方方 面面的技能之后，就已经具备了独立运营网站的技术实力。希望大家能更灵活的运用自己所拥有的能力，做更绚丽的作品，仅以此文共勉。

本文转自：崔凯的blog http://uicss.cn/front-end-developer-needed-technical/

您可能还关注的？

• [分享]W3C Javascript 最新Chm格式下载
• 如何量身打造一个前端框架
• 一个在线JS代码调试器:jsfiddle
• 测试你的JavaScript能力？ 我还需要恶补！
• 你需要知道的CSS3 动画技术

说说具体的吧：昨天的话题分为2个阶段 1.javascript 2.html5+CSS3

总结一下：
第一个阶段 由几位嘉宾先讲了一下 我听得有些糊涂 可能昨天的话题范围太广了 不过收益颇深
我比较统一kejun的观点 无论自己写的js库，第三方的库，主要都是从那几方面入手
1.DOM标准 提供一些标准的DOM操作功能[event,选择器,等等……]
2.ajax支持，FX（一些效果）支持
3.通用的一些widgets
那么现在我们所缺乏的 也就是JS的组织 与管理 ;月影讲的百度有啊在写的js库 也是更多的像这方面靠拢
[YUI3 已经有一些依赖机制 等方便我们管理自己的JS]

第二个阶段：可能HTML5+CSS3离我们真的很近 但是离用户却有些远的原因吧 话题交集在浏览器上面了

目前IE系列浏览器没有对HTML5和CSS3的支持 而在目前的情况 IE的市场占有率确实>50%的
所以话题最终结论可想而知
1.针对自己所处的行业与用户群来适当的进行一些尝试
2.可以用渐进增强的方式 为高级浏览器用户 提供更好的体验
3.作为专业的前端工程师 我们必须去学习与研究新的技术

再上几句会议上经典的：
你该换家公司为中国互联网做贡献了！
前端工程师的价值不在于切页面,也不在于极快地切页面
你用IE6！你全家都用IE6！
用IE收手续费 用其他浏览器优惠！
前端不可以挣钱　但可以省钱！

您可能还关注的？

• 第六期WEB标准化交流会 会后总结 By 刘钢
• 太NB了：Google Docs Ctrl + C 技术浅析
• WEB标准化交流会第九期：前端工程师的知识收集与管理
• 判断 iframe 是否加载完成的完美方法
• WEB标准化交流会第七期-人人都是”架构”师

ZenCoding项目地址：http://code.google.com/p/zen-coding/

先说环境 我是在MyEclipse > aptana 下面安装的Zen Coding

安装方法不难 建立一个项目 新建一个文件夹叫 script 然后把Zen Coding拷贝进去就可以了

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用 Aptana，下面的第一步可以跳过。

1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如 果你使用Aptana，可跳过这一步)
2. 在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
3. 在新创建的项目中创建scripts文件夹
4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
5. 安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项：

• Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
• 官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失

试用了一下发现确实很爽

具体的看下面介绍

做一个简单的Demo

html:xxs

div#header>div#logo.left+ul#menu>li*5>a

两行代码下去 生成的结果

</p>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p>
<p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></p>
<p><head></p>
<p>	<title></title></p>
<p>	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /></p>
<p></head></p>
<p><body></p>
<div id="header">
<div id="logo" class="left"></div>
<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<p></body></p>
<p></html></p>
<p>

方便快捷 下面介绍一下选择符用法

这里是一个支持的属性和操作符的列表：

* E

元素名称(div, p);

* E#id

使用id的元素(div#content, p#intro, span#error);

* E.class

使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

* E>N

子代元素(div>p, div#footer>p>span);

* E+N

兄弟元素(h1+p, div#header+div#content+div#footer);

* E*N

元素倍增(ul#nav>li*5>a);

* E$*N

条目编号 (ul#nav>li.item-$*5);

具体的还要等我用熟了再给大家介绍了

本文部分内容转自互联网

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• 第六期WEB标准化交流会 会后总结 By 刘钢
• kejun的HTML面试题答案揭晓