对于登录，为了防止机器人，部分网站需要配合验证码进行登录。常用的Gem有 recaptcha 和 simple_captcha。

下面简要描写一下，我的使用过程。项目是在他人的基础上修改的，他人已经使用 simple_captcha 提供了验证码登录的功能。但是没有刷新的按键功能。

对于“无刷新的验证码”登录功能，可以参考 https://github.com/galetahub/simple-captcha。 以下是添加刷新功能的过程。

原代码中，登录页面的views代码为：

1

<%= show_simple_captcha(:distortion => 'high',:image_style => 'simply_green') %>

此代码会自动添加输入框和验证码图片，其中的参数可以参考之前 github 项目链接。

需要添加刷新功能，就添加按钮：

1
2
3
4

<%= show_simple_captcha(:distortion => 'high',:image_style => 'simply_green') %>
<div class="refresh_simple_captcha">
    <a href="javascript:;">点击刷新验证码</a>
</div>

通过观察，页面中的验证码图片的链接值：

1

<img src="http://127.0.0.1:3000/simple_captcha/simple_captcha?distortion=high&amp;image_style=simply_green&amp;simple_captcha_key=9e02709d78e964e4802b6b56937cdc63a45eac87&amp;time=1394527382" alt="simple_captcha.jpg">

可以看到有四个参数值，包括：distortion, image_style, simple_captcha_key, time.

从资源的链接值中，可以试图简单并直接去改变time的值。

1
2

var src = $('#simple_captcha img').attr('src').split('time=')+'time='+(new Date()).valueOf();
$('#simple_captcha img').attr('src', src);

这个方案或许能够改变，但是字符还是那几个；甚至，可能没有发生变化。可以想象一下其它的参数，毕竟是刷新吧，可以将distortion=low了，提升一下差别特性。

那么，如果想进一步，如何使得字符也改变呢？

需要添加额外的接口，

1
2
3
4
5

class SimpleCaptchaController < ActionController::Base
  def update_simple_captcha
    render :layout => false
  end
end

添加 views/simple_captcha/update_simple_captcha.erb 文件，

1

<%=raw show_simple_captcha(:distortion => 'high',:image_style => 'simply_green') %>

注意，参数是要加上去的。

1
2
3
4
5

$('div.refresh_simple_captcha a').bind('click',function(e){
  $.get('/simple_captcha/update_simple_captcha', function(data){
    $("div#simple_captcha").replaceWith(data);
  });
});

这样就字符就可以改变了。

不得不说，网络型图标给予我们很多方便。其中，提供的图标可以利用css修改样式，而不是如png图片那样。

其中，bootstrap就为我们提供了不少的图标，但是我们有时刚不得不自定义些图标。那么，如何创建此类图标呢，下面是我的制作过程。

一、创建SVG图标文件

相信，此应该难不倒多数的设计师。对于设计，我是菜菜，由于我使用ubuntu的原因，我使用的是inkscape。

我的设计过程，也挺简单的。利用已有的图标，并在其基础上做出修改。

二、上传到Web App的网站

这类Web Font 网站提供了，很方便的工具，如 Fontello 、 IcoMoon 、Flaticon 。我使用的是Fontello。

将设计好的图标直接拖拉上页面，即可。

当出现“非单一路径”的问题时，需要重新修改一下图标。我就出现此情况，解决方法：

1. 拆分组合（如果有的话），保证单独的个体
2. 再对各个单独的个体做转化（对象转为路径、轮廓转为路径）
3. 使用「粘贴」「合并」，将多个路径合并了一个
4. 保存

然后选择所有上传的图标，注意页面显示的图标与你设计的是否一样，没问题后，点击下载。

三、添加进程序

参考 fontello.css 的路径，将 font 文件夹放到合适的地方。不考虑ie的话，可以只需要直接使用fontello-embeded.css文件。

最后，就可以如用 fontawsome 一样使用图标了。

大许多的编辑语言中，数组和对象通常为了节省内存，调用时，其内部机制会使用引用，而不是另外建立数组或者对象。JS也有这一问题，但实际操作中，有时我们真正想要的真正的复制对象（深度复制）。

1
2
3
4
5

var obj = {name: 'lisi', age: 22};
var newObj = obj;

newObj.name = 'zhangsan';
console.log(obj.name);  # zhangsan

利用jQuery复制整个对象，stackoverflow

1
2
3
4
5

var obj = {name: 'lisi', age: 22};
var newObj1 = $.extend(true, {}, obj);

newObj1.name = 'zhangsan';
console.log(obj.name);  # lisi

