再谈网页设计中的em与px

回应hax大牛在“em or px“的讨论:

上次看到你在我分享的friendfeed上面的评论我就想好好讨论一下这个问题了。’em’是从字体设计上面继承的一个概念,是指字模的高度,一般书上会说em能够保证不同字体的大写X的高度保持一致。那么大写X的高度就是这个字体的em。

你说的px是相对单位不仅在你说的显示器尺寸上是相对的,而且由于大部分的矢量元素的渲染来说比较先进的浏览器都支持“半像素平滑”,连像素内的颜色的投影也可以是相对的(渲染引擎会进行像素平滑的计算)。

在网页渲染的布局上来说它要转化em到px这个单位,就是说在一定的zoom下两者是等价的。

但是为什么我还是很支持使用em作为首选的字体和布局单位呢?当然这不是用来保证一行到底可以显示多少文字,因为px也可以保证。主要目的是区分布局中“缩放友好”的矢量元素(如字体,布局相关的所有html元素)和“缩放不友好”的标量元素(如很多“替换元素”是不友好的,典型的如图片,还有在使用某些Windows主题以后的input元素)。在使用webkit的浏览器,缩放会更加友好,文字和布局会随缩放变化,但是图片等却保持原有的最佳尺寸。Firefox3以后所使用的全部缩放我觉得在有些时候是有用的,可是总有它让你不爽的地方⋯⋯

比如如果你在某些设计场合希望容器变大文字尺寸不变,从而在缩放显示更多内容。另外一些地方你希望容器和文字尺寸一起变化。px和em的配合让两种需求可以比较容易的在同一个页面出现。

从设计为内容服务的角度考虑,使用em作为基本单位可以让你更集中于“内容驱动”,避免过分的”设计驱动“。我的工作范畴内前者更常见,也更符合客户的需求。

