YY in Limbo 混沌海狂想

新项目”YyOPML”——把OPML转换成web界面——大家一起来晒feed订阅列表吧！

dexter_yy — Sat, 31 May 2008 01:28:30 +0800

首先要说一下目前的矛盾现状：一方面feed订阅和在线阅读器都还不够普及，多数普通网民就算经常访问blog网站，也还没养成订阅的习惯，主要还是通过门户媒体获取资讯，另一个方面，较早开始接触RSS订阅的人——特别是那些blogger和互联网geek们——不但已经对各种在线或离线的阅读器了如指掌，把阅读feed变成了上网的主要活动和习惯，而且很多人收集的feed已经多到让自己烦恼焦虑的程度。后者努力的整理删减自己的订阅列表，前者却经常抱怨不知道怎么寻找可订阅的信息来源…………这种不平衡于是引发了一种禁断的活动——朋友之间交换OPML订阅列表……

OPML是Google Reader乃至所有阅读器都支持导入导出的一种XML规范的“大纲(outline)”数据文件（题头图片里那个蓝色的方块就是OPML的标志，跟feed的著名橙色标志对应，说实话写文前我还不知道OPML也有标志……囧），通常包含用户订阅的所有feed，之所以说是“禁断”……是因为交换这种文件，直接导入到双方的阅读器里之后，很容易使信息爆炸的程度翻倍，而且对于这些导入的feed，不能像原主人那样清楚来历和订阅的理由，于是也不知道该如何看……因此直接交换的下场通常都很惨……

这个项目就是我的解决方案：让导出的OPML源文件支持直接在浏览器里作为网页来展示，而界面上使用完全展开的并排布局，可以像hao123或谷歌网站导航那样一目了然的查找网址，让访问者自己来挑选值得订阅的feed。(不过，你要有使用标签分类feed的习惯，否则显示效果肯定不好…不过那样的话，就算用常规的树状布局，效果也很差的…)

以下是示例页面，这里的“dexteryy.xml”就是我从自己的google reader里导出的OPML文件，包含完整的订阅列表：

http://www.limboy.com/yyopml/dexteryy.xml

还有谁像我一样没什么隐私担心暴露愿意分享OPML的话，可以留下网址或opml文件，我会收集到上面来……

项目主页：http://code.google.com/p/yyopml/

下载程序源码：http://code.google.com/p/yyopml/downloads/list

使用方法是：用文本编辑器打开OPML文件，在第一行后面加上以下内容：

<?xml-stylesheet href="style/yyopml.xsl" type="text/xsl"?>

然后跟解压出来的style目录一起传到服务器上，保持在同一个目录里，就可以直接用浏览器看opml文件了。

目前我提供的界面主题有两种，都是如上所说的“网站导航”风格，一个是灰色的面板风格（默认），一个是GOOGLE风格，对应的CSS文件分别是style/ui/yyopml_panel.css和style/ui/yyopml_google.css

支持在页面里切换皮肤，如果要更换默认皮肤，请修改style/ui/yyopml.js里的以下代码：

theme = theme || "panel";

把“panel”换成你要改成默认设置的css文件的后缀，比如”google”。

也可以在网址里加上参数，直接调用某种皮肤，比如”http://www.limboy.com/yyopml/dexteryy.xml#theme=google“，可以用google风格作为默认皮肤打开页面。

==================面向Coder的分界线====================

源码包括一个用来把XML转换成HTML来显示的XSL文件，和界面效果相关的文件。其中yy_core.js是我开发中的一个轻量级/FP风格的javascript库，很多代码都基于jquery，同名的方法接口也尽量跟jquery保持一致，命名空间跟土豆网的js库一样叫“TUI”，提供DOM选择器（我重写的精简功能）和一些常用工具，比jquery小很多(压缩后12k)，这个东西其实年初就想发出来……但是后来懒了，这次考虑到完成度的问题，也懒得在google code里开项目了，源码包里的yy_core.js是一个base64压缩过的版本……

