Time Machine

革命尚未成功，同志仍须努力 6

七月 24th, 2010 归档于：时光机器 Tag： webrebulid, 感动

webrebulid已经历了四年风风雨雨，最早得知这个组织的存在是一个叫 wtemplet 的东东，那时心里只是羡慕和崇拜。再看看about里面的那些志愿者，都该是如何的大牛呀。自那时起就默默的给自己立下了目标…

时过三年，再去看那些面孔，大部分已是耳熟能详，也曾把酒言欢。此时我才明白，webrebulid 是这样一个无私的领头军，默默的激励着无数的前端爱好者，向自己的目标不断前进。滴水之恩当以涌泉相报，我也希望通过自己微薄的能力去影响更多志同道合者，和大家一起成长。

有幸参与了第二届年会的主办，成功与否要看我们的期望有多高。但不难从与会者的反馈中看出，大家对webrebulid年会是非常肯定的。但成功的欢乐远不及失败的痛苦来的深刻。虚有图表的赞美也不能给进步带来任何帮助，所以我还是想说说问题：

关于守时，首先得自我批评，年会前一天约好下午2点去布置会场，我却迟迟未到，害得tension和bonnie两人忙活了一下午。其实这并不是最严重的，由于人手不够，当时确定需要check的一些东西没能及时检查到导致了第二天出现的很多问题，比如签到网络没法使用。由此看来，提前一天对会场环境熟悉，设备调试，是非常重要的。最好有ckeck list, 逐项检查。
关于计划与安排，计划不是万能的，但没有计划是万万不能的。计划需要详尽，但不可能全部覆盖，所以也需要冗余。计划一旦确定，临时的变更也是很危险的。突发事件是不可避免的。大家各司其职，做好自己的份内便是对同伴最好的帮助。
关于路线，路线的问题一开始就考虑到了，可惜没能得到很好的执行。其实网站上画的再详细作用也不是很大，像我这样的路痴其实是很多的。我们可以考虑google纵横或者直接给出地理坐标等“高科技”手段。当然，最现实，最可靠的就是在每个可能的路线上标出方向指示。
关于讨论，在会场就有同学跟我抱怨，讨论时间留的太少了，我们都是抱着问题来的，却没有机会问。这次安排确实有点紧张，上下午共六场，放一天紧张，两天有显松散。所以，webrebulid非常期待您的分享，争取可以做两天，给大家一场前端盛宴。也不枉远方的朋友辛苦跑一趟。
真切的跟yoyo同学说声对不起，签到是我，阿肆和yoyo三人一起负责的，但每每吃饭都没有顾及到她。有机会我跟阿肆一起请你吃饭。

幕后许多默默的朋友和台上那些无私的分享者都为这次年会做出了巨大的贡献。你们让我感觉到了无私和凝聚的伟大，谢谢你们。虽然没能听到多少现场的东西，但有会后的资料，有图铃兜兜同学的赠书，有认识这么多朋友，还有你… 足已!

白话Block Formatting Context 0

七月 18th, 2010 归档于：工作学习 Tag： BFC, css, html

因为在下篇文章中要用到这个概念，刚好找到了这篇不错的文章，就先转过来。原文链接

一，啥是Block Formatting Context

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成 Block Formatting Context。

二，怎样才能形成Block Formatting Context

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context

float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

三，Block Formatting Context在生产中有什么作用

Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
Block Formatting Context可以包含内部元素的浮动。考虑一下下面的例子（请用标准浏览器查看）：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type=“text/css”>
html, body {
margin: 0;
padding: 0;
}
#red, #orange, #yellow, #green {
width: 100px;
height: 100px;
float: left;
}
#red {
background: red;
}
#orange {
background: orange;
}
#yellow {
background: yellow;
}
#green {
background: green;
}
</style>
</head>
<body>
<div id=“c1″>
<div id=“red”></div>
<div id=“orange”></div>
</div>
<div id=“c2″>
<div id=“yellow”></div>
<div id=“green”></div>
</div>
</body>
</html>

