Daniel Wang

CSS3 Please

danielwang130@gmail.com (Daniel) — Sat, 13 Mar 2010 16:59:00 PST

CSS3 Please一个在线生成跨浏览器的CSS3代码的网站，很直观，也很方便，现在支持的CSS 3属性有圆角、阴影、渐变、自定义字体、旋转、rgba色彩。即将支持的还有其他的一些 css transform。

用法很简单，点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。

即刻体验：http://css3please.com/

事实上，现在支持这些CSS3属性的浏览器大都没有完全的支持W3C标准属性，而是采用自己的私有属性，这显然增加了开发的复杂度，也给将来的维护带来一些不确定性。不过貌似chrome dev版开始支持原生的border-radius了。

What really happens when you navigate to a URL

danielwang130@gmail.com (Daniel) — Thu, 25 Feb 2010 18:06:00 PST

原作者：
来源What really happens when you navigate to a URL
译者litfresh

作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。
本文将更深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～

1. 首先嘛，你得在浏览器里输入要网址:

2. 浏览器查找域名的IP地址

导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：

浏览器缓存 – 浏览器会缓存DNS记录一段时间。有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

DNS递归查找如下图所示：

DNS有一点令人担忧，这就是像wikipedia.org 或者 facebook.com这样的整个域名看上去只是对应一个单独的IP地址。还好，有几种方法可以消除这个瓶颈：

循环 DNS 是DNS查找时返回多个IP时的解决方案。举例来说，Facebook.com实际上就对应了四个IP地址。
负载平衡器 是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。一些大型的站点一般都会使用这种昂贵的高性能负载平衡器。
地理 DNS 根据用户所处的地理位置，通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态，但映射静态内容的话非常好。
Anycast 是一个IP地址映射多个物理主机的路由技术。美中不足，Anycast与TCP协议适应的不是很好，所以很少应用在那些方案中。

大多数DNS服务器使用Anycast来获得高效低延迟的DNS查找。

3. 浏览器给web服务器发送一个HTTP请求

因为像Facebook主页这样的动态页面，打开后在浏览器缓存中很快甚至马上就会过期，毫无疑问他们不能从中读取。
所以，浏览器将把一下请求发送到Facebook所在的服务器：

GET http://facebook.com/ HTTP/1.1
 Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
 User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
 Accept-Encoding: gzip, deflate
 Connection: Keep-Alive
 Host: facebook.com
 Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

GET 这个请求定义了要读取的URL： “http://facebook.com/”。浏览器自身定义 (User-Agent 头)，和它希望接受什么类型的相应 (Accept and Accept-Encoding 头). Connection头要求服务器为了后边的请求不要关闭TCP连接。
请求中也包含浏览器存储的该域名的cookies。可能你已经知道，在不同页面请求当中，cookies是与跟踪一个网站状态相匹配的键值。这样cookies会存储登录用户名，服务器分配的密码和一些用户设置等。Cookies会以文本文档形式存储在客户机里，每次请求时发送给服务器。

用来看原始HTTP请求及其相应的工具很多。作者比较喜欢使用fiddler，当然也有像FireBug这样其他的工具。这些软件在网站优化时会帮上很大忙。

除了获取请求，还有一种是发送请求，它常在提交表单用到。发送请求通过URL传递其参数(e.g.: http://robozzle.com/puzzle.aspx?id=85)。发送请求在请求正文头之后发送其参数。

像“http://facebook.com/”中的斜杠是至关重要的。这种情况下，浏览器能安全的添加斜杠。而像“http: //example.com/folderOrFile”这样的地址，因为浏览器不清楚folderOrFile到底是文件夹还是文件，所以不能自动添加斜杠。这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定向，结果造成一次不必要的握手。

4. facebook服务的永久重定向响应

图中所示为Facebook服务器发回给浏览器的响应：

HTTP/1.1 301 Moved Permanently
 Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
 pre-check=0
 Expires: Sat, 01 Jan 2000 00:00:00 GMT
 Location: http://www.facebook.com/
 P3P: CP="DSP LAW"
 Pragma: no-cache
 Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;
 path=/; domain=.facebook.com; httponly
 Content-Type: text/html; charset=utf-8
 X-Cnection: close
 Date: Fri, 12 Feb 2010 05:09:51 GMT
 Content-Length: 0

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.facebook.com/” 而非“http://facebook.com/”。

为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢？这个问题有好多有意思的答案。
其中一个原因跟搜索引擎排名有关。你看，如果一个页面有两个地址，就像http://www.igoro.com/ 和http://igoro.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。
还有一个是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时，它可能会在缓存里出现好几次。

5. 浏览器跟踪重定向地址

现在，浏览器知道了“http://www.facebook.com/”才是要访问的正确地址，所以它会发送另一个获取请求：

GET http://www.facebook.com/ HTTP/1.1
 Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
 Accept-Language: en-US
 User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
 Accept-Encoding: gzip, deflate
 Connection: Keep-Alive
 Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]
 Host: www.facebook.com

头信息以之前请求中的意义相同。

6. 服务器“处理”请求

服务器接收到获取请求，然后处理并返回一个响应。
这表面上看起来是一个顺向的任务，但其实这中间发生了很多有意思的东西- 就像作者博客这样简单的网站，何况像facebook那样访问量大的网站呢！

Web 服务器软件
web服务器软件（像IIS和阿帕奇）接收到HTTP请求，然后确定执行什么请求处理来处理它。请求处理就是一个能够读懂请求并且能生成HTML来进行响应的程序（像ASP.NET,PHP,RUBY...）。举个最简单的例子，需求处理可以以映射网站地址结构的文件层次存储。像http://example.com/folder1/page1.aspx这个地址会映射/httpdocs/folder1/page1.aspx这个文件。web服务器软件可以设置成为地址人工的对应请求处理，这样 page1.aspx的发布地址就可以是http://example.com/folder1/page1。
请求处理
请求处理阅读请求及它的参数和cookies。它会读取也可能更新一些数据，并讲数据存储在服务器上。然后，需求处理会生成一个HTML响应。

所有动态网站都面临一个有意思的难点 -如何存储数据。小网站一半都会有一个SQL数据库来存储数据，存储大量数据和/或访问量大的网站不得不找一些办法把数据库分配到多台机器上。解决方案有：sharding （基于主键值讲数据表分散到多个数据库中），复制，利用弱语义一致性的简化数据库。

委托工作给批处理是一个廉价保持数据更新的技术。举例来讲，Fackbook得及时更新新闻feed，但数据支持下的“你可能认识的人”功能只需要每晚更新（作者猜测是这样的，改功能如何完善不得而知）。批处理作业更新会导致一些不太重要的数据陈旧，但能使数据更新耕作更快更简洁。

7. 服务器发回一个HTML响应

图中为服务器生成并返回的响应：

HTTP/1.1 200 OK
 Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
 pre-check=0
 Expires: Sat, 01 Jan 2000 00:00:00 GMT
 P3P: CP="DSP LAW"
 Pragma: no-cache
 Content-Encoding: gzip
 Content-Type: text/html; charset=utf-8
 X-Cnection: close
 Transfer-Encoding: chunked
 Date: Fri, 12 Feb 2010 09:05:55 GMT
 
 2b3��������T�n�@����[...]

