"apt-get" for Cygwin May 2nd, 2011

apt-cyg is a command-line installer for Cygwin. it syntax is similar to apt-get.

http://code.google.com/p/apt-cyg/

Posted in cygwin | Comments(5)»

Here is a javascript countdonw counter, you can use it create a simple countdown.

Example:

time left

//create a coundown for 2012!!
new mem.Countdown(document.getElementById('countdown'), new Date(2012, 1, 1, 0));

 

Scource:
https://github.com/chone/membrane-javascript-tools/blob/master/facile/countdown.js

// namespace
var mem = mem || {};
/**
 * Class for a countdown counter
 * @param {Element} el
 * @param {Date} datetime
 * @param {int} timezone, default 0
 *   exapmle: London 0(GMT 0), Paris 1 (GMT+1),
 *            Beijing 8 (GMT+8), NewYork -5 (GMT-5)
 */
mem.Countdown = function(el, datetime, timezone) {
	this._el = el;
	this._datetime = datetime;
	this._timezone = timezone || 0;
	this.start();
};

/**
 * Display string template, can use html
 */
// en_eu/en_us
mem.Countdown.TEMPLATE = {
	TEXT: ['%day%Days', '%hours%Hours', '%minutes%Minutes', '%seconds%Seconds'],
	SEPARATOR: ' : '
};
// zh_cn
/*mem.Countdown.TEMPLATE = {
	TEXT: ['%day%天', '%hours%小时', '%minutes%分', '%seconds%秒'],
	SEPARATOR: ' : '
};*/
// fr_fr
/*mem.Countdown.TEMPLATE = {
	TEXT: ['%day%Jours', '%hours%Heures', '%minutes%Minutes', '%seconds%Secondes'],
	SEPARATOR: ' : '
};*/

/**
 * Start counter, if it's starting do nothing
 */
mem.Countdown.prototype.start = function() {
	if (!this._timer) {
		var self = this;
		this._timer = setInterval(function(){
			self._showTimeLeft()
		}, 1000);
	}
};

/**
 * Stop counter
 */
mem.Countdown.prototype.stop = function() {
	clearInterval(this._timer);
};

/**
 * Create string for time left
 * @return string
 */
mem.Countdown.prototype._createText = function(day, hours, minutes, seconds) {
	var text = [], tpl = mem.Countdown.TEMPLATE;
	if (day > 0) text.push(tpl.TEXT[0].replace(/%day%/, day));
  if (day > 0 || hours > 0) text.push(tpl.TEXT[1].replace(/%hours%/, hours));
  if (day > 0 || hours > 0 || minutes > 0 || seconds > 0) {
		text.push(tpl.TEXT[2].replace(/%minutes%/, minutes));
		text.push(tpl.TEXT[3].replace(/%seconds%/, seconds));
	}
	return text.join(tpl.SEPARATOR);
};

/**
 * Show time left
 * @private
 */
mem.Countdown.prototype._showTimeLeft = function() {
	if (!this._el || !this._datetime) return;
	var ct = new Date();
  var csec = parseInt(ct.getTime()/1000) +
	           ct.getTimezoneOffset() * 60 + this._timezone * 3600;
  var nsec = parseInt(this._datetime.getTime() / 1000);
  var osec = nsec - csec;
  var day = parseInt(osec/86400);
  var rest = osec % 86400;
  var hours = parseInt(rest/3600);
  rest = rest % 3600;
  var minutes = parseInt(rest/60);
  var seconds = rest % 60;

	var text = this._createText(day, hours, minutes, seconds);
  this._el.innerHTML = text;
  if (text === '') this.stop();
};

 

用VIM写博客 March 1st, 2011

VimRepress 确实是个好东西 http://wowubuntu.com/vimrepress.html,也能支持Micolog,此篇博文既是用它来发表的

