字体的重要性

最近开始工作，基本上都和终端打交道，碰到几个误认字符的尴尬场面，记录一下。

第一个遇到的问题发生在输入账户密码时，公司发的小册子上写的密码大概形式如xxxxxi|6xxx。由于打印密码的字体是黑体，难免产生疑问 | 到底是 I 还是 l？观察到的细节是 | 这个字符下面比其他的字符长，不过由于之前很少在密码中使用过这个字符，所以以为这个细节是区分I 和 l 的。在密码错误 n 次后，眼光扫到键盘才发现回车键上面的 | 键。

第二个遇到的问题是在终端中，公司的堡垒机登陆比较复杂，一般都会写脚本来快速登陆。写完之后，运行指令的格式为

jump ip 'auth'

其中的 'auth' 部分为调用另外一个脚本生成一个二次验证的并作为 jump 命令的参数。其中这个 ' 符号被我认为是引号，后来查阅相关的 shell 命令（相关文章参考linux下命令执行结果作为其他命令输入参数 - CSDN博客），才明白为反引号（一般位于ESC 的下方）。

说完这两个问题，回到主题，每天和字母打交到，选着一款合适的字体是非常重要的。推荐一款我在几年前就使用的编程字体——Hack: A typeface designed for source code。

上图就是这款字体的示意，最喜欢的点是 0 中间有一个小竖点，非常的传神。 以至于现在 IDE 中的 0 不是想上面这样处理，我都感觉不会编程了。

在学习OmniFocus 入门与进阶 - 少数派教程中，了解到了一个 Applescript 脚本 Weekly project report generator（周报生成器）。这个脚本可以将 OmniFocus 中前七天活跃的项目以及完成的动作导出成为一个.md文件。这样子，可以大大减轻周回顾时回忆本周完成任务的压力，也可以将生成的文本粘贴到周报中使用。

但是当我第一次运行这个脚本时，生成的文件中所有的中文字符都变成了问号。

由于，之前没有接触过中文显示为问号的问题。所以，与少数派教程的作者联系，他很快给我回复了一份邮件，并给出两个建议。

按照邮件中的建议，我进行了下面三个尝试。

1. Sublime Text中安装转化编码方式的插件ConvertToUTF8，最终发现无法识别出生成文件的默认编码。
2. 使用系统自带的文本编辑打开时，还是显示编码错误。
3. 利用homebrew安装了enca软件，使用enca -L zh_CN file无法检测出文件的编码方式。

无奈这些方式都没有找出问题的所在，只好打开脚本编辑器，查看这个脚本是怎么写的。

如下图所示，该脚本将需要输出的字符串指定为Unicode text 格式，用 write 将这个字符串写进文本中。

根据之前的编程经验，输出文本一般都能指定编码方式。所以又用 Dash 来查看 AppleScript 中 Write 的相关语法。

最终，找到 as 可以用来指定编码方式，成功解决乱码问题。

最近痛下血本买了一台Mac，这里记录一下我装的软件。

君子生非异也，善假于物也。

更新

1. 2017年9月20日：Anaconda
2. 2017年9月21日：lantern、Dash、Xcode
3. 2017年12月10日：虚拟机相关

Clion

• C++ IDE

Pycharm

• Python IDE

Alfred 3

• 替换默认的搜索工具
• 搭配workflow使用效果更佳

MWeb

• MacOS 下面最喜欢的Markdown编辑器
• 常用的高级功能有发布WordPress博客和自动将图片上传到图床

Wiznote

• 用官方的话来讲Mac功能少是小而美
• 如果不是会员到2020年结束，我一定会转到Evernote上去

iina

• 视频播放软件

ShadowsocksX-NG

• 看名字就知道干什么的
• 突然发现自己买不起服务器，转向蓝灯

Parallels Desktop

• 虚拟机软件

Sublime Text 3

• 性感的编辑器？
• 处理小文本时使用，写题目还是喜欢vim

iTerm2

• 用来替换默认的Terminal
• 推荐主题：solarized-dark
• 推荐字体：Hack

Homebrew

