<![CDATA[rank's technical notes]]> http://www.never-online.net/blog/ en LBS v2.0.304 Sun, 05 Feb 2012 04:35:23 +0800 60 <![CDATA[webkit里会出现突然闪一下的问题]]> ]]> Thu, 05 Jan 2012 14:00:03 +0800 -webkit-backface-visibility: hidden;
（但不能用于sprite雪碧图）

或者
.no-flick{-webkit-transform:translate3d(0,0,0);}
一，场景
在chrome下出现屏幕会闪，但不是每次都能复现。
出现这类问题，是种头疼的事。

二，初步debug
昨天晚上和maomao，晓刚我提起，会否是我们的mask导致。
因为mask的style是加了opacity。没有加display:none。页面还没load就把mask给加到body第一个元素了。

而后我在mask把background:white改成Red。看看是否会闪成红色。
很遗憾是没有出现红色。
结论基本确定不是mask导致的问题。

但幸运的是发现这个问题相起来都是在header处，并且是在<a ><i><i></a>标签里。

三，再次debug
第二天中午吃饭的时候说起今天一定要想法解决这个问题。
晓亮提到会否是Transform引起的。
于是下午试了一下，去除transform果然管用。
但是我们仍然没有知道解决办法，以及为何这样。

晚上回到家之后再打开dom inspect。先精简代码（如果没法定位问题，精简代码也可以采取二分法，这样速度理论上会更快些）：
<!doctype html>
<!--STATUS OK-->
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <link href="http://st.youa.com/resource/css/apps/sns_bc.css?f98dcf15fd.css" rel="stylesheet" type="text/css" media="screen">
 <link rel="stylesheet" type="text/css" href="http://st.youa.com/resource/sp/sns/home/css/index.css?1325074239.css"/>
</head>
<body>
<div id="header">
 <div class="global-header">
 <div class="global-header-inner">
 <ul class="person">
 <li class="top-user" id="top-user"><a href="###" class="user"><img src='
 http://img.youa.com/img_new/a94813a8f57f526b715f5c2a--20-20-1' alt=""/>rank<i></i></a></li>
 <li class="top-mess" id="top-mess"><a href="javascript:;" class="mess">消息<i></i></a></li>
 </ul>
 
 </div>
 </div>
</div>
</body>
</html>

四，解决问题
在百度上搜索类似css 3 transform bug，无果。
别灰心，在stackoverflow上看看。
query: "transform flick bug webkit"
果然有料。
http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform

五，是否还有其他优化方案
意味着在i元素里也加入
-webkit-backface-visibility: hidden;
（但不能用于sprite雪碧图）

也可以通过
.no-flick{-webkit-transform:translate3d(0,0,0);}
来解决。

直观上看，我看到translate3d这么解决，心里想这不是扯东窗补西窗么。
顺着往下看，果然如此。translate3d有问题。
引用
However, the body {-webkit-transform} approach causes all elements on the page to effectively be rendered in 3D. This isn't the worst thing, but it slightly changes the rendering of text and other CSS-styled elements.
It may be an effect you want. It may be useful if you're doing a lot of transform on your page. Otherwise, -webkit-backface-visibility:hidden on the element your transforming is the least invasive option.
所以， 从目前来看-webkit-backface-visibility: hidden; 是最优解。

六，弄清源头
关于这个css3属性拿来作什么用的。可以查阅w3c
http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property
引用
The ‘backface-visibility’ property determines whether or not the "back" side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer. Applying a rotation about Y of 180 degrees (for instance) would cause the back side of the element to face the viewer.
This property is useful when you place two elements back-to-back, as you would to create a playing card. Without this property, the front and back elements could switch places at times during an animation to flip the card. Another example is creating a box out of 6 elements, but where you want to see the inside faces of the box. This is useful when creating the backdrop for a 3 dimensional stage.
也就是说这个属性做翻卡片的小游戏，比较合适哈。
测试运行以下代码，就能理解为什么会在transform时会闪：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
-moz-transform:rotateY(25deg); /* Firefox */
-webkit-transform:rotateY(25deg); /* Safari and Chrome */
transform:rotateY(25deg);
}
</style>
<script type="text/javascript">
function rotate(value) {
  document.getElementById('div1').style.webkitTransform = "rotateY(" + value + "deg)";
  document.getElementById('div1').style.MozTransform = "rotateY(" + value + "deg)";
  document.getElementById('div1').style.transform = "rotateY(" + value + "deg)";
  document.getElementById('span1').innerHTML = value + "deg"
}
function checkBackface() {
  if (document.getElementById("bf").checked == true) {
    document.getElementById('div1').style.webkitBackfaceVisibility = "hidden"
  } else {
    document.getElementById('div1').style.webkitBackfaceVisibility = "visible"
  }
}
</script>
</head>
<body>
<div id="div1">HELLO</div>
<p>Rotate the yellow div element, with and without checking the backface-visibility checkbox:</p>
<p>Hide the backside:<input type="checkbox" onchange="checkBackface()" id="bf" /></p>
Rotate:<br />
<input type="range" min="-360" max="360" value="25" onchange="rotate(this.value)" /><br />
-webkit-transform: rotateY(<span id="span1">7deg</span>);
</body>
</html>
我的理解是transform其实都是3维的变换，而backface-visibility:hidden，则是在几个面隐藏。理论上解释得通，合情合理。
如上，如果把translate3d变换关闭也可，但性能不好。
如。象border:0与border:none是有本质区别的。
0需要浏览器渲染。而none不需要渲染。

结论
在用position:absulote+zindex!=0时用transform会偶尔出现页面会闪的现象，确实是chrome的一个bug。
chromium里没有发现有人提bug，所以我检索了一下webkit.org的bugtrace，看到
https://bugs.webkit.org/show_bug.cgi?id=47175
https://bug-47175-attachments.webkit.org/attachment.cgi?id=69779
这哥们儿还举出case了。就不用自己写bad case了。
-webkit-backface-visibility: hidden; 是最优解。

OK。结案。]]> <![CDATA[云标签，关键字图排版 html5 canvas版（一）]]> ]]> Mon, 19 Dec 2011 20:58:19 +0800
http://ww1.sinaimg.cn/bmiddle/62d43e17jw1dmsag98kaaj.jpg


在做的过程当中,查阅了一些资料, 发现自己有点out了,在国外已经在wordle.net这样的网站.
也有一个叫做信息视觉化(Information Visualization)的概念.于是顺着这个概念再googling了一些相关的知识.把一些知识点做一下笔记.

Information Visualization
漂亮,惊艳.与传统的云标签的表现力对比,原来的太普通了.给人全新的一种视觉感受.
而后我的想法则是为什么这么有表现力的技术不能用在我们现在的项目上?所以我有了去尝试做这种排版的想法.
现在把一些过程记录,给自己的一种笔记,给其他后来者留下一些资料.
而云标签只是信息视觉化的其中一个很小的应用.有兴趣的同学可以参考wiki或我文后给出的链接查看详情.
这里不展开描述，不是本文的重点。

过程
以上图为例,一句话简单的描述起来就是,不停的尝试把当前的文字放到能够放到的位置,直到没有文字为止.
稍微画个流程图的话,大致如下:
http://www.never-online.net/blog/uploads/201012/workflow.png


这里面需要特别说明的几点, 各位可以先试想一下这几个问题:
1.如何进行字符碰撞检测?
2.如果是在脚本里去做的话,如何能拿到文字显示到画布上的像素点?
3.文字大小如何设定?
4.文字是垂直还是水平如何设定?
5.如果我要显示特殊图形如何扩展?

---------分隔线--------

