作者归档：Keystion

【转】折腾了一下Terminal（终端）之iTerm2

发表评论

iTerm2.png

很早之前@GhostBoyZone发给我一个关于iTerm 2的主题配置，收藏了，后来也分享给小伙伴们了，特此来Mark到自己的博客里面，顺便修复了字体的问题。

或许别人会觉得这个主题过于花哨，萝卜白菜各有所爱。还有很多大神直接用vim（应该算个神器吧？）。

iterm2-zsh-agnoster-git.png

所以正文从这里开始咯…

终端应用：iTerm2

下载安装，这个你懂的。

按Command + , 打开偏好设定窗口：

  1. Profiles / Window，把 Settings for New Windows 中的 Style 改成 Left of Screen 让它在屏幕左侧显示（在宽屏显示器上效果不错）
  2. Keys，勾选 Hotkey 中的 Show/hide iTerm2 with a system-wide hotkey，然后设定一个热键。我个人偏爱 Command + .。
    现在按 Command + . 就可以随时调出或者隐藏 iTerm2 了。

<!– more –>

配色方案：Solarized Dark

下载，解压，打开 iTerm2 的偏好设定，Profiles / Colors，最下面的 Load Presets … / Import… 加载 iterm2-colors-solarized/Solarized Dark.itermcolors 配色方案。

Z-Shell

系统自带了 4.0 版的 zsh，但我们可以用 brew install 安装最新的 5.X。

brew install zsh
sudo rm /bin/zsh    # 替换系统自带 zsh
sudo ln -s `brew --prefix zsh`/bin/zsh /bin/zsh
chsh -s /bin/zsh  # 切换系统当前用户的默认 shell 为 zsh

安装完毕，Command + W 关闭 iTerm2 当前窗口，然后按 Command + . 重新打开，此时 shell 已经换成 zsh 了。

oh-my-zsh

这是一套十分强大的 zsh 配置方案。

curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

下载这个字体补丁并安装，给系统中的 Menlo 字体进行增补。

安装字体Monaco for Powerline。（@GhostBoyZone）

链接: https://pan.baidu.com/s/1bp7SfeR 密码: tbbk

打开 iTerm2 的偏好设定，Profiles / Text，把 Regular Font 和 Non-ASCII Font 都换成 Menlo，大小为 14pt Regular。

编辑 ~/.zshrc 文件：

ZSH_THEME="agnoster"          # 使用 agnoster 主题，很好很强大

DEFAULT_USER="你的用户名"     # 增加这一项，可以隐藏掉路径前面那串用户名

plugins=(git brew node npm)   # 自己按需把要用的 plugin 写上

其中插件可以看这里https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins。

另外，建议把末尾的 export PATH 稍微调整一下，比如 Homebrew 就建议 /usr/local/bin 应该优先于 /usr/bin；另外也可以自己加上比如 Ruby Gems 目录 /usr/local/opt/ruby/bin、Node.js NPM 目录 ~/bin 等。

export PATH=/usr/local/bin:/usr/local/sbin/:$HOME/bin:$PATH

关于 Homebrew 的路径，比如 zsh 这个包可以通过 brew --prefix zsh 知道它的目录是 /usr/local/opt/zsh，关于这些链接：

  • /usr/local/opt/zsh 目录 -> /usr/local/Cellar/zsh/版本号 目录
  • /usr/local/bin/zsh 文件 -> /usr/local/Cellar/zsh/版本号/bin/zsh 文件

所以就有了上面那条 chsh -s 命令的写法。

重新打开 iTerm2 窗口，配置完成。玩的愉快 😜

参考资料

转自：http://xingrz.me/2013/2013-06-19/terminal-zhuangbility.html

wc: command not found

发表评论

wc: command not found

环境：macOS Sierra 10.12.1 (16B2555)

今天^2016.11.17在用户目录下面，编辑.bash_profile的时候把PATH的值写错了，结果就出现了小白心惶惶的现象；

wc: command not found 01.jpg

wc: command not found 02.jpg

出现这样的现象，sudo、cd、vi等之类的命令都不能用，迷之尴尬啊，心慌了，怎么才能把.bash_profile里的PATH值修改了呢，就想到了Sublime Text编辑器可以显示隐藏文件，遂把整个用户目录丢到了编辑器里面，找到相应的值，加以修正，这才安心下来。😂

解决方法：

把用户目录丢到sublime text3里面修改了正确的PATH值。

点滴记录，fix it。

CSS中的z-index的最大值

发表评论

z-index
图片来自：www.annyhe.com/zindex/#3

z-index属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。 —MDN z-index

<!– more –>

z-index sample

业务代码中看见了这样一段code，然后想都没有想，直接把另一个元素的z-index值设置为：999999999999999 + 1，就能把它覆盖掉吧，结果并没有那么理想。◻︎_-||

然后就去查找z-index在各个浏览器中的最大值是多少呢，Google了一番找到了下面这个表格，

Browser Max z─index value When exceeded, value changes to:
浏览器 最大值 超过时,值的变化：
Firefox 0-2 2147483647（length:10） element disappears/元素消失
Firefox 3 2147483647（length:10） 0
Firefox 4+ 2147483647（length:10） 2147483647（length:10）
Safari 0-3 16777271（length:8） 16777271（length:8）
Safari 4+ 2147483647（length:10） 2147483647（length:10）
Internet Explorer 6+ 2147483647（length:10） 2147483647（length:10）
Chrome 29+ 2147483647（length:10） 2147483647（length:10）
Opera 9+ 2147483647（length:10） 2147483647（length:10）

举个栗子：

example

https://codepen.io/Keystion/embed/mOEBzO

特此而来Mark一下，没有辣么多浏览器，也就测试了下：

  • chrome（版本 54.0.2840.87 (64-bit)）
  • Safari（版本 10.0.1 (12602.2.14.0.7)）
  • Firefox（49.0.2）

参考文献：

快速切图

发表评论

第一种

按C用切片工具，然后随便框选你要的内容，F3（mac可能是Fn+F3），然后cmd+n，ctrl+v或者（F4）（mac可能是Fn+F4）
整个过程不用3s

第二种

把你的要图层设置成组，然后命个名，比如xxx.png
然后菜单 > 文件> 生成 > 生成xxx资源什么鬼的
然后保存

第三种

把你要的图层合并，M，cmd+c，cmd+n，cmd+v

其他

第三方工具，一大堆

By：Evan

Coder 2 Leader

发表评论

coder2leader

公司内部TechDay分享，有@Terry主讲，学习了很多，特此Mark一下。

困惑一：Code vs People

机器/人

  • Code：可控
  • People：多变
    <!– more –>
    从code和人的角度去阐述了coder转变到leader的过程，了解团队中的每一个人，学习他们的经验。即使没有做过管理也无妨，尝试去管理一件件小事情开始。

困惑二：0/1 vs X

灰色

  • 0/1（二进制）：正确/错误
  • X（未知数）：没有固定值，管理没有正确、错误，有足够产出的团队就是好团队

对于初学者而言需要“暴力”②，成则成，败则败。

Leader和手下员工比例在：1 vs 7的情况下是有时间去贴身管理每一个人的，超出这个范围将无法贴身去管理一些细节问题。

困惑三：权利双刃剑

时间/效率

管理是双向的，向上的管理，角色转换Coder care Leader需要什么？Leader care 产出。

空降Leader如何去管理？

前因后果了解之后再去使用权力，后来者天生具备弱势，相信认可别人，用实例（力）去证明，黔驴技穷之时可使用权力。

困惑四：沟通力量

意大利人/赞比亚人（小故事）①

  • 简介：意呆利人去援助赞比亚，教当地人种地，当地人表示毫无兴趣。于是意呆利人就自己在河谷边种了番茄，长势喜人。成熟的那一晚，从赞比西河里跳出200多头河马，把西红柿吃个精光。第二天，意呆利人完全惊呆了，赞比亚人过来拍了拍肩膀安慰说：没错，这就是我们不在这里耕种的原因。

困惑五：公开演讲

TED Talks

注：

  1. 木头的体积
  2. 暴力：条件允许的情况下贴身管理，工期紧任务重；
  3. 网易公开课上有段关于这个的演讲《想要帮助别人？闭嘴，听人家说！》

