前端​

• scrollMonitor 滚动监听
• date-fns js 日期工具库
• blueprint react ui 库
• loading loading 效果库
• ion-slide-box-tabs slide tab 切换效果
• HTML5 FLV Player bilibili 出品 flv html5 播放器
• react-storybook React 组件开发环境
• Amplitude.js 是轻量级、零依赖的现代 HTML5 音频播放器，。
• Rythm.js 能让你的网页嗨起来的库

Node.js​

• power-assert 强大的断言库
• cost-of-modules 最慢模块查询
• space-hogs 查找占用空间最大的目录命令行工具
• is-my-json-valid 校验 json 格式是否有问题
• tingodb 嵌入式的 node.js 数据库，与 mongodb 一致的 api
• webpack-bundle-analyzer webpack 打包分析器插件
• svg-captcha svg 验证码库
• to-capital-case 转换成首字母大写的库
• collect.js 提供了便捷且零依赖的操作数组与对象的多个工具函数，譬如 combine 函数可以将两个数组合并为对象列表，groupBy 可以根据键来进行分组等等。
• flubber 是用于平滑形状变换动画的工具库。在 Web 开发中，如果我们需要在基于 SVG 或者 Canvas 构建的两个图形之间进行变换；如果这两个图形本身毫无关联，那么可能会出现异常的中间状态。而 flubber 则内置了一些推测算法来帮我们平滑这个变换过程。
• yn 将一些值方便的转换为 boolean 值的库，避免踩坑或者冗长的判断

其他​

Mac Menubar 开发​

这可能是一个可选的组合，看起来提供的组件还不错 React Desktop + menubar

比如我们注册了如下的路由

app.get('/', function (...) { ... });
app.get('/foo/:id', function (...) { ... });
app.post('/foo/:id', function (...) { ... });

然后想要获得的东东是这样的形式：

{
  get: [ '/', '/foo/:id' ],
  post: [ '/foo/:id' ]
}

该肿么办呢？

在 express 3.x 中​

只需要 app.routes 就可以啦

在 express 4.x 中​

Applications - built with express()

app._router.stack

Routers - built with express.Router()

router.stack

更多的答案尽在 StackOverflow how-to-get-all-registered-routes-in-express

最近在项目中经常发生登录卡死的状况，由于是使用的 passport 单点登录，所以只能一步步排查，加日志。

最后发现是卡在一个 mongodb 查询那里，后来去官网查询后，发现查询超时时间默认是无限大的，所以导致我们看到的现象是 http 无返回，导致 http 超时了 , 因此 nginx 报 502 错误。

找到了 mongoose 文件的Connection部分，在下面可以看到有一些连接参数，其中就有 socketTimeoutMS 和 connectTimeoutMS，点击进入 mongodb 官方文档，可以看到Server 的参数中，socketTimeoutMS 默认是无限大的，这在连接外网 mongodb 时可能导致一些问题，我们需要加上超时参数。

var options = {
    server: {
      socketOptions: {
        autoReconnect: true,
        connectTimeoutMS: 10000,
        socketTimeoutMS: 10000,
      },
    },
  }

// Good way to make sure mongoose never stops trying to reconnect
mongoose.connect(uri, options);

有待观察后补充

尝试后发现，这个 socketTimeout 和 socket 变成时的设置 timeout 是一个效果，闲置超时时间，但是在 linux 下似乎没有什么不正常，在 windwos 上就是启动后，过了这个时间就会抛出一个 timeout 错误。

平时直接启动没问题，今天出了这个问题，启动失败，加上配置文件也不行。

D:\redis2.8>redis-server.exe
[8264] 08 Nov 09:28:43.943 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server.exe /path/to/redis.conf
[8264] 08 Nov 09:28:43.948 # Creating Server TCP listening socket *:6379: bind: No such file or directory

Redis 报错：

[6644] 02 Apr 23:11:58.976 # Creating Server TCP listening socket *:6379: bind: No such file or directory

的解决方案如下按顺序输入如下命令就可以连接成功

1. redis-cli.exe
2. shutdown
3. exit
4. redis-server.exe redis.windows.conf

Why Yarn​

Yarn is Super Fast!!​

Yarn caches every package it downloads so it never needs to again. It also parallelizes operations to maximize resource utilization so install times are faster than ever.

Common NPM commands in Yarn​

New Commands in Yarn​

References​

https://yarnpkg.com/en/docs/

参考​

https://github.com/areai51/yarn-cheatsheet

或

https://shift.infinite.red/npm-vs-yarn-cheat-sheet-8755b092e5cc

概念​