1.碰撞检测是很耗CPU的.最笨的方法是每个像素点都去遍历尝试,直到能放到区域内为止.也可以用空间换时间,例如使用hash cache降低放在canvas中的io操作.再进一步可以把目前所有文字的范围最小x,y坐标,最大的x,y坐标记录下来,以便于下次检测碰撞可以直接限制坐标范围.
2.canvas目前高版本里可以用canvas.getContext('2d').measureText(word).width(注:目前也仅支持这一个属性,其他属性还不支持)
3.文字大小设置最大值, 设: 最大值==出现最多字的count,那么比例ratio=MaxFontsize/maxWordcount,随之过滤掉过小的fontsize字.
4.文字和水平对于排版影响不大,可在随机,也可以通过一个函数是做符合设定规则的转换,如查用随机显示文字是垂直还是水平简单一句:isVertical = Math.random > 0.3;
5.特殊图形==图形显示范围.我个人理解应该至少有两种方案,一种是用函数计算出来,另一种方案是先手工把边界制定出来,而后再填充.(本质上是一样去约束范围)

关键代码
1.文字count
如果是中文的话,需要处理分词,分好词后再count. 关于中文分词已经算是一个单独领域了, 我不专业,就此跳过. 而英文的话很好办.
words = text.split(/\b/);
直接通过边界分,然后转成map,count后用filter过滤即可.
比较简单,代码略过.

2.范围
如何能让文字随机显示在界面上呢?
function normalInt(min, max, iter) {
 var arr = []; for(var i=0; i<iter; i++) arr.push(Math.random());
 return Math.floor(arr.reduce(function (i, j) {return i + j}, 0) / iter * (max - min)) + min;
}
iter值越大,得出的结果越接近于min, max的中间值.
以Math.random()随机范围在(0~1),如果随机次数趋向正无穷,那么理论上随机的平均值是趋向于0.5.
例: normalInt(0,100,10000),结果接近于50,有可能出现的结果是49.12334
所以,如果代码是
var x = normalInt(0, canvas.width, 100),
  y = normalInt(0, canvas.height, 100);
理论上,将正态分布在画布的中心周围.

3.如何能得到显示文字边缘
canvas里面能获得imagedata, 获取CanvasPixelArray接口为canvas.getContext('2d').getImageData(x, y, width, height);
数据类型为CanvasPixelArray. 它是像素矩阵的扁平表示方法:
http://www.never-online.net/blog/uploads/201012/img_1308366650_5.jpg


CanvasPixelArray包括 宽*高*4 个字节的数据, 索引范围从0到 (高*宽*4)-1.
要取得图片里一个[x,y]坐标的red颜色信息可以用以下方法
var redValueForPixel = ((y - 1) * (width * 4)) + ((x - 1) * 4);
http://www.never-online.net/blog/uploads/201012/img_1308366651_6.jpg


另:在处理图像的时候,如果有API可用的话,基本都是按这样的索引结构存储.
<h1>点击图片的rgba信息并将body background显示为该色</h1>
<p><strong>load 外部图权限需要提升</strong></p>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
onload = function() {
  var cx, canvas;
  var WIDTH = 280, HEIGHT = 140;
  var image = new Image();
  
  void function createCanvas() {
    canvas = document.createElement('canvas');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    canvas.style.border = '1px solid #000';
    document.body.appendChild(canvas);
    cx = canvas.getContext('2d');
  }();
  
  void function loadImage() {
    image.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
    $(image).load(function() {
     cx.drawImage(image, 0, 0);
    });
  }();
  
  $(canvas).click(function(e) {
   var canvasOffset = $(canvas).offset();
   var canvasX = Math.floor(e.pageX-canvasOffset.left);
   var canvasY = Math.floor(e.pageY-canvasOffset.top);
  
    try {
     var imageData = cx.getImageData(0, 0, canvas.width, canvas.height);
   } catch(ex) {
     netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
     var imageData = cx.getImageData(0, 0, canvas.width, canvas.height);
    }
    
   var pixels = imageData.data;
   var pixelRedIndex = ((canvasY - 1) * (imageData.width * 4)) + ((canvasX - 1) * 4);
   var pixelcolor = "rgba("+pixels[pixelRedIndex]+", "+pixels[pixelRedIndex+1]+", "+pixels[pixelRedIndex+2]+", "+pixels[pixelRedIndex+3]+")";
  
   $("body").css("backgroundColor", pixelcolor);
  });
}
</script>

4.碰撞
碰撞的算法比较简单,但是如何能提高碰撞检测的效率是关键之处.
这里用的方法是通过基于绘制文本的x,y为基础点去做判断.复杂度为循环要绘制文本的像素点:
O(((y - 1) * (width * 4)) + ((x - 1) * 4));
近似等于O( (Math.max(width, height)^2) ).
/**
 * collusion 检测碰撞
 * @param {CanvasPixelArray} imageData 画布的imageData
 * @param {CanvasPixelArray} wordImageData 文字的imageData
 * @param {Number} x 绘制文字在画布的x坐标
 * @param {Number} y 绘制文字在画布的y坐标
 * @return {Boolean} 返回是否碰撞
 */
function collision(imageData, wordImageData, x, y) {
 var wdata, fdata, wy, widx, widxend, fidx, wv, fv;

 wdata = wordImageData.data;
 fdata = imageData.data;

 for (wy = wordImageData.height - 1; wy >= 0; --wy) {
  //逐行扫描
 
    widx = wy * wordimg.width * 4;//当前行rgba起始值
    widxend = widx + (wordimg.width * 4);//当前行末rgba结束值

 fidx = ((y + wy) * imageData.width + x) * 4;//大画布中当前行的像素起始值
 for (; widx < widxend; widx += 4, fidx += 4) {//根据wordimg+y坐标定位到行,开始逐列扫描,并进行比较

 //因为rgba的rgb任意像素都可能为空,所以只用判断opacity
 wv = wdata[widx + 3];
 fv = fdata[fidx + 3];

 //需要放置的文字在某个坐标透明度不为零
 //及在已存在画布上坐标上透明度也不为零,即为碰撞
 if (wv && fv) return true;
 }
 }
 return false;
}

一些资料
CanvasPixelArray参考MDC
https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas

wordle.net的作者写的一些资料:
http://static.mrfeinberg.com/bv_ch03.pdf

信息可视化wiki:
http://en.wikipedia.org/wiki/Information_visualization

stackoverflow上的一些信息:
http://stackoverflow.com/questions/342687/algorithm-to-implement-a-word-cloud-like-wordle]]> <![CDATA[javascript的configuration/interface变换]]> ]]> Tue, 29 Nov 2011 17:28:05 +0800 1.例如我们常遇到的兼容问题, 请尝试写一个Style.get(element, 'opacity')方法.
是不是该在Style.get里实现加入if是IE.而且<10之类的判断.
2.focusin,onmouseenter,onmouseleave事件,使得业务调用可以使用及绑定这些事件.
3.链式调用.

这样的例子可以拿出很多, 其实要说用中间层处理dom分支, 在很早的dom框架里Base2就经常看到.
在base2里经常可以看到@ie, @mozilla之类的字符串, 其实也是conf配置,中间函数分发的一种.

如果不是针对dom编程,而是针对有一套规则,中间层针对规则去做处理,或许就能更好编程.
以下几段代码算是抛砖引玉,也许大家都有更好的思路.

