寻梦

不会当客服的杂物工不是好前端 2

不知不觉来公司已经快8个月了，刚刚来公司的时候，对公司的业务流程不太熟悉。再加上公司的前端团队也没有剩余的力量来带新人，而刚刚毕业我也不太清楚公司的开发流程。只是某一天突然给了任务过来，而且第二天就要，只好加班。更郁闷的事，由于不知道应该问谁（任务交过来的时候也没说，她就去忙自己的了），导致最后做出来的东西和需求有点不一样，于是就改，改到最后自己都想死了。当时其实蛮羡慕公司的后端开发的，至少有基本的任务布置和前辈的指导。不过现在想起来，这未尝不是一件好事。
其实在技术方面，相比于3月份刚进公司，个人并没有感觉（也可能是无形中）。但是，自己的沟通能力确实提高了不少，至少不会像当初那样什么的不会主动去问（其实是刚刚进公司太羞射了~一 一+(＞﹏＜)）。话说越是大的公司沟通就越重要，虽然理论上讲，会有人告诉你该做什么、怎么做，但实际上，很多时候大家都会有自己的事，不太可能有很多时间。所以，更多的是需要自己去沟通，否则，最后吃亏的还是自己。而且，有时候小小的抱怨是ok的，但是没事就抱怨就是自己的问题了。
另外，最近发现无论怎么样都要学会保证项目的基本的质量。以前想做“老好人”，产品经理说什么时候交页面就什么时候交。现在就“变聪明了”，会尽量主动争取一点时间。产品经理的排期一般是以自己为准，他不会因为这个页面需要更复杂的结构或者这个地方代码需要更多的优化就给你更多的时间，他给你的排期很有可能就是页面有多大或者有几个。

但是作为前端开发，应该知道，不同的页面，精细程度是不一样的。如果要安排好排期，大致需要注意以下几点：

1. 越是精细的地方花的时间更多：很多时候大块大块的div一个float就搞定了，但是很有可能一个小图标的背景图或者两个垂直方向没对齐的文字需要花很多时间
2. 一定一定要留出至少半天的排期来解决一些“突发问题”：可能是某位同事来咨询一些前端的问题；可能是前几天前几个星期或者前几个月做的项目，突然需要你改点什么；也有可能是突然来了一个星的任务。这些问题如果没解决好，一方面项目质量会大打折扣，另外一方面整个人会压力很大
3. 最重要最重要的，有什么问题一定问。话说由于性格原因，很多程序员都不喜欢交流。而像我们这种经常需要异地沟通的公司，很多时候需要用语音软件。大部分人项目压力大，有时就不愿意语音，邮件又很纠结，所以会出现很多问题。不过想想也没什么，谁让我是客服呢~╮(╯▽╰)╭

HTML5 高亮 for editPlus

话说html5的标准已经出来很久了，但是做的项目一直都没有涉及，所以编辑器的高亮也没有更新……
这今天事稍微少了点，就上网搜了下stx文件，不过搜到了都不太让人满意，索性就自己在原来的基础上加。
找到html标签列表：http://www.w3school.com.cn/html5/html5_reference.asp
提取出html5的标签：

var t=document.getElementsByTagName('td');
for(var i=0;i<t.length;i++){
    if(t[i].className.search('new')!=-1){
        console.log(t[i].firstChild.firstChild.data);
    }
}

复制到编辑器里，把<和>去掉，然后在复制到之前的css.stx里面：
#KEYWORD=HTML5 Tags
article
aside
audio
bdi
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
track
video

大功告成。

纯css评分效果制作

这几天项目有点多，所以已经慢慢学会了“异步处理问题”了。昨天还在做一个促销的cms，今天就来了个页面评价的东西。先仔细看了下设计图，发现里面有好几个地方都是同一个模块：商品评价。有两种：一种是动态评价，一种是评价结果。话说之前，公司的评价都是直接用几个img拼起来的，这样貌似是一种很老派的方法。所以我这次改的时候，就尽量用了一些css小技巧（虽然只给了我一天班的时间，而且这个评分只是其中一个很小的模块）。