Tin’s tweets on 2009-09-20

  • RT @mactanxin: 32G touch中关村居然到货了 //2也有32G的,你确认是3代的么? #
  • @alex_hal9000 今天说Fred George所说的Master不应该翻译为“大师”,而应该翻译为师父。就是可以以带徒弟的NB程序员。 #
  • RT @turingbook: RT @Fenng: 完全同意你们的观点。从对齐的角度来说没有首缩进好很多。而且在Web上我们习惯比较大的行间距,这样就不容易产生段间视觉粘连的问题,缩进的价值就小了。从技术上说很多首缩进是用“真”空格实现的,这属于形式对内容的污染,要杜绝。 #
  • RT @alex_hal9000: 所以说鸡和蛋问题的终极答案, 一切这些麻烦的起源, 超级无敌大鸡蛋, 就是Alan Kay #
  • RT @jiakuan: @cleverpig 我的 #openparty 一句话感言: Everyone can benefit from OpenParty. #
  • RT @virushuo: @robinlu 10点才闹不错了,我楼下是个幼儿园,每天7点大喇叭准时播放一首“闪电小飞侠”什么的歌,每次我被闹醒都恨的压根痒痒。//可以使用白噪音枕头,跟机器猫要一个就可以…… #
  • RT @alex_hal9000: RT @xiaodao: RT @mechiland: 给孩子取名字真是个头疼的事情……// 建议: 陈小语(Smalltalk), 陈红石(Ruby), 陈熙(C), 陈嘉嘉(C++), 陈小龙(Python)…//PC补充陈假娃Java #
  • RT @xpeng: 中午的讨论用抗八级地震来隐喻设计的价值是不恰当的,前者使客户受益,后者使自身受益。//八级地震隐喻的是非功能需求。切尔斯基说的是对于非功能需求所需要的“设计”是否需要付费。但是由于NFR难以评估完成情况,所以付费也就非常的难。我觉得还是恰当的。 #
  • RT @alex_hal9000: RT @diamondtin: RT @alex_hal9000: RT @xiaodao: RT @mechiland //PC补充陈假娃Java //假娃是yuexin说的. 我说的是陈二郎(erlang) //如真叫这个名字我捐给米高5百 #
  • RT @xiaodao: RT @diamondtin: RT @alex_hal9000: RT @xiaodao: RT @mechiland 补充陈阿达(ada),陈珀洱(perl)//我觉得你女儿李新娜才是好名字! ^__^b Sina的忠实用户 #
  • RT @gvanrossum: "Lovely Python" book #2 on china-pub.com's bestseller list. http://www.china-pub.com/195771 #
  • RT @apple4us: Adobe CS4 序列号的失效让我脑子里冒出这样一个选题:「你真的需要 Photoshop 吗?」其实 90% 的人真的不需要。Mac OS X 上有什么较为廉宜的图像编辑软件?//SeaShore, Blue Crab #
  • RT @xpeng: RT @diamondtin: (比如扩展性、伸缩性,这些长远看客户也“可能”受益,但是团队必然受益)//我不知道团队在这里为什么会受益?如果这些是用户的非功能需求,那么就需要考虑。可能是有些程序员仗着这些需求难以衡量,所糊弄客户,坏了设计的名声。 #
  • RT @iamhukai: 正在进行首次的Spring Framework培训,我感觉自己讲的不错,该提到的提到了,该引申的引申了,多谢Cruise Team之前对于试讲的捧场。//股掌,胡凯大神! #
  • RT @nowazhu: 有车人士必备啊:《车震指南》, http://www.hudong.com/wiki/车震 #
  • RT @KentBeck:RT @dharmesh: Pick an idea important enough that even if you fail, the world is still better for you having tried. -@timoreilly #
  • 我是应该买MC118呢还是MB990呢?拿不定主意呀,大家有什么想法么? #
  • 为什么蓝色李施德林漱口水的颜色为什么和蓝色威露士洗手液看起来那么相似呢?用错了可就麻烦了。 #
  • RT @fire9: RT @diamondtin: 我是应该买MC118呢还是MB990呢?拿不定主意呀,大家有什么想法么?{我也郁闷是买MBP990还是买MBP986,你少写个P} //嘻嘻,你倾向于哪个呢?我倾向MC118。BTW:的确是MB990,不是MBP990 #
  • RT @delphij: 这年头就没有一款靠谱的SATA 3.5"硬盘么…… //WD的Green系列还凑合吧? #
  • RT @cnhacktnt: 还有多少人记得雨声论坛rorz ?//RoR and CoC,都不在了 #
  • RT @fire9: @diamondtin 你是用惯15寸的人了。我也想买15寸的不过价格太高啊。综合选择还是990性价比最高啊。你经常出差吧,还是买个轻点比较好,小又不失性能。//可丫集成显卡居然是共享内存的……这个我不喜欢。要不再高升一步……我就破产了。 #
  • RT @genedna: @diamondtin 要买的话还是15寸的,13寸的用了就该后悔没有买15寸的。//嗯,坚定了,回家讨好老婆等待批准。但是是否独立显卡又闹心了。 #
  • 想起今晚要去迪卡侬买自行车去……不要丢不要丢 #
  • 迪卡侬的销售人员服务很好,我去买自行车,一个年龄相仿的销售给我讲了半天,原来他就是玩自行车的。买了一辆特价的山地,699,加上挡泥板车撑,座垫,锁,一共要850,骑起来比原来的老爷车轻松多了。飞奔起来感觉最深的就是车闸终于灵了 ^__^ #
  • RT @choubb2001: @diamondtin 早说啊, 我那辆二手rockrider 5.2比这个可强多了, 目前闲置中。//我不懂自行车,你这么说我想起来我买那个叫rockrider 5.0。等我这个丢了找你去买吧 😀 #
  • RT @iceboundrock: @diamondtin 有消息说,近几周iMac/Macbooks可能会有一次升级。http://bit.ly/13W3Bl //还好不是Macbook pro系列,我觉得还是MC118吧,屏幕大一些就可以用Tree style tabs了。 #
  • 松下的白色GF1 + 20mm头实在很吸引人……中毒了。睡觉梦一下去。 #
  • RT @delphij: WD的Green系列还凑合吧? // 似乎故障率很高啊?运输问题?//你不是说用在服务器吧?希捷现在问题还是很大(我家三块都时不时怪声+卡死)。WD铝盘在国内口碑好很多,温度也低一些。日立国内代理不行,开箱损坏率有点高。 #
  • 是我记错了么?我记得最开始Apple中国网站公布的iPod nano 5 (8G)售价是1198,可是今天打开已经是1298了……为什么呢? http://is.gd/3orV4 中文站点上面并排的9个“如何购买”让我苦笑不得,这设计太SB了 #
  • RT @yarshure: RT @@diamondtin: RT @delphij: WD的Green系列还凑合吧? // 似乎故障率很高啊?运输问题?//怪声+卡死)要安心用企业版 //那价格让我感觉Raid更靠谱…… #
  • RT @mactanxin: 160GB的Classic 还是 16GB的Nano5 呢? 哪位推荐一下? //这俩东西完全没有可比性呀。因为侧重点不同,所以你可考虑两个都买了。 #
  • 拍下一个Macbook pro MC118,11200,白盒打开过,内包未打开(俗称开箱版)。明天去村里提货……怕再遇到坏点。有经验或者有更好路子的朋友请RT…… #
  • RT @fire9: RT @piggybox: @fire9 别买苹果无线鼠标阿,那个贼难用,要后悔的 {哦,多谢!那我还是用现在的雷柏吧。} //蓝牙鼠还真没有几个好用的。我的Logi V470只能休长假,VX nano还是非常好用的(可惜Y占用了MBP一个宝贵的USB口)。 #
  • RT @xiaodao: 今天老婆做了香喷喷的剁椒鱼头。//你老婆是想说:“小刀辛苦了,来补补身子……” #
  • 最近出版的好书很多呀,破产了 #
  • 今天拿到了美版MC118,11250,白盒未开版本。而且还幸运的买到了蓝色的16G iPod nano 5,港行,1280。老婆很高兴,我也很高兴。 #
  • 但是……老婆说她更喜欢绿色的……有谁想跟我用绿色iPod nano 5换蓝色的么? #
  • RT @alex_hal9000: RT @diamondtin: 最近出版的好书很多呀,破产了 //  比如? //自认品味不佳,献丑,重构HTML、ThoughtWorks文集中文版、Web开发修炼之道、代码整洁之道、可爱的Python、思考的技术、Web界面设计……等等 #
  • RT @mactanxin: 新nano5怎么样? //由于上个nano是一代,没啥可比性。新功能等老婆试用以后才知道是否好用。刚才玩了下摄像,右手拿它手非常容易被照下手指头,室内早点比较严重。其它的等传了歌曲才知道。 #
  • 还有一个iWork 09的family license可以share,有身边朋友想搭车么?一个人119人民币。因为苹果的这个是君子协定,所以仅限身边想用正版的密友。 #
  • RT @builddoctor: #CITCON: Reasons teams fail in acceptance testing: No collaboration. Focusing on 'how' not on 'what'. #
  • RT @builddoctor: #CITCON: Reasons teams fail in acceptance testing: Tests aren't usable as live documentation. #
  • RT @builddoctor: #CITCON: Reasons teams fail in acceptance testing: Expecting acceptance tests to be a full regression suite. #
  • RT @builddoctor: #CITCON: Reasons teams fail in acceptance testing: Focussing on tools. #
  • RT @mactanxin: 据说新的3代touch 比 iPhone 3GS还要快一点点.. 亚灭帖 //你要去三里屯买touch 3? 难道价格有吸引力么?港行中关村已经到货好几天了。三里屯我觉得比较适合逛逛,买还是寻求个公平的价格好。 #
  • RT @alex_hal9000: Link to all video lectures MIT #SICP, mp4 format, play perfectly on my G1 🙂 http://tinyurl.com/n6jh77 //Cool! #
  • RT @xiaodao: @diamondtin 你买了clean code影印版了? //还没有。我深知,买了影印版,等我看完,中文版都买过劲了……,可惜这些好书很有吸引力。 #
  • RT @underone: @diamondtin 我也喜欢绿色 //那我知道我没法和你换了。你最近有没有搞搞这个生意?当年我第一个Rio 800还是从你那里淘换来的涅! #
  • RT @xiaodao: RT @diamondtin: 还有一个iWork 09的family license可以share,有身边朋友想搭车么?一个人119人民币。因为苹果的这个是君子协定,所以仅限身边想用正版的密友。//我要。//乖,周一给你刻一张过去,你抢了徐X的坐:D #
  • RT @heqian: 'Automatically fill free space with songs'这个功能对我们这些iPhone 8G用户而言实在太有用了!//可是Y这个功能隐藏的太深刻了……我是今年年初才最终找到这个功能的,可是……05年我还写博客表扬这个功能。 #
  • RT @alex_hal9000: 妈的, 又没买到火车票. 每年这个时候就恨的牙痒痒. 就这点儿资源先是被特权阶层盘剥一遍, 然后又被黄牛联合铁路票务盘剥一遍, 到老百姓这里就剩点渣渣了. //开车回去吧,提早两天出发。要不背上你的娃骑自行车回家?提前一周出发? #
  • 这些NB的飞机里面居然还有我国农民制造的直升机:http://bit.ly/13N9FV #
  • RT @utom: @underone 献给爷一只猫 http://fave.utom.us/view/657 //我非常喜欢你的fave这个图片收藏site,你是怎么做的? #
  • RT @alex_hal9000: Listening to "only" from Tommy Emmanuel. pure, clean, beautiful. //PC,我很喜欢你推荐的吉他专辑。 #