目前发现的问题:

  • 发表新文章必须要指定一个已经存在的category(修改时不用)
  • BlogUpdate 上传图片失败
  • Cats必须是已经创建的,否则无效
  • Tags间不能有空格,否则会创建一个新的tag

Tags: Micolog

Posted in vim | Comments(5)»

Cufon 使用的是javascript的实现方式,借用浏览器支持的绘图方式(Canvas, SVG, VML ..)用绘制字符的方式来代替网页中的文本,从而实现使用自定义字体的目的。

官网 http://cufon.shoqolate.com/generate/

他需要Cufon的基本框架支持,字体文件则需要将字体文件用官网提供的转换工具将转换为cufon能够支持的一个js文件。

浏览器支持: IE5+, Chrome, Firefox, Safari, Opera

以下是一个demo

<script src="http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i"></script>
<script src="/static/demo/Five_Minutes_400.font.js"></script>

<div id="cufon-demo">Hello Cufon</div>

<script>
Cufon.set('color', 'red');
Cufon.set('fontSize', '100px');
Cufon.replace(document.getElementById('cufon-demo'));
</script>

效果如下:

Hello Cufon

demo使用字体来自 http://www.cnblogs.com/lhb25/archive/2011/02/19/1958626.html

Tags: web-font

Posted in frontend | Comments(4)»

拥抱HTML5,基本篇 January 24th, 2011

随着云时代的到来,随着Firefox,Chrome等新兴浏览器的占有率日益上升,随着移动平台的发展。HTML5,CSS3已经触手可及。

还在观望?马上就起身吧,开始拥抱HTML5。这里是一篇HTML5设计原理,以及Dive into HTML5

这里先简单分享一下HTML基本写法这一方面的一些变化,以便很快的让我们手中的页面HTML5化。

DOCTYPE

DOCTYPE在表现上其实是没有意义的,主要是用于页面的验证,但是IE在实现上用DOCTYPE来判断使用的 quiks mode 还是 standard mode 来渲染页面,所以以前大家都要选择适合自己的模式来确定DOCTYPE。到了HTML5 DOCTYPE去掉了那些长长的说明和标识,如下这就是HTML5的DOCTYPE。

<!DOCTYPE html>

使用这个DOCTYPE,IE会用standard mode来渲染页面。

XML like or not? 

和XHTML不同,HTML5不要求使用XML的语法规范来写页面,所以像

<IMG src="bg.png">

<img src="bg.png">

这样看似不严谨的写法也是可以接受的,这也是HTML5设计思想的一种体现,不求好看,但求实用。

ENCODING

//HTML 4.01:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

//XHTML 1.0:
<?xml version="1.0" encoding="UTF-8" ?>

//HTML5:
<meta charset="utf-8"/>

需要说明的是,这种写法对于目前所有主流的浏览器都是有效的。

和 "text/javascript"  "text/css" 说再见

在引入javascript,和css时,以前我们往往会加上这样的说明。HTML5中,这得以被简化

<link href="style.css" rel="stylesheet">

<script src="code.js"></script>

同样的,对于目前的浏览器,去掉type="text/javascript"和type="text/css"是不会影响的。当然这也不是说所有 link 标签的type属性都能去掉,这里说的仅限于"text/css"

使用 header, footer, aside, nav, section, article 划分页面

加入有语义的标签也是HTML5的重要内容,以往我们都是通过div标签来划分网页区域的,到了HTML5引入的header, footer, aside, nav, article, section这些标签,使页面本身更好的体现结构。
section是一个基本区块,每个section可以想象成一个完整页面,header是这个section的页头,footer是页脚,aside是侧边栏, nav是导航栏, article是一篇文章。
在使用这些标签替换现在使用的div一类标签时需要注意,在一些浏览器上,这些新标签在css层面是没有默认的style的,最好统一的把他们一些默认的属性在css中定义好。
普遍的,在用这些标签替换div这样默认 display 属性为 block 的标签时要在css中给予定义,如