整个响应大小为35kB，其中大部分在整理后以blob类型传输。
内容编码头告诉浏览器整个响应体用gzip算法进行压缩。解压blob块后，你可以看到如下期望的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" id="facebook" class=" no_js">
 <head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-language" content="en" />
 ...

关于压缩，头信息说明了是否缓存这个页面，如果缓存的话如何去做，有什么cookies要去设置（前面这个响应里没有这点）和隐私信息等等。

请注意报头中把Content-type设置为“text/html”。报头让浏览器将该响应内容以HTML形式呈现，而不是以文件形式下载它。浏览器会根据报头信息决定如何解释该响应，不过同时也会考虑像URL扩展内容等其他因素。

8. 浏览器开始显示HTML

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了：

9. 浏览器发送获取嵌入在HTML中的对象

在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。
下面是几个我们访问facebook.com时需要重获取的几个URL：

图片
http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
…
CSS 式样表
http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
…
JavaScript 文件
http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js
…

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等...
但不像动态页面那样，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取。服务器的响应中包含了静态文件保存的期限信息，所以浏览器知道要把它们缓存多长时间。还有，每个响应都可能包含像版本号一样工作的ETag头（被请求变量的实体值），如果浏览器观察到文件的版本 ETag信息已经存在，就马上停止这个文件的传输。

试着猜猜看“fbcdn.net”在地址中代表什么？聪明的答案是"Facebook内容分发网络"。Facebook利用内容分发网络（CDN）分发像图片，CSS表和JavaScript文件这些静态文件。所以，这些文件会在全球很多CDN的数据中心中留下备份。
静态内容往往代表站点的带宽大小，也能通过CDN轻松的复制。通常网站会使用第三方的CDN。例如，Facebook的静态文件由最大的CDN提供商Akamai来托管。
举例来讲，当你试着ping static.ak.fbcdn.net的时候，可能会从某个akamai.net服务器上获得响应。有意思的是，当你同样再ping一次的时候，响应的服务器可能就不一样，这说明幕后的负载平衡开始起作用了。

10. 浏览器发送异步（AJAX）请求

在Web 2.0伟大精神的指引下，页面显示完成后客户端仍与服务器端保持着联系。
以 Facebook聊天功能为例，它会持续与服务器保持联系来及时更新你那些亮亮灰灰的好友状态。为了更新这些头像亮着的好友状态，在浏览器中执行的 JavaScript代码会给服务器发送异步请求。这个异步请求发送给特定的地址，它是一个按照程式构造的获取或发送请求。还是在Facebook这个例子中，客户端发送给http://www.facebook.com/ajax/chat/buddy_list.php一个发布请求来获取你好友里哪个在线的状态信息。
提起这个模式，就必须要讲讲"AJAX"-- “异步JavaScript 和 XML”，虽然服务器为什么用XML格式来进行响应也没有个一清二白的原因。再举个例子吧，对于异步请求，Facebook会返回一些JavaScript的代码片段。

除了其他，fiddler这个工具能够让你看到浏览器发送的异步请求。事实上，你不仅可以被动的做为这些请求的看客，还能主动出击修改和重新发送它们。AJAX请求这么容易被蒙，可着实让那些计分的在线游戏开发者们郁闷的了。（当然，可别那样骗人家~）

Facebook聊天功能提供了关于AJAX一个有意思的问题案例：把数据从服务器端推送到客户端。因为HTTP是一个请求-响应协议，所以聊天服务器不能把新消息发给客户。取而代之的是客户端不得不隔几秒就轮询下服务器端看自己有没有新消息。
这些情况发生时长轮询是个减轻服务器负载挺有趣的技术。如果当被轮询时服务器没有新消息，它就不理这个客户端。而当尚未超时的情况下收到了该客户的新消息，服务器就会找到未完成的请求，把新消息做为响应返回给客户端。

总结一下

希望看了本文，你能明白不同的网络模块是如何协同工作的

Happy Chinese New Year 庚寅年，过年了！

danielwang130@gmail.com (Daniel) — Tue, 16 Feb 2010 19:31:00 PST

回家过年的感觉就是过瘾，看Google的中国年doodle也是过年中的一件美事。

Google 的这个中国农历年过得真是中国风俗味十足呀，把过年的几个重要的日子都囊括了，这是 Google 扬言退出中国后的第一个过年。随着 Google 放开 Doodle 的设计，由各国自己捉刀，Google Doodle 的数量大大增加了，有些图标你真不明白什么意思了。但中国的，我们还是明白的，我们还是欢迎的。

腊八节（Laba Rice Porridge Festival）　0122　官方链接

腊月二十八贴窗花（Paper Cut）　0211　官方链接

大年三十辞旧迎新（Chinese New Year's Eve）　0213　官方链接

春节（Chinese New Year）　0214　官方链接

回国第一课 - 翻墙术

danielwang130@gmail.com (Daniel) — Fri, 12 Feb 2010 18:43:00 PST

回国一个星期了，facebook, twitter,blogger, picasa 等我日常上的网站全部无法登陆。这就意味着：翻墙越来越重要了，不得不学了。Google一下，马上就有发现，以下为正文。

--------------------------------翻墙五步走--------------------------------

Step 1.下载安装Easy Tor

Easy Tor这是一个软件套装，集成了Vidalia、Tor及Privoxy。
下载链接：Easy Tor
安装、打开Easy Tor后，以上三个软件自动启动。Vidalia界面为英文，没关系,双击托盘vidalia图标打开控制面板，在Settings—— Appearance——Language中，把系统文字改为简体中文。重启Vidalia后界面即变为中文。

Step 2.安装Autoproxy

Autoproxy这是一个Firefox扩展，所以你的浏览器必须为Firefox。比起TorButton，Autoproxy的优点是可以根据网站自动判断是否需要使用代理，所以使用起来非常方便。安装完毕后重启Firefox，会出现一个“添加Autoproxy规则订阅”的窗口，选定它，选择“订阅"。

Step 3.打开Firefox，启动Easy Tor

直接能够成功自然非常好，但如果发现过程中断，在connecting to a relay directory处停滞不前并最终失败。这说明我们有关部门已经针对Tor做了一些处理。道高一尺魔高一丈，我们当然还有办法。因为即使所有已知的 Tor 中继都被屏蔽，也不可能屏蔽所有的网桥。

Step4.获得中继网桥地址

此时请确定你有一个gmail邮箱。用Gmail邮箱写信给bridges@torproject.org，信件内容为：get bridges，主题随意。马上你会收到回信，打开，上面写的IP和端口就是你要的桥。

在Vidalia中Stop Tor。在“设定”——“网络”中选择“我的ISP阻挡了我到Tor的链接”，将邮件中的桥依次添加到下面的框中。

Step 5.重新启动Tor，翻墙成功！

求职

danielwang130@gmail.com (Daniel) — Thu, 28 Jan 2010 17:55:00 PST

本人长期工作生活在国外，现因妻子生产，将于下个月回西安定居。渴望在西安继续发展我的职业生涯。

