其实本来是想将博客打造成专门记录技术相关的，但是想了下，既然已经开始写了，为什么要限制住内容呢？将自己觉得优秀的、有价值的东西记录下来，一方面方便自己review，另一方面说不定也能造福别人呢，所以才会有这篇关于做笔记的优化方案。

自从工作以来，我就很喜欢“解决方案”这个词，一方面觉得会比较专业，另一方面客户也喜欢听（也许只是我的错觉 :P）。

今天听到一句话感触挺深的：

牛奶过期了，你会很容易发现，那么知识过期了呢？

虽然已经毕业快5年了，但是我还是很喜欢通过用实际的纸和笔，将一些重点内容都记下来，一方面是为了加强印象，一方面是为了方便以后的复习。

其实关于前端的内容，我已经记录了超过了一本笔记本了，但是由于当时上课时间比较紧张，字迹就难免潦草，回头review的时候就会看的很吃力，并且感觉自己只是“记录了下来”，并没有自己的深入思考。

今天有人提起用方格笔记本记笔记，特别提到了一本书叫 《聪明人用方格笔记本》，正好我最近打算将JS的知识点再深入回顾一下，所以打算用这个优化方案来实习，具体操作如下：

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

1. 笔记分为3个部分：左、中、右；

2. “左”用蓝色笔、“中”用黑色笔、“右”用红色笔记录（颜色可自定义）；
 
3. “右”先空下，用“左”记录老师的板书（比如概念、定义、定理、公式这样的）；

4. 用“中”记录老师的点评、自己的疑点和注意要点；

5. “右”记录为解决这些疑点而采取的行动及相关总结。

6. 也可以用“事实—解释-行动”来记录。

还有些基本原则：

a. 行首对齐

b. 在行首空两三个字的地方写小标题

c. 在比小标题往后两三个字的地方写内容

d. 项目改变时空一行

e.注意留出空隙，留出进行信息整理的空间

PS: 可参考一篇写的还不错的 读书笔记。

以上。

行动起来吧~

使用pm2实现自动监控文件变动，自动提交

1.在本地安装pm2（一个可在后台永久打开一个node小程序的 nodejs应用，也可以监控文件变化），按照代码如下：

1

sudo npm install -g pm2

2.在博客的 resource 文件夹下新建 start.js ，内容如下：

1
2
3
4
5
6
7

var process = require('child_process');

process.exec(' hexo g -d', function (error, stdout, stderr) {
    if (error !== null) {
      console.log('exec error: ' + error);
    }
});

3.在同级目录下创建 watch.json ,内容如下

1
2
3
4
5
6
7
8
9

{
  "apps" : [{
    "name"       : "blog",
    "script"     : "./start.js",
    "exec_interpreter": "node",
    "exec_mode"  : "fork_mode",
    "watch"      : "_posts"
  }]
}

4.使用pm2命令实现监控文件变动自动提交

pm2 start watch.json

以上即可轻松自动部署。

情景：

1
2
3
4
5
6
7
8

$ git push -u origin master
To git@git.coding.net:xxxx.git
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'git@git.coding.net:xxxx.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

这时候加个-f (short for force) 强制push：

git push -u origin master -f

git 参考手册： http://git-scm.com/book/zh/v1

URI –uniform resource identifier，统一资源标识符

URL –uniform resource locator，统一资源定位器

URN –uniform resource name，统一资源命名

参考：https://danielmiessler.com/study/url_vs_uri/

不废话直接上结论：

1. URL是URI的一种。如果有人对你说URL不是URI，那么你可以告诉他错了，但并不是所有的URI都是URL。 比如所有的蝴蝶都会飞，但是并不是所有的会飞的都是蝴蝶。

2. 使URI成为URL的部分就是“访问机制” 或者叫“网络地址” 例： http:// or ftp://.

3. URN是 “globally unique（全局唯一）” 的标识符，是唯一的名字。