另外，yyopml.js里有一个滚动条插件，是做这个项目的时候心血来潮写的，可以用类似这样的代码：$(”.list”).scrollbar(); 给那些外部容器overflow:hidden，内部容器高度超长的元素加上CSS定义的滚动条，支持鼠标滚轮，因为是基于“迷你jquery”来开发，所以应该很容易改成jquery的插件，厌倦了overflow:scroll滚动条的同学可以参考一下。

游戏类暨非IT类blog读者订阅对比报告

dexter_yy — Sat, 24 May 2008 18:14:11 +0800

1，我是标题党。

2，数据取自当日，Google Reader的show details功能。

3，选择标准一是要比较有代表性的，二是要跟it不沾边（游戏开发除外），在我熟悉的游戏领域里细分的更多，可以窥斑见豹，而且没有仅限于blog，只要是提供feed的网站就行。

4，feed订阅量是评价一个BLOG的指标，但一般订阅总数其实包含了大量重复的用户，比如有人同时在抓虾，鲜果，google reader，bloglines，豆瓣订阅了同一个blog，甚至是用浏览器自带的书签功能。如果要作横向比较，这个数字就并非很靠谱了，因为建立时间越早，用户越熟悉IT的BLOG，重复订阅的水分会越大。所以我在这里统一比较google reader的订阅量，作为目前几乎稳居霸主地位的feed阅读工具，而且杜绝了重复订阅，google reader的统计数字更有意义。

5，只是列举和对比，请用自己的智商分析

======================
名称：NTRPG
地址：http://www.ntrpg.org/
类型：群体blog，社区，portal
主题：PC游戏，桌面游戏，TRPG，hardcore玩家
======================
Posts per week: 0.0
Subscribers: 297

======================
名称：RPGdot
地址：http://www.rpgdot.com/
类型：资讯站（国外）
主题：PC游戏，RPG
======================
Posts per week: 43.4
Subscribers: 142

======================
名称：EN World
地址：http://www.enworld.org/
类型：社区（国外）
主题：TRPG
======================
Posts per week: 11.9
Subscribers: 397

======================
名称：GamingReport
地址：http://www.gamingreport.com
类型：新闻投递（国外）
主题：桌面游戏
======================
Posts per week: 25.2
Subscribers: 342

======================
名称：Joystiq
地址：http://www.joystiq.com/
类型：商业性blog（国外）
主题：主流video game
======================
Posts per week: 146.3
Subscribers: 23,757

======================
名称：1up
地址：http://www.1up.com/
类型：资讯站，portal（国外）
主题：主流video game
======================
Posts per week: 105.0
Subscribers: 3,895

======================
名称：Gamasutra News
地址：http://www.gamasutra.com/php-bin/news_index.php
类型：资讯站，社区，Portal（国外）
主题：游戏开发
======================
Posts per week: 85.4
Subscribers: 2,414

======================
名称：乌龙的BLOG（TGFC站长）
地址：http://blog.sina.com.cn/wulongx
类型：个人blog
主题：Console game
======================
Posts per week: 19.6
Subscribers: 78

======================
名称：风云的BLOG（网易的明星游戏程序员）
地址：http://blog.codingnow.com/
类型：个人blog
主题：游戏开发
======================
Posts per week: 1.2
Subscribers: 1,385

======================
名称：World of Ming（明星玩家）
地址：http://cn.worldofming.com/
类型：个人blog
主题：竞技游戏，WOW
======================
Posts per week: 4.7
Subscribers: 93

======================
名称：龙骑士城堡
地址：http://www.cndkc.net/
类型：新闻/推介，社区
主题：奇幻文学
======================
Posts per week: 3.3
Subscribers: 87

======================
名称：朱學恆的路西法地獄
地址：http://blogs.myoops.org/lucifer.php
类型：个人blog
主题：网络名人，宅文化
======================
Posts per week: 5.4
Subscribers: 827

======================
名称：漫谈 - 我们的ACG
地址：http://www.acgtalk.com/
类型：群体blog
主题：动漫
======================
Posts per week: 5.4
Subscribers: 513

======================
名称：Blog@Newsarama
地址：http://blog.newsarama.com/
类型：群体blog，社区（国外）
主题：欧美动漫
======================
osts per week: 80.0
Subscribers: 190