简单学习CSS box model Box-sizing

发表评论

CSS盒模型描述了一个为文档树中的元素生成的并根据可视化格式模型进行布局的矩形框

先上一张Banner.
CSS box model

<!–more–>

Box-sizing这个CSS3中出现的新属性，以前只是用用，没有仔细的去学习一下（出来混总是要还的），最近不算忙就补习一下。

整理了一个简单的脑图

CSS box model mind map

一个简单的demo

<p data-height="265" data-theme-id="0" data-slug-hash="EyaqaV" data-default-tab="css,result" data-user="Keystion" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/Keystion/pen/EyaqaV/">box-sizing</a> by Keystion (<a href="http://codepen.io/Keystion">@Keystion</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

content-box(标准盒模型)

box.width = content-box.width(300px)
box.height = content-box.height(300px)

box所占位置大小

宽：
margin-left(10px) + border-left-width(10px) + padding-left(10px) + content-width(300px) + padding-right(10px) + border-right-width(10px) + margin-right(10px) = 360px

高：
margin-top(10px) + border-top-width(10px) + padding-top(10px) + content-height(300px) + padding-bottom(10px) + border-bottom-width(10px) + margin-bottom(10px) = 360px

border-box

box.width = border-left-width(10px) + padding-left(10px) + content-width(260px) + padding-right(10px) + border-right-width(10px) = 300px
box.height = border-top-width(10px) + padding-top(10px) + content-height(260px) + padding-bottom(10px) + border-bottom-width(10px) = 300px

box所占位置大小

宽：
margin-left(10px) + border-left-width(10px) + padding-left(10px) + content-width(260px) + padding-right(10px) + border-right-width(10px) + margin-right(10px) = 320px

高：
margin-top(10px) + border-top-width(10px) + padding-top(10px) + content-height(260px) + padding-bottom(10px) + border-bottom-width(10px) + margin-bottom(10px) = 320px

wiki相关：

JavasSript 变量的寻址与传递

发表评论

代码片段 1

var obj   = {};
    obj.x = 1;
    obj.y = 2;

function test (obj)  {
    obj.x = 111;
}

test(obj);
console.log(obj);
// result >>>>>>>>>  {x=111,y=2}

代码片段 2

var obj   = {};
    obj.x = 1;
    obj.y = 2;

function test(obj) {
    var obj2 = {};
        obj  = obj2;
}

test(obj);
console.log(obj)
// result >>>>>>>>>  {x=1,y=2}

代码片段一就不在讲述，但凡对值类型和引用类型有一定的了解的话，那这个应该是没疑问的。

<!–more–>

代码片段二有两个应该注意的地方：

1 test方法内变量的寻址

test方法内部可以取到三个变量，新定义了的对象obj2、参数obj、还有方法外的obj。
这三个参数有一个特别要注意的地方是，后面两个的名字是一样的，这样在方法运行的时候一定会优先取得参数的那个obj变量。而方法外的那个obj参数实际相当于window.obj。

2 变量的传递过程

在调用test方法，并传入方法外的obj变量，实际相当于传入window.obj这样一个引用类型①，也就是说代码obj = obj2;实际是对这个拷贝的地址的改变，因为这个地址只是个拷贝，所以这并不会改变其指向的真实对象。而代码片段1的obj.x = 111;这会通过obj这个地址查询到x这个属性，并对其赋值。

other

var num = 1;

function outFn() {
    this.num = 10;
    function inFn() {
        console.log(num);
        var num = 100;
        console.log(this.num);
        console.log(window.num);
    }
    return inFn;
}

var newfn = outFn();
new newfn();  // this指向了对象

注：
① 引用类型：引用类型的特点是在传递的过程中并不进行自身的值复制，而是传入地址的拷贝。

转自：http://www.cnblogs.com/rulee/archive/2012/09/03/2663800.html

足迹所到过城市之天津

发表评论

先上美图：

天津塘沽外滩公园

天津塘沽外滩公园01
为什么天津辣（那）么多漂亮的地方，偏偏放一张外滩公园的图片，因为在天津塘沽待的时间相对比天津其他地方久，所以就放一张到目前印象相对比较深刻的地方；

<!–more–>

天津

记忆碎片：豆腐脑、豆浆、油条、煎饼果子、塘沽区、洋货市场、轻轨、天津方言、保税区、室内装修、学生、天津奥林匹克体育中心、第三大街、信义隆装饰有限公司、泰达

初次结缘天津大概是初三毕业之后的暑假（2006年7、8月份），有两个月的空闲期；所以就出去打工（玩咯），正好这是亲戚有在承包奥体中心的基础建设；嗯，也就是这个时候接触到天津，在奥体中心度过了一个多月，之后就回去念高中了。

再次亲近天津，应该就是2007年、2008年，那时候就是来这里打工咯；
父亲大人在他朋友的装修装饰公司①上班，我就来这里打工学习生存技能；
到这里接触到了室内装潢、设计师、水电工、木工、瓦工、油漆工（刮腻子和刷涂料）等等（他们都是很可爱的人）；
也学到了很多技能：水电工、油漆工、木工等；
每天从住的地方（韶山北里②）出发，
带上必备的生存工具，
吃点早餐：煎饼果子、豆浆油条、豆腐脑；
屁颠屁颠的骑个自行车（有时候电动车）穿梭于塘沽区、滨海新区的大街小巷、各种小区去做干活；
累并快乐着。

当然也经历过奥运会了；

感觉会写好多… 就先写这些吧。

图片集咯

标志建筑物
↑ 外滩公园 标志建筑物

夜景
↑ 外滩公园 夜景

船和调皮的顽童
↑ 外滩公园 船和调皮的顽童

海门大桥
↑ 外滩公园 海门大桥

东方公主
↑ 外滩公园 东方公主

洋货市场
↑ 洋货市场

注：
① 装修装饰公司：北京信义隆装饰有限公司（天津分公司），位置天津滨海新区第三大街豪威大厦B座104；
② 韶山北里：天津市塘沽区杭州道与韶山路交口；

图片资源：

扯淡小分队【第N+回】

发表评论

为什么是第N+回呢，因为之前有好几回了，记忆模糊（好记忆不如烂笔头，所以就想记下来）

时间地点人物事件

时间：2016-05-23
地点：七年咖啡 老北京前后涮羊肉(和平里店)
人物：旭旭、苗神、教授 和 我
事件：周末约吗

我们的扯淡小分队又聚会了；聚会目的是什么呢，说白了就是扯扯大家近况。旭旭刚从日本团建回来，给我们带来一些【Made in Japan】的小点心，然后我们就愉快的决定周六聚聚😄（吃货联盟）。

先来张美图：

小点心

<!–more–>

简单的JavaScript异步之setTimeout（ES5）

猜想下会打印什么东西来；

代码:

for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}

预览：

setTimeout预览

简单的解释：

setTimeout解释

嗯，就这些。

拓展 通过作用域来输出0-9

1） 可用ES5函数作用域；

for (var i = 0; i < 10; i++) {
    (function (i) { // 作用域
        setTimeout(function() {
            console.log(i);
        }, 0);
    })(i);
}

2） ES6的块级作用域

把var换成let

for (let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}

图片集咯

七年咖啡Desk

七年咖啡Desk

小点心 （巧克力&&杏仁饼干）

七年咖啡desk

老北京前后涮羊肉的火锅

老北京前后涮羊肉的火锅

未完待续……

watch&figlet

发表评论

安装 watch

sudo brew install watch

iTerm or Terminal（终端）

示例代码

watch -t -n1 "date"

2016    3 29        20  33 54   CST

watch && figlet

watch -t -n1 "date +%T|figlet -f banner"

 #####    ###    #   #####  #        #  #        #####
#     #  #   #  ### #     # #    #  ### #    #  #     #
      # #     #  #        # #    #   #  #    #  #     #
 #####  #     #      #####  #    #      #    #   ######
#       #     #  #        # #######  #  #######       #
#        #   #  ### #     #      #  ###      #  #     #
#######   ###    #   #####       #   #       #   #####

<!– more –>