Powered by Twitter Tools.

Tin’s tweets on 2009-09-13

  • 用了两周Snow Leopard的中文输入法,我现在还是感觉QIM挺好用,因为它给我的惊讶最小。其实FIT我也很喜欢,可惜它已经停止官方维护了。 #
  • 今天看到了一篇很好的讲Javascript Library的文章:http://is.gd/2Wr13
    作者是一位MooTools开发者,他阐述了Javascript的实现模式编程(programming to the patterns),并对比了流行库对它的影响。 #
  • RT @robinlu: UML, 这东西真的有人在用么?//上次和 @iamhukai 聊的时候,他说UML是一种通用约定,在画草图表达设计想法的时候还是很好用的,能够让交流更加高效和精确。 #
  • 上周末花了些时间给岳父的N97倒通讯录。我发现Nokia的软件太难用了,字体特别难看,交互很脑残,而且还没有iSync插件,太难用了。而N97手机本身的界面也让我怀疑Nokia工程师们的审美,比Andriod的差很远很远,iPhone的更没的比了。这东西人家白送我都不用。 #
  • RT @whimet: 这种思维在java编程中很常见,js中有点儿少,但确实是OO的精髓。 //这算是一种语言遗产吧。我写了个短评论:http://is.gd/2WUs3 #
  • 我发现用arRsync这个GUI的rsync做备份的话,使用两个USB硬盘对拷,读写能够达到17.8MB/s。而在Terminal下面使用rsync -avz的话读写只能达到7.5MB/s。差距非常巨大呀。以后备份大个数据使用arRsync了。 #
  • transparent vs. unknowable, open vs. closed, shared control vs. central control, international vs. internationalized #
  • Nice point: design with fake data = fake design! #
  • This slide about interface design is awesome! I love it so much! Sex and Design Axioms: http://is.gd/2X4ds #
  • RT @timbray: Table of camera sensor sizes, very useful: http://bit.ly/oIrnu #
  • So sad. #
  • RT @gfrog: RT @quakelee: RT @gfrog: 鼠标左键开始不听话了,单击经常变成连点。所谓的thinkpad红点果然靠不住。还是回去用雷柏好了。 //罗技的忠实粉丝飘过~ //罗技太贵,而且按键声音我感觉有点大。。。//做Geek,自己修换个微动很容易 #
  • RT @icej: RT: @qingfeng: staff邮箱挂了…..金峰同学我们想念你….[……] //赛,这么NB的系统还能修复么? #
  • RT @quakelee: 今天老妈过生日,本来想请她去吃藏红花,结果她还嫌贵。只好顺她的意了,顺也是很重要的。//藏红花好吃么? #
  • iPod touch没什么实质升级是一个让人很happy的事情呢?还是一件令人很happy的事情呢?马上开始谋划到底要送几个iPod nano给亲人们,感觉它已经圆满了。 #
  • 开始鸡冻的下载iPod touch firmware 3.1.1……网络太慢了。苹果真的是一个让人羡慕的公司呀,比股沟还酷!人家这产品网页真NND优雅。 #
  • RT @icej: 有时候公司真的打算用"敏捷"的时候听起来也挺SB的…要求的总是不自然:大家得说三样东西: 昨天做了什么,今天打算作什么,有什么障碍阻止你做你今天想做的事情,为了避免大家发呆,我们站着开此会议,每个人尽可能30秒内说完。//慢慢来,别急。多回顾。 #
  • RT @fire9: 现在这光驱真便宜了,包装,里面的配置都比以前简陋了很多。//包装简陋会更环保一些嘛。 #
  • RT @qingfeng: 新nano4不错阿 http://www.apple.com/ipodnano/ //送你‘新’女朋友一个吧,一共要送几个? #
  • RT @qingfeng: 考虑入手一个新nano4 //米国官网说24小时送货,那是不是说中国apple store也马上到货了?同去? #
  • RT @fire9: 越狱的朋友们注意了!!! Cydia警告升级至iPhone OS 3.1后将永久无法越狱 //妈呀,刚重启过……看来已经没戏了。不过不越狱也够用了。 #
  • RT @quakelee: 还不错,环境挺优雅的,海鲜饭一般,性价比有点低,其他的东西还不错 //是饭店呀,我还以为是那味中药呢。嘻嘻,我觉得请父母吃骨头汤挺好的。 #
  • RT @robinlu: port里的bash-completion真不错,必装 //是某个scm的bash-completion variants么?还是什么别的火星东西? #
  • RT @alex_hal9000: on Kent Beck's Responsive Design session, learned a lot 😀 //but nobody tweet about it, looking forward for your share… #
  • RT @nicholasdsj: RT @nasiless: Stepping Stone Strategy 我们也用到了,比如新的中央数据库就是某年久失修的破烂系统的垫脚石 // 人家就是给这些经验起了个好听的名字而已 //有了名字也就有了‘共同语言’,此后使用它就方便了。 #
  • RT @diamondtin: RT @fire9: 现在这光驱真便宜了,包装,里面的配置都比以前简陋了很多。//包装简陋会更环保一些嘛。//赛,你有Apple TV呀,破了以后能做什么?又教程么? #
  • RT @quakelee: 新邮政法将实施 民营快递或失八成信件业务 http://is.gd/36gjy //想起昨天老聂的故事,看来老聂这次肯定要失业了…//MD,最烦和SB中国邮政打交道了。 #
  • RT @leopay: RT @diamondtin RT @diamondtin: RT @fire9: Apple TV是不是mac mini的翻版?//内存很小呀。 #
  • Must Eat Birds 这个游戏很好玩! #
  • RT @css3watcher: RT @johnflano: Now, I'm not a fan of iTunes but the updated iTunes 9 UI http://bit.ly/1kAmWK is based around HTML and CSS3 #
  • 第一次听Kent Beck演讲,比想象中语速要慢。跟着他的节奏去思考。 #
  • 所以Responsive Design这样的思想是用来解决软件开发中的效率问题的(Effectiveness)的。 #
  • Dave Thomas说The Pragmatic Programmers这本书大部分都是敏捷的建议(Mostly agile advice)。 #
  • RT @zoomq: ~ 09:25 "敏捷不是个状态,而是种长期的修炼!"~这不就是过程改进嘛?!"过程改进乃是催生可促生靠谱的人的组织!" //个体与交互 > 过程和工具(敏捷宣言) #
  • Fix broken windows非常重要。持续的改进已有已知的缺陷非常重要。Dave Thomas举例说纽约曾经修好破窗户成功降低了犯罪率。停止代码腐烂和过程腐烂,尽快修复问题,就会减少发生大问题的几率。 #
  • RT @yarshure: RT @@iamxhan: 收到MEME邀请了哈哈。这次终于抢注下 xhan http://meme.yahoo.com/xhan //注册这么多微博不是违反了DRY规则么? #
  • Fred George说从新手到一个熟练工需要2-6个月,从熟练工到一个大师需要2年以上或者永远无法完成。大师可以有拥有相当于10个人的生产率,熟练工可以相当于2人。 #
  • Fred George说:学习必须是在一起的工作中完成的。所以第一步要“维修家居” “Fix he furniture”,建立一个可以学习的环境。学习的环境应该是“餐桌式”的,在这样的地方大家就可以学习了,方便了你们之间的交流。 #
  • Fred说传统管理者的问题:传统的经理管理很多人,经理就好像一只鲨鱼,大家都怕他。经理已经不再写代码了,和开发者没有共同语言。新的模式需要Reversion Control,控制反转。经理不再管理这个团队,而是改为他为这个团队服务。他要帮助团队中的每一个人。 #
  • Fred推荐了两本书,关于管理方式转型的。The Soul of a New Machine》里面讲了项目经理职责转型。《Guns, Germs, and teel》翻译《枪炮病菌与钢铁》,人类社会的命运。 #
  • Fred大师还说,他可以作UI design的。目前所在的公司在做omio.com,他也承担了一些UI设计工作。 #
  • Fred George说:对生产率的影响:技能(几倍于后者) >> 过程 > 工具 > 管理 #
  • Michael Robinson说敏捷宣言的背后动因是,价值(Value)超过可预测性(Predicability)。 #
  • 现在知道默默的那个巨复杂的敏捷实践价值链的图是从哪里来的了:D #
  • Chad fowler说自由:Test-Driven Development frees us to change our software without fear. #
  • Chad fowler说自由:Continuous automation frees us to deploy our software without wondering if it’s horribly broken. #
  • Chad fowler说自由:Business management systems free business owners to focus on the parts of the business they love. - 来自PragPub 2009-09 #
  • RT @dreamwords: 这两天在会场经常碰到人问,你们是怎么敏捷的,想了半天,回答基本上都是,我们的敏捷不具扩展性,靠人保证,不靠规则保证 … #agilechina2009 //敏捷就是自发的,由人保证的。实时要贯彻敏捷的价值观。^__^ #
  • RT @zoomq: AC09~11:38 Aave Nicolette(又一个Dave,TW 的市场总监) 敏捷的未来发展趋势 / The Future Trends of Agile //名字错了,是Michael Robinson先生。 #
  • 今天下午和Fred George聊天,他提出了一个“双塔”的理论,补充了上午所说的新手->熟练工->大师的问题,他说大师需要2年到永远的时间。但是下午我和他讨论他补充说,大师需要在一个有大师的团队中产生,或者至少是有两个接近大师的人,否则很难孤立的就成为大师。 #
  • 我还问了昨天经典的Ruby or Python的问题,他回答说这就是“鹌鹑理论”。话说如果你向鹌鹑群投了一把米,一只过去啄食,逐渐整个鹌鹑群都回聚拢过去吃。他说他的“大师”圈子也是这样,马大叔、Prag Dave、Bob大叔、Kent Beck、Fred都在用Ruby,所以…… #
  • Fred说一切的一切(“大师”们的由来)都是因为Smalltalk,而所有的敏捷的一切(尤其是重构,重构到模式)都来自《Smalltalk best practice》。他说他成为大师的动力来自Kent Beck,他曾经说Fred的代码丑,所以三年后他已经夸Fred代码漂亮了。 #
  • Fred George自豪的说他现在所在的公司15个开发人员有2个大师,4个接近大师,他说这才是一个健康高效的团队的组成成分。非常汉,哪里找他这样的从85年就做敏捷的人呀。但是这解释了为什么Kent为首的这些实践派大师居然都有一起工作的经历,我们马大神也是Kent影响出来的大师。 #
  • RT @robinlu: @diamondtin 又出现鸡和蛋的问题了。第一个大师的出现是何等的奇迹啊。//我发现一个模式,这些大师都是收到了Kent的刺激和影响出现的……Orz #
  • RT @alex_hal9000: 这些人都是Smalltalk developer出身, 要是见到Ruby不喜欢反而喜欢Python那才叫怪呢//Fred说是他让Badri去学习smalltalk的……都是一条线上的蚂蚱呀。 #
  • RT @qingfeng: 不破解的Apple TV其实也能看各种影片,就是需要自己手工转换成mp4//你用aTV以后可以看家里面共享的高清影片了没? #
  • RT @robinlu: @diamondtin google那只鹌鹑也不是吃素的。 //是呀,两大堆鹌鹑。碰巧我们的偶像们是这一堆。 #
  • RT @qingfeng: @diamondtin 你有最新版的aTV Flash吗? //驴子上没有么? #

