sophister / 2bugua5 Goto Github PK

View Code? Open in Web Editor NEW

12.0 12.0 3.0 27.1 MB

工作、生活的碎碎念

2bugua5's People

Stargazers

Watchers

Forkers

fc13240 shiwenyu longshanzhiyu

2bugua5's Issues

p2 物理引擎

SEO 案例研究

在 Google 搜索关键字 微信公众号回复个人微信名片，目前(2020-02-20)结果页排第 3 位的，是这个链接 http://m.dxb1.com/weixin/22723.html。点过去看了之后，发现 没有任何卵用 ，这货看上去是专门做 SEO优化 的，可以研究下，他是怎么做的，为什么排名会这么高！

先看下他的源码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>怎么在微信公众号自动回复中添加微信名片？怎样用微信发送服务号和订阅号的名片？_多效宝</title>
<meta name="keywords" content="怎么在微信公众号自动回复中添加微信名片？怎样用微信发送服务号和订阅号的名片？">
<meta name="description" content="怎么在微信公众号自动回复中添加微信名片？怎样用微信发送服务号和订阅号的名片？微信公众账号名片如何设置名片|自动回复|公众一、第一步，打开微信，我们以服务号为案例（订阅号同理）。微信上面点击通讯录，然后在通讯录窗口上面点击公众号.点击公众号以后在公众号窗口上面点击查找公众号，然后输入公众号的名称千线微名片，再点击查找，查到公众号以后点击千线微名片.点击千线微名片以后进入到详细资料窗口，在窗口上面点击关">
<meta name="author" content="怎么在微信公众号自动回复中添加微信名片？怎样用微信发送服务号和订阅号的名片？" />
<meta name="applicable-device" content="mobile">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="canonical" href="http://www.dxb1.com/weixin/22723.html" >
<link href="/file_files/m110.css" type="text/css" rel="stylesheet">
</head>

body 部分，内容太多了，就截一部分图吧：

用户点进来，看到的页面实际是 body 里的那个 iframe，而spider看到的页面，是 iframe 下面的文字部分！那个 iframe 也是 JS 动态插入的，所以spider一般是不知道有iframe的存在！

就这样骗过了spider？

web(前端/全链路)监控系统

其实不仅仅是 APP，web端的数据统计分析也是需要的，有必要建立一套内部的系统，方便查看监控各项指标。

整体架构、实现，还没有方案，先备注下这个 Countly countly-server 的开源系统，有时间研究下前后端，主要是后台数据分析那块，应该怎么搞

web端项目基础设施

在当前(2019年) web前端，新建一个项目的时候，应该包含以下特性：

TypeScript
Git commit 规范，使用 commitlint 和 husky
ESLint
prettier代码自动格式化
editorconfig跨编辑器代码风格

SecureCRT

在使用 jumpserver登录开发、测试机器时候，拿到的是 .pem 文件，直接在 SCRT里导入这个 .pem 文件，每次登录的时候，还是要输入密钥来解密，每次输入密码太麻烦。在网上找到这种方式，需要通过 .pem 文件生成 .pub，然后在 SCRT里导入 .pub文件，之后再登录，就不用输入密码了

# 假设拿到的是 user.pem ，并且需要密钥来解密
# 直接运行下面的命令，我本地会提示 user.pem 的文件权限不对，要先改成 600
chmod 600 user.pem
# 然后再产出 .pub 文件
ssh-keygen -e -f user.pem >> user.pem.pub

执行上面命令，会提示输入密码解密密钥，之后在SCRT里，导入这个 .pub就搞定了。

来自这篇文章

VPN-科学上网

前面两篇都被和谐了，找到了这一篇，https://zzz.buzz/zh/gfw/2017/08/14/install-shadowsocks-server-on-centos-7/ ，为了防止再被和谐，还是把主要内容摘录到下面吧：

安装 Shadowsocks

执行安装 Shadowsocks 的命令之前，我们需要先切换到 root 用户（直接以 root 身份登入；或是以普通用户登入，通过命令 sudo su - 切换为 root 用户)，或者使用普通用户，但在每条命令前加上 sudo。

另外，后续的配置也需要以 root 用户的身份进行。

具体安装 shadowsocks-libev 的命令如下：

