css

Google Font加载

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

1
2
3
4
<head>
   ...
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
</head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({
    google: {
      families: ['Cantarell']
    }
  });
</script>
<style type="text/css">
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 {
    visibility: visible; font-family: 'Cantarell';
  }
</style>
css

another ribbon

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

演示：


Everybody loves ribbons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

 width: 50%;

 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}
css

css所有的媒体类型

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

1
<link rel="stylesheet" type="text/css" href="print.css" media="print">










































all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices
article

为什么纯粹的socket服务器还不够好？

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

很多web应用不会基于原生的http服务器搭建，一般都会基于某类应用服务器（如tomcat）搭建，而且还会利用一些开发框架来简化web开发。 同样，一般游戏服务器的开发都会在socket服务器上封装出一套框架或类似的应用服务器。为什么使用原生的socket接口开发不够好呢?

  • 抽象程度。原生的socket抽象程度过低，接口过于底层，很多机制都需要自己封装，如Session、filter、请求抽象、广播等机制都要自已实现，工作量很大，容易出错，且有很多的重复劳动。
  • 可伸缩性。高可伸缩性需考虑很多问题，消息密度、存储策略、进程架构等因素都需要考虑。用原生的socket要达到高可伸缩性，需要在架构上花费大量的功夫，而且效果也未必能达到开源框架的水准。
  • 服务端的监控、管理。很多服务器的数据需要监控，例如消息密度、在线人数、机器压力、网络压力等，如果采用原生socket，所有这些都要自己开发，代价很大。

文摘地址：https://github.com/xiecc/game-server-development/blob/master/node-game-server-1/node-game-server-1.md#为什么纯粹的socket服务器还不够好

article

同步异步/阻塞非阻塞

原文来自：snippets.barretlee.com，只是为了自己学习收集特意fork了一遍。如有侵权，联系删除：i@webcliwn.net。

同步/异步（synchronization/asynchronization）

  • 同步，就是在产生一个 调用 时，在没有得到结果之前，该 调用 就不会返回，一旦 调用 返回，就得到返回值了，是 调用者 主动等待这个 调用 的结果。
  • 异步，则是在 调用 发出后，这个 调用 就直接返回了，所以没有返回结果。之后， 被调用者 通过状态、通知等来通知 调用者 ，或者通过回调函数处理这个 调用 。

阻塞/非阻塞（blocking/non-blocking）

  • 阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得到结果之后才会返回。
  • 非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程。

虽然，看起来同步/异步和阻塞/非阻塞看起来有些相似，但是前者关注的是一种 消息通知机制 ，后者关注的是 程序在等待调用结果（消息、返回值）时的状态 ，所以两者没有必然联系。