wakatime 统计ide使用的编码时间

作者:matrix 发布时间:2018年1月25日星期四 分类:零零星星

昨晚听DaoTangBill说了下wakatime,感悟以前代码都TM白写了,连基本的时间记录都看不到 这工具简直是神器,没想过能统计编码时间,真是coder必备啊。
wakatime支持了很多IDE编辑器,IDEA家族,eclipse,sublime等 都有对应插件。只要编辑器是跨平台的,自然附加插件也就可以。
使用上只需要在IDE安装wakatime插件,输入key即可,完全不影响编码,不需要安装其余软件和设置开机启动操作。

官网

https://wakatime.com

获取账户 获取key

重新注册账户或者链接到GitHub之类的三方账户登录即可。

settings->account->Api Key

图片3868-wakatime 统计ide使用时间

安装IDE对应的插件

在ide的插件中搜索wakatime安装,最后输入key即可。

Quantify your coding

系统会自动默认会每周发送一周的统计报表到邮箱,使用中。。。 巴适
图片3869-wakatime 统计ide使用时间

参考:
http://www.iamlj.com/2016/07/recommend-tools-wakatime/

Ajax-hook拦截全局ajax请求操作

作者:matrix 发布时间:2017年12月13日星期三 分类:零零星星

github项目地址:https://github.com/wendux/ajax-hook/blob/master/src/ajaxhook.js

项目页面中有很多ajax接口请求,每次需要手动判断数据code进行错误消息提示,再加上有些使用jQuery,有些使用fetch操作,要是能有一个统一的$.ajaxSetup那就爽翻。搜索下ajax的全局拦截,有大神写好了,打开即食,NICE。代码量不大,大致的原理好像是把内置的XMLHttpRequest对象给代理了,克隆一份,进行伪装。请求操作都是通过的代理层,拦截、修改操作也都是可以的~

使用

加载ajaxhook.js文件,代码中给浏览器window对象注册全局方法:hookAjax,unHookAjax。

hookAjax //挂载拦截钩子
unHookAjax() //取消ajax请求代理

拦截处理操作

hookAjax方法注册拦截的切入点,执行回调操作。
这里用到onload 即请求完成获取数据的时候。
代码是放在vue项目里面,手动挂载DOM。若出现第一次错误请求没有成功拦截的情况,那就需要把代码放置在头部。

        //全局监听ajax请求,用于提示会话过期,和其他的错误消息。
        if ('function' === typeof(hookAjax)) {
            hookAjax({
                onload: function (xhr) {
                    if (xhr.status >= 500) return layer.alert('服务器报错,请联系管理员!'+"</br>请求地址:</br>"+xhr.responseURL, {icon: 2, title: '无形之刃 <3'});
                    var data = JSON.parse(xhr.responseText);
                    if (!!data) {
                        if (data.code !== 0) {
                            if (!!data.msg) {
                                layer.alert(data.msg, {icon: 2, title: 'ERROR'});
                            }
                        }
                    }
                }
            })
        }

拦截函数 如:onload 返回值是一个boolean,如果为true会阻断ajax请求,默认为false,不会阻断请求。

参考:
http://www.jianshu.com/p/9b634f1c9615

nginx配置proxy_cache缓存策略

作者:matrix 发布时间:2017年12月9日星期六 分类:零零星星

图片3703-nginx定向清理Proxy Cache缓存
之前有使用脚本删除缓存的记录,但是没有留下下proxy的使用,今天正好配置下下。
>> nginx定向清理Proxy Cache缓存

proxy是nginx的自带模块,作为前台代理后端的数据库请求,负载均衡啊什么的贼6

proxy配置

修改 nginx.conf文件配置 lnmp环境一般都是/usr/local/nginx/conf/nginx.conf
http代码块中添加proxy操作

> vi /usr/local/nginx/conf/nginx.conf #编辑文件

