不名一格

前端工程师的工作机会

作者：idd.chiang 发布时间：July 29, 2010 分类：前端观察

到银泰网上班已经1个多月，广招团队成员也足足1个月，给我最大的提示——前端工程师这个职业真的、的确、很炙手可热；虽然没找到合适的人，但我吃了一个大大的定心丸——相比各种服务器端编程的工程师，咱不受挑剔、饱受礼遇。

前端——一个一个的小圈子，圈子之间交集如此之小，对智联等招聘站过来的信息大海捞针般筛选，合适的太少，其实要求真不高。借助自己访问量很小的博客看看朋友们有没有合适的朋友推荐，请直接把简历发到我的邮箱 jiangjibing#(@)yintai.com，从我的角度来说待遇和学习机会比某些国内C2C公司好。想了解公司的同志请点击关于银泰网

鉴于新平台业务发展需要，前端有两个方向可选择：

高级前端开发工程师

岗位职责：
负责前端页面开发和前端日常工作，具有前端架构设计的思想，并能总结并推广常用的页面组件

职位要求：
1. 精通各种Web前端技术，包括HTML/ CSS/Javascript等；
2. 深刻理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验；
3. 有基于Ajax开发经验者优先；
4. 至少熟悉一门非Web前端脚本的语言（如C++/Java/PHP），并有项目经验；
5. 乐于分享，个性乐观开朗，逻辑性强，善于和各种背景的人合作；
6. 计算机、数学、自动化等相关专业本科以上学历；
7. 有大型电子商务网站或者大型项目的相关经验。

前端开发工程师

岗位职责：
根据产品需求和设计稿件，完成符合Web标准的页面代码，并与后端工程师合作完成页面前端的交互效果；

职位要求：
1. 精通HTML、CSS，熟练手写代码；
2. 熟练使用常用JavaScript框架（如JQuery,YUI等）；
3. 熟知W3C标准，了解不同浏览器之间的差异，制作出的页面能够有很好的兼容性；
4. 个性乐观开朗，逻辑性强，善于和各种背景的人合作；
5. 学历不限，本科以上学历优先。
6. 至少2年相关WEB前端开发经验。

Google轻轻地走

作者：idd.chiang 发布时间：March 23, 2010 分类：前端观察

一直担心有一天自己的上网习惯被颠覆，Twitter上听到Google的消息说的是4月10号，这一天提前了半个月，我还措手不及。记得每天打开网页第一件事就是进入g.cn，跳转带我进入自定义的igoogle页面，今天却意外地跳转到google.com.hk，始料未及。发此图以示纪念，看来翻墙将会是我的下一项学习技能。感谢google为我提供的有用的搜索结果。可是，gmail怎么办...

经典的水平垂直居中盒子模型

作者：idd.chiang 发布时间：March 2, 2010 分类：HTML/CSS,前端观察

上一篇： CSS 垂直居中的实现 没有详细描述这种垂直居中的模型，相对垂直居中在很多时候还是很有用的。

直接查看例子： 绝对垂直水平居中

居中的盒子是相对于绝对盒子的，个人认为绝对居中这个名字比较符合它特性，这时绝对有“肯定”的意思。所以，这个CSS模型兼容性可想而知。居中的盒子必须有宽(W)高(H)，垂直居中和水平居中用到left(right)、top(bottom) 50%的偏移量，为了使盒子中心点（对角线交点），必须有溢出，这个溢出量就是盒子宽度的一半，即margin-left(margin-right) -w/2、margin-top(margin-bottom) -H/2。

css代码：

.colorbox{
	border:3px solid #2A6FA8;
	background-color:#6FA5D1;
	width:100px;
	height:100px;
	/*important*/
	position:absolute;
	top:50%;
	left:50%;
	/*Margin Overflow*/
	margin-left:-50px; /*half of width*/
	margin-top:-50px; /*half of height*/
}
.tmiddle{
	border:1px solid #586650;
	background-color:#ABB0A7;
	position:relative;
	height:300px;
}

让ie6\7浏览器完美识别HTML5标签

作者：idd.chiang 发布时间：March 2, 2010 分类：HTML/CSS,Javascript/AS,前端观察

近几年WEB前端发展日趋成熟，DIV布局已经作为前端人员的必修课，DIV+CSS可以让Web页面展现无所不能，但当DIV滥用时，各种混乱 div布局导致代码可读性极低。此时yahoo最先提倡标签语义化和classname语意命名，但HTML4.01中的标签数目比较小，对于日新月异的 web布局支持实在有限，语意到最后的结果就是，classname无数,为语意存在的各种单词、拼音、字母充斥在页面。

HTML5 w3c已经推出有很长一段时间了，新增的标签也是为了以上弊端以及新功能。下面让ie6\7识别HTML5新增标签这种方法其实是一个取巧。这种做法对于代码洁癖者是个福音，也符合渐进增强Progressive Enhancement、优雅降级（Graceful Degradation）的原则，“好奇害死猫”，往下看，也让我们尝尝鲜吧。

下面先看看HTML5标签搭建的简单博客 » HTML5 Demo
一段简单的脚本，让ie6、ie7能识别HTML5新增标签，脚本如下：

(function(){if(!/*@cc_on!@*/0)return;
	var e = "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(','),
	i=0,
	length=e.length;
	while(i<length){
		document.createElement(e[i++])
	}
})();

WEB颜色选取工具（组件）和颜色格式转换

作者：idd.chiang 发布时间：February 28, 2010 分类：HTML/CSS,Javascript/AS,前端观察

经常会使用Photoshop去取自己想要的颜色,选色还得等待PS的长时间loading，费时费力。抽空整理了两个互联网开源的颜色拾取器，加了转化、拷贝，方便使用。

1.颜色拾取器（Canvas） Color Picker 2.0

这个工具有点像illustrator里的颜色选择器，有HSV，RGB两种颜色设置，CSS3现在已经广泛支持这两种颜色属性，如：hsl(240,100%,50%) 和 rgba(255,0,100,0.8)；对于获得颜色的值，如果我们使用PS，还得打开颜色管理器，这个工具可以有效增加前端工程师颜色选择的效率。工具栏中颜色渐变条是对Canvas Dom的getContext() 方法返回线性颜色渐变的一个 CanvasGradient 对象在Canvas画布上。

2.颜色拾取器 Color Picker 1.0

两个工具都用到了一个开源颜色转换脚本 (Color_Conversion_Library)，这样我们很容易互相换算各种WEB颜色格式,第三个转换就是一个简单尝试。

直接去感受下在线颜色拾取器：在线颜色拾取器

IE7下图片缩小失真的解决办法

作者：idd.chiang 发布时间：February 24, 2010 分类：HTML/CSS,前端观察

一张大图在尺寸小于原始尺寸时，ie7下会表现的很糟糕，画面失真呈锯齿状，如下图，美女脸上起了毛刺：

别着急，强大的MS有解决方案，微软提供的私有属性 -ms-interpolation-mode，请参看：msInterpolationMode Property

Firefox在3.6版本新增了一个css属性：image-rendering，他的用途更加广泛，用于：

• * images
• * background-images of any element
• * HTML5 <video> Element
• * HTML5 <canvas> Element

image-rendering用法：

详细介绍：image-rendering

对比一下各浏览器对图片失真处理方法：

更多的测试可以到可以到MSDN 做的例子看一下效果，或者到血 統の森-web実験小屋看一下效果。