Ethan's Dream About me

昨天同事找到我，说咱们的“客户端下载”在IE6下通过短信下载的方式不能用。

打开IE Tester测试发现确实不能用，提示验证码错误。

先讲下我们的页面结构，为了实现前后端分离，我们现在的做法是将静态页面和逻辑处理分别放在不同服务器上面的，这样可以避开繁琐的发布流程方便前端修改。所以，像通过短信下载这类的逻辑就需要前端Post给后端，原本后端只支持https，但我们的页面是http，由http转到https的过程中部分浏览器会弹出安全警告框，因此将后端改成了https和http并存的方式。

改完后却出现了IE6无法下载的情况，查看http的header显示，当我请求POST数据到后端http时，后端返回一个302状态Location Redirect到了https，也就是最终还是POST到了https的页面，那为什么服务器会拿不到POST过去的正确数据呢？

当IE6 POST请求由http转到https后，笨笨的IE6认为这还是http连接，于是照样采用非加密方式向服务器POST数据。先是发送Header信息“POST / HTTP/1.1 Content-Type: application/x-www-form-urlencoded”标明这是一个POST请求且有数据主体，又因为SSL(https)只对请求主体内容加密，Header并不加密（通过Fiddler可以看到），服务器便能接收到请求，但是由于是通过加密通道获取到数据主体，服务器则将其看作加密数据进行解密，于是，杯具就这样造成了。而其他浏览器，处理则聪明多了。

最终还是无奈的改回到https咯，等待服务器改成新的http/https共存方案吧。

Transition是CSS3中新添加的特性，不知道翻译成什么叫法更好听一点，暂且叫做“转换”吧，即当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑，可以增强网站的体验。

基础知识

Transition对应的CSS属性列表：
transition-property
* 指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。
* 初始默认值为all.

transition-duration
* 指定“转换”过程的时间，如：1s、none。
* 初始默认值为0.

transition-timing-function
* 指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。

* 初始默认值为default.

transition-delay
* 指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.

以上属性可看下面这个demo（如果无法看到效果，请更换你的浏览器）：

随机更改高度和宽度 设定transition为none

深度问题挖掘

属性值连写（短属性）
* transition和background等CSS属性一样支持属性值连写，比如：-webkit-transition: width 1s easy-in-out;
* 需要值得注意的是，原则上所有属性值是不区分位置的，但是“时间属性值”有点不同，浏览器会根据先后顺序决定，第一个可以解析为时间的属性值将体现为transition-duration，第二个可以解析为时间的属性值将体现为transition-delay

浏览器支持状况？
* Chrome 2+(-webkit-transition)，Firefox3.7+(-moz-transition)，Safari 3.1+(-webkit-transition)，Opera 10.5+(-o-transition)，其他浏览器暂不支持

Reflow和Repaint？
* Transition执行过程中，同样会产生大量的Reflow和Repaint，不过不同的是，这些变化都有一定是按照CSS中定义的运作方式规律的进行，所以浏览器可以预知整个过程的Reflow和Repaint过程，从而对其进行优化处理。(个人猜测，这需要查看webkit源码后再作结论)

正确理解Timing-function
* 这是几个Timing-function曲线图：

* 这是几个默认timing-function的示例：

* 一次“转变”便是一次曲线过程

激发Transition的条件
* 只要为元素指定任意一个以上的transition属性，元素在改变属性值的时候便可执行transition效果，并设其他属性值为初始值，详见上述属性列表。看这个demo：

<div style="-webkit-transition-duration:2s; width:300px; padding:10px;
border: 2px solid #ccc; background:#a01000;color:#fff;"
onmouseover="this.style.width='500px';"
onmouseout="this.style.width='300px';">鼠标移动到元素上方可观察变化效果</div>

* 值得注意的是，本文不止一次提到，是当“属性值”改变时才会激发transition效果，而不是所有“元素外观”的改变都会激发的，比如设定元素的宽度为百分比，然后改变浏览器大小，元素大小在改变的同时并未发现由transition的效果呈现。请看这两个demo。
————————————–邪恶的补充线——————————————

实践中还发现，当元素Layout不可见即display为none时，操作元素为block的同时操作其他可transition属性时，无法激发transition效果。解决办法为，先将元素设为block（或其他可见值），再setTimeout(function(){ /**属性改变代码**/ }, 0)，将transition操作提到js操作队列最后执行。//2010-06-01

收尾

嗯，transition就研究到这里吧，文章中有些只是个人臆测的结论，请不要盲目相信，随后我将继续扫一遍webkit中关于transition的源码再给出结论。

发现写一篇文章真累，废寝忘食，腰酸背疼，更加葱白大牛们写blog的毅力了，所以要懂得珍惜人家的劳动成果。

以前碰到弹出层被Select框突出的时候，都是靠再弹出层上价格iframe来盖住，因为再ie6中iframe和select以及object都属于特殊对象，无论你改变div的zIndex为多大都照样会出现这种情况。

前段时间做支付宝手机站项目的时候又遇到了这个问题，无奈，用传统iframe解决的时候发现项目中弹出层背后还有半透明层，如果使用iframe达不到需要的效果。

但在使用iframe的时候发现，select box更像是被隐藏掉了，使用iframe之前：

使用iframe之后：

于是萌生了针对ie6操作dom将所有select元素隐藏掉。于是写了以下函数（改进版）：

/**
  * s - Bool, 控制selectbox为显示(false)或隐藏(true)
  * e - DomElement, 控制selectbox dom查询深度，有利于提高效率
  **/