在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。
Block Formatting Context可以阻止元素被浮动覆盖。请看示例：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type=“text/css”>
html, body {
margin: 0;
padding: 0;
}
#left {
width: 100px;
height: 100px;
background: red;
float: left;
}
#right {
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id=“left”></div>
<div id=“right”></div>
</body>
</html>

在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Context的border-box。换句话说，形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。

这里有更详尽的解释：http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

HTML5本地存储初探(三)4

一月 31st, 2010 归档于：工作学习 Tag： Client-Side Storage, html5, offline, webapp

完成了数据的本地存储，就要将文件存储也搞定。为了实现文件的本地存储，html5搞了一个叫 manifest 的文件，这个文件就是一个缓存清单，把需要缓存在客户端的文件告诉浏览器。manifest是一个mimetype为 text/cache-manifest 的纯文本文件。注意，这点很重要。

下面是一个manifest文件的例子：

manifest

NETWORK, CACHE, FALLBACK 都是可选的。

manifest文件必须以 CACHE MANIFEST 开头

其后需要下载并缓存的文件使用相对或绝对路径皆可，每个资源一行。

NETWORK段表明一些在线资源所在的域，所有这个域下的资源都不会被缓存，即使客户端处于离线状态，也会尝试去请求基于这些域的资源。

CACHE段还不是很明白

FALLBACK段下面每行都包含两部分内容，用空格分隔。后半部分是当前半部分路径不能访问时的备选路径（很拗），如上图就是，如果demoimages目录不能访问时，尝试访问images目录。

manifest文件介绍就到这里，下面创建我们自己的manifest文件：

我们只需要缓存两个文件即可，nbStyle.css 和 nbScript.js。还有index.html 本身，由于manifest文件会默认缓存引用自己的文件，所以index.html 不能在缓存列表中写出来：

CACHE MANIFEST
# version: 2010-01-20 22:30

nbStyle.css
nbScript.js

就是这么简单了，我们将他保存为 notebook.manifest 文件，并和其它文件一起放在根目录。

最后一个问题，如果将notebook.manifest的mimetype标识为 text/cache-manifest 类型呢？我知道有两种方法：

1. 在站点根目录建立 .htaccess 文件，在其中声明.manifest 的mimetype ，这个需要修改下服务器的配置文件，我没有尝试成功。

2. php环境在apache目录寻找一个为 “mime.types” 的配置文件，在其最后添加一行：

text/cache-manifest            manifest

然后在index.html文件引用它：
引用manifest
搞定了这些东西，你就可以尝试用webkit访问你的应用，然后离线，再尝试使用它，程序应该也可以照常运行。

至此，html5的离线存储基本介绍完了，下面附上打包的代码，代码本身没有什么难度，只是我写的太烂了:

代码下载

其实还远没有完，缓存下来的文件如果被更新了怎么办呢？如何通知客户端更新缓存其实也有api，慢慢的再探索吧。非常期待与大家探讨html5相关的问题。

HTML5本地存储初探(二)0

一月 31st, 2010 归档于：工作学习 Tag： Client-Side Storage, html5, offline, webapp

完成了UI，我们就需要对数据进行处理了。

在开始“数据”的本地存储之前，我们先来了解一下client-side database storage API:

the client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with – SQL.－－webkit blog

目前只有webkit核心的浏览器支持这一特性。你甚至都不能在w3c的html5工作草案中找到（cs-db）client-side database 的详细描述。

首先我们要尝试建立一个数据库链接：

try {
	if(!window.openDatabase){  //检测浏览器是否支持cs-db
		alert('not supported cs-db!');
	} else {
		var shortName = 'noteDB';
		var version = '1.0';
		var displayName = 'Note book database';
		var maxSize = 65536;
                //创建一个数据库
		var db = openDatabase(shortName,version,displayName,maxSize);
	}
} catch(e){  //尝试捕获错误
	if (e == 2){
		alert('Invalid database version.');
	} else {
		alert("Unknown error "+e+".");
	}
}

如果以上代码无误，你就会在safair或者chrome的开发者工具中看到这个数据库：

创建的数据库

