Kejun's Blog -- IT技术博客大学习 -- 共学习共进步！

• 一览CSS布局标准

回顾历史，CSS1于1996.12.17发正式版，它是为辅助HTML的展现效果而生的。 1998.5.12，CSS2发正式版。随后发修订版CSS2.1，纠正了CSS2中的一些错误。注意从CSS2起，CSS的作用就不是辅助展现了，变为全全负责展现。（注：当年CSS2的勘误表有兴趣可以看看） CSS2.1明确了2个模型，一个是众所周知的盒模型(Box model)，CSS1没有盒模型的概念，盒模型的前身在CSS1里叫做面向盒的格式化模型。元素抽象为盒，以盒为对象设计思路清晰多了。CSS3的盒模型丰富了更多属性。盒的产生，以及盒的定位就是CSS2.1定义的第二个模型－可视格式化模型(Visual Formatting Model)。CSS3相关的布局标准实际上也在这个大的框架之下。

• 一次响应性开发实践

响应性开发的概念不做细述，一年前曾做过一次分享”聊聊响应性设计和开发“。仅仅利用media query适配样式是远远不够的，并没有考虑触屏下的行为和特有的内容组织方式的不同。简单在桌面版基础上叠加mobile版的代码，会带来请求增多、流量、性能、代码冗余等诸多方面问题。这次从以下几个方面着手，充分发挥“响应”的灵活性，目标是得到一个更“好用”的体验。

• 意识流

我自己绝对是一个顽固的意识流的人。以往的各种内部或外部的分享，谈的最多的也是前端开发的各种concept。 2009.12 – D2上我说“库”时代过去了，以后不会再有类似jQuery、Dojo、YUI这种大而全的库了。堆积“库”的开发方式将会演变为按需加载更细粒度的模块（http://www.slideshare.net/kejun/yui2yui3）。框架提供的插件机制会把单一功能的库整合到一起。同年1月Mozilla发起一个叫ServerJS的项目，8月改名为CommonJS。CommonJS定义了一整套Javascript模块(module)、包(package)、promises、io等规范，目的用于服务器端、桌面应用的Javascript开发。

• js和css的顺序关系

1. head里的顺序如下，考虑会对请求有何影响： a. 外部js在css前面 b. 外部js在css后面

• 更好的用vim浏览Javascript代码

vim默认没有一般IDE的outline视图，浏览长篇Javascript源文件很麻烦，taglist插件正是弥补这点不足。它可以将所有方法和变量分级罗列出来，一目了然。taglist是依赖强大的ctags实现的。ctags支持41种编程语言，其中包括Javascript，但对Javascript支持较随意。

• JS文件加载失败处理

浏览器的文件加载实际上是有非常纠结的兼容问题的。最近看到@lifesinger做了一个具体的总结。这里比较麻烦的是IE6~8不区分加载成功或失败，都走一个回调。在网上看了一种解决方案是，在加载文件的最后置一个全局变量或改变标签的属性来区分，这样成功与否就通过这个标志位判断。但显然不太完美，还要改加载文件。后来尝试另一种思路，先创建一个vbscript，src置成一个JS文件，如这个文件加载正常，肯定会报错否则不会有反应。这样...

• 探讨前端代码Review

产品发展越快，对代码的管理也就需要越严格。通常代码在进入QA测试环节前就要进行代码review。review的目的倒不是为了发现bug，主要是为了避免代码设计上的缺陷和保证代码的可维护性。当然还有针对性的review比如安全性、性能、易用性等等。代码review除了可以提高代码的品质外，还能加强团队的协作精神，以及提高团队的整体技术能力。显然这是一件非常有意义的事。

• 新版twitter背后的技术

如果要评2010最牛逼的网站改版，除了豆瓣就是Twitter了（开个玩笑）。那天看了新版twitter的介绍视频，相当兴奋，那种感觉就像04年看到gmail。面对未知的新时代，一部分人在畅想，一部分人在抵触，只有小部分人在行动。Twitter很快交出了他们的答卷。今天看到Twitter官方发表的博文“The Tech Behind the New Twitter.com”，总结了新版twitter背后的技术，值得一读。（下面的内容不是翻译，是我的理解） API客户端新版背后的一...

• “铁”饭碗

公司和员工是双向考核，公司考核员工是因为付出金钱给员工，员工考核公司是因为付出智慧给公司。前者理直气壮，后者为什么不呢？真正的铁饭碗不是某个公司给的，而是自己打造的。商业社会的残酷，也给更多“职业工作者”更多的机会，现在有职业经理人，职业杀手，也应该有更多的职业工程师，职业前端工程师，职业设计师，他们的身价就是他们的专业性，每个铁饭碗都是由专业、经验、能力...铸就的。追求这个，远比追求更高职位和名利更长久。

• 实现一个更精简的Tab

tab形式的导航是最常见的一种UI。看看下面这个例子：细节： 1. 分选中/非选中状态 2. 每项是叠在前面下面的效果，左边有个阴影，但第一项没有 3.所有按钮宽度适应文字可变 4. 最后还有一个阴影 5. 底部有条灰线100%宽

• Zakas解答Baranovskiy的JavaScript小测试

Zakas 1/22在twitter上分享了Baranovskiy的一篇文章“So, you think you know JavaScript?”（你认为你够了解javascript吗）标题很叫板。结果5小段代码做的稀里哗啦。今天Zakas专门撰文解答了这几道题（http://www.nczonline.net/blog/2010/01/26/answering-baranovskiys-javascript-quiz/）。不愧是大师，很深刻。第1题: 是否真的理解声明变量 if (!(”a” in window)) { var a = 1; } alert(a); 知识点：一是变量声...

• 2009年前端技术领域回顾

在过去的2009年，如果你关注前端技术发展动态的话，可能会积累一大堆信息，有的保存在书签里，有的在推特上，有的在你的博客里。整理整理挺有意思，当初看到那些文章那些事儿的小小兴奋，又会油然而生。或许，经过一年的沉淀，再次回顾会有新的思考和启发吧。

• 你真的了解HTML吗

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

• 也谈谈前端，架构，框架与库

今天裕波发了一链接给我是周爱民老师在淘宝做的一个分享的视频：“前端，架构，框架与库” （http://v.youku.com/v_playlist/f4262628o1p0.html）又看了淘宝玉伯的感想（http://lifesinger.org/blog/2010/03/thinking-of-architecture/）。看的我也想说两句。无论是大公司还是小公司，创业公司还是成熟公司的前端开发都需要一个“架构师”的角色。理由很简单就是我在这些公司都呆过。但大家对“前端架构师”的理解，我怎么听都觉...

• 可选闭合标签

比如google搜索结果页的td都是不闭合的，但它是符合标准的。之前有人发现过这个问题。那到底哪些标签可以不闭合呢. html4.01 strict或html5下，即doctype声明为或下面的标签都是可以不闭合的：

• SmartSprites - 命令行形式的CSS Sprites生成器

SmartSprites（http://csssprites.org/）是一个基于java开发的命令行形式的CSS Sprites生成器。它根据CSS文件中的特别注释自动合成图片，然后自动替换原来的图片，最后生成一个新的CSS文件。显然比手工上传、下载，再手工修改CSS方便多了。它可以指定生成－个或多个sprites图片，要合并哪些图片也是由你指定的。这一点要比SpriteMe（http://spriteme.org/）好。SpriteMe本身不是开发阶段的工具。简单介绍一下怎么用：环境要求：...