var hideSelectBox = function(s, e){
    if(!window.XMLHttpRequest){  //Detect IE6
        var d = e||document;
        var b = d.getElementsByTagName('select');
        for(var i=0,l=b.length; i<l; i++){
            b[i].style.visibility = s?'hidden':'visible';
        }
    }
};

查看DEMO

最近捣腾了一个美国vps，把博客之类的都移民到国外去，由于平时常要在家里和公司来回切换，所以顺便用作平时同步的服务器。

虽然Google这个大好人提供了免费的SVN服务器，但是，他是全公开的，我个人除了代码外，可能还要同步些敏感信息。又想过付费买些SVN或GIT的服务，不靠谱的不敢买，靠谱的价格又贵，还不如自己买个VPS，放心多了，话不多说，开工。

这台VPS买了的时候是提供商给我装的干净的CentOS5.4，不过它太干净了，很多软件开发包都没有装上，杯具，但是本着“缺啥补啥”的原则，其实也不麻烦。

VPS上的WEB Server是nginx，简单，配置文件简洁，但功能很强大，所以我一直摒弃庞大笨重的Apache，既然不用Apache，自然也不想为了装SVN而去装个Apache，下面讲讲我装的过程，留个备份。

先下载最新的SVN源码包并解压：http://subversion.apache.org/

$bash# wget http://subversion.tigris.org/downloads/subversion-1.6.9.tar.gz
$bash# tar xzvf subversion-1.6.9.tar.gz
$bash# cd subversion-1.6.9

配置并检测编译环境：

$bash# ./configure --prefix=/usr/local/svn --with-ssl
configure: Configuring Subversion 1.6.9
configure: creating config.nice
checking for gcc... gcc
checking for C compiler default output file name... a.out
checking whether the C compiler works... yes
checking whether we are cross compiling... no
checking for suffix of executables...
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
...
checking for APR... no
configure: WARNING: APR not found
The Apache Portable Runtime (APR) library cannot be found.
Please install APR on this system and supply the appropriate
--with-apr option to 'configure'

or

get it with SVN and put it in a subdirectory of this source
...
Whichever of the above you do, you probably need to do
something similar for apr-util, either providing both
--with-apr and --with-apr-util to 'configure', or
getting both from SVN with:
...

一大堆checking之后，configure中断，提示无法找到APR和APR-util，原来SVN需要Apache的两个。其实我也不知道APR和APR-util是啥，于是网上Google之，翻来翻去找到了这个http://svn.haxx.se/dev/archive-2010-01/0545.shtml，一个名叫subversion-deps的东西，包含了离开apache安装SVN所依赖的东西，就在原来下载SVN源码的下方。这下好了，下到服务器，放在和svn源码同一级目录下，解压，然后再次执行configure，又报以下错误：

configure: checking sqlite library
amalgamation not found at /usr/local/src/subversion-1.6.9/sqlite-amalgamation/sqlite3.c
checking sqlite3.h usability... no
checking sqlite3.h presence... no
checking for sqlite3.h... no
checking sqlite library version (via pkg-config)... no

An appropriate version of sqlite could not be found.  We recommmend
3.6.13, but require at least 3.4.0.
Please either install a newer sqlite on this system

提示所需要的SQLite版本过低，前往它给出的URL下载并直接configure&&make&&make install，继续回到svn源码目录，configure之，期待着万事大吉。

configure: creating ./config.status
config.status: creating Makefile
config.status: creating sqlite3.pc
config.status: creating config.h
config.status: executing libtool commands

OK，检测完成，可以开始编译了，运行make命令;

tclsh ./tool/mksqlite3h.tcl . >sqlite3.h
/bin/sh: tclsh: command not found
make: *** [sqlite3.h] Error 127

编译终止，貌似缺少tcl，好嘛，继续本着“缺啥补啥”的原则，yum install tcl，再make，make install，一路下来终于没有报错了，这下可万事大吉了，首先得感谢国家让我接受长达9年得有偿义务教育，才能让我能看得到这么多单词。

这几天的氛围，让我感觉有点难受。首先是前端合并到技术部，磊哥那双红红的眼睛；再到一向温婉谦和的么么茶突然的激动，似乎将前端的价值体现推到了一个风口浪尖。

按照常有的理解，前端开发合并到技术部其实应该是对前端的认可，对前端应该是上升了一个高度，但为什么在我们脸上却完全看不到兴奋。每个人都在沉思，心绪复杂，尤其是磊哥，我可以明显看到他那双红红的眼睛，他说自己的心中有种难舍的UED情结。可惜，我不懂，我也不可能懂。在他心中，前端开发不只是CSS、JS，前端同时也应该是用户、交互甚至是视觉。在UED的大环境中，他可以可以参与设计，可以参与调研，也可以为用户体验而PK。我想，他可能是有点担心了，担心以后很难再这样，他担心前端实现自身价值的路是不是就更难了。

昨天的周会，说实话，我有点吓到了。我完全没有意识到，前端价值对于么么茶来说是多么重要的东西，可以因为一个口误或是有点偏激的建议而变得如此的激动。再一次让我们反思，什么是前端，什么是前端价值。“如果连辛辛苦苦积累起来的基础都丢掉了，那还做什么，那就真成了个切页面的了”，这让我突然想起，以前的我们被别人的定义也就是带有藐视的“页面仔”，但发展到现在不一样了，html、css、js、压缩、优化，没有人研究得比前端透彻。

每个人都在努力寻求着自己价值得体现。有梦想的人生是很美好的，当你翻过一个又一个的山头，看着广袤富庶的平原就在前面不远处的时候，你会非常的兴奋，即便那只是海市蜃楼，你也会忘掉身上的酸楚和路上的荆棘。

其实，我们并没什么不一样，都不过是一群追梦的人罢了。