解决方法
示例1, css兼容
看使用方法,cssconf配置,来看看property以及读写器的配置规则
//尝试一种针对标准配置的方式
//取值潜规则
//1.对应在map中浏览器中修正的属性值
//2.修正的读写器（一定要为函数）
//2.配置map中浏览器对应的default值
//3.最后用传参过来的默认值
//为不同浏览器配置属性的hash
//如果是纯属性值结构为
//'property': {
//  'browser': 'property-value'
//  'default': 'default-value'
//}
//如果是读写器函数，结构为
//'property': {
//  'browser': {
//    set: function(el, css, value) {}
//    get: function(el, css, value) {}
//  }
//}
var cssconf = {
  'transition': {
    'ie' : '-ms-transition',
    'webkit' : '-webkit-transition',
    'firefox': '-moz-transition',
    'opera' : '-o-transition'
  },
  'float' : { 'default': 'cssFloat' },
  'opacity' : {
      'ie' : {
        set: function(el, css, value) {
          value = parseFloat(value) || 1;
          var styleObject = el.style;
  
          //如果设置的透明度为1时，IE里去除alpha通道的滤镜
          var result = (1 != value) ? 'alpha(opacity=' +(value*100)+ ')' : '';
          styleObject.filter = (styleObject.filter||'').replace(/alpha\(opacity=(.*)\)/gi, '') +result;
  
          //IE里filter需要触发hasLayout属性
          styleObject.zoom = 1;
          return value;
        },
        get: function(el, css, presudo) {
          var result = '';
          if (result = (Style.get(el, 'filter') || '').match(/opacity=(.*)/i)) {
            if (result && result[1]) {
              return parseInt(result[1], 10)/100;
            }
          }
          return 1;
        }
      }
  }
}
code & demo :
https://github.com/ranklau/marmot/tree/master/labs/style

示例2, 用typedef来进行dom事件兼容
先看看结果代码:
//typedef, 是C里用了重定义类型的方法, 常见于定义struct.
//思路借鉴到脚本里,含义是将某个类型经过转化,可以定义成另一类型,如:
//用typedef去做了个hook使mouseenter和mouseleave都能得以兼容所有浏览器
_typedef('mouseover', 'mouseenter', function(e, handler) {
 var el = this, target = e.relatedTarget || e.fromElement || null;
 if (!target || target == el || dom.contains(el, target)) { return null; }
 return handler.call(el, e);
});
code & demo:
https://github.com/ranklau/marmot/blob/master/labs/typedef

为了兼容而兼容吗?
代码如果仅仅为了兼容而兼容那太悲催了.
如果我们把这个思路扩展开,则是针对规范接口编程的一种解耦方式.
用这种变换的思路可以做很多事.
例如qwrap里的jss.示例3, 用jss来进行dom与js解耦
Jss.addRules({
 ".d": {dataType:'d', minValue:'2008-01-01'},
 ".n": {dataType:'n', minValue:0},
 ".email": {dataType:'email'},
 '#fromDate': {minValue:'2011-11-12'}
});
alert(W('#fromDate').jss('minValue'));

框架层次的代码
这个示例没有代码.
通过中间层去作变换,添加一些功能.从设计模式的理解是针对这样的模式有一个例子: decorator.我们所说的函数变换,在常规语言里的大多数场景里都是decorator. --- 动态地给一个对象/函数添加一些额外的职责.
js的函数用起来爽的一个很重要原因是不用去声明接口,不用再添加一个额外的Object/Class去处理中间层,只用一个函数+closure的方式轻松实现.
我们可以试想, 在多个不同的ui类里,你得写多少一样的代码?
写show, hide,还得支持自定义事件.
构造函数还要加if分支第一个是HTMLElement,需要调用render,是json则create.
在需要链式调用的地方,你得需要写多少个return this?
所以需要中间层加变换，则简单得多了，这里就不写这部分代码了，有兴趣的同学自己看qw。
这一部分我们也可以理解为decorate

如果有decorate,你将不用写这些一样的代码.同时还可以约束大家的代码结构与接口.
这种变换不是继承关系,而是组合关系.能使你的代码更易于维护. 结构上更清晰.
总之,程序中有合理的规则,接口约束,是通用处理与变换的基础.

P.S,今天有点晕,语法可能有点不通顺,以后有空再改改,凑合着看吧.

seealso:
降低HTML结构与脚本之间的强耦合 http://www.never-online.net/blog/article.asp?id=256]]> <![CDATA[webrebuild 2011 年会 session]]> ]]> Wed, 16 Nov 2011 13:43:36 +0800 http://www.slideshare.net/ranklau/mvc-10150624

一些八卦

之前答应了greengnn去讲，我心想，现在写码时间也比较少，而且现在写的东西原来也讲过。
而我又不愿意讲过的东西再讲一次，或来一次炒旧饭。
再也是怕自己的水平达不到，不好意思出去讲。迟迟没有写ppt。
后来让他帮我选题吧，选了个MVC的topic。刚好最近一直在思考和经历过一些这方面的事情，所以也就定这个方向的topic了。
ppt讲得不久，关键字在ppt中没有强调，如果不想翻ppt的话，我觉得自己讲的想法主要有三个方面：

1) 之前写Controller一些经历以及为什么会让前端写Controller。
2) MVC前端写Controller现在是否合适，什么时候合适？
3) Controller看起来像程序员，但不能忘本。前端开发工程师从字面上拆开来看，前端是很重要的。需要用可用性，用户体验，速度来衡量你是否是一个好的前端开发工程师。

后来Twinsen Liang给我们来看临时通知，让大伙坐上去。现场问答=。=
在rebuild年会前一天还和月影ivershuo聊了一晚上，吃了个梭边鱼。聊产品呀聊技术，蛮开心的。
我想最近这半年变数比较大，感悟也很多，有时间再写偏博客来说说。]]> <![CDATA[呼伦贝尔游的几张照片]]> ]]> Mon, 08 Aug 2011 12:05:22 +0800 http://farm7.static.flickr.com/6027/6016693788_149811e489_z.jpg
http://farm7.static.flickr.com/6144/6016136621_80fa51b162_z.jpg

http://farm7.static.flickr.com/6141/6016137457_48d4f44b93_z.jpg

http://farm7.static.flickr.com/6016/6016143997_2c676523e3_z.jpg

http://farm7.static.flickr.com/6136/6016159861_4affbf7408_z.jpg

http://farm7.static.flickr.com/6004/6016254241_fb69d4bb7b_z.jpg

http://farm7.static.flickr.com/6142/6016781576_e0fa3441d3_z.jpg

http://farm7.static.flickr.com/6022/6016780322_75bc0477ec_z.jpg

http://farm7.static.flickr.com/6016/6016157935_779e9d9f34_z.jpg

http://farm7.static.flickr.com/6029/6016710608_b83334bbb8_z.jpg

http://farm7.static.flickr.com/6008/6016706512_d246f9434f_z.jpg

http://farm7.static.flickr.com/6029/6016700104_33e9bf8f07_z.jpg

http://farm7.static.flickr.com/6135/6016701922_f91ec3c378_z.jpg

http://farm7.static.flickr.com/6124/6016151539_773f5ebc2d_z.jpg

http://farm7.static.flickr.com/6013/6016703430_e6c2cbcbb7_z.jpg

http://farm7.static.flickr.com/6029/6016698086_0251a6a9db_z.jpg

http://farm7.static.flickr.com/6013/6016696994_d86533a1b8_z.jpg

http://farm7.static.flickr.com/6128/6016143377_2f6331d3ba_z.jpg

http://farm7.static.flickr.com/6146/6016141623_eb1dc9f418_z.jpg

http://farm7.static.flickr.com/6022/6016142819_39d2347f5f_z.jpg

http://farm7.static.flickr.com/6029/6016145973_984cbc3eea_z.jpg

http://farm7.static.flickr.com/6121/6016138203_38eeeaefe6_z.jpg

http://farm7.static.flickr.com/6130/6016139009_c68fa86fed_z.jpg

http://farm7.static.flickr.com/6140/6016692290_c27e600c75_z.jpg

