标签 前端 下的文章

你在找的正在找你——百度WED前端开发招聘

发表于 WebBuild

你是不是正在找一份前端开发方向的工作或实习机会呢?

如果回答是:“是!”。那么太有缘分了,我们也正在找你。

我们是谁?

  • 我们是WED——百度电子商务技术研发部前端开发团队。
  • 我们是专业的前端开发团队,致力于为百度电子商务产品的用户打造最佳体验。
  • 我们是年轻的技术团队,明年1月份才迎来她的第三个生日。
  • 我们是充满快乐的团队,她的官方全称是Web Engineering & Development,但更多情况我们称为:We Enjoy Days~
  • 我们是拥有很多美女、很多帅哥、很多牛人的优秀团队。

加入WED团队,你可以做这些事情:

  • 为百度最优秀的互联网产品改善用户体验
  • 让自己亲手开发的作品被亿万人使用
  • 和众多技术牛人一起钻研最新前端技术
  • 和许多优秀团队进行技术交流
  • 为Web标准和W3C做点自己能做的事儿

加入WED团队,你可以拥有这些:

  • 一边工作一边聊天、搞笑、吃零食
  • 随时表达你的想并得到关注和支持
  • 技术全面发展、辅导和长期的培养计划
  • 享受亲如兄弟姐妹的团队氛围
  • 个人自由支配的时间和发展空间
  • 得到为团队成员精心设计的有趣纪念品

加入WED团队,你可以同我们一起分享这些评价:

  • WED团队是强大专业的团队,快速响应需求,有效率有质量地完成任务
  • WED团队是无所不能的团队,看似不可能实现的交互效果,在不经意间被轻松搞定
  • WED团队是创新求变的团队,我们不时有新想法,迎接新变化,不断给新的惊喜

如果

(你决定成为国内最专业前端开发工程师
&& 你喜欢轻松愉快地工作
&&你享受团结、自由、像一个大家庭般的团队氛围)

只要你接触过这些技术中的一部分

(html/xhtml、css、页面架构和布局
|| Web标准、表现与数据分离、html语义化
|| JavaScript或ActionScript
||php、ruby、python或perl)

只要你能做到

(热爱前端开发这个事业
&& 有很好的学习能力和逻辑思维能力
&& 不错的团队意识和沟通影响力 )

那么,点击下面的链接,加入我们吧:

http://hr.baidu.com/www/job/jobDetail.action?jobId=2259

你也可以直接将你的简历发送给我

We Do The Same Thing

发表于 WebBuild

前天参加了w3ctech第六期的WEB标准化交流会,本期交流会的主题是:前端开发在研发流程中与其他岗位协作效率的提升。会上所有与会者对此话题都发表了自己的看法,也借这个机会了解了很多其他兄弟团队协作项目开发的经验。同时会上其他非前端职位的同学也发表了很多很有参考意义的看法。

随着交流会发表意见的同学越来越多,可以发现最终关键词一致性的落在了“沟通”上。崔凯通过“请吃饭”这一最明了的例子说明了良好的沟通方式可以有效解决跨团队协作中遇到的“困难”。月影在接下来两杯水的例子中用带有哲学又易懂的方式解释了如何从本质上解决跨部门协作难题,那就是我们放开各自心中的“成见”,通过换位思考再大家站到同一个视线上来看问题。如果大家还记得彪叔一专多长》的PPT的话,应该对引言中法拉利车队的故事印象深刻吧?

到场的同学都觉得前端需要和很多部门打交道,认为前端是“最累”的部门。这一点可能是因为到会者中大部分职业是前端开发的缘故。其实,每个部门都是“最累”的,我们需要与UE打交道,同样UE需要与PM与我们等部门打交道,我们需要和RD、QA、OP打交道,同样RD需要与PM与我们与QA与OP等部门打交道。每个部门都有需要协同合作的人和部门。当我们抱怨UE生气我们页面切出来与UE图相差的时候其实我们可以换位想想当RD将我们的HTML嵌套得“乱七八糟”的时候我们是多么生气的。

