Nocoo.Weblog » Web标准化研究

Just in Case

nocoo — Thu, 14 Jan 2010 04:09:07 +0000

难到我们真的要拿这种破玩意当作备份吗？

Google实时搜索

nocoo — Tue, 08 Dec 2009 12:45:49 +0000

早就听说Google要整合实时信息比如Twitter到搜索结果中，这次真的见识到了，而且信息是不断更新到搜索结果页面中的…

Google Wave on my iPhone

nocoo — Fri, 23 Oct 2009 09:54:10 +0000

Google Wave是不是一种迅速花掉全部流量的方式呢，呵呵。
速度是真的慢啊，输入速度更是不敢恭维，这种速度在with:public灌水是不太现实了，协同工作应该还行。
看好Google Wave加入Google Apps大家庭!!

Google Wave and Reader 2.0

nocoo — Fri, 23 Oct 2009 09:42:53 +0000

with:public真的是个好地方，什么是真正的地球村呢？我想这就是了。
Google Wave中的with:public是一个公共wave的大集合，真的是大杂烩的大杂烩，什么都有…而且中文的内容很多很多，当然比较低俗，贴美女的，啥都有，不禁令我为wave开放后在中国的未来捏把汗。对了，提到with:public，Twitter的public timeline也不错，不过明显不如Google Wave那么2.0。
以前总是习惯于在Google Reader中定向地获取新信息，就好像填鸭一样，人家写什么，喂给你你就接着就行了，不用挪窝，打开Google Reader就行。现在在Wave上，信息渠道更加广泛了，说白了就是一片大森林，你自己出去觅食吧…

大家都知道，野生的鸭子更好吃一些。

上图，今天在Google Wave上发现的好东东，在线听歌服务——亦歌，音质不错哦，在公司不能乱装东西同学可以试用一下。

Google Wave Performance Issue

nocoo — Thu, 22 Oct 2009 02:38:48 +0000

最近的Google Wave用下来的感觉，对这个方向和思路是很看好的，因为一直以来我在寻找一种能够同时拥有IM的即时性和Email的绝对时间轴、存档性的方式，Google Wave显然是这个问题的最优解，通过Google Wave可以协同工作，甚至可以取代BBS。
昨天提到Google Wave是HTML 5的应用，大量使用了Ajax技术，带来的问题是显然的——太慢了…
打开with:public之后我的CPU开始狂转。Firebug统统关掉也没有丝毫好转。
目前的Google Wave采取限量邀请政策，只有第一代用户每个人能邀请几个人，被邀请的二代不能继续邀请（穷二代）。这样的性能显然不能支撑持续的邀请…
我对Google的数据处理能力是不怀疑的，相信有Gmail的基础，再大的Ajax数据请求都是能够处理的。看起来前端性能是如此重要！

Firebug can make Gmail slow

nocoo — Wed, 21 Oct 2009 07:52:33 +0000

“Firebug is known to make Gmail slow unless it is configured correctly.”

For the best Gmail performance, we suggest disabling Firebug for www.google.com.

Windows or Linux Users
To disable Firebug:

Open the Firebug pane in your Gmail tab by clicking the Firebug icon.

Click the down arrow next to the Net tab, and select Disable monitor for mail.google.com

Repeat Step 2 on the Console and Script tabs.

If you’d like to keep Firebug running, you may improve Gmail performance by following these steps:

Click the green or red icon in the bottom right corner of the browser window to open Firebug.

Click the Console tab.

Select Options.

Uncheck Show XMLHttpRequests.

Click the Net tab.

Select Options.

Check Disable Network Monitoring.

Mac Users
To disable Firebug:

Click the green or red icon in the bottom right corner of the browser window to open Firebug.

Click the bug icon in the top left corner of Firebug and select ‘Disable Firebug for mail.google.com.’

If disabling Firebug for Gmail doesn’t improve performance results, you may have to entirely disable Firebug.

看起来Firebug的监控功能对这种大量应用Ajax的网站还是影响很大的。

Google Wave与HTML 5

nocoo — Wed, 21 Oct 2009 07:26:12 +0000

