这个小玩意儿是完全是在我好好使用github的第一个产物 Demo页也是在github pages里面生成的 前几天公司正好有这个需求 所以我就在github里面好好写了一下

效果请看   DEMO

现在jquery的tipsy插件也很多了 我这个插件支持这些基础的功能

1. 支持四个方向显示tipsy（top,bottom,left,right）
2. 支持三种方式显示数据（normal，ajax，jsonp）
3. 异步获取数据会缓存数据 不会再请求一次
4. 计划添加几种css3样式 可以供大家切换（已经完成）
5. 计划添加自适应功能 当页面距下边距离太短的时候 自动切换到上方

使用方法
下载以后将下面的两个文件添加进页面(jquery.vtip.js, style.css)（可以修改css文件来自定义）

参数说明

var settings = {
	//four postions,top left,right bottom
	position:'bottom',
	//three ways:normal or ajax or jsonp
	method:'normal',
	//when method is ajax or jsonp, you need a url
	url:'',
	//when you need a custom message
	desc:'',
	//custom width&height
	width:'auto',
	height:'auto'
}

使用方法

//直接显示链接的title
$('a').vtip();
//在右边显示自定义的信息
$('a').vtip({"desc":"Hey i am a custom tip","position":"right"});
//ajax方法 包含一个回调函数
$('#ajax').vtip({method:"ajax",url:"posts.php"},function(data,ele){
	//data代表服务器返回的数据 ele表示当前元素
	//code goes here

})

配置简单 中意的可以在这里fork

DOWNLOAD&FORK

http://vikingmute.github.com/vtooltip/

下面我们就说说怎么样来生成  有两种方法 我推荐第二种直接用github提供的自动生成工具

将页面切换到你的项目首页 比如说https://github.com/vikingmute/vtooltip

然后点击这个admin按钮

然后勾选github pages的选项框

然后在弹出框里面点击 Automatic GitHub Page Generator

当这部分完成时 你就可以直接在浏览器里面看到你的页面了 这个就是地址格式http://{userid}.github.com/{project}

怎样修改这个页面的内容 只要在项目中checkout一个叫gh-pages的branch就可以了

$ cd Repos/ampere
$ git fetch origin
remote: Counting objects: 92, done.
remote: Compressing objects: 100% (63/63), done.
remote: Total 68 (delta 41), reused 0 (delta 0)
Unpacking objects: 100% (68/68), done.
From git@github.com:tekkub/ampere
* [new branch] gh-pages -> origin/gh-pages
$ git checkout -b gh-pages origin/gh-pages
Branch gh-pages set up to track remote branch refs/remotes/origin/gh-pages.
Switched to a new branch “gh-pages”

现在你只要提交gh—pages这个分支就可以变化你demo的内容

$ cd Repos/ampere
//可以在分支和主库中转换
$ git checkout master
$ git checkout gh-pages
//分支从主库更新（merge）
$ git merge gh-pages

更多帮助请看文档
git基本操作 branch和merge

Github pages文档

技术上这几天还行 一直在学点东西 写点东西 看点东西，在github上写东西感觉挺好的。 写了一个mousetip的插件 写了一个自动加广告触发的程序 vbooks还是没有怎么动手 看了几篇好文章 包括Javascript秘密花园 http://bonsaiden.github.com/JavaScript-Garden/zh 记了笔记。

这几天无聊的时候和鬼哥一起看了电视剧 《北京爱情故事》 里面有个叫是石小猛的傻逼和我很像 丫总是一副有梦想的样子 觉得自己挺牛逼的 有着卑微而脆弱的自尊 但是偏偏找了个牛逼媳妇儿  隔三差五的因为钱的事情吃个醋 发个火。

前几天看猪蹄蹄的微博上写了一句

“世间有多少姑娘为了自己男人那点可怜又可悲的自尊心而假装无生活自理能力，假装不喜欢帅哥和名牌，假装文盲，假装一碰就高潮……真是委屈了你们。”

发现这和我很像  和大部分男人都挺像 心里面总共5平米 一句话就能占三平米  容不得别人 尤其是自己的老婆 亲戚 朋友比你强 一说到比你强的一点 就像嘴里吃了大粪似的  自尊心不能吃不能喝不能卖不能买 其实说白了还是钱的事 有钱了以后 驼背变挺直  阳痿变威猛 小四变姚明。