我相信在任何一家公司,所有部门的人都是在干同一件事情,那就是将这个项目这个产品做好,大家将自己各自杯子里的水倒干,拥有同样一份事业心将杯子叠到同样一个方向同一个目标。我们可以思考月影在会上提出的问题:你将你做的事情怎样看待?工作、职业还是事业?如果你不思考这个问题,那么工作中“被”遇到的问题将越来越多。相反,你就会知道你要做到什么程度会有成就感?什么时候要换家公司为互联网做贡献了。

这次交流会回来一直很有感想,因为自己所在的部门最近也遇到了一点事情。但是面对外界的质疑和猜想我们依旧保留那份创业心凝聚在一起,很高兴能和这样一群拥有事业心的同事并肩奋斗。

最后,以个人情感并代整个交流会组委会感谢腾讯北京公司提供的场地、茶水和礼品,感谢易联主机CEO tesion提供的奖品,感谢winterkejun分享的PPT,感谢所有到会的同学和所有关注w3ctech的同学。(p.s:特别赞扬在整个交流会中站着做记录的我们的场记吕婷MM,大家给点掌声!)

使用geolocation API定位你的访问者位置

发表于 WebBuild

今天要说一个跨省的好东西玩玩。

那就是geolocation,W3C对geolocation的解释是“defines an API that provides scripted access to geographical location information associated with the hosting device”。Firefox从3.5起就支持geolocation了,习惯赶时髦的opera也发布了一个支持geolocation的版本,几天前Chrome dev 5也正式支持geolocation了。如果你的浏览器被鄙视了也可以使用google gears的Geolocation API曲线救国来玩(关于这一点请参考JerryQu同学早一段时间写的文章)。于是记录和朋友们分享下。

如果你有兴趣可以使用上面提到的浏览器点击这里看个简单的demo

简单说下前端的实现吧,主要代码如下:

function displayPosition(position) {
    //得到两个值:position.coords.longitude(经度)、position.coords.latitude(维度)。
    /*任意鞣虐得到的经纬度信息来展示你想要的样子吧。
    */
}
navigator.geolocation.getCurrentPosition(displayPosition);


geolocation的原理就是收集你上网的终端设备的某些信息发送到特定的服务接口用来查询以获得你的地理信息,如果你是使用的是无线wifi上网的方式,发送的信息如JerryQu提到的一样,大致如下(Firefox下的抓包):

post http://www.google.com/loc/json
post_data='{"version":"1.1.0",
            "request_address":true,
            "access_token":"2:OLzIuqa-P8tZYOpu:Gu-LV8OcMFK28CVE",
            "wifi_towers":[
                {
                    "mac_address":"00-23-eb-b7-ef-70",
                    "ssid":"abc","signal_strength":-45
                },
                {
                    "mac_address":"00-23-eb-b7-ef-72",
                    "ssid":"abc_Guest","signal_strength":-48
                }
                ]
            }=';


