查看当前shell

• echo $SHELL

• Mac默认的shell是bash

安装 oh my zsh

• sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

更换主题

首先查看主题地址：https://github.com/robbyrussell/oh-my-zsh/wiki/Themes

• sudo vim .zshrc

• 修改ZSH_THEME

切换全屏和Normal

Alias

• 查看所有的alias alias

• 添加alias alias cls='clear'

• 上面这样添加只是临时的，重启iTerm就没了

• 要永久保存就要在~/.zshrc 的文件末尾添加alias

自动提示

• clone zsh-autosuggestions

• git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

• update .zshrc & add plugins

• plugins=(zsh-autosuggestions git)

• 修改提示文字颜色

• cd ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

• vim zsh-autosuggestions.zsh

• 查找ZSH_AUTOSUGGEST_HIGHLIGHT_STYLE

• 修改 ZSH_AUTOSUGGEST_HIGHLIGHT_STYLE='fg=10'

语法高亮

• brew install zsh-syntax-highlighting
• 配置.zshrc文件，在文件末尾加入下面一行
• source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
• 关联
• source ~/.zshrc

安装coreutils

• brew install coreutils

Reference

Mac iTerm Setting

SASS 的问题

练习

SASS用法指南

垂直水平居中的方案

simaQ/cssfun#3

浏览器缓存是前端优化一个重要的手段，今天在查看项目缓存的时候发现了一个问题，总结记录一下。

首先先把我发现的问题抛出来吧

看上图是一个vendor.17e42c484553da3d4116.js脚本文件，没有配置强缓存的expires和cache-control而刷新的话是直接from memory cahce，也就是说它配置的是协商缓存，而没有发起请求验证。

浏览器缓存

强缓存

• 强缓存需要服务端设置expires和cache-control
• 优先级cache-control > expires

expires的值是一个绝对时间，是http1.0的功能。如果浏览器的时间没有超过这个expires的时间，代表缓存还有效，命中强缓存，直接从缓存读取资源。不过由于存在浏览器和服务端时间可能出现较大误差，所以在之后http1.1提出了cache-control。

协商缓存

• 协商缓存会根据[last-modified/if-modified-since]或者[etag/if-none-match]来进行判断缓存是否过期

协商缓存是无法减少请求数的开销的，但是可以减少返回的正文大小。一般来说，对于勤改动的html文件，使用协商缓存是一种不错的选择

回到刚才的问题

Ref

简单说是贪婪匹配与非贪婪匹配的区别。

比如说匹配输入串A: 101000000000100

使用 1.*1 将会匹配到1010000000001, 匹配方法: 先匹配至输入串A的最后, 然后向前匹配, 直到可以匹配到1, 称之为贪婪匹配。

使用 1.*?1 将会匹配到101, 匹配方法: *匹配下一个1之前的所有字符, 称之为非贪婪匹配。

所有带有量词的都是非贪婪匹配: .*?, .+?, .{2,6}? 甚至 .??

组合继承

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green']
}

Parent.prototype.getName = function() {
  console.log(this.name)
}

function Child(name, age) {
  // 这是第一次调用
  Parent.call(this, name)
  this.age = age
}

// 这是第二次调用，我们要优化的就是这里
Child.prototype = new Parent()
Child.prototype.constructor = Child

var child = new Child('a', 1)

这是JS中最常见的继承方式
但是存在一个问题那就是Parent构造函数会被执行两次，此时child、Child.prototype和child.__proto__中都会存在color属性，如何避免Parent构造函数执行两次呢，就看看下面的继承方式吧。

寄生组合式继承

function Parent(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
} 

Parent.prototype.getName = function() {
  console.log(this.name)
}

function Child(name, age) {
  // 这是第一次调用
  Parent.call(this, name)
  this.age = age
}

function F() {}
F.prototype = Parent.prototype

Child.prototype = new F()
Child.prototype.constructor = Child

var child1 = new Child('a', 1)

最后封装一下这个方法

var Utils = (function (win) {

  function createPrototype(origin) {
    function F() {}
    F.prototype = origin
    return new F()
  }

 function extend(child, parent) {
 
   var proto = createPrototype(parent.prototype)
   proto.constructor = child
   child.prototype = proto
 }

return {
extend: extend
}

})(window)

vim 查找

• 在normal模式下输入/，然后输入你要查找的内容后enter

shell ls 过滤

• ls *auto*

Reference

如何在Vim中优雅的查找

.eslintrc.js

module.exports = {
"globals": {
    "$": true,
    "jQuery": true
  }
}

webpack.config.js

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}

Base Uasge

document.addEventListener('DOMContentLaoded', function() {
  // DOM Parse End
}, false)

window.onload = function() {
  // all file download & parsed
}

预渲染

DOM的渲染会等DOM树全部解析完才会开始，那么把js放在body下面和head不是一样的吗。但是现代浏览器都有预渲染的机制，也就是说浏览器可以渲染不完整的dom，那么我们把js放在body下面就可以预先渲染js之前的dom，然后js执行完成之后才会触发DOMContentLoaded事件，接着浏览器下载图片等各种资源，下载完成后就会触发window.onload事件

Reference

DOMContentLoaded & onload

原来在生成SSH密钥的时候设置了密码，导致了现在GIt使用时都要输入密码，这就很烦了，下面的办法就可以让你去除密钥的密码了。

使用openssl去除密码

• openssl rsa -in ~/.ssh/id_rsa -out ~/.ssh/id_rsa_new

备份旧的密钥

• mv id_rsa id_rsa_new

使用新的密钥

• mv id_rsa_new id_rsa

设置权限

• chmod 600 id_rsa