Hot For Coding
  • 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

    ...

    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

  • CentOS7 ifconfig Command not found

    CentOS7刚发布,我忍不住把DELL T410从CentOS6升级到CentOS7。好不容易等安装结束后,立即配置网络,然后在yum源上安装环境。可是执行ifconfig的时候系统提示让我傻了眼

    [root@chaoge ~]# ifconfig
    -bash: ifconfig: Command not found
    

    这可是新安装的系统,怎么会没找到熟悉ifconfig命令呢?网上搜一下,一大堆人都在说是环境变量问题,但我确信我的/etc/profile设置是对的,于是终于找到一篇文章说是安装下net-tools就好

    ...

    READ ALL

  • 上传插件神器Plupload

    之前我在博客中曾经介绍过一款基于Flash上传的插件叫SWFUpload,今天,我给大家介绍一款比SWFUpload更强大的上传插件: Plupload。

    大家可以点击这里看看官网的DEMO: http://www.plupload.com/examples/

    本地预览上传图片

    这个功能可以说非常实用,如上面的截图类似,可以在上传之前预览即将要上传的本地图片。可以先把所有要上传的图片都选择以后,再预览图里去做一些处理。

    full

    支持本地修改图片尺寸大小

    resize: {
      width: 200,
      height: 200,
      quality: 90,
      crop: true // crop to exact dimensions
    },
    

    ...

    READ ALL

  • NodeJS读取文件

    NodeJS自带fs(File System)模块用于操作文件相关

    var fs = require('fs');
     
    fs.readFile('file_path', 'utf8', function (err, contents) {
      if (err) {
        return console.error(err);
      }
    
      console.log(contents);
    });
    
    

    以上是非阻塞方式,有些人讨厌JavaScript的回调层层嵌套太难看,也可以使用阻塞方式

    var fs = require('fs');
     
    var contents = fs.readFileSync('file_path', 'utf8');
    console.log(contents);
    

    ...

    READ ALL