请叫我一米

一般情况下，我们都使用 JavaScript 的 console.log() 进行 debug 但是，对于 Object 来说，每次 console.log 之后，输出的都是不是十分有好的数据，例如：

var languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.log(languages);

输出的就如同下图所示(当然，会根据不同的浏览器以及不同的版本会有所差别)：

logging_with_console_log.

然后呢，其实看起来还是那么回事，虽然麻烦点，但是还可以看的清楚，到底什么是什么东西。

再然后呢？如果我们使用这里介绍的 console.table 呢？

不过，聪明的人一眼就看出来其中的玄机了，或者，看到这里，直接就去浏览器的console里面，执行这句代码就完了。怎么样？很好用吧？

不过还是给个例子比较好，因为大部分都比较懒嘛。
还是上边的对象，然后使用 console.table(language) 输出看看。

logging_with_console_table

看到了吧，多么的一目了然！

然后点击各个表头试试看，还可以排序哦。

logging_with_console_table_sorted

好了，上面是数组，但是其实对于对象也是可以使用的哦。

var languages = {
    csharp: { name: "C#", paradigm: "object-oriented" },
    fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

然后看看结果，看到了吧？

logging_with_console_table_object

可是，如果就这么点，那么除了更好的阅读方式之外，就没什么意思。

那么，它还可以过滤，哈哈。

这么：

console.table(languages, ["name", "paradigm"]); //多个 key 组成的数组

或者这么：

console.table(languages, "name”); //单个 key

很多内容来自：http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

前几天，在 Twitter 看到一句非常整洁的代码：

var bind = Function.prototype.call.bind(Function.prototype.bind);

第一次看的时候，我可以知道这段代码想干嘛，它让 x.y(z) 变成 y(x,z). 带着非常愉快的心情，我把这段代码给我的学生们看，但是，他们问我这段代码干嘛用呢。然后我就开始解释，但是我不知道从何说起，然后我就转身走开了。

应该明白的是，大部分比较好的代码，应该直接告诉我们它们是用来做什么的，带着这些在函数式 JavaScript 领域的经验，并且也在不断的阅读函数式 JavaScript 相关的书籍，在读的时候，我觉得是没有任何问题的，但是解释，将这些函数式程序解释给别人来说，还是没有太多经验。

但是，我还是想尝试下，通过我的方式，一些简单的示例，还有大量的注释，来解释一下这段代码的意思。

定义一个简单的对象 context

var context = {foo : “bar”};

定义一个函数，使用了一个在 this 上下文中，被命名为 foo 的变量，

function returnFoo(){
	return this.foo;
}

这个变量不存在于作用域中，因此，其返回 undefined。
（具体解释为，此时， this 指代全局的 window，而 window.foo 没有定义，所以返回 undefined）

returnFoo(); // undefined

但是，如果我们将此函数绑定到某个上下文。

var bound = returnFoo.bind(context);

现在变量 foo 存在于作用域中了.
（即，在 context 这个上下文中，是有定义 foo 变量的）

bound(); // bar

这就是 Function.prototype.bind 的作用，因为 returnFoo 是个函数，所以其继承了 function 的 prototype。

除了这种方式，还有另外其他方式来改变一个函数的上下文。例如 call 和 apply。

returnFoo.call(content); // bar
returnFoo.apply(content); // bar

还有就是将函数附加给某个对象，作为某个对象的一个方法。

content.returnFoo = returnFoo;
content.returnFoo();  // bar

让我们再来看看其他一些使用方法

Array.prototype 有一个特别好用的方法，叫做 slice。

在数组上调用此方法，它会返回一个从开始到结束的这个数组的一个拷贝，例如：

[1,2,3].slice(0,1);  // [1]

现在将，slice 赋值给一个本地变量。

var slice = Array.prototype.slice;

slice 现在未被绑定到任何对象，所以它和 Array.prototype.slice 比起来，对提供给它的上下文，或者 this，是不能正常的工作。

slice(0,1); //typeError
slice([1,2,3],0,1); //TypeError

但是，如果我们通过 call 或者 apply 来调用它，并且给它提供一个上下文。

slice.call([1,2,3],0,1);   // [1]
slice.apply([1,2,3],[0,1]);  //[1]

那么对于 bind 呢？我们来试试。

slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1,2,3],0,1);  //[1]

很酷吧，那么我们对 bind 使用和 slice 一样的方式。

var bind = Function.prototype.call.bind(Function.prototype.bind);

var content = {foo : ”bar”};
function returnFoo(){
	return this.foo;
}

var amazing = bind(returnFoo, content);
amazing();   //bar

这样，就明白了这段代码的意图。

这个bind 的解释是来源于 MDN 的，但是不明白为什么 Google 对 MDN 的东西这么低的评价，所以要翻页才能找到的。

翻译原文：Bind, Call and Apply in JavaScript

方法一：
该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。
HTML结构部分：

<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<span><img src="images/demo.jpg" alt="" /></span>
</div>

CSS样式部分：

<style type="text/css">
#box {
    width:500px;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box span {
    display:table-cell;
    vertical-align:middle;
}
#box img {
    border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box {
    position:relative;
    overflow:hidden;
}
#box span {
    position:absolute;
    left:50%;top:50%;
}
#box img {
    position:relative;
    left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二：
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法。
HTML结构部分：

<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<i></i><img src="images/demo.jpg" alt="" />
</div>

 
<style type="text/css">
#box{
    width:500px;height:400px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid #d3d3d3;background:#fff;
}
#box img {
    border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
    display:inline-block;
    height:100%;
    vertical-align:middle
}
#box img {
    vertical-align:middle
}
</style>
<![endif]-->

方法三：
该方法针对IE6/IE7，将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中，标准浏览器还是使用上面的方法来实现兼容，并且结构也是比较优雅。
HTML结构部分：

<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/demo.jpg" alt="" />
</div>

CSS样式部分：

#box {
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
    
    /* 兼容标准浏览器 */
    display: table-cell;
    vertical-align:middle;
	
    /* 兼容IE6/IE7 */
    *display:block;
    *font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
    *font-family:Arial; /* 防止非utf-8引起的hack失效问题，如gbk编码 */
}

#box img {
    vertical-align:middle;
}

以上方法来源于：雨夜带刀’s Blog

另一篇关于这个问题解决方案的文章，请看大小不固定的图片、多行文字的水平垂直居中。

主要出现了两个问题，第一个问题是，无法分区。表现的问题就是到 boot camp 助理最后一步的时候，分区老是不成功。

解决方法：重启按住 Command + R 选择磁盘工具，然后选择系统盘，检查错误，修复错误。然后重启再次使用 Boot Camp 就可以正常分区了。

第二个问题就是，安装程序无法创建新的系统分区，也无法定位现有系统分区。

苹果也给了解决方案，http://support.apple.com/kb/TS4599?viewlocale=zh_CN。

但是我的问题是，我把移动硬盘插在了左侧的 USB 接口上，并且 USB 的格式是 EXFAT 格式。

最后把移动硬盘去掉，顺利安装成功。

对于 IE6 也可以使用纯 CSS 来实现 position:fixed 的效果。直接上代码吧。
先是结构。

    <div class="container">
        我是IE6，使用 absolute 模拟 fixed.</br>
        这里多多复制几个，效果明显。
    </div>
    <div class="fixed"></div>

然后是 CSS。

        body {
            height:100%;
            overflow-y:auto;
            padding:0px;
            margin:0px;
        }
        .container {
            height:1800px;
            background:#CCC;
        }
        .fixed {
            position:fixed;
            top:50px;
            left:50px;
            background:red;
            height:50px;
            width:50px;
        }

还有对于 IE6 来说，加一个单独的样式

   <!--[if lte IE 6]>
        <style type="text/css">
            html {overflow-x:auto; overflow-y:hidden;}
            .fixed {
                position:absolute;
            }
        </style>
    <![endif]-->