本人2002年毕业于西安电子科技大学通信工程专业，之后留学新西兰，在新西兰惠灵顿维多利亚大学（Victoria University of Wellington）深造就读计算机科学与技术专业。毕业后从业与互联网行业，从事网站开发及产品设计4年。

工作经历

• ProjectX Limited 创新型strarup公司, www.zoomin.co.nz. 网站开发，数据库开发。
• Fairfax Media Limited (澳洲最大的媒体公司)，www.stuff.co.nz, www.nzx.com 策划及互交设计，前端开发。

评价：

• 四年web开发工作经验，熟悉大型互联网网站开发相应技术；
• 丰富UI 和 UX设计经验、有创新能力和较高审美能力；
• 熟悉互联网行业以及新兴技术发展趋势；
• 精通网站优化SEO SMO；
• 出色的英文交流能力，三年英文学习以及四年英文工作环境经验；
• 具备良好心理素质，性格开朗，思路开阔，头脑清晰，手法灵活，有很强团队合作能力；

更多关于我
作品选集
LinkedIn profile
PDF简历

如果对我有兴趣，请发email到daniel@danielwang.cn，我很愿意进一步跟您交流。谢谢！

走人

danielwang130@gmail.com (Daniel) — Fri, 15 Jan 2010 15:35:00 PST

Google中国要解散了，十有八九，这两天我非常注意国内外对此事件的评论，以后可能回国以后就用不了google产品了，这对我这个Google重度用户的影响相当之大 .

我目前所用的产品有：reader, map, earth, iGoogle, site, page, blogger, gmail, latitude, doc, translate, adsense, adword, wave, gtalk, picasa, youtube, alert, calendar, feedburner, webmaster, analytics, code, chrome, group...还有很多打算用但是没有用的东西，粗体字的都是我日常天天必须要用的。

图片转载 from blog图党

stuff.co.nz Logo by HTML+CSS

danielwang130@gmail.com (Daniel) — Thu, 14 Jan 2010 19:47:00 PST

It's Friday afternoon, I am feeling bored, so spent half hour to built stuff.co.nz logo by pure html+css. It was heaps of fun. Here is the preview and my code, guess left one or right one? From you memory, don't look at stuff.co.nz!

HTML

<div id="logo">
 <span id="text">stuff<span class="dot first">.</span><span class="domain">co</span><span class="dot">.</span><span class="domain">nz</span></span>
 <ul><li id="r"></li><li id="y"></li><li id="g"></li><li id="b"></li><li id="p"></li></ul>
 </div>

CSS

#logo{font-family:tahoma;font-weight:bold; width:235px;}
 #text{font-size:62px;}
 .dot{font-family:Georgia; font-size:36px; letter-spacing:-2px;}
 .first{margin-left:-7px;}
 .domain{font-size:32px; letter-spacing:-1px;}
 ul{margin: -6px 0 0; list-style:none; padding:0}
 li{float:left; width:45px; height:10px;}
 #r{background-color:#C7221F}
 #y{background-color:#F59900}
 #g{background-color:#007C47}
 #b{background-color:#007DCD}
 #p{background-color:#9C1A87}

解读Google中国四大发明logo

danielwang130@gmail.com (Daniel) — Thu, 14 Jan 2010 16:56:00 PST

昨天，Google中国主页的logo换成四大发明doodle，很让人费解。

众所周知，Google logo都是在节日或纪念日的时候才会更换的，而中国四大发明既非节日更非什么纪念日，在Google宣布退出中国市场之后放上这个logo，很容易人产生联想。

对于这个logo，不同的人肯定有着不同的解读，我的观点如下：

1、隐喻我们还在为古代四大发明而沾沾自喜不思开放，抑或仿佛退回到四大发明的古代？
2、logo里只留下一个“o”和“g”两个字母，正好是“go”，而且是反过来的“go“，预示着Google真的要go了？有趣的是，杨锦麟在昨天的《有报天天读》里的最后点题之字也是“go”。
3、单独看四大发明图案那几个字母，分别是“go”和“le”，谐音读起来就是“go了”或者“够了”。
4、留待大家补充……

宁与玉碎, 不为瓦全

danielwang130@gmail.com (Daniel) — Tue, 12 Jan 2010 17:28:00 PST

Google在自己的博客发表声明，他们在去年12月中期发现有很多来自中国大陆的有针对性的攻击，导致知识产权被盗。

首先，攻击并不是只针对Google，至少还有另外20家来自各行各业的公司都受到了攻击，包括互联网、金融、科技、媒体和化工等等行业，Google也提醒了这些公司，并与美国当局进行合作。

其次，Google有足够的证据证明这些攻击者的目标是人（要和谐）权活动者的Gmail帐户，根据Google的调查攻击者最后还是没有获得他们想要的东西。只有两个Gmail帐户被攻陷，但只取得了有限的数据（比如帐户创建日期）和邮件的主题，而邮件内容都没有泄露。

第三，作为这次调查的一部分，Google发现大量在中国致力于人（还是要和谐）权事业的美国、中国和欧洲的Gmail用户都经常受到攻击，在Google的保护下都完好无损，但也许有用户在收到钓鱼邮件和恶意邮件后电脑会中毒。

Google再次提到自己在2006年发布google.cn是为了让更多中国人民可以享受到Google的服务，Google也可以容忍一定程度的审查。2006年Google曾经提到说他们会仔细监视中国大陆的情况，包括新的法律和对Google服务的限制，如果Google认为无法达到他们认为的底线，那么会重新考虑进入中国的问题。

关键的来了：Google今天决定不想再继续审查google.cn的搜索结果，接下来几周里他们将与中国政府讨论在法律框架下做一个不过滤不审查的搜索引擎！如果不能做到这一点的话，Google认为这就意味着他们要关闭google.cn和在中国大陆的办公室。

这个决定确实很难下，但Google认为这样做的潜在意义非常重大，这完全是美国总部的考虑，而跟中国大陆的谷歌中国员工没有任何关系，他们已经非常努力的在做好足够成功的google.cn了。

我的个人看法：

之前Google总部已经对google.cn颇有微词，但由于李开复极力主张阉割地存在，Google保留了google.cn。他曾经说过

“我们压抑着做更酷、更炫的产品的欲望，努力耕耘最佳中文搜索。”

自从李开复走了，Google China 彻彻底底变成了 Google in China, 谷歌中国没有一个人能说服总部，所以，Google就打算撤离了。

就上面的粗体字部分来看，我几乎可以确认，商谈不会有任何结果，这是政治。很有可能几周后Google就会离开中国了，如果Google真是退出中国，这将是他们做出的历史上最蠢的决定，放弃中国等于放弃半个未来世界！

Nicholas C. Zakas如何面试前端工程师

danielwang130@gmail.com (Daniel) — Thu, 07 Jan 2010 19:53:00 PST

Original Post：Interviewing the front-end engineer
Nicholas C. Zakas，2010年1月5日

面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸索，我总结出了自己的一套很有效的面试前端工程的方法。
有的应聘者说我不好对付，但留给他们这样的印象也并非我所愿。我觉得之所以他们说我不好对付，主要是因为我问他们问题时问得太细了。以前我曾专门写过一些东西，告诉应聘者怎么才能通过我的面试（Surviving an interview with me）以及优秀的前面工程师应该具备什么样的素质（What makes a good front end engineer?），而我的面试可以说完全是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题，也不认为出几道逻辑题就能考出人的真实水平。我唯一的想法就是确定你能否胜任我们要招的这个职位。为此，我需要简单地考察如下几个方面。