header {
    display: block;
}

注意: 目前IE9以下版本还不能直接使用这些标签,不过通过javascript创建这些标签以后便可正常使用。
可以在IE中引入

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

或者在js文件中包含如下脚本,便可解决这一问题
/ html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(m,c){var z="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video";function n(d){for(var a=-1;++a<o;)d.createElement(i[a])}function p(d,a){for(var e=-1,b=d.length,j,q=[];++e<b;){j=d[e];if((a=j.media||a)!="screen")q.push(p(j.imports,a),j.cssText)}return q.join("")}var g=c.createElement("div");g.innerHTML="<z>i</z>";if(g.childNodes.length!==1){var i=z.split("|"),o=i.length,s=RegExp("(^|\\s)("+z+")",
"gi"),t=RegExp("<(/*)("+z+")","gi"),u=RegExp("(^|[^\\n]*?\\s)("+z+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),r=c.createDocumentFragment(),k=c.documentElement;g=k.firstChild;var h=c.createElement("body"),l=c.createElement("style"),f;n(c);n(r);g.insertBefore(l,
g.firstChild);l.media="print";m.attachEvent("onbeforeprint",function(){var d=-1,a=p(c.styleSheets,"all"),e=[],b;for(f=f||c.body;(b=u.exec(a))!=null;)e.push((b[1]+b[2]+b[3]).replace(s,"$1.iepp_$2")+b[4]);for(l.styleSheet.cssText=e.join("\n");++d<o;){a=c.getElementsByTagName(i[d]);e=a.length;for(b=-1;++b<e;)if(a[b].className.indexOf("iepp_")<0)a[b].className+=" iepp_"+i[d]}r.appendChild(f);k.appendChild(h);h.className=f.className;h.innerHTML=f.innerHTML.replace(t,"<$1font")});m.attachEvent("onafterprint",
function(){h.innerHTML="";k.removeChild(h);k.appendChild(f);l.styleSheet.cssText=""})}})(this,document);@*/

 

最后送上HTML5 logo 下载地址 :) http://www.w3.org/html/logo/
 
html5 logo

Posted in html5 | Comments(3)»

OSL 2010 Ro36 groupG,H,I November 16th, 2010

Posted in | Comments(7)»

3color theme for Micolog November 3rd, 2010

在用Micolog搭建这个博客的第一天就把wp下面的3color搬了过来,但是一直没有整理发布出来。

今天终于把它发布出来希望Micolog的使用者们能喜欢。

下载地址:

http://micolog.appspot.com/themes/view?key=agdtaWNvbG9nchELEgVUaGVtZSIGM2NvbG9yDA

Tags: Micolog

Posted in | Comments(4)»