cd /etc/yum.repos.d/
curl -O https://copr.fedorainfracloud.org/coprs/librehat/shadowsocks/repo/epel-7/librehat-shadowsocks-epel-7.repo
yum install -y shadowsocks-libev

安装完成后，会有 ss-local, ss-manager, ss-nat, ss-redir, ss-server, ss-tunnel 命令可用。

其中，作为服务器，我们需要的是 ss-server，不过后文中我们将通过服务文件启动 Shadowsocks，而不会直接与 ss-server 命令打交道。

注，如果安装报类似如下错误：

Error: Package: shadowsocks-libev-3.1.3-1.el7.centos.x86_64 (librehat-shadowsocks)
           Requires: libsodium >= 1.0.4
Error: Package: shadowsocks-libev-3.1.3-1.el7.centos.x86_64 (librehat-shadowsocks)
           Requires: mbedtls

说明系统没有启用 EPEL (Extra Packages for Entreprise Linux)。那么我们需要首先启用 EPEL，再安装 shadowsocks-libev：

yum install -y https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
yum install -y shadowsocks-libev

添加配置文件

COPR 里的 shadowsocks-libev 默认读取位于 /etc/shadowsocks-libev/config.json 的配置文件，我们可以根据需要参考以下配置文件进行修改：

{
	"server": "0.0.0.0",
	"server_port": 10443,
	"password": "zzz.buzz",
	"method": "aes-256-cfb",
	"mode": "tcp_and_udp"
}

"server"：选填，默认 "0.0.0.0"。配置客户端时填入服务器的实际 IP。
"0.0.0.0" 表明服务端接受来自任何网络接口的连接。配置服务端时填入 "0.0.0.0" 总是能生效，而不必填入服务器自身的 IP。
"server_port"：必填。需要在客户端配置时填入相同的值。
此处填入服务端要监听的端口。需要选择 1024 或以上的端口号，否则启动 ss-server 时将会需要 root 权限，而默认的服务文件则是以 nobody 用户启动 Shadowsocks 的。
如需选用低于 1024 的端口，也可执行命令 sudo setcap 'cap_net_bind_service=+ep' /usr/bin/ss-server 赋予相应权限，后续就可以使用 nobody 用户或普通用户启动 Shadowsocks。

或执行 systemctl edit shadowsocks-libev 命令，并输入以下内容：

[Service]
AmbientCapabilities=CAP_NET_BIND_SERVICE

"method"：选填，默认 "rc4-md5"。需要在客户端配置时填入相同的值。

服务端所用的加密方法，推荐以下几种算法：

"chacha20-ietf-poly1305" 具有优秀的安全性，更佳的性能，属于 AEAD 加密算法，少部分客户端（如 iOS Wingy）不支持此算法；
"aes-256-cfb" 具有足够安全性，且被各服务端及客户端广泛支持；
"rc4-md5" 算法快速，且具有一定的安全性，适合运算能力受限的设备如路由器等。

启动 Shadowsocks 服务

有了 Shadowsocks 服务端的配置文件后，我们通过 systemd 启动 Shadowsocks 的服务端服务：

systemctl start shadowsocks-libev

要确认 Shadowsocks 的服务运行状态及最新日志，我们可以执行命令：

systemctl status shadowsocks-libev

linux tcp相关

查看 tcp 的 established queue 大小： cat /proc/sys/net/core/somaxconn
查看 tcp 的 syn recv queue 大小： cat /proc/sys/net/ipv4/tcp_max_syn_backlog
暂时未知： ss -lt
查看socket摘要： ss -s
Display summary statistics for each protocol： netstat -s

系统收到 syn 请求，先放到 syn recv queue；收到client第二次 ack时，从 syn recv queue取出来，放入 established queue。

查看服务器上各个socket连接数： cat /proc/net/sockstat
查看服务器tcp各个状态连接数： ss -ant | awk 'NR>1 {++s[$1]} END {for(k in s) print k,s[k]}'
查看服务器tcp的各个状态连接数： netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'
查看tcp的本机可用端口范围：cat /proc/sys/net/ipv4/ip_local_port_range
查看 tcp udp 已占用的端口数：netstat -an | grep -e tcp -e udp | wc -l
/proc/sys/net/ipv4/tcp_timestamps - 控制timestamp选项开启/关闭
/proc/sys/net/ipv4/tcp_tw_recycle - 减少timewait socket释放的超时时间
/proc/sys/net/ipv4/tcp_abort_on_overflow 当 accept queue 满时，是否立即返回 RST 包给client