基本知识

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

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

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

少量提问

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

现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮，你可以单击它来刷新价格，但不会重新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。

这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者让你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题，等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。我需要的是真正理解库背后的机制，特别是能够徒手写出一个自己的库的人。

解决问题

做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到两个目的。
首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都明白。可是，只要一跟这些人谈到怎么查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。
其次，可以测试出他们已经掌握的（还是那句话，“想都不用想”）浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。
对一名前端工程师来说，这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很平常的事。一个方案无效就无计可施的人，做不了前端工程师。
考核应聘者解决问题能力的另一层原因，与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后，我就会想着问一个他们知识领域之外的问题。这样做的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一言不发，对我评价这个人毫无帮助）。我真正感兴趣的，是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。
注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的信息。

有激情

要成为一名优秀的前端工程师，最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的，因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕还是必须这么做的。
你怎么知道谁对这种工作有没有激情？实际上非常简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣？”这个问题永远不会过期，而且也几乎不可能出错……除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能；这些人才是我真正想要的。当然，我会让他们详细解释自己提到的技术，以保证他们不是随口说了几个时髦的新词汇。

最后一点

计算机科学或者Web设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。另外，高级前端工程师与一般工程师相比，肯定需要掌握更多的技能。而面试几乎没有经验大学毕业生，同样也会有一套完全不同的程序。我在这篇文章里列出来的都是一些最基本的东西。
对于那些还没有多少面试经验的人，我总是喜欢告诉他们，面试完了只要问自己一个问题就行：你想以后跟这个人在一起共事吗？如果不管为什么，回答是不，那就是不。

免责声明：本文的任何观点与意见都只跟Nicholas C. Zakas有关，与Yahoo!公司、Wrox出版公司、O’Reilly出版公司乃至其他任何人无关。我在这里说的话，仅代表我自己，不代表上述公司。
你可以在这里留言，也可以在你自己的站点上发送一个引用通告。

Creating Triangles in CSS

danielwang130@gmail.com (Daniel) — Thu, 07 Jan 2010 18:57:00 PST

Little people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 40px. To demonstrate here is a div with all sides colored.

HTML

<div class="css-arrow-multicolor">
</div>

CSS

.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}

As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.

CSS

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

With a little creativity and tweaking there are lots of shapes that can be made.

`border-style:dotted;`	`border-style:dashed;`	`border-style:outset;`	`border-style:inset;`
`border-style:ridge;`	`border-style:groove;`	`border-style:double;`

Never thought about doing this with CSS!? Amazing isn't it!

2009 Stuff.co.nz Stats In Review

danielwang130@gmail.com (Daniel) — Mon, 04 Jan 2010 18:21:00 PST

Today is my first day back to work, it’s an interesting time to look back on how www.stuff.co.nz has progressed, I’ve continued this by listing some similar stats for comparison during the last 12 months:

Compare with 2008, Visits +31.18%, Pageviews +24.89%, Avg Time on Site +3.6%, Page/Visit - 4.79%, %New Visits -10.66%

Top 5 traffic Source direct traffic 39.58% google organic 35.44% trademe.co.nz 3.39% facebook 1.89% yahoo oranic 1.50%	Top 5 countries New Zealand 78% Australia 6.71% USA 5.5% UK 3.16% Canada 1.09%	Top 5 domestic cities Auckland 42% Wellington 24% Christchurch 15% Palmerston North 2.8% Hamilton 2.46%
Top 5 web browser Internet Explorer 66.83% Firefox 22.09% Safari 6.85% Chrome 3.13% Opera 0.64%	Top 5 Screen Resolution 1024x768 28.42% 1280x800 20.12% 1280x1024 17.87% 1680x1050 8.31% 1440x900 7.55%	Top 5 Section sport rugby national the press dominion post

Twitter Followers 7481
Facebook Fans 10,354
Alexa Ranking #3126 globally #11 in NZ
Digg 1,921 articles
Delicious 719 bookmarks

Top stories users clicked released before the Christmas, you can view them here. Also we released several doodled logos since launched redesign of the site in early March.

There’s a few interesting results in there, the Facebook and Twitter count improvements are definitely good to see! More importantly we’ve had a very successful year from a business perspective, achieving amazing results for our readers and some excellent awards. Plus we’ve grown and developed our great team and can look forward to an exciting 2010 ahead!

Stuff.co.nz T-shirt

danielwang130@gmail.com (Daniel) — Sun, 03 Jan 2010 00:33:00 PST

We got the newly designed stuff.co.nz T shirt before the Christmas. It comes with two colors, white and black!

Here we go, staff at stuff.co.nz in stuff T shirts!

Happy New Year 2010!

danielwang130@gmail.com (Daniel) — Fri, 01 Jan 2010 01:08:00 PST

Google is awesome！昨夜在Google.com首页点击“I’m Feeling Lucky”按钮的2010年倒计时终于走到了终点，现在点击“I’m Feeling Lucky”按钮则可以看到绚丽的烟花。

我喜欢像Google这样的公司，总是给它用户意想不到的惊喜，创意是这个公司的生命线。Google之所以有这样的成功，就是因为他公司内部创新活力的精神，同时Google平台上能够把创新的想法转化成实实在在有利的产品。互联网是一个靠技术创新驱动的产业，在这个产业中，有Google存在，是一件好事，它以自己不断的创新，推动了整个互联网创新的步伐。因此在竞争激烈的IT界，只有抓住时机、不断创新才可能立于不败之地。

2010年，对我个人事业来讲是一个重要的转折点，无疑，Google算是在新年的第一天给我打了一针兴奋剂。祝我好运吧！

Farewell to Wellington 别了，惠灵顿

danielwang130@gmail.com (Daniel) — Thu, 31 Dec 2009 01:13:00 PST

选择在2009年的最后一天写这篇博客，不是刻意想和过去说再见，而是想将一个充满着对未来职业生涯向往的崭新的我展现在2010年新年的第一天。

Yes, 我最终做出了回国的决定，2010年春节前将终于圆了自己的梦回唐朝。其实我与本月月初正式向 Fairfax Media 递交了辞职信，在18号team Secret Santa 的时候我当着所有的colleague面宣布了自己离开的消息，1月22号会是我最后一天上班。

身边有很多人质疑，人数远远多于鼓励和理解的人。在很长的一段时间里我反问过自己很多遍：到底是活在人们的一种传统观念中？还是真正为自己活着？国外的工作生活是不是舒适？我自己的心是否平静？其实我坚信往往就是问过自己这些问题的人，能抓住机会，掌握自己的命运。

毕竟，我们每个人都没有聪明到可以计算到未来的每一步起伏变化，那么，你未来在面对那些重大而艰难的决策时，帮你做出决定的除了你个人的才智、经验，还有你的世界观。

