overflow与position是两种不同的人生境界(附多栏等高的实现)

catge Posted in Life,Tags: ,
8

这个姑且算是最近看《德道经》的偶悟吧。

先说问题。Twitter相信大家都知道,或者国内的QQ微博、新浪微博。一般页面宽度800px,两栏。左右“内容等高”,这里要打个引号。右栏一般是带色的,左栏则为白底,看起来是等高。

虽然大多数情况下左高>右高,但如何确保万无一失,实现两栏自适应等高呢?先来看看各大网站的实现,知己知彼才能百战不殆。

1、Twitter。X!居然是用table实现的- -。在这个号称div+css满天飞的Web2.0时代,他们居然用这么老土的table?!然而正如《德道经》里讲到,天为乾,地为坤,天地中和乃生万物。”土“是一种返璞归真的精神。成语”出生入死“讲得就是”入土为安“的道理。人家用table自然有他自己的道理,语义化上table用来呈现数据也说得过去,毕竟人家是这么大的一个平台,还得考虑兼容性,当然最初的原因是否是为了实现这个左右栏等高也说不定(偷笑),所以都说twitter网站做得烂。

2、QQ微博。用了个偷鸡取巧的方法。在父容器#mainWrapper上加了个居右、纵轴平铺的bg,既然是repeat-y,干嘛图片要210*49这么奇怪的宽高?还好用的是data-uri省了个http request,要不猫哥就要BS它了。

3、新浪微博。对新浪有偏见,懒得说它,我是力顶三表哥的。

这里引入一个通过纯CSS的实现方法,这种负边距的方法当然不是猫哥发明的,我也是从这里看到的。这里顺带说下CSS布局的话,推荐射雕同学的系列文章,很详细了。

废话少说,直接移步去看DEMO,右键查看下源代码。

在DEMO上如果注意看的话会发现有一句

#content{overflow:hidden}

实现这个效果,就得在他们的父容器上加上overflow:hidden,这样才能把难看的长尾巴遮住。忽然就想起小高、干干、欣欣他们刚入职的时候,给他们讲过一节CSS的中级(不是终极)培训。我说,如果遇到IE下奇怪的样式兼容性BUG,排名第二的来个overflow:hidden试试(排名第一的是zoom:1)。这句话是我的经验之谈,而且大多数情况下还挺管用。

然而今天在我写下这段代码之后,结合之前看的那一点点《德道经》的内容,我忽然意识到overflow:hidden是一个巨大的阴谋。它让一些本来存在的事物,不被外界所知道,它把一些充满活力的元素限制在一个死死的条框中,让这块土地死气沉沉。《国语·周语上》有云“防民之口,甚于防川,川壅而溃,伤人必多,民亦如之。是故为川者,决之使导;为民者,宣之使言。”

twitter上刚刚看到@fenng同学说自己已经离职支付宝,祝愿他前程似锦。在我看来,主动选择离职创业的人,都是勇敢的。想起昨晚半亩地吃饭,送走一位即将去美利坚合众国求学的友人。相信他的世界已经不再是overflow:hidden,而是position:relative。正如本文中的配图,风筝是一个absolute的元素,它飞得再高再远,对于线另一头的主人来说,永远联系牵挂在心。

overflow与position是两种截然不同的修身、治国(管理)、平天下的人生境界。就算没有鲲鹏展翅那般注目,一只苍蝇至少有一双可以自由飞翔的翅膀。

Goodbye, Alipay

catge Posted in Life,Tags:
13

Today is my last day at Alipay.

@lunaticsun 说写点什么纪念下吧,就像当初那位离开Google的设计大神。很多朋友得知我即将离开支付宝的消息,表示震精,当然更多的是表示理解与支持。

接下来我要做的事情,稍稍给猫哥的粉丝们交代下吧…- -!

猫哥网页设计视频教程》将会重启,推出连载,相信会对那些对WEB设计感兴趣的初学者有很大的帮助。

