发表于 | 分类于 |   |   214 words

在Mac下执行Lisp程序时，遇到了点坑，记录下。

这里的Lisp主要是指common lisp和scheme。

Common lisp

如何在终端跑common lisp文件？
common lisp wiki 上给出了很多免费的implementations。

如：Armed Bear Common Lisp (ABCL) ，Clozure CL(CCL), Embeddable Common Lisp(ECL), Steel Bank Common Lisp (SBCL) 。

这里，我选了SBCL。

先安装SBCL：

1
brew install sbcl

执行某个文件：

1
sbcl --script FILENAME

执行sbcl --help， 了解更多。

Scheme

参考mit-scheme, 下载MIT-scheme:

[对于Mac OS version 10.14 +，请不要直接在mit-scheme下载适用于Mac OS 10.13的安装包，会坑得人莫名其妙……]

使用Homebrew：

1
brew install mit-scheme

安装完成后，终端输入：

1
mit-scheme

进入scheme交互环境:

使用 (exit) 或者 (quit) 退出scheme。

执行某个文件：

1
scheme < FILENAME

执行scheme --help， 了解更多。

At last, Thanks, Homebrew, you saved me.

参考

common lisp wiki

SBCL

MIT/GUN Scheme

发表于 | 分类于 |   |   1,417 words

正文

读完就觉得很喜欢，非常愿意把它推荐给身边的朋友，不管TA是否懂编程。

全书共15章，章章之间并没有很强的逻辑关联。就挑一些自己印象深刻的写一写。

有关lisp

书中多次提到了lisp，并认为这是一门非常值得去学习的语言，虽然在工作中你可能很少使用到它。

1
Lisp is worth learning for the profound enlightment experience you will have when you finally get it; that experience will make you a better programmer for the rest of your days, even if you never actually use Lisp itself a lot.

特意在GitHub上搜了下，有关common lisp的项目并不多，而sbcl截止目前的star竟然1K都不到，这个诞生于1958年的古老语言已经退出主流语言的阵营。

在lisp wiki>) 里，提到目前Lisp的两大主流方言是common lisp 和scheme，两者的语法有些不一样。

初学者容易懵，学哪个？有什么参考书籍推荐？Paul Graham在他自己的blog Lisp FAQ里面给了回复：

1
2
3
Which should I learn, Common Lisp or Scheme? What's the difference?

Common Lisp is powerful but ugly. Scheme is small and clean, but the standard only defines the inner core of the language. If I had to deliver an application I'd probably use Common Lisp; if I were teaching a course I might use Scheme (but with Common Lisp macros).

同时也给出了学习common lisp的参考书籍：正是他本人操刀的那本《ansi common lisp》。

此外，Google有一个lisp-koan， 2K多star，用于练习common lisp。

如果你使用atom编辑器，练习lisp-koan时，推荐下载package： language-lisp，代码敲起来会舒服很多。

上面都是说common lisp，来看看scheme。

GitHub上找到的有关scheme的项目中，比较醒目的是思科的ChezScheme, 但它并不是纯粹的scheme，C的身影处处可见。

相比common lisp，你会发现scheme的语法看着更清爽，更舒服。

如果想了解scheme的话，强烈推荐Daniel P.Friedman和Matthias Felleisen的那本《The little schemer》，最新版本是第4版，呃，貌似应该不会有更新了。整本书写得非常通俗易懂，作者还会时不时的幽默下，对于我这样完全的Lisp小白来说，这种风格的书籍不要太友好啊。

有关hacker

我记得很久之前看过一个纪录片系列：《互联网时代》，里面采访了一些计算机界的大牛们，大多已经年老，看的时候会觉得这些人真的很伟大，像上古时代那些开疆拓土的英雄们，硬生生辟出了一个完全不一样的时代，撬动一个点，真的改变了整个世界。陡然生出一种脑残粉式的崇拜。

Raymond在How to become a Hacker上写了一系列很经典的文章，其中有一首Zen诗：

1
2
3
4
5
6
to follow the path
look to the master
follow the master
walk with the master
see through the master
become the master

可站在金字塔尖儿的master毕竟是少数，大部分是小花小草，不过小花小草也是可以仰望参天，努力成长的嘛。

牛逼也是时间积累出来的。

作者本人做为一名hacker，在书中并没有什么说教的内容，倒是实实在在的说了些自己知道的，特别是第三章-不能说的话，能把大实话这么说出来的，还真的挺需要勇气的，当然，这也许跟作者当时已经把Viaweb卖了有关，没卖之前他应该还是会有所顾忌吧。

很喜欢第三章的结尾处那段话，阮一峰老师翻译得也很好：

1
2
Everyone encourages you to grow up to the point where you can discount your own bad moods. Few encourages you to continue to the point where you can discount society's bad moods.
小时候，每个人都会鼓励你不断成长，变成一个心智成熟，不再耍小孩子脾气的人。但是，没有人鼓励你继续成长，变成一个怀疑和抵制社会错误潮流的人。

变成一个怀疑和抵制社会错误潮流的人很难，毕竟，独立思考本身就不是一件轻松的事。

书中有些章节看得还挺鸡汤的，很客观很现实，比如下面这碗：