======================
名称：格致
地址：http://gezhi.org/
类型：群体blog
主题：科学，科研工作者
======================
Posts per week: 4.2
Subscribers: 122

======================
名称：Psytopic心理杂志
地址：http://www.psytopic.com/mag/
类型：群体blog
主题：心理学
======================
Posts per week: 0.0
Subscribers: 370

======================
名称：影像日报
地址：http://mymovie.blogbus.com/
类型：群体blog
主题：好莱坞电影
======================
Posts per week: 21.0
Subscribers: 1,193

======================
名称：美剧迷
地址：http://www.meijumi.com/
类型：blog，社区
主题：美剧
======================
Posts per week: 30.6
Subscribers: 5,112

拿一个起步比较晚的it类群体blog来对比：

======================
名称：apple4us
地址：http://apple4.us/
类型：群体blog
主题：苹果粉丝
======================
Posts per week: 0.0
Subscribers: 880

JavaScript Memoization：让函数也有记忆功能

dexter_yy — Sun, 27 Apr 2008 10:57:54 +0800

realazy在blog上给出了一个JavaScript Memoization的实现，Memoization就是函数返回值的缓存，比如一个函数参数与返回结果一一对应的hash列表，wiki上其实也有详细解释，我不细说了，只讨论一下具体实现的问题，realazy文中的代码有一些问题，比如直接用参数拼接成的字符串作为查询缓存结果的key，如果参数里包括对象或数组的话，就很难保证唯一的key，还有1楼评论里提到的：[221,3]和[22,13]这样的参数也无法区分。

那么来改写一下，首先还是用hash表来存放缓存数据：

function Memoize(fn){
var cache = {};
return function(){
var key = [];
for( var i=0, l = arguments.length; i < l; i++ )
key.push(arguments[i]);
if( !(key in cache) )
cache[key] = fn.apply(this, arguments);
return cache[key];
};
}

嗯，区别是直接把数组当作键来用，不过要注意函数里的arguments是js解释器实现的一个特殊对象，并不是真正的数组，所以要转换一下……

ps: 原来的参数包括方法名称和上下文引用：fib.fib_memo = Memoize(’fib_memo’, fib)，但实际上currying生成的函数里可以用this直接引用上层对象，更复杂的例子可以参考John Resig的makeClass，所以我改成直接传函数引用：fib.fib_memo = Memoize(fib.fib_memo)

这样写看上去似乎很靠谱，由参数组成的数组不是唯一的么。但实际上，数组之所以能作为js对象的属性名称来使用，是因为它被当作字符串处理了，也就是说如果你给函数传的参数是这样：(1,2,3), cache对象就会是这个样子：{ “1,2,3″: somedata }，如果你的参数里有对象，比如：(1,2,{i:”yy”})，实际的键值会是：”1,2,[object Object]”，所以这跟把数组拼接成字符串的方法其实没有区别……

示例：

var a = [1,2,{yy:'0'}];
var b = [1,2,{xx:'1'}];
var obj = {};
obj[a] = "111";
obj[b] = "222";
for( var i in obj )
alert( i + " = " + obj[i] ); //只会弹出"1,2,[object Object] = 222"，obj[a] = "111"被覆盖了

直接用参数作为键名的方法不靠谱了…………换一种方法试试：

function Memoize(fn){
var cache = {}, args = [];
return function(){
for( var i=0, key = args.length; i < key; i++ ) {
if( equal( args[i], arguments ) )
return cache[i];
}
args[key] = arguments;
cache[key] = fn.apply(this, arguments);
return cache[key];
};
}

可以完全避免上述问题，没有使用hash的键值对索引，而是把函数的参数和结果分别缓存在两个列表里，每次都先遍历整个参数列表作比较，找出对应的键名/ID号之后再从结果列表里取数据。以下是比较数组的equal方法：

function equal( first, second ){
if( !first || !second || first.constructor != second.constructor )
return false;
if( first.length && typeof first != "string" )
for(var i=0, l = ( first.length > second.length ) ? first.length : second.length; i<l; i++){
if( !equal( first[i], second[i] ) ) return false;
}
else if( typeof first == 'object' )
for(var n in first){
if( !equal( first[n], second[n] ) ) return false;
}
else
return ( first === second );
return true;
}