返回的信息类似如下(可以查看我通过curl脚本模拟的数据 http://www.ivershuo.com/did/geolocation/loc.php):

{
    "location":
        {
            "latitude":40.0475799,
            "longitude":116.2947221,
            "address":{
                "country":"China",
                "country_code":"CN",
                "region":"Beijing",
                "city":"Beijing",
                "street":"Tangjialing Rd"
                },
            "accuracy":278.0
            }
        }


可以发现firefox也是使用的google的loc接口,如果你提供的access_token值为空或者是错误的在respone的时候会给你返回一个正确的access_token(该值是2周有效的)。wifi_towers包含了你的wifi信息数组用来判断你离热点们(?)的距离等信息。如果你使用的是有线上网的方式会发现传送的wifi_towers数组是空的,但是也会返回地理位置的值,应该是通过ip来返回的(因为我使用服务器脚本去请求该接口的时候返回的是服务器所在地的地理信息),所以偏差很大。现在还不知道是不是可以传送gps数据,有条件的同学可以试试在android手机上验证可以使用gps数据。

不过照前面的demo来看,就算是wifi的方式得到的位置信息还是有一定的偏差(这中间也有不同地图服务的定位信息的偏差),但是比ip获得的位置已经精确很多了。对位置信息精确度教高的web应用可以试点应用玩玩。

回到开头的那句话,大家不要担心跨省,因为浏览器在发送这个信息的时候会先要获得你的授权的。

p.s1:要使用geolocation:Firefox浏览器需要保证about:config中geo.enabled的值为true,chrome dev需要带参数“"--enable-geolocation"”启动。

p.s2:如果你也想构造数据请求google的loc接口,需要保证数据是以application/json的格式请求的。

记录IE下一个bug,label下的图片聚焦表单元素失效

发表于 WebBuild

应该有很多朋友已经发现过这个神奇的BUG,此BUG在IE5.5-IE8下通吃,就是当label中是图片元素的时候,无法通过点击该图片来激活绑定的表单元素,请用IE看这里>>

已有朋友提供使用添加元素+背景图+绝对定位遮盖的方法来解决这个问题,请看这里>>

这种办法在使用中可能比较麻烦,因为图片极大的可能性是不一样的,并且一般背景图和页面图片会存放在不同的文件夹甚至服务器上,加上设计者的权限等乱七八糟的问题,可能麻烦性更大。

还有一种方法就是可以使用js来实现,比较简单,虽然在无js支持的情况下会失效。我想的是:js都不支持的浏览器也不在乎多这点可访问性的牺牲。(接受异议)

基本代码:

<script type="text/javascript">
        var lb=document.getElementsByTagName('label');
        for (i=0;i<lb.length;i++) {
            lb[i].onclick=function () {
                var lbfor=this.getAttribute('for')?this.getAttribute('for'):this.getAttribute('HTMLfor')+'';
                document.getElementById(lbfor).click();
                document.getElementById(lbfor).focus();
            }            
        }
    </script>

可以通过这里查看>>

事件处理比较简单,你可以自己修改针对不同类型的表单元素使用switch来触发条件,对于checkbox框再来判断是否选正等,我省略了这些,就在js前加了IE判断。

两个小插曲:

  1. 在IE下使用getAttribute获得的值类型是Object,需要处理下,关于这点请参考rank的这篇文章
  2. 感谢屈屈提示在IE8以下版本的IE无法直接通过some.getAttribute('for')的方法获取到for的值,因为for是保留字,类似的还要class,需要使用HTMLfor。

再发一个Typecho主题:IVAppleWeb

发表于 WebBuild

继续发一个Typecho主题,IVAppleWeb。素材来自templateworld

IVAppleWeb

下载地址:IVAppleWeb.7z 简单的配置在setup.php文件,相关配置说明请参阅这里

下次尽量添加后台插件来实现这些配置,大家稍等一段时间,这段时间要搞毕业设计,还有两门重修(-_-!汗,以前没过),我的php又很菜,等官方出插件开发文档。

演示得等70哥帮写个插件,有喜欢这个主题并使用的朋友可以帮忙给个演示地址,谢谢!

有问题的朋友留言或者Gtalk我吧。

发布一个Typecho主题:IVLineBox

发表于 WebBuild

这段时间有很多朋友将博客程序换到Typecho了,所以关注了下这个"年轻"的博客程序,觉得很不错,所以有将博客换到Typecho的打算,于是先将这个博客的主题转换过去。

暂时将这套主题命名为:IVLineBox(IV是阿肆的"肆"的意思,:))。有喜欢这种简单线盒模型的朋友可以下载,外观演示就是和阿肆的博客一样,演示地址:http://beta.ivershuo.com。下载地址:IVLineBox