#添加如下内容
proxy_connect_timeout 2400;
proxy_read_timeout 240;
proxy_send_timeout 240;
proxy_buffer_size 16k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_request_buffering off;
proxy_cache_lock on;
proxy_cache_valid 200 206 403 1d;#默认全局缓存200,206,403响应状态码 1天
proxy_cache_use_stale updating;
proxy_temp_file_write_size 128k;

#配置缓存目录,以及keys_zone作用域名称
proxy_temp_path /var/tmp/nginx/proxy_temp_dir;
proxy_cache_path /var/tmp/nginx/proxy_cache levels=1:2 keys_zone=link:2m inactive=1d max_size=1g;

#是否忽略后端返回的Cache-Control,Expires响应头。
#proxy_ignore_headers Cache-Control;
#proxy_ignore_headers Expires;
proxy_ignore_headers Set-Cookie;

#设置代理的客户端请求ip等数据
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Remote-Host $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

或者也可以在http代码块中使用 include "hhtjim_proxy.conf";方式载入。

#vhost配置proxy_pass
找到需要配置的vhost主机,修改conf文件中server代码块

        proxy_cache link;
        proxy_cache_valid 200 30d;
        proxy_cache_valid 301 302 303 10m;
        proxy_cache_valid any 5m;

        #添加返回响应头,X-Cache标记是否命中缓存。
        add_header X-Cache "$upstream_cache_status";

        #拦截所有请求 到link负载均衡策略
        location / {
        proxy_pass http://link;
        }

配置负载均衡

依旧在http块中添加上游upstream

#自定义link名称
upstream link { 
    ip_hash;#负载均衡ip hash定位
    server 127.0.0.1:8182 weight=3; #权重为3
    server 127.0.0.1:8084 weight=1; #权重为1
    keepalive 32;
}

若没有配置多余后端服务,直接使用当前nginx也是可以的。
完整vhost配置记录如下:

#入口拦截
server
    {
        listen 80;
        #listen [::]:80;
        server_name www.hhtjim.com ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/www.hhtjim.com/;

        include other.conf;


        include enable-php.conf;

        proxy_cache link;
        proxy_cache_valid 200 30d;
        proxy_cache_valid any 5m;


    add_header X-Cache "$upstream_cache_status";

        location / {
        proxy_pass http://link;
        }
    }


#模拟网站后台程序,数据库处理
server
    {
        listen 8182;
        #listen [::]:80;
        server_name localhost ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/www.hhtjim.com/;

        include other.conf;

        include enable-php.conf;

        #Slim Framework
        location / {
            try_files $uri $uri/ /index.php$is_args$args;
        }


        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }
        access_log off;
    }

重启nginx

lnmp nginx start 

#或者 reload 未尝试
# lnmp nginx reload
# ./nginx -s reload 

踩坑

第一次配置完,nginx各种错误,什么缓存目录不存在,proxy_pass放置代码块不正确。

还有需要注意:后台服务器返回的响应头若是有cache-Control,Expires注意值,若是nocache,private 那就真的不缓存,也就全部MISS
最后,修改

1.修改后端程序返回的响应头,可控性最高。
2.设置proxy_ignore_headers 忽略掉头部
proxy_ignore_headers Cache-Control;
proxy_ignore_headers Expires;

参考:
http://blog.csdn.net/gamay/article/details/73613741
https://www.lvtao.net/server/224.html
http://blog.csdn.net/zstack_org/article/details/53940047
http://blog.csdn.net/wzx19840423/article/details/50474650
http://blog.51yip.com/apachenginx/1018.html

phpStorm配置vagrant下的xdebug

作者:matrix 发布时间:2017年10月15日星期日 分类:零零星星

测试环境:

服务端:vagrant下ubuntu16的lnmp.org一键安装包
IDE:phpStorm for mac
xdebug扩展进行断点调试

虚拟机安装配置xdebug扩展

连接vagrant ssh

cd ~
wget https://xdebug.org/files/xdebug-2.5.5.tgz
tar -zxvf xdebug-2.5.5.tgz
cd xdebug-2.5.5
/usr/local/php/bin/phpize #用phpize生成configure配置文件
./configure && make && make install

记录下Installing shared extensions的信息用于配置php.ini