在这个例子中，其实用

1

var newObj2 = $.extend({}, obj);

也是可以的。但是，对于多层属性时，需要参数true。

However, by passing true for the first function argument, objects will be recursively merged.

由于是开始接触angularjs，所以很多效果都是用jquery/js的思维去做的，但是angularjs是不提倡直接操作dom元素的。这一直很让我纠结，慢慢去修正吧。

相信，显示与隐藏是十分常见的功能／效果。刚开始，我是用jquery去实现，

1
2
3
4
5
6
7

$('.ele')
  .mouseenter(function(){
    $(this).find('.text').show();
  })
  .mouseleave(function(){
    $(this).find('.text').hide();
  });

但是这就直接操作dom了，怎么避免这些不好的操作呢，就要使用angular提供的或者自己编写的directives。

从官网页面中可以找到相关的directives：ngHide、ngShow、ngMouseenter、ngMouseleave。

1
2
3
4
5
6
7

%a( ng-repeat="item in items"
    ng-mouseenter="hover(item)"
    ng-mouseleave="hover(item)"
  )
  %img(ng-src="...")
  .text(ng-show="item.show")
    %span item.name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

app.controller('indexCtrl', ['$scope', function($scope){
  $scope.items = [
    {
      name: '..'
    }
    ,{
      name: '....'
    }
  ];

  $scope.hover = function(item){
    item.show = !item.show;
  };

}]);

效果是，默认的文字名称是隐藏的，因为开始时item.show是没有设置的，为false。 当鼠标移进移出时，会触发hover方法 ，修改相应item.show的值。

相信大家开始接触ng-repeat时，很容易就明白了以下代码的作用：

1
2

%li(ng-repeat="item in items")
  %span 

那么，当ng-repeat和ng-model结合起来呢：

1
2
3
4

%li(ng-repeat="item in items")
  %input(type="radio" ng-model="select_item" value="")

%input(type="text" value="select_item")

从代码上看，多个RadioBtn分在同一组，然后显示选择项的值。但是，这在实际操作中是不行的。

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

ng-repeat会为每个实例产生自己的作用域。也就是说，ng-model="select_item"与items不是同一作用层级的；而相似的，ng-model="select_item"和value="select_item"是同一作用层级的。所以，value="select_item"并不能正常访问ng-model="select_item"中的变化值，需要将ng-model提升层级，

1
2
3
4

%li(ng-repeat="item in items")
  %input(type="radio" ng-model="$parent.select_item" name="item" value="")

%input(type="text" value="select_item")

好久没有写文章了，在这里，更甚。

不知道为不什么，今天突然想起是折腾一下自己的博客。好吧，自从 writing.io 声明关闭之后，站主谈到的我们都是在重复造轮子，确实是。

年初折腾的博客网站，基本只有我一个人。没有任何的访问量，真心没有什么念头。生活的种种，又没有空去打理些什么，可能以后得慢慢回归 pages.github.com 了。

Greyshade 也是修改别人的，在它的基础上，再做了些修改。反正，在我这里，有许多样式都觉得有问题。

修改的部分包括：

• .left-col
• article header h1
• .archives article time, tags
• …

发现问题，以后再继续吧。

使用了 Inkscape 画了两张图

作为编程的人员来说，视觉设计很可能会很勉强，我也不例外。更多时候，我的视觉设计基本是利用前端框架，呵呵。 我试图改变，于是，贴上两张图…

不得不承认，虽然自己常常以文艺青年自居，但是，更多时候，只能算是普通青年与2B青年之间。

角落的吉他，已经忘却了声音，却尘法饱满；柜上的四五本图书，痕迹永远的是前面几页；甚至，还有《秘密》《秘密2》…

想拾起些什么，却又不能回答丢了些什么…

打住！

说说，页面设计。AI，相信是大多数设计师使用的工具吧，然而，在 Ubuntu 中，我使用了 Inkscape。

自己凭空，想象、猜想、臆测…

结果，得出的视觉效果，连自己都不能容忍。不得不从 Dribbble 上找图，自己在 Inkscape 上画。

所以，我说，我画了「两张图」，而不是设计！

Blog Design

参照别人的成果，画出来的。

CMS

参照别人的成果，画出来的。

工具，永远要记住的是其性质，它就是用来用的。由于很长时间，没有用画图相关的工具了，手不由得变得生疏。圈圈点点的东西，很多。

记得之前选修课时，学过很多的工具，当时学得还蛮好的。但是，岁月怎么看都是刀，一片片刮下的，永远都只会沉下深海。