如果你在Microsoft Internet Explorer 8下访问Google Wave，登陆后会发现上图的提示。
Google Wave是一个HTML 5应用，看起来Google一直走在了技术的前端，当年Ajax的发明以及Web 2.0的火热正是由于Google提供的Gmail带来的。这一次，Google为我们推开了HTML 5的大门，当然，是用波浪冲开的。
当然，占据用户比例大头的Microsoft Internet Explorer 8如果不能访问Google Wave这显然是一种悲剧，然后Google就做了Google Chrome Frame…
看着Google一头扎进IE的波涛洪流，我无语啊。没事搅这滩浑水干什么。

如何用CSS让一个div全屏居中

nocoo — Mon, 03 Aug 2009 11:22:35 +0000

居中是一个能有效获取用户注意的排版方式。尤其是你有一个大大的提示想告诉用户的时候。
div居中有点难度，水平一般没问题，垂直，也就是全屏居中就有点技巧了。这里翻译了一篇办法：

展示的是旧版本的剧种方法，图示很清楚。稍微改进下代码如下：



    
        
        Centered DIV Test
        
    
    
        centered div content

在线例子可以看这里。
原文：The simplest way to horizontally and vertically center a DIV

Google Reader Bug

nocoo — Sat, 18 Jul 2009 04:57:02 +0000

今天午休翻Google Reader的时候终于看到Google一个Bug。如上图所示。
请无视这个Bug的题目吧，我发现只有这篇文章才能重现这个Bug…
当然这也更可能是IE的问题。不过跨浏览器兼容应该是Google的事情。我的IE版本是8.0.6001.18783。
也有很小的可能是春哥的问题…

Update:
确实还有不少，比如下图。我冤枉春哥了…

还是校内

nocoo — Tue, 30 Jun 2009 06:42:48 +0000

高亮背景挡住字了.唉,我就无语了,同样是中国软件公司,校内网前端团队和淘宝UED咋就差那么远呢?
真的希望校内网的人好好看看淘宝UED在研究什么,想想差距.

具体参见最近的淘宝UED文章:垂直栅格与渐进式行距

挑Google一个瑕疵

nocoo — Fri, 26 Jun 2009 00:51:37 +0000

本人是完美主义者,所以会注意到这种小”问题”…
在橙色条最左端弧线处,有条border-bottom漏出了那么若干~~pixal~~pixel.同样的右边也是对称的情况.
我是在Mac OS X下用Safari 4.0.1 (5530.18)看到的效果.
Google Analytics已经不是beta啦,检查要注意些噢…

如何让文本块右边界对齐

nocoo — Fri, 10 Apr 2009 16:01:37 +0000

1. 问题

前几日,一个网站客户提出,文本右边凹凸不齐,不好看,有没有办法让行尾对齐呢?
我的第一反映是不太可能吧,要计算字数和长度如何如何想得很复杂.其实无知很可怕…

2. 解决

问:你知道text-align属性可以取几个值吗?
答:left,right和center.

还漏下一个:justify.当text-align取了justify含义是分散对齐,会略微地对单词和字母之间的距离做调整.

3. 效果

不加text-align: justify;的效果

加了text-align: justify;的效果

4. 讨论

值justify可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。不过在CSS中，还需要多做些考虑。
要由用户代理（而不是CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间（不过CSS规范特别指出，如果letter-spacing属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。
CSS也没有指定应当如何处理连字符（注1）。大多数两端对齐文本都使用连字符将长单词分开放在两行上，从而缩小单词之间的间隔，改善文本行的外观。不过，由于CSS没有定义连字符行为，用户代理不太可能自动加连字符。因此，在CSS中，两端对齐文本看上去没有打印出来好看，特别是元素可能太窄，以至于每行只能放下几个单词。当然，使用窄设计元素是可以的，不过要当心相应的缺点。
注1：CSS中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。

5. 参考资料

CSS text-align 属性

6个常见的IE渲染Bug及其修复方法

nocoo — Thu, 09 Apr 2009 16:01:55 +0000

1. size,padding和margin距离异常

在IE6中,各种size,padding和margin总是感觉怪怪的,有时候死活差那么几个像素.这时候可以使用单独为IE准备的CSS文件来纠正.只需要在页面头部加类似这样的CSS文件即可:

其中的ie.css是对主CSS文件中,那些在IE6下显示异常的元素,重新定义的CSS.

2. 块元素居中问题

在现代浏览器中,一个块元素,假设是一个p,设置了宽度,设置左右margin都是auto之后,渲染效果应该是居中.但是在IE中,必须对其父元素,假设是body,加text-align:center;才能看到居中效果:

body { text-align: center; }

并且,你还要在子元素p里把继承的居中纠正回来:

p { text-align: left; }

3. div最小高度不能低于12px的bug

如果你需要一个高度很小的div,假设说做一个分隔线之类,你会发现div最小高度不会低于12px.这时候要设置div的line-height: 0;才行.

如果还是不行,你要在div里套一个p,并且指定这个p的line-height: 0;.

4. 浮动元素的双倍margin距离bug

这是一个非常严重的bug.你会发现你的侧边栏总会跑到第二行去显示,或者明明你计算好宽度,平分两半,还预留了些空隙,在Firefox显示正常,在屏幕左右分布的两个块元素,在IE下非换行不可.说起来应当是IE的float块元素,margin加倍渲染的bug.
这样的代码:

.floatbox {
   float: left;
   width: 150px;
   height: 150px;
   margin: 5px 0 5px 100px;
   /*This last value applies the 100px left margin */
}

正确的渲染应该是这样:

但是在IE5和IE6里,margin的100px被加倍,渲染成这个样子:

margin被加倍成了200px.
浮动元素的双倍margin距离bug的出现条件和特点是:

float块元素
margin方向与float方向相同,即float: left;的块只会加倍margin-left的值.
这个float块与其父容器的内边之间夹着这个margin的情况下,才会加倍.当前行的第二个float块,因为其左边不是父容器的内边,就不会出现这个bug.
浮动元素的双倍margin距离bug具备左右对称性.

修复很简单,在所有float的元素的CSS中加入display: inline;即可.其实根据W3C对float的定义,当float具备left或者right时,display效果应当是不起作用的,除非是display: none;,但是指定了display: inline;确实让IE6正确显示了margin.

5. 盒模型的bug

看这样一段代码:

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

根据盒模型定义,这个div的宽度应该是2+10+100+10+2=124px.大部分浏览器也是这样解析的,唯独IE6认为它是100px宽.
这个bug会对布局带来严重影响.消除这个bug只需要在页首制定DTD即可.

此前的一篇文章这样解释:在页首制定了DTD,浏览器就认定Web开发者知道并理解DTD,于是就会使用兼容标准的方式来解析和渲染页面.

6. PNG图片不能透明bug

在IE6中,PNG图片原本透明的部分被渲染成不透明的颜色.可以使用这篇文章提到的办法修复之.
其实这个bug只会出现在设置为alpha透明方式的png图片上,导引色透明方式在IE6中则不会出现不能透明的bug.

参考资料

[译作]新白宫网站代码分析

nocoo — Wed, 21 Jan 2009 08:01:55 +0000

概述. 在美国第44任总统就职日这个历史性的日子，让我们来分析一下新的白宫网站（whitehouse.gov）代码结构吧。网站基于ASP.NET构建。

[singlepic=18466]

whitehouse.gov网站使用IIS 6.0. 网站的HTTP头信息中包含键值对”Server: Microsoft-IIS/6.0″。网站并没有使用微软公司最新版本服务器软件，IIS/7。

whitehouse.gov网站使用ASP.NET 2.0. HTTP头中标识自己的程序版本为”X-Aspnet-Version: 2.0.50727″。这个信息可以去掉，这样可以为每次服务器响应节省30字节带宽。

whitehouse.gov网站使用JQuery 1.2.6. JQuery JavaScript库，使用了其最小集版本，位于/includes/文件夹下。很多开发者使用Google服务器托管的JQuery以便提升性能和减小下载脚本的延迟时间。这样做可以提升站点性能。

whitehouse.gov网站使用GZIP压缩. 所有网站文本都采用了GZIP压缩，显著地提升了性能。

未压缩大小:  48218 bytes
压缩后大小:   8370 bytes
节省带宽:           ~80%

whitehouse.gov网站使用Vary: Accept-Encoding. 在HTTP头中添加Vary: Accept-Encoding是一种强制代理不向不能解码GZIP的客户端发送GZIP内容的手段。

whitehouse.gov网站使用Cache-Control: private和max-age. 它使用了”max-age=85895“，大约1 天。这样，html页面应该只会在你的计算机中缓存1天。

whitehouse.gov网站使用Web Trends Live追踪技术. WebTrends声称是“领先的网页分析和客户为中心智能市场营销解决方案（leading provider of web analytics and consumer-centric marketing intelligence solutions）。”