1
2
In our world, you sink or swim, and there are no excuses.
我们这个世界，你向下沉沦或者向上奋进都取决于你自己，不能把原因推给别人。

汤味浓郁，喝完很滋补。

后记

之前写读书笔记，我都会顺着章节一一总结，比如这本，常规整理思路会是这样：

本书一共xxx章，每章主要说了xxx。这一章xxxx最让我印象深刻。

最典型的例子就是之前整理《beyond feelings》。

这样的整理方式，唯一的好处大概就是帮助回忆，让人迅速对每一章的内容建起一个大致的轮廓，但是，这样整理下来后，满屏的文字读起来费劲不说，更让我在事后回看时，不知道重点在哪。

我开始反感这样的方式。

所以这次只记录读后的感觉，脑子里能回想起来的内容，其他略去。

这样想之后，写起来就顺了很多。

某种程度上，也算是一种变相的偷懒了。

Paul Graham在书中提过这么一句：如果你有两个选择，那就选择较难的那个。

但他也说了：并非所有的艰苦都是值得的。

所以，呃，或许，选择更适合的那一个也不错。

参考

lisp wiki>)

how to become a hacker

Paul Graham essays

发表于 | 分类于 |   |   401 words

写在前面

之前用JS写过文件上传，现在改用Vue的方式重新写一遍，发现清爽多了。附上成品及代码。

成品：

代码：