Twitter上会提高更新频率,以技术为主,逐渐走向国际化,不会用来当聊天工具,感兴趣的同学欢迎Follow me

对catge私生活感兴趣的同学,可以收听我的QQ电台 :P ,新浪微博我不用的。

catge会继续留在杭州一段时间,有多长,这个要看机遇。要做的事情很多,比如正在上车考驾照,为了减少一个马路杀手,我会很用心的学习,以后去西安那个啥的咱们就可以一起开车去了,对不?干干、欣欣、小高:)另外还要早点结束我的钢琴课程,这个一直是我从小的梦想,现在可以专注的去实现了。

想做的事情就更多了。去西城广场和小朋友们一起溜旱冰,去BetaCafe认识更多的朋友。为了重启bodyshake计划,可能会参加健身俱乐部,成为肌肉男,哈哈。

“人活着是为了什么?”这么一个看似无聊而又高深的哲学命题,之前周会的时候从教主的口中说出,大部分人可能笑笑也就过去了。可是猫哥会很严肃而又正式的去研究这个哲学的三大命题之一,这个很可能会成为catge的信仰组成部分,因为catge自以为自己是80后出生的信仰缺失一代的代表…先从康德的三大批判开始吧。

总结下自己在支付宝两年的工作历程吧。有些记忆也只能从一些蛛丝马迹中去寻找了,用PX200的时候,会想到是自己参加公司的《网络安全大赛》拿到的奖品,而那个罗技鼠标就不知道是哪个项目的奖励了。

还记得自己做的第一个升级包是合作银行,第一次写velocity模板,用CSS来实现hide&show效果。后来我和小黑一起完成了支付宝的第一个浏览器兼容项目“Firefox浏览器兼容”,说是项目,其实更像是升级包,因为需求方+PM+开发+测试,哈是我们两个人。呵呵,其实还有另外两个测试同学的帮助。这个项目让我对WEB标准化、兼容性有了一些自己的心得。说起摄影专业出身的小黑,他身上散发着浓郁的艺术家特质。某次周会上,猫哥封他为“支付宝最优雅的前端”。小黑常年一身黑色西服,那年冬天我们送走阿布的时候,在25F天台留下了合影。后来某次UED的季度大会聚餐时,小黑突然对前端兄弟们一个个敬酒道别,然后就优雅地离开,然后就再也没有见到过。

第一次使用YUI是在之后的个人帮助中心和商户帮助中心的全面改版项目,这也是catge和小满的第一次亲密合作。当时和阿布讨论YUI通过什么形式部署在网站上,最后也就是照搬YUI官方目录COPY进来。后来李白来了,基于YUI换上马甲,Arale就此诞生。并通过个人版支付宝项目统一了支付宝的前端JS框架。

在说个人版之前,还有三个值得一说的项目。首先是小满主导的“罗伯特项目”,也就是优化用户找回密码流程,这个项目上线之后满意中心找回密码分类的电话量有了明显的下降。看到这些数据,catge对设计的意义有了更深刻的认识,不论是硬件、软件、互联网WEB应用,任何一种技术的发展,最终都是为了“人”体验。还有一个捡了大便宜的“代金卡项目”,就是在充值页面增加通过消费卡充值的类型,猫哥随便弄了下,结果没想到拿了产品&用户体验部的“优秀团队奖”,嘿嘿,主要还是交互小周周和PD元亮的功劳,这个超过限制金额时自动转成最大金额的JS交互是我瞎整的,还好大家都觉得不错。另外一个项目,其实是一个夭折了的项目“模块化收银台”,收银台属于支付宝的核心业务,要改造这块业务,难度和阻力非常大。猫哥改过一段时间的收银台BUG,不得不承认改收银台BUG是天底下最恶心的事情,每改个BUG要花费大半天的时间,改完后对个人前端能力也没啥提升,因为这里的前端层压根就没啥规划,修修补补逻辑混乱。后来在公司多位大牛的联合推动下,新版收银台总算得以部分上线,师傅磊哥(老鱼)功不可没。

