D2前端技术论坛纪实
Dec 21st
2009年12月19日,这天真够冷的,所以来到阿里巴巴很鸡东,让我印象最深的是那停车场,一个卡车头在外面悬挂着,建筑都是很具有艺术感的设计。
“会场不能开空调”,这句话如同天雷般打到了来自深圳、广东等南方城市的同学身上,鲲哥甚至是抖着讲完的。
伴随着《The Wrong Hole》神曲,D2论坛开始。
具体内容还是等视频吧,总的来说感觉都把前端提升了一个层次,特别是百度的金大为,甚至把模板也带入到了前端的范畴里了,这种匪夷所思的思想虽然可以更好的融合项目,但是再这样下去是不是会表现为所有工作都在前端解决呢?金大为说:只要是肉眼无法分辨的性能问题,都可以无视的,不知道他跟讲述性能的鄢学鵾会不会吵起来。
个人感觉克军的PPT是第二漂亮的,第一的当然是腾讯的,我怀疑他们特地请了个UI来制作那套PPT。YUI3的在YUI2上的确是一个重大的突破,以前YUI2时代会引用一大堆js文件,而现在只需要use某个模块即可异步加载,至于性能方面我认为像yahoo这样的大牛应该会不断的测试和优化,我觉得YUI3还是不错的,毕竟base就26K。
在鲲哥口中的说法,研发SilverlightQQ的时候,使用Silverlight来开发QQ并不是他所期望的,大多是上层的决定,尽管他的导师是开发Silverlight的大牛,他也还是在SilverlightQQ中用了一些flash技术,可见Silverlight目前为止并未多少成熟。
明城这次丢脸丢大了,带着apple上去演讲,结果在演讲中穿帮了,他并不会缩放屏幕,在人间网一些人说他土鳖,其实明城的安全技术还是很强的,呵呵。
鄢学鵾(这个名字好难写啊),他提出了一套口碑自己新颖的开发流程,把以前许多繁杂的压缩、合并、上传、版本注释等工序都用一行命令来解决,果然是马总的下属,真正的学会了偷懒。
最后的分享中一个(名字忘记了)介绍了他开发的antku.com快速开发平台,不过我认为这东西虽然能减少开发人员的工作,但在后期维护性欠佳,最终代码出现了很多不知所云的垃圾代码,还出现了table的布局格式,貌似实用性不佳。
阿里日本站的阿花让我们见识了阿里如何蹂躏自己的员工并派遣去蹂躏日本员工的惨剧,群众纷纷表示坚决不去阿里日本站。
最后终于见到了hax大牛,就是炮轰js征途的那位传说中的人物,有幸能一睹容颜,虽然有人提出想他PK,但是他的风度还是没有失去。
这次运气比较好,能被抽到赠书,但杯具的是当我上去的时候就剩3本书和一些T恤了,前面好书都被挖走,无奈只能随选了本最厚的Dojo权威指南,以前还是玩过这套JS框架的,我是不常看书的,不过看到中间有句话:Dojo不仅是一个JavaScript工具箱,而且是一个真正的JavaScript工具箱。我彻底内牛满面,看来我的确不适合读书,谁帮忙解释下这句话啥意思。

CSS+(x)html从初学者到职业人的脱变
Dec 18th
我总结了下,在书写css+(x)html中,从门外汉到初学者要经过三个过程。
1.能脱离DreamWeaver设计视图,手写代码。(无视浏览器兼容,HTML无语意)
2.使用hack兼容各浏览器(HTML无语意)。
3.精通web标准,精通各浏览器之间的差异,书写符合标准的HTML,尽量避免hack的使用(PS:我一般只写IE6的hack并且是它的缺陷造成的问题 例如:PNG、最小高度/宽度)。
能达到第三点,恭喜你,你已经成为了一个初学者,你能书写一个完整且标准、兼容的html。
但以上远远不够。
想要作为合格的webrebuilder职业人,你必须要有一个脱变的大脑,为自己写的每一行代码负责,在看到效果图的时候就应该明白,什么地方是可以重用的,什么地方应该做等高特效,什么地方需要扩展,而不是仅仅实现效果图的样子就完事了。
我总结了以下几点:
1.效率的页面。
初学者在切页面的时候并没有考虑页面效率。在压缩页面图片大小的同时,Yslow也提出了一系列要注意的优化方案。
这里需要注意几点:
·图片优化,在图片优化中,单一背景用png-8,照片类用jpge,要学会锻炼如何判断图片该如何压缩的能力。
·减少http请求,背景使用css sprites做成一张图片,这样能减少巨大的请求量,但对于如何合理的布局,划分类型这里要走的路还很长。
·把script放在页面尾部,懂得表现与逻辑分离,html文档中不能存在类似sltyle=,onclick=这样的语句,所有事件都使用侦听来做,这样能让内容更快的出现在用户面前,同时更利于维护。
2.周全的考虑。
昨天在CSS群里出了道简单的图文混排的题目,却发现许多人都没有考虑到位,一个简单题目就可以看出他的经验了。
题目如下:

起先我并没有说需求,但几乎所有人都只是简单的进行浮动,定宽。
这个题目考点在于,表现的扩展。
这个图文混排类似评论模块。
一个好的CSS应该达到以下效果:
1.右侧文字自适应宽度,宽度由祖先级宽度制定。
2.左侧的图片应考虑到没有图片的情况、图片缩小的情况。
3.解决长字符英文串不换行的问题。
达到以上三点才是这题的满分卷。
许多人都在IE6的3PX bug中踩了陷阱,(图片右侧的文字和下面的文字没有对齐)。
这里放我的答案,请先自己练习一遍再看答案。
提示:你可以先修改部分代码再运行。
收到D2的邀请函,开始脱变·成长
Dec 15th
工作算上实习已经有2年了,从一个连HTML都不懂的毕业生,到狂妄之极的半桶水,再到接受业界洗礼的挫折,再次觉悟走向WEB标准与前段之路。
我不断的脱变,不断的成长。
这次D2在杭州召开,好不容易有个机会可以融入到业界顶级的技术交流之中,回想走过的漫漫路程是艰辛的,是坎坷的,我深刻的明白我要走的路还很漫长。

fireworks于photoshop的图片优化比较。
Dec 11th
原文:http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/
谢谢翻译不羁虫
Fireworks vs Photoshop Compression
Fireworks 与photoshop的图片优化能力比较
Surprisingly enough, based on the findings from my recent survey there are quite a bit of Fireworks users. Personally, I never used Fireworks. Photoshop is alway my first choice for designing—from image editing to designing mock-ups. But, did you know that Fireworks is way better than Photoshop in term of image compression? I’m not a software engineer, I can’t explain why Fireworks can compress better. But I can prove it to you by showing a series of experiments I did.
简单说作者是一直坚持用photoshop的,无论做网页设计还是图片优化都是如此,但作者经实验实际发现fireworks在图片优化上有很好的性能
PNG Compression
以PNG格式优化输出的比较
For testing purpose, I used an un-compressed image with transparency. I used Photoshop to export the image to PNG-24 with transparency and the resulting file size is about 352 kb. Then I used the same image and exported it to PNG-32 with Fireworks. The file size is about 332 kb. Visually, they both look the same (at least to me). In term of file size, the image exported with Fireworks is about 20 kb less.
如下图效果:photoshop以png24格式输出,fireworks以png32输出,(不羁虫:个人认为这2个格式在2个软件里输出格式名称不同,实际是相同的,我把ps导出的png24格式拖到fs里打开就是png32格式,而fs里还有一个png24格式输出,个人感觉fs里的png24就是优化质量100%的jpg)实际得出fireworks得到的图片尺寸比photoshop要小20kb(不羁虫:应该说图片的品质是一样的,我是没看出差别来)
gov网站——实习生温暖的家
Dec 7th
我跟一网友聊天,她做的是政府项目,让我调试样式,我发现她的网站只能在IE7下观看,其他浏览器惨不忍睹,于是我问她:
“你们难道不在乎其他浏览器用户嘛?”
“没事的,只要领导一句话,全部改成IE7就可以了”
当时我彻底无语了,这就是传说中GOV的项目网站,真正的饭局上的项目。
今 早又碰上了一件很雷的事情,在浏览杭州网的时候,惊人地发现我有史以来见过嵌套最多无效标签的一个网页。
整整40层center标签,那是多么壮观的画面那,有幸能一截盛况。

悼念洛克MM(RockHward)陨落
Dec 7th
洛克的性别应该是个男生,但我习惯叫他洛克MM。
QQ头像是个女生的头像,我一开始还真的以为他是个MM。
记得刚工作的时候,为了注册BI的一个账号,到处找邀请码,在最绝望的时候,洛克给我了一个极其珍贵的邀请码(虽然在注册的时候发现原来我以前注册过的),但还是得谢谢他。
后来才知道他是FW区的斑竹,他写了无数FW教程,令我印象最深的就是青花瓷按钮教程,虽然那时候我说这个按钮有点像舒肤佳,不过那个教程也唤醒了我对FW至死不渝的兴趣。
他写过很多教程,甚至在无意中阅读过,但常常会忽视了作者,就算他已经很努力的打水印了。http://home.blueidea.com/apps.php?do=case&ac=lists&uid=174010
事件源于洛克在水区一次灌水的时候,送上了一张MM生日蛋糕图,虽然那张图让我有种想求片的欲望,不过穿着还是属于正常范围。
至后来洛克被警告后,大肆反驳,认为自己根本没有错,水区图片难道不行么,并且这张图也不违反“不得发布无意义MM图片”的版规之类的说法,闹到后来一气之下直接举报图片。而洛克则被关进小黑屋。
对于我这个经常在MOP混的猫宅,绝对同意洛克的思想,一个没有激情的技术论坛,打破腐朽的思想,改革成艺术于欢乐的走廊,工作之余也不乏笑谈人生,是多么惬意。
链接文字下划线贴住问题研究
Dec 3rd
在使用PS设计的时候,会发现给12px的文字加下划线的时候,下划线会紧紧贴在文字下面,很不美观,FW CS3以下都很漂亮的分离了这两对小冤家。
但在编写页面的时候也会出现这样的情况。
以下是测试结果:



