日志更新

如何在 IE 中使用 HTML5 元素

2009-6-13 下午 - HTML/CSS/XML/XSL - -   

Sjoerd Visscher 发现了一个简洁的 方法 让样式在 IE 中作用到未知的元素上——仅需 JS 创建此未知元素即可：

document.createElement(elementName)

同理（对于 IE 来说 HTML5 元素即是未知元素），该方法也可顺延到 HTML5 的元素上（详细见：John Resig 写的 《HTML5 Shiv》 一文）：

<html>
<head>
<style>section { color: red; }</style>
<script>document.createElement("section")</script>
</head>
<body>
<section>Hello World!</section>
</body>
</html>

在 IE 中，为了更方便使用 HTML5 元素，我们可以引入这样的脚本：

(function(){
    // from: http://dean.edwards.name/weblog/2007/03/sniff/
    if(!/*@cc_on!@*/0) return; 

    var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(',');
    for(var i = 0, len = html5.length; i < len; i++ ) {
        document.createElement(html5[i]);
    }
})();

详细具体应用的案例如下：

13 条评论 »

JavaScript 实现 Konami Code

2009-5-21 下午 - JS/Ajax/AS/Flex - -   

在 Facebook 上有一个彩蛋：

登录 facebook.com ，点击你首页的任何地方，键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后，再点击页面或滚动一下滚动条，你会发现特殊的变化（如下图），嘿嘿 ^^

Facebook 上有一个彩蛋

玩过“魂斗罗”的朋友，肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami Code，详细见图示：

Konami Code

那如何用 JavaScript 也在自己的页面上添加一个类似的彩蛋呢？

Abhi 在 《Konami Code on Facebook : How to implement it on your site》 一文中提供了大体思路：

var $ = {
    enabled: false,
    tmp: Array(),
    _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
    init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
    },
    konamiCode: function(e) {
        if(!this.enabled) {
            var t = this.tmp.pop();
            if((e.keyCode-t) == 0) {
                if(this.tmp.length == 0) {
                    this.enabled = true;
                }
            } else {
                this.init();
            }
        } else {
            this.action();
        }
    },
    // Change the action() function to whatever you want to
    action: function() {
        //alert("Konami Code Activated");
    }
}

然后在 load 的时候调用 $.init() 方法，在 keydown 的时候调用 $.konamiCode(event) 方法。

不过 Abhi 的方法还是冗余了点，Jan Jarfalk 在留言中提供了一个短小精悍的代码：

// Tweetable Konami code
var k=[];
function(e){
    k.push(e.keyCode);
    if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
        //alert("Konami Code Activated");
    }
}

PS：有兴趣的还可以在 Google Reader 上尝试下此“秘技”，一般人我还不告诉他，嘿嘿。

23 条评论 »

Douglas Crockford 确认参加第四届 D2 前端技术论坛

2009-4-13 下午 - 我的生活 - -   

好消息：D2 前端技术论坛组委会很荣幸地邀请到 Yahoo! 的资深 JavaScript 架构师、JSON、JSLint、JSMin 和ADSafe 之父 Douglas Crockford将来杭参加第四届 D2 前端技术论坛：http://crockford.com/calendar.html

如果想知道最新关于第四届 D2 前端技术论坛，请访问官方网站：www.d2forum.org 或者订阅官方的 Twitter：d2forum

Douglas Crockford 的详细介绍（节选自《JavaScript大牛：Douglas Crockford》）：

Douglas Crockford 是 JavaScript 开发社区最知名的权威，是JSON、JSLint、JSMin 和ADSafe 之父，是《JavaScript：The Good Parts》的作者。JavaScript 的发明人 Brendan Eich 说他是“Yoda of lambda programming and JavaScript（lambda 编程和 JavaScript 的精神领袖）”。他同时也服务于ECMA 的 JavaScript2.0 技术委员会（TC39）。其个人站点和 Blog 是http://www.crockford.com/ 和 http://blog.360.yahoo.com/douglascrockford。

