走走停停看看 – 关注HTML,CSS,JavaScript,jQuery等前端开发

通过qBittorrent获取磁力链接对应的torrent文件

%LocalAppData%\qBittorrent\BT_backup

ssh 连接 virtualbox 虚拟机并解决乱码问题

装了个debian但没装桌面，进去乱码，就用ssh访问，默认NAT情况下只需要在虚拟机设置，网络，高级，端口转发里添加22端口就行了，就可以直接通过127.0.0.1:22进去了
至于乱码
apt update
apt install -y locales
sed -i ‘s/# zh_CN.UTF-8 UTF-8/zh_CN.UTF-8 UTF-8/’ /etc/locale.gen
cat >/etc/default/locale <<-‘EOF’
LANG=”zh_CN.UTF-8″
LANGUAGE=”zh_CN:zh”
EOF
locale-gen

ref: https://www.v2ex.com/t/647598

ps4 remote play 的端口转发

ps4wakeon 987
ps4 9295-9304

记一次Google Adsense收款

以前从来没弄过AdSense，也没收过款，之前由于疫情也一直没去弄。好不容易到了100美元了，就开始捣腾怎么收款的问题。最初是按照网上教程，用了西联汇款。结果跑了邮政中行建行浦发全都不能收，他们只能解付个人对个人的西联收款，公司对个人的没法操作，哪怕我准备了再齐全材料都没用。网上看了一圈也都是类似的问题。银行的人建议我改用电汇。

然后就改电汇了，随便选了一家建行。没几天银行短信来了，说有个电汇预到账，看金额是被收了5刀手续费。又过了一天开户行打电话过来了，叫我去银行入账。我就带着在线许可协议，三个月流水以及电汇账单过去了。

银行的工作人员一顿捣鼓，就入账了。期间聊了聊，说是谷歌对国内汇款数量超过限制了，所以每笔都要银行柜台审核后才能入账。不然我这种100刀的小额度是直接可以入账的。下次再收汇的话也一样要到柜台来提交材料。也不知道是谷歌对建行汇款超限了，还是超了全国银行的一个限额。如果是前者的话，下次考虑去小点的银行试试。

本来网上说还要一个敲章的合同，我是小客户，通过各种渠道实在是联系不到谷歌中国，又不想去他们办公室堵门，所以也就是去试试的，成了也好，为了这100刀也是操碎了心。过几个月再看看下次收汇如何把。

相对优雅的PS4直播

网上PS直播有很多文章，但大多需要编译和修改路由表。实际上PS4直播的时候，不一定需要自己编译NGINX,直接改HOSTS也不是不可以。本文就是用了这种方式，相对优雅，当然只是相对而已。

警告，本文并非0基础教程，需要相当多的Linux操作经验，慎入。

0.准备工作

一台支持openwrt的路由器
一个Linux系统，可以是虚拟机也可以是WSL，我推荐用虚拟机装个Debian/Ubuntu，且虚拟机桥接。也可以用树莓派之类的。
需要会在Linux里编辑文件

1.安装NGINX+RTMP模块

现代的Debian/Ubuntu等系统都已经自带了RTMP模块了，所以直接apt-get安装就行了。

sudo apt-get install nginx libnginx-mod-rtmp

2.配置NGINX

先搞定xsl文件

cp /usr/share/doc/libnginx-mod-rtmp/examples/stat.xsl.gz /var/www/html
gzip -d /var/www/html/stat.xsl.gz