2018-11-06 修改更新
尾部添加:

[xDebug]
zend_extension=/usr/local/php/lib/php/extensions/no-debug-non-zts-20121212/xdebug.so
xdebug.idekey = "PHPSTORM" #需要和ide根据保持抑制
xdebug.default_enable = 1
xdebug.remote_connect_back = 1
xdebug.remote_port = 9001 #需要和ide根据保持抑制
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler="dbgp"
xdebug.remote_log = /tmp/xdebug.log #日志记录 方便找错

chrome浏览器插件

安装官方推荐扩展 Xdebug helper
https://chrome.google.com/webstore/detail/eadndfjplgieldjbigjakmdgkmoaaaoc

配置插件xdebug helper
图片4182-phpStorm配置vagrant下的xdebug

确保IDE KEY和ini配置保持一致

配置phpStorm

确保Languages & Frameworks =》 PHP =》 Debug 配置端口和xdebug.remote_port一样。
图片4183-phpStorm配置vagrant下的xdebug

DBGP配置一致
图片4183-phpStorm配置vagrant下的xdebug

php -> servers 配置
图片4188-phpStorm配置vagrant下的xdebug

根据自己开发环境修改配置:

Name是Server名称,可以随便填写;
Host是项目的访问地址;
Port为你Web服务器的端口;
还需要配置项目路径的映射(path mapping),将项目的根目录以及public目录映射到Vagrant服务器中的绝对路径。这个需要确保一致

如果maping路径配置有问题 可能会出现 错误:

下午2:53  Debug session was finished without being paused
It may be caused by path mappings misconfiguration or not synchronized local and remote projects.
To figure out the problem check path mappings configuration for 'admin.sp' server at PHP|Servers or enable Break at first line in PHP scripts option (from Run menu).

这样会导致设置的断点无效,每次调试都会进入index.php入口

开始调试

开启xdebug监听 :Run -> Start Listening for PHP Debug Connections 或者点击顶部导航栏的☎️电话图标
图片4189-phpStorm配置vagrant下的xdebug

浏览器插件打开调试
图片4192-phpStorm配置vagrant下的xdebug

浏览器页面请求的网址即可看到调试信息

网页和api调试配置方式本质都是在 cookie 中自动添加XDEBUG_SESSION=phpStorm

调试快捷键

F7 通过当前行,进入下一行,如果该行是方法,则进入方法体
F8 通过当前行,进入下一行,如果该行是方法,也直接进入下一行,不进入方法体
F9 通过整个流程,全部顺序执行

参考:
https://blog.csdn.net/RobotYang123/article/details/80370030
https://www.fanhaobai.com/2017/09/xdebug-in-docker.html

https://segmentfault.com/a/1190000007789295
http://mrcelite.blog.51cto.com/2977858/1903157

macbook pro 13.3

作者:matrix 发布时间:2017年10月12日星期四 分类:零零星星

图片3807-剁手17款MBP+256GB MPXT2CH/A

以前用过

实话说苹果的电脑真的无敌,以前用过一段时间,刚开始没感觉什么 就只是别人看到的装逼范十足,其实用起来真心不错的。外观设计 电池续航 触控板 mac系统 屏幕显示真的官网所说 各行各业的利器,所以真心TM的贵,砸锅卖铁搞一台,真是大出血。

念念不忘

以前用过mac之后就一直想要一台,后来在油管上看各种mac的介绍,也找到好多测评体验的团队和Vlog主 TESTV很逗很四川,正能量的米奇沃克斯,都是从mac的介绍视频中入的粉。后面有考虑官翻版、闲鱼二手、JD日版 最后问了下罗污和张火火还是算了 买新不买旧 早买早享受!然后就JD自营店机子成功入手。

到手感觉

到手第一天,整体感觉不错 不爽的是触控板变大误触的可能性提高(或者没设置好)和接口前瞻,我是真心没设备支持这两个雷电3接口的鬼。二代蝴蝶键盘我觉得是可以接受的,适应了一天完全没问题。

后续

键盘问题