经历了旅居海外七载的学习和工作之后；亲身感触了并周游传统的欧洲列强之后；在看过60年国庆期间多方面的品论，报道，数据之后；让我再一次坚定自己的思想深处的想法以及正视中国的发展，现实就是很多领域里中国已经处于世界领先，把很多发达国家都远远的甩在后面。不说远的航空航天，能源，军事，高速列车，单说与老百姓生活密不可分的传媒，通信以及我热爱的互联网业。

近期，和西安高新产业开发区的一些创业型互联网公司联络了，其中有几家公司的老板对我很感兴趣，希望我加盟。值得高兴的是这些有闯劲而且年轻的创业者都跟我有着或多或少的共同点，比如：西安电子科技大学的师兄，海外留学的背景。

没妄想过李彦宏，张朝阳的神话会复制到自己身上，但他们身上闪烁的一些美好元素，却是可以复制到每一个普通人的身上。比如：理想，果敢，坚持，专注，勤奋等等。

最后，我借用李开复离开Google时说的一句话来给自己开脱 "follow my heart"！

谢谢

王大禹
2009年12月31日

中国互联网行业的2009年

danielwang130@gmail.com (Daniel) — Tue, 29 Dec 2009 03:12:00 PST

2009年即将成为历史，2010年近在眼前。对中国互联网行业来说，过去一年是悲喜交加的一年。70后、80后这群大多已不再年轻的年轻人撑起了中国互联网行业的绝大部分天空，他们是思想活跃的一代，他们是激情的一代。

尽管这一年来，中国互联网行业历经磨难，经历了监管、整顿、口水战、并购、合作……，尽管这一年来，阴霾一直如影随形，尽管这一年来，我们都倍感疲倦，但希望永不泯灭，光明的火焰一直在地平线上闪烁。

2009年，老牌互联网企业在加紧圈地，在全力做平台，打通产业链，建设生态圈，在并购，在拆分业务……

2009年，电子商务的魅力深入人心，其中B2C领域开始出现井喷现象，传统零售及制造企业都尝试进入，同时也成为很多年轻人创业的热点领域。

2009年，随着3G业务的发展，移动互联网的生态初步成形，移动娱乐与移动商务齐头并进。

2009年，社交网站延续去年的强劲势头，开心网与新浪微博等分别代表了SNS与微博客领域的魅力。

2009年，互联网在证明自身无限商机与强大舆论影响力的同时，因为所谓“色情”与“侵权”的原罪，也招致被批判、被整顿、被监管、被关闭。

2009年，注定是中国广大个人站长噩梦的一年，一大批个人网站在一刀切的长官行政命令下死去，数十万个人站长多年的心血付之东流——这一年留给那些立志互联网创业的年轻人是灰色的回忆。

2009年，国有资本复制其“嗜血”的本性，“国家队”全面进入互联网，中国网络电视台只是个开始，整个行业的洗牌的大幕已经拉开。

2009年，中国互联网行业依旧混乱，却又似乎走在有序的路上。

2009年，这是最差的时代，也是最好的时代。

2009年要走了，2010年要来了，今岁的寒冬挡不住明年春天的到来。

Team Secret Santa

danielwang130@gmail.com (Daniel) — Thu, 24 Dec 2009 00:57:00 PST

Secret Santa came on 18th Dec at stuff.co.nz HQ. I got Tommee Tippee orthodontic teat for my future coming baby, thanks Santa!

Thanks for Ms Hayley Collins, who took these awesome photos of our team.

Merry Christmas and Happy New Year

danielwang130@gmail.com (Daniel) — Wed, 23 Dec 2009 13:15:00 PST

Merry Christmas and Happy New Year to all of my subscribed readers and visitors. I’m taking a little Christmas break to enjoy the holidays with family and friends, but I’ll be back after the first of New Year 2010.

I enjoyed this song "Oh Come, Oh Come, Emmanuel" on last Sunday's Carol Service in church, I embed it here, wish you enjoyed it too.

Oh Come, Oh Come, Emmanuel

by The Franz Family // Canon 5D Mark II from ColdWater Media on Vimeo.

Stuff.co.nz Christmas Logo 2009

danielwang130@gmail.com (Daniel) — Wed, 23 Dec 2009 12:55:00 PST

Congratulations to Thomas Flinn, the winner of the Stuff Christmas logo competition! Really fantastic doodle, nice job, I love your work! Your logo will be displayed on stuff.co.nz homepage from Christmas Eve until Boxing Day.

We were overwhelmed with the quality of all the entries and 15 finalists got displayed on stuff.co.nz for each day since 9th Dec. We would like to thank everyone who participated.

See the 15 finalists in the slides below if you have missed any:

Most Viewed on Stuff.co.nz in 2009

danielwang130@gmail.com (Daniel) — Tue, 22 Dec 2009 18:43:00 PST

Today, stuff.co.nz has released its most viewed news list in 2009 to readers. Unlike many American websites collapsed when Michael Jackson dead, none of breaking news could take Stuff server down, but it did reach a record of traffic on Michael Jackson's death.

Looking through the list, to me, there are not many "real news" stories appearing on that list, I am pretty sure that at least some events are more important than porn star, sex, topless teacher, toddler buys digger, such as Obama inauguration, Swine flu, economic recession, All Whites, climate change...

Stuff.co.nz is #2 news website in NZ, it gets average 650k visits a day. The Stuff readers behaviors can represent about half people in this country. It proves me that kiwis don't know what is really going on in the world.
Top 30 most popular stories:

1. Napier siege: Gunman found dead
2. More than 110 dead in tsunami-hit Samoa
3. $190,000 withdrawn in $20 bills
4. No dating, thanks, just sex
5. Police officer shot dead in Napier
6. Michael Jackson dead
7. New Zealand authorities prepare for tsunami
8. Series of earthquakes off Vanuatu
9. Body found in hunt for Aisling
10. Topless teacher on Penthouse website
11. Geriatric porn star an inspiration for the old
12. 2009 Super 14 Standings
13. Te Papa boss Seddon Bennington found dead
14. Tree grows inside man's lung
15. Toddler buys $20,000 digger on TradeMe
16. Tua knocks out Cameron
17. Bain loses bid to keep 111 tape secret
18. Officer wrote kitchen bitch on traffic notice
19. Couple missing after $10m bank bungle
20. Woman's extreme Red Bull diet
21. Women as keen as men for group sex
22. Susan Boyle is a YouTube hit
23. Dad accused of using dog shock collar on his kids
24. Kiwi star unveiled in nude ad
25. Lisa Lewis ejected for racy outfit
26. Swine flu jokes pigs might fly
27. Scary washing machine fetches over $5000
28. Body in car as gunman flees
29. Pitt agreed to movie while drunk
30. Michael Hills invisible houses get go ahead

也谈短网址

danielwang130@gmail.com (Daniel) — Tue, 22 Dec 2009 13:23:00 PST

今天，YouTube.com 启用了自己的短网址 YouTu.be （这个网址真牛叉啊）。这又为短网址家族带来了新的活力。

一个网站，尤其是大型商业网站的域名一般都非常短小，但是其包含的页面网址（URL）往往是字母加数字，复杂冗长，不仅非常难看而且也不容易记住。在这种情况下，“短网址” 就在网络上应运而生了。

