Hot For Coding
近期遇到几个值得记录的问题

从八月后,我的站点评论功能失效了,也一直忙都没怎么关注,最近仔细看了一下这个问题,居然查出几个问题。

Tornado4 xsrftoken

Tornado一推出4版本我就立即升级了,因为pip做的就像npm一样太容易了,一条命令就搞定,你不需要手动下载然后解压再python setup.py安装。感觉在升级Tornado后评论就没了,因为一连几个月都没有收到评论邮件。于是最近才抽空测试了一下,终于发现问题了,因为我的站点开启xsrftoken,而提交的时候居然提示我xsrftoken不匹配。然而其它API是正常的,仔细看了一下,留言页面生成的xsrftoken也是每次刷新页面都随机生成的,这就奇怪了。

...

READ ALL

Git根据主机名配置使用不同的rsa秘钥

使用过git的应该对id_rsa秘钥不陌生,总得用Github吧,生成id_rsa很容易

ssh-keygen -t rsa -C "$your_email"

默认情况下,这个秘钥是在账户目录的.ssh目录生成id_rsa文件,对应一个id_rsa.pub公钥文件,实际上这就是ssh协议使用的东西,Git可以使用ssh或者https协议,通常情况下使用ssh协议比较安全。在使用ssh密钥校验模式前,通常先在客户端生成一个密钥对,密钥对可以使用已支持的几种加密算法,但通常rsa算法最常使用

$ ssh-keygen -t rsa -C "test@test.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/zhong/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/zhong/.ssh/id_rsa.
Your public key has been saved in /c/Users/zhong/.ssh/id_rsa.pub.
The key fingerprint is:
5b:44:7e:b8:e5:20:3b:a8:2b:63:45:c0:f8:73:87:f3 test@test.com
The key's randomart image is:
+--[ RSA 2048]----+
| o        .      |
|. o      o .     |
| . . .  . = o    |
|  o = .. + *     |
|   + +. S o .    |
|    ..E  +       |
|   ..   .        |
|  +  .           |
| . o.            |
+-----------------+

...

READ ALL

AngularJS神奇的排序模块ui-sortable

AngularJS推出后迅速成为前端框架里独树一帜的牛逼框架,特别是做数据呈现页面的更是觉得前端开发和部署应该是独立的,服务器端只做好数据API即可。

好,废话不多说,本次介绍的模块是angularjs-ui-sortable,由于angularjs-ui-sortable是基于jQueryUI开发,所以要使用这个模块必须先引入jQuery与jQueryUI,angularjs-ui-sortable的github仓库地址:https://github.com/angular-ui/ui-sortable

仓库的README里就写明了使用要求:

...

READ ALL

WebStorm9遇到一些问题

tabsize不生效

最近,是栽在WebStorm上了,刚升级到最新版本WebStorm9以后发现一个很奇怪的问题,以前的个别项目tabsize居然只有2个空格,而settings里明明是设置了4个长度

full

然而代码还是以2个空格的tab大小缩进,习惯了4个tab缩进的我看见这代码格式,完全无法忍受

full

editorconfig覆盖配置

来来回回查看settings里的东西,把project下的.idea目录删除了还是不可以,而让人更奇怪的事,所有新建的项目以及部分旧的项目所有tabsize都是settings设置的4个长度。难道有问题的项目下有什么隐藏的配置文件吗?通常我只知道.idea目录是WebStorm生成的,就在这时发现有问题的项目目录下有一个.editorconfig文件,打开文件一看,果然有一个indent_size设置

...

READ ALL

WebStorm编写CoffeeScript的编译问题

写过Python或者Ruby的朋友,应该都喜欢上CoffeeScript,相信用了CoffeeScript后你就不会再想回去写JavaScript的,WebStorm对CoffeeScript支持的非常好,就如同它对NodeJS支持一样出色,利用它的File Watchers功能加上coffee.cmd即可轻松在编写CoffeeScript时在保存文件时自动编译出JavaScript文件,这里要说说在WebStorm中设置File Watchers遇到到问题。按照官网的提示,需要先安装NodeJS,然后再安装CoffeeScript

npm install -g coffee-script

...

READ ALL

JavaScript + CSS3写了一个前端验证码插件

接触的大部分项目中,验证码一直都是服务器端干的事,这两天正好有一个页面需要验证码,想大部分项目貌似对安全性要求不是很高,又要求有点阻止机器人的技巧,于是就用前端写了一个验证码。并利用CSS3的transform属性里的rotate设置旋转,再随机弄点干扰线,最后为了在所有DOM节点的上边加一层opacity=0的div,一个前端验证码就出来了

点这里看DEMO

full

核心JavaScript代码

...

READ ALL

如何在Less中使用使用calc

Less的好处不用说大家都知道,确实让写CSS的人不在痛苦了,最近我在Less里加入calc时确发现了有点问题,我在Less中这么写

div {
  width: calc(100% - 30px);
}

结果Less把这个当成运算式去执行了,结果给我解析成这样:

div {
  width: calc(70%);
}

于是,我把Less改写成这样:

div {
  width : calc(~"100% - 30px");
}

解析结果正常:

div {
  width: calc(100% - 30px);
}

...

READ ALL

strongSwan配置惨痛教训

strongSwan

因为喜欢Win8 METRO UI的风格,所以买了一个NOKIA手机,搭载WP8.1系统。平时用惯了iPhone的PPTP拨VPN的方式在WP8.1里居然不能使用PPTP的方式拨VPN了,WP8.1里拨VPN只支持IKEv2方式,然而Google后发现搭建IKEv2教程非常少,中文教程更是可怜的狠。

但Linode大流量不用放着很浪费,于是终于找到一篇像样的教程后开始照着教程安装,教程是5.13版本,而最新的strongSwan已经5.20版本,喜欢新版本的我毫不犹豫就下了5.2版本开始安装。过程都很顺利,安装、生成证书、下到iPhone,Win8,NOKIA上,都能成功使用IKEv2方式拨上VPN,但都有一个问题:都打不开任何网页,Win8的网络标志直接打上一个叹号。但ssh还连接着,证明可能是DNS问题,于是我换了N组DNS,包括Google的8.8.8.8/8.8.4.4都试过了,问题还是一样。又没有任何头绪的情况下,只好暂时放弃改天再弄。往后那几天我一直认为是DNS问题,但一直情况依旧,证书从域名换到IP方式也不行,strongSwan从5.2降到5.13还是不行,真没辙了。

...

READ ALL

requestAnimationFrame能替代setInterval吗?

没有requestAnimationFrame之前

先来看看传统的动画效果是怎么制作的?大多数都是使用setTimeout或者setInterval加上一个延迟时间以及每一个动作单元的大小实现每一帧的绘制效果,连贯后看起来即成了动画。如下实例:

var $div = $("#myDiv");
 
var loop = setInterval(function () {
  if ($div.position().left > 500) {
    clearInterval(loop);
    loop = null;
  } else {
    $div.css("left", $div.posisition().left + 5 + "px");
  }
}, 20);

...

READ ALL

NodeJS执行系统命令

在NodeJS中执行系统命令可以使用child_process的exec函数

const exec = require('child_process').exec;
const child = exec('ll /webs | wc -l', (error, stdout, stderr) => {
  console.log(`stdout: ${stdout}`);
  console.log(`stderr: ${stderr}`);
  if (error !== null) {
    console.log(`exec error: ${error}`);
  }
});

...

READ ALL