DELL U2718Q 4K显示器

4星

U2718Q DELL的显示器就是保值啊，这款其实上市很久了，刚看下售价和买的时候没变。
网上口碑也很好，发现四角面板和外框手工不是很细致，轻轻一按就凹进去了。和MBP搭配确实不错，

MBP

4星
型号是MR942，购买链接，虽然公司也提供了苹果本，但是是13寸的，东西一开多就感觉卡，最关键的是用的时间越长，
越感觉不方便，不敢怕个人存放文件，那阵子心情非常的糟糕，咬咬牙就买了。
为什么要在苹果家园买?其实买之前已经关注了一个月，首先排除官网，去V2EX上咨询，浏览了苹果团, MrMac还有小闷的水果店
感觉这家店口碑不错，就买了。实话讲确实还行，发货时顺丰，隔天就到了，还送了一堆配件。就是只能全款。不能分期。

Macro 宏的使用

1. 先 Edit - Macros - Start Macro Recording
   录制宏，内容是 格式化，然后是 git commit
2. 为宏起个名字 比如 js_prettier_git_commit
3. 为宏分配快捷键，我分配到了 command键+鼠标滑轮往上

目前博客是用的github pages，访问速度有点慢。于是想着换到自己的主机上面。
还要实现添加新文章后自动编译。
说干就干，过程也非常简单。

首先个人云主机上部署博客网站

1
2
3
4

cd /var/www/www.mafeifan.com
git clone git@gitee.com:finley/hexo.git
npm install -g hexo-cli
npm install

还需要跑一个node express程序，主机上本来就有，添加一个接口。用于web hook调用。
代码大致如下:

1
2
3
4
5
6
7
8
9
10
11
12

async function execShell(scriptPath) {
  const execFile = require('util').promisify(require('child_process').execFile);
  return await execFile('sh', [scriptPath]);
}
app.post('/hexo', (req, res) => {
  const { stdout, stderr } = execShell('scripts/hexo.sh');
  if (stderr) {
    res.send('error');
  }
  res.send('success');
});

当调用这个接口比如地址是 (http://xx.xx/hexo) 执行服务器上一个shell脚本
scripts/hexo.sh 脚本的内容

1
2
3
4
5
6
7

#!/bin/bash
cd /var/www/www.mafeifan.com
git pull > /dev/null
npm install > /dev/null
hexo g > /dev/null
echo 0

然后，将调用地址加入到代码托管商的web hook中

总结：

1. 不用非得使用node，也可以使用PHP，Python等可以执行shell的服务端语言
2. 编译后的文件在public目录，nginx要指向这里
3. 本地开发测试建议使用 ngrok 能节约不少时间
4. 修改博客内容直接在gitee上进行，还可以预览markdown挺方便的222

电动牙刷

4星
我这个人是比较懒的，刷牙都嫌累。刚开始使用电动牙刷的会很不习惯，使用过程时牙齿感觉比较痒，三天就好适应了，关键不贵，活动期间不到180，记得先去某宝上买96当100的充值卡哦。

闲暇时候喜欢去马蜂窝这个网站看一些用户写的游记，其中有些配的背景音乐蛮好听的。比如这个，如果想下载下来，对一个程序员来说是件非常容易的事情。
只需右键 - 审查元素，找到并复制audio音乐标签的真实地址，最后用下载软件下载就可以了。

1. 缓存DNS减少查询时间
2. 走最近的网络环境
3. 缓存相同的静态资源
4. 减少请求HTTP资源文件的大小
5. 减少HTTP请求数量
6. 服务端渲染

来源看这里：https://github.com/reactjs/redux/commit/5b586080b43ca233f78d56cbadf706c933fefd19

之前的代码是

listeners.slice().forEach(listener => listener())

被修改成了

1
2
3
4

var currentListeners = listeners.slice()
for (var i = 0; i < currentListeners.length; i++) {
  currentListeners[i]()
}

一样的结果，为啥要改成这样？

bind的受体是对象，返回的是个新的函数。
我们知道this总是指向调用他的对象。但是有时候我们希望‘固化’这个this。
也就是无论怎么调用这个返回的函数都有同样的this值。
这就是bind的作用。

语法

fun.bind(thisArg[, arg1[, arg2[, …]]])

参数

thisArg

当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new操作符调用绑定函数时，该参数无效。
this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

arg1, arg2, ...

当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。

返回值

返回由指定的this值和初始化参数改造的原函数拷贝

例1

1
2
3
4
5
6
7
8
9
10
11
12
13

window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
  alert(this.color);
}
var func = sayColor.bind(o);
// 输出 "blue", 因为传的是对象 o，this 始终指向 o
func();
var func2 = sayColor.bind(this);
// 输出 "red", 因为传的是this，在全局作用域中this代表 window。等于传的是 window。
func2();

例2

注意：bind只生效一次

1
2
3
4
5
6
7
8
9
10
11
12
13

function f(){
  return this.a;
}
//this被固定到了传入的对象上
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var h = g.bind({a:'yoo'}); //bind只生效一次！
console.log(h()); // azerty
var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

例3

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

var myObj = {
    specialFunction: function () {
    },
    anotherSpecialFunction: function () {
    },
    getAsyncData: function (cb) {
        cb();
    },
    render: function () {
       // 注意这里，写成 this.specialFunction() 会报错
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};
myObj.render();
// 使用 bind 优化
// 当myObj 调用，this就指向了myObj
render: function () {
    this.getAsyncData(function () {
        this.specialFunction();
        this.anotherSpecialFunction();
    }.bind(this));
}

例4

使用bind可少写匿名函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<button>Clict Me!</button>
<script>
var logger = {
  x: 0,
  updateCount: function(){
    this.x++;
    console.log(this.x);
  }
}
// document.querySelector('button').addEventListener('click', function(){
//   logger.updateCount();
// });
// 优化后
// 因为bind返回就是新的函数，不用再写匿名函数了。
document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger))

参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/#what-problem-are-we-actually-looking-to-solve

browserslist 是一个开源项目
见到有些package.json里会有如下的配置参数

1
2
3
4
5
6
7

"browserslist": [
   "> 1%",
   "last 2 versions",
   "Android >= 3.2", 
   "Firefox >= 20", 
   "iOS 7"
 ]

应该不难猜出来，这代表这个项目的浏览器兼容情况。
白话就是我这个项目兼容绝大多数的，最新的和iOS7系统下的浏览器。不兼容Android 3.2系统以下和Firefox20以下的浏览器
像这些” > 1%“, “last 2 versions“ 都是查询参数。
查询参数很强大，比如我想查看在中国大多数浏览器的使用情况。还有IE8。对比美国的。
具体参数列表见官方文档

具体的影响到前端工具的编译情况，比如 Autoprefixer 可以给css加兼容性前缀
babel-preset-env ， eslint-plugin-compat， stylelint-no-unsupported-browser-features 和 postcss-normalize
比如.babelrc文件你可以针对配置

1
2
3
4
5
6
7
8
9
10

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"],
        "node": "current"
      },
    }]
  ]
}

更进一步根据浏览器可以获得特性，比如最新的chrome浏览器支持原生的promise，而IE不支持，babel根据browserslist配置项就会动态的转义。不用在一个个进行配置。