Douglas Crockford 现在是 Yahoo 的资深 JavaScript 架构师，曾在Atari公司（视频游戏工业的领袖）开发了办公自动化系统，同时也完成了对于游戏和音乐的研究；曾任Lucasfilm（卢卡斯）电影公司技术总监；在Paramount（派拉蒙）公司任职过新媒体执行主管；在电气社区，通常为人所知的是 communities.com 的创始人兼首席执行官；他还创办了 State 软件公司并作为该公司 CTO，这也是他发现 JSON 时所在的地方。他同时也对 Blissymbolics 非常感兴趣，这是一种图形、象征性的语言，并且对 永久减肥（Permanent Weight Loss） 做过研究。

YUI 团队 2007 年底的合影，中间的长者即为 Douglas Crockford：

yui-team

33 条评论 »

影响 reflow 的因素及其优化

2009-4-13 下午 - HTML/CSS/XML/XSL - - -   

如果对于 reflow 这个概念你还不太清楚或者不知道，请先阅读：

Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中总结了导致 reflow 发生的一些因素：

  1. 调整窗口大小（Resizing the window）
  2. 改变字体（Changing the font）
  3. 增加或者移除样式表（Adding or removing a stylesheet）
  4. 内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in
    an input box）
  5. 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
  6. 操作 class 属性（Manipulating the class attribute）
  7. 脚本操作 DOM（A script manipulating the DOM）
  8. 计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
  9. 设置 style 属性的值 （Setting a property of the style attribute）

reflow 会引起开销，影响页面的性能，那如何才能做到合理的优化呢？Nicole Sullivan 也提供了部分建议：

  1. 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最里层)（Change classes on the element you wish to style (as low in the dom tree as possible)）
  2. 避免设置多项内联样式（Avoid setting multiple inline styles）
  3. 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
  4. 权衡平滑和速度（Trade smoothness for speed）
  5. 避免使用 table 布局（Avoid tables for layout）
  6. 避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)）

详细阅读：

9 条评论 »

淘宝UED招聘前端工程师

2009-4-2 下午 - 我的生活 - -   

淘宝UED团队 和 淘宝网站 一起，正在几千万会员的支持下高速发展，这种高速的发展使我们对于人才的渴求是如此的强烈。

我们最想告诉你的是——

在这里，工作早已不是我们考虑的问题，我们挥洒青春为之奋斗的，是我们的事业，一件让中国人自豪的事业！

如果你接受我们的苦和乐，如果你想战斗而不是糊口，如果你和我们的要求有那么一点像。来加入我们吧！

淘宝的工作环境：

（一）淘宝前台

淘宝前台

（二）淘宝产品技术中心

产品技术中心

（三）淘宝个人工作间

个人工作间

（四）淘宝休闲吧

休闲吧

（五）淘宝讨论区

讨论区

（六）淘宝“星光大道”

星光大道

（七）淘宝文化墙

文化墙

（八）淘宝小邮局

小邮局

==================华丽分割线===================

招聘职位：前端工程师

投递邮箱：yuanxin@taobao.com（圆心）

职位要求：

1、对 Web 充满激情，热衷于开发优秀的基于 Web 的产品；

2、性格乐观，能积极面对压力。

3、对各种 Web 前端技术（JavaScript，CSS，语义化标签 等等）有深刻理解；

4、对可用性、可访问性等相关知识有实际的了解和实践经验；

5、理解Ajax 及 RIA，并有实战经验；

6、有使用服务器端脚本开发语言开发Web应用的经验。

是的，每一个职位总是需要有职责描述和职位要求。

但如果你有着我们未列及的技能并坚信它的价值，我们同样欢迎您。最重要的，我们看重自信与勇气。

70 条评论 »

1 / 2112345678910下一页»...最后一页

最新评论

  • kaysnoopy: 您的评论正在穿越伟大的GFW…… OMG...
  • kaysnoopy: 呵呵。这个我今天在台湾的一个博客...
  • Ronecy: 好大的网页生产基...
  • 怿飞: @mr.crazy 可以的，邮件给我就可以了（...
  • mr.crazy: js框架我使用jquery和mootools这两个...
  • mr.crazy: 想试一试，我做前端才一年，之前在...
  • bolo: 为了兼容低版本的ff，还是写-moz-opacit...
  • Insen: @小林子里 for少了一个左括号...你眼...
  • 天堂左我往右: png加透明滤镜加AlphaImageLoader 一起使...
  • cjj: 唉 不知道今年还有没有机会去参...

一些国外资源

一些国内资源

管理登录