[上海]携程前端开发团队招聘信息

时间:2011年07月29日作者:愚人码头查看次数:2,685 views评论次数:2

携程前端团队招聘以下职位:js前端设计师js资深前端设计师网站重构设计师资深网站重构设计师资深视觉设计师

js前端设计师

  • 专科以上学历
  • 对前端开发有激情和兴趣,喜欢钻研
  • 有团队合作经验,具备较好的沟通能力
  • 需附带作品链接
必要技能:
  • 能熟练手写JS代码;
  • 能保证代码的高效执行,有数据结构基础;
  • 能保证js代码的浏览器兼容性;
  • 熟悉css,以及xhtml;
  • 富有创造力,用不凡的创意和灵感提升界面操作效率,改善界面可用性;
优先考虑:
  • 有jsframework书写经验者优先;
  • 有php基础优先;
  • 有mysql或mssql基础优先;
  • 有cs端开发经验优先;
  • 了解一种jsframework(jquery,prototype等);
  • .net界面控件编写;
  • ajax或者其它dhtml技术;
  • css3.0, xhtml2, xml, dom level3,javascript1.7;
  • 表现形式和数据结构分离的原理,mvc架构和各种层次分离结构;
  • metaprogramming或函数化编程; 继续阅读:[上海]携程前端开发团队招聘信息»
标签:分类:前端招聘

[杭州]StarNavig创业团队招募前端开发

时间:2011年07月27日作者:愚人码头查看次数:4,229 views评论次数:2

[杭州]StarNavig创业团队招募前端开发

我们是一个创业团队;

我们没有明星队员;

我们没有眩目的履历和光环;

我们没有指点江山的专家和颐指气使的BOSS;

我们有一个明确的目标;

我们富有激情;

我们是一群富有实干精神的偏执狂;

我们有一个不错的机会和相对丰厚的待遇;

我们还缺像你一样肯扎实干的优秀人才;

我们期待你的加入!

[职位说明]

要求:熟练掌握JavaScript、HTML、CSS、Ajax,熟悉HTML5、jQuery框架者优先。

薪资:面议(包吃住)

[联系方式]
Tel:    0571-89053575  或者 15358850983

Email: webmaster[a]starnavig.com (可投递作品)

 

Tip中小三角的实现

时间:2011年07月26日作者:愚人码头查看次数:5,493 views评论次数:21

前段时间专门研究了一下腾讯微博的Tip,很有意思!tip中的小箭头是用“◆”(encode为:◆)字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是:比如tip有border时,也可以用两个绝对定位的“◆”字符模拟。如图:

注意:最好根据您的实际情况设置“◆”的字体,我这里用了宋体,有棱有角真好!

demo页面:http://www.css88.com/demo/tipbox/

北京清图杰运软件技术有限公司招聘前端开发工程师

时间:2011年07月25日作者:愚人码头查看次数:2,304 views评论次数:1

公司简介:城市交通信息相关产品(包括网站)开发。为全国各大城市提供交通路况、实时分析软件产品

岗位职责:从事交通信息Web产品及本公司网站的研发

任职要求:

1. 两年以上html+css+js开发经验,深入理解html、css、js、ajax

2. 熟练掌握jquery等js库的其中一项

3. 掌握photoshop基本用法

4. 大专以上学历

优先考虑:

1. 有网站作品,设计感好

2. 有技术洁癖或伪技术洁癖

3. 喜欢整洁代码,喜欢用文本编写程序

4. 喜欢研究Web相关开发知识

待遇:年新8w+,多少视能力而定。

简历发至:job@tsnav.cn 标题注明“应聘Web前端开发工程师”

工作地点:北京市朝阳区 北辰融富中心B座2507 (距离天通苑、北苑、回龙观比较近)

交通方式:城铁5号线北苑路北站,快3天乐园小区站,758、751、803、836北苑北站

标签:分类:前端招聘

HTML5和CSS3特性检测-Modernizr

时间:2011年07月18日作者:愚人码头查看次数:3,327 views评论次数:2

HTML5和CSS3逐渐成为WEB前端开发的必须技能,开发过程中检查不同浏览器对HTML5和CSS3支持情况成了是一件非常烦心的事情。

比如我们要检查某个浏览器是否支持canvas元素:


function SUP_canvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};

是否支持WebGL:


function SUP_webgl() {
return !!window.WebGLRenderingContext;
};

还有很多html5和css3其他属性…,值得庆幸的是我们发现了Modernizr开源Javascript库

Modernizr是一个用来检测浏览器是否支持HTML5以及CSS3特性的基于MIT证书的开源Javascript库。Modernizr的功能其实很简单,就是用js检测浏览器对HTML5/CSS3的特性支持情况,支持某个属性,就在页面的标 签上添加一个相应的class,不支持的话就添加一个no-前缀的class,比如,如果检测的浏览器支持video标签,MODERNIZR就会 在标签上添加video类,否则,添加no-video类。