whitehouse.gov网站使用meta keywords标记. 这样做很奇怪，因为Internet上的访问者很少有不知道这里是干什么的。meta标记如下：

这样并不会对提升whitehouse.gov网站的Google PageRank有多少贡献。我认为搜索Barack Obama的用户无论如何都会被导引到这个网站的。

whitehouse.gov网站使用ViewState. 这是一个隐藏表单，允许网站在浏览器中存储服务器端数据。ASP.NET自动解析发送到浏览器的ViewState信息。浏览器不应该解析这个信息。

whitehouse.gov网站使用WebResource.axd. 这是ASP.NET生成的一个脚本文件。通常它们不能被有效地缓存，并且我发现它们的确降低了性能。

whitehouse.gov网站包含了很多空白字符. 如果你的浏览器启用了GZIP，这并不会带来性能影响，但是如果去掉这些空白字符，网站代码可以减小20%以上。

whitehouse.gov网站包含注释标签. 网站使用了很多HTML注释分割页面代码区域。如果能将这些注释写在服务器端代码中，可以在编译页面时不将注释编译在最终页面代码中，从而提升效率。

whitehouse.gov网站包含很长很长的ASP.NET ID. 页面中的很多元素包含非常长的ID，是浪费带宽的主要因素之一。这些长ID可以很容易地在服务器端替换成短ID。

whitehouse.gov网站使用的GIF多于PNG. 网站使用的GIF图片多于PNG图片。PNG格式的图片可以更加优化，从而节省带宽和消耗。网站中使用了两个GIF动画。

whitehouse.gov网站使用了5个层叠式样式表（stylesheets）文件和12个JavaScripts脚本文件. 如果能把这两类文件合并成两个文件，网站可以更快而且更轻量级。当然这是针对访问首页的访客而言。奇怪的是，用于修饰管理页面的层叠式样式表也被加载进了普通用户的访问中：

/* admin styles */
/* cms */
.adminNavigation {width:996px; position:relative; z-index:100;}

whitehouse.gov网站使用了高度压缩的JPG. 如果你距离屏幕较远，或者视力不是那么好，这些图片看起来还行。开发者对JPG图片采用了高度压缩。这里显示的图片被放大并且轻微地二次压缩过。

[singlepic=18465]

whitehouse.gov网站使用了image sprites技术. 这项技术可以大幅提升站点性能，因为它将若干个小图片合并成了一张图片。这是一项先进的技术。采用了image sprites技术的图片是”nav-sprite.png“.

whitehouse.gov网站使用了Packer. Dean Edward的Packer是一个用于压缩JavaScript文件的工具。JavaScript脚本将在被下载时自动解压缩，这是一项很差的优化手段，因为往往JavaScript经过GZIP压缩之后，比经过YUI压缩器（YUI Compressor）压缩之后更小。[参见 jquery-plugins.js]