反引号位 (`) 位于键盘的 Tab 键的上方、1 键的左方。注意与单引号 (\') 位于 Enter 键的左方的区别。 在 Linux 中起着命令替换的作用。命令替换是指 shell 能够将一个命令的标准输出插在一个命令行中任何位置。

如下，shell 会执行反引号中的 date 命令，把结果插入到 echo 命令显示的内容中。

[root@localhost sh] $ echo The date is \`date\`
The date is 2011年 03月 14日 星期一 21:15:43 CST

单引号、双引号用于用户把带有空格的字符串赋值给变量事的分界符。

[root@localhost sh] $ str="Today is Monday"
[root@localhost sh] $ echo $str
Today is Monday

如果没有单引号或双引号，shell 会把空格后的字符串解释为命令。

[root@localhost sh] $ str=Today is Monday
bash: is: command not found

单引号和双引号的区别。单引号告诉 shell 忽略所有特殊字符，而双引号忽略大多数，但不包括 $、\、`。

[root@localhost sh] $ testvalue=100
[root@localhost sh] $ echo 'The testvalue is $testvalue'
The testvalue is $testvalue
[root@localhost sh] $ echo "The testvalue is $testvalue"
The testvalue is 100

场景​

我在使用 gitlab 时，使用 shell runner 时，将对应的变量放在了一个单引号的命令中，但是其中的变量始终不替换，后来换成双引号就好了，所以查了一下 linux 下单引号双引号的区别。

有的小伙伴可能在开发时需要动态加载模块

常规思路，如果模块有固定的父级路径，比较好办：

var foo = require("./dir/"+somevaribale+".js");

这样即可，进行根据条件不同进行加载。

但是也有情况下，路径是完全不可预测的。

比如我们需要加载一个任意的绝对路径，我们可能会这样写。

var module_path= "/dir/"+somevariable+".js";
var foo= require(module_path);

在 node 后端环境，这样是没有问题的。

但是在 webpack 打包的时候，这样就会有警告了：

这个问题，是源自 webpack 中的require context问题。

在 github 上也有相关的讨论：

• Warning: Critical dependencies.
• Optionally disable dynamic requires

我试了这种方式，发现可以，所以分享一下，但是我没有在 electron 环境下尝试。

// webpack.config.js

{
  module: {
    // require
    unknownContextRegExp: /$^/,
    unknownContextCritical: false,

    // require(expr)
    exprContextRegExp: /$^/,
    exprContextCritical: false,

    // require("prefix" + expr + "surfix")
    wrappedContextRegExp: /$^/,
    wrappedContextCritical: false
  }
}

如果自己一个不小心的提交了一些敏感的信息到 git 上面，

而自己的项目有可能被其他人看到，如果查看历史记录还是能看到自己提交那些文件。那么如果彻底从历史记录中的删除这些文件 操作是在 Linux 下面做的 :

git filter-branch --index-filter 'git rm --cached --ignore-unmatch db.properties*' --prune-empty --tag-name-filter cat -- --all
git push origin master --force
rm -rf .git/refs/original/
git reflog expire --expire=now --all
git gc --prune=now
git gc --aggressive --prune=now

NTS 框架中采用了新的方式记录浏览器的操作历史，因此在某些带 IFRAME 载入内容的项目中不希望这个 IFRAME 的变化影响到整个系统的操作历史，下面给出两种禁止 IFRAME 记录操作历史的解决方案，各有利弊视具体情况选取。

方案一​

原理：利用 location 的 replace 方法载入新页面，关于 replace 方法的描述： When a document is replaced, it is also removed from the history object. Moreover, the user interface navigation methods, such as the Back and Forward buttons, will no longer access the URL. 分析：此方案有个前提条件就是父窗体需要有对 iframe 窗体的访问权限，因此此方案一般用于 iframe 载入的内容和父窗体是同域或者同父域的情形。 范例：

第一种方案主要是通过 replace 来将 url 替换而不是 push 到浏览器历史中

document.getElementById('abc').contentWindow.location.replace(url);

方案二​

原理：先销毁已有 iframe 再创建一个新的，然后通过新的 iframe 载入新的页面内容 分析：不存在跨域问题，但是会有 iframe 不断创建销毁的额外开销 范例：

第二种方式主要是删除 iframe 节点之后重新创建一个 iframe 元素。

iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.src = url;

11

某些场景可能需要动态的获取端口来启动服务，可能服务化场景，不直接硬配置端口。

哈哈，这看来是要为分布式、服务注册、服务发现做准备呢。

/**
 * auto port
 * @authors luoyjx (yjk99@qq.com)
 * @date    2016-10-16 20:42:57
 */
var net = require('net');

var server = net.createServer();
    server.on('error', console.log);
    server.on('listening', function () {
      var port = server.address().port;

      server.close(function () {
        console.log('auto port: %s', port);
      });
    }.bind(this));
// tcp 使用端口 0 表示系统分配端口
server.listen(0);

预想的场景

服务在启动的时候，首先去获取一个可用端口，将自己使用此端口启动，再注册到配置管理中，这样即可实现服务注册了。 配合 etcd 即可实现服务发现，不过还木有实践。