Powered by Twitter Tools.

pac文件生成脚本

之前写过一个我的pac文件,但是非常不好意思。因为那个脚本我为了定义网站列表比较简单,用了个数组。可是pac文件并非在完备的javascript环境运行,所以动了手脚以后这个pac文件只在firefox里面可用,而safari和系统级别都不能用(MacOS X)。所以还是老实写传统的好。可是转念一想,不如还是ruby一下吧。这样修改起来还是加一个域名就OK了。

#!/usr/bin/env ruby
proxy = 'SOCKS 127.0.0.1:7777'
gfucked_sites = [
  'youtube.com',
  'ytimg.com',
  'googlevideo.com',
  'tinyurl.com',
  'bit.ly',
  'blogspot.com',
  'twitter.com',
  'plurk.com',
  'torproject.org',
  'wikipedia.org',
  'tumblr.com',
  'soup.io',
  'pandora.com',
  'adobe.com',
  'last.fm',
  'photoshop.com',
  'google.com',
  'googlecode.com',
  'appspot.com',
  'acer.com',
  'demonoid.com',
  'alexa.com',
  'wikimedia.org',
  'yahoo.com',
  'zend.com',
  'aptana.com',
  'uncyclopedia.tw',
  'uncyc.org',
  'webarchive.org',
  'pornhub.com',
  'yourporn.com',
  'facebook.com',
  'mail-archive.com',
  'versionapp.com',
  'friendfeed.com',
  'ff.im',
  'chinagfw.org',
  'bullogger.com',
  'mulhollanddrive.com',
  'iphone-dev.org',
  'plurk.com',
  'imageshack.us',
  'zendesk.com'
]
puts "function FindProxyForURL(url, host) {"
gfucked_sites.each do |site|
  puts "  if (shExpMatch(url, \"*://*.#{site}/*\")) { return \"#{proxy}\"; }"
  puts "  if (shExpMatch(url, \"*://#{site}/*\")) { return \"#{proxy}\"; }"
