Mozilla Firefox 五周年

2009-11-10

五年的时间意味着什么？对于个孩子来说，他或许还在幼儿班；对于款浏览器，它仅用了五年的时间，打破了垄断颠覆了整合互联网，甚至用户使用浏览器的方式。

这就是 Firefox，源自 Mozilla。这里有份 Firefox 至今的发展时间线（线上可以看这里），不长的 PPT 足以看出这五年 Firefox 的发展历程：

时间线

1998

1998-03-31 Netscape 组建 Mozilla 项目，并以 Mozilla 的名义发布代码

2002

2002-04-01 新的浏览器代码入库，没错，这就是 Firefox 的前身（那时候还不叫 Firefox）
2002-06-05 Mozilla 1.0 发布
2002-09-12 Spread Firefox 发布
2002-09-23 Phoenix 0.1 发布（Firefox 的前身就是 Phoenix）
2002-12-07 Phoenix 0.5 发布

2003

2003-04-02 浏览器组件从 Mozilla 套装（Mozilla Suite）移至 Phoenix
2003-04-14 Phoenix 更名为 Firebird
2003-07-15 Mozilla 基金会成立

2004

2004-02-09 Firebird 更名为 Firefox，并发布 0.8 版
2004-02-17 Mozilla 欧洲区成立
2004-08-18 Mozilla 日本区成立
2004-12-12 超过一千万次下载
2004-12-15 在「纽约时代」播放宣传广告

2005

2005-02-16 超过两千五百万次下载
2005-03-21 Mozilla 中国区成立
2005-04-29 超过五千万次下载
2005-10-03 Mozilla 研发中心（MDC ）成立
2005-10-19 超过一亿次下载
2005-11-29 Firefox 1.5 发布
2005-12-02 Firefox Flicks 上线

2006

2006-04-04 addons.mozilla.org 上线
2006-10-24 Firefox 2.0 发布

2007

2007-01-24 Firebug 1.0 发布
2007-07-10 Air Mozilla 发布
2007-09-28 Moziila 支持站点上线

2008

2008-01-21 突破五亿次下载
2008-06-17 Firefox3 发布，破世界记录

2009

2009-06-30 Firefox3.5 发布
2009-06-31 突破十亿次下载
2009-11-09 Firefox 五周年

从上面的时间线中可以看出

Mozilla 的重大产品发布周期基本上都在上半年，集中在四月份
从 Firefox 的几经改名同时可以看出 Mozilla 对于商标的注重
04 到 05 年这两年是 Mozilla 着重推广市场的两年，同比业内也是 Ajax 技术逐渐流行而且是前端职位逐渐确立的时期
从 08 年至今，Firefox 一直致力自身的产品改进以及本地化进程（记得 Firefox 中国版不？）
线下的推广很重要，尤其调用开发人员这块
浏览器曾经为 Mozilla 套装的一部分，后来 Mozilla 才改变了开发方向，所以专注并不是件坏事 :^)
从 Firefox 下载的趋势上看，基数越大增长的幅度越快，呈非线性增长
其实我认为可以将与 Google 合作加入到时间线中
结合上两条，是否可以认为如此快速的下载量也有 Google 的一份？那么 Chrome 是否能重现 Firefox 的辉煌？
增加条火星 Tips：Firefox 的「官方缩写」为「Fx」而不是「FF」 via

感谢

感谢 Firefox 改变了我的开发方式，使用 Firefox + Firebug 等一系列开发工具，节约了我不少时间
感谢 Mozilla 提供 MDC 等这些内容丰富的开发文档，是它们让我对于浏览器的细节一目了然
感谢 Mozilla 以及那些开发人员提供的丰富插件，这使得使用浏览器事半功倍、轻松惬意
感谢 Firefox 打破垄断，使用户在浏览器方面有了更多更好的选择
感谢 Mozilla 以及你们所有作出的一切努力
……

愿望清单

呃，其实我觉得 Firefox 已经很完美。但如果 Firefox 能够更快、占用更少的系统资源，那就更完美了 :^)

Firefox 五周年，五年的时间不算短，但后面的时间还会更长。希望在接下来的日子里，包括 Firefox 在内的现代浏览器，能够有更出色的发展，给开发者、给用户带去更好的开发平台以及浏览体验。

-- EOF --

CSSEmbed 右键打包工具

2009-11-04

在开始之前，如果你还不知道 Data URI 是什么，秦歌的这篇文章可以帮上你。Data URI 在淘宝线上已经有了实例应用，更进步信息请查看云谦的文章。

好，回过头来说说 Data URI 「传统的」制作过程。由于 Data URI 需要使用 base64 编码，因此不得不自己写个小工具（熟悉 PHP 的话，相信你会知道怎么做），然后再将编码后的字符加入到 CSS 文件中。

上述的步骤且不说繁琐，而且容易出错。前几天 NCZ 推出了款名为 CSSEmbed 的自动化工具。这个工具在上面的场合下可帮上大忙了。它能分析 CSS 文件中的图片地址，获取内容并将它 base64 后填充到对应的位置。

不过总想让工具变得更自动些，套用了下原先玉伯写的脚本，于是就有了下面的右键打包工具。

安装方法

从这里下载 CSSEmbed 右键打包工具，解压缩
点击 install.cmd 安装
然后可以右键点击 sample.css 或者 sample-min.css 测试
最后生成的 _embed.css 结尾的文件就是我们想要的文件

呃，不好意思，有点罗嗦。

注意事项

CSSEmbed 是用 Java 写的，所以它需要 Java 运行环境
务必确定 CSS 文件中的图片引用路径为绝对路径（ [在命令行中可以使用

关联的 script 标签

2009-10-28

又从 James Padolsey 这里得到个好的点子。

在实际写脚本过程中可能有段 Javascript 和 HTML 非常相关（比如实例化 Slider 等这样组件），那么通常我们会将它紧放到 HTML 的后面。

「传统」的做法需要顾虑的点有很多。因为脚本是立即被执行的，所以要考虑例如调用的组件是否已经声明，以及如果有 Ajax 请求是否会堵死浏览器等等。

下面的代码就是本篇 Blog 提供的另个思路，但愿我看起来不是那么的火星：

<div id="some-div">
    <script type=":contextual">
        alert(this.id); // "some-div" is alerted
    </script>
</div>

原文作者的想法是改变 script 标签的 this 指向到父节点的 Element，从而关联上下文 HTML 结构。

看它的实现代码：

<script type="text/javascript">
~function() {
    var scripts = document.getElementsByTagName('script'),
        script, i = 0;
    while ((script = scripts[i++])) {
        if (/:contextual$/.test(script.type)) {
            (new Function(script.innerHTML)).call(script.parentNode);
        }
    }
}();
</script>

不过如原作者所说的外，其实还有很多顺带的好处

将 this 指向关联到父节点，遍历查找 DOM 非常的方便
相关的 script 标签和 HTML 结合紧密，很清楚就能明白这段脚本需要做什么
统一调用，可以考虑懒加载
方便复制粘贴 :^)

当然，上面的代码仅仅是个想法而已，在实际编码中还需谨慎应用。滥用此方法可以预料到的些问题，比如：

脚本执行顺序改变
弄乱作用域，如果你的代码严重依赖 this ，那么将会是个噩梦（当然，这本身也不是个好习惯）
让不了解此机制的其他开发者迷惑

正如原作者所言，在我们写代码的时候能「Thinking outside the box」，那才是最重要的 :^)