仔细一想，短网址实在是个非常有意思的事儿，也不知是哪个家伙想出来的 “鬼”主意！

目前，世界上比较知名的一些大型网站先后也都拥有了自己专属的短网址。比如以下几个：

（1）Goo.gl 是伟大的 Google 短域名，面向其工具栏和 Feedburner 的用户开放。（.gl 是格陵兰域名后缀）

（2）Fb.me 是 Facebook 的短域名。（.me 是欧洲南部国家黑山的域名后缀）

（3）YouTu.be 当然是世界第一视频 YouTube 的了。不能不赞叹这个短域名真是天设地早，专为 YouTube 所设！（.be 是比利时国家域名后缀）

以上这些都是人家网站的 “私货”，仅供自己使用。而面向公众使用的短网址也是雨后春笋，遍地开花。比如：

Bit.ly 当属最知名的了（利比亚国家域名后缀）。它成名于 Twitter 的官方短链接地址服务商，显得非常专业。它的专业测试版向网站、博客写手和新闻组织提供自定义容易记住的短域名服务。所以，它深受个人以及商家的青睐。

其他向公众免费提供短网址服务的一些知名网站还有：TinyURL.com、ShortURL.com、Tr.im（马恩岛域名后缀）、is.gd（格林纳达国家域名后缀） ……

一般来说，那些知名网站的短网址服务的域名都是它们在自己的网站域名上打主意，最好的是利用以往比较偏僻的域名后缀，类似的这些域名后缀往往都是一些比较小的国家。这些国家真是长了不少脸面啊。

相比较来说，国内还没有任何一家网站自己推出自己的短网址呢！难道是没有兴趣还是缺乏胆识和魄力？我想，至少号称天朝第一社交网站的 QQ 似乎就应该有自己的短网址吧。

短网址，因为短小，所以有力！

A Report of Social Media in China

danielwang130@gmail.com (Daniel) — Thu, 17 Dec 2009 15:46:00 PST

A nice introductory presentation on Social Media in China by Mindy Zhang, a junior at Wharton school. Her blog is here

Cool slides and worth sharing with who are interested in Chinese market.

Social Media in China

View more presentations from Mindy Zhang.

Air New Zealand Staff Have Nothing To Hide

danielwang130@gmail.com (Daniel) — Thu, 17 Dec 2009 00:00:00 PST

YouTube has announced its official Most Watched lists globally, here is the top five New Zealand-created videos:

1. Smashproof (featuring Gin Wigmore) - Brother
2. J Williams – Ghetto Flower
3. Pulp Sport (ft P Diggs) - I’m On A Goat
4. Air New Zealand staff have nothing to hide
5. Bare essentials of safety from Air New Zealand

According to a poll being run on stuff.co.nz, looks like many of New Zealanders really liked the Air New Zealand videos, I love this one too, pretty creative and funny.

So here's one to enjoy again!

Google's Christmas Gift For Web Designers

danielwang130@gmail.com (Daniel) — Wed, 16 Dec 2009 18:36:00 PST

Ever wondered what parts of your site can't be viewed without scrolling? Browser Size shows you what portion of users can see a give spot on the screen. This is not screen resolution but the area available to the browser – as gathered from www.google.com users

Percentages are percentage of users who will see the areas of the website without scrolling.

For example innermost line says 99% that means for 99% the user areas under that line will be visible without horizontal or vertical scrolling.

I’ve tested for stuff.co.nz homepage, section landing and story page, you can see from below screenshots. Percentages are percentage of users who will see the areas of the website without scrolling.

As we can find out from this tool:

30% of our readers can not see Latest News Headlines, Editor’s Picks and Most popular box on homepage
50% of readers can not see More Headlines and Special Offers

Web designers can benefit from this visualization tool to tweak their designs for some purposes or improve user experience.

Big thanks for Google, I consider this as my Christmas gift for web developers!

Web设计中的中国传统色彩

danielwang130@gmail.com (Daniel) — Sun, 13 Dec 2009 12:39:00 PST

诗词中有：“名花韵在年晴初，雨沁胭脂脸更敷。”，你知道胭脂是什么颜色么？“回眸一笑百媚生，六宫粉黛无颜色。”中的这个“黛”又是指什么颜色呢？“漆黑一片”里漆黑真的就是完全的黑色吗？在下面这个Web设计中的中国传统色彩速查表，你可以得到准确的答案。

原文作者：青女 附注及色样添加：Quester 转自css9.net