个人版(体验版)支付宝项目对我来说算是最大的机遇和挑战,项目中我作为前端开发接口人,主要负责“安全中心”,“侧边栏”,“我的支付宝”的开发。我从这个项目中收获极大,对流程、沟通、设计、前端架构各个方面都得到很大的锻炼。这个项目对支付宝来说是一个意义重大的项目,因为我们搭起了一个可以继续支持支付宝未来3-5年发展的平台。在我看来最大的功臣是PM魏延和PD白鸦,我还记得他们经常和我们开发一起通宵加班、请吃水果。项目里的开发测试同学真得是兢兢业业,每个人基本天天都会加班到11点以后,是我们大家保证了这个看似不可能完成的项目的上线,回想起来不得不说是个奇迹。还有项目中的那种氛围,让我找到了一些敏捷开发的感觉。很多感受,也只有亲身经历过的同学才得以知晓了。一切尽在不言中,就此略过。

个人版开发期间,我同时还独自开发了支付宝的新版首页。这个升级包中,我刻意研究了下页面性能这块,独立编写了slideshow组件,掌握了组件的设计和继承方法,最大的收获应该是对首页运营这块的理解。另外我在首页埋了几个彩蛋,在这里首次公开出来吧:)页面任何地方按下”\aa”、“\sdm”、“\fk”、“\sk”可以快速定位到对应的功能页面。

接下来就是愉快的“注册流程优化”项目,这是我和小满的再度亲密合作,从上线后的数据来看,提升了很大的注册激活数,我们俩也都因此拿了年底产品部的大奖。还记得@Fenng在Twitter上推了我一把,导致我Follow数大增。唯一的遗憾是,小满说老板会请我们去凯悦吃饭,可是后来压根就没有请我。

做完注册项目我就开始了漫长而又无聊的前端产品接口人的角色,修修文案、改改链接、CMS,还记得某天被13个不同的需求打扰,无聊到要崩溃。不过因为没有项目闭关也因此有机会多和团队里的工友多交流了,大伯(@janlay)、王书记(@ethan168)、豆腐(@dfdou)都很好玩,我正式成为大伯的粉丝,还在内部整理发表过一次“大伯语录”:P

然而,当我一次次看到开发为了一个BUG的归属是哪个team而争论不休而不是想办法早点修复掉这个BUG的时候,当我看到刚来时的热情帮助变成了现在的相互推诿,当我看到…。然而这些只是一个方面,很多人问我离职的原因,简单地说一句话:“不出去走走,你以为这就是全世界”,我只是选择去做自己喜欢的事。

到今天这篇Blog已经被拖了很长时间才得以完成。虽然已经离职一周了,依然会和原来的工友们一起玩、一起交流。总会想起和小高、干干、欣欣、小白打电动的时光,上上周末和豆腐、欣欣、书记一起去了女仆咖啡点,前天和大伯、书记、欣欣打台球,上周末和==、蚂蚱、妞妞、囧、岚岚、东东还有数据仓库的同学一起闻莺阁茶楼玩三国杀。

昨天==请我去阿蔡洗头,说到现在公司走的人越来越多,上周六我们近卫军一期同学活动都不积极。我告诉她,没有必要营造一个和谐的表象,有些同事只能是同事,而有些同事却是像我们读书时的同学一样,会是一辈子的朋友。我想这很多份真诚的友谊,算是我在支付宝最好的一个总结吧:)

就这么漂来漂去

catge Posted in Life,Tags:
6

这两个星期,我一直很想写点东西,关于09年的总结,10年的愿望。关于新上线的体验版支付宝,关于百度被黑Google的退出。直到今天,不小心在twitter上又看到韩寒的《我只是在猜想》。听着韩寒BLOG里的背景音乐,忽然觉得周围的一切静了下来,于是坐下来,写下这些文字。