千万不要直接用==来比较arguments和args里的数组，那样比较的是内存引用，而不是参数的内容。

这种方法的速度很慢，equal方法其实影响不大，但是缓存的结果数量多了以后，每次都要遍历参数列表却是很没效率的（求80以上的fibonacci数列，在firefox3和safari3上都要40ms左右）

如果在实际应用中参数变动不多或者不接受参数的话，可以参考Oliver Steel的这篇《One-Line JavaScript Memoization》，用很短的函数式风格解决问题：

function Memoize(o, p) {
var f = o[p], mf, value;
var s = function(v) {return o[p]=v||mf};
((mf = function() {
(s(function(){return value})).reset = mf.reset;
return value = f.apply(this,arguments); //此处修改过，允许接受参数
}).reset = s)();
}

示例：

var fib = {
temp: function(n){
for(var i=0;i<10000;i++)
n=n+2;
return n;
}
}
Memoize(fib,"temp"); //让fib.temp缓存返回值
fib.temp(16); //执行结果：20006，被缓存
fib.temp(20); //执行结果：20006
fib.temp(10); //执行结果：20006
fib.temp.reset(); //重置缓存
fib.temp(10); //执行结果：20010

土豆网三周年PARTY

dexter_yy — Sat, 19 Apr 2008 01:19:05 +0800

PARTY刚刚结束，其实我到现在还没想明白为什么在我关于动画和游戏的记忆里，PARTY都是那么有趣，而现实中的PARTY只给我留下看见一堆站着的人以及自己手足无措的记忆，不明白到底有哪些不同……

好罢，PARTY本身虽然满足不了我的YY，但今天晚上还是很有趣的，本来在这种时候，最适合我的行为是留在二楼开发部里上网，该干什么干什么（这是理性的那部分人格反复告诫我的），但是我还有一部分加盟了感觉会(Society of Sensation)的人格不停的催促我去PARTY现场看看……这种implicate conflict（隐缠冲突，自创词）时常碰到，今天我碰巧找到了平衡两种人格，既能体验PARTY又不至于无事可做让自己很尴尬的方法：帮前台的XIXI姐姐搬运食物（顺便吃）+看守通道（顺便涂鸦）…

涂鸦是土豆办公室的最大特色之一，以下是我去年4月来面试时拍的照片，据说都是从以前的四行仓库搬到现在的仓库时涂的，我来晚了，没机会留下墨宝……但是由于如今土豆规模今非昔比，以前闲置的一楼也被塞满了人，白墙都需要“装修”，所以今天的PARTY搞了新的涂鸦…

我刚才下楼看过，有些画的还是很不错的，比如异型和OOXX的男女，但是重叠的太多，缺乏美学智慧……作为一个极端重视信息可见度和呈现方式的人，我是绝不能容忍这种事情的，所以我的涂鸦都在二楼主过道里…挖哈哈哈………有图有真相：

P.S. 土红色的颜料

图一，有爱

图二，图像和文字无关联

图三，javascript, lambda, closure和currying

图四，全

以下是其他图，请原谅N73的效果，我一直认为“摄影”是伪小资和真小资们为填补精神的空虚和寻求群体认同感而最喜欢选择的兴趣爱好之一（另一个是“旅游”），所以DC是邪恶的，单反是邪恶的，宜敬而远之。内置打印机的polaroid还可以考虑…

邀请函

战前

入口

现场配对，由前微软研究院的老爷开发的算法提供支持

二楼天台，有蛋糕，所以人多

三楼天台，有肉，所以人最多

后来把人赶下来，gary开讲

然后有专业舞者和饶舌者上台，台下很挤很暴力，蛋糕进不了场

再后来没拍了，完，谢谢。

iPhone App开发笔记

dexter_yy — Sat, 08 Mar 2008 03:04:13 +0800

第一，标题里的app指的是根正苗红老实本分的Web App，昨天的这个时候，对是在昨天，iPhone Web App就等同于iPhone App，咳咳，虽然现在不是了，但我这笔记是两个星期前的……