• Terminal内下载软件
• 使用：brew update;brew install vim
• 查看软件信息：brew info vim
• 临时替换：export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles
• 清华大学镜像地址
• 中国科学技术大学源地址

tmux

• 增强终端功能
• 配置文件：.tmux
• 更新配置文件：tmux source ~/.tmux.conf
• 常用快捷键
  • prefix s 查看/切换sessoin
  • prefix d 离开session
  • prefix $ 重命名当前session
  • prefix c 新建窗口
  • prefix space 切换到上一个活动的窗口
  • prefix & 关闭一个窗口
  • prefix 窗口号 使用窗口号切换
  • prefix o 切换到下一个窗格
  • prefix q 查看所有窗格的编号
  • prefix “ 垂直拆分出一个新窗格
  • prefix % 水平拆分出一个新窗格
  • prefix z 暂时把一个窗体放到最大

Oh My ZSH!

• 用zsh来替换默认的shell
• 推荐主题：agnoster
• 最喜欢的是对git的增加以及git相关快捷键的缩写
• 常用快捷键
  • gaa: git add .
  • gb: git branch
  • gcm: git checkout master
  • gcmsg: git commit -m
  • gst: git status

vim

• 配置文件：spf3，已经不想折腾这些东西
• 常用快捷键
  • dd: 删除当前行,并把删除的行存在剪贴板里面
  • *#: 匹配当前光标所在的单词移动到下一个或者上一个匹配的单词
  • %: 匹配括号移动
  • :set number: 显示绝对行号
  • :set relativenumber: 显示相对行号
  • r: 将光标所在的字符替换掉
  • <<: 将当前行向左移动一个偏移宽度
  • >>: 将当前行向右移动一个偏移宽度

Powerline fonts

• vim中的状态栏以及zsh某些主题正确显示的核心

iStat Menus

• 系统增强工具
• 在状态栏显示当前网速、CPU占用以及温度等信息

Jietu

• 腾讯为数不多的良心之作，截图软件

坚果云

• 良心同步软件，每个月上传流量不多，但是够用
• iCloud默认空间实在是太少

Anaconda

• python 科学计算包？
• 最主要使用是jupyter notebook
• 根据之前在公司安装时得到的经验，完成安装之后还需要更新zsh相关的配置，否者在iTerm中依旧无法使用
• 在 .zshrc 中添加一条记录：export PATH="/Users/xiangrunye/anaconda3/bin:$PATH" 注意这里需要写绝对地址
• 更新配置文件：source ~/.zshrc

Lantern

• 捍卫互联网自由？

Dash

• 快速查阅各种语法的文档
• 配合Alfred食用更佳，建议将 keyword 改为 ds

Xcode

• 感觉自己可以转ios开发
• 下这东西才知道，国内连AppStore网络有多差

Parallels Desktop

• win镜像获取

Chrome

• 看中的是插件多的特点
• MacOS设置为英文的环境下，Chrome里面下载时经常出现文件名乱码，找到了这个网页 Mac OS X 下修改 Google Chrome 显示语言的方法

参考链接

• MacTalk:Alfred
• Tmux 速成教程：技巧和调整
• vim 学习卡
• vim 帮助和配置
• 从零开始学习Alfred
• markdown.wordflow

昨天晚上在看MacTalk时,发现一篇文章神兵利器——Alfred,随后将里面提到的软件下载下来.接触不到一天的时间,就感觉到这个软件的强大.下面就记录一些我用到的功能以及插件.

原生功能

terminal

最近在公司工作,都要求连接到服务器上去写代码,所以对terminal的需求很大.目前自己用的是iTerm2+zsh的组合,还有类似于powerline的状态栏,工作效率杠杠的.Alfred可以使用一个字符触发terminal,默认的是>以及打开Mac自带的终端.

由于>这个字符比较难打,我将Prefix修改为;,而且也将修改terminal为iTerm2(参考这个链接最下面提到的Alfred Support).

网页搜索

给定关键字打开浏览器在特定的网页搜索,例如下图

实现起来也比较简单,在Feature->Web Search中添加类似于下面的即可.

计算器

输入表达式通过Alfred计算

WorkFlows