• ftp://ftp.is.co.za/rfc/rfc1808.txt (因为协议所以也是 URL)
• http://www.ietf.org/rfc/rfc2396.txt (因为协议所以也是 URL)
• ldap://[2001:db8::7]/c=GB?objectClass?one (因为协议所以也是 URL)
• mailto:John.Doe@example.com (因为协议所以也是 URL)
• news:comp.infosystems.www.servers.unix (因为协议所以也是 URL)
• tel:+1-816-555-1212
• telnet://192.0.2.16:80/ (因为协议所以也是 URL)
• urn:oasis:names:specification:docbook:dtd:xml:4.1.2

上面的例子都是URI，并且有部分是URL。

最后，如果不需要很准确只要说URI就行了，否则就要分析下是否是URL。

Quick tip: Using a Sublime Text 2 code snippet siaf to quickly insert a self-invoking anonymous function.

You can find the option in the menu (Windows OS):

Tools → New Snippets…

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

<snippet>
<content><![CDATA[
// function:
(function(){
	$0
})();

]]></content>


<tabTrigger>siaf</tabTrigger>
</snippet>

Named it siaf.sublime-snippet.

尝试过：

npm cache clean -f

npm update -g

失败；

也尝试过：

npm install n -g

n stable

无果。

最后，只能。。

覆盖安装新版本。。。

笑cry。

OSX用户可用MacDown，但由于本人使用随大流的Windows系统，可通过在Sublime上安装小插件实现之。

安装Mardown Preview插件

打开Sublime后按ctrl + shift + p换出控制面板。键入install package，等待片刻后会输入MarkDown Preview后点击回车，便会进行安装。

使用浏览器来preview效果

安装完后你便可以用sublime来编写Markdown语法了并使用浏览器预览了。当你想查看效果的时候，键入ctrl + shift + p，控制板中键入Markdown，选择preview in browser，再选择github。

总结

1. Sublime确实可以实现预览功能，但不是实时的，还要每次操作，太麻烦，用户体验太差，弃之。

2. 随手搜了个支持window的MarkDown编辑器Markdown Pad，可实时显示输入效果，功能和MscDown类似，表示用得很欢，推荐之。

闭包

一句话概括

函数里面能访问函数外面的变量；

1
2
3
4
5

var a=1;

function foo (){
   这里可以访问到a;
};

闭包是作用域的一种应用

复杂的是：闭包 + return function + 内存回收 相关的基础知识结合。

下面推荐个写的很赞的博客：

中文

英文

最近重温了下Flex，发现不用的话很快就会忘记，所以除了用传统的笔记外，再在blog上敲一下加深下印象。 ：）

一个弹性盒布局是这样的：

W3C上给出的图片：

个人感觉MDN给的图片看着更清楚：

1 兼容性

a. IE 8，9都不支持，10是要写 display: flexbox;

b. Chrome 20- / Safari 3.1+ / Firefox 2-21 / Android 2.1+ / iOS 3.2+ 都是09年旧的语法，需要写 display: box;

c. Chrome 21+ / Safari 6.1+ / Opera 12.1+ / IE 11+ / Android 4.4+ / iOS 7.1+ 都可采用新的 display: flex；

2 Flex Container

display: flex | inline-flex;

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: <'flex-direction'> || <'flex-wrap'>;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

align-items: flex-start | flex-end | center | baseline | stretch;

3 Flex items

order: 'integer';

align-self: auto | flex-start | flex-end | center | baseline | stretch;

关于Baseline:

flex-grow: 'number'; /* default 0 */

flex-shrink: 'number'; /* default 1 */

根据需要用来定义伸缩项目收缩的能力。[注意：负值同样生效。]

flex-basis: 'length' | auto; /* default auto */

flex: none | [<'flex-grow'> <'flex-shrink'> ?|| <'flex-basis'>] /* default: 0 1 auto */

相关资料：

1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

3. https://segmentfault.com/a/1190000002910324

Quick tip: Sublime will reindent code for you and usually does a pretty good job.

You can find the option in the menu:

Edit → Line → Reindent.

You can add a custom key binding setup in the Sublime 2 menu:

Preferences → Key Bindings – User

Adding the following line to your user keybindings,

1

{"keys": ["ctrl+shift+a"], "command": "reindent" , "args": {"single_line": false}}

You can use Ctrl+Shift+a to make your code looks better.