人人网招聘 前端架构师、Javascript开发工程师

fed-job

阅读这个条目剩下部分 »

标签: , ,           评论: 16条
火狐下flash重新加载的bug的解决方法

做项目的时候遇到一个bug,firefox下一个弹层会引起flash重新加载,而其他浏览器就没有这样的bug。

过程是这样的:

DOM ready的时候我在页面嵌入了flash,flash初始化完成,然后开始执行,这时用户触发了一个弹窗操作将 body的overflow设置为了hidden,这时flash重新加载了,flash正在进行的进程被打断,和flash交互的js开始报错。

猜想可能是用户触发的弹层覆盖了flash,我试着改变 flash的 position 来移动flash 位置,比如移出可视区域,这时有的版本的火狐flash初始化都不执行了,可以初始化的版本一样存在flash重新加载的bug。接着我试着修改z-index,使flash不被覆盖,结果都是没有解决问题。

既然在本页面不可以,触发了页面reflow,我试着将在页面嵌入一个iframe,iframe再嵌入flash,但火狐下竟然也会触发iframe内的flash重新加载,再次失败。
阅读这个条目剩下部分 »

标签: ,           评论: 2条
Packer,你对我的JS做了什么!

Packer,你对我的JS做了什么!

最近在看JQuery作者John Resig写的Pro JavaScript Techniques,虽说书是06年的,但是其中很多内容拿到现在的JS开发中来也依然适用。

其中说到源代码压缩方面,jsMin只是简单的去除注释和空白字符,JS大牛Dean Edwards写的Packer,压缩率很高,但是压缩完以后的代码不好阅读,看到这里,我很想知道Packer压缩完以后的代码到底成什么样了,于是稍微使用了一下Packer。

以下是压缩前的一段源代码:

//注释:很简单的一段代码,利用原型链实现了简单的继承

var A = function() {};

A.prototype.key = 1;

var B = function() {};

B.prototype = new A();

var b = new B();

console.log(b.key); // 1

Packer官方网站(http://dean.edwards.name/packer/)中提供了两种压缩方式,一种是Shrink variables(常规压缩~~),另一种是Base62 encode(比较变态的压缩~~)。利用Shrink variables进行压缩,得到的结果是:

var A=function(){};A.prototype.key=1;var B=function(){};B.prototype=new A();var b=new B();console.log(b.key);

看上去是简单的清理了一下注释、空格等内容。

利用Base62 encode进行压缩,得到的结果看起来有点费劲:

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’\\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c]);return p}(’0 2=4(){};2.5.6=1;0 3=4(){};3.5=7 2();0 8=7 3();a.9(8.6);’,11,11,’var||A|B|function|prototype|key|new|b|log|console’.split(‘|’),0,{}))

确实不太好阅读!为了搞清楚压缩以后的这一段代码到底是干什么的,我把代码格式化了一下,再加上了部分注释,并没有对功能性代码进行任何调整,得到的代码是:

阅读这个条目剩下部分 »

标签: , ,           评论: 6条
人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、FormData)

人人网首页拖拽上传详解

  早在公元2011年6月3日傍晚,人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦,Sorry, 是拖拽上传。本文将重点介绍实现拖拽上传的几个HTML5技术:Drag&DropFileReader APIFormData

阅读这个条目剩下部分 »

标签: ,           评论: 10条
web页面入门

css_q副本

开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有。确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量,也不是人人都能做好的。页面结构好坏直接会影响到css代码的质量,也会影响js和后台的开发,还会影响到以后功能的扩展和代码的优化。

前端页面的工作很琐碎,需要的不仅是基础知识的扎实,知识面的广泛,很重要的一点还要细心。下面我们就讲讲页面开发,开发中需要事项和常遇到的问题吧。 阅读这个条目剩下部分 »

标签: , ,           评论: 6条
如何打包字体为swf文件,然后在Flex中使用

如何打包字体为swf文件

网上打包字体为swf文件的文章很多,不过看起来感觉比较乱。近期有个工程要用到嵌入字体,所以自己参照网上的方法研究了一下,整理出一套打包的方法。
阅读这个条目剩下部分 »

标签: , ,           评论: 4条
产品经理与交互设计师的对话——需求是如何变成产品原型的

20100728

在一个互联网公司的工作流程中,产品经理(主要指偏向产品设计的产品人员)和交互设计师是这个流水线上最起点的环节,也是关系最暧昧的两个环节。说其暧昧,是因为在很多互联网公司里面,这两个环节所做的事情是有重合的,这就意味着,他们或许也是整个流程中合作最紧密的两个环节。

相对比之下,产品经理更关注的是产品的内部逻辑、操作流程、策略等;而交互设计师更关注的是产品的易用性、流畅度和操作感受。总的来看,似乎可以认为,产品经理是从一个更加宏观的角度去设计产品,而交互设计师,则是从更多的细节出发,去提升用户体验。这两种不同的视角决定了只有产品经理和交互设计师密切配合,深入沟通,才能够最高效最合理的将产品策略转化为产品原型,从而为流水线的后面环节提供精确的参考资料。

下面以人人网广告平台的一些产品和交互细节为例,使用对话的形式来分享一下我个人在做交互设计过程中的一些体会和想法。入门级文章,高手请绕行。 阅读这个条目剩下部分 »

标签: , ,           评论: 77条
人人网FED团队搜狗拼音输入法皮肤

fed-input

请先安装搜狗拼音输入法。下载地址: http://pinyin.sogou.com/

然后,下载skin文件,双击即可自动安装。 http://fed.renren.com/wp-content/uploads/2010/07/fed.ssf

测试版。时间仓促。各种bug请大家提出~

标签: ,           评论: 13条
解放你的浏览器

dimu-20100104
在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化。

为什么会出现这种情况呢,我们先来看一下浏览器的内核处理方式:
阅读这个条目剩下部分 »

标签: ,           评论: 23条
体验更强大、更畅快的人人网,请升级您的IE6。


IE6(Internet Explorer 6)是微软在2001年发布的一款浏览器,由于同年捆绑了IE6的Windows XP发布并流行,这么多年来一直还是广大人人网用户的首选浏览器,从我们的统计数据中来看,现在有60%以上的 用户在使用IE6浏览器访问人人网。

然而,IE6已经是一款有着9年历史的浏览器了,虽然它很简单方便,但这9年互联网已经有了翻天覆地的变化,IE6早已无法适应现在互联网中越 来越 复杂强大的应用,怪异的渲染引擎、低级的功能、漏洞百出的安全性已经让IE6完全失去了与其他现代浏览器竞争的条件。

截止2009年5月,IE浏览器在欧洲的市场占有率已经低至40%,不及Firefox的47%,IE6更是仅存14.5%的市场占有率。 Firefox、Safari、Chrome、Opera等浏览器流行程度持续上升,众多网站宣布放弃对IE6浏览器的支持,很多抵制IE6的活动也在全 球各地开展开来。在各种现代浏览器的围追堵截和众多网站的强烈声讨中,IE6已经在欧洲慢慢退出了历史舞台。

阅读这个条目剩下部分 »

标签: , ,           评论: 27条