这个是我觉得Alfred最强大功能,毕竟编程改变一切,下面推荐几个插件.

Markdown img

这个插件的功能是直接将系统的剪贴板里面的图片上传到七牛图床,并把图片链接复制到当前的编辑器和剪贴板.这篇文章的截图就是通过这个插件完成的,终于不用像之前一样苦逼的一张张上传图片.下载地址

Workflow Searcher

通过Alfred来搜索workflow并且跳转到下载页面

v2ex

快速浏览v2ex的帖子.

Douban

查看豆瓣的电影,音乐,图书等信息

Wunderlist

可以连接奇妙清单,正好符合我这种轻量级用户.

有道翻译加强版

满足查字典的需求,虽然mac原生的也很强大,但这个能翻译啊

百度搜索

虽然国内口碑不好,但我还是觉得百度更懂中国人…

最后吐槽几句,垃圾为知笔记,mac版就没有多少功能,发个博客都没有,可惜我剩下三年的vip,这篇文章还是靠 Mweb 发布的.

1. 电路交换与分组交换的区别？ 优劣对比。

2. OSI有哪几层，知道主要几层的各自作用。

   1. 物理层：定义通信与传输借口硬件的机械、电气、功能和过程特性，实现比特流的透明传输。
   2. 数据链路层：无差别传送以帧为单位的数据。
   3. 网络层：选择合适的路由和交换结点，分组或者包。
   4. 运输层：端到端、或者进程到进程的无差别传送。
   5. 会话层：对数据传输的同步进行管理
   6. 表示层：信息加密和解密，正文压缩和还原
   7. 应用层：

3. TCP/IP有哪几层，会画出来，知道所有层数的作用，会列举各层主要的协议名称。

   1. 网络接口层：x.25
   2. 网际层：IP
   3. 运输层：TCP和UDP
   4. 应用层：HTTP、FTP等

4. 硬件(MAC)地址的概念及作用。

   1. 媒体访问控制子层：前6位16进制IETF分配。
   2. 区分不同的硬件

5. ARP协议的用途 及算法、在哪一层上会使用 ARP ？

   1. 地址解析协议：IP地址到MAC地址的映射
   2. 网络层

6. 知道各个层使用的是哪个数据交换设备。（交换机、路由器、网关）

   1. 物理层：中继器、集线器
   2. 数据链路层：网桥或者交换机
   3. 网络层中继系统：路由器
   4. 网络层以上：网关

7. IP报文的格式，格式的各个字段的含义要理解。

8. MTU的概念，啥叫路径MTU？ MTU发现机制，TraceRoute(了解)。

9. RIP协议的概念 及算法。

10. ICMP协议的主要功能。

    1. 网际控制报文协议，提高IP数据报成功交付的机会，报告差错和异常情况。

11. 组播和多播的概念，IGMP的用途。

12. Ping协议的实现原理，ping 命令格式。

    1. 应用层，使用网络层的ICMP协议

13. 子网划分的概念，子网掩码。

    1. A类子网掩码：255.0.0.0，划分：8位+子网X位+主机24-X位

14. IP地址的分类，如何划分的，及会计算各类地址支持的主机数。

15. DNS的概念，用途，DNS查询的实现算法。

16. TCP与UDP的概念，相互的区别及优劣。

    • TCP和UDP是OSI模型中的运输层中的协议。TCP提供可靠的通信传输，而UDP则常被用于让广播和细节控制交给应用的通信传输。
    • TCP面向连接，UDP面向非连接即发送数据前不需要建立链接
    • TCP提供可靠的服务（数据传输），UDP无法保证
    • TCP面向字节流，UDP面向报文
    • TCP数据传输慢，UDP数据传输快

17. UDP报文的格式，字段的意义。

18. TCP 报文的格式，字段的意义。

19. TCP通过哪些措施，保证传输可靠？

20. 三次握手，四次断开过程。

    1. 客户端向服务器发送一个SYN j
    2. 服务器向客户端响应一个SYN k，并对SYN j进行确认 ACK j+1
    3. 客户端向服务器发送一个ACK k+1
    4. 一端发送一个FIN
    5. 另一端接收到这个FIN分节后，执行被动关闭，对这个FIN进行确认，继续传输数据。
    6. 发送数据之后，发送一个FIN
    7. 接受到FIN，结束传输。