http://farm7.static.flickr.com/6003/6016687668_86db875efe_z.jpg

http://farm7.static.flickr.com/6003/6016135033_211a847822_z.jpg
]]> <![CDATA[marmot d2 session]]> ]]> Tue, 12 Jul 2011 19:54:01 +0800 回来是是13:50飞机, 中午和dh吃饭时, winter和裕波据然还没起=.=, 最后等到齐时,我已经快走了. 等哪天我再去上海宰winter他们一顿吧.

http://www.marmotu.com/resource/captura-1.png


在d2的session keynote, 用户行为在前端来说是第一次, 这次是联合演讲的方式, taobao的两位同学先讲taobao显微镜.
taobao同学对热力图做得比较细,也做了三维分析样本.
随后,我主要讲了一下做marmot的原理,设计框架,和部分实现细节.

我之前准备放一些内部使用的video, 但在讲的前一天晚上,最后放弃了只是给一些截图.
让大家重点不要放在技术细节上.

再次感概一点, 千万不要认为一个很好的产品里一定要用多牛的技术, 其实用最朴实的技术做出有价值的产品就会让人惊艳.
而marmot里也许没有一些高新科技,唯一值得说的也就是canvas了, 但是我们能把一些朴实的技术串联起来, 打造了属于自己的一条珍珠项链.

http://www.slideshare.net/ranklau/marmot-d2-session

本次的d2 accessibility 貌似比较热, 也反响比较好,本次的布道大于学习. 与其追求新技术,不如脚踏实地把体验做好.
从前端开发工程师这个职业来说, 有多少人真正把"前端"这两个字做好了?

最后感谢下秦歌,及d2主办方还有澄静 给了我打酱油的机会.]]> <![CDATA[技术人员说点产品]]> ]]> Sun, 29 May 2011 00:06:57 +0800
现在lbs比较火, 然后到o2o,再到solomo.
产品的趋势越来越 垂直化,社区化,标准化,个性化.

关于个性化
那如何能与上面的终端展现结合呢. 先想一个我的个人需求,一直以来,点评网虽然我是有目的是搜索我想要去的餐馆,但是不知道我想吃什么,于是我一般会在手机端用得较多,然后gps定位,然后做筛选,看评级和评论.很麻烦.
试想:
dianping我个人觉得它应该做下checkin和checkout. checkin与checkout是个粘住用户的手段,不是目的,最终的目的是挖掘出用户的行为,为个性化服务.想想,我每次checkin的都是川菜馆子,喜欢吃鱼,那么点评可以完全为我定制化一种符合我口味的推荐.那将是非常有竞争力的产品呀.
如果把这块挖掘深了, 团购产品的决策人员应该不会那么费劲的去想今天应该为用户推荐什么了.直接可以通过checkin看看数据上架团购馆子.

曾经从某处看到个酒店, 如果你第一次去这个酒店,他会认真记录的放东西的使用习惯. 你下次再chekin这家酒店的时候,有可能都是上次帮你拎行李的人,你的遥控器放的位置与上次一样
喜欢吃什么东西,喝什么酒都与你的口味类似. 非常之人性化.

个性化是深度挖掘用户需求,通过机器或人肉的方式来进行系统的个性推荐. 从数据挖掘后端到产品前端都是可以做很多事的:)

关于社会(social)化
社会化是信用体制的突破口, 现在点评的信用都是扁平化. 普通情况下是可以适用的.比如像是吃饭这种事情, 可以通过评论可以汇总出现在这家店点得最多的人是什么. 但也会怀疑五毛党的存在,会使你的决策考虑得更多.
再举taobao的例子,taobao我买过多次衣服.上次农历年前我在taobao上买了一件衣服.国外代购,都是给的五星,评论上没有太多可以看的内容.但是一买回来,小了.
还有就是我打算去拍婚纱照,现在网上就没有一个我能信得过的商家,但线下找的话,成本一般比较高,毕竟单个商家的线下推广成本高,羊毛出在羊身上.所以线下价格都比较贵.
还有一些例子就不再说了...
如果sns化之后,可以做的事情是,信用社会关系化.例如点评网,看点评出现的应该是我的朋友点评优先权重,避免五毛党捣乱.这对我的决策也影响颇深.
从拍婚纱照来说,我的朋友去某工作室拍的话,我肯定也会去咨询这家工作室,也很大可能就一起拍了. 或者人多一些就形成自然的用户驱动的团购.

taobao c2c这一市场与b2c的评台来对比,最大软肋就是信用,现在taobao做sns化之后应该会用sns在信用这块做不少工作.
另外是sns化之后对于个性化的推荐也是有帮助的. 如果sns+标签,我的所关注的人群里也有和我一样的标签,喜欢一样类型(例如户外)的衣服. 他哪天购买了lowa的鞋,那么我极有可能也会去看看相关商品,从而使我购买欲望增强.

再试想, 目前百度的搜索行为是通过query词来看你的用户行为,从而出现广告,facebook的广告则是通过关系的精准度来出现广告,从两者比较来看,facebook的广告效果好于百度效果.
再从目前搜索结果来看,我们看到的结果通常是后台通过反向链接的形式出现ranking结果.这样想一下:

我与小明是朋友,我们同时搜索一个关系词: 婚纱摄影
我点击跳转到了一个工作室
小明搜索时,如果我点击的那个工作室内容排名很靠前,或者在结果里显示那条工作室结果是你的朋友(包括我)多少次点击进入的话....

那搜索技术在排名算法上就更和谐了.

毫无疑问.以后sns+*是一个方向.

关于标准化
最典型的莫过于zol.com的数码标准库了,在进行了seo之后往往搜索引擎第一条都是zol的内容
例如: http://www.baidu.com/s?wd=canon+40d
我现在买数码产品比较性价比往往都是通过zol去比对的.相信不少人和我一样吧.
标准化的目的是进行比较,而不是消费.所以zol的在线购买并不多.购买这一环节往往是在b2c里发生.
所以标准化对导购影响是比较大的.

关于垂直化
或许垂直化这是大家的切入点, 每个企业或网站的战略方向不一样,做广做精都有.
但不可否认的是,近年来越来越多的垂直化内容受到很多人的青睐.

买数码到京东和绿森
买书到dangdang,和chinapub
家居都红孩子
搜机票到qunar
衣服到vancl
母婴还有babytree
吃饭地方找点评
....
就拿sns来说,现在装扮都有垂直类的sns美丽说.

现在形形色色的网站都有了,每个网站都有自身的相对竞争优势.
以后还会出现更多只专注于某一块业务的网站.

总结
其实以上各方面都是可以结合在一起的, 所以才有了solomo这么个说法.就是个性化+社区化+移动化的一个体现.
但如何结合出一些既有很好的用户体验的用户产品和能赚钱的商业产品.每家公司都不太一样.重点也不一样.
还有很多垂直领域,或者说我想要的那种产品都还没有出来,呵呵.说不准哪天俺也做个demo出来玩下.]]> <![CDATA[用户行为系统 如何记录行为数据]]> ]]> Thu, 07 Apr 2011 23:45:43 +0800 开发人员: seven, cyhello, rank
简短的说明一下marmot的一些log基本思路.

讲解下大略的东西.
1. 解决不同分辩率的策略.
2. 解决粒度过细的问题.
3. 还原路径问题.
4. 何时发回数据及数据量的问题

一,分辩率策略.
默认原点以p(0,0)开始计算,如果是定宽页面,p(0,0)坐标在不同辩率下得到的坐标是不同的.如何解决这一问题.
普遍情况下会采取截面坐标. 分析目前页面几种类型
a)align left 截面坐标从p(0,0)
b)align middle 截面坐标从p(document.documentElement.scrollWidth/2|0,0)
c)百分比的宽其实也是可以定位的,原理也是引入相对坐标系, 但也有一些劣势,就暂时不谈了.