end
puts "  return \"DIRECT\""
puts "}"

如果使用tor则修改proxy=’SOCKS 127.0.0.1:9050’就OK了。生成一个放在可以访问的Url上,然后让整个系统使用这个proxy,我们就又可以使用我们喜欢的twitter客户端了(for me it’s tweetie)。

OpenParty“溪窗听雨”现场照片

八月底的Open Party如期举行。这次组织的比较困难,因为一般能够帮忙的几位组织者都没来(默默、钱钱、璎珞、小刀),只有我和Cleverpig维持现场秩序了。

这次我们的老朋友Chris(Open Party活动食品服装赞助人)安排了中移动来讲Ophone。因为这个涉及到下面1年的赞助问题,所以我们也没有什么办法。可是我知道活动安排是一天前,安排不到位。现场中移动对“不是转场活动”有很大意见,我只能硬着头皮装好人了。活动开始后还是有了不愉快,我们本来只给他们安排了5分钟的专门介绍Ophone的时间,可是他们的讲师绑架一样的讲了20分钟,让我一时没有办法。为此我向大家表示歉意。我和猪商量过了,以后绝对不会搞任何所谓的“专场”,我们只会做开放活动,坚持unconference。希望参加的朋友能够理解我们的难处,我们活动没有向任何参加者收费,但是提供免费的食物和饮料,已经快要2年了,这后面肯定有厂家赞助。但是由于我们几个组织者都是Geek,商务搞得不好,基本上只有Cleverpig一个牛人帮我们拉各种形式的赞助。我们到目前为止都没结余,基本上就是联系到多少赞助就花掉多少。幸好我所在的ThoughtWorks能够慷慨赞助场地,我们的活动目前还没有生存压力。说了这么多只是让大家原谅这次的组织失误,浪费了大家宝贵的20分钟。

