When I met PHP__我的程序猿生涯

  我知道世界上有一种叫PHP的东西时,大约是小学六年级。
  因为家离学校很远,我寄宿在数学老师家里。一天中午,在检查完我的作业后,她突然问我:“你生日快到了,想要什么礼物不?"
  “书。”
  于是你可以猜到接下来发生的事情:我们出现在新华书店,我站在计算机类图书前,选了一本关于PHP的书。
  为什么没有选ASP、JSP,现在想来我也不太明白,似乎是听我哥提到过这三个字母,在那个年代,PHP的版本号还只有3,名称也没有现在这么科技(那时候叫Personal Home Page)。而我,只是个只会玩玩RPG、FPS的小破孩。
  至于那本书,我在了解到这门语言是以括号问号开始,问号括号结束后,就再也没碰过。
  句号。

  02年小学毕业后,我升上某重点高中办的初中,在融入班级后,便开始琢磨帮班上建一个网站。
  用56k的猫在网上一阵东抄西捡,我们班级的第一版网站上线,那时候,网站制作用的还是Dreamweaver,动态语言从未出现在网站的任何一个地方。我制作了N个版本的班级主页。随着我第一块硬盘的崩毁,那些静态网页成为了永远的比特尘埃。

  03年,在班主任的资助下,我在51.net购入了人生中第一部虚拟主机——sai123.51.net, 你可以在 http://web.archive.org/web/*/http://sai123.51.net 看到我在这部100M的虚拟主机上做的一切。我使用cnphpbb提供的一套CMS以及PHPBB论坛开始了一个游戏网站,从索引来看,在用了几个月的 phpbb后,我在大概十月份的时候把论坛程序转换为了discuz。
  印象中,我几乎每个月都会对网站页面进行一次重构。其实,这个网站的本质,是为了掩护论坛中属于我们班级的讨论区。我的大部分精力,都在维护着几乎只有熟人会上的小论坛。
  在这年,我只是遵循一些教程,对程序进行一些hack,至于开始编写php的程序,那是很多年以后的事情了。

  04年,抛弃了51的破主机,我依然过着没有独立域名的日子(http://web.archive.org/web/*/http://sai123.vbbcn.net)。在开始用discuz之后,我试着制作了几套风格,也因此结识了戴志康童鞋,那时的康盛只有两名员工,一名程序猿一名销售。7月份,我明智的关闭了之前毫无竞争力的游戏站,只留下一个论坛。7月21日,无名杂志上线。我的php程序猿之旅依然遥遥无期。

  05年至06 年中都是空白。升上高中后,我似乎一直处在某种纱布的状态,不明白我来自哪里,也不知晓我将去向何方。回顾这些年,我竟浑浑噩噩,如此成长。06年夏天,我遇到了两个改变我一生的人,一个是大魔王,一个是livid。他们的言语,他们的生活方式,在当时的我看来仿佛笼罩着天使光环,Project Babel让我看到了论坛的另一种展现形式,我开始尝试着与郭菊花一样将其全盘复制到Discuz的体系当中。在复制的过程中,我开始试着去理解我所写下的代码,那些我过去从未想过要去理解的破碎字符竟然汇聚成了如此强大的存在。

  最终我做到了,我几乎造了另一个轮子。传说中的天启似乎就在我身上发生——某个夜晚,我突然能够看懂我之前所有不能理解的代码,07年5月,我用一个晚上写出了Nowhere的雏形,并在之后的日子里不断完善她——我的第一个正式项目。07年春,我的PHP元年。从这一年开始,我学会使用这门语言。

  之后的日子又处在另一轮人生反思。现在回想,这种行为是懦弱、胆怯的表现,我没有明确而坚定的目标,我游移于升学与退学的抉择之间,犹豫是人生最大的敌人,我差点败在它的手下。最终,我参加了高考,考取了我所在高中(同时也是我初中)从属的大学,我为自己留了退路——因为我并不自信能够抛弃学历闯荡世界,你可以称我为loser——继续学习,与我现在所从事的事物毫不相干的专业。

  往后的故事便是现在正在发生的,高考结束后我建立了Bangumi,我第一个从头构建的,似乎可以进行大半辈子的网站;今年五月长沙之行后,我开始了Dango项目,一个我所不熟悉领域的充满挑战的网站。

  再过几个月,我就要进入奔三之人的行列了,在我内心的深处,有一种强烈的期望,期望能在二十五岁前,与你们一道,在拥有巨大落地窗的摩天大楼里,改变世界。

前端小课堂——全浏览器兼容圆角头像的制作



乔不死当年让比尔·阿特金森在麦塔金上写出圆角矩形算法的时候,一定不会料到在如今,网络上的宅男腐女们会如此待见圆角矩形。圆角矩形在网页中的使用随处可见,除了万恶的IE至今仍不支持CSS圆角技术,其他各浏览器或多或少的都已经支持使用私有属性绘制圆角矩形。

关于圆角框的全浏览器实现网络上有使用VML绘制的,有使用css sprites拼接的,各种方案层出不穷应接不暇,在此就不一一赘述。今天要向大家介绍的,是Facebook式圆角头像的实现。

其实要做圆角头像,可以考虑用php的GD库或者之前脸书的忠实追随者校内使用过的Canvas方式,但前者在上传后若要复原成本太高,后者在IE6下的效果又不尽如人意。
让我们先看看成品的效果:


多么的圆滑,自然,流畅,体贴。最重要的是,你只需在原有代码基础上增加两个标签,即可实现如此高贵的功能。

让我们来看看整体实现的代码儿:

HTML
    
<span class="roundAvatar roundAvatar_Small">
<img align="absmiddle" src="http://img1.hoto.cn/pic/user/s/000/00/15/1540.jpg" />
<img class="roundAvatar_Corner" src="/img/RoundAvatar.png" />
</span>
 
    
CSS:
    
.roundAvatar { display:block;position: relative; overflow: hidden; }
.roundAvatar_Corner { position: absolute; }
.roundAvatar_Small,.roundAvatar_Small_even { height: 32px;width: 32px; margin: 3px 5px 0 0; }
.roundAvatar_Small .roundAvatar_Corner { left:-123px; }
.roundAvatar_Small_even .roundAvatar_Corner { left:-123px;top:-75px; }
.roundAvatar_Medium_odd,.roundAvatar_Medium { height: 48px;width: 48px; margin-right: 10px; }
.roundAvatar_Medium_odd .roundAvatar_Corner,.roundAvatar_Medium .roundAvatar_Corner { left:-75px; }
.roundAvatar_Medium_even { height: 48px;width: 48px; margin: 0 10px 10px 0; }
.roundAvatar_Medium_even .roundAvatar_Corner{ left:-75px; top:-75px; }
.roundAvatar_Large { height: 75px;width: 75px; margin-right: 10px; }
.roundAvatar_Large .roundAvatar_Corner{ left:0; top:0; }

聪明的你一定看出来了,我们是如何实现这个圆角的,如果没有,让我们继续往下。

这个实现的机理是——将拥有不同大小圆角遮罩的透明PNG遮挡在方形的头像上,因为PNG是中空外实的,所以看起来就像是圆角了。

这就是遮罩PNG

因为背景是白的,所以什么都看不到

为了能看清这张神奇的PNG,我给它加上了底色:


更清晰的看看:


上面的圆角圆角是我用铅笔一个一个像素点出来的,因为要实现圆角的平滑过渡,所以需要由外向内依次递减Alpha值。如果你有更好的方法,请不吝指正。

接下来我们来分析一下CSS代码:

.roundAvatar { display:block;position: relative; overflow: hidden; } /*将外框设置为relative,方便对遮罩层进行定位。*/
.roundAvatar_Corner { position: absolute; } /* 定义遮罩层的位置为绝对位置(因为之前定义了relative,所以其实是是在roundAvatar内的绝对位置) */
.roundAvatar_Small,.roundAvatar_Small_even { height: 32px; width:32px; margin: 3px 5px 0 0; } /* 配置一下头像元素 */
.roundAvatar_Small .roundAvatar_Corner { left:-123px;} /* 这是css sprites的应用,我们将不同大小的头像圆角框都做到了一张图中,只需要修改其定位就能做到适应不同头像大小 */
 

到这一步,我们的圆角头像就基本完成了,当你满心欢喜的在FF,Chrome中测试过,想要看看IE6的效果时……

悲剧啊。

完全没有透明……

没关系,让我们请出 DD_belatedPNG
DD_belatedPNG应该算是目前IE6下较为完美的png透明解决方案,能够支持backgrond-position与background-repeat,甚至a:hover。
下载 http://dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js
将这段代码加到<head>中


    
<!--[if lte IE 6]>
<script src="/js/pngfixed.js" type="text/javascript"></script>
<script>
  DD_belatedPNG.fix('.roundAvatar_Corner,img');
</script>
<![endif]-->
 

利用PNG进行遮罩可以实现很多意想不到的效果,大家可以开动脑筋,活跃思路,举一反三.

大功告成,我们下期见(会有么?)。

DANBOARD 盒之世界



  若要为现代人选择一种象征符号,盒子或许会是不错的选择:使用三重环面理论所观测的宇宙,城市的房屋,就连人的内核——心,也在当今社会化为牢不可破的方形壁垒。

  也许是因为随处可见的高宅楼宇,高度发达的资本主义社会的人民对箱子情有独钟。
  在美国,打包党们使用盒子创造一个又一个的神话, 也有Cubeecraft 这样的“盒模”专题站。
  来到日本,京极夏彦《 魍魉之匣》中的盒形建筑 ,小岛秀夫监督的 MGS(合金装备)系列代表隐蔽物Snake大叔使用的纸箱,以及よつばと!中的Danboard都是以盒子为基石的优秀再造。
  即使是在中国,也有白领的好朋友张小盒与即将开服的盒子世界。世界人民对 盒子的热情让人赞叹不已,佩服连连。



  前文提到的Danboard,你一定不会陌生,寂寞的圆点眼,忧郁的倒三角嘴,笨拙的方块手,以及不会飘动的裙摆。没错,题图中在祖国大地上广为流传的壁纸就是它的靓影。这款由海洋堂于2007推出的新球形关节系列盒装人形已经成为继宜家的木头人之外寂寞人士创作的不二人选。



  Flickr上有许多使用Danboard进行的创作。题图的壁纸是由来自米国的 Carolyn Geason MM拍摄的 Danboard Invasion 系列中的作品 。
同样来自米国的Arielle MM使用Danbo创作了一组每日相片—— 365 Days of Danboard。至今为止,她已经与Danboard度过了365天中的159天。
  还有许多零碎的记忆,散落在这个世界的各个角落

  在阅览了众多Danboard的图片故事后,你是否也有冲动,在落雨的春日,在秋日的午后,在弥漫着青草气息的原野,在一日繁忙后浮躁的归途中,从背包里掏出Danboard与相机,满怀期待,忘却烦忧,记录下这美好的时刻呢?

Strain

很久没有写点什么了,这半年时间写的最多的当属各个站点的新功能介绍。

半年过去,每天重复着上课,在课堂上看书或Google Reader,下课回宿舍,打开电脑,写代码。唯一的不同,也许就是身旁的你。

不知不觉过去曾培养的些许作为码字者的品质被磨灭殆尽。各种各样敏感词的事物,让人无法微笑以对。

高墙四立,谈何从容淡定。


23h46m

  多事之年的最后一个凌晨,许多人或在回忆着这过去的一年,或已坠入梦乡,或仅仅坐在寒风凌厉的天台上发呆。至于我,则为放在阳台上的海蓝色塑料小桶灌了小半桶热水,璞哟璞哟地扛到书桌前把脚丫伸进去开始写这篇文章。

  赫拉克利特曾说“人不能两次踏进同一条河流”,换言之,此刻的我与上一刻的我是截然不同的我,虽然我无法验明世界不是在前一秒诞生的,但只有将时间看成一个始终如一的过程,我所度过的这些时日才具有意义。今年的我无法写出去年那样的总结,因为在不觉中一切倏然流逝,我甚至未捕捉到其中的一丝风尘。

  在即将到来的那个月里,我或许能够为改变这个世界做一些细微的贡献,即便是造轮子,我也会尽我所能构造一个非同凡响的轮子。

  如果不能改变世界,那我会尝试着去改变你,从远方注视着你的时候,身体的某个场所时常泛起悲戚,悲剧虽是由自己造成的,但作为我,仍期望能让你多少脱离这非必要的悲剧。


  宿舍的孩子们发出了轻微的呼吸声,远方传来仿佛鞭炮的声响,树枝摇曳,城市落入静默,我将合上屏幕,在梦中送去暗冥


Sai
2008-12-31 00:54

Things That Roar

  现在的时间是北京时间2008年12月26日天空阴沉,上次出现在这个地方的时间是2008年7月21日,在这许多的空白时光中,太阳的直射点从北回归线缓慢移向了南回归线并且正在缓慢的回移,国际金融海啸已经席卷了这个世界,饭岛爱也不在这世间,我已经很久没有如此:

坐在
开着暖气的
书桌前

听着笔记本电脑
低品质音箱中传
出毫无低音可言的
随机播放
歌曲
写下
这些
意味不明的文字。

  过去的几个月里,除却上课时看的那些书,下课后偶在宿舍写代码至深夜外,生活已经完全朝着另外一个方向发展。

  令人欣喜的变化在默默地如图板块漂移般缓慢发生,我太久没有思考文字的表达法,我也无暇思考,那许多的时光都献给了另一个人,虽然偶有疲惫,但这却是旁人无法体味的生活。

  我知道这一切看起来都有那么点不知所云,但没关系,以后的日子还长着呢咚~

且听零七

  法国人是文艺且浪漫的,他们在大革命的同时还不忘给每个阶段安上一个诗情画意的名字:雾月政变、热月政变;村上春树笔下的男主角是文艺且浪漫的,他在与妻子离异后“想起过去看过的一本美国小说。妻子离家后,丈夫把妻子的筒裙挂在对面椅子上挂了好几个月。如此想着,开始觉得这构思不坏。倒不是能解决什么,但总比放早已枯萎的天竺葵盆栽聪明得多。即使拿猫来说,若有她的东西也可能多少安静些。”

  我想我是决计不能确切的回忆起这一年中每个月每个清晨每个分秒的所作所为的,写日记或许是一个证明自己曾经存在的绝好方式,但在我消极的享乐主义人生观培育下,我才不会每天花费我宝贵的时间去写哪门子不知哪天会被公之于众的私人日记。

  二零零七年,我过了一次生日,写光了二十四支水性笔,将五只袜子大拇指处弄破,写了二十四(又是二十四)篇短篇随笔,一篇中篇小说,拍了一部DV,发了两千一百零六条短信,买了一台Wii一台Ipod Touch,完成了一本实体杂志,写了近万行代码,村上每本书都读了三四遍,读完了米兰·昆德拉,在网上书店买了二千四百零八元的书,结识了大魔王,听Sound Horizon各张专辑,听坏了一副耳机,看了不计其数的动画电影日剧,生了大病小病五次。

  这些并不完全的数字记录了我的二零零七,这平稳的,没有波澜的一年,一切都按着其应有的方向发展着。

  • 雨月 | 拍了一部DV印记,剧本仅仅用了五分钟,因为演员们的青涩,效果并不是很好。
  • 风月 | 心旷神怡的假期,和大魔王东拉西扯,收到他寄来的我没有收集到的村上全集。开始构思下一步DV,因为情节阴暗所以几乎无法拍出,剧本写了五章后作罢。开始午睡。开启了第一个设计站赚外快
  • 芽月 | 平静的校园生活,和班上的女F4到处乱晃。
  • 花月 | 完成Nowhere,可以算是我死程序员生涯的真正开始。养了一窝蚂蚁。用赚的外快买了一台Wii。
  • 牧月 | 平静的校园生活,不记得发生了什么。收到小太刀寄来的未步第一张单曲。
  • 获月 | 每天Coding。有时候带本本去学校。花一个星期攻克了高中之后就没怎么听的理化生三科会考。
  • 热月 | 继续Coding。看村上。
  • 果月 | 完成第一部中篇小说《夜光云》,因为是第一次写这么长的文字几乎写到最后才找到感觉。与大魔王分享不能说的秘密。玩仙四。
  • 葡月 | 平静的校园生活,不记得发生了什么。
  • 雾月 | 完成人生中第一本实体杂志。上线了早在牧月就完成的地域系统。
  • 霜月 | 与Livid分享不能说的秘密。最后一只蚂蚁永远停止了挖洞。Todαy、NoName Mobile....无止境的Coding。
  • 雪月 | 买了一台Ipod Touch。看了一堆动画,希望在明年之前能够下完Chobits。
Sai
2007-12-30

Jejuneness,Infantility

  我很清楚自己的幼稚,无论是行为还是思想的稚嫩都让我对自己的存在感到失落,这样的无助甚至比我仍然活着这样的事实更为让人感到空洞。我很清楚这样的幼稚对于每个人的成长都是必然的过程,生而成熟的人是绝不存在的。我要寻求的路却需要我比他人要更早的成熟起来,这不是“患有人格分裂的人不会说自己患了人格分裂”的论断,而是“这悬崖上的独木不允许任何一次失败”的悲哀。

  对很事物存在的焦虑,对可能性存在的妄想,对必要之事的犹豫……这一切都是幼稚的良好佐证。许多人问我,以后想做什么。我无法给出答案,因为我的忧虑、徘徊,决定了我在“悠闲”这一大方向下的继续盲目的上课、吃饭、睡觉,没人能确定自己所走的路是否正确,而不得不继续走下去,因为我坚信在路的尽头会有葱郁的树林、救赎的绿洲、信念的温床。

  围绕未来的问题,我从一年前那决定性的转变开始思考至今,仍然在原地踏步——建立、推翻、推翻、建立,如此周而复始,止步不前,这是思维的迷途,是思考的黑洞。我希求的无所定论,我希望尝试一切的可能。

  但,这些从另一个方面来说只是一种逃避——对即将来到的高考的逃避,这样的逃避源自一种畏惧。我所缺乏的自信,让我对自己所选择的路无法贯彻如一,甚至无法选定一条未来的路;我寻求简便的道路,来辅佐我幼稚的思想,也许那是一定程度的成熟:在具有生存能力的前提下,大学是完全可以唾弃的,那些对今后无用的知识,完全比不上外出闯荡一个月所能学到的;我的父母一直给我灌输“文凭是通行证”的理念,这也是泯然众人的理念,我自知不可能拥有一个能允许我不去大学的父母,更重要的是,我自身存在的惰性,对外出闯荡的顾虑,使我犹豫不前。

  于是我一直处在一种矛盾的状态中,没有能扎根的信念;只有连我自己都无法接受的可笑念头。

  无法否认,我希望能够逃脱,脱离这囚笼般充斥着衰腐气息的生活,跃出这我为自己圈定的白圈,看许许多多的书,结识许许多多的人,而不是在这长征的最后成为永远的失败者。

Sai
2007-11-10 23:38

杂志刊印后一些反思

经过半个月奋力制作的校刊(学校的成份已经淡化到可以忽视)终于出刊了。拿到后看第一眼就觉得有些别扭……校花姐姐怎么那么靠边?左手差点都被切掉。翻开之后对目录等一班彩页还算满意,当最后一篇小说(我写的用来凑数的)出现在我眼前时,我的心情跌落到了谷底——怎么离页边这么近!怎么离页边这么近!

之后的散文版沿袭了这篇小说排版的风格,虽然只有区区两页,但在我眼中也将整本杂志力图营造的氛围毁灭殆尽。回想当初排版时的兴奋与疲惫,我那颗炽热的心不禁澎湃起来,现如小学生作文般归纳如下:
  • 不要相信自己的眼镜,要死用软件中的标尺。
  • 统一文字与页边间距,保证每页的间距一致。
  • 出血线是邪恶的东西,宁可多空点也不要硬塞。
  • 设计是苦差事,一手包办在今后更不可取。

今天晚上大概卖了近百本,希望这个势头能持续到本周末运动会结束。不过一共就五百本,除却送出的五十本应该能卖个精光?竟然一本校刊都有人找我(以及制作组成员)签名,我苦练签名去也……

李尔王的悲剧

  我的身后座位坐着一位少女,少女不高,在四米高的教室中站立也不过二点五分之一。相貌平凡,甚少起身,除了课件偶尔去一下洗手间外基本都坐在那如同哪个工厂的模具般静静的看课本。在平凡不过的沉默寡言的少女,为着什么而不断的看着一本有一本乏味的课本。
  他的桌上放着一本两个手掌并排那么宽的的三角形黑底座台历,蓝色半透明水壶,绿色花纹塑料笔筒,筒中装有十来支不同型号的水性笔。除却看课本,她不时抽出一只笔在淡黄色的笔记本上写些什么,从文字的致密程度应该是散文或小说之类,我无法知晓她所写为何,也许在少女沉默的背后是大气而澎湃的文字。
  这周唯一的自习课上,树丛中的蝉不再鸣叫后教师中只剩得笔与纸的触碰声和用手挠脸“咔嗤咔嗤”的声响。我注视着无人站立的讲台后的白板,上面仍残留着上节课的痕迹,“第五节 明清时期统一多民族国家的”,之后文字被谁擦去,这十五个汉字与一个空格就像是某个场所里以嘲笑姿态看着教室中学生的人群。我放弃白板,低头准备继续与数学搏斗。就在头微微往下二十毫米的一刻,少女开口了:
  事实未必是现实,现实未必是事实。
  声如细纹在空气中绽开,毫厘不差的钻入我的耳道。声音给人的感觉像是在一片宽广得如整个世界般清澈的湖水底端的鱼流出的可以看清形态的包裹着气泡的眼泪,升至湖面无害的破碎,只有显微镜可辨出的波纹荡漾开来。我几乎可以指出那里天空中漂浮云朵的形状以及树叶上叶的纹脉。我回过头,六十人中似乎仅我一人察觉到少女说出的话语,也许是他们对此不以为然,但察觉到其中振颤的似乎只有我一人。
  少女桌上只有之前提到的物品,书本什么的她都置于一旁的空桌——她一人坐在最后一排。她手上拿着的分明是地理报,那语句来自地理报上?无法想像功利性报刊上会刊载如此语句。少女面色如常,仿佛刚才的话并非从她口中道出。她的头发遮住了侧脸,目光不时移动。“事实未必是现实”?也就是说我此刻所看到的现实中的她未必是事实上的她,这个理解太过直白,事实的她何时才会出现我并不十分感兴趣,不过是普通的平凡的少女, 不必给与过多的关注。
  五天过去,少女在课堂上不时低语几句,我没怎么在意,她也许只是与另一组的同学进行着单方面交谈。语文课上,我回过头想问她借一支笔,她突然开口道:
  蟑螂会吃书。
  蟑螂?我看着她,话不像是对我说的,她目光所指乃是在讲台上念着课文的语文老师,我只是碰巧在她开始说话的瞬间碰巧听到了她的话语。“自言自语”四个字倏然浮现,像是在烈日下将荒地杂草割除在泥土中找到的钥匙。毫无疑问,无论是“事实”抑或低吟都是她自己的自语,不希望任何人听到的,只是单纯的如青蛙般将飞过眼前的昆虫捉住后吞入肚中一样抓住词句置于手中掂量。
  想那粜风月的女娘,似饥狼饿狼。
  That she that makes me sin awards me pain.

  她大多言语都在扩散的过程中被讲课的老师或同学们嘈杂的回答截断。我所能分辨的不过是狂风过后树上残留的孤叶。少女想必是在为自己的文字挑选词句。这些吐露出的言语不知是选中的抑或遗弃的。少女如今仍坐在属于她的位置上自言自语,也许那是属于自言自语者开始自言自语的关键性座位。她将言语道出,是现实或是事实。那些话语也许必需经由我来传达。

  凯尔特伊比利亚人建起的 城墙被摧毁
  迦太基人所跳的胜利之舞 令大地震颤
  罗马人在西班牙耕耘荒地 铺设道路
  汪达尔人的军队逞尽蛮勇 使一切荒芜毁坏


这是她最长的自言自语。

Sai
2007-09-06 16:55