所以我还是多加淡定 打好篮球 努力学习+赚钱。  是的  这就是我2012年的计划

定义：超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。

工作流程：
HTTP是一个客户端和服务器端请求和应答的标准（TCP）。客户端是终端用户，服务器端是网站。通过使用Web浏览器、网络爬虫或者其它的工具，客户端发起一个到服务器上指定端口（默认端口为80）的HTTP请求。（我们称这个客户端）叫用户代理（user agent）。应答的服务器上存储着（一些）资源，比如HTML文件和图像。（我们称）这个应答服务器为源服务器（origin server）

curl http过程

构成：
HTTP有两个关键部分：一个是请求 Request（客户端），一个是响应Response（服务器端）

Request Method：HTTP defines nine methods (sometimes referred to as “verbs”) indicating the desired action to be performed on the identified resource.HTTP请求总共有九种方法，包括（OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE）
详细的信息 参看
http://en.wikipedia.org/wiki/HTTP#Request_methods
POST和GET的区别请察看我原来写的日志http://www.vikingmute.com/archives/100

HTTP Headers：HTTP header fields are components of the message header of requests and responses in the Hypertext Transfer Protocol (HTTP). They define the operating parameters of an HTTP transaction.HTTP头信息是HTTP请求和回应中附带的描述性的信息。他们定义了HTTP交互中的操作参数。
Headers分为Request Headers和Response Headers两个的区别 下面两个个举一个例子。

HTTP headers

请看上面的图 这是wiki百科的请求和响应headers，举其中的两个例子
Host： The domain name of the server (for virtual hosting), mandatory since HTTP/1.1 ：Host: en.wikipedia.org

Content-Type：The mime type of this content ： Content-Type: text/html; charset=utf-8

所有Headers的参考列表，请看http://en.wikipedia.org/wiki/List_of_HTTP_headers

Status codes：In HTTP/1.0 and since, the first line of the HTTP response is called the status line and includes a numeric status code (such as “404″) and a textual reason phrase (such as “Not Found”). 在HTTP中，HTTP响应的第一行被称作状态行，包括一个状态码（比如404）和一个文字原因短语（比如“not found”）
比如说： HTTP/1.1 302 Found

所有的状态码列表请参考：http://en.wikipedia.org/wiki/List_of_HTTP_status_codes

大体上就是这么多了，找这些资料 阅读和总结花了我大约2个多小时，累死了 不过也值了，搞清楚就最好了~

如果您想更深入的了解一些http的其他知识请看下面的参考

HTTP compression（HTTP压缩）：http://en.wikipedia.org/wiki/HTTP_compression

HTTPS（HTTP Secure）：http://en.wikipedia.org/wiki/HTTP_Secure

HTTP Cookie：http://en.wikipedia.org/wiki/HTTP_cookie

//页面用utf-8输出 避免乱码
header('Content-Type: text/html; charset=utf-8');
//设置地区 解决中文缺失的问题
setlocale(LC_ALL,'zh_CN.utf8');
//打开csv文件
if (($handle = fopen("sichuan.csv", "r")) !== FALSE) {
	$ads = array();
	$id = 0;
    //处理数据
    while (($data = fgetcsv($handle,1000,",")) !== FALSE) {
    	$ads[$id]['id'] = $id;
    	$ads[$id]['name'] = $data[5];
    	$ads[$id]['pdps'] = '';
    	$id++;
    }
    //可以处理成json
    $str = json_encode($ads);
    echo $str;
    fclose($handle);
}

所以我在这里之翻译基础只是这一部分（好久不翻译了 肯定很差 以后可以让刘老板帮忙改进一下）

原文链接

基础知识

我们生活在一个通过互联网可以快速汲取知识的时代，但是 之了解一些知识的皮毛并不代表已经已经掌握了它们并可以熟练应用，我这里有一些基础的知识点，我希望所有的前端工程师都了然于胸。你不能在有时间限制的时候还需要每次都停下来上网去查。如果有些人面对这些问题说：我不知道 但是我可以上网去查。 听到这话 我立刻给他灭灯，下面就是这些基础，我希望所有前端er都可以不依靠外部的帮助掌握它们。