最新的Modernizr是2.0.6版本的,如果你下载开发(development)版本,给我们提供全部的内容,如果要下载production版本的modernizr,我们会发现,我们可以根据自己的需要进行订制。在其下载页面上,我们选择自己所需的HTML和CSS特性,然后生成一个javascript文件。这么做会极大程度上减少冗余代码,减少不必要的检测,对web前端这个很看重用户体验的地方,性能就是一点一点压出来的。

使用Modernizr也非常简单,只要而且必须在标签里应用就可以了,无需调用Modernizr_init()之类的初始化方法。modernizr必须放在里,最好放在css声明之后,因为HTML5 Shiv(用以在IE中启用HTML元素)必须在之前执行,而且要使用modernizr添加的class,需要阻止FOUC。还有一点在于html声明里的no-js的class。它设置了一个默认状态,如果页面禁用了javascript我们就可以知道了。

用调试工具我们看到在html标签里加了很多样式类,从这些样式类里我们可以完全看出您使用的浏览器对HTML5和CSS3支持情况,以“no-”开头的,就是这个浏览器不支持的特性:

知道了这些特性的支持情况我们就可以使用css选择器做一些表现上的差异,比如,如果不支持标签,那么test类文本为红色。
.canvas .test {
color: blue;
}

.canvas .test {
color: red;
}

同样,我们也可以在JavaScript利用这些特性检测的结果,代码:


if(Modernizr.canvas){
//开始画图啦!

}else{
alert("fuck!");
}

Modernizr 2还提供了一种load机制,方便代码管理,比如:


Modernizr.load({
test: Modernizr.canvas,//检查是否支持标签及相应的属性
yep : 'canvas.js',//如果支持标签及相应的属性那么加载canvas.js,
nope: 'no-canvas.js'//如果不支持标签及相应的属性那么加载no-canvas.js,
});

如果直接用的是development版本的modernizr,你会发现,根本就没有Modernizr.load,因为它是作为一个单独文件发布的:yepnope.js。而在production版本,我们选择将其包含在modernizr里。

官方网址:http://www.modernizr.com/

标签:,分类:html5+css3, JS

用In.js颗粒化管理、加载你的Javascript模块

时间:2011年07月17日作者:郭凯查看次数:3,949 views评论次数:7

近一年来,国内外都十分热衷于异步加载的研究,为了加快页面的载入速度,无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。

In.js Logo

国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用。

优点:

  • 按需加载
  • 无阻塞加载
  • 依赖关系管理
  • 颗粒化模块管理

如何使用?

A.引入In.js


<script type="text/javascript" src="in.js" autoload="true" core="jquery.min.js"></script>

只需要在页面顶部引入in.js即可,这里有两个参数需要注意:

autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false}
core: 底层核心库的路径 – {可选参数 – url}

如果同时设置了core,并且autoload=true,则在引入In.js的同时加载core到页面中。

B.声明各个模块的地址和依赖关系In.add(name,{config})


In.add('mod-a',{path:'mods/a.js',type:'js',charset:'utf-8'});
In.add('mod-b',{path:'mods/b.js',type:'js',charset:'utf-8',rely:['mod-b-css']});
In.add('mod-b-css',{path:'mods/b.css',type:'css',charset:'utf-8',rely:['mod-a']});

上述代码声明了三个模块的依赖关系和模块的地址,并将它们加入到队列中去(仅仅是加入队列,并没有加载到页面中去)。

C.加载队列In(queue)


var demo=In('mod-b',function() {
	//do something
},function() {
	//do something
	return false;
});

加载mod-b模块,加载完后执行functionA和functionB,在此假设引入in.js时设置了autoload=true,那么队列中的加载顺序依次为:


jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()

队列全部加载完成后,demo会被赋值为一个数组,其中存放的是每个function的返回值:


demo={returns:[undefined,false],complete:true}

D.在domReady之后加载队列In.ready(queue)


In.ready('mod-b',function() {
	//do something
});

队列加载顺序:


jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()

In.ready()和In()的区别在于两点:

  1. In.ready()中的队列只有在domReady之后才会执行
  2. In.ready()没有返回值

E.监听变量变化,值改变则执行回调In.watch(object,property,function(prop,old,new) {})

由于In加载的队列均为异步非阻塞式加载,所以有时候为了特殊需求(比如后续的操作依赖队列中function的返回值),我们需要在确保队列执行完成后,再执行后续操作。这种情况下,可以用In.watch()监听return.complete变量,当return.complete==true的时候执行回调函数,代码如下:


var model=In('model',function() {
	//do something
	return 123;
});
In.watch(model,'complete',function(prop,old,new) {
	if(model[prop]==true) {
		console.log(model.returns[0]);//print 123
		In.unwatch(model,prop);//destroy the watch event of model.complete
	}
});