7月下旬键盘出现左边shift键闪烁不灵的情况,去太古里的苹果店检修没有出现问题,未果。
客服回复,此款电脑键盘属于apple二代蝴蝶键盘问题机型的范畴
8月初左边command类似问题
8月下旬s,c,v按键类似问题出现,但是问题概率低 很难检修。
官方声明:https://www.apple.com/cn/support/keyboard-service-program-for-macbook-and-macbook-pro/

10.02国庆再次送修
10.07取机。整个C面换掉(包含触控、电池),由于之前有浸液的情况 所以是自费¥2991.84。前些天淘宝¥1188买了apple care延保到2020年

vagrant+LNMP一键安装包 报500错误

作者:matrix 发布时间:2017年9月28日星期四 分类:零零星星

图片3791-vagrant+LNMP一键安装包的问题

问题

vagrant中的ubuntu环境安装了Lnmp一键安装包,TP5项目死活都无法访问,一直报错500,502。各种修改nginx.conf,最终还是需要查看nginx的error日志排查问题。

PHP message: PHP Warning:  require(/vagrant/bj-admin/thinkphp/start.php): failed to open stream: Operation not permitted in /vagrant/bj-admin/public/index.php on line 35
PHP message: PHP Fatal error:  require(): Failed opening required '/vagrant/bj-admin/public/../thinkphp/start.php' (include_path='.:/usr/local/php/lib/php') in /vagrant/bj-admin/public/index.php on line 35" while reading response header from upstream, client: 10.10.10.1, server: admin.esc.com, request: "GET / HTTP/1.1", upstream: "fastcgi://unix:/tmp/php-cgi.sock:", host: "admin.esc.com"
2017/09/28 13:19:09 [error] 1445#0: *1 FastCGI sent in stderr: "PHP message: PHP Warning:  require(): open_basedir restriction in effect. File(/vagrant/bj-admin/thinkphp/start.php) is not within the allowed path(s): (/vagrant/bj-admin/public/:/tmp/:/proc/) in /vagrant/bj-admin/public/index.php on line 35

就是如上的各种无法require,PHP中逐行exit. 用tail -f查看*error.log文件变化 太逗。
网上找好久解决办法,突然间发现关键字open_basedir,.user.ini 貌似这鬼东西有限制啊。早该想到Operation not permitted就是无权限和LNMP一键包的.user.ini有关就没这么多鸟事了。 因为TP5项目需要把的/public搞成web的root路径,LNMP默认使用.user.ini配置信息来防止跨站点目录访问 导致open_basedir的设置值限制了php的访问权限,也就not permitted。但是线上环境为什么没这个问题,这就不知道了。

解决方案

取消open_basedir限制
可以手动删除或者注释ini,最好使用lnmp一键包的工具脚本

> cd ~/lnmp1.4/tools  #进入lnmp一键包的tool目录
> ./remove_open_basedir_restriction.sh #执行脚本,按照选项操作
> ./remove_disable_function.sh #正巧这个我需要

P.S.
到现在用了差不多一个月的vagrant来模拟ubuntu生产环境,效果很棒。这个问题是上次遗留下来的,搞得我想打人了。一直等到今天接手TP5的项目继续搞 弄了一上午才好。 peace~

参考:
https://m.aliyun.com/yunqi/articles/34240
https://lnmp.org/faq/lnmp-vhost-add-howto.html

LNMP下防跨站、跨目录安全设置,仅支持PHP 5.3.3以上版本

ajax后退操作解决办法

作者:matrix 发布时间:2017年9月19日星期二 分类:零零星星

使用github项目

https://github.com/browserstate/history.js

问题场景

移动端网页列表(上拉加载执行ajax请求)中要在点击item详情页跳转后可返回,且返回页面中需要看到或定位到点击的来源位置。

测试

要实现准确定位,刚开始想的基本原理也就是俩页面之间跳转传递分页数和滚动条位置的数量,想过sessionstorage对象来存储或是用url中hash值、query参数来传递相关状态,列表页面中进行判断请求数据且修改ajax加载的分页起始数,但是url中的参数需要和后台进行协调才可以达到满意的效果,实现起来也麻烦。搜索找到好多方案 貌似history.js兼容各大浏览器,效果应该比较理想。