████ 粉红(#ffb3a7)，即浅红色。别称：妃色杨妃色湘妃色妃红色
████ 妃色妃红色(#ed5736)：古同“绯”，粉红色。杨妃色湘妃色粉红皆同义。
████ 品红(#f00056)：比大红浅的红色（quester注：这里的“品红”估计是指的“一品红”，是基于大红色系的，和现在我们印刷用色的“品红M100”不是一个概念）

████ 桃红(#f47983)，桃花的颜色，比粉红略鲜润的颜色。（quester注：不大于M70的色彩，有时可加入适量黄色）
████ 海棠红(#db5a6b)，淡紫红色、较桃红色深一些，是非常妩媚娇艳的颜色。
████ 石榴红(#f20c00)：石榴花的颜色，高色度和纯度的红色。
████ 樱桃色(#c93756)：鲜红色

████ 银红(#f05654)：银朱和粉红色颜料配成的颜色。多用来形容有光泽的各种红色，尤指有光泽浅红。
████ 大红(#ff2121)：正红色，三原色中的红，传统的中国红，又称绛色（quester注：RGB 色中的 R255 系列明度）
████ 绛紫(#8c4356)：紫中略带红的颜色
████ 绯红(#c83c23)：艳丽的深红

████ 胭脂(#9d2933)：1，女子装扮时用的胭脂的颜色。2，国画暗红色颜料
████ 朱红(#ff4c00)：朱砂的颜色，比大红活泼，也称铅朱朱色丹色（quester注：在YM对等的情况下，适量减少红色的成分就是该色的色彩系列感觉）
████ 丹(#ff4e20)：丹砂的鲜艳红色
████ 彤(#f35336)：赤色

████ 茜色(#cb3a56)：茜草染的色彩，呈深红色
████ 火红(#ff2d51)：火焰的红色，赤色
████ 赫赤(#c91f37)：深红，火红。泛指赤色、火红色。
████ 嫣红(#ef7a82)：鲜艳的红色
████ 洋红：色橘红(#ff0097) （quester注：这个色彩方向不太对，通常洋红指的是倾向于M100系列的红色，应该削弱黄色成分。）

████ 炎(#ff3300)：引申为红色。
████ 赤(#c3272b)：本义火的颜色，即红色
████ 绾(#a98175)：绛色；浅绛色。
████ 枣红(#c32136)：即深红（quester注：色相不变，是深浅变化）

████ 檀(#b36d61)：浅红色，浅绛色。
████ 殷红(#be002f)：发黑的红色。
████ 酡红(#dc3023)：像饮酒后脸上泛现的红色，泛指脸红
████ 酡颜(#f9906f)：饮酒脸红的样子。亦泛指脸红色

████ 鹅黄(#fff143)：淡黄色（quester注：鹅嘴的颜色，高明度微偏红黄色）
████ 鸭黄(#faff72)：小鸭毛的黄色
████ 樱草色(#eaff56)：淡黄色
████ 杏黄(#ffa631)：成熟杏子的黄色（quester注：Y100 M20~30 感觉的色彩，比较常用且有浓郁中国味道）

████ 杏红(#ff8c31)：成熟杏子偏红色的一种颜色
████ 橘黄(#ff8936)：柑橘的黄色。
████ 橙黄(#ffa400)：同上。（quester注：Y100 M50 感觉的色彩，现代感比较强。广告上用得较多）
████ 橘红(#ff7500)：柑橘皮所呈现的红色。

████ 姜黄(#ffc773)：中药名。别名黄姜。为姜科植物姜黄的根茎。又指人脸色不正,呈黄白色
████ 缃色(#f0c239)：浅黄色。
████ 橙色(#fa8c35)：界于红色和黄色之间的混合色。
████ 茶色(#b35c44)：一种比栗色稍红的棕橙色至浅棕色
████ 驼色(#a88462)：一种比咔叽色稍红而微淡、比肉桂色黄而稍淡和比核桃棕色黄而暗的浅黄棕色

████ 昏黄(#c89b40)：形容天色、灯光等呈幽暗的黄色
████ 栗色(#60281e)：栗壳的颜色。即紫黑色
████ 棕色：棕毛的颜色,即褐色。1，在红色和黄色之间的任何一种颜色2，适中的暗淡和适度的浅黑。
████ 棕绿(#827100)：绿中泛棕色的一种颜色。
████ 棕黑(#7c4b00)：深棕色。

████ 棕红(#9b4400)：红褐色。
████ 棕黄(#ae7000)：浅褐色。
████ 赭(#9c5333)：赤红如赭土的颜料,古人用以饰面
████ 赭色(#955539)：红色、赤红色。
████ 琥珀(#ca6924)：

████ 褐色(#6e511e)：黄黑色
████ 枯黄(#d3b17d)：干枯焦黄
████ 黄栌(#e29c45)：一种落叶灌木，花黄绿色,叶子秋天变成红色。木材黄色可做染料。
████ 秋色(#896c39)：1，中常橄榄棕色,它比一般橄榄棕色稍暗,且稍稍绿些。2，古以秋为金,其色白,故代指白色。
████ 秋香色(#d9b611)：浅橄榄色浅黄绿色。（quester注：直接在Y中掺入k10~30可得到不同浓淡的该类色彩）

████ 嫩绿(#bddd22)：像刚长出的嫩叶的浅绿色
████ 柳黄(#c9dd22)：像柳树芽那样的浅黄色
████ 柳绿(#afdd22)：柳叶的青绿色
████ 竹青(#789262)：竹子的绿色

████ 葱黄(#a3d900)：黄绿色，嫩黄色
████ 葱绿(#9ed900)：1，浅绿又略显微黄的颜色2，草木青翠的样子
████ 葱青(#0eb83a)：淡淡的青绿色
████ 葱倩(#0eb83a)：青绿色
████ 青葱(#0aa344)：翠绿色,形容植物浓绿

████ 油绿(#00bc12)：光润而浓绿的颜色。以上几种绿色都是明亮可爱的色彩。
████ 绿沈(#0c8918)（沉）：深绿
████ 碧色(#1bd1a5)：1，青绿色。2，青白色,浅蓝色。
████ 碧绿(#2add9c)：鲜艳的青绿色

████ 青碧(#48c0a3)：鲜艳的青蓝色
████ 翡翠色(#3de1ad)：1，翡翠鸟羽毛的青绿色。2，翡翠宝石的颜色。（quester注：C-Y≥30 的系列色彩，多与白色配合以体现清新明丽感觉，与黑色配合效果不好：该色个性柔弱，会被黑色牵制）
████ 草绿(#40de5a)：绿而略黄的颜色。
████ 青色(#00e09e)：1，一类带绿的蓝色,中等深浅,高度饱和。3，本义是蓝色。4，一般指深绿色。5，也指黑色。6，四色印刷中的一色。2，特指三补色中的一色。

████ 青翠(#00e079)：鲜绿

████ 青白(#c0ebd7)：白而发青,尤指脸没有血色
████ 鸭卵青(#e0eee8)：淡青灰色，极淡的青绿色
████ 蟹壳青(#bbcdc5)：深灰绿色

████ 鸦青(#424c50)：鸦羽的颜色。即黑而带有紫绿光的颜色。
████ 绿色(#00e500)：1，在光谱中介于蓝与黄之间的那种颜色。2，本义：青中带黄的颜色。3，引申为黑色，如绿鬓：乌黑而光亮的鬓发。代指为青春年少的容颜。（quester注：现代色彩研究中，把绿色提高到了一个重要的位置，和其它红黄兰三原色并列研究，称做“心理原色”之一）
████ 豆绿(#9ed048)：浅黄绿色
████ 豆青(#96ce54)：浅青绿色

████ 石青(#7bcfa6)：淡灰绿色
████ 玉色(#2edfa3):玉的颜色，高雅的淡绿、淡青色
████ 缥(#7fecad)：绿色而微白
████ 艾绿(#a4e2c6)：艾草的颜色。偏苍白的绿色。
████ 松柏绿(#21a675)：经冬松柏叶的深绿

████ 松花绿(#057748)：亦作“松花”、“松绿”。偏黑的深绿色,墨绿。
████ 松花色(#bce672)：浅黄绿色。（松树花粉的颜色）《红楼梦》中提及松花配桃红为娇艳 ████

████ 蓝(#44cef6)：三原色的一种。像晴天天空的颜色（quester注：这里的蓝色指的不是RGB色彩中的B，而是CMY色彩中的C）

████ 靛青(#177cb0)：也叫“蓝靛”。用蓼蓝叶泡水调和与石灰沉淀所得的蓝色染料。呈深蓝绿色（quester注：靛，发音dian四声，有些地方将蓝墨水称为“靛水”或者“兰靛水”）
████ 靛蓝(#065279)：由植物(例如靛蓝或菘蓝属植物)得到的蓝色染料
████ 碧蓝(#3eede7)：青蓝色
████ 蔚蓝(#70f3ff)：类似晴朗天空的颜色的一种蓝色

████ 宝蓝(#4b5cc4)：鲜艳明亮的蓝色（quester注：英文中为 RoyalBlue 即皇家蓝色，是皇室选用的色彩，多和小面积纯黄色（金色）配合使用。）
████ 蓝灰色(#a1afc9)：一种近于灰略带蓝的深灰色
████ 藏青(#2e4e7e)：蓝而近黑
████ 藏蓝(#3b2e7e)：蓝里略透红色

████ 黛(#4a4266)：青黑色的颜料。古代女子用以画眉。
████ 黛螺(#4a4266)：绘画或画眉所使用的青黑色颜料，代指女子眉妩。
████ 黛色(#4a4266)：青黑色。
████ 黛绿(#426666)：墨绿。
████ 黛蓝(#425066)：深蓝色

████ 黛紫(#574266)：深紫色
████ 紫色(#8d4bbb)：蓝和红组成的颜色。古人以紫为祥瑞的颜色。代指与帝王、皇宫有关的事物。
████ 紫酱(#815463)：浑浊的紫色
████ 酱紫(#815476)：紫中略带红的颜色
████ 紫檀(#4c221b)：檀木的颜色，也称乌檀色乌木色

████ 绀青绀紫(#003371)：纯度较低的深紫色
████ 紫棠(#56004f)：黑红色
████ 青莲(#801dae)：偏蓝的紫色
████ 群青(#4c8dae)：深蓝色
████ 雪青(#b0a4e3)：浅蓝紫色

████ 丁香色(#cca4e3)：紫丁香的颜色，浅浅的紫色，很娇柔淡雅的色彩
████ 藕色(#edd1d8)：浅灰而略带红的颜色
████ 藕荷色(#e4c6d0)：浅紫而略带红的颜色

████ 苍色(#75878a)：即各种颜色掺入黑色后的颜色，如苍翠(#519a73)████ 苍黄(#a29b7c)████ 苍青(#7397ab)████ 苍黑(#395260)████ 苍白(#d1d9e0)████ （quester注：准确的说是掺入不同灰度级别的灰色）

████ 水色(#88ada6)：水红(#f3d3e7)████ 水绿(#d4f2e7)████ 水蓝(#d2f0f4)████ 淡青(#d3e0f3)████ 湖蓝(#30dff3)████ 湖绿(#25f8cb)████皆是浅色。

████ 深色淡色(#ffffff)：颜色深的或浅的，不再一一列出。

████ 精白(#ffffff)：纯白，洁白，净白，粉白。
████ 象牙白(#fffbf0)：乳白色
████ 雪白(#f0fcff)：如雪般洁白

████ 月白(#d6ecf0)：淡蓝色
████ 缟(#f2ecde)：白色
████ 素(#e0f0e9)：白色，无色
████ 荼白(#f3f9f1)：如荼之白色
████ 霜色(#e9f1f6)：白霜的颜色。

▓▓▓▓ 花白(#c2ccd0)：白色和黑色混杂的。斑白的夹杂有灰色的白
████ 鱼肚白(#fcefe8)：似鱼腹部的颜色，多指黎明时东方的天色颜色（quester注：M5 Y5）
████ 莹白(#e3f9fd)：晶莹洁白
████ 灰色(#808080)：黑色和白色混和成的一种颜色

████ 牙色(#eedeb0)：与象牙相似的淡黄色（quester注：暖白）
████ 铅白(#f0f0f4)：铅粉的白色。铅粉，国画颜料，日久易氧化“返铅”变黑。铅粉在古时用以搽脸的化妆品。（quester注：冷白）

████ 玄色(#622a1d)：赤黑色，黑中带红的颜色，又泛指黑色
████ 玄青(#3d3b4f)：深黑色

████ 乌色(#725e82)：暗而呈黑的颜色
████ 乌黑(#392f41)：深黑；漆黑
████ 漆黑(#161823)：非常黑的
████ 墨色(#50616d)：即黑色
████ 墨灰(#758a99)：即黑灰

████ 黑色(#000000)：亮度最低的非彩色的或消色差的物体的颜色；最暗的灰色；与白色截然不同的消色差的颜色；被认为特别属于那些既不能反射、又不能透过能使人感觉到的微小入射光的物体,任何亮度很低的物体颜色。
████ 缁色(#493131)：帛黑色
████ 煤黑象牙黑(#312520)：都是黑，不过有冷暖之分。
████ 黧(#5d513c)：黑中带黄的颜色
████ 黎(#75664d)：黑中带黄似黎草色

████ 黝(#6b6882)：本义为淡黑色或微青黑色。
████ 黝黑(#665757)：（皮肤暴露在太阳光下而晒成的）青黑色
████ 黯(#41555d)：深黑色、泛指黑色
████ 赤金(#f2be45)：足金的颜色

████ 金色(#eacd76)：平均为深黄色带光泽的颜色
████ 银白(#e9e7ef)：带银光的白色
████ 铜绿(#549688) ████乌金(#a78e44) ████老银(#bacac6)：金属氧化后的色彩

附带：

国画用色

████ 银朱(#bf242a)：呈暗粉色。
████ 胭脂(#9d2933)：色暗红。用红蓝花、茜草、紫梗三种植物制成的颜料，年代久则有褪色的现象。
████ 朱砂(#ff461f)：色朱红。用以画花卉、禽鸟羽毛。（quester注：黄色成分微高于红色成分，色艳丽，需注意与背景色调和，多数情况下不大面积使用。）

████ 朱膘(#f36838)：色橘红。明度比朱砂高，彩度比朱砂低。用以画花卉。
████ 赭石(#845a33)：色红褐。用以画山石、树干、老枝叶。
████ 石青(#1685a9)：色青，依深浅分为－头青、二青、三青。用以画叶或山石。
████ 石绿(#16a951)：依深浅分为－头绿、二绿、三绿。用以画山石、树干、叶、点苔等。
████ 白粉(#fff2df)：亦称胡粉，色白，有蛤粉和铅粉两种。用以画白花、鸟，或调配其他颜料使用。

████ 花青(#003472)：色藏青。用以画枝叶、山石、水波等。用蓼蓝或大蓝的叶子制成蓝靛，再提炼出来的青色颜料，蓝绿色或藏蓝色。用途相当广，可调藤黄成草绿或嫩绿色。广花，颜料。即广东产的花青。（quester注：微含红色成分，故与黄色调和后生成的绿色较为沉着）
████ 藤黄(#ffb61e)：色明黄。用以画花卉、枝叶。藤黄：明黄色。南方热带林中的海藤树，常绿乔木，茎高达二十米，从其树皮凿孔，流出黄色树脂，以竹筒承接，干透可作国画颜料。（quester注：亦含微量红色成分，有毒。和黑色配合时甚为醒目，多为危险警示色彩）
████ 赭石色(#845a33)：暗棕色矿物，用做颜料
████ 雌黄(#ffc64b)：矿物名。成分是三硫化二砷(As2S3)橙黄色,半透明,可用来制颜料。古人用雌黄来涂改文字，因此称乱改文字、乱发议论为“妄下雌黄”，称不顾事实、随口乱说为“信口雌黄”。

████ 雄黄(#e9bb1d)：中药名。为含硫化砷的矿石。别名石黄、黄石。
████ 石黄(#e9bb1d)：国画颜料，即雄黄。
████ 洋红(#ff4777)：色橘红。用以画花卉。

古典文学常见词

鎏金：中国传统的一种镀金方法，把溶解在水银里的金子涂刷在银胎或铜胎器物上。

飞金泥金洒金：用金粉或金属粉制成的金色涂料，用来装饰笺纸或调和在油漆中涂饰器物。洒金一说是指带斑点的图案。
描金：为使器物美观而在其上用金银粉勾图、描绘作为装饰。

花黄：古代妇女的面饰。用金黄色纸剪成星月花鸟等形贴在额上,或在额上涂点黄色。
撒花：织物上的碎花图案。
云斑：在颜色比较淡的或半透明的材料上的暗黑的或无光泽的条纹或斑点(如在大理石上)。
云母纹：像云母断面及砂子闪烁光泽的纹理。