然后编辑nginx配置文件，在http之前添加rtmp，在http内部添加一个server。如果有 include /etc/nginx/sites-enabled/*;，就在这行前面加个# 井号注释掉。最终看起来文件是这样的。

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;
        application app {
            live on;
        }
    }
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile           on;
    keepalive_timeout  65;

    server {
        # 改一下监听端口
        listen       80;
        server_name  localhost;

        location / {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root /var/www/html;
        }
    }
}

编辑完之后，就重启nginx试试，如果没任何提示就说明成功了。

sudo systemctl restart nginx

3.配置路由器

现在twitch有很多服务器，根据这份列表，把里边的前三个推荐的加入到路由器里。如果你是用了openwrt，启用了dnsmasq的话，可以直接在网络-DHCP/DNS 菜单下添加。我直接下了猛药，所有服务器都劫持了。设置了一个额外的HOSTS文件，文件内容如下：

192.168.11.221	live.twitch.tv
192.168.11.221	live-fra02.twitch.tv
192.168.11.221	live-dfw.twitch.tv
192.168.11.221	live-bkk.twitch.tv
192.168.11.221	live-ord02.twitch.tv
192.168.11.221	live-sin.twitch.tv
192.168.11.221	live-qro.twitch.tv
192.168.11.221	live-hel.twitch.tv
192.168.11.221	live-osl.twitch.tv
192.168.11.221	live-sjc.twitch.tv
192.168.11.221	live-slc.twitch.tv
192.168.11.221	live-arn.twitch.tv
192.168.11.221	live-sea.twitch.tv
192.168.11.221	live-ymq.twitch.tv
192.168.11.221	live-tpe01.twitch.tv
192.168.11.221	live-mia.twitch.tv
192.168.11.221	live-sao.twitch.tv
192.168.11.221	live-lhr03.twitch.tv
192.168.11.221	live-lax.twitch.tv
192.168.11.221	live-hkg.twitch.tv
192.168.11.221	live-mrs.twitch.tv
192.168.11.221	live-iad03.twitch.tv
192.168.11.221	live-iad05.twitch.tv
192.168.11.221	live-phx.twitch.tv
192.168.11.221	live-atl.twitch.tv
192.168.11.221	live-sel03.twitch.tv
192.168.11.221	live-sfo.twitch.tv
192.168.11.221	live-tyo.twitch.tv
192.168.11.221	live-prg.twitch.tv
192.168.11.221	live-jfk.twitch.tv
192.168.11.221	live-den.twitch.tv
192.168.11.221	live-mad.twitch.tv
192.168.11.221	live-sel01.twitch.tv
192.168.11.221	live-ams.twitch.tv
192.168.11.221	live-tpe03.twitch.tv
192.168.11.221	live-mil.twitch.tv
192.168.11.221	live-hou.twitch.tv
192.168.11.221	live-cph.twitch.tv
192.168.11.221	live-fra05.twitch.tv
192.168.11.221	live-pdx.twitch.tv
192.168.11.221	live-lhr04.twitch.tv
192.168.11.221	live-yto.twitch.tv
192.168.11.221	live-cdg.twitch.tv
192.168.11.221	live-waw.twitch.tv
192.168.11.221	live-ber.twitch.tv
192.168.11.221	live-syd.twitch.tv
192.168.11.221	live-ord03.twitch.tv
192.168.11.221	live-rio.twitch.tv
192.168.11.221	live-vie.twitch.tv

其中，192.168.11.221是我Linux服务器的地址，你可以在Linux系统的终端下输入 ip addr 来找到你的ip

保存后openwrt会自动重启一下dnsmasq服务，这就算完成了。

4.PS4上开始直播

PS4上点击share按键，就可以开始直播了。注意这里有个坑，有可能连不上twitch服务器，这时候需要路由器自带梯子。这里不再具体介绍方法。

5.拿到数据流

访问 http://192.168.11.221/ 也就是Linux主机的ip，默认就可以看到是[EMPTY]的或者是[live_xxxxx]一堆。如果 app 写的是[EMPTY]的话那么 rtmp 地址就是rtmp://192.168.11.221:1935/app/
否则应该是rtmp://192.168.11.221:1935/app/live_xxxxx

然后进obs，把这个作为媒体源添加进来，就可以直播了。

6.参考

如何科学的直播 PS4

Ubuntu 16.04简易安装Nginx-rtmp-module

7.后记

https://github.com/winshining/nginx-http-flv-module

按文件修改日期整理和移动文件

想整理下手里的照片，懒得装管理软件了，只想简单的按日期整理。心想这种脚本应该是满大街的了，结果简单搜了下居然没搜到windows下顺手的，索性自己写了一个。

用法是，把下面代码保存成 .js 文件，放到要处理的文件夹下运行即可。可处理 jpg和nef文件。

注1：之所以没有使用文件创建日期，是因我一旦照片经过复制后，文件创建日期就变成了复制的时间了。但就算复制后，文件修改时间还是之前照片的拍摄时间，所以才用了文件最后修改时间。

注2：修改第3行可以变更待处理照片的地址。比如改成
f = fso.GetFolder("G:/DCIM/109D7000");
就可以直接处理存储卡中的照片了。

注3：修改第11行可变更目标地址。比如改成 s.move("d:/photo/" + path + "/") 就可以让照片都保存到 d:\photo 下了。

var fso, f, fc, s, d, path;
fso = new ActiveXObject(“Scripting.FileSystemObject”);
f = fso.GetFolder(“.”);
fc = new Enumerator(f.files);
for (; !fc.atEnd(); fc.moveNext()){
s = fc.item();
if(!/(.jpg|.nef)$/.test(s.name.toLowerCase()))continue;
d = new Date(s.dateLastModified);
path = d.getFullYear() + lz(d.getMonth() + 1) + lz(d.getDate());
if(!fso.FolderExists(path))fso.CreateFolder(path);
s.move(path + “/”)
}
function lz (num) {
return num > 9 ? “” + num : “0” + num;
}

自定义 HTML5 meter 元素样式

HTML5种的meter元素非常有用，然而默认样式总是跟不上时代的步伐，所以琢磨了一下自定义样式的方式，仅适用于webkit内核的浏览器。Chrome 26 测试通过。分享给大家。颜色取自 Bootstrap Button。

meter::-webkit-meter-bar {
background: #FFF;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(to bottom, #62c462, #51a351);
}
meter::-webkit-meter-suboptimum-value {
background: linear-gradient(to bottom, #fbb450, #f89406);
}
meter::-webkit-meter-even-less-good-value {
background: linear-gradient(to bottom, #ee5f5b, #bd362f);
}

测试地址：http://shawphy.com/demo/meter.html

@simurai 写的更神奇的用法

扩展阅读：
HTML5 progress元素的样式控制、兼容与实例

bitbucket上提交代码后用户名不显示链接问题

一个不痛不痒的问题，就是在bitbucket上提交代码到代码仓库，总是不会在我的用户名上显示出链接来，简单搜索一下，没找到中文的信息，搜英文的，倒是很快找到这个 issue ： https://bitbucket.org/site/master/issue/3394/user-aliasing-commit-user-not-showing-up

原来很简单，他必须要在用户名里设置邮件才可以，
以 username <email@example.com> 这样的形式设置用户名才可以。
编辑~/.hgrc
找到其中用户名的字段，改成如下的形式即可

[ui] username = Shawphy <email@example.com>

即可

Node.js 的简易web服务器

网上关于Node.js的介绍已经铺天盖地了，但我就没找到一个简单的web服务器给我做测试用。
实际上Node.js只需要一个exe文件和一个js文件就可以搭建服务器了，用来随便测试页面之类的用起来比nginx还方便。所以我就随手写了一个简单的。只可用于http服务，没有更多功能的js文件。

用起来很简单：
1，先去 http://nodejs.org/下载最新的Node.js可执行的exe文件。比如： http://nodejs.org/dist/latest/node.exe
2，把下面的代码保存为一个 server.js 文件，把它跟刚才下载到的 node.exe 文件放在一起。
3，把server.js文件拖到node.exe文件上就OK了

就这三步之后，整个目录下的文件都可以通过 http://127.0.0.1:8080/ 来访问了，测试用起来非常方便。

其他系统下也如法炮制，官网上也有下载mac和linux的版本。


var http = require("http"),
	url  = require("url"),
	path = require("path"),
	fs   = require("fs");

http.createServer(function (req, res) {
	var pathname=__dirname+url.parse(req.url).pathname;
	if (path.extname(pathname)=="") {
		pathname+="/";
	}
	if (pathname.charAt(pathname.length-1)=="/"){
		pathname+="index.html";
	}

	fs.exists(pathname,function(exists){
		if(exists){
			switch(path.extname(pathname)){
				case ".html":
					res.writeHead(200, {"Content-Type": "text/html"});
					break;
				case ".js":
					res.writeHead(200, {"Content-Type": "text/javascript"});
					break;
				case ".css":
					res.writeHead(200, {"Content-Type": "text/css"});
					break;
				case ".gif":
					res.writeHead(200, {"Content-Type": "image/gif"});
					break;
				case ".jpg":
					res.writeHead(200, {"Content-Type": "image/jpeg"});
					break;
				case ".png":
					res.writeHead(200, {"Content-Type": "image/png"});
					break;
				default:
					res.writeHead(200, {"Content-Type": "application/octet-stream"});
			}

			fs.readFile(pathname,function (err,data){
				res.end(data);
			});
		} else {
			res.writeHead(404, {"Content-Type": "text/html"});
			res.end("<h1>404 Not Found</h1>");
		}
	});

}).listen(8080, "127.0.0.1");

console.log("Server running at http://127.0.0.1:8080/");

Sublime Text 2 简介

最近试用了一款新的编辑器 Sublime Text 2，跨平台，据说他是仿TextMate的，没用过TextMate，不知道后者有多厉害。然而 Sublime Text 2 我一用就爱上他了。

sublimetext2

一开始是由于他的迷你地图模式而吸引我的注意力的，这个迷你地图可以概览整个文件。实现快速跳转。这个是个亮点，在其他编辑器中都没有见过此类功能。然而试用了之后我很快发现，迷你地图功能可能未必好用，但真正让我觉得舒服的是，他的zencoding支持的非常完美，直接有实时预览功能。

此外他的窗口分组、项目管理、扩展工具、代码折叠方面都非常不错。他还直接支持vim模式呢！
我之前在微博上推荐 Sublime Text 2 后，引来好多vimer的鄙视。说比vim差多了。我也无意参与这类争论。一个是现代兵器，一个是上古神器。自己用的爽就行了，何必与人争呢。

总之这个编辑器非常适合我这样喜欢vim的快捷键，又不喜欢vim复杂的配置的人。轻松上手功能强大。

目前他唯一的缺点是，无法打开gb2312之类的东亚编码，打开都会乱码。但是打开utf-8编码的文件毫无问题，可以正常显示和输入中文。

=========
update：
@seanliang写了一个插件用来编辑和保存gb2312和big5编码的文件，可以访问项目地址： https://github.com/seanliang/ConvertToUTF8
=========

如果你也心动了，可以点下面的地址来下载最新版。Sublime Text 2是收费软件，售价$59，但可以无限期试用，仅仅会偶尔在保存文件时弹出提示框而已，编码过程中不会出现任何干扰。

beta版：
http://www.sublimetext.com/2
大约1个月更新一次。

dev版：
http://www.sublimetext.com/dev
隔三差五更新，非常频繁，慎用……

另外建议依次拜读 Lucifr 的三篇博客
Sublime Text 2 入门及技巧
 ZenCoding in Sublime Text 2
Sublime Text 2 实用快捷键[Mac OS X]

2024年 4月
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30