本篇文章介绍了10种，前端开发者要掌握的技能；并且这些技能可以让前端开发者价值百万。准确的说，这些技能可以让你能够轻松步入百万富翁的行列。
哪些技能呢？下面就列出这10项技能，看看你符合价值百万的前段开发者的队伍中嘛？
现在的开发工具，有用的开发工具数以千计。快速掌握新工具将是你的首要技能。比如：Kissmetrics\Usabilla\Padi Act。
墨守成规，可不是前端开发者应有的素质。
前段开发者的工作，重点在于如何进行设计上的迭代式开发。你可以使用大量工具并进行数十次的测试。但同时也要是前段代码、速度、拓展性、质量等的守护者。
大部分的前端开发者需要从开发者那里获得帮助，所以良好的沟通技能不可或缺，在没有产品经理的情况下更是如此。
前端开发者的工作之一是保证站点的前端代码，那么应用如何工作的，那就必须要知道了。更改或优化JS代码，你需要有这个能力。
前端开发者对设计要有感觉，并且可以再利用原有的设计。当然你也许有做Photoshop或HTML/CSS的高手，但是他们也都是很稀缺的。所以前端开发者要对设计有那么一定的感觉。
很努力的优化、测试，但很多时间也会得到糟糕的结果。这就要求前端开发者敢于测试，甚至明知道可能会失败。要拿出令人信服的数据来，可有效规避让你的老板涉入其中，那将非常糟糕。
不同的web网站都有转化率的要求，这只是老板关注的？No。某些时候转化率的提升将遇到阻力，而变得很困难。这时候前端开发者需要大胆的尝试。作为这个职位，你应该喜欢转化率提升的请求，否则你将会失去前进0.1%的动力。
你能写HTML，CSS，以及JavaScript，都应该保证易于后期操作。相信一定会有障碍在于后期的维护和再利用上面。所以你要学会“轻松重复利用”的含义，并予以贯彻实施。
速度很重要，Google已经将速度加入到了搜索排名的因素当中。有的网站已经很快，alexa或其他分析工具或许是如是结果，但是Google可能说它太慢。速度性能优化，必须掌握！
原型设计的需求，不仅仅是团队分享一个观点。快速的原型设计能力，将让你更好的把控web交互、思想主动传播。所以，精通一件顺手的原型设计工具吧，推荐进入OSCHINA的界面原型设计工具分类进行选择。
前端开发的重视度将超过（或许已经超过）后端开发，你不觉得吗？前端开发者将越来越重要。确保你掌握了上述的10项技能，那么你离百万富翁不远了。
原文出处：10 Skills to Become a Frontend Developer worth Millions
译文出处：10项技能让前端开发者价值百万
里面的有些说的有道理，转发一下。关注你的产品，关注你的输出对产品的影响
HTML5的富媒体体验，浏览器厂商更多的需要在硬件层来加速各种体验了，下面来看看ie9是如何在硬件层来进行加速的吧：
Johnson在文中表示，IE9图形硬件加速能够应用到每个网页上的所有内容，图像，背景，边框，SVG的内容，HTML5视频和音频，使用Windows的DirectX图形API。在7月份发布的第三个平台预览版，IE9介绍了硬件加速应用在HTML5画布中。
IE9在渲染HTML页面中使用硬件加速的主要步骤：
[caption id="attachment_537" align="aligncenter" width="916" caption="ie浏览器html渲染过程"][/caption]
内容绘制：IE9加快了第一阶段的内容渲染，使用Windows的Direct2D和DirectWrite子系统。 加快这一阶段使用GPU（图形处理单元），提高了最常见的HTML元素的显示性能：文本，图像，背景和边框，让文字和矢量图形的显示更流畅。
页面组成：在第二阶段IE9使用Direct3D。加快这一阶段利用GPU的最显着的优势：能够以极高的速度绘制位图图像。此外，由于GPU为图像保留的私有内存，让网页图像重绘的速度非常快。
桌面组成：经过浏览器呈现的网页内容组成。Windows Vista和Windows 7使用GPU通过桌面窗口管理器（DWM）来完成最后的屏幕显示。由于IE9使用DirectX和唯一的DirectX，使得IE9和DWM有更好的互动关系。
在IE9中，开发人员能够使用完整的硬件加速。实际上，完整利用GPU是一项极具挑战性的工作，直接写至中级层和库而取代操作系统的本地支持就更加困难了，但是Windows的DirectX在对3D游戏的支持中获取了大量的经验，是当前最高性能的GPU渲染系统。
当你使用其它支持硬件加速的浏览器测试IE Test Drive网站上的项目时，你会发现其性能在某些方面能与IE9不分上下，但是在很多方面相差甚多。这种差距就反应了完整硬件加速和部分硬件加速之间的区 别。因为IE支持最新出现的Web标准，它们也可以使用完整的硬件加速。
HTML5视频的硬件加速就是一个例子，在MIX10大会上，微软演示了使用硬件加速视频的效果；3月份的时候微软还演示了在一台上网本上播放两个高清720p视频，而且仅占用了极少的CPU，其它浏览器却累惨了CPU，还出现了丢帧显现。
转自：http://www.iefans.net/ie9-tuxingjiasu/
你最近可能已经听到了很多关于Flash是面临垂死挣扎的技术以及它将如何很快被HTML5的取代。就个人而言，我认为HTML5会慢慢取代一些Flash的东西，但Flash会永远有它的一席之地，特别是开发复杂的游戏和丰富的互联网应用。如果你还没有看到HTML5动画是怎么样做的，我这里收集了10个演示，显示了它的一些出色的动画能力。 那么，你认为——HTML5会取代Flash吗？
Canvas Minimal Particle Animation
（字体动画，可以输入文字自定义，不过就像世界上很多东西一样，这个也不支持中文。）
CanvasMol
（这一个真实吓我一跳，截图是著名的C60分子结构，3D动画，很多自定义选项，真的跟Flash没什么两样。点击左边列表还可以看到更多3D动画的分子结构。）
Flickr and Canvas in 3D
(这个cb之前新闻贴过了。点击上面的方块就显示出图片。)
Cloth Simulation
(布料模拟动画，接触过3D的人应该知道这种效果。)
etchaPhysics
（一个游戏动画，用画笔一些东西，点击时钟之后这些物体会受重力掉下来，游戏我没去细看，动画亮点就是模拟重力和刚性反弹吧。）
Google Images Gift Box – CSS 3D example
（可旋转的立体盒子，可以在上面输入内容然后点搜索，盒子就打开，不过好像没搜索出内容。）
Liquid Particles
（流体粒子动画，也是3D动画的一个手段。不过如果像那些3D软件一样粒子可以替代成物体，那真是太伟大了。）
HTML5 Canvas Nebula
（星云动画，通过静态图片实现。个人认为早前的Javascript也能实现，不过可能效果没那么好。）
Ball Pool
（弹性球动画。模拟重力和弹性。）
Bomomo
（几个漂浮的泡泡是画笔，可以在画布上画画。）
(作为动画，有很多种形式，时间轴动画，重力模拟，软体模拟，弹性等多种动画效果。其实所看到的HTML5动画相比以前的看到的并非有很多高明之处，最大 的区别可能就是HTML5新元素画布，这个元素的动画可操作性相比图片要好很多。不过我觉得在IT业界里，事物的新颖与否并非全在于技术的革新，而在于概 念的新鲜，就像当初的Ajax一样，技术没什么变化，但是带来了极好的用户体验。)
来源：WebDesignledger
编译：MazingTech
HTML5 渐入佳境，它强大的功能正被逐渐挖掘出来，各种实验性应用层出不穷，本文介绍几个由 Hakim El Hattab 设计的 HTML5 趣味小应用，它们非常有趣，我刚刚在它们身上消磨了两个小时。当你体验完这几个小应用，会发现 HTML5 比你想象的更强大。
Sinuous
在浩瀚的星系间履行，小心装上些红色的星球，绿色的星球可以吃掉，可以增加体能。
开始体验 >>
Bakemono
鼠标在页面空白位置点击，这个小怪物会扑过去。
开始体验>>
Keylight
我太喜欢这个小程序了，在一个空房间，双击鼠标，会放置上一个小球，当放进两个小球的时候，一道粒子束在两个球之间撞击，并发出悦耳的声音，随着小 球的增多，粒子束在每个小球之间穿梭撞击，离你越近的小球，声音越清脆，音调越高，这样就形成了连续的音乐。
开始体验>>
Blob
一些果冻样的东西，会滑向你鼠标点击的位置，在果冻球体中间点击，会将它扯成两半，它们在到处滑动的时候，还会再溶合到一起。
开始体验>>
Magnetic
也是我最爱的一个小程序。鼠标在夜空中双击，可以创造一颗恒星，同时创造出十几颗卫星绕着它转，你可以创造很多这样的恒星系，当它们中的某些靠近到 一起形成质量比较大的恒星系的时候，可以吸引更多的卫星绕着它们转。
开始体验>>
Trail
五颜六色的彩带，随着鼠标飘动，鼠标不动的时候，便围着鼠标箭头旋转，非常简单，但很流畅，视觉效果很漂亮。
开始体验>>
Particle Depth
很 Cool 的三维效果。
开始体 验>>
Wave
水面随着鼠标形成波浪，水面的浮球也随着沉浮，效果非常棒。
开始体验>>
Particles
粒子在屏幕上飘动，遇到鼠标的时候膨胀。
开始体验>>
译者注
这组 HTML5 实验应用加载速度非常慢，初以为是 HTML5 本身性能的问题，研究过源代码才发现，原来页面上调用了 Twitter 的饰件（http://platform.twitter.com/widgets.js）， 因为世界上压根没有 Twitter，我们早就知道，但这些网页不知道，所以还傻傻地去连接，浪费了大量的时间。使用 Godaddy 的服务器测试，每个页面大约需要 0.2 秒就打开了。有人说，他们代表先进生产力。
本文素材来源：http://hakim.se/experiments/
中 文编译来源：锐商企业CMS 网站内容管理系统 官方网站
0
顶一下
//
//
<!doctype html>
使用这句精简的doctype声明后，可以节省不少的工作量，一方面便于记忆了，一方面节省流量了，一方面还能更好的兼容各个浏览器；三大好处，正是何乐而不为呢。
平时的过程中我们常常用到两种doctype，一种是xhtml的strict和Transitional。如果不指定doctype的话，会导致一些浏览器使用一种“兼容模式”来进行处理，如ie6浏览器会使用ie5的解析方式来解析。兼容模式的说明在wiki上说的很清楚，可以看一下：http://en.wikipedia.org/wiki/Quirks_mode
这是html4的strict的dtd的声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
这个链接里面http://htmlhelp.com/tools/validator/doctype.html可以看到诸多种类的dtd的声明和对应的说明。不同的doctype声明中支持的标签和浏览器解析模式都各有不同。
google以及国内一些网站如baidu这些的doctype声明都是使用<!doctype html>，使用这个的好处上面已经说了。为什么使用这个可以解决问题呢：
通过下面这段代码，可以知道你的浏览器在这种doctype声明下是如何来解析网页的，是否启用了“兼容”模式：
代码来源：http://themaingate.net/dev/html/all-you-need-is-doctype-html
<!doctype html>
<html>
<head>
<title>Doctype Test</title>
</head>
<body>
<script type="text/javascript">
var mode = document.compatMode;
if (mode === 'CSS1Compat') {
document.write('This document is rendered in <em>Standards mode</em>.');
} else if (mode === 'BackCompat') {
document.write('This document is rendered in <em>Quirks mode</em>.');
} else {
document.write('This document is weird. document.compatMode = '+mode);
}
</script>
</body>
</html>
在我的firefox下运行是标准模式。ie6、7.firefoxe2、3，opera9.5，safari3.1这些A级浏览器都支持这种简写的声明方式。关于浏览器的级别参考yahoo的这里：
http://developer.yahoo.com/yui/articles/gbs/
更加有优势的是<!doctype html>的使用是兼容html5的，呵呵：
http://dev.w3.org/html5/spec/Overview.html#syntax-doctype
A DOCTYPE is a ...
收到用户反馈说在readyonly的input上也可以使用QQ云输入法来进行输入，自己试了一下，的确可以，后续会来修正这个问题；但是disabled的input是不可以输入的，桌面客户端的输入法是不可以的。于是查了一下readonly和disabled两个属性，简单的总结一下，作为以后的备注：
1 适用于的控件：
disabled：BUTTON, INPUT, OPTGROUP, OPTION, SELECT, 和 TEXTAREA
readonly：INPUT and TEXTAREA
2 控件行为方面：
disabled：不能focus；tab键切换无用；form提交时不会进行提交
readonly：可以focus，但是不能输入；tab键切换有用；form提交时会进行提交
3 表现形式：
disabled：一般都是灰调的
readonly：正常显示
4 两个属性都可以通过javascript来进行改变。
试试下面这段代码就知道了：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML readonly disabled 属性示例</title>
</head>
<body>
<form id="test" action="http://localhost/test.php" method="get">
<fieldset>
<legend>readonly单行输入域</legend>
<label for="notinput">无法输入的单行输入框</label>
<input id="notinput" name="notinput" type="text" value="readonly" readonly="readonly" />
</fieldset>
<fieldset>
<legend>多行输入域</legend>
<label for="notinput">无法输入的多行输入框</label>
<textarea cols="50" rows="10" id="textarea" name="textarea" readonly="readonly">readonly</textarea>
</fieldset>
<fieldset>
<legend>disabled单行输入域</legend>
<label for="notinput">无法输入的单行输入框</label>
<input id="notinput" name="notinput" type="text" value="disabled" disabled="disabled" />
</fieldset>
</form>
</body>
</html>
查阅了一下w3c的关于form的文档，很受启发，之前自己还是有一些忽略的地方啊。
参考文献：
http://www.w3.org/TR/html401/interact/forms.html#h-17.12
http://www.w3.org/TR/html401/interact/forms.html
HTML5 越来越引起人们的关注，苹果甚至将 HTML5 视为 Flash 的掘墓人。然而，作为一种尚未成型的技术，HTML5 对很多人来说仍然是陌生的。本文收集了15 个非常值得收藏的 HTML5 资源，这些资源可以让你同 HTML5 的发展保持一致，并始终处于这门技术的最前沿。
1. WTF is HTML5
这是一个关于 HTML5 Infographics 的站点，包含诸如 HTML5 同 Flash 的对比，HTML5 不同浏览器支持情况，HTML5 最受欢迎的功能等资料。
2. Dive Into HTML 5
Mark Pilgrim 是知名软件开发师与博客作者，他在线编写了一本有关 HTML5 的书，侧重 HTML5 的编程方面的功能。
3. HTML5 Doctor
发布 HTML5 相关的文章，介绍目前我们可以借助 HTML5 实现的应用。站点中的一些文章和栏目，也是 HTML5 相应技术的最佳注解，如 dl element ，article element 以及 ...
前面我们已经将html代码写的合乎语法，具备语义，能够在很多环境被较好的解释。
我们觉得说可以上线了，但是上线之前我们还需要来衡量一些其它的因素，如系统的安全性、性能考虑、页面的内容是否正确等。
上线前，我们还需要好好的检查代码里的如下这些方面：
1 需要安全考虑的HTTP请求，使用POST来替换GET方式。考虑一下：搜索引擎来请求会怎么样，用户访问一个超时的连接会怎么样？
2 替换可以通过GET方式获取的地方为GET。GET方式通过URL而不一定要是form来访问，能够回退、cache、预先抓取、收藏。需要注意参数长度有限制
3 在不怎么变化的情况下使用cache，在易变的情况下关闭cache，如果变动实在太频繁的话，需要使用etag来辅助缓存
4 flash使用时需要注意会牺牲一部分用户
5 适当的时候将联系表单更改为mailto，方便用户直接发邮件进行交流
6 设置适当的robots.txt规则来阻挡一些无谓的请求。
User-agent: *
Disallow: /cgi-bin
Disallow: /store/checkout
User-agent: Googlebot
Disallow: /staging
Disallow: /experimental
环境已经搭好了，我们还需要做什么呢？
呵呵，我们还需要检查一下页面内容是否都是正确的：
1 流畅的内容表达，避免误拼。尽量避免一些带有歧义的表达，错别字等
2 删除那些失效的连接，可以使用这两个工具：http://validator.w3.org/checklink http://www.linklint.org/
3 如果删除了页面，尽量提供跳转给用户到新的页面上来，或者统一的给用户提示。
RewriteEngine On
RewriteOptions MaxRedirects=10 inherit
RewriteBase /
RewriteRule ^examples(.*) books/jdr/examples$1 [R]
4 将内容尽快的展示给用户，而不是让用户自己去导航。尽量少弄欢迎页这样的东东
5 对于一些敏感信息，如email这样的，尽量的隐藏起来，避免一些恶意的爬虫来爬取
<a href="mailto:elharo%40metalab%2Eunc%2Eedu">E-mail Me</a>
呵呵，上述都已经检查好了，跑一遍测试用例，在预发布机上进行一次校验，没有问题后，上线吧。
学习完html的语法后，我们按照html的语法来撰写html代码，是否这样的代码就是最好的代码了呢？
呵呵，xhtml中规范了各个标签更多的语义性，关注完语法后，我们需要根据实际的语义来使用合适的html标签，
从而使得我们的代码具体更多的适用性，不仅能够被桌面浏览器阅读，同时能够被盲人阅读器阅读、同时能够在
一些手机终端上被较好的阅读、以及搜索引擎很好的解释等等。
接下来，我们让html代码语义话起来:
一方面，我们从布局来让html语义起来：
表现和内容相分离。DIV+CSS的使用。注意按照百分比来设置宽度。让不同大小分辨率的用户能够受益。
1 尽量将内容DIV写在最前面，最重要的放在最前面。(跨越侧边栏、顶部、底部)
2 尽量少的使用frame。对用户而言，添加书签、导航、滚动条、标题栏都会因frame的使用带来麻烦。对于robot，frame显得很不用好，常常会索引到某一个子页面。
3 在列表的地方尽量使用ul、dl或者ol。(dl一般用于键值解释的情况下)
ul li:after {
content: ", ";
}在每一个列项后面加上一个，号(ie下没有效果)。
4 需要标识的元素尽量分配一个独立的id给他们，如<div id="content"></div><div id="menu"></div>。
5 尽量给每个img标签都设置宽和高。浏览器渲染会更快一些。
另一方面，我们让html语义代码更多兼容不同的环境：
1 盲人阅读：
替换img为h文本。尝试使用背景图
2 为form表单的非隐藏的输入项增加label标识，如input、textarea、select等
3 为form表单中的每个输入项取一个有意义的名字
4 合适的话，尽量去掉表单的自动回填。autocomplete=”off”。自动回填能够减少一定的输入工作量
5 为表单中可编辑的项设置对应的tab快捷键。这样的话，方便通过键盘就能直接进行连续的输入。a、area、button、input、object、select、textarea支持tab键属性。
Tabindex的值从1到32767(有符号的short)，溢出从1开始算起
6 为视觉障碍者在页面的顶部提供一个锚结点直接到内容部分，从而能够轻松的跳过导航这些部分的内容。
7 页面内容过长时，通过h1~h6来组合标题便于阅读。
8 表单输入项尽量弄大一些，方便输入。一些textarea尽量高一些，宽一些，少来点滚动条。
9 为table增加描述信息。合适的话，为table增加一个summary属性，一个caption标签，通过th来增加列说明。
10 使用abbr和acronm标签来表示缩写
11 使用lang属性来标识每个根节点的语言
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en-US" xml:lang="en-US">
<body>
<p>Pierre shouted,
"<span lang="fr" xml:lang="en-US">Vive la France!</span>"
</p>
</body>
</html>
了解了一些html的基本语法后，我们需要在事件中来强化理解，从而加深影响，以后使用起来就会更加的得心应手。在实践中会有一些更多的细节的地方需要我们自己去斟酌和考虑。
了解html基本语法后，我们需要实践来学习html的语法，从而加深理解:
1 为了兼容，使用transitional的DTD来对文档进行校验。
2 删掉已经不再支持的一些标签。如sound、marquee等。
3 为每个img标签都加上一个alt标签。方便那些视觉障碍，或者兼容后续的一些语音浏览器、google、baidu等一些图片搜索更多会依赖alt属性来表示一张图片。
4 使用object标签来替换embed标签。Embed标签不是标准的，虽然同时可以存在任意多个属性，然而Object可以通过param来传递属性
<object
width="160" height="600">
<param value="sameDomain" />
<param value="banner.swf" />
<param value="high" />
<param value="#006699" />
<embed src="banner.swf" quality="high" bgcolor="#006699"
width="160" height="600"
align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
为了兼容一些老的浏览器，可以在object里面写上embed标签来做兼容。
5 尽量使用strict的DTD。由于strict的DTD删除了一些遗留的表现元素的标签，需要做一些圆润的处理:
1) center用css来取代text-align:center
2) font用css来取代font-size、font-family、color
3) 替换i标签为em或者span。由于i标签更多是表现而无语义，所以在一些无显示的浏览器上并没有效果。
4) 替换b为strong或者span
5) 使用css属性来替换color属性
6) 将img标签中的诸多属性移动到CSS中来
7) 替换applet为object
8) 用css来表示big, small, strike, s, ...