下载完成之后修改一下setup.php文件中的某些变量就可以直接定制你博客的一些个性信息,具体修改帮助如下(建议:修改之前先备份):

$page_title_before = true;

如果你的博客title需要保留Typecho默认样子,修改这里为false;如果需要像阿肆的博客这样将文章/页面/分类标题放在博客名之前保留这里为"true",并且修改/var/Widget/Archive.php文件的852行如下:(Check到最新的SVN已不再需要修改Archive.php文件,没有使用SVN更新的朋友可以到主题下载帖子下载最新的Archive.php文件)
echo implode($split, $this->_archiveTitle) . $split;

$h1Plus = '阿肆的个人博客';

将这里的文字换成你的博客需要的副标题。

$sentence = 'Yield to Nothing!';

增加一句话博客描述,可以见阿肆的博客上的表现。

$rss = 'http://feed.ivershuo.com/shuo';

你的博客RSS地址,如使用系统默认地址,将这里替换成$this->options->feedUrl();

$gtalk = 'tk=z01q6amlqj6&hellip;&hellip;&hellip;';

如果你的博客也想放置一个像阿肆的博客右边这样一个gtalk聊天按钮,将这里的字符串换成你自己的gtalk在线聊天连接代码,获取得这段字符串方法:打开这个页面,在下面的代码框找到URL地址中的"/Show?"之后及第一个"&"符号之前的所有字符串复制粘贴即可。

$twitter = 'I&#146;m ...|ivershuo|6';

如果你想将你的Twitter更新放置在博客上,竖线分隔开的三个参数分别是:显示标题、Twitter帐号名、显示最新更新数目,每项均不可以少。如不要显示清空或者注释这条。

$share = 'My Reader Share|00916762244891282327|5';

如果你要将你的Google reader分享项目显示在博客边栏,竖线分隔开的三个参数分别是:显示标题、google reader的分享id、显示分享的条目,每项均不可以少。如不要显示清空或者注释这条。google reader的分享id或者办法:打开"共享项目"页面,点击打开"向您的网站或博客添加剪辑"窗口,得到的HTML代码,第二段js的src地址中/user/和/state/之间的数字值就是这里需要的。

$links= 'links';

友情链接页面名,这里需要PageToLinks插件的支持,如没有装这个插件,请注释这条

$copyright_owner = 'ivershuo.com';

博客版权所有者。

$copyright_date = '2005-2009';

博客版权时间段

$copyright_cc =true;

是否CC版权,如cc版权显示版权信息参照阿肆的博客;如完全版权,修改为false,则显示"All Rights Reserved."

$miibeian = '湘ICP备07002569号';

备案许可证号

$gg_analytics= 'UA-258263-4';

Google统计站点id,可以在网站统计列表页面的网站名后面得到这串以"UA-"开头的字符串

$fuck_ie6= true;

将这里设置为True,如果访问者使用的是IE6及以下版本IE浏览器,则显示WebRebuild.org发起的友好升级IE提示。站在大多数网站开发者的立场,强烈建议您保留这里为true,这是您对互联网的贡献,谢谢!

以上变量均可以清空或者注释,单引号之内的值局可以清除,布尔值局均可以设置为true或者false。注意单引号之内的值不可以包含单引号,如需要使用,请用&#146;代替。

并且我将顶部的导航加入了分类导航,如不需要可以对照注释删除header.php文件中相关代码。博客字号也较原主题增大了一号。修正了原结构诸多不合理的地方。欢迎大家提意见。

还没有很认真的研究Typecho这款优秀的博客程序,主题CSS文件还有待细化,并且正在研究将这些变量集成到后台,所以主题暂时发布版本号定为0.9.0。

主题的HTML代码是可以通用的,你可以直接修改CSS代码来创造自己另外一套主题,我也会在有时间的时候再多写几套主题。