我一直对css选择器引擎代码很感兴趣. 为了观察从基本发展到最快的发展过程，我收集了所有的数据时间点，看看下面，你就知道 Jack Slocum 说的很对 “css 选择器的能力已近从平托权力到了野马GT 500

• 2003.03.25: document.getElementsBySelector() by Simon Willison (later used in behaviour.js) [source]
• 2004.04.10: CssQuery() 1.0: by Dean Edwards [source]
• 2005.08.19: CssQuery() 2.0. [source]
• 2005.08.22: jSelect (precursor to jQuery) [source]
• 2006.01.14: jQuery first release. [source]
• 2006.01.18: Prototype. Initial release of selector engine. [source]
• 2006.04.04: moo.dom (precursor to mootools) [source]
• 2006.08.26: jQuery 1.0 [source]
• 2006.11.14: Mochikit Selector. (orig. ported from prototype) [source]
• 2007.01.08: jQuery 1.1a (“10-20x faster than 1.0″) [source]
• 2007.01.11: DomQuery by Jack Slocum (ExtJS). [source]
• 2007.02.05: dojo.query(). [source]
• 2007.03.21: base2.DOM. [source]
• 2007.05.01: Prototype 1.5.1 [source]
• 2007.05.07: Mootools 1.1 [source]
• 2007.07.01: jQuery 1.1.3 (“800% faster”) [source]
• 2007.07.10: Ext 1.1 RC1 [source]
• 2007.07.10: Dojo 0.9 [source]
• 2007.12.04: YUI 2.4.0 [source]
• 2007.12.17: NWMatcher by Diego Perini [source]

Update: Added Base2, CssQuery1.0. Corrected jQuery launch date.
Update: Added Dojo 0.9, NWMatcher.

在twitter的@uxbooks，我推荐了相关UX方面的书籍。一般我比较懒的时候会默认推荐Steve Krug的精华书籍《 Don’t Make Me Think》.

尽管该书是很令人称赞的，但是我感觉还是把用户体验的相关书籍放在一起罗列推荐，对作者和读者才是公平的。

如果你是一个经验丰富的用户体验专业人员，那这些书籍中的大部分你一定听过。事实上，你可能已经读了，或者重复读过。但是我仍然希望能有您以前未曾听过后者读过的书籍。起码在别人问您类似问题的时候你能有所回复，比如：除了《 Don’t Make Me Think》以外还有其他入门级别的用户体验书籍吗？

1，《Project Guide to UX Design》

A Project Guide to UX Design.

最近我们在讨论对于UX Exchange 入门新手来说的书籍的时候，该书是继《 Don’t Make Me Think》之后最受推荐的书籍。引用推荐人的原话：“该书是对用户体验设计师需要具备什么，具有重大实践意义和易引导性，并且对于用户体验领域做了一个不错介绍”

我必须坦诚，至今我确实没读过该书，但是由于它确实很流行，我选择把它放在该列表的顶部推荐。据我了解，该书和其他书不在一个级别，它不只介绍给你设计的原则，也展示给你在一个项目进行中，如何有效的整合用户体验的原则。

Book: A Project Guide to UX Design (by Russ Unger and Carolyn Chandler)

The Design of Everyday Things.

如果没有该书，这个推荐列表就不算完整。尽管该书是以实物为重中心的，强调明白用户的需求和认知心理学的重要性，该书在怎样和为什么一些产品能满足用户需求而其他只让用户受伤方面是一本强大课本。

Book: The Design of Everyday Things (by Don Norman)

3,《The Elements of User Experience》

The Elements of User Experience.

用户体验的要素，这本大家应该很熟悉了，该书详细用图表和插图的形式介绍了以用户为中心的用户体验设计思想，而不只是工具和技术。Jesse James Garrett 提供用户体验开发的纵览，从战略和需求到信息架构和视觉设计。

Book: The Elements of User Experience (by Jesse James Garrett)

4, 《Prioritizing Web Usability》

That’s right baby, I got my copy signed!

这本书还是之得一看的，它阐述了可用性价值方面东西。

Sketching User Experiences.

“通过Bill Buxton的引人思考的个人例子，可以激发其他更好的理解设计在他们自己公司的橘色”  —Bill Gates

根据UX Book Club league table（用户书籍排名表）Bill Buxton’的《Sketching UserExperiences》是全世界当前讨论最多的书，Jason Robb也推荐了他的文章Tools for Sketching User Experiences.勾勒用户体验的工具介绍”