这里分享一下当天扫到的一些照片:D

李默的婚礼

周五晚上和nemo同学一起去给默默吹气球。李默就是icecloud,BJUG(Beijing Java User Group)和AgileChina的创始人,是我的同事。认识已经几年了,看到他和相恋12年的女友结婚,还是很高兴的。虽然这厮周五晚上都不给我们这些帮忙的人饭吃……

婚礼在周六进行,很顺利。见到了不少老朋友。照片照的不好,碰巧外置闪光灯的电池没有充好,所以只能无闪+内闪了。场面还是捕捉到了。我还认识到原来那些我一直以为的无烟份子都是老烟枪了:D

Javascript库的“实现模式编程(Programming to patterns)”

今天看到了一篇很好的讲Javascript Library的文章:http://www.clientcide.com/best-practices/jquery-and-the-ajax-experience-programming-to-the-pattern-and-what-really-makes-one-framework-different-from-another/
作者是一位MooTools开发者,他写了对实现模式编程(programming to the patterns)进行了阐述。告诉我们像Prototype、MooTools这样模拟类继承并鼓励使用OO的方式组织你的代码对于你的好处。而对比的对象就是红火的JQuery。他的观点我举双手双脚同意。

JS的通用库最基本的目的是给你解决浏览器兼容性差异,让你在与浏览器兼容性的战争中给你一个巨大的后援保证。但是只提供浏览器兼容性的JS库是不会流行的,你还需要在编程模式和代码效率(Code efficiency)上提供帮助。对于我个人来讲,对语言的流畅性改造最好的就是Prototype这个库,因为它营造了一个“最小惊讶”的Ruby语言环境,让你几乎感觉到是在编写流畅的Ruby,尤其在Rails项目里面使用更让你感觉到Ruby和Javascript结合的流畅。(此处我想到了上周Cat Chen同学和我提起的“Language Oriented Programming”的概念,也许这就是它的表现吧,扩展语言减小编程中的“惊讶”)相比之下JQuery则在代码效率上做了很大功夫,这个代码效率不是指运行速度,而是单位代码完成的功能。JQuery对Dom的DSL化封装,还有对method chain的大量使用,几乎让你感觉在声明行为,所以它让非常多的对啰嗦的Dom编程厌烦的前端程序员迅速“上瘾”。但是,我们知道DSL化的JQuery还不够,因为它很好的解决了可读,但是并不一定容易维护(尤其是过度使用method chaning)。另外一个原因就是习惯使用“声明化”以后会让一些程序员忘记“抽象”和“封装”,很多JQuery都没有使用面向对象OO的方式去组织自己的代码,而是拥抱了面向过程编程,而很多人却还自我安慰说自己使用的是“函数式编程”。如果你没有做好函数抽象,那么绝大多数情况下你的JQuery code都不符合函数式编程的本意,此时你也就离抽象出可复用的“模式”越来越远了。

