Yahoo! 新版首页前端代码浅析

写得有点晚,直奔主题。

YUI 3 神功初显

去年 11 份开始,已经有新闻:The New Yahoo! Front Page and YUI 3.0. 更小、更快、更灵活、更独立、向前兼容等等优点,不多说。从 Yahoo! 新版首页的性能来看,YUI 3 起到了不小作用。

附加 UA 信息

<html lang="en-US" dir="ltr" class="y-fp-bg ua-ff ua-ff3 ua-win  bkt701
jsenabled flash-10 flash-gt9 flash-gt8 flash-gt7 flash-gt6 flash-gt5 flash-gt4">

后台生成页面时,直接将 UA 信息添加在 html 标签上。其中 jsenabled, flash-10 等信息,是通过 js 添加的。
具体好处请参阅博文:Goodbye to CSS Hack.

960 不是神话

Yahoo! 新版首页的页面宽度为 972px. 页面结构如下:
yahoo-layout.png

其中 y-cols 下三栏的宽度为:192 + 8 | 400 + 10 | 350. 总宽度为 960. 加上最右边的 10px 和左右边框 2px, 总宽度为 972px.

栅格带来的是一种布局思想 阅读全文 »

Tags:

YUI 中 onDOMReady 的 iframe bug

好友怿飞前不久总结过:模拟兼容性的 addDOMLoadEvent 事件

需要特别注意:在 iframe 中,doScroll 方法不会抛异常。需要用 onreadystatechange 来模拟:

// from jQuery 1.3.2
// If IE event model is used
} else if ( document.attachEvent ) {
    // ensure firing before onload,
    // maybe late but safe also for iframes
    document.attachEvent("onreadystatechange", function() {
        if ( document.readyState === "complete" ) {
            // ...
        }
    });

    // If IE and not an iframe
    // continually check to see if the document is ready
    if ( document.documentElement.doScroll && window == window.top ) (function() {
        // doScroll ...
    })();
}

YUI 用户要小心:目前在 YUI 2.7 和 YUI 3.0 pb1 中,均未修复此 bug. 在 iframe 中,请尽量将 js 代码放在文件尾部以避免此问题。

在 YUI 2.8 中,该 bug 已修复:Ticket #2008289. 从 bug 被提交,到问题解决,历时一年多,囧。

Tags: , ,

鹅鹅鹅

周末去书店,给儿子买了本咬不烂的《唐诗》。
第一页是骆宾王的《咏鹅》:

鹅、鹅、鹅,
曲项向天歌。
白毛浮绿水,
红掌拨清波。

给儿子吟诵时,有些恍惚。
幼时的生活经历,如此熟悉而又陌生的令人回忆和想念。
goose.jpg

鹅是高傲的,会咬陌生人。
鹅知道感恩,会亲昵地将脖子倚在主人身上擦拭。
家禽里,鸭子最有组织纪律。
一只老母鸭,能自主带领鸭群早上出去觅食,晚上定时归宿。
还有鸡,对人的戒备心很强。

我的儿子,抱着画册里的鹅,
咿呀学语着,是那么高兴。

儿子呀,等爸爸倦了,
一定带你回真正的家。

闲悟红楼

stones.jpg
(石头记,亦寓平淡之真)

1
色和空是佛教概念。
空是万物本源,是虚幻,是真实。
色是表象,是变化,是诱惑。

空空道人易名情僧,
因空见色,由色生情,传情入色,自色悟空。

色色空空地,真真假假天。
是为红楼。
阅读全文 »

细节设计之美:扩大可操作区域

从 Google 的一个细节说起:
google-nextpage.png

整个虚线框都是“Next”的可点击区域。看似不经意,却直接提升了细节的可用性。其它页码也巧妙地和上面的字母 o 一起组成可点击区域。与百度和 Bing 的翻页相比,Google 优胜。

再来看 Twitter 的注册页面:
twitter-signup.png

很大很舒服。到了这个页面,瞎逛都会忍不住去填写填写。提示文字也恰到好处,能提供帮助,不恼人。

我喜欢 Google. 来看下 Google Docs 中的颜色选择 阅读全文 »

Page 10 of 33« First...891011122030...Last »