Book: Sketching User Experiences (by Bill Buxton)

6，《About Face 3》

About Face 3.

从开展用户研究来确定产品的使用的人物角色和场景，该书连同其它的书同时被包含在Nick Finck’s list of top UX books 一文中。

Book: About Face 3 (by Alan Cooper, Robert Reimann and David Cronin)

7,《Emotional Design》

Emotional Design.

这是在该列表中包含的Don Norman的第二本书。情感设计相联系的深远影响,唤起情感对象。这是一本可以快速阅读的书籍，可以给你带来一次又一次的灵感和洞察力。

Book: Emotional Design (by Don Norman)

8,《Handbook of Usability Testing》

该书给予了可用性测试的纵览，包含很多有用信息。

Book: Handbook of Usability Testing (by Jeffrey Rubin and Dana Chisnell)

9,《Designing for Interaction》

Designing for Interaction.

进入用户体验专业设计师这个行业，你必须和交互设计师协同工作，为了更好的沟通和协同工作了解交互设计师必要的，该书是不错的交互设计的选择。

Book: Designing for Interaction (by Dan Saffer)

Building products and services that people interact with is the big challenge of the 21st century. Dan Saffer has done an amazing job synthesizing the chaos into an understandable, ordered reference that is a bookshelf must-have for anyone thinking of creating new designs.

Jared Spool

10,《Designing for the Social Web》

Designing for the Social Web.

该书一个一本很容易读和发现一个很好的权衡理论和实践的建议。

ie直接加个滤镜就可解决我不做介绍，

相信很多人对firefox，chrome很头疼，其实很早就有解决方案，依赖js比如下面这篇文章：

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

使用很简单：

1，下载grayscale.js文件

2，在页面header引入<script type="text/javascript"src="grayscale.js"></script>

3，实现全站gray，在页面onload事件中加入：

我觉得很有参考价值~推荐使用~，最后默哀致灾难中逝去的人~

这里列出一些关键字汇总：Less,xCSS,sass,OOCSS,compass,Lemonade’s CSS Sprites

前面的3个都是css编程语言  （Less,xCSS,sass）

— 没错css编程语言，因为css是个SB类型语言，不爽它的developer就发明了css的编程语言来让更智能舒适的编写css

OOCSS 是面向对象css，是由Nicole first presented Object Oriented CSS at Web Directions North in Denver.

OOCSS 有两个主要的原则：

1. Separate structure and skin
2. Separate container and content

详细的OOSS解释大家可以看这个原生ppt:

3 Steps to Make
Better & Faster
Frontends
With Sass/SCSS, Compass and Lemonade’s CSS Sprites

Sprites

另外关于他们性能比较也有参考文章：

Different CSS techniques and their performance

参考阅读文章链接：

http://www.screwlewse.com/labs/css-performance-test.php?format=long&selector=%23

http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

http://compass-style.org/docs/

http://www.hagenburger.net/BLOG/3-Steps-to-Make-Better-And-Faster-Frontends.html

http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html

http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend

http://chriseppstein.github.com/blog/2010/08/02/sass-extend-challenge/

http://wiki.github.com/stubbornella/oocss/

The Problem

• <video> doesn’t work in old browsers
• Browsers support different video codecs
• Browsers have inconsistent player UI
• H.264 doesn’t work in Firefox & Opera Note: MediaElement.js also supports Ogg and WebM (even FLV and WMV) if you want to use multiple <source> elements

Browser support (using H.264)

• Safari: native HTML5
• Chrome: native HTML5
• Internet Explorer 9: native HTML5
• Internet Explorer 6,7,8: Silverlight/Flash
• Firefox: Silverlight/Flash
• Opera: Silverlight/Flash
• iPhone, iPad: native HTML5
• Andriod: native HTML5

<script src="jquery.js"></script>
<script src="mediaelement.js"></script>
<script src="mediaelementplayer.js"></script>
<link href="mediaelementplayer.css" rel="Stylesheet" />

<!-- Preferred: Use one H.264 file for everyone (with silverlight fallback) -->
<video src="myfile.mp4" type="video/mp4" width="640" height="360"></video>

<!-- OR use multiple codecs, your choice -->
<video width="640" height="360">
        <source src="myfile.mp4" type="video/mp4" >
        <source src="myfile.ogg" type="video/ogg" >
        <source src="myfile.webm" type="video/webm" >
</video>

<script>
jQuery(document).ready(function($) {
        $('video').mediaelementplayer();
});
</script>
                        