第二，不全，主要是我关心的一些细节，以及我自己理解的一些东西……

————————————懒得想小标题的分界线————————————

html里可以调用系统接口，比如电话拨号：

<a href="tel:1-408-555-5555">1-408-555-5555</a>

还有mail和google map的接口……

————————————懒得想小标题的分界线————————————

在js里嗅探iphone的safari环境，要注意agent字符串里有额外两处：

“Mobile/1A543″，这个是iphone OS的操作系统版本（注意不是固件版本）
“iPhone”，这个是移动平台的类型，如果是ipod touch的话这里会是“ipod”

此外：

“version/3.0″，Safari的市场版本号
“Safari/419.3″，这个是build版本，虽然iphone跟osx一样都是safari3.0，但build版本号不同

完整的例子：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like
Gecko) Version/3.0 Mobile/1A543 Safari/419.3

————————————懒得想小标题的分界线————————————

调用css的时候，media类型支持CSS3，比如可以用“only”来屏蔽旧浏览器，用“(min-device-width: 481px)”屏蔽小屏幕手机。由于iphone里的safari不支持print和handheld的media类型，可以用它们来对iphone屏蔽一些css文件。
示例：

<link media="only screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" >

也可以作为css选择器里，比如

@media screen {
#text { color: white; background-color: black; }
}

由于safari支持css3，你还可以享受到的福利包括在background里放6张图片做圆角，给文本加阴影，使用属性选择器之类……

————————————懒得想小标题的分界线————————————

iphone的浏览器里有一个很重要的概念是viewport（视区），系统默认的viewport为980像素，可以用meta标签指定，宽度范围从200到10,000，高度范围从223到10,000，还可以使用user-scalable禁止用户缩放页面（常见的iphone web应用，比如facebook,google reader，因为要仿原生界面，都是这样设置的），minimum-scale和maximum-scale可以设置缩放的限制，initial-scale是默认的缩放程度，范围从>0到10
示例：

<meta name="viewport" content="width = 320" />
<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />

iphone默认的浏览器窗口尺寸是: 竖向（body[orient=”profile”]）为宽320px，高356px，横向（body[orient=”landscape”]）为宽208px，高480px，但实际上这是显示了浏览器地址栏之后剩余的空间，往下拖动页面时，地址栏会隐藏，所以实际的viewport（竖向）是宽320px，高416px。
页面加载之后可以用 window.scrollTo(0, 1) 隐藏地址栏，自动使用最大化的viewport。

关于viewport，还有一个很重要的概念是：iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。所以不但iframe, overflow:scroll的元素没有滚动条，整个窗口也没有的，iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport…………由此引申出的结果很多，比如CSS里的 position:fixed 无效……

————————————懒得想小标题的分界线————————————

浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样：

所有hover动作，还有mouseover，都不存在，链接上的title内容，会在你点击链接并按住不动时弹跳出来（如果你不放开手指，继续移动的话，点击事件不会发生，具体原因下面解释）…………而mouseover，直接转换成了mousedown……

点击页面元素之后发生的事情很复杂…………比如当你用单指按住可点击元素（大约就是默认为block的元素），然后放开，首先触发的event居然是mousemove！接下来如果元素内容不变（这个条件比较难理解，我知道），会陆续触发mousedown，mouseup，click，如果内容改变，就不会再触发任何事件……

如果你恰好不太走运的给网页上一些inline元素绑过js事件（这比较常见，我也知道），比如span，有一个不用修改标签的方法是给它们都加上onclick=”void(0)”，这样iphone就会认为它们是可点击的元素-_____-b

如果按住元素之后移动手指，当然就不要指望会触发mousemove了，啥事情都没有，不过停下的时候，会触发onscroll （因为你刚才移动了viewport嘛……）

如果你用两个手指做缩放的动作，啥事件都不会有啦，但是如果你用两个手指在屏幕上一起移动，而且所在的位置是一个本来有滚动条的页面元素(比如iframe罢)，会触发一个叫mousewheel的事件（但是别指望iframe本身的内容会滚动-___-b）, 停止移动时同样触发onscroll。

