Google stackoverflow in Firefox

自从发现了 stackoverflow.com 就无法自拔,csdn.net 之流完全无法何其匹敌。不过 stackoverflow 自己的搜索还是不太靠谱,于是每次都是用 Google 的 site 参数搜索 stackoverflow.com,用起来比较麻烦。于是做了个 Google Stackoverflow,可以在 Firefox 的搜索栏里面直接用 Google 搜索 stackoverflow。正在审核中,不过已经可以尝试安装了。

Behind Tetris5 – Game UI

介绍完了游戏部分,再来看看整个游戏界面部分的实现。整个游戏界面全部实现于一个页面之中,通过画面切换显示不同的功能。界面示意图如下:

ui

界面切换时,通过调整div#cubeReel的left值,显示出不同的功能页。滚动动画效果通过jQuery的animate函数实现。
界面上的所有按钮样式均是通过CSS3实现,部分样式如下:

button {
/* ... */
border-radius: 2px;
box-shadow: 1px 1px 2px #ccc;
-moz-transition-property: border-color,color;
-moz-transition-duration: 0.3s;
}
button:hover, button.hover {
/* ... */
-moz-transition-property: border-color,color;
-moz-transition-duration: 0.3s;
}
button:active {
box-shadow: 1px 1px 1px #ccc inset;
}

border-radius属性实现了按钮的圆角。box-shadow属性实现了阴影,按钮在一般状态下使用的外阴影,在按下状态时使用了内阴影(inset)。transition的应用使按钮在鼠标移入(hover)和移出时有渐变效果,示例代码只展示了Gecko所使用的-moz前缀的transition属性,不同的浏览器对transition的实现程度不同,-webkit、-o和-ms前缀的transition属性分别是WebKit、Opera和Internet Explorer的实现。

背景音乐则使用了HTML5中新的JavaScript对象Audio,它可以播放浏览器支持的音乐文件。使用方法类似于原来的Image对象:

Continue reading

Behind Tetris5 – Basic

Tetris5是一个使用HTML5和JavaScript技术实现的俄罗斯方块游戏。俄罗斯方块是前苏联科学家阿列克谢·帕基特诺夫(Алексей Леонидович Пажитнов)在1984年6月发明的,具有数学性和动态性,是实现常见的游戏实现示例。HTML5是HTML下一个的主要修订版本,现在仍处于草案阶段。她的目标是取代1999年所定订的HTML 4.01XHTML 1.0 标准,在互联网应用迅速发展的时候,使HTML的表达能力达到当代的网络需求。Tetris5基于的HTML5技术不只是狭义上的使用HTML5标签(tag),而是广义上使用HTML5提供的各种新特性,结合CSS3和JavaScript编写网络应用的一种新方法。

HTML5是目前正在开发过程中的新一代HTML标准,虽然没有最终定案,但是像Mozilla Gecko引擎、WebkitOpera新版IE都引进部分实现了该标准。HTML5为网络应用开发带来了许多新特性,在HTML的层面上,增加了一些新的标签(tag):

Continue reading

[5P]Ubuntu 11.04 试用

今天下了 Ubuntu DVD,试着用了一下,主要是冲着被广泛诟病的 Unity 界面,想看看到底有多难用。有可能是之前试用过新的 Gnome 3 的 Gnome Shell已经曾经用过一小段时间的苹果电脑,所以没有觉得 Unity 完全不会用,其基本思想和 Gnome Shell 是一样的,就是左边的类似 Mac OSX 的 Dock,统一的软件中心(或者叫应用列表),新的右上角的通知区域。Unity 走得比较远的就是类似 Mac OSX 的全局菜单,如果没有接触过 Mac 的用户的确在使用习惯上有一点不适应,而且我相信许多并非专门考虑过全局菜单的应用程序会有一些兼容性问题。

上截图: Continue reading

非官方的 Firefox 4 修补

Firefox 4 RC1 发布临近,不过仍然有一个在外观上的小 bug 没有修正(至少在目前最新的编译中没有)。

这个 bug 发生在 Windows 版 Firefox 4 RC1 及之前的版本,Tabs on top 打开且关闭菜单栏时,网页中的链接如果是在新窗口打开的(也就是 target=”_blank”),那么新打开窗口的“标题栏”高度会有问题,如下图:

attachment

图中可见,标题栏的高度小于标签的高度。如果是手动打开一个新窗口,或者按右键选择“在新窗口打开链接”,那个新窗口则不会有问题。

这个 bug 详见:Bugzilla@Mozilla – Bug 636951 以及 Bugzilla@Mozilla – Bug 625367

从 bug 625367 可见,已经有了一个 patch 修复这个问题,不过由于是一个 soft block,所以 rc1 没有加入这个 patch,不过我们可以根据 patch 手工修复 Firefox 4。

在 Firefox 4 安装目录中有一个 omni.jar 文件,它是 Firefox 最主要的部分。用压缩软件将它解压开,导航到这个目录:chromebrowsercontentbrowser,其中有一个 browser.js 文件,用编辑器打开,定位到 10186 行 -_-!,函数 allowBy,第10191行(第一个 if 条件为 true 的代码块)的 this._update(); 修改为 setTimeout(function (self){self._update();}, 0 ,this);,保存文件,重新压缩为 omni.jar,这个 bug 就修复了。

希望这个 bug 的修复能包含在 Firefox 4 的正式发布中。

这里提供两个已经修复的版本:

For Firefox 4b12 Windows 32bit: omni.b12fixed

For Firefox 4rc Windows 32bit: omni.rc1fixed