1.DOM结构 节点之间的相互关系 和 怎样从一个节点到下一个节点
2.DOM修改 怎样 增加 删除 克隆 移动 查找 节点
3.事件 怎样使用事件 在IE和标准dom下的事件对象的主要区别
4.XMLHttpRequest 是什么 怎样发起一个完整的XML请求 怎样检测其中的错误
5.Strict Mode 和 Quirks Mode 怎样触发这两种格式 有什么区别
6.The Box Model(盒模型) margin padding border怎样工作 还有在ie浏览器下会有什么问题
7.Block vs Inline Elements(块级元素 内联元素) 有什么区别，怎样用css转换，对旁边的元素有什么影响
8.浮动元素 怎样使用 会出现什么问题 怎样解决出现的问题
9.JSON 是什么，为什么会使用他，怎样使用

重申一遍，这些知识点必须是你熟知的，我之前的问题都是要测试对在所有这些领域的知识水平。这个清单并不是非常的彻底，但是我相信这些都是你要成功于我们合作必备的技能和素质。

待续

所以写了两个常用的功能

第一个就是在豆瓣广播里面的图片 每次看都会跳到相册那一页 不方便 所以写了一个像微博可以放大 然后点击可以缩小的脚本 douban quickview

没有点击的时候

点击后 

第二个是 小组看淫荡直播的时候直接看楼主的帖子 将其他灌水的帖子都隐藏 这个很方便实用

没有点击的时候

点击过后

下面的帖子只显示楼主的帖子

两个插件的下载地址：

quickview ： http://userscripts.org/scripts/show/97647

live ：http://userscripts.org/scripts/show/118037

其实就是利用了一个php内置的方法simplexml_load_string();下面用直接上代码说的清楚，我用了dict.cn的辞典API，准备做一个简单的辞典小应用~ 嘻嘻

	function object_to_array($object){
        $result = array();
        $object = is_object($object) ? get_object_vars($object) : $object;
        if(empty($object) || (!is_object($object) && !is_array($object))){
			return false;
		}
		foreach ($object as $key => $val) {
		    $val = (is_object($val) || is_array($val)) ? object_to_array($val) : $val;
		    if(is_numeric($val) || is_string($val))
    		{
				$val = mb_convert_encoding($val,"GB2312","UTF-8");
    		}
    		$result[$key] = $val;
        }
        return $result;
    }

        $word = $_GET['word'];
	$str = file_get_contents('http://api.dict.cn/ws.php?utf8=true&q='.$word);
	$obj = simplexml_load_string($str);
	$arr = object_to_array($obj);
	var_dump($arr);

过程就是先把字符串读过来 然后把字符串用内置方法转成对象 然后再把对象 用自定义的函数 转成数组
我们来看一下他的结果把~

第一步 察看编码 发现乱码以后 要先看看目标文件是什么编码 有两种方法
vim对gb2312支持不太好 有时候显示为latin 不知道为什么

//使用enca来 这是很好很方便的
sudo apt-get install enca
enca filename

//使用vim
vim filename
:set fileencoding

第二步 发现编码了以后 开始转码 两种方法 enconv 和 iconv
enconv比较方便 不用新建一个文件

//enconv
enconv -L zh_CN -x UTF-8 filename

//iconv
iconv -f GB2312 -t UTF-8 file1 -o file2

效果请看   DEMO

用法 很简单 看下面说明

//两个参数 一个是数据 一个是配置参数 css可以自己按照喜好填写
//第一个是图片的数组 包括图片地址 链接 和下面的说明
var data =[{img:'1.jpg',link:'#',desc:'there you go bitch'},
{img:'2.jpg',link:'#',desc:'this is not cool'},
{img:'3.jpg',link:'#',desc:'under attack'},
{img:'4.jpg',link:'#',desc:'fuck this shit, fuck you all'},
{img:'http://www.wallcoo.com/flower/Amazing_Color_Flowers_2560x1600_II/wallpapers/1280x1024/Amazing_Flowers_Wallpapers_53.jpg',link:'#',desc:'u\'er going down bro'}
];

//默认的配置参数
var settings = {
		pagnation:true,//是否显示下面的页码
		autoPlay:true,//是否自动播放
		speed:3000,//播放速度
		event:'click',//切换事件
		height:327,//高度
		width:960//宽度
	}

//可以用你想要的配置覆盖他
var opts = {speed:2000,event:'mouseover'};

//最后~
$('.test2').vslide(opts,data);

配置很简单 焦点图还算好用 中意的可以在这里fork

DOWNLOAD&FORK