周五在之江饭店参加了部门的Q3Q4年会,会上拿到了Q3产品&用户体验部的成长奖,非常开心。更开心的是,小满在Q4的优秀奖的时候,说了让我很感动的话:“拿到这个奖我要感谢两个人,一个是james,给我了很大的支持,另一个就是刚才拿Q3成长奖的叶凯,作为一名前端工程师替我承担了很多设计师的工作很不容易。”这个奖项和小满的话,基本就是我09年度的总结了。

从年初的个人版一期生活助手,到年中的个人版二期、安全中心、新首页,年末的注册流程改造项目,09年对于我来说,是我个人成长最快的一年,压力最大最累也最充实。

第一次做小组owner,承担项目前端接口人的角色,感触最深的是,一下子认识了不少人(旺旺上好友已经加到了390名)。在与这些形形色色的人沟通的过程中,不断的学习别人的优点,克制自己幼稚的心智。推动新的前后端系分并行项目管理流程,从webx到sofa MVC的后端技术架构,新的前端Arale&Alice框架,前后端分离组件UISVR。

特别的想感谢一批人,那些在09年给我帮助,陪我一起度过的同事&朋友,尤其是个人版的前端李白、鸽子、臻儿、徐宁、高京。

李白,Arale之父。个人版右侧状态栏及框架规则的相关组件编写,让我对JS框架、组件编写模式有了很深的理解,这一块是我自认为成长最大的一块。还有温柔而又低调的鸽子,我们一起架构个人版CSS框架PA。个人版基本上是重新做出一个支付宝,而我们的目标是样式上兼容IE6、IE7、Firefox3.5(其他高级浏览器Safari、Chrome我们自认为会自动兼容),同时产出代码片段库,确保个人版样式框架的继承与扩展。我们一起搞定一个又一个诡异的IE BUG,从简单的HasLayout未触发问题,到iframe下relative元素里的input自动完成提示框在XP SP2某未打补丁版本的IE6下错位的问题。我们一起讨论标准DOM结构、CSS Sprites、HTML5,对付IE已经到了“轻抚菊花笑不语”的地步。

09年4月,孤独的过完生日。第二天,花3000+报了个钢琴课程,因为工作时间原因,直到现在还没有完成学业。

09年8月,女朋友从杭州回到武汉,五年的恋情结束。寂寞侵袭,感情生活一下子陷到低谷。直到某天看到毛毛QQ空间里一篇日志下的留言:“要学会品味寂寞”,若有所悟。

一个人静的时候,总会想很多问题,对以前有过答案的问题再重新思考一遍。在虫子的推荐下,看了《虫师》,感触很深。重新定义自己生命的意义、理想和目标。开始一步步自己的计划,买了Macbook Pro、T90、HTC G2,开始“每周一张大头贴”、“看遍杭城影院”、“猫哥网页设计教程”。国庆期间,独自一人无目的的去了趟广州,坐了次灰机,感谢骡子的接待。

09年,有了几个比较要好的兄弟姐妹。能一起抽烟、喝酒、打电动、K歌,谈话之间能够毫不遮掩、为对方考虑。我始终认为,朋友是一辈子的事情,感谢有你们的陪伴。丁丁、小白、扎扎、==、虫子、宏哥、小明……

2010年,注定是不平凡的一年,才1月份就发生了这么多古怪的事情。又到12年一次轮回的本命年,老妈卜了一卦,答案是我最喜欢的“事在人为”。10年了,我要加快脚步,经历更多的幸福和精彩。不想等到自己装90后的时候,发现原来皱纹和老气是无法掩饰的,那时候就迟了。

从韩寒的BLOG上点到了他的淘宝书店,看到这本书名《就这么漂来漂去》,很喜欢就直接拍了下来。2012如果真的是世界末日,现在的我,也不会后悔,因为我正在继续我简单而又幸福的漂泊生活。如果遇到一个自己最喜欢的姑娘,我想我会叫她柳莺莺