XSS深入理解

XSS 仔细咀嚼这两篇文章就行了：

关键点：

不同context下，浏览器对字符的解码顺序

https certificate chain 等等

通过 openssl 校验服务器证书配置的合法性：

openssl s_client -debug -connect api.we.com:443

https证书配置错误，Android下 webview 会报如下错误：

Failed to validate the certificate chain, error: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found

Firefox 中可能会报如下错误：

由于发布者未知，所以证书不可信。
服务器可能未发送合适的中间证书。
或许需要额外的根证书。

出现这种错误，可以到 firefox官方文档进一步检查错误信息

证书中的 Certificate chain 区域，应该配置多条，最终指向操作系统新人的某个 root CA

参考这两篇文章：

mysql 相关

今天在给一个table列增加 unique key的时候，mysql报错

Specified key was too long; max key length is 767 bytes

当时 column 是 varchar(200) ，mysql字符集是 utf8mb4，原来在这个字符集下，1个字符对应4个字节，超出了限制。

You also have to be aware that if you set an index on a big char or varchar field which is utf8mb4 encoded, you have to divide the max index prefix length of 767 bytes (or 3072 bytes) by 4 resulting in 191. This is because the maximum length of a utf8mb4 character is four bytes. For a utf8 character it would be three bytes resulting in max index prefix length of 254.

这篇stackoverflow可以看看

CentOS6.5 node.js libvips sharp

记录下在CentOS 6.5 系统上，安装运行 sharp 的坑。

sharp实际上依赖的是 libvips 这个库来处理图片的。

1、升级 gcc 到 4.8.5 版本
2、下载 libvips 8.5.5 源码，编译安装。这期间，在 configure 阶段会发现需要额外安装很多的图片相关包，使用 yum 安装即可
3、libvips安装完后，执行 pkg-config --modversion vips-cpp 可能会报找不到，根据这篇issue ，需要先执行下 export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig
4、上述都完成了，在 require("sharp") 的时候，可能会报错：

Error: libvips-cpp.so.42: cannot open shared object file: No such file or directory

然后这时候，在 /usr/local/lib 下，是能找到这个文件的！！根据这篇issue ，需要先执行下这样:

echo /usr/local/lib > /etc/ld.so.conf.d/local.conf
/sbin/ldconfig

webpack多页面打包

主要参考这些文章：

nodejs ecosystem libraries

分布式定时任务框架

目前看到的，比较好的nodejs分布式定时任务框架，https://github.com/jhuckaby/Cronicle

TypeScript相关

WebStorm 中使用 ESlint 校验 typescript ts/tsx

备注：我使用的 webstorm版本是：

WebStorm 2018.3.5
Build #WS-183.5912.23, built on February 27, 2019

在 webstorm 中，即使打开了IDE自带的 eslint校验，即使eslint能找到我们对应的 .eslintrc文件，依然很多配置的规则没有被应用到 ts/tsx文件的校验，比如我们的 .eslintrc 文件内容如下：