OK，你希望像平时那样用onmousedown,onmouseup,onmousemove来做页面元素的拖拽交互把iphone web app的界面做的像原生界面一样活蹦乱跳的梦想已经破灭了，请努力克制骂乔布斯的欲望。

对了，不用我说也应该想得到，onkeyup，e.charCode，e.keyCode这类玩意都不能用罢？

————————————懒得想小标题的分界线————————————

默认的html控件的样式大家都已经知道很cool了，不过也可以自己修改，具体内容请查看《iphone用户界面指南》的第三章：Metrics, Layout Guidelines, and Tips

iphone里的safari调整了默认的文字样式，这些调整被包括在了一个新的css属性“-webkit-text-size-adjust”里面，相当于“-webkit-text-size-adjust:auto;”，你可以覆盖它，根据需要改成none或者200%

————————————懒得想小标题的分界线————————————

web app可以像原生应用一样，在home界面里上添加一个快捷方式图标，方法是增加一个link标签：

<link rel="apple-touch-icon" href="custom_icon.png" />

这是针对单个页面的，如果你把图片命名为“apple-touch-icon.png”，放在网站的某个目录里面，该目录下所有页面都会获得添加图标的功能……

图标的要求是尺寸57×57，png格式，不用画蛇添足的去做圆角渐变或玻璃反光效果，iphone系统会把图片自动裁剪和渲染成统一的风格……

喔对了……不要高兴太早……这个快捷图标的功能，只有1.1.3或更高的固件版本才支持……考虑到国内那些买旧版本破解机器还被商家反复叮嘱不要升级的用户……呃……

————————————懒得想小标题的分界线————————————

关于网页中的媒体文件，普通图片最大支持200万像素（jpg的话，最大可以显示出3200万的，不过超过200万的jpg都会被压成缩略图），支持的最大尺寸是2 * 1024×1024，gif动画最大支持2m（否则只显示第1帧）

iphone支持的视频格式：

H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
MPEG-4 Part 2 video (Simple Profile)
AAC-LC audio, up to 48 kHz
.mov, .mp4, .m4v, .3gp file formats

需要注意的是这里的“Baseline profile”，由于这种编码的质量跟“Extended Profile”和“main profile”相比效果比较差，目前主流的支持“高清”（h264）的视频网站，比如youtube，土豆，都没有采用Baseline profile压缩h264视频，所以iphone不但不能播放网络上流行的flv视频（因为不支持flash），连刚开始流行的h264也不能直接播放…………提供iphone应用的视频网站无法使用现有资源，不得不压缩iphone专用的视频文件，所以不要指望能立即在iphone上观看视频网站上的所有资源……T__T

由于iphone不支持flash播放器，视频文件只能直接嵌在页面里，用自带的quicktime来全屏播放，示例：

<embed src="screen.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1" ...>

更多细节请看官方文档：Including QuickTime In A Web Page

————————————懒得想小标题的分界线————————————

如果想全面了解iphone上的web开发，推荐阅读：

iPhone Human Interface Guidelines(官方还有一份名字类似的文档，简称OSXHIG，是界面设计者的圣经之一)

Safari Web Content Guide for iPhone

Web Page Development: Best Practices(这篇可以凑合看看，2月8号刚更新过的)

此外，ADC on iTunes里有好多iphone相关的视频，讨厌翻文档的可以去弄来看看，这可是iTunes store里少有的免费资源喔……

————————————懒得想小标题的分界线————————————

就像开头说的，这是2周前写的，一直懒得修改整齐了往blog上帖，但是昨天半夜（好罢是今天凌晨）在twitter上不小心看了iphone SDK发布的实况转播……我发现再拖延的话就只能贴到火星去了……

跟华丽的SDK相比，iphone safari上的开发环境可以说很糟糕，非常限制想象力——对javascript和RIA开发者来说，不过只要看看iphone用户上网的热情和相关数据，可以预见在很长一段时间里，iphone平台仍然会是立志开发web app的勇者们争夺的滩头阵地。

啊啊啊啊啊，2.10G的iphone_sdk.dmg终于下载完了，睡觉去……下周买《Cocoa入门–使用Objective-C》……