二,粒度切分
默认粒度为pixel(1,1),即1像素为单位. 优点,数据齐; 缺点,数据大.
大多数时候是不需要pixel(1,1)的.
所以解决这一问题很简单
页面做grid, pixel(n,n).
数量为: Math.floor(document.documentElement.scrollWidth/n)

三,还原路径
可以序列化DOM path成selector.
以previousSibling + ancestor为基础不断向上递归出presudo selector(伪selector).

四,何时发回及数据量
beforeunload异步发回.
数据量不会太大, HTTP 里 get我们所知, IE6 2k数据(已知). IE7+5K左右(记得之前我测过, 印象中是这个数据,对于此,我不纠结它的多大数据量), 非IE都有>=2K.
肯定有人问题发回的比例是多少, 据dron同学统计过,约80%左右.
虽说不是绝对发回来, 但足够你用.
采样率5k~1w左右pv操作, 数据最大2k*1w约 20~30M log, 不算大.

代码不贴了, 等开源再说.]]> <![CDATA[*nix下关于配置的一些笔记]]> ]]> Thu, 07 Apr 2011 23:32:14 +0800
环境变量设置 (Mac OS X 10.6 Snow Leopard 中设置PATH环境变量)
  • sudo vim /etc/paths将路径添加到里面去， 一行一个路径
  • 或者vim vim /etc/bashrc在里面和unix一样用export命令添加
安装python MYSQLdb, 环境mac os x 10.6, linux其它环境类似
  • 安装python MYSQLdb, 环境mac os x 10.6, linux其它环境类似
  • 0. 确保 mysql 的 configure 参数里面有 --enable-thread-safe-client
  • 1. 下载 setuptools，确保 $PATH 里面有 "python2.6"，运行 sh setuptools-0.6c9-py2.6.egg 完成安装
  • 2. 下载 MySQLdb 选择其中的 tar.gz 版本
  • 3. 确保 $PATH 里面有 mysql_config，解开 MySQLdb 的 tar.gz，进去运行 python setup.py build; python setup.py install
  • 4. 确保 libmysqlclient_r.so.15 可以被直接找到 (方法是 sudo vim /etc/bashrc; 添加export DYLD_LIBRARY_PATH=/usr/local/mysql/lib/)
  • 5. 测试运行 python -c "import MySQLdb as mysql"，如无错误trackback则表示安装成功.
vim的相关设置
session保存
  • vim ~/.vimrc
  • 加入
    • au VimLeave * mksession! ~/.vim/session/%:t.session
    au VimLeave * wviminfo! ~/.vim/session/%:t.viminfo
  • 因为需要在vim里source session路径,所以需要加个批处理.写个bash.命名为vim.sh保存至~路径下.
    • #!/bin/sh
    #dir=`pwd`
    if [ -r ~/.vim/session/$1.session ]; then
    /usr/bin/vim "+source ~/.vim/session/$1.session" "+rviminfo ~/.vim/session/$1.viminfo"
    else
    /usr/bin/vim $1
    fi
  • vim /etc/bashrc, 将刚才写的批处理bash设置别名: alias vim="sh ~/vim.sh"
  • 搞定.
apache动态编译so包
当apache静态编译完之后,有可能有些模块在之前没有编译进去,这时候可以用apache自带的服务器apxs编译和安装扩展模块的工具来安装
  • httpd -l 查看目前静态编译完毕后是否有mod_so.c
  • httpd -v 查看目前apache的版本
  • 去官方下载一个与当前服务器版本相同的安装包, 查找你想要的模块,例如gzip压缩的模块: find . -name 'mod_deflate.c'
  • 用apxs编译:
    • /home/xxx/httpd/bin/apxs -i -c /home/xxx/httpd-2.2.17/modules/filters/mod_deflate.c
  • 编译完将mod_deflate.so 拷贝到apache的modules目录
  • 加入配置到apache conf里:
    • <ifmodule mod_deflate.c>
    DeflateCompressionLevel 9
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php
    AddOutputFilter DEFLATE js css
    </ifmodule>
  • 重启apache.
服务器日志切分
目前用cronolog的比较多, 安装比较简单.php,apache设置
  • 因为我用keepalive机率不多,所以一般在apache里关掉, 而且会设定超时的阀值.
  • php里内存默认使用限制在8M, 最好调大一些,因为在大数据量查询及交互情况下8M肯定是有问题的.会提示
    • "PHP Fatal error: Allowed memory size of 8388608 bytes exhausted"
    php里可以调函数, ini_set("memory_limit","16M");
    或者在php.ini里设置 memory_limit = 16M
  • apache默认是把静态资源cache模式开启的, 而且是用Etag, Etag的使用还是有inode, 如果多机部署的话,inode都会不一样,前端搭建负载均衡的话,cache命中策略会大大降低.
    • 所以,尽量用expire模块的cache+last_modifed.
secureCRT ssh登录终端中文显示乱码问题
不是secureCRT的字符编码范围不对,就是服务器不支持中文gbk字符集. 所以.
  • 终端机器中字符编码更改. vim /etc/sysconfig/i18n, 改为:
    • LANG="zh_CN.GB2312"
    LANGUAGE="zh_CN.GB2312:zh_CN.GB2312:zh_CN"
    SUPPORTED="zh_CN.GB2312:zh_CN:zh:en_US.UTF-8:en_US:en"
    SYSFONT="latarcyrheb-sun16"
  • secureCRT在session option下的Apperance中的Character字符编码集选,UTF-8或OEM.
]]> <![CDATA[关于前端开发那些事（五）激励体制]]> ]]> Thu, 24 Mar 2011 12:47:05 +0800 冰山模型
基本每个公司都会给大家说每个人的冰山模型. 对于一个中国目前广大基层代码编写者及基层管理者来说.
所谓的这个模型灌输给大家的目的:
大家不要想公司加上去,因为目前已经够温饱了. 再就是让大家更多的去做指导工作. 从成就感入手去解决你目前团队的问题.

可是不管是哪位老师的培训都似乎没有提到
1. 这个调查是在国外还是国内?
2. 这个公司的员工在该公司的工作时间有多长了?
3. 这个公司所从事的是什么工作类型?
...
等等, 这里的每一个变量将会影响到全局的结果.
是故意呢?还是确实没有这类似的调查.也或许是我钻牛角尖?

我要阐述我的一个观点, 马克思的政治经济学里有说"所有社会问题, 都是经济问题." 所以, 从实际利益出发考虑问题会更合时宜.
回到刚才的冰山问题. 我们应当把人分成维度来考虑.

在天朝,大多数都会考虑买房的问题.
这个问题的本质就是需要更多的工资来实现, 虽然遥远, 但我们得承受目前的工资水平要在一线城市买房的话,还贷使得你很大程度上就得呆在一个公司不走了.
即使. 对方公司给你更多的收入.
你的机会成本仍然很大, 你的人际关系.你现在已经习惯的工作方式.你的稳定性...等等.
这对于工作两年之后的人来说, 我认为普遍存在这一情况, 另外, 有子女的情况要求会更迫切一些.

对于毕业学生呢. 通过调查, 更重要的是成长环境.
好的导师.好的成长环境, 给他们更多机会.
提到导师的话, 请回到第一个用户维度.

对于成就感. 每个人有不一样的价值观, 人生观. 所以各人的成就感有所不同.
对于刚进公司的人呢? 上线一个项目就已经非常高兴了, 因为他的一个上线是给xxx万人用. 这种成就感使得大家更有动力去做更多的事.
而对于一个上线n次的技术人员来说呢? 也许你的程序如何高科技. 如何能够在一个技术型的公司受到认可, 这才是成就感.
因为对于上线来说, 这种认可已经麻木.
...