————————-华丽的分割线————————-

In的魅力远远不止上述这些,它的可靠性也已经在几个大项目中得到了印证,除此之外,In也有智能的提示,比如如果用In()加载一个事先未声明的模块,就会提示你检查模块名。真心的希望有更多的前端朋友关注In,使用In,甚至投入到In的后续开发中来。

下图是In.js的英文版使用图册

In.js Manual

在哪下载?

In.js是一个开源的项目,你可以在下边的地址找到它的源代码或者下载它使用。

http://project.benben.cc/In
http://github.com/PaulGuo/In

关于作者

Author: Guokai (腾讯微博 / Twitter / Google+ / Blog
Email/Gtalk: badkaikai@gmail.com

分类:JS

[4-8K]北京鼎盛天下科技开发有限公司招聘前端工程师及.net工程师

时间:2011年07月13日作者:愚人码头查看次数:2,718 views评论次数:0

web前端工程师
工作地点:北京

工作经验:3-5年

招聘人数:5人

职位月薪:4001-8000元/月

任务:开发本公司旗下网站基于web应用平台
岗位要求:
1、大专以上学历,2年工作经验;
2、能把握网站整体架构和网站风格,理解公司企业文化并深入了解网站,能够将自己融入到网站中,不断发掘并创新、完善;
3、利用(X)HTML/CSS/JavaScript/DOM等各种Web技术进行网站/产品的界面开发。

职位描述:
1、熟练使用Photoshop/fireworks等设计软件进行切图。
2、精通各种Web前端技术,掌握XHTML/CSS/JavaScript代码,兼容主流浏览器,有相关经验;
3、高度的责任感,勤奋敬业、能吃苦耐劳;做事极积主动、认真细心;工作效率高。有较好的团队合作意识,能承受工作压力。
4、有设计作品优先考虑。
应聘者需提供相关网页(html,css)作品。

本职位提供行业突出的工资待遇和股票期权。

****************************************************************************

asp.net程序工程师
工作地点:北京

工作经验:3-5年

招聘人数:5人

职位月薪:4001-8000元/月

悉.NET环境下开发各种类型网站。了解ASP.NET MVC2,能独立开发网站
必备技术知识:XHTML,CSS,Ajax, Javascript, Jquery, C#,MSSQL2005
会熟练使用Silverlight的优先。了解CSS3 和HTML5优先

任务:开发本公司旗下网站基于web应用平台
岗位职责:
1、所有开发类项目的设计、开发;
2、线上系统代码级维护;
3、书写数据库设计文档;
4、书写详细设计文档;
5、设计重构、性能优化;
6、提供技术支持、技术咨询服务。
任职要求:
1、熟练运用微软C#语言,熟悉ASP.Net网站或应用程序开发平台和编程工具,JAVASCRIPT/C#等;
2、熟悉微软SQL SERVER平台,有相应的数据库环境开发工作经验;
3、熟悉一般熟悉网站运营流程、有大型网站、MIS及电子商务系统开发经验者优先;
4、较强的沟通和学习能力,能够胜任有压力的工作。

****************************************************************************

北京鼎盛天下科技开发有限公司

公司网址:http://www.jituan.net/ http://www.7551.com.cn
联系人:管小姐
电话:13240976282
传真:010-67504759
E-amil:hr@7551.com
地址:北京丰台区北甲地路10号2-26D

[10K+,北京]IBM云计算平台招聘前端开发工程师

时间:2011年07月13日作者:愚人码头查看次数:2,182 views评论次数:2

云计算是 IBM 极为重要的战略方向,也是全球几乎所有IT企业都在极力抢占的技术和市场制高点。

我们正在 IBM 中国系统与科技研发实验室(CSTL)组建一个大规模的团队,负责 IBM 基础架构云计算平台(IBM Cloud Foundation)的研发。IBM Cloud Foundation 将广泛支持 Power 服务器, X86 架构服务器,刀片服务器,存储设备和网络设备,广泛支持业界主流的虚拟化平台,帮助企业客户快速将 IT 基础设施建设成为基础架构即服务的云计算模式,提供虚拟化计算池,存储池,按需获取计算资源,按需获取存储资源,自动化快速部署,自助服务,按使用量计费,工作负载优化,高并发高可用等重要功能, 我们期待能够真正实现将计算,网络,存储变成像水和电一样的公共基础设施。

我们的团队将全面负责 IBM Foundation 的架构设计, 开发工作以及测试工作。 在后台研发的同时,我们将与IBM的售前、咨询、服务团队紧密合作,直接参与许多国内外大型企业的云计算基础架构的咨询,规划和建设。同时,我们还在和几十家国内著名的软件公司紧密合作,共同打造基于 IBM Cloud Foundation 开发云计算解决方案的生态系统,和程序员杂志 CSDN 共同建设 IBM 云计算开发社区(http://dragoncloud.csdn.net/)。基于 IBM Cloud Foundation的 CloudStarter 云计算解决方案已经在国内外数家大型电信运营商和银行投入使用。

云计算时代刚刚起步,还有大量的富有挑战的工作等待我们去完成,我们虚位以待,期待你辉煌的职业生涯与辉煌的云计算时代一起成长!

职位信息如下:
****************************************************************************
UI(Javascript) Developer for IBM Cloud Foundation

Hire No: 3-5
Level: Band 6 – Band 8

Skill Requirements:
- Good programming skills in Javascript/HTML/CSS.
- Good knowledge on Javascript Framework,such as jQuery/Ext/YUI.
- Good trouble shooting skills
- Excellent communication skills and excellent team player
- Fluent English
- Good knowledge on DOJO is big plus
- Good knowledge on Java is big plus

Other requirement
-应届毕业生计算机相关专业硕士以上学历;
-社招,计算机相关专业本科以上学历,工作2年以上;
-工作地点:北京;
起薪是10k/m;

Please send your resume to qintj@cn.ibm.com

****************************************************************************

PS.

满足条件的前端工程师还是蛮有竞争力的 这是非常非常缺人的岗位:)
而且也不会像互联网那样为上线产品通宵=。=

分类:前端招聘

jQuery判断一个元素是否为另一个元素的子元素(或者其本身)

时间:2011年07月12日作者:愚人码头查看次数:2,994 views评论次数:1

上个月研究学习了《js判断一个元素是否为另一个元素的子元素》,感觉还挺好用,但是在jQuery应用中还是有很多缺陷,比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展:


//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

使用起来也非常方便:


$(document).click(function(event){
alert($(event.target).isChildOf(".floatLayer"));
});

或者:


$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (".floatLayer"));
});