windows下安装iku (http://c.youku.com/iku) 后可以通过页面中的iku链接启动下载视频

链接的格式 (中文转换为URI格式)

iku:// 
|
video
|
(视频标题)
|
(视频时长 hh:mm:ss)
|
(视频大小 flv byte)
|
(用户名)
|
(上传时间)
|
(缩略图URL)

获得视频信息(JSON格式)
url
http://v.youku.com/player/getPlayList/VideoIDS/{videoId}

返回值(JSON对象记为obj, 中文为unicode编码)
视频标题: obj.data[0].title
视频时长(单位s): obj.data[0].seconds
视频大小(单位byte): obj.data[0].flv or obj.data[0].mp4
用户名: obj.data[0].username
缩略图URL: obj.data[0].logo

从youku播放页面中过滤出iku下载地址
RegExp /iku:\/\/[^"]*/

Tags: youku

Posted in | Comments(5)»

汉字 --> Unicode

escape(str).toLocaleLowerCase().replace(/%u/gi,'\\u');

Unicode --> 汉字

unescape(str.replace(/\\u/gi,'%u'));


mootools是一个优秀的跨浏览器javascript框架,让你得以使用简洁并且优雅的方式实现面向对象的javascript编程。

http://mootools.net

从今天开始想根据自己的使用经验记录下一些东西,算是一个对于这个框架认识的一个梳理,也希望能给有兴趣使用这个框架的人一些参考。

当前的mootools的最新版本是1.3,我也就根据目前这个版本的文档进行一些梳理吧(http://mootools.net/docs)

第一部分就是core, 其实这部分并不能严格的算是mootools的核心,core里面的内容其实是一些工具函数。mootools的核心其实应该是types部分和class部分。

http://mootools.net/docs/core/Core/Core

typeOf (1.3以前的$type)
typeOf是一个函数,他接收一个参数并返回他的类型。是对javascript的原生函数typeof的扩充。
不过typeOf不能像typeof那样当作单目运算符使用

typeof(10) // return 'number'
typeOf(10) // return 'number'

typeof 10 // return 'number'
typeOf 10 // syntax error!!

instanceOf
和typeOf类似,他是对于原生的 instanceof 的扩充,可以支持mootools所扩充的类型.
要注意的是原生的 instanceof 是一个二目运算符,而 instanceOf 是一个函数

core其他函数在1.3已经被去除或转移。

接下来是types部分,mootools 整体的实现是通过扩展原生javascript来完成的。types部分就是对于原生的几个基本类型的扩展,添加一些实用的方法以及解决常见的跨浏览器差异。

Array
http://mootools.net/docs/core/Types/Array
除了浏览器原生支持的一些方法,mootools 添加了以下一些方法

Array.each(iterable, fn[, bind])
这是一个静态方法,用于遍历一个数组或者一些类型数据的数据集(如, document.getElementsByTagName, childNodes 返回的结构),第一个参数为遍历对象,fn为遍历函数
遍历函数 fn(item, index, object) 的参数依次为: 数组成员,成员索引,所遍历的对象

var sum = 0;
Array.each([1, 2, 3], function(item){
sum += item;
});
// sum = 6

Array.each 的第三个参数用于给遍历函数中的 this 绑定一个其他的对象

var sum = 0;
Array.each([1, 2, 3], function(item){
this.sum += item;
}, window);
// sum = 6

对于 Array 的实例来说可以直接调用他的成员方法 each 进行遍历,所以Array.each主要还是使用于遍历 document.getElementsByTagName 返回值这样的结构

var sum = 0;
[1, 2, 3].each(function(item, index, array){
this.sum += item;
}, window);

Array.clone(array)
数组在作为值的传递过程中传递的只是一个映射,而不是数组本身。Array.clone会返回一个与参数相同的新数组从而打破原来的那种映射关系。

var a = [1, 2, 3];
var b = a; // 两个变量指向的是同一个数组
b[0] = 10; // a,b的值都变成 [10, 2, 3]

var a = [1, 2, 3];
var b = Array.clone(a); // b将指向一个新的数值
b[0] = 10; // b的值变为 [10, 2, 3], a仍为 [1, 2, 3]

Array.from(object)
这个函数将给定的参数包装成为一个数组,如果参数是一个数组那么它只是简单的返回这个数组,如果是别的类型那么这个对象将成为一个返回的新数组的第一个成员。
var a = Array.from([1, 2, 3]); // a = [1, 2, 3]
var b = Array.from('hi'); // a = ['hi']
var c = Array.from({aa: 10, bb: 20}); // c = [{aa: 10, bb: 20}]

这个函数可以让你很方便的处理一些可能是数组或是单个对象的情况。
比如在JSON结构的数据中,如果某个key对应的值可能是一个或者多个时
data 可能为
{
member: 'chone'
}
或者
{
member: ['chone', 'leo']
}

那么我们就可以将member打包成数组再进行遍历
var show = function(data){
Array.from(data.memebr).each(function(item){
console.log(item);
});
}

 

___________________________

今天就先到这里,下次继续。。。:p

Posted in mootools | Comments(4)»