我上面的陈述即是把成就感与激励相结合.
否则成就感极有可能就是在没有办法的情况下的自我安慰与自我麻痹.

综上所述, 我想说的是, 沟通是领导能够深得人心的重要保证，激励是领导能够留住人心的重要措施。
如果说谁能够有能力, 有权力的在公司内建立一个有效的激励机制. 那必定是个神人. 吾将膜拜之.
虽无此人, 但公司也应为此上下而求索.

激励机制
定义:管理者依据法律法规、价值取向和文化环境等，对管理对象之行为从物质、精神等方面进行激发和鼓励以使其行为继续发展的机制。

现在所有的公司都不可能提供一种完美的机制给你, 也不可能对于所有的人都公平对待.
另外一点也是因为这种价值如何衡量目前没有完全的量化标准.
如果谁能发明一种较完善的激励机制或者能对公司情况设计一种合理的激励机制,那也是相当的人才呀.

打怪型的激励机制
像某些公司用量化式的工具也衡量每个人的工作量, 这个工作量直接与奖金挂钩, 也会有所不公平.
这就像是玩网游在打怪. 如果你遇上大的怪经验值就会多, 反之则少.
怪物的大小直接取决于你这个部门的价值及直属上级对这个项目的判断力, 这对项目经验这样的底层管理人员提出了很高的要求.
优点则是公平,公开和公正. 这是所有开发人员都想看到的.

对于公司,则是收益较大的, 劳动密集型的开发,使得公司保持了高效率的迭代.
这些公司之所以长期采取这样的方法,应该是价值的总剩余大于不公平因素.

技术驱动型的激励机制
一些公司采取的kpi导向,但纵观这些kpi内容,都是与业绩相关.
而也会配套的采取一些技术驱动型的激励, 例如.你现在做了多少项目,有多少是有技术含量的,有多少是可以值得拿出来说的.
如若是你每天都写业务码, 再加上你现在的流量不高, 那么很对不起, 技术影响力不够大. 在这样的技术评级体系下,你是很吃亏的.
反过来说, 如果你是在核心部门,或许,我说的是或许,也相对于非核心部门的同学在评级机制下会稍好一些.

对于公司来说, 这样的机制如果有足够量化的评机系统,还是不错的,既能鼓励创新,又能保持自己公司较好的技术水平.
但是,要注意的是激励会改变人们的行为.
这里的问题在于, 1.激励会使人去研究新技术,即使是别的部门研究过. 2.即使现在用不着这样的技术,也会有人去玩. 3.评级体系的负责人不了解你的产品线.4.有可能你现在没有办法利用或研究出新的技术以用于自己的产品线.

所以,有可能久而久之的现象则是,大家都不太想干活了. 因为干活的多少只会影响奖金.而这个奖金是效用是否能够大于升级的效用呢?
这个因人而异.

价值型激励机制
用最简单的模型来描述一下.
一个公司,两个人.一个老板,一个业务员工.
老板怎么样能激励员工,让员工给公司创造最大的价值?
这种应该是很多人都知道. 如果员工为老板带来了100万的生意, 而利润有20万的话.
老板愿意将一定利润的比例做为报酬, 这样员工会比较能够发挥主观能动性.
在我所了解的资料中, 万科属于这种类型.
在万科公司中, 如果你提的建议为公司节约下多少成本,或提高多少工作效率. 经过量化之后会乘以一个比例,把这部分的钱作为给提出,执行者的激励.
这样的好处在于, 大家都在为公司想办法节约成本,提高生产力.
不好之处在于,上班大家还是否热衷于真的上班?

不能当作银弹
各种激励之模型都有优有劣,但国内各稍微成熟的公司都有自己的一套办法, 但是,对于新的业务部门及创新型部门, 却是不能用成熟体系拿来衡量的.
薪酬激励象通货膨胀.
创新型及创业型的团队应该有会较好,直接的激励体系用于鼓励创新行为,可以以透明的奖金来体现.
而成熟的业务里则是稳中求胜,不能盲目的用激励来刺激大家,以免造成激励过剩.

领导的作用
领导做的事是管理. 管理在本质上就是几个关键字, 即是决策, 团队, 规划, 资源, 执行.
但是如何能够最有效率, 则各有各的权重.
领导其实很多时候也很难做, 上有压力,下面也有骂声,如果协调不好,上不去下不来.两面都逼着难受. 也不光是用智商就能解决的.
能解决好的,那是一种智慧. 让人敬佩.

对于激励体系,要看你的上级如何看待此事, 当你的上级拿着较好的待遇时,是否能够体谅员工的辛苦呢?.
如果他能够关注细节,了解员工所想, 对员工来说这才是一个好的领导.
不写码的领导是很难理解,它的一句话下来让大伙全改, 然后他还以为大家都很有激情工作, 却不知道大家在后面相互吐不快.
工资高的领导是很难理解,公司的一点福利对于员工有多重要.

不断有故事提醒我们, 有很多事, 不是屁股能决定脑袋的.]]> <![CDATA[关于前端开发那些事儿(四) 技术的本质何在?]]> ]]> Thu, 24 Mar 2011 12:46:02 +0800 技术职称,kpi说起
一般技术公司都有一年一次,或者两次的技术评定.
不论是KPI还是技术评定, 都想从相对客观的角度去衡量一个人对公司的贡献有多大, 基本是从几个维度给出评分再乘以权值的算法.
肯定也有很多人会怀疑这种算法的公正性, 但即使愤青,也只能无可奈何的接受现实给你的打击.
这是体制. 每个公司成功都有自己的理由, 只说说自己的感受.
正如蔡学墉先生所言(我稍修改了一下), 评级或kpi三阶段一般是:
  • 忽略kpi和技术职称导向, 为部门所想, 全情投入.
  • 几乎全kpi或技术职称能力导向
  • 无导向, 此时已经很难回头了.
做过开发有几年了, 环境有所变迁, 自己的想法有的时候也常变. 我也想罗嗦一下乱七八糟的事.

创业激情
刚进公司我对这套大公司的做法几乎忽略. 以全部的创业激情投入到工作中, 到年底也很幸运,部门得了总裁奖,整体部门也得到了较大的回报.
忆当年, 晚上11点了,部门内部还是灯火辉煌, 凌晨一两点有人还在加班也是很常见的. 这个时期可以认为是轴心时代.
引用
人类都有个轴心时代，人类一直靠轴心时代所提供的思考和创造力的一切生存，每一次飞跃都回顾这一时期，并被重新点燃，自那以后，就是这样，轴心时期潜力的苏醒和轴心期潜力的回归，或者说是复兴，总是提供精神的动力。——雅斯贝斯《历史的起源和目标》
我现在理想的分析过去为何那么有干劲的半夜去加班:
  • 有美好的未来. 画个饼不难, 不外乎是未来的美好. 而当时每个人都会认为只有它才能与taobao竞争,说实话,这个饼,确实挺诱人的,呵呵
  • 有足够的激励. 创业是个难事, 老罗同学的学校据说给的工资是比新东方还好. 当时而言前端这个职业这里给的薪水算是不错的.
  • 有技术的氛围. 气氛是一个很容易引起同鸣的东西, 如果大家都在卖力的干活,而你不是,那你心里会有愧疚感. 不为技术而技术, 只为产品服务.
  • 有很多的牛人. 其实在每个公司都有牛人, 可是出名的牛人就不一样了, 做技术的同学会朝他们的技术偶像而去, 去学习, 瞻仰, 进步.
  • 有很好的环境. 在创业型以及创新型的公司或团队里, 发挥团队每个人的工作效能, 最好的方法正如: 让有能力的自己去做, 其次再去教他做, 最后再管理他. 而这种方法意味着你必须是个足够开放的环境, 放权, 及足够的信任, 11点上班也无所谓, 晚上下班也任由你. 然后还给你每月几百块的旅游基金.
  • 信息尚不明朗. 当时大家只有心思把东西做好, 不关心其他的事情.