ui大致就是这样：

首先是评价结果：

把背景图先切出来（此图为evaBg.png）：

html&css：

<!--一星是stars_1以此类推 -->
<span class="stars_1"></span>

 .stars_1,.stars_2,.stars_3,.stars_4,.stars_5{display:inline-block;width:125px;height:24px;background:url('evaBg.png') no-repeat 0 -30px;vertical-align:-5px;}
.stars_1{background-position:-100px -30px;}
.stars_2{background-position:-75px -30px;}
.stars_3{background-position:-50px -30px;}
.stars_4{background-position:-25px -30px;}

这种写法应该是现在比较常见的写法，很简单，两点：

1. 总宽度固定
2. 通过移动背景图的位置，来达到不同显示

图问解释：
一颗星的时候显示最左边五颗星：

两颗星的时候图片相对初始状态左移25px（25px为星星的宽度）

———————没有margin-bottom，只有我这个分割线—————————

然后就是动态评价显示了，这个结构稍微复杂一点（背景可以用之前那个，节约资源~）：

<!--一星是stars3_1，两颗的为stars3_2，以此类推 -->
<div class="proSatis"> 
	<a href="" class="star3_1"><strong>1分 - 很不满意</strong></a> <!-- 这个是一星 -->
	<a href="" class="star3_2"><strong>2分 - 不满意</strong></a> <!-- 这个是两星 -->
	<a href="" class="star3_3"><strong>3分 - 一般</strong></a>  <!-- 这个是三星 -->
	<a href="" class="star3_4"><strong>4分 - 满意</strong></a>  <!-- 这个是四星 -->
	<a href="" class="star3_5"><strong>5分 - 非常满意</strong></a> <!-- 这个是五星 -->
</div>

.proSatis{width:125px;height:24px;position:relative;}
.star3_1,.star3_2,.star3_3,.star3_4,.star3_5{position:absolute;left:0;top:0;height:24px;}
.star3_1:hover,.star3_2:hover,.star3_3:hover,.star3_4:hover,.star3_5:hover,.proSatis .select{background:url('evaBg.png') no-repeat 0 -30px;text-decoration:none;}
.star3_1{width:25px;z-index:1500}		
.star3_2{width:50px;z-index:1400}
.star3_3{width:75px;z-index:1300}
.star3_4{width:100px;z-index:1200}
.star3_5{width:125px;z-index:1100;background:url('../images/evaBg.png') no-repeat -100px -30px;}

看上去有点复杂，但是其实蛮简单的：

1. 外层设置position:relative;，为里面的标签做相对定位的参考点
2. 每个a标签设置绝对定位，同时设置z-index，星级越小，z-index越高。
3. 动态效果，主要有两点，鼠标移上去：1 a出现背景图 2 a中的文字会出现在星星旁边
4. 同时，给五星的标签设置一个初始的背景图（这样默认显示的时候会有一个一星的效果）。

好吧，没有服务器可以上传静态页面，所以效果图暂时是没有了。

总结：
话说很多效果看上去复杂，其实很简单。

不会当客服的杂物工不是好前端

Scene 1：
改完bug，提交给开发：给.abc加一个属性，line-height:18px。这是背景。
同事：那个css里面有这个属性！！！
Me：那个冒号你用的是中文，请改成半角

Scene 2：
同事：把你写的那个js加进去以后，菜单就显示不了了。
Me：那个菜单在我加之前就显示不了了，我之前就发现了，以为你在调试，所以没有提。
同事：哦

Scene 3：
同事：你上次给我那个帐号密码用不了啊，你看，我输入了没效果
Me：不会啊，我用得蛮好的，我帮你看看
………………………………
Me：这个你复制是把后面的空格也复制了
同事：哦

Scene 4：
同事：这个页面都变形了
Me：我看看
………………
Me：你把那个css加载了两次

Scene 5：
同事：这个弹出页面出问题了
………………
Me：ajax加载成功后不应该显示弹出层，而是location到一个新页面