画这两张图时，我更多的体会是：要先有内容。没有内容，感觉就是一张大白纸，很难凭空去设计些什么，就如刚开始的样子。或者说，自己至少在心里，确定设计的目的是什么，有什么作用。不能简单的以为，自己可以设计好框架，任何人可以往里面加内容，如何如何的…

希望自己更文艺些，不想太被快节奏的物质生活所左右，或者…

最近，遇到一个问题，不同的浏览器之间对定位展现出来的页面效果不一样，甚至同是chrome，但是window和*nix的都不一样。

比如：

1
2
3
4
5
6

# css file

.cont {
  position: relative;
  top: -6px;
}

这是简单的相对定位代码，绝对定位就更不好说了，可能出现的问题就更多了。绝对定位更多使用在如左边的导航操作区。对于不同浏览器之间的效果差别，我在这就不好贴出来了。

通过我的试验，感觉定位基本都可以用另外的方法替代。可简单由float、margin、padding构成：

1
2
3
4
5

.cont {
  float: right:
  padding-right: 10px;
  ...
}

有时会不得不用到 margin，不过在我记忆中，好像不同的浏览器中初始值也不一样，此知识点的来源是找不到了。我潜意识里能不用则不用。

听同事说，定位比一般样式要耗资源，是不是呢！！

最近看到一个不同浏览器内核不同的代码，如webkit:

1
2
3

@media screen and (-webkit-min-device-pixel-ratio:0) {
  ...
}

更多不同浏览器差别及相应的语法技巧，可以转到 browserhacks，对于调试浏览器的兼容性的开发者来说是十分有益的。可恶的浏览器之争，一家独大，对于开发者来说也不见得是坏事。

从腾讯招聘微信看到的：http://codestar.alloyteam.com/1/1 ，有些意思。我的过程无厘头。

1/1

这一关的输入名字与邮箱。想当然地，很简单了。但是，输入相关项后，居然还是不能进入。这也是特工任务－－走后门？tx提倡走后门吗，节操何在？

抓包？Firefox 用户的优势体现出来了，firebug或者自带控制台的也行。请求信息中，会返回错误，其中提示没有timestamps。

好吧，从命令行中，敲入并执行：

1

$('input[name=timestamps]').value=(new Date()).valueOf()

OK，点击「打开」吧。

1/2

这个画企鹅的事，我从来没有想过。关于这自栩的事，好吧，不说了。

但是题目让我迷惑了很久！

第一个题目还简单：

1

border-radius: 50%;

第二个我实在想了好久，真心的。一直找到 border-corner-shape这一属性，其中还看到http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/ 。但结果还是不出来，可能是firefox不支持，或者是tx的js测试响应程序不支持？

没办法，只能看看页面了。幸运的是，页面的注释中有，

可参考 http://www.alloyteam.com/2012/10/css3-draw-qq-logo/

看了里面的方法，思想开朗了。之前的css运用中，一直没有注意啊，border 还有这一模型：

代码：

1
2
3
4
5
6
7

  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transform-origin: top right;
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);

  ...

http://jsfiddle.net/shatle/fgLLS/

1/3

这个吧，实在没心思和时间看API文档，直接收藏了牛人的代码，然后「开战」…

1/4

第一灯，数组克隆：

1
2
3

var clone = function(arr){
return arr.slice(0);
}

二灯，字符串去前后空格trim：

开始想偷工减料的：

1

str.ltrim().rtrim();

但是不行啊，后来是：

1

str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

不过，这个应该也行

1

str.replace(/^\s+|\s+$/g,'');

三灯，NodeList to Array：

1

Array.prototype.slice.call(list);

1/5

找出数字和为最大的路径。其实我是看感觉点的，基本的思路是：首先，从底往上，找出每行的最大数的方位；从上往下，预估两三行吧，差不多的，然后就过了。

前两天笔试时，多选 Date 的语法，我经常用的有

1
2

new Date(1999,10,10);
new Date("1999-10-10");

其它的不敢多选，回来查看了 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date ，基本语法有：

1
2
3
4

new Date();
new Date(value);
new Date(dateString);
new Date(year, month, day [, hour, minute, second, millisecond]);

好吧，这个dateString很恼人啊，幸好链接了 http://tools.ietf.org/html/rfc2822#page-14 。

下面形象地列出些dateString实例：

1
2
3
4
5
6

new Date("1999-10-10");
new Date("1999/10/10");
new Date("Oct* 10, 1999");
new Date("October 10, 1999");
new Date("1999-Oct-10");
new Date("1999/Oct/10");

#Date #js