{
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "ecmaFeatures": {
    "classes": true
  },
  "plugins": [
    "react-hooks",
    "@typescript-eslint"
  ],
  "rules": {
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    "react/jsx-indent":["error",4],
    "global-require": "off",
    "indent": ["error", 4,{ "SwitchCase": 1 }],
    "no-unused-expressions":0,           
    "class-methods-use-this":0,           
    "no-underscore-dangle":0,            
    "arrow-body-style":["error", "always"], 
    "max-len":["error",200],
    "no-plusplus":["error",{"allowForLoopAfterthoughts": true}],
    "prefer-destructuring": 0,
    "guard-for-in":"off",
    "react/jsx-indent-props":["error",4],
    "react/require-default-props": 0,     
    "react/no-array-index-key":0,
    "react/jsx-boolean-value":["error","always"],
    "react/forbid-prop-types":0,
    "react/prop-types":0,
    "react/sort-comp":0,
    "react/destructuring-assignment":0,
    "object-curly-newline": ["error", {
        "ObjectExpression": { "consistent": true,"minProperties": 5 },
        "ObjectPattern": { "consistent": true, "minProperties": 5},
        "ImportDeclaration": { "consistent": true,  "minProperties": 5 },
        "ExportDeclaration": { "consistent": true, "minProperties": 5 }
    }],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "import/no-extraneous-dependencies": [
        "error", {"packageDir": "./"}
    ],
    "react/jsx-one-expression-per-line":  0,
    "import/prefer-default-export": 0,
    "no-shadow": 0,
    "@typescript-eslint/explicit-function-return-type": ["error", {
        "allowExpressions": true,
        "allowTypedFunctionExpressions": true
    }],
    "@typescript-eslint/camelcase": 0,
    "@typescript-eslint/no-non-null-assertion": 0
  },
  "globals": {
    "requestAnimationFrame": true,
    "cancelAnimationFrame": true,
    "isNaN": true
  },
  "settings": {
    "import/core-modules": ["common","components"],
    "import/resolver": {
      "node": {
        "moduleDirectory": [
          "./node_modules/",
          "./src/"
        ],
        "extensions": [
            ".js",
            ".jsx",
            ".ts",
            ".tsx"
        ]
      }
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx", ".js", ".jsx"]
    }
  }
}

还需要单独在 webstorm 里配置一下，默认 eslint 不会去处理 .ts/.tsx的文件，具体设置见这个帖子：https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000225170/comments/360000332879

为了防止打不开原文，截图保留如下：

内容如下：

To anyone else searching for this, you must go to Help > Find Action and type "registry". Click the first result (Registry...) and scroll down to eslint.additional.file.extensions. Add js,ts.

The issue for me is that IntelliJ/Webstorm only does this automatically if you're using typescript-eslint-parser and eslint-plugin-typescript. However, those packages are now @typescript-eslint/parser and @typescript-eslint/eslint-plugin.

Linux 问题集

linux 磁盘空间满了

今天QA发现测试环境某台机器磁盘空间满了，让给清理下文件，于是网上查了之后，先看磁盘占用：

root@test# df -h
Filesystem           Size  Used Avail Use% Mounted on
/dev/vda3            292G  5.5G  271G   100% /
tmpfs                3.9G     0  3.9G   0% /dev/shm
/dev/vda1            190M   63M  118M  35% /boot

看到那个已使用 100%，再去根目录下，看下加哪个目录比较大：

du -sh /* | sort -nr

发现最大的目录，也就几个G，很奇怪为什么上面会显示已使用 100% ……
发现这篇文章，里面也是类似的问题，

结论是“在Linux中，当我们使用rm在linux上删除了大文件，但是如果有进程打开了这个大文件，却没有关闭这个文件的句柄，那么linux内核还是不会释放这个文件的磁盘空间，最后造成磁盘空间占用100%，整个系统无法正常运行。这种情况下，通过df和du命令查找的磁盘空间，两者是无法匹配的，可能df显示磁盘100%，而du查找目录的磁盘容量占用却很小。

处理方法如下：

找出文件使用者，kill掉：

lsof -n | grep deleted
找到使用对应文件的进程，kill掉，然后再次df -h，发现已经没有100%的情况了

scrapy 抓取网页相关

在抓取 静态网页 的时候，一般可以用 scrapy shell http://xxx.com/aaa 先看看目标网页情况，包括在shell里测试 xpath 是否OK。

如果需要在 scrapy shell 里设置请求的 cookie（一般在模拟登录态的情况下），需要这样设置：

scrapy shell
...
...
>>> from scrapy import Request
>>> req = Request('yoururl.com', headers={"header1":"value1"}, cookies={ "cookie1": "value1", "cookie2" : "value2"})
>>> fetch(req)

来自这篇stackoverflow

mobile web坑全集

记录移动端的`web`开发坑

-webkit-text-size-adjust: none;
以前只知道这个属性在chrome上，用来处理font-size < 12px时，chrome强制用 12px渲染。昨天才知道，原来还能禁止 iPhone6上浏览器把文字放大 ，比如设置的 font-size: 24px，实际渲染出来可能是 font-size: 28px。
相关链接： some-font-sizes-rendered-larger-on-safari-iphone