查看demo:http://www.css88.com/demo/isParent/index1.html

标签:分类:jQuery

【jQuery插件】slideImg-广告轮播,焦点图效果

时间:2011年07月11日作者:愚人码头查看次数:5,010 views评论次数:12

感谢 留痕 网友提交的bug,bug主要原因是我忽视了多个广告轮播和样式重名的问题;经简单的修改已经修复该问题。谢谢 留痕 网友。
==============华丽的分割线================
广告轮播,焦点图效果反反复复写了好几个插件,http://www.css88.com/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,http://www.css88.com/archives/2455

这次这个插件主要解决了两个问题:

1.当焦点图只有一张的时候不滚动;

2.当鼠标经过右下角图片选择的控制点上加了延时,避免在用户不经意划过这些控制点的时候切换图片。

具体插件代码:


/**
 * @author 愚人码头
 * User: feiwen
 * Date: 11-7-11
 * Time: 下午4:30
 * Settings:{
 *     speed:滚动速度
 *     timer:滚动的时间间隔
 * }
 */
(function($) {
    $.fn.slideImg = function(settings) {
        settings = jQuery.extend({
            speed: "normal",
            timer: 1000
        }, settings);
        return this.each(function() {
            $.fn.slideImg.scllor($(this), settings);
        });
    };

    $.fn.slideImg.scllor = function($this, settings) {
        var index = 0;
        var scllorer=$(".img-box li",$this);
        var size=scllorer.size();
        var slideH=scllorer.outerHeight();
        var $selItem=$("<ul></ul>",{
            "class":"flash_item",
            html:function(){
                var $selItemHTML="";
                if(size==1){
                    return;
                }else if(size>1){
                    for(var i=0;i<size ;i++){
                        i==0?$selItemHTML+='<li class="on">'+(i+1)+'':$selItemHTML+='<li class="">'+(i+1)+'</li>';
                    }
                    return  $selItemHTML;
                }
            }
        }).appendTo($this);
        var li = $(".flash_item li",$this);
        var showBox = $(".img-box",$this);
        var intervalTime=null;
        li.hover(function() {
            var that=this;
            if (intervalTime) {
                clearInterval(intervalTime);
            }
            intervalTime = setTimeout(function() {
                index = li.index(that);
                ShowAD(index);
            }, 200);
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        showBox.hover(function() {
            if (intervalTime) {
                clearInterval(intervalTime);
            }
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        function interval(){
            intervalTime = setInterval(function() {
                ShowAD(index);
                index++;
                if (index == size) {
                    index = 0;
                }
            }, settings.timer);
        }
        interval();
        var ShowAD = function(i) {
            showBox.animate({ "top": -i * slideH }, settings.speed);
            li.eq(i).addClass("on").siblings().removeClass("on");
        };
    };
})(jQuery);

demo演示地址:http://www.css88.com/demo/slide1/

标签:,,分类:jQuery
Page 5 of 7012345678910Last »