eval(function(p,a,c,k,e,d)...

使用Packer的决定不像是一个深入了解GZIP或者文本压缩技术的人做出的。压缩之前的文件确实变小了，然而这导致了最终需要被下载的文件变大了。[http://dean.edwards.name/packer/]

whitehouse.gov大小821 KB，在我的线路上（cable modem）使用了1.58秒完成加载。这个数字大约是新的、基于图片的网站的平均值。

加载时间:  1.58 seconds
总计大小:  821 KB

whitehouse.gov网站包含了几个隐藏链接. 在源文件里，大部分是在JavaScript中，大约嵌入了6个链接。这样，这些幸运的人就得到了来自白宫网站的外链（译者注：PageRank 9啊！9！）。

www.youngpup.net

http://sorgalla.com/jcarousel/

http://billwscott.com/carousel/

http://www.codylindley.com

whitehouse.gov网站使用了一个不透明的favicon.ico. 为了站点在加入书签后具有更好的视觉效果（译者注：对很多非IE浏览器而言，无论是否加入书签，favicon文件都会显示在标签栏），一个具有透明背景的favicon是更好的选择。这项改变对于一个知道怎么修改的人来说可以在10分钟内完成。

结论是，whitehouse.gov网站还是很吸引人的。虽然它并不算是一个非常有效率的站点，并且过多地注意了视觉效果。一个网站优化专家可以在几天之内将它的加载速度提升到现在的两倍。

最后，记住本届政府和奥巴马总统并不是写这些代码的人。

翻译自：http://dotnetperls.com/Content/whitehouse-gov-Site.aspx

符合标准的TreeView实现(Div+CSS+JS+ASP.NET)

nocoo — Thu, 15 Jan 2009 01:02:46 +0000

这几天有点小活，要求是ASP.NET的，虽然我不怎么看好ASP.NET，但是人家要求了我也就照做吧。
最复杂的部分是一个TreeView。出于兼容性和简单性考虑没有用ASP.NET的TreeView控件，而是参考一篇文章自行写了一个出来。

[singlepic=18460]

技术指标如下：

实现：Div+CSS+JavaScript+ASP.NET(C#)
功能：可以实现无限级的TreeNode
标准：在IE 7和Firefox 3.1下显示效果相同，兼容XHTML 1.0 Strict最严格的网页标准

效果如左图所示。最后一个函数可能会因为超宽看不到全部，具体请参照文章附件中的源代码。
附件下载：http://download.nocoo.us/Download/Archive/TreeViewCode.rar

TreeNode.cs

/// 
/// TreeView结点类
/// 
public class TreeNode
{
    private string name;
    private string href;
    private List subNodes = new List();

    /// 
    /// 结点名
    /// 
    public string Name { get { return name; } }
    /// 
    /// 结点链接
    /// 
    public string Href { get { return href; } }
    /// 
    /// 下级结点个数
    /// 
    public int Count { get { return this.subNodes.Count; } }
    /// 
    /// 获取或者设置下级结点
    /// 
    /// 序号
    /// 下级结点
    public TreeNode this[int index]
    {
        get { return subNodes[index]; }
        set { subNodes[index] = value; }
    }

    /// 
    /// 构造函数
    /// 
    /// 结点名
    public TreeNode(string name)
    {
        this.name = name;
        this.href = null;
    }

    /// 
    /// 构造函数
    /// 
    /// 结点名
    /// /// 结点链接
    public TreeNode(string name, string href)
    {
        this.name = name;
        this.href = href;
    }

    /// 
    /// 添加下级结点
    /// 
    /// 新结点
    public void Add(TreeNode node)
    {
        subNodes.Add(node);
    }
}

TreeView.cs

/// 
/// TreeView
/// 
public class TreeView
{
    private List nodes = new List();

    /// 
    /// 填充测试用数据
    /// 
    public void FillTestData()
    {
        TreeNode node1 = new TreeNode("中国", "#");
        TreeNode node11 = new TreeNode("华北地区", "#");
        TreeNode node111 = new TreeNode("河南省", "#");
        TreeNode node112 = new TreeNode("河北省", "#");
        TreeNode node113 = new TreeNode("山东省", "#");
        TreeNode node1131 = new TreeNode("青岛市", "#");
        TreeNode node1132 = new TreeNode("济南市", "#");
        TreeNode node11321 = new TreeNode("市中区", "#");
        TreeNode node11322 = new TreeNode("历下区", "#");
        TreeNode node11323 = new TreeNode("槐荫区", "#");
        TreeNode node11324 = new TreeNode("天桥区", "#");
        TreeNode node11325 = new TreeNode("长清区", "#");
        TreeNode node1133 = new TreeNode("菏泽市", "#");
        TreeNode node1134 = new TreeNode("济宁市", "#");
        TreeNode node1135 = new TreeNode("德州市", "#");
        TreeNode node12 = new TreeNode("东北地区", "#");
        TreeNode node13 = new TreeNode("西北地区", "#");
        TreeNode node14 = new TreeNode("华东地区", "#");
        TreeNode node15 = new TreeNode("西南地区", "#");
        TreeNode node16 = new TreeNode("华南地区", "#");
        TreeNode node17 = new TreeNode("华中地区", "#");
        TreeNode node18 = new TreeNode("港澳台地区", "#");

        node1132.Add(node11321);
        node1132.Add(node11322);
        node1132.Add(node11323);
        node1132.Add(node11324);
        node1132.Add(node11325);

        node113.Add(node1131);
        node113.Add(node1132);
        node113.Add(node1133);
        node113.Add(node1134);
        node113.Add(node1135);

        node11.Add(node111);
        node11.Add(node112);
        node11.Add(node113);

        node1.Add(node11);
        node1.Add(node12);
        node1.Add(node13);
        node1.Add(node14);
        node1.Add(node15);
        node1.Add(node16);
        node1.Add(node17);
        node1.Add(node18);

        nodes.Add(node1);
        nodes.Add(new TreeNode("俄罗斯", ""));
        nodes.Add(new TreeNode("美国"));
        nodes.Add(new TreeNode("韩国"));
        nodes.Add(new TreeNode("澳大利亚"));
        nodes.Add(new TreeNode("印度", ""));
        nodes.Add(new TreeNode("加拿大", ""));
    }

    /// 
    /// 获取TreeView的html代码
    /// 
    /// 
    public string GetHtmlString()
    {
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("");
        for (int i = 0; i < nodes.Count; i++)
        {
            sb.AppendLine(GetNodeHtml(nodes[i], 1, (i + 1).ToString()));
        }
        sb.AppendLine("");
        return sb.ToString();
    }

    private string GetNodeHtml(TreeNode thisNode, int depth, string id)
    {
        StringBuilder sb = new StringBuilder();
        bool hasSub = (thisNode.Count > 0) ? true : false;
        sb.AppendLine(string.Format("", depth, id));
        sb.AppendLine(string.Format(
            "
{3}",
            hasSub ? "closedir" : "nodir",
            depth,
            id,
            (thisNode.Href == null || thisNode.Href.Equals("")) ? thisNode.Name : string.Format("{1}", thisNode.Href, thisNode.Name)
            ));
        if (hasSub)
        {
            sb.AppendLine(string.Format("", depth, id));
            sb.AppendLine("");
            for (int i = 0; i < thisNode.Count; i++)
            {
                sb.AppendLine(GetNodeHtml(thisNode[i], depth + 1, string.Format("{0}_{1}", id, i + 1)));
            }
            sb.AppendLine("");
            sb.AppendLine("");
        }
        sb.AppendLine("");
        return sb.ToString();
    }
}

ASP.NET页面调用：

<%
    CMC.TreeView list = new CMC.TreeView();
    list.FillTestData();
    Response.Write(list.GetHtmlString());
%>

ASP.NET页面JavaScript：

defaultNodeState();

function defaultNodeState()
{
	var nodeState = getCookie("nodeState");
	if(nodeState == null)
	{
	    nodeState = ",|,|,";
		setCookie("nodeState",nodeState);
	}
	var layer = nodeState.split('|');
	for(var i=0;i

观察：Firefox Vs. Nvidia

nocoo — Tue, 13 Jan 2009 06:26:17 +0000

火狐，你大概知道~
英伟达呢？第一印象会是个沿海服装或者皮鞋厂吧…
Anyway，英特尔之后大家都喜欢给自己起个中文名，尤其是在中国设立研发机构的公司都迫不及待地起个中文名以便与总部划清界限（没错，说的就是谷歌）。
Firefox和Nvidia看起来好像是完全不相干的两个公司嘛。其实不然，总感觉这两个公司的产品现在越来越有着相似的一面。
哗哗哗时间过去三五年当云计算成真，当我们的个人终端已经不需要所谓的主机而变成一个屏幕的时候，当网线和电线早就集成在一起，要上网只要插电源的时候，Google所谓网络操作系统（其实就是Google Chrome或者其他浏览器，比如Firefox）大行其道的时候，当我们的所有东西都运行在说不清楚在什么地方的服务器的时候，Firefox就取代了Nvidia，接下了为用户渲染呈现视觉效果的重任。
我们还是看看现在的JavaScript已经强大到了什么地步吧！

2D

[singlepic=18425]

JavaScript Super Mario Bros.
没错，JavaScript版的马里奥兄弟。也许你还记得，天朝的JavaScript开发者早就推出了网页版仙剑。

[singlepic=18427,600,425]

JSLab Plot Tool
JavaScript版Matlab。

“3D”

[singlepic=18424]

http://processing.org/learning/3d/
3D的JavaScript库

[singlepic=18426]

10款让你震撼的图片展示js代码
Apple Cover Flow效果的JavaScript实现，这似乎已经不算是什么了。

猜一下吧，以下的哪一个会成为几年之后的Nvidia？

InScript
JavaScriptCore — a JavaScript interpreter that was originally derived from KJS. Used in the WebKit project and applications such as Safari.
JScript — the engine used in Internet Explorer, and one component of Trident (layout engine)
KJS — the engine used in Konqueror, and one component of KHTML
futhark — the ECMAScript engine of the Opera web browser versions 9.50 and higher.
linear_b — the ECMAScript engine of the Opera web browser versions 7.0 to 9.50, exclusive.
Narcissus — JavaScript implemented in JavaScript, used on top of SpiderMonkey
QtScript
Rhino — one of several JavaScript engines from Mozilla, using the Java Platform
SpiderMonkey — JavaScript engine in Mozilla Gecko applications, including Firefox

The following ones are the new generation JavaScript engines for web browsers, all implementing just-in-time compilation (JIT) or variations of that idea:

Tamarin — an ActionScript and ECMAScript JIT engine.
TraceMonkey — evolution of SpiderMonkey, the JavaScript engine planned for Firefox 3.1, also partially based on Tamarin.
V8 — JavaScript engine in Google Chrome
SquirrelFish — the next JavaScript engine for Apple Inc.‘s Webkit.

个人简历页面更新

nocoo — Wed, 15 Oct 2008 06:13:29 +0000

WordPress有多好多强大？WordPress可以用完全自定义的HTML页面来呈现内容，你只需要遵循那么一点点规矩，放到合适的位置即可。
长久以来，我都被个人简历页面里面杂乱无章的呈现方式纠结不已，无奈实在没什么好办法，最多用ul去简单组织那么一下下，效果还是远远不够的。
自从HTML感悟了之后，其实就是昨天晚上，决心重整个人简历页面，毕竟那是脸面啊。
经过近乎一整天的编写，算是写了个我比较满意的页面出来。当然，XHTML 1.0 Strict。
很多人问我写HTML的时候用什么工具，其实就是普通字处理软件，Notepad，UltraEdit，最多Visual Studio 2008而已。下面那棵树，是我第一次用AI做出来的东西哦~

恬不知耻QZone

nocoo — Mon, 06 Oct 2008 01:08:37 +0000

我从来不用QZone，也从来不觉得用QZone的人有多么明智，因为QZone是我见过最囧的博客程序。在我心目中，只有90后脑残的人们，和中科院的院士，才是QZone的用户。
今天QQ上提示有两个QZone提示消息，不把提示消灭成0我不甘心，终于点进去了。
第一囧，QZone居然在Firefox里成功打开，让我有了一丝好感，不错，有进步，要知道以前用Firefox开QZone总是进入一个RSS Feed的地方，很怪。
第二囧，我在右上角发现这个：

[singlepic=18061]

恬不知耻的腾讯向我示威：“您打开空间所用时间仅为3.966秒，速度相当快喔！”
我终于出离愤怒，关掉QZone，站起身来，终于明白为什么挂牌的人会指定一个条件：毕业后打算去腾讯的不要。

自助美工

nocoo — Sun, 05 Oct 2008 06:13:16 +0000

给大家推荐两个关注网页配色的网站吧~

FYI. 那日抓狂，枕头(AKA Rainsuds, AKA 夏至雨水)同学给了我两个网站…

[singlepic=18066,670,604]

DARK: http://www.dark-i.com/

[singlepic=18067,670,604]

ColourLovers: http://www.colourlovers.com/

观察：危机公关之SEO

nocoo — Sun, 21 Sep 2008 02:04:42 +0000

先看一个截图吧：

[singlepic=17754]

这是新浪某新闻页面的一个源代码截图，网页在这里：http://news.sina.com.cn/c/2008-09-19/095016318920.shtml。其中，伊利明显带有了危机公关的意味，每个关键字伊利两个字之间被人为地加上了这个理论上不合规范的注释符号。FYI. 合法的HTML注释应当是类似这个样子：，且注释内容部分不能再包含”-”连字符号。但是因为浏览器会拼命纠正错误的HTML语法，的写法会让浏览器认为这是个注释，只是不合法，因此，”伊利”HTML串被解析成”伊利”，看起来和不加没有区别。

但是对于搜索引擎而言则不是这样子。搜索引擎是Web标准的重要获益者，基本都是按照标准去实现，”伊利”这样的字符串会被认为都是正文，自然不会匹配关键字”伊利“，这样，这个发表在核心新闻网站的负面文章，就和伊利没有了关系。