在右侧区域可以直接执行一些sql查询，但是我总是得到 “发生意外错误“0”。” 这样的结果，不知道是不是RP的问题。

接下来就是创建表，以及执行一些sql语句进行增删改查。

js执行sql的基本语法大致是这样的：

db.transaction(
	function (transaction){
		transaction.executeSql(sqlquery,[],dataHandler, errorHandler);
	}
);

其中transaction.executeSql中参数依次为：sql查询字符串，传递给sql查询的参数，数据处理句柄，错误处理句柄。其中只有第一项为必选，其余都为可选项。

第二个参数的用法大致是这样的：

transaction.executeSql("UPDATE people set age=? where name=?;",[ age, name ]);

查询字符串中的“ ？” 会被后面数组中的变量依次替换。

注意：以上我用了“大致”这个词，因为没有官方的文档（W3C-web database），只是从一些其它文献以及自己判断得来，若有错误还请指正。

下面我们创建一张用来存储note的表：

db.transaction(
	function (transaction){
		transaction.executeSql(
                'CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,titel TEXT, note TEXT NOT NULL, date DATE);',errorHandler);
	}
);

errorHandler是这样的：

function errorHandler(transaction, error){
	alert('Error was: '+ error.message +'(Code:'+ error.code +')');

	var fatal_error = true;
	if(fatal_error){
		return true;
	}
	return false;
}

error.message 是一段错误描述，error.code 是错误代码 (详情)

再看看如果从db中检索出数据并显示到页面上：

db.transaction(
	function (transaction){
		transaction.executeSql("SELECT * from notes;",[],dataHandler, errorHandler);
	}
);

function dataHandler(transaction, results){
	var string = "";
	for (var i = 0; i" + row['titel'] + "

";
	}
	var listConts = $('listCont');
	listConts.innerHTML = string;
}

可以看出，基本上和php之类后端语言操作大同小异。
更多代码可查看示例程序，不再一一罗列。

搞定了数据的本地存储之后，接下来就要看看如何将文件储存到本地。

HTML5本地存储初探(一)5

一月 27th, 2010 归档于：工作学习 Tag： Client-Side Storage, html5, offline, webapp

html5带给我们的不仅仅是更多语义丰富的标签，还有更多更牛逼的特性，比如“离线存储”。对于台式电脑来说，或者它并没有带来什么惊喜，但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备，比如iphone，ipod touch，离线存储使得web前端工程师可以很容易的针对它们开发应用程序。

前面吹嘘了一段，不过说实在的，html5本地存储就目前来说还是很受限的。其一，浏览器限制，目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持，不过也有 Taffy DB 可以曲线救国。(还没有用过，不敢妄下结论。)。其二，服务器端需要修改配置，旦如果是自己的服务器就很简单了。

下面就以一个简单的offline web app－note book 为例，记录一下为iphone/ipod touch开发web app的过程。不是经验，只是初探。

建立适合 iphone/ipod touch 的UI
数据的本地存储
文件的本地存储
完善这个app (不打算完善它了，有时间做一个实用的app专门介绍 iphone web app 的开发吧)

首先，适合iphone/ipod touch 的UI 它并不是本文的重点，有兴趣的同学可以移步这里。这里只强调一点：你默认做的页面，放到iphone看会变的很窄，字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面，你的内容被按比例缩小了。要解决这个问题很简单，只要在html的head区域加一个meta标记，具体语法请看这里。也就是这样：

viewport

这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了，（针对设备开发可以不考虑兼容性，真是畅快淋漓呀。）

我大概做了个丑陋的界面：

app UI

html代码， CSS代码 (其实你可以不用看，最后有打包的代码)

这篇先到这里，太长了你看着累我写着也累，咱慢慢来。:)

首先感谢何必呢共享他的delicious给我，里面确实有不少好东西，Asaph就是其中一个。说白了他就是一个网络资源收集器。可以把喜欢的图片，文字，网站以“碎片”的形式储存到一个个人微博，作为自己的资源库备用。
Asaph的官方网站在这里：http://www.phoboslab.org/projects/asaph 。这个是作者的演示站点：http://www.phoboslab.org/projects/asaph。
使用很简单：

