一、在样式表开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息。
Example Source Code：/*
---------------------------------
Site: Site name
Author: 52CSS.com
Updated: Date and time
Updated by: Name
---------------------------------
*/
二、包括公用颜色标记
Example Source Code：/*
---------------------------------
COLORS
Body background: #def455
Container background: #fff
Main Text: #333
Links: #00600f
Visited links: #098761
Hover links: #aaf433
H1, H2, H3: #960
H4, H5, H6: #000
---------------------------------
*/
三、给ID和Class进行有意义的命名
不推荐的命名方式：
Example Source Code：.green-box { ... }
#big-text { ... }
推荐使用的命名方式：
Example Source Code：.pullquote {... }
#introduction {... }
四、将关联的样式规则进行整合
Example Source Code：#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
#header a#skip { ... }
#navigation { ... }
#navigation ul { ... }
#navigation ul li { ... }
#navigation ul li a { ... }
#navigation ul li a:hover { ... }
#content { ... }
#content h2 { ... }
#content p { ... }
#content ul { ... }
#content ul li { ... }
五、给样式添加清晰的注释
Example Source Code：/*
---------------------------------
header styles
---------------------------------
*/
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
/*
---------------------------------
navigation styles
---------------------------------
*/
#navigation { ... }
本文链接
The year of apocalypse is about to finish. Nothing happened. It was a good year for JavaScript, though. Many amazing projects were started this year. In this post we will go through a collection of the most popular ones based on their GitHub starrings.
世界末日年即将过去。什么都没有发生。但是对于javascript来说确实发展很好的一年。许多惊人的项目，今年开始。在这篇文章中，我们将根据他们在GitHub中的starrings收集最流行的javascript库。
All these libraries are different, but notable on their own. The true leader of list is Meteor. They received over 6500 stars on GitHub and over $11 Million investment from Andreessen Horowitz. That makes Meteor the promising project in upcoming 2013. Or maybe a most overestimated one? What do you think?
所有这些库是不同的，但值得我们注意。列表中真正的王者是Meteor。他们在GitHub上收到了超过6500个starrings，获得安德森霍洛维茨超过1100万美元的投资。这将使Meteor在即将到了的2013年成为最有前途的项目。或许高估了？你的想法呢？
Most of the projects picked on our list focus on UI improvements. Examples of these include alerts and notifiers. One curious case is Yeoman. It aims to make JavaScript development by wrapping together various tools and enables developers to generate a scaffolding for their own projects.
在我们精选的列表中大部分项目专注于UI的改进。这方面的例子包括警报和通知等。一个奇怪的情况是Yeoman。它的目的是通过JavaScript包装各种工具，使开发人员能够为自己的项目生成框架。
Meteor
Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.
Meteor是一个短时间内构建高质量的web apps的一个开源平台，无论你是专业开发人员或才刚刚开始。
- Meteor on Jster
- Official Site
- GitHub Repository
Select2
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.
Select2是一个基于jQuery的替代下拉框插件。它支持搜索，远程的数据集，无限滚动的结果。Select2的外观和感觉是基于优秀的 Chosen库的。
- Select2 on Jster
- Official Site
- GitHub Repository
Hammer.js
Hammer.js is a javascript library that can be used to control gestures on touch devices. It supports the following gestures: Tap Double tap Hold Drag Swipe Transform (pinch)
Hammer.js是一个可用于控制触摸屏设备上手势的JavaScript库，它支持以下手势：Tap（单击）、Double tap （双击）、Hold（按住）、 Drag（拖动）、 Swipe（滑动）、Transform (pinch) 变换（捏）。
- Hammer.js on Jster
- Official Site
- GitHub Repository
Turn.js
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.
Turn.js是一个使用HTML5的所有优点，使您的内容看起来像一个真正的书或杂志的JavaScript库。基于HTML5的新的用户界面使网站变得越来越漂亮。基于HTML5的杂志，书籍，目录，turn.js是最合适的。
- Turn.js on Jster
- Official Site
- GitHub Repository
Mousetrap
Mousetrap is a simple library for handling keyboard shortcuts in Javascript. It is around 1.7kb minified and gzipped and 3kb minified, has no external dependencies, and has been tested in the following browsers: Internet Explorer 6+ Safari Firefox Chrome It has support for keypress, keydown, and keyup events on specific keys, keyboard combinations, or key sequences.
Mousetrap是一个简单的用于处理在Javascript中的键盘快捷键的库。压缩和gzip后约1.7kb缩小的，压缩后Yuesai3KB，没有外部的依赖，已经通过测试以下浏览器：Internet Explorer 6+、Safari浏览器、火狐浏览器、Chrome，它支持keypress，keydown，和keyup事件上的特定按键，键盘的组合，或按键序列。
- Mousetrap on Jster
- Official Site
- GitHub Repository
Tinycon
A small library for manipulating the favicon Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don’t support canvas or dynamic favicons. Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.
tinycon是允许操作类似提示气泡添加和改变的favicon图标插件。Tinycon优雅地提供不支持canvas或动态网页图标的一些浏览器标题栏上的方法 。 提示的图标，使用户能够固定再一个标签上，并很容易地看到，引起他们的注意力。
- Tinycon on Jster
- GitHub Repository
Yeoman
Yeoman (n) 1. A noble servant, carrying out various duties for the sovereign. Associated with hard toil. 2. Your new favorite web application stack and development tool.
- Yeoman on Jster
- Official Site
- GitHub Repository
noty
noty is a jQuery plugin that makes it easy to create alert – success – error – warning – information – confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional)
noty是一个jQuery插件，可以很容易创建警报 – 成功 – 错误 – 警告 – 信息 – 确认消息，可以作为一种替代标准警报对话框。每个通知添加到队列。 （可选）
- noty on Jster
- Official Site
- GitHub Repository
a!ertifyjs
An unobtrusive customizable JavaScript notification system
一个不显眼的自定义的JavaScript通知系统
前言
自由百科全书不仅仅应当可以自由编写，而更应该可以自由获得。
DBpedia对Wikipedia的数据变成Linked Data形式，使得机器也能读懂并自由获得这些数据。
本文的主要目的是利用Javascript从DBpedia中获取我们想要的数据。
对Linked Data不太了解的请参考：关联数据入门——RDF。
SPARQL
Trying to use the Semantic Web without SPARQL is like trying to use a relational database without SQL.
—— Tim Berners-Lee
SPARQL是Semantic Web（语义网）的SQL，用于数据查询的语言。
SPARQL Endpoint
SPARQL查询终端，是一种HTTP绑定协议，用于通过HTTP进行SPARQL查询，并返回相应数据。
DBpedia的SPARQL Endpoint地址是：http://dbpedia.org/sparql
大家可以通过浏览器打开这个页面，进行SPARQL查询（最好翻墙，没翻墙查询经常失败，不太明白为什么= =）。
不过这种查询最终返回结果是HTML页面，并不是我们想要的，我们可以通过设置Request Header的Accept属性来指定返回数据类型。
例如如果指定为：text/xml，那么返回的便是RDF格式数据。
那么我们如何输入SPARQL查询代码呢？
只需通过get或者post方法用参数query，将代码传过去。例如：
如果想查询：select distinct ?Concept where {[] a ?Concept} LIMIT 100
则可利用该链接得到数据：
http://dbpedia.org/sparql?query=select%20distinct%20?Concept%20where%20{[]%20a%20?Concept}%20LIMIT%20100
其中空格被转成%20。
实现细节
- 跨域
我们可以通过AJAX实现这一功能，但是AJAX无法跨域，然而很显然我们想要的Linked Data几乎都是跨域的。
实际上，我们没有不改变其数据形式的方法在前端进行动态跨域异步读取。
不过我们可以通过服务器代理的方法来解决跨域问题。
- GET or POST
使用GET还POST呢？
这个可能出于很多方面考虑，但是考虑到GET可能被缓存，所以我们使用POST来避免数据被缓存。
- 以什么形式返回数据
前面我们说到用text/xml可以返回RDF数据，但是RDF在Javascript中并不好处理，所以我们使用json方式返回，也就是需要将Accept设置成application/sparql-results+json。
实现
接口参考Python的SPARQL Wrapper
if(typeof define === "function"){
define("SPARQLWrapper", factory); // AMD || CMD
}else{
root.SPARQLWrapper = factory(); // <script>
}
}(this, function(){
'use strict'
function SPARQLWrapper(endpoint){
this.endpoint = endpoint;
this.queryPart = "";
this.type = "json";
}
SPARQLWrapper.prototype = {
constructor: SPARQLWrapper,
setQuery: function(query){
this.queryPart = "query=" + encodeURI(query);
},
setType: function(type){
this.type = type.toLowerCase();
},
query: function(type, callback){
callback = callback === undefined ? type : this.setType(type) || callback;
var xhr = new XMLHttpRequest();
xhr.open('POST', this.endpoint, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
switch(this.type){
case "json":
type = "application/sparql-results+json";
break;
case "xml":
type = "text/xml";
break;
case "html":
type = "text/html";
break;
default:
type = "application/sparql-results+json";
break;
}
xhr.setRequestHeader("Accept", type);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var sta = xhr.status;
if(sta == 200 || sta == 304){
callback(xhr.responseText);
}else{
console && console.error("Sparql query error: " + xhr.status + " " + xhr.responseText);
}
window.setTimeout(function(){
xhr.onreadystatechange= new Function();
xhr = null;
},0);
}
}
xhr.send(this.queryPart);
}
}
return SPARQLWrapper;
}));
使用方法，例如需要查询：
select distinct ?Concept where {[] a ?Concept} LIMIT 100
则该页面为：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content