其实JQuery的很多UI plugins是很好的例子,尤其是支持Progressive Enhancement的JQuery UI插件,它们都很好的规定了自己的micro formats,然后根据dom的模式来组织自己的行为模式(Behavior and Patterns)。它们才是很好的对实现模式编程(programming to the patterns)的例子。缺少了对模式的抽象也就失去了在大的项目中实现代码效率(Code efficiency)的优势(因为代码复用度会下降),这对于JQuery这样一个以“Write less, Do more”为口号的库来说就失去了它最大的卖点。

所以,实际上关键的问题就是,用哪个JS库都没错,但是如何使用和形成模式才是关键。每个库组织自己的“模式化代码”的风格不一样。但是像MooTools和Prototype(还有YUI)这类基于类去组织代码的库的源代码本身就已经告诉了你如何组织你的代码,而且它们的OO实现对于任何一个熟悉OO的程序员来说都“没有惊讶”,那么你就很容易吸取他们所推荐的代码组织风格了。

最开始所引用的文章归纳了几个不面向“模式”组织代码的坏处:

  • 缺少抽象,缺少复用
  • 会形成零散的代码,修改起来成本会比较高,维护成本也就增高了
  • 不OO,不容易组织扩展

我补充一点:

  • 过程化的代码不容易测试,不使用模式的代码也会造成测试的零散,造成浪费

更新:有一点不准确,就是关于复用,其实Javascript的各种Widget库(如ExtJS、Dojo和YUI的widget库)都做到更好的复用。缺点是目前的widget库中的高级控件都严重的绑架了Dom结构,造成自己修改Dom结构比较麻烦。而没有使用Micro Formats这样的基于标准的弱耦合,这是一个很大的问题。所以由于这样的实现绑架的问题,这些Widget库不包括在上面所述的框架对比中。

Tin’s tweets on 2009-09-06

  • Snow leopard的Finder居然有可能起不来?killall Dock以后居然报告一个错误说起不来。Leopard似乎没有出过这样的问题。 #
  • RT @quakelee: 开学果然不一样,我一开始还纳闷礼拜三怎么这么堵车 //今天礼拜二吧? #
  • We are isolated by GFW deeply. The invisible pressure is gathering. When it will explode? #
  • RT @turingbook: 这次 #openparty 上演讲的 @jiakuan 同学用wxPython所做的理财软件看上去不错啊 http://jiakuan.net/zh_CN/ //它们那天一直聊到6:30,相当high #
  • RT @twinsant: 都都小孩开始幼儿园生活,对他来说,人生新的阶段。祝好运吧。//燕同,你的新生活也开始了木? #
  • 刚才看到一个应聘者的前端code写的真好。从html、css、js都都相当棒,使用的是yui的css和js库,代码相当精致明晰,所有的‘意图’都非常明显。真是惊艳呀! #
  • RT @chenillen: RT: @ashchan: RT @chenillen: RT @blogkid 用北京网通adsl上传文件到linode,居然有200k/s || 那就准备换,今年11月份换了 //注意,虽然带宽高,但是延迟还是挺大的。 #
  • RT @qingfeng 开复老师最好还是回美国创业,在中国创业他会死的更惨的 #
  • RT @chenillen: 你说traceroute的时候还是ping的时候 //Ping的时候。但是要看机房位置,我这个是NJ的Neward机房。带宽很好,ping不好。 #
  • 为了验证一下无端的猜测,买了一个功率计。MBP的电脑功率是30W,单位用的HP w2408h显示器功率70W,而飞利浦的24是38W。家里的46寸LCD电视功率270W。而我一直怀疑是巨大电老虎的老Athlon XP 2500+/Nf2/ATI X800台式机功率实际是90W。 #
  • RT @zhmocean: 各位有入5900转硬盘的吗?//希捷的5900的系列价格没有竞争力。否则我觉得是做外置硬盘的理想选择。 #
  • @chenillen 我当初就是受@blogkid的忽悠选择了linode。在北京网通的情况实测是Newark速度最快,且我当时购买的时候Fremont机房没有可用的VPS了。张磊列的那个141k实际上是它上网的速度上限,我在单位测试Newark机房下载速度在300k-500k。 in reply to chenillen #
  • RT @turingbook: 著名的程序员领袖Joel Spolsky谈软件开发的新书More Joel on Software中文版即将出版,征名活动开始啦 // 《更多的桥在软件上》 #
  • RT @qingfeng: 芯片intel了,考虑是不是用Fink //为啥不用更加活跃的macports呢? #

Powered by Twitter Tools.