下载Asaph程序
修改lib/asaph_config.class.php 里面的 $domain，$absolutePath 以及 $db 变量。
将这个目录上传至自己的php空间，并建立数据库。(需要将data目录权限改为777)
访问admin/install.php进行安装并设置用户名密码。
完成后访问 admin/ 目录，在界面左下角有一个“ASAPH”的Bookmarklet，将其拖放至你的收藏栏。
All Done 以后见到想收藏的内容就点收藏栏上的ASAPH书签，然后点选你感兴趣的内容部分就发布到你自己的ASAPH网站了。

ASAPH的网站有段视频，看看就明白了。
Bookmarklet是个很不错的工具，完全可以用它来做一些浏览器小插件。

2010, Do More!2

一月 1st, 2010 归档于：时光机器 Tag：

201020102010201020102010

RLOG

2010201020102010201020

Do More!
Do Better!
Think Deeper!
Think Farther!

第三期web标准化交流会杂感 6

十二月 27th, 2009 归档于：时光机器 Tag： w3cteach, 微格式, 聚会, 语义

会上气氛相当不错，但唯一不足我们后来FB时提到，同学们做自我介绍时须加上“单身否”一项。

关于DTD我有一疑问没来得及问，为什么html5取消了dtd声明？也就是说w3c觉得dtd并不是那么重要的东西？

关于验证，我很同意greengnn，因为验证可以提供一条基线，使大家有最起码的标准可依。关于语义化其实有很多同学还是存疑的，它在目前来看存在的意义到底是什么？我觉得还是会后winter的解释很有说服力：我们先撇开对机器友好不谈。对于开发者来说任何编程语言都需要语义的，如果你一个页面全用div，那么后期维护，或者别人接手你的项目时，有什么样的感觉呢？很难找到哪里是哪里，就好比其它开发语言中使用无语义的变量一样让人恼火。试试读一段变量混淆过的js，你就知道了。读一段无语义的html就好像读一篇没有标点的文章，多郁闷。

微格式，可能大家觉得平时用到的比较少，就没有太重视，我觉得语义化标签与微格式是相互补充的。或者可以说，微格式是对html语义的一个扩充。微格式可用使得你的html代码可以被更多设备识别并使用。《精通HTML》第5，6章有详细的描述，推荐大家读读。其实如果用同学用过IE8的网页剪辑功能，其实那段代码就是一种可被IE8识别的微格式子类，还有qq空间首页上也使用了微格式，你可用尝试使用ff的插件Operator 将这些vCard微格式导出为hCard，供outlook之类的通讯软件使用。tommy有两篇文章可看看。aoao的blog也有不少微格式相关的文章。

最后，一点建议：可能是讨论的点有点多，所以很难深入进去讨论。希望下次能围绕一两个，或者两三个问题深入的探讨一下。

很遗憾没有时间进行html5和css3的讨论，希望下次有机会和大家一起再聚。

HTTP Headers 入门 22

十二月 3rd, 2009 归档于：文摘翻译读书笔记 Tag： Internet, web

非常感谢 @ytzong 同学在twitter上推荐这篇文章，原文在此。

本文系统的对HTTP Headers进行了简明易懂的阐述，我仅稍作笔记。

什么是HTTP Headers

HTTP是“Hypertext Transfer Protocol”的所写，整个万维网都在使用这种协议，几乎你在浏览器里看到的大部分内容都是通过http协议来传输的，比如这篇文章。

HTTP Headers是HTTP请求和相应的核心，它承载了关于客户端浏览器，请求页面，服务器等相关的信息。

We are Catalysts 6

十月 25th, 2009 归档于：懒得分类 Tag： Internet, Labs, Mozilla

看标题你或许一头雾水，这篇其实是关于Mozilla Labs的“枪文” （如果Mozilla愿意付钱给我的话）Mozilla Labs的几款新应用让人激动不已。如果说互联网改变了我们的生活方式，那么Mozilla作为这种改变的催化剂当之无愧。来看看几款神奇的应用吧：
More »