Scene 6：
同事：页面变形了
Me：css要用utf-8编码

————–border-bottom:1px solid #000—————–
其实作为前端，很多时候遇到的问题不仅仅是页面的制作或者bug的调试，更多的是他人抛来的问题。大部分的后台开发不懂，或者只懂一点前端知识，所以他们在遇到布局出现问题的时候，第一反映一般是：页面写错了。这是情有可缘的，貌似有的公司有专门的前端技术支持，但是一般的ued团队不可能说专门招一个。so，这个时候需要自己能在处理问题时更加的有耐心。不然，整个项目可能会因为你而被拖累。
很多时候，特别是在大公司，或许更重要的不仅仅是你的能力，而是你与他人的沟通能力。
So，我要加油。不会当客服的杂物工不是好前端。

去水垢记

今天喝水的时候发现杯子里有一些漂浮物,以为杯子不干净,于是把水倒掉,顺便洗了下杯子。用水壶再到一杯后，发现还是有漂浮物。于是意识到，应该给水壶去水垢了。
像以往那样，把醋倒进水壶，然后加热。可惜醋倒少了，导致最后烧干了……更让人郁闷的是，壶底留下了醋烧干的黑垢~额的神啊~
第一反应时用清洁布和清洁球擦干净，发现不仅没擦掉，反而在壶底留下了划痕。
后来因为肚子饿了，就先去吃饭了。回来后，突然看到之前公司内卖买的白醋,索性就放进去烧,果然有用.

话说自己平时学习相关技术也是这样，有时虽然知道怎么用，但是并没有深刻的了解其中的原因，导致下次遇到类似的问题，就不知所措了。

换个角度看页面

今天突然被后台开发找，说一个页面被QA打回来了，在ie6下左右栏不对其。
我跑过去，他就给我看，说右边那栏短了：

于是我让他等下，在自己的电脑上慢慢看这个页面的dom，但是看了半天都没发现右栏有什么问题。看着看着突然想：会不会是左栏的问题。果不其然，是左栏的div尾部有个form（用来传递hidden数据），而这个form有默认的margin。
于是，问题解决了。
很不好意思的又被开发夸奖，很高兴……

最近接触的不错软件

Fiddler 利用网络重点向功能，不使用虚拟环境就可以修改线上css
linkscape 可以画SVG的图

IE CSS Hack

其中，用得最多的是_(for ie 6)和*(for ie 6&7)

关于三栏布局

话说三栏布局，最麻烦的是一栏固定，两栏自适应那种（老生常谈+蛋疼）……
现在假设有个三栏布局，要求如下:

• 其中左右固定宽度，中列自适应其余宽度

首先是html部分，可以有三种写法：

<div id="wrapper">
<div id="left">左侧栏</div>
<div id="main">
              主要内容</div>
<div id="right">右侧栏</div>
</div>

<div id="wrapper">
<div id="left">左侧栏</div>
<div id="main">
<div id="innerMain">主要内容</div>
</div>
<div id="right">右侧栏</div>
</div>

<div id="wrapper">
<div id="main">
<div id="innerMain">主要内容</div>
</div>
<div id="left">左侧栏</div>
<div id="right">右侧栏</div>
</div>

第一种书写是按照最后的显示来写的，第二种是按照少些css来写的，第三种是最符合seo的……

之后写css，这里会用到的知识点有如下：

1. 使用float可以让对象元素脱离文档流
2. block 元素默认状态下是自动扩展到父级元素的大小（大丈夫能伸能缩啊~）
3. 使用margin负值可以进行“移位”
4. 使用margin-left和margin-right正值+overflow:hidden可以让两边多出空间

第一个用到的是1，3两点，
第二三个用到的是1,3,4。

后面详细的就不写了（→_→）……
ps：
最后一种的写法

  <div style="float:left;width:100%">
	<div style="margin-left:210px;margin-right:210px">中间</div>
  </div>
  <div style="width:200px;float:left;margin-left:-100%">左边</div>
  <div style="width:200px;float:left;margin-left:-200px">右边</div>