javascript 缓存提供程序

2010.7.6

相 信每一个开发者都知道缓存的重要性。从头至尾有缓存的后台(memcached,xcache等。) 来减轻db的压力。对内容分发网络（CDN）缓存中希望你的浏览器缓存那些不止一次的加载资源。当然, 有客户端缓存,所以你不要重复昂贵的操作(即使是算法或大量的运算)。

这是介绍的是一个不错的javascript的方面的客 户端解决方案,可选配支持HTML5本地存储器.

Starting Simple

function CacheProvider() {
   // values will be stored here
   this._cache = {};
 }

Feature detect on local storage

try {
   CacheProvider.hasLocalStorage = ('localStorage' in window) && window['localStorage'] !== null;
 } catch (ex) {
   CacheProvider.hasLocalStorage = false;
 

}

这里使用try catch的主要原因是 尽管firefox支持该属性，但是需要在about:config中设置并开启，否则将会报错。所以一个简单的if else不能满足需求。

下面我们将增加对象本地存储机制的支持。这个技术是借鉴了Christopher Blizzard的一篇不错的文章 Saving data with local storage – for which those who didn’t know, you can only store string’s into local storage. Thus we have this…

in / out JSON parsing

if (CacheProvider.hasLocalStorage) {
   Storage.prototype.setObject = function(key, value) {
     this.setItem(key, JSON.stringify(value));
   };

   Storage.prototype.getObject = function(key) {
     return JSON.parse(this.getItem(key));
   };
 }

现 在就到了我们的三个核心方法了，分别是 get, set, 和clear.

Core class functionality

CacheProvider.prototype = {

   /**
      * {String} k - the key
      * {Boolean} local - get this from local storage?
      * {Boolean} o - is the value you put in local storage an object?
      */
   get: function(k, local, o) {
     if (local && CacheProvider.hasLocalStorage) {
       var action = o ? 'getObject' : 'getItem';
       return localStorage[action](k) || undefined;
     } else {
       return this._cache[k] || undefined;
     }
   },

   /**
      * {String} k - the key
      * {Object} v - any kind of value you want to store
      * however only objects and strings are allowed in local storage
      * {Boolean} local - put this in local storage
      */
   set: function(k, v, local) {
     if (local && CacheProvider.hasLocalStorage) {
       if (typeof v !== 'string')) {
         // make assumption if it's not a string, then we're storing an object
         localStorage.setObject(k, v);
       } else {
         try {
           localStorage.setItem(k, v);
         } catch (ex) {
           if (ex.name == 'QUOTA_EXCEEDED_ERR') {
             // developer needs to figure out what to start invalidating
             throw new Exception(v);
             return;
           }
         }
       }
     } else {
       // put in our local object
       this._cache[k] = v;
     }
     // return our newly cached item
     return v;
   },

   /**
      * {String} k - the key
      * {Boolean} local - put this in local storage
      * {Boolean} o - is this an object you want to put in local storage?
      */
   clear: function(k, local, o) {
     if (local && CacheProvider.hasLocalStorage) {
       localStorage.removeItem(k);
     }
     // delete in both caches - doesn't hurt.
     delete this._cache[k];
   }

 };

如 何运用？

注意在这篇文章的开始，就说了Cache Provider 是可选支配的本地存储，首先然让我们看一个没有本地存储的例子：

getElementsByClassName

var cache = new CacheProvider;

 window.getElementsByClassName = getElementsByClassName || function(c) {
   var reg = cache.get(c) || cache.set(c, new RegExp("(?:^|s+)" + c + "(?:s+|$)"));
   var elements = document.getElementsByTagName('*');
   var results = [];
   for (var i = 0; i < elements.length; i++) {
     if (elements[i].className.match(reg)) {
       results.push(elements[i]);
     }
   }
   return results;
 

};

备注：下次你调用类函数的时候， 将会用预先编译好的正则表达式替代够建造一个表达式。


再举一个例子：比如 对于大的应用程序需要i18n，你可以缓存一个编译好的html字符串进入本地存储中。

var i18nCache = new CacheProvider;

 if (i18nCache.get('topnav')) {
   $('#nav').html(i18nCache.get('topnav'));
 } else {
   ajax('top-nav.tmpl', function(html) {
     i18nCache.set('topnav', html);
     $('#nav').html(i18nCache.get('topnav'));
   });
 }

除 此之外，你开可以做很多外部资源缓存到本地的事情，加油:)