呃.有点像程序员的天堂.

世界在变, 所以天堂也不会是一直完美. 经历了创业时期的轴心时代, 都会过渡到一个彷徨的时期.
一些信息不公开,大家对产品的审美疲劳,内部的一些问题逐渐暴露出来.
很多初期时候的承诺看上去都已经太过遥远.
于是会有一些核心的人员开始离开这个团队, 去追求他们自己的理想...

对于技术在此时而言, 要么是要让他们做自己喜欢的事, 要么是做改善目前状况的事.
前者过于孤单, 而后者力不从心.
需要平台, 需要能力, 需要时间.
这对于我来说是个有点像是质变的过程.
之前我会更在意于技术形态上的讨论, 现在更多的是在变现上的思考.
这在于我之前的日志也有提到技术变现, 这里也不多说了.
详细看这里http://www.never-online.net/blog/article.asp?id=307

技术为谁服务
技术的本质是降低成本及提高生产力.
这是我现在做技术上的信仰, 不唯技术是从.

一个技术型的企业, 会有可能掉入到一个陷井, 就是我们现在不停的去挖新技术, 这对于我们个人来说都是有益的.
对于你出去找工作可能也有一定好处, 毕竟是技术面试, 你了解得越多当然越好.

对于公司而言则不尽然.
如果公司里都是一大帮人去研究新技术了,那谁来开发项目呢?
何时研究新技术,何时是以效率为主的导向, 是需要项目经理及技术经理所以考虑的. 甚至KPI的制定也应该以此为基础.
如果不然, 则会出现非常严重的后果.
可能大家上班都没精神,没有方向感.
新人来了,看老员工都在玩技术,自己都在顶着上线和产品人员的时间天天写着业务码, 自己也会想办法从中逃出来.
希望自己哪天老油条了,也不必这样去写业务码.

那问题来了, 你现在的业务如果不需要新技术, 只需要写业务码的人呢, 那怎么办, 如何保持大家对新技术的激情呢?
我还是那个观点,不应该为技术而技术. 如果真是那样,宁愿不去干那些事,宁愿大家把目前的主要精力体现在业务上:
例如如果减少代码量,编写代码生成器,自动上线,自动检查.文档生成等等.
本质上是 活你干或者不干, 它一直在那里. 只是没有人或者没有制度给你一种激励, 使你现在干这种提高生产力的活的机会成本 小于 你去研究新技术的成本.
如果这个条件成立,那一切都应该不是问题. 或是通过外部的某种激励使得你愿意把目前生产力提高上去.

其他的也不啰嗦太多了. 相信每个人自己心中有杆秤.
总结一句话就是,不论何种技术,也不论你是在工程院还是研究院, 作为技术人, 在心中仍然还是要自己对变现这个词的思考, 对技术目的的思考.]]> <![CDATA[bash shell - sed, awk文本捕获及替换]]> ]]> Fri, 11 Mar 2011 23:37:00 +0800 看以下示例

case需求.
stream='background-image: url (a.jpg)asdfasdfasdf ;background:url(b.jpg);background'
需要将背景图片内容a.jpg及b.jpg后追加一个签名串.

sed替换不给力
如果用sed, 替换是不会有问题, 但是要在一句代码里进行捕获多个图, 将进行替换, 查阅了相关的sed文档, 貌似是需求处理不了.
代码示例
stream='background-image: url (a.jpg)asdfasdfasdf ;background:url(b.jpg);background'
echo $stream | sed 's#.*url *( *\(.*\) *).*#\1#'

#输出b.jpg

awk代码块
用awk的话,(g)sub又没有sed里的匹配后的"后向引用"(即"\1"). 但是可以有代码块可操作.
原理可利用awk里的函数match先用正则匹配url()里的内容, 再用substr将内容取出, 随之将流的位置置后.
循环操作.
代码如下:
stream='background-image: url (a.jpg)asdfasdfasdf ;background:url(b.jpg);background'

matches=$(echo $stream | awk 'BEGIN {ORS=" "} END {
 gsub(/ */,"", $0)
 input=$0
 while (match(input, "url([^?;)]+)")) {
 print substr(input, RSTART+4, RLENGTH-4)
 input=substr(input, RSTART+RLENGTH)
 }
}')

for bg_file in `echo "${matches}"`; do
 md5_code="test"
 stream=$(echo "${stream}" | sed "s#url *( *${bg_file} *)#url(${bg_file}?v=${md5_code})#")
done

echo "${stream}"

总结
从以上的示例可以看出, awk几乎可以替代sed, 但是对于固定替换, sed使用起来更方便.
sed从使用理解上看, 与vi的命令操作很相似.
而在awk里块里几乎可以操作任意文本流.
另外要说明的是, 这两个命令所支持的正则都像是标准perl里的子集, 没有贪婪匹配与非贪婪匹配之分.
其实你应该很意外, 我为什么不用python或者php这种语言来写, 如果用字符串函数比较多的语言来写的话, 应该是非常之简单.
很遗憾也很高兴的, 这次有点钻牛角尖, 依然用了bash.
也算为学bash打下个基础.]]> <![CDATA[bash shell里读取文件时反斜杠(backslash)原文输出]]> ]]> Tue, 15 Feb 2011 13:54:57 +0800 问题描述
逐行读文件一般的写法如下:
cat filename | while read line; do
echo $line;
done
看上去没有什么问题, 而且是网上的同学都让你这么读. 实则有潜在问题很难发现.
我们知道echo 里是默认有转义的,一个"\"反斜杠默认不显示,两个则显示一个,如果你的file里有如下字符
引用
\s\\s\s
用上述的代码则输出:
引用
s\ss
这着实让我头痛...
在Baidu和google里搜索没有合适的结果,只能自己分析了.

分析
应该不是echo的问题. echo只是输出端, 每个语言的输出都有各自的转义, 举例即是如果变量用单引号声明则是原文输出, 那么上面的line是个变量.
所以问题自然在要么是cat么,要么是read有问题.