组件名：Attachment，props只有一个：最大允许上传的附件数量。

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
  <div class="attachment">
    <div class="p-2 rounded">
      <p class="mb-2">请选择图片上传: <span>(最多可上传{{ maxAttachmentsCount }}张图片)</span></p>
      <div class="preview d-block float-left">
        <div v-for="(file, index) in files" :key="`file_${index}`" class="pre-item mr-2">
          <div class="cover rounded">
            <img :src="file.src" />
          </div>
        </div>
      </div>
      <label :class="{ 'hidden-label': files.length >= parseInt(maxAttachmentsCount) }" class="d-flex align-items-center justify-content-center attachment-upload-area rounded bg-secondary border border-light mb-1">
        <i class="fas fa-camera fa-3x" style="color: white;"></i>
        <input type="file" class="d-none" @change="uploadAttachment">
      </label>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  props: [ 'maxAttachmentsCount' ],
  data() {
    return {
      files: []
    }
  },
  methods: {
    uploadAttachment(event) {
      const file = $(event.target)[0]

      if (file.files[0].type.indexOf('image/') === -1) {
        alert('只能上传图片，请重新上传。')
        return false
      }

      if (file.files[0] !== undefined) {
        const reader = new FileReader()
        reader.readAsDataURL(file.files[0])
        reader.onloadend = (e) => {
          this.files.push({ src: e.target.result })
        }
        this.$el.querySelector('label').appendChild(event.target.cloneNode(true))
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .attachment {
    margin-bottom: 1em;

    .pre-item {
      position: relative;
      display: inline-block;
      vertical-align: bottom;
    }

    .cover {
      width: 80px;
      height: 80px;
      overflow: hidden;

      img {
        max-height: 80px;
        width: auto;
        clip: rect(200px 300px 300px 200px);
      }
    }

    .attachment-upload-area {
      height: 80px;
      width: 80px;
    }
  }

  .hidden-label {
    visibility: hidden;
  }
}
</style>

感觉没什么需要特别解释的。

over。

发表于 | 分类于 |   |   1,602 words

写在前面

在nuxt中自定义音频播放组件，遇到了一个问题：当存在多个音频播放器时，一次只允许播放一个音频。Google了大半天，写出来的效果并不好，后面老大出手解决了，觉得他的这个方式很精巧，记录下以备忘。

最终效果

做一个最简单的自定义音频播放组件AudioPlayer，props中只有一个参数：文件的source地址。

效果图：

实现细节

为了实现这个效果，需要将功能拆分下：

1、获取音频文件的时长duration，这个可以通过audio的canplay事件。

2、获取音频的currentTime， 这个可以通过audio的timeupdate事件

3、用变量state来显示audio的三种状态：paused, playing, stopped，并分别定义三种状态下的方法: play(), pause(), stop()，根据用户操作来调用不同的方法。

4、定义numberToStardardMinuteSecond函数，将currentTime，duration处理成时间，这里引入库numbro来做这件事。

5、自定义进度条，添加click事件处理函数seek，通过获取点击位置占整个长度的百分比，换算出此时audio的currentTime，设置audio的currentTime

6、使用eventbus进行组件间的通信，在audio play之前，触发beforeplay事件，同时在AuidoPlay组件中监听beforeplay事件。

分步来：

先布局出音频播放组件的模子：

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
31
32
33
34
35
36
37
38
39
40
<template>
  <div class="d-flex w-100 align-items-top">
    <div class="audio-player mr-2">
      <audio :src="src" ref="audio" />
      <i v-if="state === 'playing'" class="far fa-pause-circle fa-2x" @click="pause"></i>
      <i v-if="state != 'playing'" class="far fa-play-circle fa-2x" @click="play"></i>
    </div>
    <div class="w-100">
      <span class="float-right text-muted small">{{ currentTime }} / {{ mediaDuration }}</span>
      <span class="small">点击后开始播放</span>
      <div class="progress">
        <div class="progress-bar bg-primary" style="transition-duration: 0.2s; transition-timing-function: linear;" role="progressbar" :style="`width: ${currentPercentage}`"></div>
      </div>
    </div>
  </div>
</template>

<script>
import numbro from 'numbro'

export default {
  props: [ 'src' ],
  data() {
    return {
      currentTime: 0,
      mediaDuration: 0,
      state: 'stopped'
    }
  },
  computed: {
    currentPercentage() {
      if (this.mediaDuration === 0) {
        return numbro(this.mediaDuration).format({ output: 'percent', mantissa: 0 })
      } else {
        return numbro(this.currentTime / this.mediaDuration ).format({ output: 'percent', mantissa: 0 })
      }
    }
  }
}
</script>

Step1: 获取duration

在audio上添加事件监听@canplay，在methods中定义对应的处理函数onCanplay。

1
2
3
4
5
6
7
8
<audio :src="src" ref="audio" @canplay="onCanplay" />

.....

    onCanplay(event) {
      const audio = event.target
      this.mediaDuration = parseInt(audio.duration)
    }

Step2: 获取currentTime

在audio上添加事件监听@timeupdate，在methods中定义对应的处理函数onTimeupdate. 这里调用的stop函数，会在下一步定义。

1
2
3
4
5
6
7
8
9
10
11
<audio :src="src" @canplay="onCanplay" @timeupdate="onTimeupdate" ref="audio" />
.......
    onTimeupdate(event) {
      const audio = event.target
      if (audio.currentTime >= this.mediaDuration) {
        this.currentTime = this.mediaDuration
        this.stop()
      } else {
        this.currentTime = audio.currentTime
      }
    }

Step3: 在methods中，定义play, pause, stop函数，用以处理audio的状态。

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
play() {
  const audio = this.$refs.audio
  if (this.state === 'stopped') {
    audio.currentTime = 0
  }
  if (audio.paused) {
    audio.play()
  }
  this.state = 'playing'
},
pause() {
  const audio = this.$refs.audio
  if (!audio.paused) {
    audio.pause()
  }
  this.state = 'paused'
},

stop() {
  const audio = this.$refs.audio
  if (!audio.paused) {
    audio.pause()
  }
  this.state = 'stopped'
}

Step4: 定义numberToStardardMinuteSecond函数，将currentTime，duration转化为时间。

引入numbro.

1
yarn add numbro

在methods中定义numberToStardardMinuteSecond：

1
2
3
4
5
6
7
8
9
10
numberToStardardMinuteSecond(num) {
  const number = parseInt(num)
  const time = numbro(number).format({ output: 'time' })

  if (time.substr(0, 1) === '0') {
    return time.substr(2, time.length - 2)
  } else {
    return time
  }
}

Step5: 在进度条上监听click事件，在methods中定义seek函数来处理click事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="progress" @click="seek">
  <div class="progress-bar bg-primary" style="transition-duration: 0.2s; transition-timing-function: linear;" role="progressbar" :style="`width: ${currentPercentage}`"></div>
</div>

......

    seek(event) {
      const $this = $(event.target)

      const widthclicked = event.pageX - $this.offset().left
      const totalWidth = $this.width()

      this.$refs.audio.currentTime = widthclicked / totalWidth * this.mediaDuration
    }

为了使progress可以点击，需要在style中给progress设置pointer-events。

1
2
3
.progress {
  pointer-events: auto;
}

Step6: 使用eventbus进行组件间的通信，实现一次只播放一个视频。

在audio play之前，$emit一个事件beforeplay， 同时将audio作为参数传出去。

修改play函数，添加事件派发：

1
2
3
4
5
6
7
8
9
10
11
play() {
  const audio = this.$refs.audio
  if (this.state === 'stopped') {
    audio.currentTime = 0
  }
  if (audio.paused) {
    this.$nuxt.$emit('beforeplay', audio)
    audio.play()
  }
  this.state = 'playing'
}

任何其他的组件都可以监听这个beforeplay事件，当然也包括AudioPlayer组件。

在AudioPlayer组件添加对beforeplay的监听：

1
2
3
4
5
6
7
8
9
10
created() {
  this.$nuxt.$on('beforeplay', (player) => {
    if (player === this.$refs.audio) {
      return
    }
    if (this.state === 'playing') {
      this.pause()
    }
  })
}

这里判断传过来的参数，如果是自身emit了这个事件，就跳过，如果是其他audio，同时自身还在播放，则自身停止播放。

OK，大功告成。

最终的完整代码：

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<template>
  <div class="d-flex w-100 align-items-top">
    <div class="audio-player mr-2">
      <audio :src="src" @timeupdate="onTimeupdate" @canplay="onCanplay" ref="audio" />
      <i v-if="state === 'playing'" class="far fa-pause-circle fa-2x" @click="pause"></i>
      <i v-if="state != 'playing'" class="far fa-play-circle fa-2x" @click="play"></i>
    </div>
    <div class="w-100">
      <span class="float-right text-muted small">{{ numberToStardardMinuteSecond(currentTime) }} / {{ numberToStardardMinuteSecond(mediaDuration) }}</span>
      <span class="small">点击后开始播放</span>
      <div class="progress" @click="seek">
        <div class="progress-bar bg-primary" style="transition-duration: 0.2s; transition-timing-function: linear;" role="progressbar" :style="`width: ${currentPercentage}`"></div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import numbro from 'numbro'

export default {
  props: [ 'src' ],
  data() {
    return {
      currentTime: 0,
      mediaDuration: 0,
      state: 'stopped'
    }
  },
  created() {
    this.$nuxt.$on('beforeplay', (player) => {
      if (player === this.$refs.audio) {
        return
      }
      if (this.state === 'playing') {
        this.pause()
      }
    })
  },
  computed: {
    currentPercentage() {
      if (this.mediaDuration === 0) {
        return numbro(this.mediaDuration).format({ output: 'percent', mantissa: 0 })
      } else {
        const progress = this.currentTime / this.mediaDuration
        return numbro(progress).format({ output: 'percent', mantissa: 0 })
      }
    }
  },
  methods: {
    play() {
      const audio = this.$refs.audio
      if (this.state === 'stopped') {
        audio.currentTime = 0
      }
      if (audio.paused) {
        this.$nuxt.$emit('beforeplay', audio)
        audio.play()
      }
      this.state = 'playing'
    },

    pause() {
      const audio = this.$refs.audio
      if (!audio.paused) {
        audio.pause()
      }
      this.state = 'paused'
    },

    stop() {
      const audio = this.$refs.audio
      if (!audio.paused) {
        audio.pause()
      }
      this.state = 'stopped'
    },

    onTimeupdate(event) {
      const audio = event.target
      if (audio.currentTime >= this.mediaDuration) {
        this.currentTime = this.mediaDuration
        this.stop()
      } else {
        this.currentTime = audio.currentTime
      }
    },

    seek(event) {
      const $this = $(event.target)

      const widthclicked = event.pageX - $this.offset().left
      const totalWidth = $this.width()

      this.$refs.audio.currentTime = widthclicked / totalWidth * this.mediaDuration
    },

    onCanplay(event) {
      const audio = event.target
      this.mediaDuration = parseInt(audio.duration)
    },

    numberToStardardMinuteSecond(num) {
      const number = parseInt(num)
      const time = numbro(number).format({ output: 'time' })

      if (time.substr(0, 1) === '0') {
        return time.substr(2, time.length - 2)
      } else {
        return time
      }
    }
  }
}
</script>

参考

Media events

EventBus for Nuxt.js components

发表于 | 分类于 |   |   1,437 words

列出常用的Curl命令以备忘。

请求页面

默认使用get，直接在终端输出response。

1
2
3
4
5
6
7
8
# 直接请求，此时response的内容可能会是301 Moved。
curl https://google.com

# 使用-L选项，允许重定向, 终端会输出Google首页的HTML。
curl -L https://google.com

# 使用-I， 只查看header部分, 终端将只输出Headers内容。
curl -I -L https://google.com

下载文件

将输出结果存储在文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# -O: 「 大写O 」不指定目标文件名，直接使用URL中的文件名，response保存在index.html文件中。
curl -O https://www.centos.org/index.html

# -o：「 小写o 」指定目标文件名, response保存在centos.html文件中。
curl -o centos.html https://www.centos.org

# 不使用 -o/O， 直接保存到指定文件
curl https://www.centos.org > centos.html

# -z: 版本比本地指定文件版本要新时，才下载
curl -z centos.html https://www.centos.org > centos.html

# 给定时间点，在该时间点之后有更新，才下载
curl -z "Jan 1 2018" https://www.centos.org > centos.html

# -C: 从上一次下载中断的地方继续下载, -C 也可跟-T一起使用，继续上传。
curl -C -o centos.html https://www.centos.org

# 一次下载多个文件: curl -O URL1 -O URL2，建议指定目标文件名，如果都是index.html会被覆盖
curl -O https://www.centos.org/index.html -O https://github.com/index.html

指定代理

使用-x.

1
2
# 基本格式 curl -x your-proxy:your-port URL
curl -x http://127.0.0.1:1087 https://www.youtube.com

这里的x为小写，大写的X有另外的意思，比如下面这个。

指定请求

使用-X指定其他请求命令

1
2
# 指定request command为DELETE，删除某个gist
curl -X DELETE -H "Authorization: token OAUTH_TOKEN" https://api.github.com/gists/gist_id

上传文件

使用-T

1
2
3
4
5
6
7
8
9
10
11
# 上传通常都需要授权，使用-u，带上用户名和密码信息
curl -T uploadfile -u user:password ftp://ftp.upload.com/file

# -a : 将本地文件追加到服务器中某个文件
curl -T uploadfile -a -u user:password ftp://ftp.upload.com/file

# -C: 从上一次中断的地方继续上传
curl -C -T uploadfile -u user:password ftp://ftp.upload.com/file

# 上传多个文件:
curl -T file1 ftp://ftp.com/moo.exe -T file2 ftp://ftp.com/moo2.txt

限制网速

使用--limit-rate

1
2
3
4
5
# 限制下载速度不超过10KB/s
curl -O --limit-rate 10K https://www.youtube.com/index.html

# 限制上传速度不超过1MB/s
curl -T --limit-rate 1M ftp://ftp.upload.com/file

授权访问

涉及到用户名的部分，使用 -u。

以GitHub API的授权为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 基本授权，用户名和密码
curl -u username:password https://api.github.com

# 或者下面这种更安全，回车，终端会提示输入密码，密码不明文输入，以防浏览历史记录时泄露密码
curl -u username https://api.github.com

# 指定代理，并授权访问
curl -u username https://api.github.com -x http://127.0.0.1:1087

# OAuth2 token，作为参数
curl https://api.github.com/?access_token=OAUTH-TOKEN

# OAuth2 token，放在header中传递，使用 -H
curl -H "Authorization: token OAUTH-TOKEN" https://api.github.com

存取cookies

某些场景下需要存储cookies. 比如访问GitHub:

1
2
3
4
5
6
# 返回的header中带有Set-Cookie
curl -I https://github.com

# 部分输出
Set-Cookie: has_recent_activity=1; path=/; expires= xxxxx
Set-Cookie: logged_in=no; domain=.github.com; path=/; expires= xxxx; secure; HttpOnly

通常的Set-Cookie是带有sessionId=xxxx，每次访问指定的path时都要求带上sessionId。

保存及使用cookies：

1
2
3
4
5
# 保存cookie: Netscape HTTP Cookie File
curl -c cookies.txt https://github.com

# 使用保存的cookies
curl -b cookies.txt https://github.com

发送POST

使用-d 或者-F.

-d 使用的是application/x-www-form-urlencoded mime-type， 如果涉及到文件上传时，使用-F.

1
2
3
4
5
6
7
8
9
10
11
# -d:<data>, 值为编译后的字符串，基本样式 <variable1>=<data1>&<variable2>=<data2>
curl -d "client_id=xxxx&client_secret=yyyy" https://api.github.com

# 上面同样的数据，使用-F "name=contents"，则是这样传
curl -F "client_id=xxxx" -F "client_secret=yyyy" https://api.github.com

# 传multipart/form-data,文件名前面要加上@
curl -F "[email protected]" https://api.github.com

# 可传多个文件并指定文件类型，不指定时curl会根据文件后缀名来猜。
curl -F "[email protected];type=image/gif, file2.html, file2.jpg"

设置User-Agent

使用-A:

1
2
# 设置
curl -A 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.96 Safari/537.36' https://api.github.com

追踪记录

使用-v或者 --trace 记录更多详细信息，个人理解为记录日志，方便在出错时debug。

1
2
3
4
5
# -v：verbose，记录更多信息
curl -v https://www.google.com

# --trace: 追踪curl命令的细节
curl --trace trace.txt https://github.com

less trace.txt ，查看trace的具体内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
== Info: Rebuilt URL to: https://github.com/
== Info:   Trying 127.0.0.1...
== Info: TCP_NODELAY set
== Info: Connected to 127.0.0.1 (127.0.0.1) port 1087 (#0)
== Info: Establish HTTP proxy tunnel to github.com:443
=> Send header, 112 bytes (0x70)
0000: 43 4f 4e 4e 45 43 54 20 67 69 74 68 75 62 2e 63 CONNECT github.c
0010: 6f 6d 3a 34 34 33 20 48 54 54 50 2f 31 2e 31 0d om:443 HTTP/1.1.
0020: 0a 48 6f 73 74 3a 20 67 69 74 68 75 62 2e 63 6f .Host: github.co
0030: 6d 3a 34 34 33 0d 0a 55 73 65 72 2d 41 67 65 6e m:443..User-Agen
0040: 74 3a 20 63 75 72 6c 2f 37 2e 35 34 2e 30 0d 0a t: curl/7.54.0..
0050: 50 72 6f 78 79 2d 43 6f 6e 6e 65 63 74 69 6f 6e Proxy-Connection
0060: 3a 20 4b 65 65 70 2d 41 6c 69 76 65 0d 0a 0d 0a : Keep-Alive....
......

果然详细，画风有没有很Wireshark？

参考

Manual – curl usage explained

curl 常用命令

15 Practical Linux CURL command examples

发表于 | 分类于 |   |   393 words

写在前面

访问GitHub接口时，除了通过用户名和密码来实现基本的授权外，还可以通过OAuth2 token的方式。不过后一种方式需要你先生成ACCESS TOKEN。

GitHub的help中有一篇文章create a personal access token for the command line提到了如何生成token，这里记录下实际操作的过程。

创建你的token

登录GitHub，点击页面右上角你的头像，弹出的菜单栏中，有settings选项，点击进入settings页面。

在左边的菜单栏中选择Developer settings：

在Developer settings主页中，选择 Personal access tokens，点击 Generate new token 按钮。

在token的生成界面，输入token的描述，并选择可以访问的信息范围，比如允许访问我的repos，notifications，gist.

点击下方的Generate token按钮，便会生成token【这里隐去我自己的……】。

呃，以上步骤也可以简化成一句：直接访问https://github.com/settings/tokens，登录，按照指示创建token。

使用token

好了，拿到access token后，就可以在终端使用啦。

输入：

1
curl -H "Authorization: token YourToken" https://api.github.com

或者：

1
curl https://api.github.com/?access_token=YourToken

将「 YourToken 替换成 刚刚生成的token 」

会得到如下的response：

鉴于每次访问其他接口时，都需要把token放在header中，可以将token设置成环境变量，这样每次用起来就不用copy一大坨的字符了。

设置：

1
export GITHUB_ACCESS_TOKEN=YourToken

请求你的个人信息:

1
curl -v -H "Authorization: token $GITHUB_ACCESS_TOKEN" https://api.github.com/user

简直完美！

参考：

create a personal access token for the command line

发表于 | 分类于   |   1,673 words

台湾的一位编辑写的书。

作者郝明义，看完才知道原来是一位已年过六旬的老人家，生于韩国，长于台湾。

习惯性搜下了作者的“部落格”「台湾人称blog为部落格」，内容挺多的，记录了很多作者成长中发生的事情。

全书共七个部分，内容不多，也许是因为我仅仅把它当成甜食阅读来看，观其大略，过眼不过脑，所以觉得读起来并不费劲，现在想想，按照作者对阅读的分类，这应该算是蔬果阅读。

简单缕缕每个部分的主要内容。

第一部分提到了学校带来的困惑，说的是台湾教育中，学生，家长对于教科书的过分看重，一味填鸭式教育，还对比了西方国家与本土教育的差别，作为应试教育的一员，虽然觉得作者对于应试教育部分说的有些过于严重了，但是看的时候还是觉得那种多度食用兴奋剂的阅读结构确实很有问题。这部分比较有印象的是提到了朱光潜。

朱光潜的《谈读书》：

一年之中可以时而习天文，时而研究蜜蜂，时而读莎士比亚。在旁人认为重要而自己不感兴趣的书都一概置之不理。……它的好处在使读书成为乐事，对于一时兴到的著作可以深入，久而久之，可以养成一种不平凡的思路与胸襟。它的坏处在使读者泛滥而无所归宿，缺乏专门研究所必需的‘经院式’的系统训练，产生畸形的发展，对于某一方面知识过于重视，对于另一方面知识可以很蒙昧。

而我目前的阅读习惯基本就是随性，自然就容易畸形而不自知。阅读好比饮食，长期吃甜食而不是有规律的吃正餐，对身体自然是不好的。阅读长期随性，容易养成泛泛而读的毛病，对脑子自然也是不好的，容易营养不良。不过有些时候不得不说，有些书，你即使很早就开始读，你读不懂也读不进去，读者在挑书的时候，作者也在挑读者。那是不是读不懂的就不读了呢？作者在后面给出了答案。

泛观博取，不如熟读而深思。

第二部分将阅读对比饮食，提出了四种阅读：主食阅读，美食阅读，蔬果阅读，甜食阅读，强调阅读也要营养均衡，不可偏食。对这部分，印象最深刻的其实是作者提到在北京吃的那份’甜烧白’。

好的阅读习惯，自然是越早开始培养越好，但是迟了也总比没有开始的好。

第三部分网络上的那些事，抛出一个问题，网络对于阅读的影响，特别说了比较流行的观点，认为网络让人远离了阅读，作者引经据典，提出“阅读越是方便的时候，我们越不想阅读，人性如此，从来如此，和网络无关”。作者对于网络对阅读的影响持乐观态度。

第四部分，越界的基础，举了《天龙八部》里面鸠摩智的例子来说明精彩的小说是三十万字写三十个字。其实我不是很懂这部分跟越界有什么关系，作者认为，一个人应该读小说，读诗，读哲学，读历史，看图像，读漫画，当然，还有网络时代的影像作品，比如电影。老人家还贴心的给出了入门哲学的方法，谈到读历史部分，提到了《资治通鉴》，好的书籍也是挑人的，以我现在这浮躁的心态，怕是看不进去的。如何练习读精彩的小说？作者推荐了张大春的《小说稗类》，我想不管推荐什么，还是自己多读读才有感觉吧。

好看的小说，第一句话，第一页就告诉你这是一部好看的小说。

第五部分，一些工具，具体指的是如何分配自己的时间，利用好零散和整块的时间来阅读， 如何更合理的利用大脑，利用书店，定期处理藏书，善用图书馆等等。这一部分最深刻的是作者提到了recollect，大脑不能仅仅是remember，应该留有更多的空间来做recollect，把需要记忆的信息收集整理，在需要的时候再取出来，强调大脑的组织能力而不是存储能力。

第六部分，说到了四种读书方法：陶渊明的“不求甚解”，诸葛亮的“观其大略”，朱熹的“熟读精思”，苏东坡的“八方受敌”。苏东坡年少读书，很多书都是读好几遍。果然大家的养成，也是时间和精力的积累，谁都是从零开始，只是有些人开始的早，启蒙时养成的就是高手该有的习惯，后面顺着路子走，自然越走越顺。对于自己暂时看不懂的书，作者提出千万不能因为自己看不懂就远离，连滚带爬先过一遍，读不懂是正常，有疑惑才有收获。

如果说人生是一个大圆的话，阅读是使这个圆更圆满的很重要的一环，但绝不是唯一的一环。

少读一点书。瞅瞅别人家的孩子，六祖惠能，从来没读过书，就开悟了。

第七部分，跨越七道阶梯。作者给出了一些方法。这里提到的第一桶金，我觉得应该算是先精通了某一个领域或者某个极小的点，修得了一定的专门学问，然后才随性而行，泛观博取。只有开出第一条路，才不会在诺大的密林里迷失。

说说看完这本书之后，我做了什么。
搜了下甜烧白是什么，然后看上海哪里有卖的。

搜了中国的那些山水人物画，发现故宫的官网上，可以看种类繁多的中国字画，只是放大和缩小时，体验太差。

下单将《宋词三百首》，《天龙八部》加入了购物车，本来想加入《带子狼》，贫穷限制了我。

又去刷了下97黄日华版的《天龙八部》……

果然读一本书要花好多时间的……

发表于 | 分类于 |   |   861 words

使用axios发请求传参时，需要对参数进行处理，用到了qs，第一次接触，懵逼，刷了遍文档，简单记录下qs的使用。

基本概念

qs: a querystring parse with nesting support.

主要方法：parse, stringily.

1
2
3
4
5
const qs = require('qs');

qs.parse(string, [options]);

qs.stringily(object, [options])

最新版本：6.6.0，示例代码以6.5.2为主， 所有代码参考其github主页。

parse

可供设置的options及默认options：default.

看几个简单的例子：

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
const qs = require('qs');

console.log(qs.parse('foo[bar]=baz'));
// 输出： foo: { bar: 'baz' } }

// 最多可以解析到5个子层
const fiveChilden = qs.parse('a[b][c][d][e][f][g][h][i]=j')
console.log(fiveChilden);
/* 输出：
{ a: { b: { c: [Object] } } }
如果你的输出也是这样，别着急，是console的问题： console.log() is invariably limited to 2 levels.
*/


// 使用util.inspect再输出
const util = require('util');
console.log(util.inspect(fiveChilden, {showHidden: false, depth: null}))
// 输出： { a: { b: { c: { d: { e: { f: { '[g][h][i]': 'j' } } } } } } }


// 带 ?

console.log(qs.parse('?a=b&c=d'));
// 输出： { '?a': 'b', c: 'd' }

console.log(qs.parse('?a=b&c=d', { ignoreQueryPrefix: true }));
// 输出： { a: 'b', c: 'd' }

// 不带 ?
console.log(qs.parse('a=b&c=d'));
// 输出： { a: 'b', c: 'd' }

// 带.
console.log(qs.parse('a.b=c'));
// 输出： { 'a.b': 'c' }

console.log(qs.parse('a.b=c', { allowDots: true }));
// 输出： { a: { b: 'c' } }

// 带有 ,与文档中的comma设置输出不一致
console.log(qs.parse('a=b,c', { comma: true }));
// 输出：  { a: 'b,c' }


// parse 数组

console.log(qs.parse('a[]=b&a[]=c'));
// 输出： { a: [ 'b', 'c' ] }

//带索引，索引 <= 20 才能正确解析
console.log(qs.parse('a[1]=b&a[2]=c'));
// 输出： { a: [ 'b', 'c' ] }

console.log(qs.parse('a[20]=b'));
// 输出： { a: [ 'b' ] }

console.log(qs.parse('a[200]=b'));
// 输出： { a: { '200': 'b' } }

// 数据有空值
console.log(qs.parse('a[]=&a[]=b'));
// 输出： { a: [ '', 'b' ] }

// 数组对象
console.log(qs.parse('a[][b]=c'));
// 输出： { a: [ { b: 'c' } ] }

// 传递null, 可设置 strictNullHandling true
console.log(qs.parse('a&b='));
// 输出： { a: '', b: '' }

console.log(qs.parse('a&b=', { strictNullHandling: true }));
// 输出： { a: null, b: '' }

这里有些奇怪的是comma部分，跟文档输出不一致，stringily也出现了同样的问题。去看了issues，发现已经有人提出来了，详见issue299， 等新版本修复发布。

stringily

可供设置的options及默认options：default.

直接上代码：

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
31
32
33
34
35
36
37
38
const qs = require('qs');

// 对象
console.log(qs.stringify({ a: { b: 'c' } }));
// 输出： a%5Bb%5D=c

console.log(qs.stringify({ a: { b: 'c' } }, { encode: false }));
// 输出： a[b]=c

// 数组，默认 indices true
console.log(qs.stringify({ a: ['b', 'c', 'd'] }, { encode: false }));
// 输出： a[0]=b&a[1]=c&a[2]=d

console.log(qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false }));
// 输出： a=b&a=c&a=d

// 使用 arrayFormat 来决定输出的Array样式

console.log(qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices', encode: false }));
// 输出： a[0]=b&a[1]=c

console.log(qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets', encode: false }));
// 输出： a[]=b&a[]=c

console.log(qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat', encode: false }));
// 输出： a=b&a=c

// 与文档中的comma设置输出不一致
console.log(qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma', encode: false }));
// 输出： a[0]=b&a[1]=c

// null 被当成空值处理
console.log(qs.stringify({ a: null, b: '' }));
// 输出： a=&b=

// 跳过值为null的key
console.log(qs.stringify({ a: 'b', c: null}, { skipNulls: true }));
// 输出： a=b

参考

qs

发表于 | 分类于 |   |   505 words

nuxt中自定义全选指令

看两个例子来熟悉熟悉nuxt中如何自定义指令，一个简单的focus指令，一个是比较常用的全选功能。

一个简单的focus指令

在plugins文件夹下，新建文件directives.js，放入如下内容：

1
2
3
4
5
6
7
// focus指令的定义参考vuejs官方文档
import Vue from 'vue'
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

修改nuxt.config.js文件，添加自定义指令声明：

1
2
3
plugins: [
  '~/plugins/directives'
],

重启nuxt, 好了，可以开始使用了。

任意页面中添加:

1
<input v-focus>

效果：

全选实现

先看效果：

思路是给全选按钮一个class: select-all, 每个选项一个class：select-item， 最外面包一层指令: select-all-container. 这样所有相关的checkbox都在指令的el内了，这样就可以定位到对应的元素。

然后利用bind钩子函数，来给按钮添加change事件。

具体步骤基本同focus，只是directives.js的内容不一样，这里贴上指令的定义部分和示例的HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// plugins/directives.js
import Vue from 'vue'
import $ from 'jquery'

Vue.directive('select-all-container', {
  bind: function (el) {
    $(el).on('change', '.select-item', function() {
      const $items = $(el).find('.select-item')
      const allChecked = $items.length != 0 && $items.not(':checked').length == 0
      $(el).find('.select-all').prop('checked', allChecked)
    })

    $(el).on('change', '.select-all', function() {
      $(el).find('.select-item').prop('checked', this.checked)
    })
  }
})

调用bind钩子函数，给全选及单个子选项添加change事件。

HTML示例部分：

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
<template>
  <div v-select-all-container>
    <label>
      <input type="checkbox" class="select-all"> 全选
    </label>
    <ul class="list-unstyled ml-4">
      <li v-for="student in students" :key="student.id">
        <label>
          <input type="checkbox" :value="student.id" class="select-item">
          {{ student.name }}
        </label>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
      data() {
          return {
              students: [{ 'id': 1, 'name': "张三" },
                         { 'id': 2, 'name': "李四" },
                         { 'id': 3, 'name': "王五" },
                         { 'id': 4, 'name': "赵麻子" }]
          }
      }  
  }    
</script>

好，大功告成。

参考

Where do custom directives belong?

custom-directive

用Vue实现全选指令

发表于 | 分类于 |   |   545 words

问题描述：

在Vue项目中，使用flatpickr 做一个日期选择器DatePicker的组件，发现使用v-model时出了问题。

上图：

这里当我更新新的日期时，v-model并没有同步更新，而是保持着初始值。

对应的HTML及组件定义的代码如下：

HTML：

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
<template>
  <div>    
    <div class="form-group row">
      <label class="col-form-label text-right col-4">昵称</label>
      <div class="col">
        <input v-model="nickname" name="nickname" type="text" class="form-control">
      </div>
    </div>
    {{ nickname }}

    <div class="form-group row">
      <label class="col-form-label text-right col-4">生日</label>
      <div class="col">
        <DatePicker v-model="birthday" name="birthday">
      </div>
    </div>
    {{ birthday }}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        nickname: 'lucia',
        birthday: '2018-12-26'  
      }  
    }
  }    
</script>

DatePicker组件的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="input-group flatpickr" data-alt-input="true" data-locale="zh" data-alt-format="Y-m-d">
    <input :value="value" :name="name" class="flatpickr-input" data-input="true">
    <a class="input-group-append" data-toggle>
      <span class="input-group-text">
        <i class="far fa-calendar-alt" />
      </span>
    </a>
  </div>
</template>

<script>
import initFlatpickr from './flatpickr'

export default {
  props: [ "value", "name" ],
  mounted() {
    initFlatpickr(this.$el)
  }
}
</script>

「其中initFlatpickr用于创建flatpickr实例，这里它不是重点，具体内容略去。」

Google后，参考Adding v-model Support to Custom Vue.js Components，完美解决。

解决方法：

解决问题前，需要了解，v-model 是语法糖，以下两种写法得到的效果是一样的：

1
2
3
<input v-model="message" type="text">

<input :value="message" @input="message = $event.target.value" type="text">

而对于组件DatePicker，我只需要在发生input事件时，将值传给父组件的input事件即可。

接下来就自然而然了。

修改DatePicker组件的input部分内容，监听input事件，当发生input事件后调用updateDate()方法，emit父组件的input事件，将用户选中的值传给父组件。

这里只显示修改部分的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    ......
  <input :value="value" :name="name" class="flatpickr-input" data-input="true" @input="update" ref="datePicker" @input="updateDate">
    ......
</template>


<script>
  .......
export default {
  .......
  methods: {
    updateDate() {
      this.$emit('input', this.$refs.datePicker.value)
    }
  }
}
</script>

这时再看刚刚的页面，问题解决。

参考

Adding v-model Support to Custom Vue.js Components