21. TIME_WAIT状态的概念及意义。

22. 滑动窗口协议 与 停止等待协议的区别。

23. TCP的流量控制和拥塞控制实现原理(会画拥塞控制的典型图)。

24. TCP的快速重传与快速恢复算法。

25. TFTP 与 FTP的区别。

26. 阻塞方式和非阻塞方式，阻塞connect与非阻塞connect。(比较难，有兴趣可以了解)

27. HTTP基本格式。（java程序员必须掌握）

前几天面试，被问如何实现一个类似微信的聊天软件。当时说了一个大概的想法，面试官没有怎么评价，只是最后建议我有空多做一些项目。正好最近不怎么忙，就实现一下。写了一个简易的模型，在这个过程中应用了很多原来学过的东西，当然还有很多问题没有解决。

1. 这个软件选择C/S架构，所以写了一个服务器端程序和一个客户端程序，然后通信使用的是TCP协议。

2. 利用socket完成通信，大致的过程如下图所示。

3. 服务器上开两个线程threadListenConnect和threadReceivePacket。服务器上的socket利用bind绑定服务器的ip和端口号。第一个线程死循环监听端口，是否有新的connect请求，并将新的连接socket保存到list中。再利用第二个线程接受客户端发来的数据包，并拆包执行进行相关功能。服务器之后，按照包中的内容判断是否需要发送到其他特定的客户端还是广播消息。

4. 客户端中开一个线程threadReceivePacket。先和服务器连接，然后利用这个线程接受服务器发过来的数据包。这里也实现了发送给某个特定的客户端和广播。发包和拆包过程和服务器上差不多。

5. 数据包主要包括发送方ip、端口和接收方ip、端口，以及操作代码。不同的数据段用‘|’分割，接收方也按这样拆包就可以了。

6. TCP是面向连接的协议，拥有缓存窗口，所以可能会有粘包现象，可能将程序一次产生的命令，分成多次发送。所以数据包里面还要标记一下，我用了’\a’做新的包开始标记，用’\t’做结束标记，如果聊天内容里面有相同的标记的，可以强行转化一下。

7. 这个程序还可以加上数据库搞出注册以及保存聊天消息，然后自己也没有去写消息的排序以及私聊功能，待做。

8. 最后相关代码放在github上面

服务器端：

客户端1：

客户端2：

适用于WordPress

由于主题没有自带的返回顶部按钮，所以我一直在寻找一种解决方案。之前使用的是wordpress插件提供的返回顶部按钮，后来在网上乱逛，发现有Xnces – 衔铁部落的返回顶部按钮非常的酷炫，正是我要寻找的。于是，我在那个博客下留言询问制作方法。
前几天，看到那个博客上出现了一篇文章-本博客的返回顶部效果。
按照上面的方法，折腾一会儿，我也制作出来了，特地记录一下。

1. 首先，先加载一下环境。在后台functions.php中找到ms_scripts()函数，添加wp_enqueue_script( 'jquery' );调用wordpress默认的JQuery文件。

2. 我将这个效果有关的js代码放在了主题目录下新建的themes.js文件中。所以在上面的函数中添加下面两句话导入这个文件wp_register_script( 'themes_js', THEMEPATH . '/themes.js',array());和wp_enqueue_script( 'themes_js' );

3. CSS代码我直接加在了主题style.css中。

4. 重新打开网站就能看到效果了。

themes.js文件中代码如下

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