Tin’s tweets on 2009-08-30

  • I like this slide "The fast and the fabulous" http://bit.ly/jwoWY #
  • @alex_hall9000 WPC同学刚才说“你的字体设的越大,你的方法就越短。” 经典 #
  • 谁知道twitter现在还有没有被GFW的https的ip么?原生客户端都不能用真烦人呀。如果有请D一下。 #
  • 谴责一下TwitterGadget的设计。那个小铅笔居然是Clear text,害我删了一个写好的tweet。而那个看似回复的按钮居然是submit。 #
  • RT @nicholasdsj: 果然 twhirl 在 Mac 上选择 Verdana 12 号字是看得最舒服的 //你咋还可以用客户段呢⋯⋯快D一下秘密。BTW:你的google attitude让我有买些G1给家人的冲动。 #
  • RT @mijia: 有没有啥优化方案呢 //exclude 一些 folders,或者换更大硬盘 #
  • RT @Fenng: Sina的所谓架构还是脱胎于Livejournal的东西 //业务决定的架构,Sina的业务到现在也没什么创新,所以,当然架构也不需要什么大的变化了。 #
  • RT @tirsen: Wow, JQuery really sucks! RT @david_j_rice: http://bit.ly/943IJ #
  • RT @fire9: 哈哈,提问者居然跟黄冬说的一样。//HD也去啦?你们怎么都有机会参加这样的大会呀:D #
  • 意外发现在公司的网络条件下我也可以播米国的VPN了,内外网都可以用(除了个别内外网DNS解析不同的需要自己hosts)。不过我发现twitter上的中文更新少了很多,没有客户端的帮助,写tweets还是比较麻烦的。 #

Powered by Twitter Tools.

Tin’s tweets on 2009-08-23

  • 亲爱的爸爸今天做了脊髓血管瘤切除手术,我在手术室外面从早九点一直等到了晚上五点,爸爸才出来,在切除了脊髓内一个1立方厘米的海绵状血管瘤。好漫长的一天呀!希望他能够早日恢复! #
  • 上周日从五棵松摄影器材城购入港版黑色LX3,终于补上了LX2丢失造成的空缺。LX3的做工感觉更精致,屏幕也更细腻。是在艺联购买,3350带膜和一破包。 #
  • 在五棵松购买相机真是心力憔悴,松下LX3一个真的行货没有,可都报行货价格。还凑合说自己是水的商家:锐意的机器是日文包装未刷机(繁体,品相也差)要3380,最低一家要3300是简体包装刷简体固件的日机(可惜自定义模式花屏),所以才选择了艺联3350的英文包装港货。 #
  • 上周日还把玩了一下奥林巴斯的EP-1,样机是用的原装mini 3/4转换3/4的转接口,配合奥林巴斯45mm定焦。直接预览感觉很好,这么薄的机器实现浅景深已经挺不错了。可惜这个机器从便携角度来说还是太重了,转环也很重,失去了便携的优势,我感觉一点购买欲望都木有。 #
  • 我今看到大家对我爸爸的祝福,真心谢谢大家!@fire9 @mingjin @zhmocean @quakelee @underone @Tigren @tangzhehao @gttnnn @onejeans @baiyi @catitude @lordhong @enboga #
  • 我今看到大家对我爸爸的祝福,真心谢谢大家! @zizi731 @wx8600 @gfrog @BenMQ @wxzbb @qiuzhangst @CycloneWalter @yangtao100 @kxboy @fp3cby @lanwuyou @lnsoso @Qahagin #
  • 我今看到大家对我爸爸的祝福,真心谢谢大家!@qiheizhiya @qingyinzi @zhanlu @kiki8380 @yd613 @rainystar @panlilu @zhangwei @vastgemini @hho1118 @okmaxi @YoyooGat #
  • 我今看到大家对我爸爸的祝福,真心谢谢大家!@icanithin @iHeroin @1988ljn @babywyvern @humantt @Free2E @sevewn @faytoday @RyanBJF @felixonmars @icanithin @srb1999 #
  • 我今看到大家对我爸爸的祝福,真心谢谢大家!@nasiless @andylin12 @sogook @cipcsl @leiguo @fhwick @hipda_d @tonyseven @qingfeng @justsmile4u @delphij #
  • RT @xuweio: @diamondtin 现在 LX3还需要3350吗?不是说3000以下吗?你买的是行货还是水货?//淘宝价格不准确,一般都是3k以上成交。我推上面说了是港水,有简体菜单的。 #
  • RT @qingfeng: 新浪微博 http://t.sina.com.cn/ //注册错误提示很不好,而且注册以后还不让我们登陆…… 这个产品是你们部门开发的? #
  • RT @yonglin_young: 我们开发的。 //作为前端,下面你需要补补设计的common sense了。:D #
  • RT @kevinyang1981: MobileRSS – a google reader client for iPhone .上线拉,我们将保持高频率高质量持续升级,有iphone/itouch的同学们捧个钱场哇 http://tr.im/wEzq (via @Drxu) #
  • Thoughtworks Studios Releases Adaptive ALM, it’s designed to “work as you like”. http://bit.ly/q59I5 #
  • RT 麦同学: @KentBeck ‘s talk for #AgileChina on 11 Sep: “Pragmatic Idealism: when is idealism the most pragmatic approach?” http://bit.ly/Hfj2o #

Powered by Twitter Tools.