测试及结论
cat file里的文件出来仍然是原文\s\\s\s
考虑是否是read有问题. help read出来的文档里是有参数可查的. 查到是参数"r".
引用
If the -r option is given, this signifies `raw' input, and
backslash escaping is disabled.
最后原文输出文件的内容代码如下:
cat filename | while read -r line; do
echo $line;
done
]]> <![CDATA[bash shell杂记]]> ]]> Sun, 23 Jan 2011 20:54:38 +0800
  • 在css文件里 匹配@import url("/path/html5.css"). 将/path里的html5.css文件内容替换当前行. 即css合并
  • 将js文件里的document.write("/path/dom.js"). 将/path/dom.js文件替换当前行. 即js合并
  • 将模块打包成线上路径. 可以直接cp上线上目录. 提高上线效率,降低上线出错机率.
  • 将sprite的图片文件加上版本号
  • 将<link>标签里的css路径加上版本号
  • 将<script>标签里的js路径后加上版本号
  • css, js 代码压缩
  • 实现基本的检查, 例如不能将测试环境的一些代码发布上线上等等
  • ...
    • 看上去实现不算困难. 于是想直接用bash shell写. 也算巩固一下这方面的知识.
    bash shell在*nix里很爽的机制有管道和重定向, 非常方便. 但是也有一些需要注意的点.

    管道
    管道的作用是将前一个命令的输出用作后一个命令的输入.
    但你想写这样的代码时:
    cnt=0
    cat xxx.file | while read line; do
     if [ ${line} == 'error']; then
     let cnt=$cnt+1
     exit
     fi
    done
    是不能修改cnt变量的值的. 这是因为通过管道,是在当前进程中fork出一个子进程, 因此变量上面不可修改父进程的变量. 这也合情合理.
    那如果我想修改应该怎么办比较方便? 答案是通exit退出进程时的返回值来操作. exit能返回最后一个子进程操作的返回值.
    cnt=0
    cat xxx.file | while read line; do
     [ ${line} == 'error'] && exit 2
    done
    retval=$?
    [ $retval -eq 2 ] && let cnt=$cnt+1

    文本编辑的差异
    如上面如说, 一行行的读总没问题吧? 事实并非如此.
    之前不了解bash这些命令的原理, 于是踩了个坑. 我从svn checkout下代码后. 读取css里@import的文件发现有的能读取,有的不能读.
    最后定位到不能读的文件都是一行. 或者是最后一行.
    在公司群内询问之后, 有人提到可能windows的换行与*nix的是不一样. 于是将\r替换后依然不能逐行read line.
    通过file命令查看之后, 发现奇怪的事.
    引用
    with no line terminators
    如果是windows编辑出来的应该是"with CRLF line terminators", 如果是no line terminators意味着没有换行, 自然是不能read line.
    用命令"od -c xxx.css"确认后果然看asc码文本最后无换行.
    这应该是windows下某些编辑器的问题. 具体就没再去查.
    回到这个问题, 在网上搜了一下, 没有找到一些资料可参考.
    于是我当时想到的是一个山寨办法, 给每一行末我加一个回车. 然后再保存回去, 嘿嘿.
    也算能解决问题吧. 也咨询了一些同事, 这个目前还没有找到太好办法.
     sed '{
     /$/ a\

     }' ${file} > ${file}.bak
     mv -f ${file}.bak ${file}

    引号
    单引号是能保持包含在单引号里的原值
    双相号也是如此,但除了反引号"`"美元符及转义符"\"
    但是确有所不同. 加上字符串变量加上引号会更保险
    a='* @@'; echo $a
    这在至少mac里会列出所有当前的文件夹下的所有文件,这是通配符"*"在作怪.
    a='* @@'; echo "$a"

    log
    尽可能的多输出日志, 分清info, warning, error类型,对于真正出问题时定位很有用.
    特别是你不能在本机debug时.]]>         <![CDATA[关于前端开发那些事儿（三）技术之变现]]> ]]> Tue, 21 Dec 2010 00:51:03 +0800 写业务代码，项目评审，代码review，沟通业务是否符合需求。。。。
    每天都围着技术含量不高的业务代码。。。嗯，很郁闷。

    这是个引子，业务技术不是我今天要罗嗦的主题。

    我想表达的是我们其实都想去学习，去深入的了解某项技术，更去应用，让人用，让自己有强烈的成就感。
    可是，事与愿违，原因就是业务部门首要任务应该是完成目前业务线的工作，和产品人员沟通，然后就是直接的交易量和收入。

    对于一个做技术的开发者来说，
    去做有技术难度事情，来挑战自己，给自己成就感；
    与一大帮牛人在一起讨论技术；
    保持和提高自己的数理逻辑神经；
    这，才是归宿。

    正如google招人也正中技术人才的下怀，但千人挤独木桥，不是谁都能上的。
    所以，我们只有在自己业务线当中不断的去满足自己的技术欲望，用工作之余去尽可能的做些有技术含量而且也可以为产品线服务的技术产品。

    从我自己在公司里去主持开发的一个非项目的技术产品来说，问题有以下几点
    • 是否有团队。如果说你是个新人，那好吧，你只有一个人。除非你之前就有影响力了，或者是运气好，能碰上合适的人让你去做这样的事。
    • 是否有人用。做的技术再好，如果没有人用，也是让人没有成就感，没成就感就没后续跟进的动力。
    • 是否有时间。每天拿出两小时来做？还是周末？这是个问题。
    • 是否有目标。这个目标简洁的说就是应该对公司对团队有价值的，如果仅是随意的一个项目的话，还是一个人去做会比较好，否则没办法让大家投入进去去做。这有点像是在团队内技术创业。
    • 是否有计划。这与时间紧密相关，当然也需要设定目标与规划开发周期等事宜。
    • 是否有名份。总不可能天天当小三，上不了台面来正式立项，项目过半可能大家就没动力了。而如何做到能正式立项这是个难点。当然，也需要有所激励。
    从我的现在的角度分开诠释下上列其中的几个点

    关于团队

    我很幸运，有幸在之前能够带些新人，实习生；也负责了几个产品线。
    直接上级也能放权，让我自由的去计划和控制这个组织，而新人和实习生也很出色；
    虽然我们平时争吵，但彼此相互信任。
    因此，对于我而言，团队是没有什么问题的，我有这个权利在我的能力范围内让开发人员参与一起开发。

    我曾在公司内的wiki里搜索很多类似的研究项目，
    这些项目要么过一阵子就夭折了
    要么是玩玩而已；

    而最后，仔细想想，很大程度上是没有团队在做。
    所以，这是做一个好的技术变现的前提。

    目标、成就感及回报

    两个选择：
    • 很累，做大家想使用的产品。
    • 很累，做没有人用的产品。
    当然我们有其他的选择，例如我也曾想过
    是否也可以不累，做大家想使用的产品。
    思来想去，还是我们用业余时间做吧。毕竟我们不是研究院，给大把时间研究能让产品间接使用的产品。
    如果用工作时间做，则对其他的同学不是太公平。。。

    所以，我愿意选前者。

    产品有没有用在于你的目标和定位是否正确，正如前面所说，不是研究院，最多也算半个工程院。
    所以所做的技术变现必须马上或不久就能用上，并为你现在所做的业务产生价值。
    价值包括，降低成本或者提高工作效率等。
    如果目标定位错误，就像是你扣衬衣的扣子，第一颗扣错，后面再扣得再好也是白费劲。

    如果定位没有问题，那么随之努力而来的就是你的推广。
    推广是需要时机的，我们假设一出demo时就推广，可能根本没有去用，凉水就上来了。
    毕竟是个demo而已，另外的是又担心你现在根本没人力去投入，等你真正开发完了之后可能已经人走茶凉。
    所以我这次推广是等到有可用版本之后再做推广。

    可用版本上线之后，推进使用，然后立马产出第二个稍成熟版本；
    接下来再修正，重构也好，增加大功能也好，这时你可以稍微慢点琢磨了。

    其实这个技术项目我两年前就想做，也做过demo，发过邮件，最后大家觉得是不错，很好，可以试试呀。
    但最后不了了之。

    我自己总结了经验教训，这次重新出发

    目前通过这一个季度的推广与开发，终于在部门内部有反应了，
    更让我欣喜的是其他好几个部门的人都找到我们，让我们去讲解，合作等。
    也趁给部门技术做ppt的时候慢慢浮上水面，总算现在不是小三了，也可以开始申请域名、服务器了。
    这也算是给我们的肯定与鼓励，是个新的起点。

    感谢团队的每一个人。

    其他杂想

    最后，表明我的观点，在业务型的公司里用你的 技术变现 就是 创业！不知你是否也是这么想的？
    一个项目成功健康与否除了方法论与实践外，很重要的一点就是环境。

    一个公司是否有一个环境能让技术人员产出真正对公司有利，又对工程师有利双赢的产品呢？
    如何有一个常态的技术变现环境就好比如何有一个好的创业环境。

    怎一个难字了得？

    夜深了，刚坐飞机回来，头有点晕，可能文章思路有点乱，哪天有空再整整吧。]]>