var bigfa_scroll = {
    drawCircle: function(id, percentage, color) {
        var width = jQuery(id).width();
        var height = jQuery(id).height();
        var radius = parseInt(width / 2.20);
        var position = width;
        var positionBy2 = position / 2;
        var bg = jQuery(id)[0];
        id = id.split("#");
        var ctx = bg.getContext("2d");
        var imd = null;
        var circ = Math.PI * 2;
        var quart = Math.PI / 2;
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.lineCap = "square";
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 3;
        imd = ctx.getImageData(0, 0, position, position);
        var draw = function(current, ctxPass) {
            ctxPass.putImageData(imd, 0, 0);
            ctxPass.beginPath();
            ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
            ctxPass.stroke();
        }
        draw(percentage / 100, ctx);
    },
    backToTop: function($this) {
        $this.click(function() {
            jQuery("body,html").animate({
                scrollTop: 0
            },
            800);
            return false;
        });
    },
    scrollHook: function($this, color) {
        color = color ? color: "#000000";
        $this.scroll(function() {
            var docHeight = (jQuery(document).height() - jQuery(window).height()),
            $windowObj = $this,
            $per = jQuery(".per"),
            percentage = 0;
            defaultScroll = $windowObj.scrollTop();
            percentage = parseInt((defaultScroll / docHeight) * 100);
            var backToTop = jQuery("#backtoTop");
            if (backToTop.length > 0) {
                if ($windowObj.scrollTop() > 200) {
                    backToTop.addClass("button--show");
                } else {
                    backToTop.removeClass("button--show");
                }
                $per.attr("data-percent", percentage);
                bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
            }

        });
    }
}

jQuery(document).ready(function() {
    jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
    var T = bigfa_scroll;
    T.backToTop(jQuery("#backtoTop"));
    T.scrollHook(jQuery(window), "#555555");
});

CSS文件要添加的代码

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

#backtoTop{
    background-color:#eee;
    border-radius:100%;
    bottom:10%;height:48px;
    position:fixed;
    right:-100px;
    width:48px;
    transition:0.5s;
    -webkit-transition:0.5s
}

#backtoTop.button--show{
    right:10px
}

.per{
    font-size:16px;
    height:48px;
    line-height:48px;
    position:absolute;
    text-align:center;
    top:0;
    width:48px;
    color:#555;
    cursor:pointer
}
.per:before{
    content:attr(data-percent)
}
.per:hover:before{
    content:"↑";font-size:20px
}

适用于WordPress

如果你可以看到这一篇文件，就表示我测试成功了！

tips:

• 为知笔记中的标签自动变成博客文章的标签
• 选择发布时，会自动检测是新发布文章还是修改文章
• 自带markdown优化，轻松解决wordpress没有什么好用markdown编辑器的问题

参考连接：发布笔记到博客，更好的博客离线撰写工具

更新历史

• 2015年8月15日：完成初稿
• 2017年10月05日：添加新主题 Even 相关内容
• 2017年10月11日：文章阅读次数统计
• 2018年1月19日：修改页脚
• 2018年3月26日：双更新
• 20220226: 首页隐藏指定文章

前几天自己在电脑上装Linux时，不小心把博客的数据文件夹给删了。无奈重新安装，同时写下这篇备忘录以防万一。当然，经历这个失误，看来也要利用网盘对博客的一些文件进行备份。

由于与 hexo-leancloud-counter-security 软件冲突，将标题从 System.out.println("hello world!"); 修改成 hello world!。具体问题分析见
博客折腾记：hexo-leancloud-counter-security 与标题中的引号冲突。

除去前几篇为了测试hexo博客的各项功能所发的博文，这是为新博客所写的第一篇文章。标题取自刚开始学习编程语言时输出的字符串，“hello world！” 。

之前，在QQ空间、博客园、csdn上都开过博客，但是结果都不尽如人意。毕竟免费用人家的东西，也不能奢求什么都朝着自己的意愿改变，情怀本身就敌不过他们的kpi。除此之外，也可以自己购买服务器和域名架设博客。可受限于现阶段经济实力，上面的方法也无法实现。所幸github+hexo架设博客的方式，给了我创造一片自由空间的机会。

另外，学习编程之后，觉得可编程的才有安全感。就好像越来越排斥word格式的难控，转向markdown书写的轻盈。hexo是一种实现静态网页的方式，不过自己目前没有专门学习过网页编程，所以大体上采用人家的现成解决方案，再通过网上的文章对站点进行一些小的改造。

开通这个博客的目的在于发一些自己写的文章，以此记录自己的大学生活、学习过程。

于杭州。