JQ后加载History的js文件:/history.js/scripts/bundled/html4+html5/jquery.history.js

测试分页使用scrollPagination的JQ插件实现翻页:

var urlscroll   = '';
var p = 1;

//获取缓存数据
//dom数据以及分页起始数
var dom = !!History.getState().data.dom?History.getState().data.dom:'';
var page = !!History.getState().data.p?History.getState().data.p:p;
p = page;
$(".test_list").append(dom);//追加缓存的dom
//end

$('.test_list').scrollPagination({
    'contentPage': urlscroll, // the url you are fetching the results
    'contentData': {'page':p}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
    'scrollTarget': $(window), // who gonna scroll? in this example, the full window
    'heightOffset': 0, // it gonna request when scroll is 10 pixels before the page ends
    'bottomHeight': $('.footer').height(), // it gonna request when scroll is 10 pixels before the page ends
    'beforeLoad': function(){ // before load function, you can display a preloader div
        //$('#loading-pic').show();
        this.flagRequesting = 0;
    },
    'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements

    //记录分页的dom数据
        for (var i = 0; i < elementsLoaded.length; i++) {
            dom += $(elementsLoaded[i]).html();
        }
        if(!!dom) History.pushState({'dom':dom,'p':this.contentData.page+1});//记录最后一次分页加载的dom数据以及下一页的起始数
        //end

        this.contentData.page++; 
         $(".test_list").append('<img src="/mobile/img/ads.jpg" class="ads_img">');

        }
    this.flagRequesting = 1;
    }
});

上面代码仅测试,需自行修改。
主要起作用的位置是 记录分页的dom数据获取缓存数据 两处注释块。
道理还是那样,只是更优化了些。这里缓存了所有ajax分页的DOM数据和请求的最后的页码,当返回到列表页面的时候获取缓存DOM并加载,起始的分页数也会还原。
history.js内部也是使用sessionstorage来缓存相关数据,所以设置state数据的时候需要将DOM对象转换为String字符串数据就可以缓存整个分页数据。
实际使用中会发现个别时候item详情页面中执行history.go(-1)或者点击A标签链接返回到列表页面的时候缓存的分页DOM数据可以正常的显示,但是滚动条定位就没达到想要的效果,所以要完美应该在获取缓存数据的时候添加一个scrollTop滚动条的复位操作,这样应该就巴适了。

嗯~~今天遇到的这个问题还好解决了,感谢开源奉献的人们。

peace~

参考:
http://www.cnblogs.com/songbyjson/p/4886615.html

五种解决方案:http://www.cnblogs.com/snandy/archive/2011/09/18/2180102.html

win平台使用vagrant搭建lnmp环境

作者:matrix 发布时间:2017年8月30日星期三 分类:零零星星

win10上面安装的phpStudy这些天有时候打不开网页 502,请求一直loading,就算是代码问题我也扶不住,安装个Redis,mongodb都超级麻烦,并且好多都模拟Linux做的东西,最终写出来的代码都要发布到linux的生产环境,倒不如就搞个服务器的克隆环境,有虚拟机+vagrant 简直是巴适。它可以实现文件的共享 从而方便宿主机到虚拟机的文件同步,也就是win上编写代码,虚拟机测试运行,中间无需自行拷贝代码文件到虚拟环境。
PHP一键开发环境到目前用过phpnow phpstudy xampp,前两者仅限win平台,xampp可以跨win和mac平台。网上很多都推荐用vagrant搭建开发环境,可以完全模拟服务器环境,多平台支持 今天试试水。

安装VirtualBox虚拟机

官网:https://www.virtualbox.org/wiki/Downloads

安装vagrant

官网:https://www.vagrantup.com/downloads.html

挂载vagrant的box镜像文件

win下cmd命令进入你需要共享到虚拟环境的文件夹根目录 如:~/dev
阅读剩余部分 »