原理就是对于 body 设置高度 100%，html 垂直方向上，超出高度给隐藏掉。然后里面的内容自己滚动，而 absolute 的相对于浏览器窗口的话，因为浏览器窗口就那么大，又不滚动，所以 absolute 看起来就 fixed 了。

但是这个有个问题，就是所有设置了 absolute 和 relative 的元素，都会表现为 fixed 的，所以还是有副作用的。不过可以用来做遮罩层。

例子可以使用 IE6 浏览器访问。

服务器用的是 DS 的年付 15$ 512内存，256 交换空间的这款。貌似我的系统是 Ubuntu 12.10 。因为 Gitlab 官方推荐是 1GB 内存，所以这个稍微显得有点危险，尝试了大概一个星期，最后终于安装成功了。下面说说我遇到的坑。

其实官方的安装文档蛮详细的，按照官方文档一步一步来，应该不会出问题。但是出了问题的话，还是不知道去哪里找解决方案，我就出了这两个问题，经过坚持不懈的搜索和尝试，最后终于解决了这个错误，因为几乎每次重新安装，都会出现这个错误，所以还是写在这里，一方面大家可以看看，一方面自己也做一个记录。

主要是两个地方，

一个是安装完成之后，执行 service gitlab start 的时候报错，并且启动不成功，可以通过 service gitlab status 来查看状态，如果启动成功了，就会看到 pid 等信息，访问网页版的会提示 502，在

cat /var/log/nginx/gitlat_error.log
 
2013/08/09 10:42:17 [crit] 32573#0: 30 connect() to unix:/home/gitlab/gitlab/tmp/sockets/gitlab.socket failed (2: No such file or directory) while connecting to upstream, client: **********, server: **********, request: "GET / HTTP/1.1", upstream: "http://unix:/home/gitlab/gitlab/tmp/sockets/gitlab.socket:/", host: "*******"

查看日志，会出现此问题。

如果遇到这个问题，尝试重启服务器，然后在启动 gitlab 尝试多试几次，如果还是不行的话，再尝试执行下面几行代码，记得先 cd /home/git/gitlab

sudo -u gitlab -H bundle exec rake assets:precompile RAILS_ENV=production

这样我是可以了，但是不知道你的问题解决没有。

然后就是 url 跳转到了 /user/sign_in 登录页面，但是此时我还是 502 了，此时说明 gitlab 执行成功了，但是还是有问题，经过搜索，在这篇博文中发现同样的错误，然后想起来，在按教程安装的时候，提示这步有错误，代码如下。

cp config/unicorn.rb.example config/unicorn.rb

执行这句的时候，提示没有此文件，但是在，config 目录下，发现了 unicorn.rb 文件，只不过是空的 0KB 大小，然后尝试再次执行此命令，一直都是提示没有此文件，
此时尝试执行下，

sudo -u git -H bundle install --deployment --without development test postgres aws

以安装 unicorn ，但是官方文档是不安装这个的，不知道为什么，反正我是安装了。可以和官方的文档对比下（在 Install Gems 这节），多安装了一个unicorn。不过这个应该不是必须的。

此时再次执行

cp config/unicorn.rb.example config/unicorn.rb

如果还是提示没有此文件，那么就大杀器来了。

将 config/unicorn.rb 拷贝一份到本地，将这个文件中的内容全部复制近本地的 unicorn.rb 中，然后将其上传到 config 中。然后再执行

bundle exec unicorn_rails -c config/unicorn.rb -E production -D

重启下 gitlab 再试试。然后我就解决了这个问题。

永远有多远，或许只有一米的距离.

使用 JavaScript 的 console.table() 进行 debug

Javascript 中的 Bind ，Call 以及 Apply

几种比较优雅的未知高度图片垂直居中的方案

Boot Camp 安装 windows 7 遇到的坑 MacBook Air 2013（Mid）

纯 CSS 的 IE6 position:fixed

安装 Gitlab 遇到的坑