23 |
24 |
--------------------------------------------------------------------------------
/build/head.html:
--------------------------------------------------------------------------------
1 | 一个全栈工程师的工具箱
2 | Phodal Huang
3 | Creative Commons Attribution Non-Commercial Share Alike 3.0
4 | zh-CN
--------------------------------------------------------------------------------
/build/share.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/build/stats.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/build/stats.html
--------------------------------------------------------------------------------
/build/title.txt:
--------------------------------------------------------------------------------
1 | % 一个全栈工程师的工具箱
2 | % Phodal Huang
--------------------------------------------------------------------------------
/chapters/api.md:
--------------------------------------------------------------------------------
1 | API
2 | ===
3 |
4 | Moco
5 | ---
6 |
7 | > Moco是一个简单搭建模拟服务器的程序库/工具，它是一个简单搭建 stub 的框架，主要用于测试和集成。
8 |
9 | 这个工具的目的主要是针对于前后端分离的Web应用来说，特别是基于HTTP协议的集成——Web Service、REST等。
10 |
11 | 不过如果你们不写测试的话，这个工具就没啥用。
12 |
13 | Swagger
14 | ---
15 |
16 | > Swagger是一种和语言无关的规范和框架，用于定义服务接口，主要用于描述RESTful的API。它专注于为API创建优秀的文档和客户端库。支持Swagger的API可以为API方法生成交互式的文档，让用户可以通过以可视化的方式试验，查看请求和响应、头文件和返回代码，从而发现API的功能。它本身就非常强大，但是Swagger框架还支持为多种流行的语言——包括JavaScript、Python、Ruby、Java、Scala等等——生成客户端代码。
--------------------------------------------------------------------------------
/chapters/auto.md:
--------------------------------------------------------------------------------
1 | 自动化
2 | ===
3 |
4 | Selenium
5 | ---
6 |
7 | > Selenium 是一个用于 Web 应用程序测试的工具。Selenium 的测试用例直接运行在浏览器中，就像真正的用户在操作一样。与主流的 web 自动化测试框架还有 QTP，基于 Ruby 的 WATIR 等相比，Selenium 支持 IE、Mozilla Firefox 多种浏览器，支持自动录制脚本以及 Java、c#、ruby 等多种运行语言的自动生成，用例制作快捷，运行快速。相比起来 Selenium 要显得更为灵活实用。
8 |
--------------------------------------------------------------------------------
/chapters/backend.md:
--------------------------------------------------------------------------------
1 | Backend
2 | ===
3 |
4 | Spring MVC
5 | ---
6 |
7 | > Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架。
8 |
9 | Spring Boot
10 | ---
11 |
12 | > Spring Boot 的目的在于快速创建可以独立运行的 Spring 应用。通过 Spring Boot 可以根据相应的模板快速创建应用并运行。Spring Boot 可以自动配置 Spring 的各种组件，并不依赖代码生成和 XML 配置文件。Spring Boot 可以大大提升使用 Spring 框架时的开发效率。
13 |
14 | Laravel
15 | ---
16 |
17 | > Laravel是一套简洁、优雅的PHP Web开发框架。
18 |
19 | Django
20 | ---
21 |
22 | > Django是一个开放源代码的Web应用框架，由Python写成。采用了MVC的软件设计模式，即模型M，视图V和控制器C。
23 |
24 | 在我的博客，以及我使用的一些需要用户认证、CMS功能等等的系统里，我优先使用这个框架来完成任务。它还拥有一套设计得很不错的ORM系统，并且其还隔离了不同的系统底层。
25 |
26 | Flask
27 | ---
28 |
29 | > Flask是使用Python语言编写的轻量级的WebWeb应用框架。基于Werkzeug WSGI工具箱和Jinja2 模板引擎。
30 |
31 | 与Django的很大不同之处在于Flask被称之为微框架，它只有简单的核心，而其他的功能需要使用扩展来完成。这就意味着，当我们可以高度定制我们的系统，只选择我们需要的功能，并通过扩展来完成。
32 |
33 | Express
34 | ---
35 |
36 | > Express 是一个基于Node.js 平台的极简、灵活的web 应用开发框架，它提供一系列强大的特性，帮助你创建各种Web 和移动设备应用。
37 |
38 | WordPress
39 | ---
40 |
41 | > WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中有超过16.7%的网站使用WordPress。到了2011年8月，约22%的新网站采用了WordPress。WordPress是目前因特网上最流行的博客系统。
42 |
43 | Ruby On Rails
44 | ---
45 |
46 | > 是一个使用Ruby语言写的开源Web应用框架，它是严格按照MVC结构开发的。它努力使自身保持简单，来使实际的应用开发时的代码更少，使用最少的配置。
47 |
48 |
--------------------------------------------------------------------------------
/chapters/chrome-plugins.md:
--------------------------------------------------------------------------------
1 | Chrome插件篇
2 | ===
3 |
4 | Chrome DevTools
5 | ---
6 |
7 | 在我所用过的这些前端工具里，最常用、实用的就属Chrome自带的DevTools。通常情况下，我们只需要使用这个工具就可以完成大部分的工作了。
8 |
9 | 
10 |
11 | 每个前端工程师，都应该好好学习如何去使用Chrome DevTools。当然，这并不是一篇详细的关于Chrome DevTools的介绍——相关的内容足够写一本书了。除了正常的Debug功能，它可以模拟移动设备，模拟网络、模板分辨率、模拟，并在HTTP请求中带上相应的User Agent方便我们调试。
12 |
13 | Open SEO Stats
14 | ---
15 |
16 | 顾名思义这是一个SEO状态查询工具，它可以让我们查看网站的SEO相关信息。也是一个非常棒的反诈骗软件，因为一个好的网站的Alexa Traffic Rank、PR以及Pages indexed（索引数）等等都会相对较高。
17 |
18 | 
19 |
20 | 除了基本的SEO状态显示，它还提供了一些有效的工具，来帮助我们优化页面的SEO。如在Page Info里，会罗列出页面的相关标签是否完整。在Links Stats里，会帮我们检查页面的外链情况等等。
21 |
22 | PageSpeed Insights
23 | ---
24 |
25 | 这是Google的PageSpeed Insights的插件版（网页版见： [https://developers.google.com/speed/pagespeed/insights/](https://developers.google.com/speed/pagespeed/insights/)），一个非常棒的网页优化工具，有了它就可以让我们轻松对网页进行优化。我们所需要做的事情就是点击“分析”按钮，然后就坐等他分析完成。
26 |
27 | 如下就是我博客的一个分析结果：
28 |
29 | 
30 |
31 | 总体分数98分，看来我针对这个所说的东西进行优化的效果还不错。左边显示了我博客存在的一些问题，如：
32 |
33 | - 没有压缩CSS
34 | - 可以使用浏览器缓存
35 | - 需要指定缓存验证工具
36 | - 暂缓JavaScript解析
37 | - 将查询字符从静态资源中删除
38 |
39 | 等等的几个问题——这些已经都是小问题了。所以他们的重要等级是“低”，一般来说如果有一个等级是“高”整个评分就会特别低。
40 |
41 | 除此，我们还可以使用命令行工具来对你的网页进行测试。
42 |
43 | [https://github.com/addyosmani/psi](https://github.com/addyosmani/psi)
44 |
45 | 安装：
46 |
47 | ``` shell
48 | $ npm install --global psi
49 | ```
50 |
51 | 只需要执行下面的命令即可：
52 |
53 | ``` shell
54 | psi http://www.example.com/
55 | ```
56 |
57 | 如我的博客的结果:
58 |
59 | ``` shell
60 | --------------------------------------------------------
61 |
62 | URL: phodal.com
63 | Strategy: mobile
64 | Speed: 90
65 | Usability: 96
66 |
67 | CSS size | 30.04 kB
68 | HTML size | 11.8 kB
69 | Image size | 41.08 kB
70 | JavaScript size | 28.07 kB
71 | CSS resources | 1
72 | Hosts | 2
73 | JS resources | 1
74 | Resources | 5
75 | Static resources | 3
76 | Total size of request bytes sent | 695 B
77 |
78 | Leverage browser caching | 1.5
79 | Main resource server response time | %
80 | ```
81 |
82 | 再依据不同的结果对网页进化优化，不过它有一个前提是它并不适合SPA（单页面）应用。
83 |
84 | Postman
85 | ---
86 |
87 | 我相信这个软件，搞过Web开发的人都听过。
88 |
89 | 
90 |
91 | 它是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。总之，就是我们可以在浏览器上执行GET、POST等等的测试。在调试远程API的时候很有用，一般在调试本地API的时候，我都是用jQuery的。
92 |
93 | 同样的，你仍然可以使用命令行工具来测试它，即[Newman](https://github.com/postmanlabs/newman)。由于其没有UI，它可以运行在CI上，并编写相应的UI测试。
94 |
95 | XPath Helper
96 | ---
97 |
98 | 这是我在写UI自动化测试的时候使用的工具，由于那是一个遗留项目，所以我们都对整体UI的布局都不是特别熟悉。并且由于业务推进的关系，我们并没有足够的时候去解决这个问题，于是就开始使用这个工具来完成工作了。
99 |
100 | 在编写的时候我们会在Console用jQuery去选定元素，然后再将其转换为XPath。接着在这个工具上尝试，如下图显示：
101 |
102 | 
103 |
104 | 最后，我们将会写到代码中。
105 |
106 | ObservePoint Tag Debugger
107 | ---
108 |
109 | 这是一个可以用于调试各种Web分析工具的插件，它可以用于分析SiteCat、Google Analytics、WebTrend等发出的事件请求，并解析其数据。
110 |
111 | 
112 |
113 | Capture Webpage Screenshot Entirely
114 | ---
115 |
116 | 这是一个截图工具，可以用于截取页面长图。
117 |
--------------------------------------------------------------------------------
/chapters/cli.md:
--------------------------------------------------------------------------------
1 | CLI
2 | ===
3 |
4 | tree
5 | ---
6 |
7 | > tree命令可以以树形结构显示文件目录结构，它非常适合于我们给别人介绍我们的文件目录的组成框架，同时该命令使用适当的参数也可以将命令结果输出到文本文件中。
8 |
9 | 这个命令非常适用于我们写作的时候用的，如下就是toolbox下的chapters目录：
10 |
11 | ```shell
12 | chapters
13 | ├── api.md
14 | ├── backend.md
15 | ├── chrome-plugins.md
16 | ├── cli.md
17 | ├── devices.md
18 | ├── documents.md
19 | ├── graphics.md
20 | ├── hardware.md
21 | └── ops.md
22 |
23 | 0 directories, 9 files
24 | ```
25 |
26 | sl
27 | ---
28 |
29 | 这是一个神奇的命令行工具，由于两个手的手速不致，我经常将ls敲成sl。而在Ubuntu上则会提示你，你是不是要安装sl，于是我就安装了。然后：
30 |
31 | 
32 |
33 | 每次我敲错命令的时候，都会有这个神奇的火车头出现，火车头动的期间就只能等它完成。每次这个时候，就说明我们需要休息。
34 |
35 | cURL
36 | ---
37 |
38 | cURL利用URL语法在命令行方式下工作的开源文件传输工具。它是一个很常用的命令，也可以支持文件上传和下载。
39 |
40 | ``` shell
41 | curl -I -s -A 'Googlebot' www.phodal.com
42 | HTTP/1.1 200 OK
43 | Server: mokcy/0.17.9
44 | Content-Type: text/html; charset=utf-8
45 | Connection: keep-alive
46 | Vary: Accept-Encoding
47 | Vary: Accept-Language, Cookie
48 | Content-Language: en
49 | X-UA-Compatible: IE=Edge,chrome=1
50 | Date: Thu, 09 Apr 2015 14:39:11 GMT
51 | X-Page-Speed: Powered By Phodal
52 | Cache-Control: max-age=0, no-cache
53 | ```
54 |
55 | ``` shell
56 | curl --data "_method=PUT&led1=1&sensors1=22&sensors2=12&temperature=14" http://b.phodal.com/athome/1
57 | ```
58 |
--------------------------------------------------------------------------------
/chapters/devices.md:
--------------------------------------------------------------------------------
1 | 外设篇
2 | ===
3 |
4 | 机械键盘
5 | ---
6 |
7 | 地球人都知道，我就不说了。
8 |
9 | 如果你问我用的是什么键盘：
10 |
11 | - Ducky 9008s2，大学的时候买的，家里用，紫色
12 | - Ducky DK2087 G2，只要399，公司用的
13 |
14 | 机械键盘手托
15 | ---
16 |
17 | 很多人光有个机械键盘，但是却没有一个与之对应的手托，我觉得还是有些可惜的。机械键盘都有着相当高的高度，这时手放上去就有些尴尬。
18 |
19 | 
20 |
21 |
22 | 自定义按钮的鼠标
23 | ---
24 |
25 | 对于程序员来说，复制和粘贴是很常用的操作，如果我们有一个对应的自定义按钮的鼠标的话，我们就可以光用鼠标来进行复制和粘贴了。
26 |
27 | 
28 |
29 | 鼠标线夹
30 | ---
31 |
32 | 我经常拿我的Macbook去玩《文明》系列的游戏，这时候我就需要鼠标了，也需要用鼠标线夹来保证我的移动不会受阻。
33 |
34 | 笔记本支架折叠
35 | ---
36 |
37 | 如果选不了一个好的椅子，那么我们就需要一个好的支架来撑起电脑到一个合适的高度。
38 |
39 | 
40 |
41 | Kindle
42 | ---
43 |
44 | Kindle，看书的人都知道。
45 |
--------------------------------------------------------------------------------
/chapters/documents.md:
--------------------------------------------------------------------------------
1 | 文档篇
2 | ===
3 |
4 | 
5 |
6 | Pandoc
7 | ---
8 |
9 | > Pandoc是一个标记语言转换工具，可实现不同标记语言间的格式转换，堪称该领域中的“瑞士军刀”。
10 |
11 | 可以将 markdown、 reStructuredText、 textile、 HTML、 DocBook、 LaTeX、 MediaWiki markup、 TWiki markup、 OPML、 Emacs Org-Mode、 Txt2Tags、 Microsoft Word docx、 LibreOffice ODT、 EPUB、 Haddock markup
12 |
13 | 转化为
14 |
15 | XHTML、 HTML5、 以及HTML幻灯片Slidy， S5，或者DZSlides、Microsoft Word docx、 OpenOffice/LibreOffice ODT、 OpenDocument XML、EPUB、DocBook、 GNU TexInfo、 Groff man pages、LaTeX、 ConTeXt、 LaTeX Beamer slides、PDF via LaTeX、Markdown、 reStructuredText、 AsciiDoc、 MediaWiki markup、 Emacs Org-Mode、 Textile
16 |
17 | 上图
18 |
19 | 
20 |
21 | 我最常用的就是：将md转化为workd及pdf。我的毕业论文及之前的几本电子书都是这么做的，它是一个命令行工具，安装方式：
22 |
23 | - Windows: choco install pandoc
24 | - Ubuntu/CentOS/OpenSUSE: apt-get intall pandoc 或者 yum install pandoc
25 | - Mac OS: brew install pandoc
26 |
27 | 使用方式如下：
28 |
29 | pandoc fullstack.md -o fullstack.docx
30 |
31 | 如果要转为PDF，则需要另外的一个工具——LaTeX
32 |
33 | Graphviz
34 | ---
35 |
36 | > Graphviz （英文：Graph Visualization Software的缩写）是一个由AT&T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。
37 |
38 | 简单的来说，就是将代码转换为图形:
39 |
40 | 
41 |
42 | 它让我最惊讶的是DOT语言，简直是以我们平时的用法来定义的。上面的图形的代码类似于这样的：
43 |
44 | home->products->widgets
45 |
46 | 又是一个让人惊呆的黑科技，这才是人类应该使用的语言。它可以支持PostScript，PDF，SVG，PNG等一系列的格式，用法
47 |
48 | dot -T png phodal.dot -o phodal.png
49 |
50 | 简单、粗暴到没有朋友。
51 |
52 | ImageMagick
53 | ---
54 |
55 | > ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用，图片的旋转、组合，文本，直线，多边形，椭圆，曲线，附加到图片伸展旋转。
56 |
57 | 来自重点：可以支持超过两百多种格式。It can read and write images in a variety of formats (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, DPX, EXR, WebP, Postscript, PDF, and SVG.
58 |
59 | 它提供了一个命令行工具叫：``convert``，这可以自由地转换图片的形式，如：
60 |
61 | convert image.jpg image.png
62 |
63 | 还可以加各种效果，如：
64 |
65 | 
66 |
67 | 顺便做个介绍：上面的这个人叫瑞典模特儿莱娜·瑟德贝里，是在刊于1972年11月号《花花公子》杂志上的一张裸体插图照片的一部分。**她的脸部与裸露的肩部已经变成了事实上的工业标准。**
68 |
69 | 又是一个简单、粗暴到没有朋友的工具。
70 |
71 | TeX 和 Latex
72 | ---
73 |
74 | TeX是由是一个由美国计算机教授高德纳（Donald Ervin Knuth）编写的功能强大的排版软件。顺便推荐一下他写的一本书：《计算机程序设计艺术》。因为：
75 |
76 | > 高德纳最早开始自行编写TEX的原因是当时十分粗糙的排版水平已经影响到他的巨著《计算机程序设计艺术》的印刷质量。他以典型的黑客思维模式，最终决定自行编写一个排版软件：TEX。他原本以为他只需要半年时间，在1978年下半年就能完成，但最终他用了超过十年时间，直到1989年TEX才最终停止修改。
77 |
78 | 这直接让我想起Martin Fowler在写《领域特定语言》里好像也是用DSL。Tex的最大优点是可以写出下面的这本复杂的公式：
79 |
80 | 
81 |
82 | LaTeX 建立在 TeX 之上的工具，它在TeX的基础上大大改善了易用性。对了，如果只是一般的用途的话，就没有必要拿去装逼了~。
83 |
84 | 它也是工作于命令行上的工具。
85 |
86 | Jupyter Notebook
87 | ---
88 |
89 | Jupyter Notebook使用浏览器作为界面，其前身是Ipython Notebook，Ipython3.0之后新建为Jupyter项目。它支持Markdown、Python语言交互、R语言交互、图形显示、运行时间分析、LaTex公式，对于交互编程、数据分析和数据可视化非常有用。
90 |
91 | 
92 |
93 | **安装（使用pip）**
94 |
95 | $ pip install jupyter
96 |
97 | **运行**
98 |
99 | $ jupyter notebook
100 |
101 | 官网：[Jupyter](https://jupyter.org/)
102 |
103 |
104 | Gitbook
105 | ---
106 |
107 | Gitbook是一个命令行工具(node.js库)，可以把你的Markdown文件汇集成起来，生成一个静态网站，也可以输出为PDF等多种格式。
108 |
109 | 
110 |
111 | **安装（使用npm）**
112 |
113 | $ npm install gitbook-cli -g
114 |
115 | **使用**
116 |
117 | $ gitbook init ＃ 初始化书籍目录
118 | $ gitbook serve ＃ 运行
119 |
120 | 官网：[Gitbook](https://www.gitbook.com/)
121 |
--------------------------------------------------------------------------------
/chapters/fe.md:
--------------------------------------------------------------------------------
1 | 前端 Mac OS 搭建指南
2 | ===
3 |
4 | XCode 9.x
5 |
6 |
7 |
8 |
9 | 包管理
10 | ---
11 |
12 | ### brew
13 |
14 | ### brew cask
15 |
16 | ### Node.js Version
17 |
18 | ```
19 | curl -L https://git.io/n-install | bash
20 | ```
21 |
22 | ### Java version
23 |
24 | Jabba
25 |
26 | ```
27 | curl -sL https://github.com/shyiko/jabba/raw/master/install.sh | bash && . ~/.jabba/jabba.sh
28 | ```
29 |
30 | ```
31 | # list available JDK's
32 | jabba ls-remote
33 |
34 | # install Oracle JDK
35 | jabba install 1.8
36 |
37 | # use
38 | jabba use 1.8
39 | ```
40 |
41 | 图形工具
42 | ---
43 |
44 | ### Sketch
45 |
46 | ### GIMP
47 |
48 |
49 | 移动开发
50 | ---
51 |
52 | ### Charles
53 |
54 | ### GenyMotion
55 |
56 | ### ClassyShark
57 |
58 | ### APK Tool
59 |
60 |
--------------------------------------------------------------------------------
/chapters/graphics.md:
--------------------------------------------------------------------------------
1 | 图形工具篇
2 | ===
3 |
4 | 在上一篇《全栈工程师的百宝箱：黑魔法之文档篇》我们介绍了一些文档工具，今天让我来分享一下，我常用的一些图形工具。
5 |
6 | ## 流程图：Graphviz
7 |
8 | 说到流程图还是再次提及一下，我们之前说到的**Graphviz** 。
9 |
10 | > Graphviz （英文：Graph Visualization Software的缩写）是一个由AT&T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。
11 |
12 | 它的主要特点是代码生成图像，并且足够的简单。
13 |
14 | 在我的那个“Web Developer 成长路线图”(GitHub: [https://github.com/phodal/developer](https://github.com/phodal/developer))里，就是用这个工具生成下面这个复杂的图形。
15 |
16 | 
17 |
18 | 而其代码特别简单——和我们平时表达的手法是一样的，即：
19 |
20 | ```
21 | "包管理" -> "包发布" -> "自动部署"
22 | "CLI" -> "部署"
23 | "脚本语言(Bash,Perl,Ruby,Python etc)" -> "部署"
24 | "脚本语言(Bash,Perl,Ruby,Python etc)" -> "构建"
25 | "*nix" -> "软件编译" -> "部署"
26 | "构建" -> "软件编译"
27 | ```
28 |
29 | Graphviz有一个大的优点和弱点是：自动生成，导致画线的时候很出现出问题。接着，我们就来看看手动画线的例子。
30 |
31 | ## 流程图： Visio vs Dia vs OmnIGraffle
32 |
33 | 在Windows世界里，在这一类的工具里面最常见的算是Visio:
34 |
35 | 
36 |
37 | 遗憾的是，它并不支持在Mac OS上使用。而且，它并不在我购买的Office 365套装里。
38 |
39 | 在Mac世界里，最好的工具算是OmniGraffle，就是很贵——我们平时使用的是公司的Mac电脑，使用盗版软件是有法律风险的。
40 |
41 | 
42 |
43 |
44 | 在GNU/Linux世界里，我们使用Dia。
45 |
46 | > Dia 是开放源代码的流程图软件，是GNU计划的一部分，程序创立者是Alexander Larsson。Dia使用单一文件界面模式，类似于GIMP与Inkscape。 Dia将多种需求以模块化来设计，如流程图、网络图、电路图等。各模块之间的符号仍是可以通用的，并没有限制。
47 |
48 | 
49 |
50 | 顺便安利一下，我最喜欢的操作系统OpenSuSE——简洁、尾长、绿色。
51 |
52 | 
53 |
54 | OpenSuSE在KDE桌面下效果最赞了——因为KDE和OpenSuSE都是德国制造。总的来说，会比Debian系的Debian和Ubunt，及RetHat系的CentOS及Fedora稳定、漂亮。
55 |
56 | 令人遗憾的是这三个工具，我都用不了。Mac对X Windows的支持不是一般的差，于是我就需要别的替代工具。
57 |
58 | ## 在线流程图：Processon
59 |
60 | 这个工具还是相当好用，至少是在GxFxW内比较快——我之前使用过Creately、draw.io、Gliffy等等的一些工具，只是随着版图的扩展，很多地区都已经“xx”了。
61 |
62 | 
63 |
64 | 不过遗憾的是：他们没有给我广告费。
65 |
66 | > ProcessOn是一个在线协作绘图平台，为用户提供最强大、易用的作图工具！支持在线创作流程图、BPMN、UML图、UI界面原型设计、iOS界面原型设计等。
67 |
68 | 同样的，在我的那个“Developer进阶书单”（GitHub: [https://github.com/phodal/booktree](https://github.com/phodal/booktree))中，就是用这个工具画出规规矩矩的线。
69 |
70 | 
71 |
72 | 并且，它还是跨平台的。
73 |
74 | ## 各种图： Word和Excel
75 |
76 | 由于翻译和写书的需要，我成了一个Office 365订阅用户。于是发现在Word等一系列的Office工具中，自带了一个SmartArt的工具：
77 |
78 | 
79 |
80 | 可以画出很多很有意思的图形，比如：
81 |
82 | 
83 |
84 | 又或者是：
85 |
86 | 
87 |
88 | 分分钟就能画一个的节奏。
89 |
90 | ## 脑图： XMind
91 |
92 | 我想这个一般人都是知道的。
93 |
94 | > XMind思维导图软件被著名互联网媒体Lifehacker评选为“最佳头脑风暴和思维导图工具”及”最受欢迎的思维导图软件”。
95 |
96 | 它有一个很大的优点是使用了全球最先进的Eclipse RCP 软件架构，支持跨平台使用。它有一个很大的缺点是使用了全球最先进的Eclipse RCP 软件架构，导致了有点卡。
97 |
98 | 相比于流程图什么的，它只适合做脑图。
99 |
100 | 
101 |
102 | 如果你还在使用Eclipse，那么你应该试试Intellij IDEA了。
103 |
104 | ## 各种图：D3.js
105 |
106 | > D3.js（D3或Data-Driven Documents）是一个用动态图形显示数据的JavaScript库，一个数据可视化的工具。
107 |
108 | 与上面的工具相比，这个工具可能没有那么方便。但是，作为一个数据可视化工具，它不仅仅可以做出各种炫酷的图形。
109 |
110 | 还可以做出一个技能树：
111 |
112 | 
113 |
114 | 这个项目的GitHub见：[https://github.com/phodal/sherlock](https://github.com/phodal/sherlock)
115 |
116 | ## 地图：Leaflet
117 |
118 | > Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的JavaScript 库。
119 |
120 | 虽然它与上面的图形没有啥关系，但是它带了一个图字啊。与Google Map原生的API，或者OpenStreet相比，它最大的优点是对移动设备支持好。
121 |
122 | 并且，它也是一个可以根据数据（GEOJSON，地理数据）生成图形的工具。
123 |
124 | 
125 |
--------------------------------------------------------------------------------
/chapters/hardware.md:
--------------------------------------------------------------------------------
1 | 硬件篇
2 | ===
3 |
4 | Raspberry Pi
5 | ---
6 |
7 | > Raspberry Pi 是一款基于Linux的单板机电脑。它由英国的树莓派基金会所开发，目的是以低价硬件及自由软件促进学校的基本计算机科学教育。
8 |
9 | Arduino
10 | ---
11 |
12 | > Arduino，是一个开放源代码的单芯片微控制器，它使用了Atmel AVR单片机，采用了开放源代码的软硬件平台，建构于简易输出/输入（simple I/O）界面板，并且具有使用类似Java、C语言的Processing/Wiring开发环境。
13 |
14 | 我拥有下面的一些开发板：
15 |
16 | - Arduino Uno，玩过都知道。通用版，可以使用一系列强大的扩展板。
17 | - Arduino Yun，带WiFi功能的Arduino。
18 | - Arduino ADK，可以使不支持USB Host功能的Android设备也可以和其它USB设备
19 | - Arduino Lilypad，主要用于可穿戴领域。
20 |
21 | NodeMCU
22 | ---
23 |
24 | > NodeMCU,是一个开源的物联网平台。 它使用Lua脚本语言编程。该平台基于eLua 开源项目,底层使用ESP8266 sdk 0.9.5版本。该平台使用了很多开源项目, 例如 lua-cjson, spiffs[5]. NodeMCU包含了可以运行在 esp8266 Wi-Fi SoC芯片之上的固件,以及基于ESP-12模组的硬件。
25 |
26 |
27 |
--------------------------------------------------------------------------------
/chapters/image.md:
--------------------------------------------------------------------------------
1 | 图像处理
2 | ===
3 |
4 | GIMP
5 | ---
6 |
7 | > GIMP (GNU Image Manipulation Program，GNU图形处理程序)是一个自由的专业图片处理软件，以GPL（GNU General Public Licence，GNU 通用公共许可协议）许可发布。 它能够用于点击数码位图，比如数码照片、扫描的图片。尽管GIMP也能够编辑矢量图形，比如SVG矢量图形，但是相对而言Inkscape、Corel Draw或Adobe Illustrator这些专门的矢量图软件的功能会更强。（因此人们通常将Inkscape与GIMP配合使用，得到更强大的工具组合）作为全功能的图像处理软件，GIMP对此领域内的专业软件如Photoshop、Corel Paint Shop Pro产生了强有力的挑战，这主要归功于GIMP众多出色的功能特性：多图层，图形缩放、调整，裁剪，颜色操作，支持众多文件格式等等。
8 |
9 | INKSCAPE
10 | ---
11 |
12 | > Inkscape 是开源的矢量图形编辑软件，与 Illustrator、Freehand、CorelDraw、Xara X 等软件很相似，它使用 W3C 标准的 Scalable Vector Graphics (SVG) 文件格式，支持包括形状、路径、文本、标记、克隆、alpha 混合、变换、渐变、图案、组合等 SVG 特性。它也支持创作共用的元数据、节点编辑、图层、复杂的路径运算、位图描摹、文本绕路径、流动文本、直接编辑 XML 等。它可以导入 JPEG、PNG、TIFF 等格式，并输出为 PNG 和多种矢量格式。
13 |
14 |
15 | ImageMagick
16 | ---
17 |
18 | > 它可以以各种格式读取和写入图像（超过200种），包括PNG，JPEG，JPEG-2000，GIF，TIFF，DPX，EXR，WebP，Postscript，PDF和SVG。使用 ImageMagick 调整大小，翻转，镜像，旋转，扭曲，剪切和变换图像，调整图像颜色，应用各种特殊效果，或绘制文本，线条，多边形，椭圆和Bézier曲线。
19 |
20 | 它可以支持以下的特性[^features]：
21 |
22 | - 格式转换：从一种格式转换成图像到另一个（例如 PNG 转 JPEG）
23 | - 变换：缩放，旋转，裁剪，翻转或修剪图像
24 | - 透明度：使图像的部分变为透明
25 | - 附加：添加形状或一帧到图像
26 | - 装饰：添加边框或帧图像
27 | - 特效：模糊，锐化，阈值，或色彩图像动画：创建一个从GIF动画图像组序列
28 | - 文本及评论：插入描述或艺术图像中的文字
29 | - 图像识别：描述的格式和图像性能
30 | - 综合：重叠了一个又一个的图像
31 | - 蒙太奇：并列图像画布上的图像缩略图
32 | - 电影支持：读写图像的共同使用的数字电影工作方式
33 | - 图像计算器：应用数学表达式的图像或图像通道
34 | - 离散傅立叶变换：实现正向和反向的DFT。
35 | - 高动态范围图像：准确地表现了从最明亮的阳光直射到最深最黑暗的阴影找到真正的幕后广泛的强度水平
36 | - 加密或解密图片：转换成不懂乱码，然后再返回普通图像
37 | - 虚拟像素支持：方便以外区域的图像像素
38 | - 大图像支持：读，过程，或写mebi和吉比像素的图像尺寸
39 | - 执行：ImageMagick的是线程安全的，利用内部算法OpenMP的功能及快速的双核和四核处理器技术提供窗口优势
40 | - 异构分布式处理：某些算法可以在跨越的CPU，GPU，以及其他处理器组成的异构平台音乐会执行速度提高。
41 |
42 | 它可以支持 Linux、Windows、 Mac Os X、 iOS、 Android OS 等等的系统。
43 |
44 | 如果说 Pandoc 里文档界的瑞士军刀，那么 ImageMagick 就是图形界的瑞士军刀。
45 |
46 | 上周在为 Growth 制作插图的时候，需要：1. 合并不同的图像；2. 对图片进行缩放。考虑到图片的数量差不多有 30 张左右，我决定要找一个工具。。。
47 |
48 | 这个时候就找到了 ImageMagick 中的几个命令，它居然可以完成我大部分的功能。
49 |
50 | ### 合并图像
51 |
52 | 最开始的时候，我是想合并几张图片，成如下的样子：
53 |
54 | 
55 |
56 | 按照我的习惯，我会打开 Photoshop，然后计算一次合成的图片的宽度。在我合成了两三张图片之后，我就累了。
57 |
58 | 搜索过后，便发现了 IMageMagick 的 ``convert`` 命令，只需要简单地执行一下：
59 |
60 | ```
61 | convert skilltree-1.png skilltree-2.png skilltree-3.png +append skilltree.png
62 | ```
63 |
64 | 而 ``convert`` 这个命令，其所拥有的参数选项居然有 253 个，我是我在执行下面的命令后统计到的：
65 |
66 | ```
67 | convert --help | grep " -"|wc -l
68 | ```
69 |
70 | 它可以用来转换图像格式，调整图像大小、模糊、裁剪、去斑、抖动、绘图、翻转、加入、重新采样等等。它的功能相当的丰富，以至于我联想到我只需要有这个命令 + 一个简单的 UI，我就可以做出一个 P 图软件了。
71 |
72 | ### 批量缩放大小
73 |
74 | 在合并图像之前，我需要对图片进行缩放。同样的，我找到的工具也是 ImageMagick 中的：
75 |
76 | ```
77 | mogrify -geometry x600 *.png
78 | ```
79 |
80 | 这里的 x600 即是图片的高度，上面的命令会将所有的 png 缩放到高度为 600 的图片。除了缩放，它还可以轻松地转换图形的格式：
81 |
82 | ```
83 | mogrify -format jpg *.png
84 | ```
85 |
86 | 即可以将所有的 jpg 转为 png。
87 |
88 | [^features]: 翻译源自 https://imagemagick.cn/
89 |
90 |
--------------------------------------------------------------------------------
/chapters/ops.md:
--------------------------------------------------------------------------------
1 | Ops
2 | ======
3 |
4 | Nginx Pagespeed
5 | ---
6 |
7 | > ngx_pagespeed 是 Nginx 的一个扩展模块，主要的功能是针对前端页面而进行服务器端的优化，对前端设计人员来说，可以省去优化css、js以及图片的过程。ngx_pagespeed对nginx自身负载能力的提升基本是看不到的，甚至会因为进行服务器端的优化而使系统增加负载；但从减少客户请求数的角度去看，牺牲部分服务器性能还是值得的
8 |
9 | 主要功能如下：
10 |
11 | - 图像优化：剥离元数据、动态调整，重新压缩
12 | - CSS和JavaScript压缩、合并、级联、内联
13 | - 小资源内联
14 | - 推迟图像和JavaScript加载
15 | - 对HTML重写、压缩空格、去除注释等
16 | - 提升缓存周期
17 | - 以及其他config_filters
18 |
19 | Boom
20 | ---
21 |
22 | Boom是一个用Go语言实现的压力测试工具，就是和Apache Bench类似的工具。它提供了一个很有意思的UI，这就是我为什么推荐他的原因了：
23 |
24 | ```
25 | 1000 / 1000 Boooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo! 100.00 %
26 |
27 | Summary:
28 | Total: 1.9052 secs.
29 | Slowest: 0.2054 secs.
30 | Fastest: 0.0111 secs.
31 | Average: 0.1817 secs.
32 | Requests/sec: 524.8813
33 | Total Data Received: 5459000 bytes.
34 | Response Size per Request: 5459 bytes.
35 |
36 | Status code distribution:
37 | [200] 1000 responses
38 |
39 | Response time histogram:
40 | 0.011 [1] |
41 | 0.031 [10] |
42 | 0.050 [10] |
43 | 0.069 [11] |
44 | 0.089 [11] |
45 | 0.108 [10] |
46 | 0.128 [11] |
47 | 0.147 [11] |
48 | 0.167 [11] |
49 | 0.186 [295] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
50 | 0.205 [619] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
51 |
52 | Latency distribution:
53 | 10% in 0.1764 secs.
54 | 25% in 0.1841 secs.
55 | 50% in 0.1892 secs.
56 | 75% in 0.1942 secs.
57 | 90% in 0.2011 secs.
58 | 95% in 0.2024 secs.
59 | 99% in 0.2038 secs.
60 | ```
61 |
62 | GoAccess
63 | ---
64 |
65 | > GoAccess是一款开源、实时，运行在命令行终端下的web日志分析工具。该工具提供快速、多样的HTTP状态统计，可以令管理员不再纠结于统计各类数据，和繁杂的指令以及一大堆管道/正则表达式说byebye。
66 |
67 | 这生成的风格是这样的：
68 |
69 | 
70 |
71 |
72 | 它可以轻松统计出访问概况、动态页面请求、静态页面请求（如图片、样式表、脚本等）、访客排名，访客使用的操作系统，访客使用的浏览器，来路域名，404 错误，搜索爬虫，搜索关键词等等。
73 |
74 | 而，我们所要做的只需要运行：
75 |
76 | ```shell
77 | goaccess -f access.log
78 | ```
79 |
80 | Fabric
81 | ---
82 |
83 | 因为我的博客是基于Django框架而开发的，我偏向于使用Python作为开发语言，所以我需要选择了Fabric作为运维工具。
84 |
85 |
86 | > Fabric 是一个 Python (2.5-2.7) 库和命令行工具，用来流水线化执行 SSH以部署应用或系统管理任务。
87 |
88 | 更具体地说，Fabric 是：
89 |
90 | - 一个让你通过 命令行 执行 任意 Python 函数 的工具；
91 | - 一个让通过 SSH 执行 Shell 命令更加 容易 和 蟒样 的子程序库（建立于一个更低层次的库）。
92 |
93 | Docker
94 | ---
95 |
96 | > Docker是一个开源的引擎，可以轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器。
97 |
98 | Jenkins
99 | ---
100 |
101 | > Jenkins是一个用Java编写的开源的持续集成工具。Jenkins提供了软件开发的持续集成服务。它运行在Servlet容器中（例如Apache Tomcat）。它支持软件配置管理（SCM）工具，可以执行基于Apache Ant和Apache Maven的项目，以及任意的Shell脚本和Windows批处理命令。
102 |
103 | 除了将Jenkins有于持续集成环境外，我们还可以使用Jenkins来完成一些自动化的部署工作。
104 |
105 |
--------------------------------------------------------------------------------
/chapters/science.md:
--------------------------------------------------------------------------------
1 | 科学
2 | ===
3 |
4 | Octave
5 | ---
6 |
7 | > Octave是一个旨在提供与Matlab语法兼容的开放源代码科学计算及数值分析的工具；
8 |
9 | Numpy
10 | ---
11 |
12 | > NumPy是Python语言的一个扩充程序库。支持高级大量的维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库。NumPy的前身Numeric最早是由Jim Hugunin与其它协作者共同开发，2005年，Travis Oliphant在Numeric中结合了另一个同性质的程序库Numarray的特色，并加入了其它扩展而开发了NumPy。NumPy为开放源代码并且由许多协作者共同维护开发。
13 |
14 | Processing
15 | ---
16 |
17 | > Processing是一种开源编程语言，专门为电子艺术和视觉交互设计而创建，其目的是通过可视化的方式辅助编程教学，并在此基础之上表达数字创意。
18 |
19 | 它除了制作一些酷炫的动画之外，其简单的GUI编程，还可以用于硬件端的上位机编写。
20 |
--------------------------------------------------------------------------------
/chapters/wfg.md:
--------------------------------------------------------------------------------
1 | 上网工具
2 | ===
3 |
4 | 修改 Hosts
5 | ---
6 |
7 | 对于和我一起只选择使用 Google 的用户来说，这是一种**安全**、**可靠**的上网方法。
8 |
9 | 你可以从下面的地址：https://raw.githubusercontent.com/racaljk/hosts/master/hosts
10 |
11 | 获得一个可用的 Google IP，而从最近的趋势来看，这个 IP 列表更新得有点频繁。
12 |
13 | 除此，还应该在境外拥有一个自己的服务器。目前除了我的博客，还有两个额外的服务器是用来上网的。
14 |
15 | 自建 SSH 隧道
16 | ---
17 |
18 | > SSH 会自动加密和解密所有 SSH 客户端与服务端之间的网络数据。但是，SSH 还同时提供了一个非常有用的功能，这就是端口转发。它能够将其他 TCP 端口的网络数据通过 SSH 链接来转发，并且自动提供了相应的加密及解密服务。这一过程有时也被叫做“隧道”（tunneling），这是因为 SSH 为其他 TCP 链接提供了一个安全的通道来进行传输而得名。
19 |
20 | 只需要形如下的命令即可：
21 |
22 | ```
23 | ssh -N -D 127.0.0.1:3128 xxx@xx.x.xx.xx
24 | ```
25 |
26 | 随后在客户端上设置代理即可。
27 |
28 | 自建 OpenConnect
29 | ---
30 |
31 | AnyConnect 为思科推出的便利上网的客户端，目前已有 Windows、Android、iOS、OS X、Ubuntu、WebOS 等操作系统的客户端。AnyConnect主要作用是方便员工在任何设备上安全地办公.
32 |
33 | 而 OpenConnect 则可以提供一个 AnyConnect 的服务端，那么我们只需要在 APP Store 下载 AnyConnect 即可。
34 |
35 | 在 Ubuntu 上执行下面的命令即可：
36 |
37 | ```
38 | apt install ocserv
39 | ```
40 |
41 | 再做一些复杂的配置：https://www.logcg.com/archives/994.html
42 |
43 | Ubuntu Server 安装 ShadowSocks
44 | ---
45 |
46 | 直接使用命令安装即可：
47 |
48 | ```
49 | apt update
50 | apt install shadowsocks
51 | ```
52 |
53 | 然后修改 `/etc/shadowsocks/config.json` 的配置：
54 |
55 | ```
56 | {
57 | "server":"hosts",
58 | "server_port":8848,
59 | "local_address": "127.0.0.1",
60 | "local_port":1080,
61 | "password":"password",
62 | "timeout":300,
63 | "method":"aes-256-cfb",
64 | "fast_open": false,
65 | "workers": 1
66 | }
67 | ```
68 |
69 | 接着修改 `/etc/rc.local` 设为开机启动：
70 |
71 | ```
72 | /usr/bin/ssserver -c /etc/shadowsocks/config.json
73 | ```
74 |
75 | 然后，让这货在后台运行即可：
76 |
77 | ```
78 | nohup ssserver -c /etc/shadowsocks/config.json > log &
79 | ```
80 |
--------------------------------------------------------------------------------
/css/vendor.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | .acodecode {
4 | cursor: pointer
5 | }
6 | .acodecodeactive {
7 | cursor: default
8 | }
9 | .codecodecode {
10 | position: fixed;
11 | z-index: 100;
12 | left: 2%;
13 | bottom: -30px;
14 | width: 96%;
15 | height: 0;
16 | max-height: 270px;
17 | text-align: left
18 | }
19 | .codecodecode>div {
20 | box-shadow: 0 0 3px #444
21 | }
22 | .codecodecontrols {
23 | height: 30px;
24 | margin-top: -30px;
25 | background-color: #fff;
26 | background-color: rgba(255, 255, 255, .8);
27 | border-radius: 8px 8px 0 0
28 | }
29 | .codecodecontrols a {
30 | float: left;
31 | line-height: 30px;
32 | margin-left: 6px;
33 | font-family: Arial;
34 | font-size: 12px
35 | }
36 | .codecodecontrols .closeCodeCode {
37 | float: right;
38 | margin-right: 6px
39 | }
40 | .acodecode.codecode, .codecode {
41 | border-radius: 0 !important;
42 | position: relative !important;
43 | width: 100% !important;
44 | margin: 0 !important;
45 | overflow: auto !important;
46 | cursor: default !important
47 | }
48 | div.codecode [id^=highlighter] div.bar.show, div.codecode [id^=highlighter] div.toolbar {
49 | display: none !important
50 | }
51 | h1, h2, h3, h4, h5, h6, p {
52 | margin-top: 0;
53 | padding-right: 15px;
54 | padding-left: 15px;
55 | text-align: left;
56 | font-family: Georgia
57 | }
58 | h1 {
59 | text-align: left
60 | }
61 | h2.booktitle {
62 | font-size: 1.5em;
63 | color: #666
64 | }
65 | .subhead-link {
66 | font-size: .75em;
67 | margin-left: -15px;
68 | margin-top: 5px;
69 | float: left;
70 | visibility: hidden
71 | }
72 | .subhead-link:hover {
73 | text-decoration: none;
74 | visibility: visible
75 | }
76 | h1:hover .subhead-link, h2:hover .subhead-link, h3:hover .subhead-link, h4:hover .subhead-link {
77 | visibility: visible
78 | }
79 | .container {
80 | background: #FFF
81 | }
82 | header {
83 | background: #fff
84 | }
85 | .content {
86 | padding: 10px 0;
87 | text-align: left
88 | }
89 | .footer {
90 | background: #fff
91 | }
92 | .fltrt {
93 | float: right;
94 | margin-left: 8px
95 | }
96 | .fltlft {
97 | float: left;
98 | margin-right: 8px
99 | }
100 | .clearfloat {
101 | clear: both;
102 | height: 0;
103 | font-size: 1px;
104 | line-height: 0
105 | }
106 | .copyright {
107 | text-align: left
108 | }
109 | .booktitle {
110 | text-align: center;
111 | line-height: 41px;
112 | border-bottom: 1px solid #fff;
113 | padding: 0;
114 | font-size: 2.2em
115 | }
116 | .booktitle.author {
117 | font-size: 24px
118 | }
119 | #contents-list {
120 | background: none repeat scroll 0 0 #EEE;
121 | border: 3px solid #DDD;
122 | padding: 1em 1em 1em 3em
123 | }
124 | .subitem {
125 | margin-left: 25px
126 | }
127 | #references-list {
128 | word-wrap: break-word
129 | }
130 | pre {
131 | display: block;
132 | line-height: 18px;
133 | background-color: #f5f5f5;
134 | -webkit-border-radius: 4px;
135 | -moz-border-radius: 4px;
136 | border-radius: 4px;
137 | white-space: pre;
138 | white-space: pre-wrap;
139 | word-break: break-all;
140 | word-wrap: break-word
141 | }
142 | div.syntaxhighlighter {
143 | padding: 1em 0
144 | }
145 | .syntaxhighlighter a, .syntaxhighlighter code, .syntaxhighlighter div, .syntaxhighlighter table, .syntaxhighlighter table caption, .syntaxhighlighter table tbody, .syntaxhighlighter table td, .syntaxhighlighter table thead, .syntaxhighlighter table tr, .syntaxhighlighter textarea {
146 | -moz-border-radius: 0 !important;
147 | -webkit-border-radius: 0 !important;
148 | background: none !important;
149 | border: 0 !important;
150 | bottom: auto !important;
151 | float: none !important;
152 | height: auto !important;
153 | left: auto !important;
154 | line-height: 1.1em !important;
155 | margin: 0 !important;
156 | outline: 0 !important;
157 | overflow: visible !important;
158 | padding: 0 !important;
159 | position: static !important;
160 | right: auto !important;
161 | text-align: left !important;
162 | top: auto !important;
163 | vertical-align: baseline !important;
164 | width: auto !important;
165 | box-sizing: content-box !important;
166 | font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
167 | font-weight: 400 !important;
168 | font-style: normal !important;
169 | font-size: 1em !important;
170 | min-height: inherit !important;
171 | min-height: auto !important
172 | }
173 | .syntaxhighlighter {
174 | width: 100% !important;
175 | margin: 1em 0 !important;
176 | position: relative !important;
177 | overflow: auto !important;
178 | font-size: 1em !important
179 | }
180 | .syntaxhighlighter.source {
181 | overflow: hidden !important
182 | }
183 | .syntaxhighlighter .bold {
184 | font-weight: 700 !important
185 | }
186 | .syntaxhighlighter .italic {
187 | font-style: italic !important
188 | }
189 | .syntaxhighlighter .line {
190 | white-space: pre !important
191 | }
192 | .syntaxhighlighter table {
193 | width: 100% !important
194 | }
195 | .syntaxhighlighter table caption {
196 | text-align: left !important;
197 | padding: .5em 0 .5em 1em !important
198 | }
199 | .syntaxhighlighter table td.code {
200 | width: 100% !important
201 | }
202 | .syntaxhighlighter table td.code .container {
203 | position: relative !important
204 | }
205 | .syntaxhighlighter table td.code .container textarea {
206 | box-sizing: border-box !important;
207 | position: absolute !important;
208 | left: 0 !important;
209 | top: 0 !important;
210 | width: 100% !important;
211 | height: 100% !important;
212 | border: 0 !important;
213 | background: #fff !important;
214 | padding-left: 1em !important;
215 | overflow: hidden !important;
216 | white-space: pre !important
217 | }
218 | .syntaxhighlighter table td.gutter .line {
219 | text-align: right !important;
220 | padding: 0 .5em 0 1em !important
221 | }
222 | .syntaxhighlighter table td.code .line {
223 | padding: 0 1em !important
224 | }
225 | .syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
226 | padding-left: 0 !important
227 | }
228 | .syntaxhighlighter.show {
229 | display: block !important
230 | }
231 | .syntaxhighlighter.collapsed table {
232 | display: none !important
233 | }
234 | .syntaxhighlighter.collapsed .toolbar {
235 | padding: .1em .8em 0 !important;
236 | font-size: 1em !important;
237 | position: static !important;
238 | width: auto !important;
239 | height: auto !important
240 | }
241 | .syntaxhighlighter.collapsed .toolbar span {
242 | display: inline !important;
243 | margin-right: 1em !important
244 | }
245 | .syntaxhighlighter.collapsed .toolbar span a {
246 | padding: 0 !important;
247 | display: none !important
248 | }
249 | .syntaxhighlighter.collapsed .toolbar span a.expandSource {
250 | display: inline !important
251 | }
252 | .syntaxhighlighter .toolbar {
253 | position: absolute !important;
254 | right: 1px !important;
255 | top: 1px !important;
256 | width: 11px !important;
257 | height: 11px !important;
258 | font-size: 10px !important;
259 | z-index: 10 !important
260 | }
261 | .syntaxhighlighter .toolbar span.title {
262 | display: inline !important
263 | }
264 | .syntaxhighlighter .toolbar a {
265 | display: block !important;
266 | text-align: center !important;
267 | text-decoration: none !important;
268 | padding-top: 1px !important
269 | }
270 | .syntaxhighlighter .toolbar a.expandSource {
271 | display: none !important
272 | }
273 | .syntaxhighlighter.ie {
274 | font-size: .9em !important;
275 | padding: 1px 0 !important
276 | }
277 | .syntaxhighlighter.ie .toolbar {
278 | line-height: 8px !important
279 | }
280 | .syntaxhighlighter.ie .toolbar a {
281 | padding-top: 0 !important
282 | }
283 | .syntaxhighlighter.printing .line.alt1 .content, .syntaxhighlighter.printing .line.alt2 .content, .syntaxhighlighter.printing .line.highlighted .number, .syntaxhighlighter.printing .line.highlighted.alt1 .content, .syntaxhighlighter.printing .line.highlighted.alt2 .content {
284 | background: none !important
285 | }
286 | .syntaxhighlighter.printing .line .number {
287 | color: #bbb !important
288 | }
289 | .syntaxhighlighter.printing .line .content {
290 | color: #000 !important
291 | }
292 | .syntaxhighlighter.printing .toolbar {
293 | display: none !important
294 | }
295 | .syntaxhighlighter.printing a {
296 | text-decoration: none !important
297 | }
298 | .syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
299 | color: #000 !important
300 | }
301 | .syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
302 | color: #008200 !important
303 | }
304 | .syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
305 | color: #00f !important
306 | }
307 | .syntaxhighlighter.printing .keyword {
308 | color: #069 !important;
309 | font-weight: 700 !important
310 | }
311 | .syntaxhighlighter.printing .preprocessor {
312 | color: gray !important
313 | }
314 | .syntaxhighlighter.printing .variable {
315 | color: #a70 !important
316 | }
317 | .syntaxhighlighter.printing .value {
318 | color: #090 !important
319 | }
320 | .syntaxhighlighter.printing .functions {
321 | color: #ff1493 !important
322 | }
323 | .syntaxhighlighter.printing .constants {
324 | color: #06c !important
325 | }
326 | .syntaxhighlighter.printing .script {
327 | font-weight: 700 !important
328 | }
329 | .syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
330 | color: gray !important
331 | }
332 | .syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
333 | color: #ff1493 !important
334 | }
335 | .syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
336 | color: red !important
337 | }
338 | .syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
339 | color: #000 !important
340 | }
341 | .syntaxhighlighter, .syntaxhighlighter .line.alt1, .syntaxhighlighter .line.alt2 {
342 | background-color: #1b2426 !important
343 | }
344 | .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
345 | background-color: #323e41 !important
346 | }
347 | .syntaxhighlighter .line.highlighted.number, .syntaxhighlighter table caption {
348 | color: #b9bdb6 !important
349 | }
350 | .syntaxhighlighter .gutter {
351 | color: #afafaf !important
352 | }
353 | .syntaxhighlighter .gutter .line {
354 | border-right: 3px solid #435a5f !important
355 | }
356 | .syntaxhighlighter .gutter .line.highlighted {
357 | background-color: #435a5f !important;
358 | color: #1b2426 !important
359 | }
360 | .syntaxhighlighter.printing .line .content {
361 | border: 0 !important
362 | }
363 | .syntaxhighlighter.collapsed {
364 | overflow: visible !important
365 | }
366 | .syntaxhighlighter.collapsed .toolbar {
367 | color: #5ba1cf !important;
368 | background: #000 !important;
369 | border: 1px solid #435a5f !important
370 | }
371 | .syntaxhighlighter.collapsed .toolbar a {
372 | color: #5ba1cf !important
373 | }
374 | .syntaxhighlighter.collapsed .toolbar a:hover {
375 | color: #5ce638 !important
376 | }
377 | .syntaxhighlighter .toolbar {
378 | color: #fff !important;
379 | background: #435a5f !important;
380 | border: 0 !important
381 | }
382 | .syntaxhighlighter .toolbar a {
383 | color: #fff !important
384 | }
385 | .syntaxhighlighter .toolbar a:hover {
386 | color: #e0e8ff !important
387 | }
388 | .syntaxhighlighter .plain, .syntaxhighlighter .plain a {
389 | color: #b9bdb6 !important
390 | }
391 | .syntaxhighlighter .comments, .syntaxhighlighter .comments a {
392 | color: #878a85 !important
393 | }
394 | .syntaxhighlighter .string, .syntaxhighlighter .string a {
395 | color: #5ce638 !important
396 | }
397 | .syntaxhighlighter .keyword {
398 | color: #5ba1cf !important
399 | }
400 | .syntaxhighlighter .preprocessor {
401 | color: #435a5f !important
402 | }
403 | .syntaxhighlighter .variable {
404 | color: #ffaa3e !important
405 | }
406 | .syntaxhighlighter .value {
407 | color: #090 !important
408 | }
409 | .syntaxhighlighter .functions {
410 | color: #ffaa3e !important
411 | }
412 | .syntaxhighlighter .constants {
413 | color: #e0e8ff !important
414 | }
415 | .syntaxhighlighter .script {
416 | font-weight: 700 !important;
417 | color: #5ba1cf !important;
418 | background-color: none !important
419 | }
420 | .syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
421 | color: #e0e8ff !important
422 | }
423 | .syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
424 | color: #fff !important
425 | }
426 | .syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
427 | color: #ffaa3e !important
428 | }
429 | .sausage-set {
430 | position: fixed;
431 | right: 0;
432 | top: 0;
433 | width: 15px;
434 | height: 100%;
435 | border-left: solid 2px #fff;
436 | border-right: solid 2px #fff;
437 | background-color: #fff;
438 | font-family: 'Helvetica Neue', Arial, sans-serif
439 | }
440 | .sausage {
441 | position: absolute;
442 | left: 0;
443 | width: 100%;
444 | height: 100%;
445 | background-color: #f1f1f1;
446 | text-decoration: none;
447 | -moz-border-radius: 8px;
448 | -webkit-border-bottom-left-radius: 8px;
449 | -webkit-border-top-left-radius: 8px;
450 | -webkit-border-bottom-right-radius: 8px;
451 | -webkit-border-top-right-radius: 8px;
452 | -moz-box-shadow: inset 0 1px 2px 4px rgba(0, 0, 0, .025);
453 | -webkit-box-shadow: inset 0 1px 2px 4px rgba(0, 0, 0, .025);
454 | cursor: pointer
455 | }
456 | .sausage-current, .sausage-hover {
457 | background-color: #f2e4ed;
458 | -moz-box-shadow: inset 0 1px 2px 4px rgba(51, 63, 70, .025)
459 | }
460 | .sausage-span {
461 | position: absolute;
462 | right: 24px;
463 | top: 5px;
464 | z-index: 2;
465 | display: none;
466 | width: 100px;
467 | padding: 2px 3px;
468 | color: #000;
469 | background-color: #fff;
470 | border: solid 2px #906;
471 | font-size: 10px;
472 | line-height: 12px;
473 | font-weight: 700;
474 | text-align: center;
475 | -moz-border-radius: 7px;
476 | -webkit-border-bottom-left-radius: 7px;
477 | -webkit-border-top-left-radius: 7px;
478 | -webkit-border-bottom-right-radius: 7px;
479 | -webkit-border-top-right-radius: 7px;
480 | -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .05);
481 | -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .05)
482 | }
483 | .sausage-current .sausage-span, .sausage-hover .sausage-span {
484 | display: block
485 | }
486 | a, abbr, acronym, address, article, aside, blockquote, body, caption, code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, img, label, legend, li, nav, object, ol, p, pre, q, section, span, table, tbody, td, tfoot, th, thead, tr, ul {
487 | margin: 0;
488 | padding: 0;
489 | border: 0;
490 | font-weight: inherit;
491 | font-style: inherit;
492 | font-size: 100%;
493 | font-family: inherit;
494 | vertical-align: baseline
495 | }
496 | article, aside, dialog, figure, footer, header, hgroup, nav, section {
497 | display: block
498 | }
499 | body {
500 | line-height: 1.5
501 | }
502 | table {
503 | border-collapse: separate;
504 | border-spacing: 0
505 | }
506 | caption, td, th {
507 | text-align: left;
508 | font-weight: 400
509 | }
510 | table, td, th {
511 | vertical-align: middle
512 | }
513 | blockquote:after, blockquote:before, q:after, q:before {
514 | content: ""
515 | }
516 | blockquote, q {
517 | quotes: "" ""
518 | }
519 | a img {
520 | border: 0
521 | }
522 | .search, body, input[type=submit], input[type=text] {
523 | font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif
524 | }
525 | html {
526 | font-size: 100.01%
527 | }
528 | h1, h2, h3, h4, h5, h6 {
529 | font-weight: 400;
530 | color: #000
531 | }
532 | h1 {
533 | font-size: 3em;
534 | line-height: 1;
535 | margin-bottom: .5em
536 | }
537 | h2 {
538 | font-size: 2em;
539 | margin-bottom: .75em
540 | }
541 | h3 {
542 | font-size: 1.5em;
543 | line-height: 1
544 | }
545 | h4 {
546 | font-size: 1.2em;
547 | line-height: 1.25;
548 | margin-bottom: 1.25em
549 | }
550 | h5 {
551 | font-size: 1em;
552 | font-weight: 700;
553 | margin-bottom: 1.5em
554 | }
555 | h6 {
556 | font-size: 1em;
557 | font-weight: 700
558 | }
559 | h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
560 | margin: 0
561 | }
562 | p {
563 | margin: 0 0 1.5em
564 | }
565 | p img.left {
566 | float: left;
567 | margin: 1.5em 1.5em 1.5em 0;
568 | padding: 0
569 | }
570 | p img.right {
571 | float: right;
572 | margin: 1.5em 0 1.5em 1.5em
573 | }
574 | strong {
575 | font-weight: 700
576 | }
577 | dfn, em {
578 | font-style: italic
579 | }
580 | dfn {
581 | font-weight: 700
582 | }
583 | sub, sup {
584 | line-height: 0
585 | }
586 | address {
587 | margin: 0 0 1.5em;
588 | font-style: italic
589 | }
590 | del {
591 | color: #666
592 | }
593 | li ol, li ul {
594 | margin: 0
595 | }
596 | ol, ul {
597 | margin: 0 1.5em 1.5em 0;
598 | padding-left: 3.333em
599 | }
600 | ul {
601 | list-style-type: disc
602 | }
603 | ol {
604 | list-style-type: decimal
605 | }
606 | dl {
607 | margin: 0 0 1.5em
608 | }
609 | dl dt {
610 | font-weight: 700
611 | }
612 | dd {
613 | margin-left: 1.5em
614 | }
615 | table {
616 | margin-bottom: 1.4em
617 | }
618 | th {
619 | font-weight: 700
620 | }
621 | thead th {
622 | background: #c3d9ff
623 | }
624 | caption, td, th {
625 | padding: 4px 10px 4px 5px
626 | }
627 | tfoot {
628 | font-style: italic
629 | }
630 | body {
631 | font-size: 100%;
632 | color: #000;
633 | background: #F6f6F6 url(../images/base.png) repeat 0 0
634 | }
635 | h3 {
636 | border-bottom: 1px solid #CCC;
637 | margin-bottom: .5em;
638 | padding-bottom: .5em
639 | }
640 | .lead {
641 | font-size: 1.5em
642 | }
643 | .stage_links {
644 | color: #777
645 | }
646 | a, a:link, a:visited {
647 | color: #906;
648 | text-decoration: none
649 | }
650 | a:active, a:focus, a:hover {
651 | color: #E106B2;
652 | text-decoration: underline
653 | }
654 | hr.space {
655 | background: #fff;
656 | color: #fff;
657 | visibility: hidden
658 | }
659 | hr {
660 | background: #CCC;
661 | color: #CCC;
662 | clear: both;
663 | float: none;
664 | width: 100%;
665 | height: .1em;
666 | margin: 0 0 1.45em;
667 | border: 0
668 | }
669 | hr.bold {
670 | height: 1px;
671 | background-color: #906;
672 | color: #906
673 | }
674 | blockquote {
675 | overflow: hidden;
676 | margin: 0 0 1.5em;
677 | padding: 0 1.5em;
678 | color: #000;
679 | font-style: normal
680 | }
681 | blockquote p {
682 | margin-bottom: .5em
683 | }
684 | .attribution {
685 | font-style: italic;
686 | text-align: right;
687 | color: #777
688 | }
689 | table {
690 | width: 100%
691 | }
692 | code {
693 | padding: 2px 4px;
694 | color: #D14;
695 | background-color: #F7F7F9;
696 | border: 1px solid #E1E1E8;
697 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
698 | font-size: 12px;
699 | -webkit-border-radius: 3px;
700 | -moz-border-radius: 3px;
701 | border-radius: 3px
702 | }
703 | .caption, caption {
704 | caption-side: bottom;
705 | background: 0 0;
706 | font-style: italic
707 | }
708 | tr.even td {
709 | background: #F4F4F4
710 | }
711 | tfoot td {
712 | border-top: 1px solid #EAEAEA;
713 | font-weight: 700;
714 | font-style: normal
715 | }
716 | abbr, acronym {
717 | border: 0
718 | }
719 | abbr[title]:hover {
720 | border-bottom: 1px dotted #666;
721 | cursor: help
722 | }
723 | .red {
724 | background: red
725 | }
726 | .highlight {
727 | background: #EEC3C3
728 | }
729 | .blocks:after, .clearfix:after, .container:after, .edition_list:after, .editions:after, .inner:after {
730 | content: "\0020";
731 | display: block;
732 | height: 0;
733 | clear: both;
734 | visibility: hidden;
735 | overflow: hidden
736 | }
737 | .blocks, .clearfix, .container, .edition_list, .editions, .inner {
738 | display: block
739 | }
740 | .clear {
741 | clear: both
742 | }
743 | .container {
744 | max-width: 940px;
745 | margin: 0 auto;
746 | padding: 0 16px;
747 | text-align: left
748 | }
749 | .gttr {
750 | margin-right: 2.9%;
751 | float: left
752 | }
753 | .last {
754 | float: left
755 | }
756 | .sidebar {
757 | width: 32%;
758 | float: right;
759 | margin-right: 0
760 | }
761 | .content_footer {
762 | clear: both
763 | }
764 | .span10, .span2, .span3, .span4, .span6, .span8 {
765 | margin-right: 2.3%;
766 | float: left
767 | }
768 | .span2 {
769 | width: 14.6341%
770 | }
771 | .span3 {
772 | width: 23.1707%
773 | }
774 | .span4 {
775 | width: 31.7073%
776 | }
777 | .span6 {
778 | width: 48.7805%
779 | }
780 | .span8 {
781 | width: 65.853658%
782 | }
783 | .span10 {
784 | width: 73.17073%
785 | }
786 | .blocks, .editions {
787 | margin: 1.5em 0;
788 | clear: both
789 | }
790 | .editions {
791 | margin-bottom: 0
792 | }
793 | .last {
794 | margin-right: 0 !important
795 | }
796 | .lyt_img {
797 | max-width: 100%
798 | }
799 | .page_header {
800 | overflow: hidden;
801 | padding: 0 0 .2em;
802 | margin: 1.5em 0
803 | }
804 | .logo {
805 | width: 49.5%;
806 | float: left;
807 | margin-bottom: 0
808 | }
809 | .logo span {
810 | display: block;
811 | font-style: italic;
812 | font-size: .5em
813 | }
814 | .logo a, .logo a:link, .logo a:visited {
815 | color: #000
816 | }
817 | .logo a:active, .logo a:focus, .logo a:hover {
818 | color: #906;
819 | text-decoration: none
820 | }
821 | .search_box {
822 | width: 50%;
823 | float: right
824 | }
825 | .search {
826 | width: auto;
827 | float: right;
828 | vertical-align: middle
829 | }
830 | .edition_list, .info_bubble, .inner, .stage {
831 | padding: 1em 1.5em;
832 | background: #FFF;
833 | -moz-border-radius: 3px;
834 | -webkit-border-radius: 3px;
835 | border-radius: 3px;
836 | -moz-box-shadow: 0 0 8px #999;
837 | -webkit-box-shadow: 0 0 8px #999;
838 | box-shadow: 0 0 8px #999
839 | }
840 | .stage {
841 | margin-bottom: 1.5em;
842 | padding: 3em 50% 1.5em 3em
843 | }
844 | .edition_list {
845 | margin: 0 0 1em;
846 | clear: both;
847 | overflow: hidden
848 | }
849 | .edition_list p {
850 | margin-bottom: 0;
851 | font-style: italic
852 | }
853 | .edition_list h2 {
854 | margin-bottom: 0;
855 | font-size: 1.8em;
856 | line-height: 1.5;
857 | font-weight: 700
858 | }
859 | .edition_list ul {
860 | margin: 0;
861 | padding: 0;
862 | list-style: none;
863 | display: inline
864 | }
865 | .edition_list ul li {
866 | display: inline;
867 | margin-right: 1em;
868 | padding-right: 1em;
869 | border-right: 1px solid #F6f6F6
870 | }
871 | .edition_list ul li:last-child {
872 | margin-right: 0;
873 | padding-right: 0;
874 | border-right: 0
875 | }
876 | .info_bubble {
877 | padding-bottom: 1em;
878 | color: #FFF;
879 | text-shadow: 1px 1px 0 #000;
880 | background: #906;
881 | position: relative;
882 | overflow: visible
883 | }
884 | .info_bubble p {
885 | margin-bottom: 0
886 | }
887 | .info_bubble.startpage {
888 | padding-bottom: 1em;
889 | min-height: 9em;
890 | height: auto !important;
891 | height: 9em;
892 | z-index: 0
893 | }
894 | .info_bubble.startpage span {
895 | position: absolute;
896 | display: block;
897 | bottom: 1em;
898 | left: -2em;
899 | width: 40px;
900 | height: 40px;
901 | z-index: 100
902 | }
903 | .blocks>div {
904 | margin-bottom: 1.5em
905 | }
906 | .footer {
907 | margin: 1.5em 0 0;
908 | padding: 1.5em 0 0;
909 | overflow: hidden
910 | }
911 | #buy {
912 | position: relative
913 | }
914 | #offers {
915 | position: absolute;
916 | bottom: 0;
917 | font-size: .625em;
918 | margin: 0;
919 | padding: 0;
920 | list-style: none;
921 | display: none
922 | }
923 | .save_a_tree h3 {
924 | display: none;
925 | line-height: 1.5;
926 | border-bottom: 0
927 | }
928 | #offers li {
929 | display: inline;
930 | margin-right: 1em;
931 | padding-right: 1em;
932 | border-right: 1px solid #F6f6F6
933 | }
934 | #offers li:last-child {
935 | margin-right: 0;
936 | padding-right: 0;
937 | border-right: 0
938 | }
939 | .shopping_cart_button_line, .shopping_cart_button_line_bottom {
940 | border-top: 1px solid #CCC;
941 | margin-top: .5em;
942 | padding: .5em 1px 0;
943 | overflow: hidden;
944 | clear: both
945 | }
946 | .shopping_cart_button_line_bottom {
947 | margin-bottom: 7em
948 | }
949 | .shopping_cart_button_line:first-child {
950 | border-top: 0
951 | }
952 | div.header {
953 | font-size: 1.5em;
954 | line-height: 1;
955 | border-bottom: 1px solid #CCC;
956 | margin-bottom: .5em;
957 | padding-bottom: .5em;
958 | color: #000;
959 | text-shadow: 1px 1px 0 #FFF
960 | }
961 | .product_title {
962 | font-style: italic;
963 | margin-bottom: 1.5em
964 | }
965 | .product_price {
966 | float: left
967 | }
968 | .price {
969 | color: #666
970 | }
971 | .product_buy_link {
972 | float: right;
973 | line-height: 1
974 | }
975 | .ebook_formats, .safari_read_now, .whatisthis {
976 | font-size: .75em
977 | }
978 | .safari_read_now {
979 | float: right;
980 | line-height: 2
981 | }
982 | input[type=submit], input[type=text] {
983 | font-size: 1em;
984 | -moz-border-radius: .5em;
985 | -webkit-border-radius: .5em;
986 | border-radius: .5em;
987 | vertical-align: middle
988 | }
989 | input[type=text] {
990 | width: 140px;
991 | margin: .5em 0;
992 | padding: .5em .5em .3em;
993 | border: 1px solid #F1F1F0;
994 | color: #666;
995 | -moz-box-shadow: inset 3px 3px 2px #999;
996 | -webkit-box-shadow: inset 3px 3px 2px #999;
997 | box-shadow: inset 3px 3px 2px #999
998 | }
999 | input[type=text]:active, input[type=text]:focus, input[type=text]:hover {
1000 | background: #FFF;
1001 | color: #000;
1002 | outline: 0
1003 | }
1004 | input[type=submit] {
1005 | width: auto;
1006 | margin: 0;
1007 | padding: .28em .5em;
1008 | background: #906;
1009 | color: #FFF;
1010 | border: 0;
1011 | text-transform: uppercase;
1012 | cursor: pointer;
1013 | text-shadow: 1px 1px 0 #000;
1014 | -moz-box-shadow: 0 0 2px #999;
1015 | -webkit-box-shadow: 0 0 2px #999;
1016 | box-shadow: 0 0 2px #999
1017 | }
1018 | input[type=submit]:active, input[type=submit]:focus, input[type=submit]:hover {
1019 | color: #FFF;
1020 | background: #E106B2;
1021 | text-shadow: 1px 1px 0 #000;
1022 | -moz-box-shadow: 0 0 3px #333;
1023 | -webkit-box-shadow: 0 0 3px #333;
1024 | box-shadow: 0 0 3px #333
1025 | }
1026 | a.anchor {
1027 | color: #000
1028 | }
1029 | a.anchor:hover {
1030 | text-decoration: none
1031 | }
1032 | .figure {
1033 | padding-top: 1.5em
1034 | }
1035 | .caption, .figure {
1036 | display: block;
1037 | margin-bottom: 1.5em;
1038 | text-align: center
1039 | }
1040 | .figure * {
1041 | text-align: left
1042 | }
1043 | .caption {
1044 | font-size: .875em
1045 | }
1046 | .figure .caption {
1047 | text-align: center
1048 | }
1049 | .figure img {
1050 | margin-bottom: .5em;
1051 | max-width: 100%
1052 | }
1053 | .attribution::before {
1054 | content: ""
1055 | }
1056 | .sidebar ul {
1057 | font-size: .9em;
1058 | padding-left: 2em;
1059 | list-style-type: square
1060 | }
1061 | .disabled, .footer a, .footer a:active, .footer a:focus, .footer a:hover, .footer a:link, .footer a:visited, .info_bubble a, .info_bubble a:active, .info_bubble a:focus, .info_bubble a:hover, .info_bubble a:link, .info_bubble a:visited {
1062 | color: #BBB
1063 | }
1064 | .buybuttonswidget {
1065 | padding-bottom: 10px;
1066 | background: #FFF
1067 | }
1068 | @media (max-width:320px) {
1069 | .container {
1070 | max-width: 300px
1071 | }
1072 | #reviews {
1073 | display: none
1074 | }
1075 | }
1076 | @media (min-width:768px) and (max-width:1024px) {
1077 | .container {
1078 | max-width: 740px;
1079 | width: 740px
1080 | }
1081 | }
1082 | @media (min-width:1025px) {
1083 | .container {
1084 | width: 740px
1085 | }
1086 | }
--------------------------------------------------------------------------------
/ebook.md:
--------------------------------------------------------------------------------
1 |
2 | 文档篇
3 | ===
4 |
5 | 
6 |
7 | Pandoc
8 | ---
9 |
10 | > Pandoc是一个标记语言转换工具，可实现不同标记语言间的格式转换，堪称该领域中的“瑞士军刀”。
11 |
12 | 可以将 markdown、 reStructuredText、 textile、 HTML、 DocBook、 LaTeX、 MediaWiki markup、 TWiki markup、 OPML、 Emacs Org-Mode、 Txt2Tags、 Microsoft Word docx、 LibreOffice ODT、 EPUB、 Haddock markup
13 |
14 | 转化为
15 |
16 | XHTML、 HTML5、 以及HTML幻灯片Slidy， S5，或者DZSlides、Microsoft Word docx、 OpenOffice/LibreOffice ODT、 OpenDocument XML、EPUB、DocBook、 GNU TexInfo、 Groff man pages、LaTeX、 ConTeXt、 LaTeX Beamer slides、PDF via LaTeX、Markdown、 reStructuredText、 AsciiDoc、 MediaWiki markup、 Emacs Org-Mode、 Textile
17 |
18 | 上图
19 |
20 | 
21 |
22 | 我最常用的就是：将md转化为workd及pdf。我的毕业论文及之前的几本电子书都是这么做的，它是一个命令行工具，安装方式：
23 |
24 | - Windows: choco install pandoc
25 | - Ubuntu/CentOS/OpenSUSE: apt-get intall pandoc 或者 yum install pandoc
26 | - Mac OS: brew install pandoc
27 |
28 | 使用方式如下：
29 |
30 | pandoc fullstack.md -o fullstack.docx
31 |
32 | 如果要转为PDF，则需要另外的一个工具——LaTeX
33 |
34 | Graphviz
35 | ---
36 |
37 | > Graphviz （英文：Graph Visualization Software的缩写）是一个由AT&T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。
38 |
39 | 简单的来说，就是将代码转换为图形:
40 |
41 | 
42 |
43 | 它让我最惊讶的是DOT语言，简直是以我们平时的用法来定义的。上面的图形的代码类似于这样的：
44 |
45 | home->products->widgets
46 |
47 | 又是一个让人惊呆的黑科技，这才是人类应该使用的语言。它可以支持PostScript，PDF，SVG，PNG等一系列的格式，用法
48 |
49 | dot -T png phodal.dot -o phodal.png
50 |
51 | 简单、粗暴到没有朋友。
52 |
53 | ImageMagick
54 | ---
55 |
56 | > ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用，图片的旋转、组合，文本，直线，多边形，椭圆，曲线，附加到图片伸展旋转。
57 |
58 | 来自重点：可以支持超过两百多种格式。It can read and write images in a variety of formats (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, DPX, EXR, WebP, Postscript, PDF, and SVG.
59 |
60 | 它提供了一个命令行工具叫：``convert``，这可以自由地转换图片的形式，如：
61 |
62 | convert image.jpg image.png
63 |
64 | 还可以加各种效果，如：
65 |
66 | 
67 |
68 | 顺便做个介绍：上面的这个人叫瑞典模特儿莱娜·瑟德贝里，是在刊于1972年11月号《花花公子》杂志上的一张裸体插图照片的一部分。**她的脸部与裸露的肩部已经变成了事实上的工业标准。**
69 |
70 | 又是一个简单、粗暴到没有朋友的工具。
71 |
72 | TeX 和 Latex
73 | ---
74 |
75 | TeX是由是一个由美国计算机教授高德纳（Donald Ervin Knuth）编写的功能强大的排版软件。顺便推荐一下他写的一本书：《计算机程序设计艺术》。因为：
76 |
77 | > 高德纳最早开始自行编写TEX的原因是当时十分粗糙的排版水平已经影响到他的巨著《计算机程序设计艺术》的印刷质量。他以典型的黑客思维模式，最终决定自行编写一个排版软件：TEX。他原本以为他只需要半年时间，在1978年下半年就能完成，但最终他用了超过十年时间，直到1989年TEX才最终停止修改。
78 |
79 | 这直接让我想起Martin Fowler在写《领域特定语言》里好像也是用DSL。Tex的最大优点是可以写出下面的这本复杂的公式：
80 |
81 | 
82 |
83 | LaTeX 建立在 TeX 之上的工具，它在TeX的基础上大大改善了易用性。对了，如果只是一般的用途的话，就没有必要拿去装逼了~。
84 |
85 | 它也是工作于命令行上的工具。
86 |
87 | Jupyter Notebook
88 | ---
89 |
90 | Jupyter Notebook使用浏览器作为界面，其前身是Ipython Notebook，Ipython3.0之后新建为Jupyter项目。它支持Markdown、Python语言交互、R语言交互、图形显示、运行时间分析、LaTex公式，对于交互编程、数据分析和数据可视化非常有用。
91 |
92 | 
93 |
94 | **安装（使用pip）**
95 |
96 | $ pip install jupyter
97 |
98 | **运行**
99 |
100 | $ jupyter notebook
101 |
102 | 官网：[Jupyter](https://jupyter.org/)
103 |
104 |
105 | Gitbook
106 | ---
107 |
108 | Gitbook是一个命令行工具(node.js库)，可以把你的Markdown文件汇集成起来，生成一个静态网站，也可以输出为PDF等多种格式。
109 |
110 | 
111 |
112 | **安装（使用npm）**
113 |
114 | $ npm install gitbook-cli -g
115 |
116 | **使用**
117 |
118 | $ gitbook init ＃ 初始化书籍目录
119 | $ gitbook serve ＃ 运行
120 |
121 | 官网：[Gitbook](https://www.gitbook.com/)
122 |
123 | 图形工具篇
124 | ===
125 |
126 | 在上一篇《全栈工程师的百宝箱：黑魔法之文档篇》我们介绍了一些文档工具，今天让我来分享一下，我常用的一些图形工具。
127 |
128 | ## 流程图：Graphviz
129 |
130 | 说到流程图还是再次提及一下，我们之前说到的**Graphviz** 。
131 |
132 | > Graphviz （英文：Graph Visualization Software的缩写）是一个由AT&T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。
133 |
134 | 它的主要特点是代码生成图像，并且足够的简单。
135 |
136 | 在我的那个“Web Developer 成长路线图”(GitHub: [https://github.com/phodal/developer](https://github.com/phodal/developer))里，就是用这个工具生成下面这个复杂的图形。
137 |
138 | 
139 |
140 | 而其代码特别简单——和我们平时表达的手法是一样的，即：
141 |
142 | ```
143 | "包管理" -> "包发布" -> "自动部署"
144 | "CLI" -> "部署"
145 | "脚本语言(Bash,Perl,Ruby,Python etc)" -> "部署"
146 | "脚本语言(Bash,Perl,Ruby,Python etc)" -> "构建"
147 | "*nix" -> "软件编译" -> "部署"
148 | "构建" -> "软件编译"
149 | ```
150 |
151 | Graphviz有一个大的优点和弱点是：自动生成，导致画线的时候很出现出问题。接着，我们就来看看手动画线的例子。
152 |
153 | ## 流程图： Visio vs Dia vs OmnIGraffle
154 |
155 | 在Windows世界里，在这一类的工具里面最常见的算是Visio:
156 |
157 | 
158 |
159 | 遗憾的是，它并不支持在Mac OS上使用。而且，它并不在我购买的Office 365套装里。
160 |
161 | 在Mac世界里，最好的工具算是OmniGraffle，就是很贵——我们平时使用的是公司的Mac电脑，使用盗版软件是有法律风险的。
162 |
163 | 
164 |
165 |
166 | 在GNU/Linux世界里，我们使用Dia。
167 |
168 | > Dia 是开放源代码的流程图软件，是GNU计划的一部分，程序创立者是Alexander Larsson。Dia使用单一文件界面模式，类似于GIMP与Inkscape。 Dia将多种需求以模块化来设计，如流程图、网络图、电路图等。各模块之间的符号仍是可以通用的，并没有限制。
169 |
170 | 
171 |
172 | 顺便安利一下，我最喜欢的操作系统OpenSuSE——简洁、尾长、绿色。
173 |
174 | 
175 |
176 | OpenSuSE在KDE桌面下效果最赞了——因为KDE和OpenSuSE都是德国制造。总的来说，会比Debian系的Debian和Ubunt，及RetHat系的CentOS及Fedora稳定、漂亮。
177 |
178 | 令人遗憾的是这三个工具，我都用不了。Mac对X Windows的支持不是一般的差，于是我就需要别的替代工具。
179 |
180 | ## 在线流程图：Processon
181 |
182 | 这个工具还是相当好用，至少是在GxFxW内比较快——我之前使用过Creately、draw.io、Gliffy等等的一些工具，只是随着版图的扩展，很多地区都已经“xx”了。
183 |
184 | 
185 |
186 | 不过遗憾的是：他们没有给我广告费。
187 |
188 | > ProcessOn是一个在线协作绘图平台，为用户提供最强大、易用的作图工具！支持在线创作流程图、BPMN、UML图、UI界面原型设计、iOS界面原型设计等。
189 |
190 | 同样的，在我的那个“Developer进阶书单”（GitHub: [https://github.com/phodal/booktree](https://github.com/phodal/booktree))中，就是用这个工具画出规规矩矩的线。
191 |
192 | 
193 |
194 | 并且，它还是跨平台的。
195 |
196 | ## 各种图： Word和Excel
197 |
198 | 由于翻译和写书的需要，我成了一个Office 365订阅用户。于是发现在Word等一系列的Office工具中，自带了一个SmartArt的工具：
199 |
200 | 
201 |
202 | 可以画出很多很有意思的图形，比如：
203 |
204 | 
205 |
206 | 又或者是：
207 |
208 | 
209 |
210 | 分分钟就能画一个的节奏。
211 |
212 | ## 脑图： XMind
213 |
214 | 我想这个一般人都是知道的。
215 |
216 | > XMind思维导图软件被著名互联网媒体Lifehacker评选为“最佳头脑风暴和思维导图工具”及”最受欢迎的思维导图软件”。
217 |
218 | 它有一个很大的优点是使用了全球最先进的Eclipse RCP 软件架构，支持跨平台使用。它有一个很大的缺点是使用了全球最先进的Eclipse RCP 软件架构，导致了有点卡。
219 |
220 | 相比于流程图什么的，它只适合做脑图。
221 |
222 | 
223 |
224 | 如果你还在使用Eclipse，那么你应该试试Intellij IDEA了。
225 |
226 | ## 各种图：D3.js
227 |
228 | > D3.js（D3或Data-Driven Documents）是一个用动态图形显示数据的JavaScript库，一个数据可视化的工具。
229 |
230 | 与上面的工具相比，这个工具可能没有那么方便。但是，作为一个数据可视化工具，它不仅仅可以做出各种炫酷的图形。
231 |
232 | 还可以做出一个技能树：
233 |
234 | 
235 |
236 | 这个项目的GitHub见：[https://github.com/phodal/sherlock](https://github.com/phodal/sherlock)
237 |
238 | ## 地图：Leaflet
239 |
240 | > Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的JavaScript 库。
241 |
242 | 虽然它与上面的图形没有啥关系，但是它带了一个图字啊。与Google Map原生的API，或者OpenStreet相比，它最大的优点是对移动设备支持好。
243 |
244 | 并且，它也是一个可以根据数据（GEOJSON，地理数据）生成图形的工具。
245 |
246 | 
247 |
248 | Chrome插件篇
249 | ===
250 |
251 | Chrome DevTools
252 | ---
253 |
254 | 在我所用过的这些前端工具里，最常用、实用的就属Chrome自带的DevTools。通常情况下，我们只需要使用这个工具就可以完成大部分的工作了。
255 |
256 | 
257 |
258 | 每个前端工程师，都应该好好学习如何去使用Chrome DevTools。当然，这并不是一篇详细的关于Chrome DevTools的介绍——相关的内容足够写一本书了。除了正常的Debug功能，它可以模拟移动设备，模拟网络、模板分辨率、模拟，并在HTTP请求中带上相应的User Agent方便我们调试。
259 |
260 | Open SEO Stats
261 | ---
262 |
263 | 顾名思义这是一个SEO状态查询工具，它可以让我们查看网站的SEO相关信息。也是一个非常棒的反诈骗软件，因为一个好的网站的Alexa Traffic Rank、PR以及Pages indexed（索引数）等等都会相对较高。
264 |
265 | 
266 |
267 | 除了基本的SEO状态显示，它还提供了一些有效的工具，来帮助我们优化页面的SEO。如在Page Info里，会罗列出页面的相关标签是否完整。在Links Stats里，会帮我们检查页面的外链情况等等。
268 |
269 | PageSpeed Insights
270 | ---
271 |
272 | 这是Google的PageSpeed Insights的插件版（网页版见： [https://developers.google.com/speed/pagespeed/insights/](https://developers.google.com/speed/pagespeed/insights/)），一个非常棒的网页优化工具，有了它就可以让我们轻松对网页进行优化。我们所需要做的事情就是点击“分析”按钮，然后就坐等他分析完成。
273 |
274 | 如下就是我博客的一个分析结果：
275 |
276 | 
277 |
278 | 总体分数98分，看来我针对这个所说的东西进行优化的效果还不错。左边显示了我博客存在的一些问题，如：
279 |
280 | - 没有压缩CSS
281 | - 可以使用浏览器缓存
282 | - 需要指定缓存验证工具
283 | - 暂缓JavaScript解析
284 | - 将查询字符从静态资源中删除
285 |
286 | 等等的几个问题——这些已经都是小问题了。所以他们的重要等级是“低”，一般来说如果有一个等级是“高”整个评分就会特别低。
287 |
288 | 除此，我们还可以使用命令行工具来对你的网页进行测试。
289 |
290 | [https://github.com/addyosmani/psi](https://github.com/addyosmani/psi)
291 |
292 | 安装：
293 |
294 | ``` shell
295 | $ npm install --global psi
296 | ```
297 |
298 | 只需要执行下面的命令即可：
299 |
300 | ``` shell
301 | psi http://www.example.com/
302 | ```
303 |
304 | 如我的博客的结果:
305 |
306 | ``` shell
307 | --------------------------------------------------------
308 |
309 | URL: phodal.com
310 | Strategy: mobile
311 | Speed: 90
312 | Usability: 96
313 |
314 | CSS size | 30.04 kB
315 | HTML size | 11.8 kB
316 | Image size | 41.08 kB
317 | JavaScript size | 28.07 kB
318 | CSS resources | 1
319 | Hosts | 2
320 | JS resources | 1
321 | Resources | 5
322 | Static resources | 3
323 | Total size of request bytes sent | 695 B
324 |
325 | Leverage browser caching | 1.5
326 | Main resource server response time | %
327 | ```
328 |
329 | 再依据不同的结果对网页进化优化，不过它有一个前提是它并不适合SPA（单页面）应用。
330 |
331 | Postman
332 | ---
333 |
334 | 我相信这个软件，搞过Web开发的人都听过。
335 |
336 | 
337 |
338 | 它是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。总之，就是我们可以在浏览器上执行GET、POST等等的测试。在调试远程API的时候很有用，一般在调试本地API的时候，我都是用jQuery的。
339 |
340 | 同样的，你仍然可以使用命令行工具来测试它，即[Newman](https://github.com/postmanlabs/newman)。由于其没有UI，它可以运行在CI上，并编写相应的UI测试。
341 |
342 | XPath Helper
343 | ---
344 |
345 | 这是我在写UI自动化测试的时候使用的工具，由于那是一个遗留项目，所以我们都对整体UI的布局都不是特别熟悉。并且由于业务推进的关系，我们并没有足够的时候去解决这个问题，于是就开始使用这个工具来完成工作了。
346 |
347 | 在编写的时候我们会在Console用jQuery去选定元素，然后再将其转换为XPath。接着在这个工具上尝试，如下图显示：
348 |
349 | 
350 |
351 | 最后，我们将会写到代码中。
352 |
353 | ObservePoint Tag Debugger
354 | ---
355 |
356 | 这是一个可以用于调试各种Web分析工具的插件，它可以用于分析SiteCat、Google Analytics、WebTrend等发出的事件请求，并解析其数据。
357 |
358 | 
359 |
360 | Capture Webpage Screenshot Entirely
361 | ---
362 |
363 | 这是一个截图工具，可以用于截取页面长图。
364 |
365 | 外设篇
366 | ===
367 |
368 | 机械键盘
369 | ---
370 |
371 | 地球人都知道，我就不说了。
372 |
373 | 如果你问我用的是什么键盘：
374 |
375 | - Ducky 9008s2，大学的时候买的，家里用，紫色
376 | - Ducky DK2087 G2，只要399，公司用的
377 |
378 | 机械键盘手托
379 | ---
380 |
381 | 很多人光有个机械键盘，但是却没有一个与之对应的手托，我觉得还是有些可惜的。机械键盘都有着相当高的高度，这时手放上去就有些尴尬。
382 |
383 | 
384 |
385 |
386 | 自定义按钮的鼠标
387 | ---
388 |
389 | 对于程序员来说，复制和粘贴是很常用的操作，如果我们有一个对应的自定义按钮的鼠标的话，我们就可以光用鼠标来进行复制和粘贴了。
390 |
391 | 
392 |
393 | 鼠标线夹
394 | ---
395 |
396 | 我经常拿我的Macbook去玩《文明》系列的游戏，这时候我就需要鼠标了，也需要用鼠标线夹来保证我的移动不会受阻。
397 |
398 | 笔记本支架折叠
399 | ---
400 |
401 | 如果选不了一个好的椅子，那么我们就需要一个好的支架来撑起电脑到一个合适的高度。
402 |
403 | 
404 |
405 | Kindle
406 | ---
407 |
408 | Kindle，看书的人都知道。
409 |
410 | Ops
411 | ======
412 |
413 | Nginx Pagespeed
414 | ---
415 |
416 | > ngx_pagespeed 是 Nginx 的一个扩展模块，主要的功能是针对前端页面而进行服务器端的优化，对前端设计人员来说，可以省去优化css、js以及图片的过程。ngx_pagespeed对nginx自身负载能力的提升基本是看不到的，甚至会因为进行服务器端的优化而使系统增加负载；但从减少客户请求数的角度去看，牺牲部分服务器性能还是值得的
417 |
418 | 主要功能如下：
419 |
420 | - 图像优化：剥离元数据、动态调整，重新压缩
421 | - CSS和JavaScript压缩、合并、级联、内联
422 | - 小资源内联
423 | - 推迟图像和JavaScript加载
424 | - 对HTML重写、压缩空格、去除注释等
425 | - 提升缓存周期
426 | - 以及其他config_filters
427 |
428 | Boom
429 | ---
430 |
431 | Boom是一个用Go语言实现的压力测试工具，就是和Apache Bench类似的工具。它提供了一个很有意思的UI，这就是我为什么推荐他的原因了：
432 |
433 | ```
434 | 1000 / 1000 Boooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo! 100.00 %
435 |
436 | Summary:
437 | Total: 1.9052 secs.
438 | Slowest: 0.2054 secs.
439 | Fastest: 0.0111 secs.
440 | Average: 0.1817 secs.
441 | Requests/sec: 524.8813
442 | Total Data Received: 5459000 bytes.
443 | Response Size per Request: 5459 bytes.
444 |
445 | Status code distribution:
446 | [200] 1000 responses
447 |
448 | Response time histogram:
449 | 0.011 [1] |
450 | 0.031 [10] |
451 | 0.050 [10] |
452 | 0.069 [11] |
453 | 0.089 [11] |
454 | 0.108 [10] |
455 | 0.128 [11] |
456 | 0.147 [11] |
457 | 0.167 [11] |
458 | 0.186 [295] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
459 | 0.205 [619] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
460 |
461 | Latency distribution:
462 | 10% in 0.1764 secs.
463 | 25% in 0.1841 secs.
464 | 50% in 0.1892 secs.
465 | 75% in 0.1942 secs.
466 | 90% in 0.2011 secs.
467 | 95% in 0.2024 secs.
468 | 99% in 0.2038 secs.
469 | ```
470 |
471 | GoAccess
472 | ---
473 |
474 | > GoAccess是一款开源、实时，运行在命令行终端下的web日志分析工具。该工具提供快速、多样的HTTP状态统计，可以令管理员不再纠结于统计各类数据，和繁杂的指令以及一大堆管道/正则表达式说byebye。
475 |
476 | 这生成的风格是这样的：
477 |
478 | 
479 |
480 |
481 | 它可以轻松统计出访问概况、动态页面请求、静态页面请求（如图片、样式表、脚本等）、访客排名，访客使用的操作系统，访客使用的浏览器，来路域名，404 错误，搜索爬虫，搜索关键词等等。
482 |
483 | 而，我们所要做的只需要运行：
484 |
485 | ```shell
486 | goaccess -f access.log
487 | ```
488 |
489 | Fabric
490 | ---
491 |
492 | 因为我的博客是基于Django框架而开发的，我偏向于使用Python作为开发语言，所以我需要选择了Fabric作为运维工具。
493 |
494 |
495 | > Fabric 是一个 Python (2.5-2.7) 库和命令行工具，用来流水线化执行 SSH以部署应用或系统管理任务。
496 |
497 | 更具体地说，Fabric 是：
498 |
499 | - 一个让你通过 命令行 执行 任意 Python 函数 的工具；
500 | - 一个让通过 SSH 执行 Shell 命令更加 容易 和 蟒样 的子程序库（建立于一个更低层次的库）。
501 |
502 | Docker
503 | ---
504 |
505 | > Docker是一个开源的引擎，可以轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器。
506 |
507 | Jenkins
508 | ---
509 |
510 | > Jenkins是一个用Java编写的开源的持续集成工具。Jenkins提供了软件开发的持续集成服务。它运行在Servlet容器中（例如Apache Tomcat）。它支持软件配置管理（SCM）工具，可以执行基于Apache Ant和Apache Maven的项目，以及任意的Shell脚本和Windows批处理命令。
511 |
512 | 除了将Jenkins有于持续集成环境外，我们还可以使用Jenkins来完成一些自动化的部署工作。
513 |
514 |
515 | 自动化
516 | ===
517 |
518 | Selenium
519 | ---
520 |
521 | > Selenium 是一个用于 Web 应用程序测试的工具。Selenium 的测试用例直接运行在浏览器中，就像真正的用户在操作一样。与主流的 web 自动化测试框架还有 QTP，基于 Ruby 的 WATIR 等相比，Selenium 支持 IE、Mozilla Firefox 多种浏览器，支持自动录制脚本以及 Java、c#、ruby 等多种运行语言的自动生成，用例制作快捷，运行快速。相比起来 Selenium 要显得更为灵活实用。
522 |
523 | 硬件篇
524 | ===
525 |
526 | Raspberry Pi
527 | ---
528 |
529 | > Raspberry Pi 是一款基于Linux的单板机电脑。它由英国的树莓派基金会所开发，目的是以低价硬件及自由软件促进学校的基本计算机科学教育。
530 |
531 | Arduino
532 | ---
533 |
534 | > Arduino，是一个开放源代码的单芯片微控制器，它使用了Atmel AVR单片机，采用了开放源代码的软硬件平台，建构于简易输出/输入（simple I/O）界面板，并且具有使用类似Java、C语言的Processing/Wiring开发环境。
535 |
536 | 我拥有下面的一些开发板：
537 |
538 | - Arduino Uno，玩过都知道。通用版，可以使用一系列强大的扩展板。
539 | - Arduino Yun，带WiFi功能的Arduino。
540 | - Arduino ADK，可以使不支持USB Host功能的Android设备也可以和其它USB设备
541 | - Arduino Lilypad，主要用于可穿戴领域。
542 |
543 | NodeMCU
544 | ---
545 |
546 | > NodeMCU,是一个开源的物联网平台。 它使用Lua脚本语言编程。该平台基于eLua 开源项目,底层使用ESP8266 sdk 0.9.5版本。该平台使用了很多开源项目, 例如 lua-cjson, spiffs[5]. NodeMCU包含了可以运行在 esp8266 Wi-Fi SoC芯片之上的固件,以及基于ESP-12模组的硬件。
547 |
548 |
549 |
550 | API
551 | ===
552 |
553 | Moco
554 | ---
555 |
556 | > Moco是一个简单搭建模拟服务器的程序库/工具，它是一个简单搭建 stub 的框架，主要用于测试和集成。
557 |
558 | 这个工具的目的主要是针对于前后端分离的Web应用来说，特别是基于HTTP协议的集成——Web Service、REST等。
559 |
560 | 不过如果你们不写测试的话，这个工具就没啥用。
561 |
562 | Swagger
563 | ---
564 |
565 | > Swagger是一种和语言无关的规范和框架，用于定义服务接口，主要用于描述RESTful的API。它专注于为API创建优秀的文档和客户端库。支持Swagger的API可以为API方法生成交互式的文档，让用户可以通过以可视化的方式试验，查看请求和响应、头文件和返回代码，从而发现API的功能。它本身就非常强大，但是Swagger框架还支持为多种流行的语言——包括JavaScript、Python、Ruby、Java、Scala等等——生成客户端代码。
566 |
567 | CLI
568 | ===
569 |
570 | tree
571 | ---
572 |
573 | > tree命令可以以树形结构显示文件目录结构，它非常适合于我们给别人介绍我们的文件目录的组成框架，同时该命令使用适当的参数也可以将命令结果输出到文本文件中。
574 |
575 | 这个命令非常适用于我们写作的时候用的，如下就是toolbox下的chapters目录：
576 |
577 | ```shell
578 | chapters
579 | ├── api.md
580 | ├── backend.md
581 | ├── chrome-plugins.md
582 | ├── cli.md
583 | ├── devices.md
584 | ├── documents.md
585 | ├── graphics.md
586 | ├── hardware.md
587 | └── ops.md
588 |
589 | 0 directories, 9 files
590 | ```
591 |
592 | sl
593 | ---
594 |
595 | 这是一个神奇的命令行工具，由于两个手的手速不致，我经常将ls敲成sl。而在Ubuntu上则会提示你，你是不是要安装sl，于是我就安装了。然后：
596 |
597 | 
598 |
599 | 每次我敲错命令的时候，都会有这个神奇的火车头出现，火车头动的期间就只能等它完成。每次这个时候，就说明我们需要休息。
600 |
601 | cURL
602 | ---
603 |
604 | cURL利用URL语法在命令行方式下工作的开源文件传输工具。它是一个很常用的命令，也可以支持文件上传和下载。
605 |
606 | ``` shell
607 | curl -I -s -A 'Googlebot' www.phodal.com
608 | HTTP/1.1 200 OK
609 | Server: mokcy/0.17.9
610 | Content-Type: text/html; charset=utf-8
611 | Connection: keep-alive
612 | Vary: Accept-Encoding
613 | Vary: Accept-Language, Cookie
614 | Content-Language: en
615 | X-UA-Compatible: IE=Edge,chrome=1
616 | Date: Thu, 09 Apr 2015 14:39:11 GMT
617 | X-Page-Speed: Powered By Phodal
618 | Cache-Control: max-age=0, no-cache
619 | ```
620 |
621 | ``` shell
622 | curl --data "_method=PUT&led1=1&sensors1=22&sensors2=12&temperature=14" http://b.phodal.com/athome/1
623 | ```
624 |
625 | Backend
626 | ===
627 |
628 | Spring MVC
629 | ---
630 |
631 | > Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架。
632 |
633 | Spring Boot
634 | ---
635 |
636 | > Spring Boot 的目的在于快速创建可以独立运行的 Spring 应用。通过 Spring Boot 可以根据相应的模板快速创建应用并运行。Spring Boot 可以自动配置 Spring 的各种组件，并不依赖代码生成和 XML 配置文件。Spring Boot 可以大大提升使用 Spring 框架时的开发效率。
637 |
638 | Laravel
639 | ---
640 |
641 | > Laravel是一套简洁、优雅的PHP Web开发框架。
642 |
643 | Django
644 | ---
645 |
646 | > Django是一个开放源代码的Web应用框架，由Python写成。采用了MVC的软件设计模式，即模型M，视图V和控制器C。
647 |
648 | 在我的博客，以及我使用的一些需要用户认证、CMS功能等等的系统里，我优先使用这个框架来完成任务。它还拥有一套设计得很不错的ORM系统，并且其还隔离了不同的系统底层。
649 |
650 | Flask
651 | ---
652 |
653 | > Flask是使用Python语言编写的轻量级的WebWeb应用框架。基于Werkzeug WSGI工具箱和Jinja2 模板引擎。
654 |
655 | 与Django的很大不同之处在于Flask被称之为微框架，它只有简单的核心，而其他的功能需要使用扩展来完成。这就意味着，当我们可以高度定制我们的系统，只选择我们需要的功能，并通过扩展来完成。
656 |
657 | Express
658 | ---
659 |
660 | > Express 是一个基于Node.js 平台的极简、灵活的web 应用开发框架，它提供一系列强大的特性，帮助你创建各种Web 和移动设备应用。
661 |
662 | WordPress
663 | ---
664 |
665 | > WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中有超过16.7%的网站使用WordPress。到了2011年8月，约22%的新网站采用了WordPress。WordPress是目前因特网上最流行的博客系统。
666 |
667 | Ruby On Rails
668 | ---
669 |
670 | > 是一个使用Ruby语言写的开源Web应用框架，它是严格按照MVC结构开发的。它努力使自身保持简单，来使实际的应用开发时的代码更少，使用最少的配置。
671 |
672 |
673 | 科学
674 | ===
675 |
676 | Octave
677 | ---
678 |
679 | > Octave是一个旨在提供与Matlab语法兼容的开放源代码科学计算及数值分析的工具；
680 |
681 | Numpy
682 | ---
683 |
684 | > NumPy是Python语言的一个扩充程序库。支持高级大量的维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库。NumPy的前身Numeric最早是由Jim Hugunin与其它协作者共同开发，2005年，Travis Oliphant在Numeric中结合了另一个同性质的程序库Numarray的特色，并加入了其它扩展而开发了NumPy。NumPy为开放源代码并且由许多协作者共同维护开发。
685 |
686 | Processing
687 | ---
688 |
689 | > Processing是一种开源编程语言，专门为电子艺术和视觉交互设计而创建，其目的是通过可视化的方式辅助编程教学，并在此基础之上表达数字创意。
690 |
691 | 它除了制作一些酷炫的动画之外，其简单的GUI编程，还可以用于硬件端的上位机编写。
692 |
693 | 图像处理
694 | ===
695 |
696 | GIMP
697 | ---
698 |
699 | > GIMP (GNU Image Manipulation Program，GNU图形处理程序)是一个自由的专业图片处理软件，以GPL（GNU General Public Licence，GNU 通用公共许可协议）许可发布。 它能够用于点击数码位图，比如数码照片、扫描的图片。尽管GIMP也能够编辑矢量图形，比如SVG矢量图形，但是相对而言Inkscape、Corel Draw或Adobe Illustrator这些专门的矢量图软件的功能会更强。（因此人们通常将Inkscape与GIMP配合使用，得到更强大的工具组合）作为全功能的图像处理软件，GIMP对此领域内的专业软件如Photoshop、Corel Paint Shop Pro产生了强有力的挑战，这主要归功于GIMP众多出色的功能特性：多图层，图形缩放、调整，裁剪，颜色操作，支持众多文件格式等等。
700 |
701 | INKSCAPE
702 | ---
703 |
704 | > Inkscape 是开源的矢量图形编辑软件，与 Illustrator、Freehand、CorelDraw、Xara X 等软件很相似，它使用 W3C 标准的 Scalable Vector Graphics (SVG) 文件格式，支持包括形状、路径、文本、标记、克隆、alpha 混合、变换、渐变、图案、组合等 SVG 特性。它也支持创作共用的元数据、节点编辑、图层、复杂的路径运算、位图描摹、文本绕路径、流动文本、直接编辑 XML 等。它可以导入 JPEG、PNG、TIFF 等格式，并输出为 PNG 和多种矢量格式。
705 |
706 |
707 | ImageMagick
708 | ---
709 |
710 | > 它可以以各种格式读取和写入图像（超过200种），包括PNG，JPEG，JPEG-2000，GIF，TIFF，DPX，EXR，WebP，Postscript，PDF和SVG。使用 ImageMagick 调整大小，翻转，镜像，旋转，扭曲，剪切和变换图像，调整图像颜色，应用各种特殊效果，或绘制文本，线条，多边形，椭圆和Bézier曲线。
711 |
712 | 它可以支持以下的特性[^features]：
713 |
714 | - 格式转换：从一种格式转换成图像到另一个（例如 PNG 转 JPEG）
715 | - 变换：缩放，旋转，裁剪，翻转或修剪图像
716 | - 透明度：使图像的部分变为透明
717 | - 附加：添加形状或一帧到图像
718 | - 装饰：添加边框或帧图像
719 | - 特效：模糊，锐化，阈值，或色彩图像动画：创建一个从GIF动画图像组序列
720 | - 文本及评论：插入描述或艺术图像中的文字
721 | - 图像识别：描述的格式和图像性能
722 | - 综合：重叠了一个又一个的图像
723 | - 蒙太奇：并列图像画布上的图像缩略图
724 | - 电影支持：读写图像的共同使用的数字电影工作方式
725 | - 图像计算器：应用数学表达式的图像或图像通道
726 | - 离散傅立叶变换：实现正向和反向的DFT。
727 | - 高动态范围图像：准确地表现了从最明亮的阳光直射到最深最黑暗的阴影找到真正的幕后广泛的强度水平
728 | - 加密或解密图片：转换成不懂乱码，然后再返回普通图像
729 | - 虚拟像素支持：方便以外区域的图像像素
730 | - 大图像支持：读，过程，或写mebi和吉比像素的图像尺寸
731 | - 执行：ImageMagick的是线程安全的，利用内部算法OpenMP的功能及快速的双核和四核处理器技术提供窗口优势
732 | - 异构分布式处理：某些算法可以在跨越的CPU，GPU，以及其他处理器组成的异构平台音乐会执行速度提高。
733 |
734 | 它可以支持 Linux、Windows、 Mac Os X、 iOS、 Android OS 等等的系统。
735 |
736 | 如果说 Pandoc 里文档界的瑞士军刀，那么 ImageMagick 就是图形界的瑞士军刀。
737 |
738 | 上周在为 Growth 制作插图的时候，需要：1. 合并不同的图像；2. 对图片进行缩放。考虑到图片的数量差不多有 30 张左右，我决定要找一个工具。。。
739 |
740 | 这个时候就找到了 ImageMagick 中的几个命令，它居然可以完成我大部分的功能。
741 |
742 | ### 合并图像
743 |
744 | 最开始的时候，我是想合并几张图片，成如下的样子：
745 |
746 | 
747 |
748 | 按照我的习惯，我会打开 Photoshop，然后计算一次合成的图片的宽度。在我合成了两三张图片之后，我就累了。
749 |
750 | 搜索过后，便发现了 IMageMagick 的 ``convert`` 命令，只需要简单地执行一下：
751 |
752 | ```
753 | convert skilltree-1.png skilltree-2.png skilltree-3.png +append skilltree.png
754 | ```
755 |
756 | 而 ``convert`` 这个命令，其所拥有的参数选项居然有 253 个，我是我在执行下面的命令后统计到的：
757 |
758 | ```
759 | convert --help | grep " -"|wc -l
760 | ```
761 |
762 | 它可以用来转换图像格式，调整图像大小、模糊、裁剪、去斑、抖动、绘图、翻转、加入、重新采样等等。它的功能相当的丰富，以至于我联想到我只需要有这个命令 + 一个简单的 UI，我就可以做出一个 P 图软件了。
763 |
764 | ### 批量缩放大小
765 |
766 | 在合并图像之前，我需要对图片进行缩放。同样的，我找到的工具也是 ImageMagick 中的：
767 |
768 | ```
769 | mogrify -geometry x600 *.png
770 | ```
771 |
772 | 这里的 x600 即是图片的高度，上面的命令会将所有的 png 缩放到高度为 600 的图片。除了缩放，它还可以轻松地转换图形的格式：
773 |
774 | ```
775 | mogrify -format jpg *.png
776 | ```
777 |
778 | 即可以将所有的 jpg 转为 png。
779 |
780 | [^features]: 翻译源自 https://imagemagick.cn/
781 |
782 |
--------------------------------------------------------------------------------
/epub.css:
--------------------------------------------------------------------------------
1 | html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, strong, b, u, i, pre, code, del, strike, abbr, acronym, address, q, cite, blockquote, big, small, sub, sup, tt, var, center, img, dfn, ins, kbd, s, samp, dl, dt, dd, ol, ul, li, fieldset, legend, label, table, caption, tbody, tfoot, thead, tr, th, td {
2 | margin: 0;
3 | padding: 0;
4 | border: 0;
5 | outline: 0;
6 | font-size: 100%;
7 | vertical-align: baseline;
8 | background: transparent;
9 | }
10 | @page {
11 | margin: 5px;
12 | }
13 | p {
14 | margin-bottom: 9px;
15 | line-height: 1.4;
16 | }
17 | a {
18 | color: #0069d6;
19 | }
20 | a:hover {
21 | color: #0050a3;
22 | text-decoration: none;
23 | }
24 | a img {
25 | border: none;
26 | }
27 | h1, h2, h3, h4, h5, h6 {
28 | color: #404040;
29 | line-height: 1.5;
30 | margin: 1em 0 0.5em;
31 | -webkit-hyphens: none;
32 | hyphens: none;
33 | adobe-hyphenate: none;
34 | }
35 | h1 {
36 | font-size: 220%;
37 | margin-bottom: 1.5em;
38 | }
39 | h2 {
40 | font-size: 190%;
41 | }
42 | h3 {
43 | font-size: 160%;
44 | }
45 | h4 {
46 | font-size: 140%;
47 | }
48 | h5 {
49 | font-size: 130%;
50 | }
51 | h6 {
52 | font-size: 120%;
53 | }
54 | hr {
55 | margin: 0 0 19px;
56 | border: 0;
57 | border-bottom: 1px solid #ccc;
58 | }
59 | blockquote {
60 | padding: 13px 13px 21px 15px;
61 | margin-bottom: 18px;
62 | font-family: georgia, serif;
63 | font-style: italic;
64 | }
65 | blockquote:before {
66 | content: "\201C";
67 | font-size: 300%;
68 | margin-left: -10px;
69 | font-family: serif;
70 | color: #eee;
71 | }
72 | blockquote p {
73 | font-size: 120%;
74 | margin-bottom: 0;
75 | font-style: italic;
76 | }
77 | code, pre {
78 | font-family: monospace;
79 | }
80 | code {
81 | background-color: #fee9cc;
82 | color: rgba(0, 0, 0, 0.75);
83 | padding: 1px 3px;
84 | -webkit-border-radius: 5px;
85 | border-radius: 5px;
86 | font-size: 85%;
87 | }
88 | pre {
89 | display: block;
90 | padding: 14px;
91 | margin: 0 0 18px;
92 | font-size: 85%;
93 | line-height: 1.3;
94 | border: 1px solid #d9d9d9;
95 | white-space: pre-wrap;
96 | word-wrap: break-word;
97 | -webkit-hyphens: none;
98 | hyphens: none;
99 | adobe-hyphenate: none;
100 | }
101 | pre code {
102 | background-color: #fff;
103 | color: #737373;
104 | padding: 0;
105 | }
106 | code.sourceCode span.kw {
107 | color: #007020;
108 | font-weight: bold;
109 | }
110 | code.sourceCode span.dt {
111 | color: #902000;
112 | }
113 | code.sourceCode span.dv {
114 | color: #40a070;
115 | }
116 | code.sourceCode span.bn {
117 | color: #40a070;
118 | }
119 | code.sourceCode span.fl {
120 | color: #40a070;
121 | }
122 | code.sourceCode span.ch {
123 | color: #4070a0;
124 | }
125 | code.sourceCode span.st {
126 | color: #4070a0;
127 | }
128 | code.sourceCode span.co {
129 | color: #60a0b0;
130 | font-style: italic;
131 | }
132 | code.sourceCode span.ot {
133 | color: #007020;
134 | }
135 | code.sourceCode span.al {
136 | color: red;
137 | font-weight: bold;
138 | }
139 | code.sourceCode span.fu {
140 | color: #06287e;
141 | }
142 | code.sourceCode span.re {
143 | }
144 | code.sourceCode span.er {
145 | color: red;
146 | font-weight: bold;
147 | }
148 | body {
149 | font-family: serif;
150 | }
--------------------------------------------------------------------------------
/images/cli/sl-tool.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/cli/sl-tool.jpg
--------------------------------------------------------------------------------
/images/devices/nexstand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/devices/nexstand.jpg
--------------------------------------------------------------------------------
/images/devices/shoutuo.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/devices/shoutuo.jpeg
--------------------------------------------------------------------------------
/images/devices/steelseries.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/devices/steelseries.jpg
--------------------------------------------------------------------------------
/images/documents/Jupyter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/documents/Jupyter.png
--------------------------------------------------------------------------------
/images/documents/aocp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/documents/aocp.jpg
--------------------------------------------------------------------------------
/images/documents/documents.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/documents/documents.png
--------------------------------------------------------------------------------
/images/documents/formular.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/documents/formular.jpg
--------------------------------------------------------------------------------
/images/documents/gausisan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/documents/gausisan.jpg
--------------------------------------------------------------------------------
/images/documents/gitbook.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/documents/gitbook.jpg
--------------------------------------------------------------------------------
/images/documents/graphviz-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/documents/graphviz-example.png
--------------------------------------------------------------------------------
/images/documents/pandoc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/documents/pandoc.png
--------------------------------------------------------------------------------
/images/fe-plugins/dev-tool.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/fe-plugins/dev-tool.jpg
--------------------------------------------------------------------------------
/images/fe-plugins/observerPoint.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/fe-plugins/observerPoint.jpg
--------------------------------------------------------------------------------
/images/fe-plugins/pagespeed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/fe-plugins/pagespeed.jpg
--------------------------------------------------------------------------------
/images/fe-plugins/postman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/fe-plugins/postman.jpg
--------------------------------------------------------------------------------
/images/fe-plugins/seo-stats.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/fe-plugins/seo-stats.jpg
--------------------------------------------------------------------------------
/images/fe-plugins/xpath.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/fe-plugins/xpath.jpg
--------------------------------------------------------------------------------
/images/graphics/BookTree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/BookTree.png
--------------------------------------------------------------------------------
/images/graphics/banner_index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/banner_index.png
--------------------------------------------------------------------------------
/images/graphics/dia_screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/dia_screenshot.png
--------------------------------------------------------------------------------
/images/graphics/growth-lob.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/growth-lob.jpg
--------------------------------------------------------------------------------
/images/graphics/omnigraffle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/omnigraffle.jpg
--------------------------------------------------------------------------------
/images/graphics/opensuse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/opensuse.jpg
--------------------------------------------------------------------------------
/images/graphics/program_road.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/program_road.png
--------------------------------------------------------------------------------
/images/graphics/sherlock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/sherlock.png
--------------------------------------------------------------------------------
/images/graphics/smart-art.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/smart-art.png
--------------------------------------------------------------------------------
/images/graphics/tlok.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/tlok.jpg
--------------------------------------------------------------------------------
/images/graphics/tree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/tree.png
--------------------------------------------------------------------------------
/images/graphics/unemployment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/unemployment.png
--------------------------------------------------------------------------------
/images/graphics/visio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/visio.png
--------------------------------------------------------------------------------
/images/graphics/vmap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/graphics/vmap.jpg
--------------------------------------------------------------------------------
/images/ops/goaccess-dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/toolbox/ba6427b040d9825dfb596caacb1de3936f5bdd84/images/ops/goaccess-dashboard.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
一个全栈工程师的工具箱 –
8 |
9 |
10 |
13 |
14 |
15 |
16 |
一个全栈工程师的工具箱
17 |
By Phodal (Follow Me: 微博 、知乎 、SegmentFault )
18 |
19 |
20 |
21 |
GitHub: 一个全栈工程师的工具箱
22 |
23 |
24 |
我的其他电子书：
25 |
33 |
34 |
35 |
微信公众号
36 |
37 |
38 |
39 |
40 |
124 |
125 |
文档篇
126 |
127 | Documents
128 |
129 |
Pandoc
130 |
131 | Pandoc是一个标记语言转换工具，可实现不同标记语言间的格式转换，堪称该领域中的“瑞士军刀”。
132 |
133 |
可以将 markdown、 reStructuredText、 textile、 HTML、 DocBook、 LaTeX、 MediaWiki markup、 TWiki markup、 OPML、 Emacs Org-Mode、 Txt2Tags、 Microsoft Word docx、 LibreOffice ODT、 EPUB、 Haddock markup
134 |
转化为
135 |
XHTML、 HTML5、 以及HTML幻灯片Slidy， S5，或者DZSlides、Microsoft Word docx、 OpenOffice/LibreOffice ODT、 OpenDocument XML、EPUB、DocBook、 GNU TexInfo、 Groff man pages、LaTeX、 ConTeXt、 LaTeX Beamer slides、PDF via LaTeX、Markdown、 reStructuredText、 AsciiDoc、 MediaWiki markup、 Emacs Org-Mode、 Textile
136 |
上图
137 |
138 | Pandoc
139 |
140 |
我最常用的就是：将md转化为workd及pdf。我的毕业论文及之前的几本电子书都是这么做的，它是一个命令行工具，安装方式：
141 |
142 | Windows: choco install pandoc
143 | Ubuntu/CentOS/OpenSUSE: apt-get intall pandoc 或者 yum install pandoc
144 | Mac OS: brew install pandoc
145 |
146 |
使用方式如下：
147 |
pandoc fullstack.md -o fullstack.docx
148 |
如果要转为PDF，则需要另外的一个工具——LaTeX
149 |
Graphviz
150 |
151 | Graphviz （英文：Graph Visualization Software的缩写）是一个由AT&T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。
152 |
153 |
简单的来说，就是将代码转换为图形:
154 |
155 | Graphviz
156 |
157 |
它让我最惊讶的是DOT语言，简直是以我们平时的用法来定义的。上面的图形的代码类似于这样的：
158 |
home->products->widgets
159 |
又是一个让人惊呆的黑科技，这才是人类应该使用的语言。它可以支持PostScript，PDF，SVG，PNG等一系列的格式，用法
160 |
dot -T png phodal.dot -o phodal.png
161 |
简单、粗暴到没有朋友。
162 |
ImageMagick
163 |
164 | ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用，图片的旋转、组合，文本，直线，多边形，椭圆，曲线，附加到图片伸展旋转。
165 |
166 |
来自重点：可以支持超过两百多种格式。It can read and write images in a variety of formats (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, DPX, EXR, WebP, Postscript, PDF, and SVG.
167 |
它提供了一个命令行工具叫：convert，这可以自由地转换图片的形式，如：
168 |
convert image.jpg image.png
169 |
还可以加各种效果，如：
170 |
171 | ImageMagick
172 |
173 |
顺便做个介绍：上面的这个人叫瑞典模特儿莱娜·瑟德贝里，是在刊于1972年11月号《花花公子》杂志上的一张裸体插图照片的一部分。她的脸部与裸露的肩部已经变成了事实上的工业标准。
174 |
又是一个简单、粗暴到没有朋友的工具。
175 |
TeX 和 Latex
176 |
TeX是由是一个由美国计算机教授高德纳（Donald Ervin Knuth）编写的功能强大的排版软件。顺便推荐一下他写的一本书：《计算机程序设计艺术》。因为：
177 |
178 | 高德纳最早开始自行编写TEX的原因是当时十分粗糙的排版水平已经影响到他的巨著《计算机程序设计艺术》的印刷质量。他以典型的黑客思维模式，最终决定自行编写一个排版软件：TEX。他原本以为他只需要半年时间，在1978年下半年就能完成，但最终他用了超过十年时间，直到1989年TEX才最终停止修改。
179 |
180 |
这直接让我想起Martin Fowler在写《领域特定语言》里好像也是用DSL。Tex的最大优点是可以写出下面的这本复杂的公式：
181 |
182 | formular
183 |
184 |
LaTeX 建立在 TeX 之上的工具，它在TeX的基础上大大改善了易用性。对了，如果只是一般的用途的话，就没有必要拿去装逼了~。
185 |
它也是工作于命令行上的工具。
186 |
Jupyter Notebook
187 |
Jupyter Notebook使用浏览器作为界面，其前身是Ipython Notebook，Ipython3.0之后新建为Jupyter项目。它支持Markdown、Python语言交互、R语言交互、图形显示、运行时间分析、LaTex公式，对于交互编程、数据分析和数据可视化非常有用。
188 |
189 | Jupyter
190 |
191 |
安装（使用pip）
192 |
$ pip install jupyter
193 |
运行
194 |
$ jupyter notebook
195 |
官网：Jupyter
196 |
Gitbook
197 |
Gitbook是一个命令行工具(node.js库)，可以把你的Markdown文件汇集成起来，生成一个静态网站，也可以输出为PDF等多种格式。
198 |
199 | gitbook
200 |
201 |
安装（使用npm）
202 |
$ npm install gitbook-cli -g
203 |
使用
204 |
$ gitbook init ＃ 初始化书籍目录
205 | $ gitbook serve ＃ 运行
206 |
官网：Gitbook
207 |
图形工具篇
208 |
在上一篇《全栈工程师的百宝箱：黑魔法之文档篇》我们介绍了一些文档工具，今天让我来分享一下，我常用的一些图形工具。
209 |
流程图：Graphviz
210 |
说到流程图还是再次提及一下，我们之前说到的Graphviz 。
211 |
212 | Graphviz （英文：Graph Visualization Software的缩写）是一个由AT&T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。
213 |
214 |
它的主要特点是代码生成图像，并且足够的简单。
215 |
在我的那个“Web Developer 成长路线图”(GitHub: https://github.com/phodal/developer )里，就是用这个工具生成下面这个复杂的图形。
216 |
217 | tree.png
218 |
219 |
而其代码特别简单——和我们平时表达的手法是一样的，即：
220 |
"包管理" -> "包发布" -> "自动部署"
221 | "CLI" -> "部署"
222 | "脚本语言(Bash,Perl,Ruby,Python etc)" -> "部署"
223 | "脚本语言(Bash,Perl,Ruby,Python etc)" -> "构建"
224 | "*nix" -> "软件编译" -> "部署"
225 | "构建" -> "软件编译"
226 |
Graphviz有一个大的优点和弱点是：自动生成，导致画线的时候很出现出问题。接着，我们就来看看手动画线的例子。
227 |
流程图： Visio vs Dia vs OmnIGraffle
228 |
在Windows世界里，在这一类的工具里面最常见的算是Visio:
229 |
230 | MS-Visio-flowchart.png
231 |
232 |
遗憾的是，它并不支持在Mac OS上使用。而且，它并不在我购买的Office 365套装里。
233 |
在Mac世界里，最好的工具算是OmniGraffle，就是很贵——我们平时使用的是公司的Mac电脑，使用盗版软件是有法律风险的。
234 |
235 | Omnigrafflescreen.jpg
236 |
237 |
在GNU/Linux世界里，我们使用Dia。
238 |
239 | Dia 是开放源代码的流程图软件，是GNU计划的一部分，程序创立者是Alexander Larsson。Dia使用单一文件界面模式，类似于GIMP与Inkscape。 Dia将多种需求以模块化来设计，如流程图、网络图、电路图等。各模块之间的符号仍是可以通用的，并没有限制。
240 |
241 |
242 | dia_screenshot.png
243 |
244 |
顺便安利一下，我最喜欢的操作系统OpenSuSE——简洁、尾长、绿色。
245 |
246 | opensuse.jpg
247 |
248 |
OpenSuSE在KDE桌面下效果最赞了——因为KDE和OpenSuSE都是德国制造。总的来说，会比Debian系的Debian和Ubunt，及RetHat系的CentOS及Fedora稳定、漂亮。
249 |
令人遗憾的是这三个工具，我都用不了。Mac对X Windows的支持不是一般的差，于是我就需要别的替代工具。
250 |
在线流程图：Processon
251 |
这个工具还是相当好用，至少是在GxFxW内比较快——我之前使用过Creately、draw.io、Gliffy等等的一些工具，只是随着版图的扩展，很多地区都已经“xx”了。
252 |
253 | tlok.jpg
254 |
255 |
不过遗憾的是：他们没有给我广告费。
256 |
257 | ProcessOn是一个在线协作绘图平台，为用户提供最强大、易用的作图工具！支持在线创作流程图、BPMN、UML图、UI界面原型设计、iOS界面原型设计等。
258 |
259 |
同样的，在我的那个“Developer进阶书单”（GitHub: https://github.com/phodal/booktree )中，就是用这个工具画出规规矩矩的线。
260 |
261 | BookTree.png
262 |
263 |
并且，它还是跨平台的。
264 |
各种图： Word和Excel
265 |
由于翻译和写书的需要，我成了一个Office 365订阅用户。于是发现在Word等一系列的Office工具中，自带了一个SmartArt的工具：
266 |
267 | smart-art.png
268 |
269 |
可以画出很多很有意思的图形，比如：
270 |
271 | 编程之路.png
272 |
273 |
又或者是：
274 |
275 | growth-lob.jpg
276 |
277 |
分分钟就能画一个的节奏。
278 |
脑图： XMind
279 |
我想这个一般人都是知道的。
280 |
281 | XMind思维导图软件被著名互联网媒体Lifehacker评选为“最佳头脑风暴和思维导图工具”及”最受欢迎的思维导图软件”。
282 |
283 |
它有一个很大的优点是使用了全球最先进的Eclipse RCP 软件架构，支持跨平台使用。它有一个很大的缺点是使用了全球最先进的Eclipse RCP 软件架构，导致了有点卡。
284 |
相比于流程图什么的，它只适合做脑图。
285 |
286 | banner_index.png
287 |
288 |
如果你还在使用Eclipse，那么你应该试试Intellij IDEA了。
289 |
各种图：D3.js
290 |
291 | D3.js（D3或Data-Driven Documents）是一个用动态图形显示数据的JavaScript库，一个数据可视化的工具。
292 |
293 |
与上面的工具相比，这个工具可能没有那么方便。但是，作为一个数据可视化工具，它不仅仅可以做出各种炫酷的图形。
294 |
还可以做出一个技能树：
295 |
296 | sherlock.png
297 |
298 |
这个项目的GitHub见：https://github.com/phodal/sherlock
299 |
地图：Leaflet
300 |
301 | Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的JavaScript 库。
302 |
303 |
虽然它与上面的图形没有啥关系，但是它带了一个图字啊。与Google Map原生的API，或者OpenStreet相比，它最大的优点是对移动设备支持好。
304 |
并且，它也是一个可以根据数据（GEOJSON，地理数据）生成图形的工具。
305 |
306 | vmap.jpg
307 |
308 |
Chrome插件篇
309 |
310 |
在我所用过的这些前端工具里，最常用、实用的就属Chrome自带的DevTools。通常情况下，我们只需要使用这个工具就可以完成大部分的工作了。
311 |
312 | Chrome DevTools
313 |
314 |
每个前端工程师，都应该好好学习如何去使用Chrome DevTools。当然，这并不是一篇详细的关于Chrome DevTools的介绍——相关的内容足够写一本书了。除了正常的Debug功能，它可以模拟移动设备，模拟网络、模板分辨率、模拟，并在HTTP请求中带上相应的User Agent方便我们调试。
315 |
Open SEO Stats
316 |
顾名思义这是一个SEO状态查询工具，它可以让我们查看网站的SEO相关信息。也是一个非常棒的反诈骗软件，因为一个好的网站的Alexa Traffic Rank、PR以及Pages indexed（索引数）等等都会相对较高。
317 |
318 | Open SEO Stats
319 |
320 |
除了基本的SEO状态显示，它还提供了一些有效的工具，来帮助我们优化页面的SEO。如在Page Info里，会罗列出页面的相关标签是否完整。在Links Stats里，会帮我们检查页面的外链情况等等。
321 |
PageSpeed Insights
322 |
这是Google的PageSpeed Insights的插件版（网页版见： https://developers.google.com/speed/pagespeed/insights/ ），一个非常棒的网页优化工具，有了它就可以让我们轻松对网页进行优化。我们所需要做的事情就是点击“分析”按钮，然后就坐等他分析完成。
323 |
如下就是我博客的一个分析结果：
324 |
325 | PageSpeed Insights
326 |
327 |
总体分数98分，看来我针对这个所说的东西进行优化的效果还不错。左边显示了我博客存在的一些问题，如：
328 |
329 | 没有压缩CSS
330 | 可以使用浏览器缓存
331 | 需要指定缓存验证工具
332 | 暂缓JavaScript解析
333 | 将查询字符从静态资源中删除
334 |
335 |
等等的几个问题——这些已经都是小问题了。所以他们的重要等级是“低”，一般来说如果有一个等级是“高”整个评分就会特别低。
336 |
除此，我们还可以使用命令行工具来对你的网页进行测试。
337 |
https://github.com/addyosmani/psi
338 |
安装：
339 |
$ npm install --global psi
340 |
只需要执行下面的命令即可：
341 |
psi http://www.example.com/
342 |
如我的博客的结果:
343 |
--------------------------------------------------------
344 |
345 | URL: phodal.com
346 | Strategy: mobile
347 | Speed: 90
348 | Usability: 96
349 |
350 | CSS size | 30.04 kB
351 | HTML size | 11.8 kB
352 | Image size | 41.08 kB
353 | JavaScript size | 28.07 kB
354 | CSS resources | 1
355 | Hosts | 2
356 | JS resources | 1
357 | Resources | 5
358 | Static resources | 3
359 | Total size of request bytes sent | 695 B
360 |
361 | Leverage browser caching | 1.5
362 | Main resource server response time | %
363 |
再依据不同的结果对网页进化优化，不过它有一个前提是它并不适合SPA（单页面）应用。
364 |
Postman
365 |
我相信这个软件，搞过Web开发的人都听过。
366 |
367 | Chrome Postman
368 |
369 |
它是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。总之，就是我们可以在浏览器上执行GET、POST等等的测试。在调试远程API的时候很有用，一般在调试本地API的时候，我都是用jQuery的。
370 |
同样的，你仍然可以使用命令行工具来测试它，即Newman 。由于其没有UI，它可以运行在CI上，并编写相应的UI测试。
371 |
XPath Helper
372 |
这是我在写UI自动化测试的时候使用的工具，由于那是一个遗留项目，所以我们都对整体UI的布局都不是特别熟悉。并且由于业务推进的关系，我们并没有足够的时候去解决这个问题，于是就开始使用这个工具来完成工作了。
373 |
在编写的时候我们会在Console用jQuery去选定元素，然后再将其转换为XPath。接着在这个工具上尝试，如下图显示：
374 |
375 | XPath Helper
376 |
377 |
最后，我们将会写到代码中。
378 |
ObservePoint Tag Debugger
379 |
这是一个可以用于调试各种Web分析工具的插件，它可以用于分析SiteCat、Google Analytics、WebTrend等发出的事件请求，并解析其数据。
380 |
381 | ObservePoint Tag Debugger
382 |
383 |
Capture Webpage Screenshot Entirely
384 |
这是一个截图工具，可以用于截取页面长图。
385 |
外设篇
386 |
机械键盘
387 |
地球人都知道，我就不说了。
388 |
如果你问我用的是什么键盘：
389 |
390 | Ducky 9008s2，大学的时候买的，家里用，紫色
391 | Ducky DK2087 G2，只要399，公司用的
392 |
393 |
机械键盘手托
394 |
很多人光有个机械键盘，但是却没有一个与之对应的手托，我觉得还是有些可惜的。机械键盘都有着相当高的高度，这时手放上去就有些尴尬。
395 |
396 | 机械键盘手托
397 |
398 |
自定义按钮的鼠标
399 |
对于程序员来说，复制和粘贴是很常用的操作，如果我们有一个对应的自定义按钮的鼠标的话，我们就可以光用鼠标来进行复制和粘贴了。
400 |
401 | Steelseries
402 |
403 |
鼠标线夹
404 |
我经常拿我的Macbook去玩《文明》系列的游戏，这时候我就需要鼠标了，也需要用鼠标线夹来保证我的移动不会受阻。
405 |
笔记本支架折叠
406 |
如果选不了一个好的椅子，那么我们就需要一个好的支架来撑起电脑到一个合适的高度。
407 |
408 | Steelseries
409 |
410 |
Kindle
411 |
Kindle，看书的人都知道。
412 |
Ops
413 |
Nginx Pagespeed
414 |
415 | ngx_pagespeed 是 Nginx 的一个扩展模块，主要的功能是针对前端页面而进行服务器端的优化，对前端设计人员来说，可以省去优化css、js以及图片的过程。ngx_pagespeed对nginx自身负载能力的提升基本是看不到的，甚至会因为进行服务器端的优化而使系统增加负载；但从减少客户请求数的角度去看，牺牲部分服务器性能还是值得的
416 |
417 |
主要功能如下：
418 |
419 | 图像优化：剥离元数据、动态调整，重新压缩
420 | CSS和JavaScript压缩、合并、级联、内联
421 | 小资源内联
422 | 推迟图像和JavaScript加载
423 | 对HTML重写、压缩空格、去除注释等
424 | 提升缓存周期
425 | 以及其他config_filters
426 |
427 |
Boom
428 |
Boom是一个用Go语言实现的压力测试工具，就是和Apache Bench类似的工具。它提供了一个很有意思的UI，这就是我为什么推荐他的原因了：
429 |
1000 / 1000 Boooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo! 100.00 %
430 |
431 | Summary:
432 | Total: 1.9052 secs.
433 | Slowest: 0.2054 secs.
434 | Fastest: 0.0111 secs.
435 | Average: 0.1817 secs.
436 | Requests/sec: 524.8813
437 | Total Data Received: 5459000 bytes.
438 | Response Size per Request: 5459 bytes.
439 |
440 | Status code distribution:
441 | [200] 1000 responses
442 |
443 | Response time histogram:
444 | 0.011 [1] |
445 | 0.031 [10] |
446 | 0.050 [10] |
447 | 0.069 [11] |
448 | 0.089 [11] |
449 | 0.108 [10] |
450 | 0.128 [11] |
451 | 0.147 [11] |
452 | 0.167 [11] |
453 | 0.186 [295] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
454 | 0.205 [619] |∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎∎
455 |
456 | Latency distribution:
457 | 10% in 0.1764 secs.
458 | 25% in 0.1841 secs.
459 | 50% in 0.1892 secs.
460 | 75% in 0.1942 secs.
461 | 90% in 0.2011 secs.
462 | 95% in 0.2024 secs.
463 | 99% in 0.2038 secs.
464 |
GoAccess
465 |
466 | GoAccess是一款开源、实时，运行在命令行终端下的web日志分析工具。该工具提供快速、多样的HTTP状态统计，可以令管理员不再纠结于统计各类数据，和繁杂的指令以及一大堆管道/正则表达式说byebye。
467 |
468 |
这生成的风格是这样的：
469 |
470 | GoAccess
471 |
472 |
它可以轻松统计出访问概况、动态页面请求、静态页面请求（如图片、样式表、脚本等）、访客排名，访客使用的操作系统，访客使用的浏览器，来路域名，404 错误，搜索爬虫，搜索关键词等等。
473 |
而，我们所要做的只需要运行：
474 |
goaccess -f access.log
475 |
Fabric
476 |
因为我的博客是基于Django框架而开发的，我偏向于使用Python作为开发语言，所以我需要选择了Fabric作为运维工具。
477 |
478 | Fabric 是一个 Python (2.5-2.7) 库和命令行工具，用来流水线化执行 SSH以部署应用或系统管理任务。
479 |
480 |
更具体地说，Fabric 是：
481 |
482 | 一个让你通过 命令行 执行 任意 Python 函数 的工具；
483 | 一个让通过 SSH 执行 Shell 命令更加 容易 和 蟒样 的子程序库（建立于一个更低层次的库）。
484 |
485 |
Docker
486 |
487 | Docker是一个开源的引擎，可以轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器。
488 |
489 |
Jenkins
490 |
491 | Jenkins是一个用Java编写的开源的持续集成工具。Jenkins提供了软件开发的持续集成服务。它运行在Servlet容器中（例如Apache Tomcat）。它支持软件配置管理（SCM）工具，可以执行基于Apache Ant和Apache Maven的项目，以及任意的Shell脚本和Windows批处理命令。
492 |
493 |
除了将Jenkins有于持续集成环境外，我们还可以使用Jenkins来完成一些自动化的部署工作。
494 |
自动化
495 |
Selenium
496 |
497 | Selenium 是一个用于 Web 应用程序测试的工具。Selenium 的测试用例直接运行在浏览器中，就像真正的用户在操作一样。与主流的 web 自动化测试框架还有 QTP，基于 Ruby 的 WATIR 等相比，Selenium 支持 IE、Mozilla Firefox 多种浏览器，支持自动录制脚本以及 Java、c#、ruby 等多种运行语言的自动生成，用例制作快捷，运行快速。相比起来 Selenium 要显得更为灵活实用。
498 |
499 |
硬件篇
500 |
Raspberry Pi
501 |
502 | Raspberry Pi 是一款基于Linux的单板机电脑。它由英国的树莓派基金会所开发，目的是以低价硬件及自由软件促进学校的基本计算机科学教育。
503 |
504 |
Arduino
505 |
506 | Arduino，是一个开放源代码的单芯片微控制器，它使用了Atmel AVR单片机，采用了开放源代码的软硬件平台，建构于简易输出/输入（simple I/O）界面板，并且具有使用类似Java、C语言的Processing/Wiring开发环境。
507 |
508 |
我拥有下面的一些开发板：
509 |
510 | Arduino Uno，玩过都知道。通用版，可以使用一系列强大的扩展板。
511 | Arduino Yun，带WiFi功能的Arduino。
512 | Arduino ADK，可以使不支持USB Host功能的Android设备也可以和其它USB设备
513 | Arduino Lilypad，主要用于可穿戴领域。
514 |
515 |
NodeMCU
516 |
517 | NodeMCU,是一个开源的物联网平台。 它使用Lua脚本语言编程。该平台基于eLua 开源项目,底层使用ESP8266 sdk 0.9.5版本。该平台使用了很多开源项目, 例如 lua-cjson, spiffs[5]. NodeMCU包含了可以运行在 esp8266 Wi-Fi SoC芯片之上的固件,以及基于ESP-12模组的硬件。
518 |
519 |
API
520 |
Moco
521 |
522 | Moco是一个简单搭建模拟服务器的程序库/工具，它是一个简单搭建 stub 的框架，主要用于测试和集成。
523 |
524 |
这个工具的目的主要是针对于前后端分离的Web应用来说，特别是基于HTTP协议的集成——Web Service、REST等。
525 |
不过如果你们不写测试的话，这个工具就没啥用。
526 |
Swagger
527 |
528 | Swagger是一种和语言无关的规范和框架，用于定义服务接口，主要用于描述RESTful的API。它专注于为API创建优秀的文档和客户端库。支持Swagger的API可以为API方法生成交互式的文档，让用户可以通过以可视化的方式试验，查看请求和响应、头文件和返回代码，从而发现API的功能。它本身就非常强大，但是Swagger框架还支持为多种流行的语言——包括JavaScript、Python、Ruby、Java、Scala等等——生成客户端代码。
529 |
530 |
CLI
531 |
tree
532 |
533 | tree命令可以以树形结构显示文件目录结构，它非常适合于我们给别人介绍我们的文件目录的组成框架，同时该命令使用适当的参数也可以将命令结果输出到文本文件中。
534 |
535 |
这个命令非常适用于我们写作的时候用的，如下就是toolbox下的chapters目录：
536 |
chapters
537 | ├── api.md
538 | ├── backend.md
539 | ├── chrome-plugins.md
540 | ├── cli.md
541 | ├── devices.md
542 | ├── documents.md
543 | ├── graphics.md
544 | ├── hardware.md
545 | └── ops.md
546 |
547 | 0 directories, 9 files
548 |
sl
549 |
这是一个神奇的命令行工具，由于两个手的手速不致，我经常将ls敲成sl。而在Ubuntu上则会提示你，你是不是要安装sl，于是我就安装了。然后：
550 |
551 | SL
552 |
553 |
每次我敲错命令的时候，都会有这个神奇的火车头出现，火车头动的期间就只能等它完成。每次这个时候，就说明我们需要休息。
554 |
cURL
555 |
cURL利用URL语法在命令行方式下工作的开源文件传输工具。它是一个很常用的命令，也可以支持文件上传和下载。
556 |
curl -I -s -A 'Googlebot' www.phodal.com
557 | HTTP/1.1 200 OK
558 | Server: mokcy/0.17.9
559 | Content-Type: text/html; charset=utf-8
560 | Connection: keep-alive
561 | Vary: Accept-Encoding
562 | Vary: Accept-Language, Cookie
563 | Content-Language: en
564 | X-UA-Compatible: IE=Edge,chrome=1
565 | Date: Thu, 09 Apr 2015 14:39:11 GMT
566 | X-Page-Speed: Powered By Phodal
567 | Cache-Control: max-age=0, no-cache
568 |
curl --data "_method=PUT&led1=1&sensors1=22&sensors2=12&temperature=14" http://b.phodal.com/athome/1
569 |
Backend
570 |
Spring MVC
571 |
572 | Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架。
573 |
574 |
Spring Boot
575 |
576 | Spring Boot 的目的在于快速创建可以独立运行的 Spring 应用。通过 Spring Boot 可以根据相应的模板快速创建应用并运行。Spring Boot 可以自动配置 Spring 的各种组件，并不依赖代码生成和 XML 配置文件。Spring Boot 可以大大提升使用 Spring 框架时的开发效率。
577 |
578 |
Laravel
579 |
580 | Laravel是一套简洁、优雅的PHP Web开发框架。
581 |
582 |
Django
583 |
584 | Django是一个开放源代码的Web应用框架，由Python写成。采用了MVC的软件设计模式，即模型M，视图V和控制器C。
585 |
586 |
在我的博客，以及我使用的一些需要用户认证、CMS功能等等的系统里，我优先使用这个框架来完成任务。它还拥有一套设计得很不错的ORM系统，并且其还隔离了不同的系统底层。
587 |
Flask
588 |
589 | Flask是使用Python语言编写的轻量级的WebWeb应用框架。基于Werkzeug WSGI工具箱和Jinja2 模板引擎。
590 |
591 |
与Django的很大不同之处在于Flask被称之为微框架，它只有简单的核心，而其他的功能需要使用扩展来完成。这就意味着，当我们可以高度定制我们的系统，只选择我们需要的功能，并通过扩展来完成。
592 |
Express
593 |
594 | Express 是一个基于Node.js 平台的极简、灵活的web 应用开发框架，它提供一系列强大的特性，帮助你创建各种Web 和移动设备应用。
595 |
596 |
WordPress
597 |
598 | WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中有超过16.7%的网站使用WordPress。到了2011年8月，约22%的新网站采用了WordPress。WordPress是目前因特网上最流行的博客系统。
599 |
600 |
Ruby On Rails
601 |
602 | 是一个使用Ruby语言写的开源Web应用框架，它是严格按照MVC结构开发的。它努力使自身保持简单，来使实际的应用开发时的代码更少，使用最少的配置。
603 |
604 |
科学
605 |
Octave
606 |
607 | Octave是一个旨在提供与Matlab语法兼容的开放源代码科学计算及数值分析的工具；
608 |
609 |
Numpy
610 |
611 | NumPy是Python语言的一个扩充程序库。支持高级大量的维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库。NumPy的前身Numeric最早是由Jim Hugunin与其它协作者共同开发，2005年，Travis Oliphant在Numeric中结合了另一个同性质的程序库Numarray的特色，并加入了其它扩展而开发了NumPy。NumPy为开放源代码并且由许多协作者共同维护开发。
612 |
613 |
Processing
614 |
615 | Processing是一种开源编程语言，专门为电子艺术和视觉交互设计而创建，其目的是通过可视化的方式辅助编程教学，并在此基础之上表达数字创意。
616 |
617 |
它除了制作一些酷炫的动画之外，其简单的GUI编程，还可以用于硬件端的上位机编写。
618 |
图像处理
619 |
GIMP
620 |
621 | GIMP (GNU Image Manipulation Program，GNU图形处理程序)是一个自由的专业图片处理软件，以GPL（GNU General Public Licence，GNU 通用公共许可协议）许可发布。 它能够用于点击数码位图，比如数码照片、扫描的图片。尽管GIMP也能够编辑矢量图形，比如SVG矢量图形，但是相对而言Inkscape、Corel Draw或Adobe Illustrator这些专门的矢量图软件的功能会更强。（因此人们通常将Inkscape与GIMP配合使用，得到更强大的工具组合）作为全功能的图像处理软件，GIMP对此领域内的专业软件如Photoshop、Corel Paint Shop Pro产生了强有力的挑战，这主要归功于GIMP众多出色的功能特性：多图层，图形缩放、调整，裁剪，颜色操作，支持众多文件格式等等。
622 |
623 |
INKSCAPE
624 |
625 | Inkscape 是开源的矢量图形编辑软件，与 Illustrator、Freehand、CorelDraw、Xara X 等软件很相似，它使用 W3C 标准的 Scalable Vector Graphics (SVG) 文件格式，支持包括形状、路径、文本、标记、克隆、alpha 混合、变换、渐变、图案、组合等 SVG 特性。它也支持创作共用的元数据、节点编辑、图层、复杂的路径运算、位图描摹、文本绕路径、流动文本、直接编辑 XML 等。它可以导入 JPEG、PNG、TIFF 等格式，并输出为 PNG 和多种矢量格式。
626 |
627 |
ImageMagick
628 |
629 | 它可以以各种格式读取和写入图像（超过200种），包括PNG，JPEG，JPEG-2000，GIF，TIFF，DPX，EXR，WebP，Postscript，PDF和SVG。使用 ImageMagick 调整大小，翻转，镜像，旋转，扭曲，剪切和变换图像，调整图像颜色，应用各种特殊效果，或绘制文本，线条，多边形，椭圆和Bézier曲线。
630 |
631 |
它可以支持以下的特性：
632 |
633 | 格式转换：从一种格式转换成图像到另一个（例如 PNG 转 JPEG）
634 | 变换：缩放，旋转，裁剪，翻转或修剪图像
635 | 透明度：使图像的部分变为透明
636 | 附加：添加形状或一帧到图像
637 | 装饰：添加边框或帧图像
638 | 特效：模糊，锐化，阈值，或色彩图像动画：创建一个从GIF动画图像组序列
639 | 文本及评论：插入描述或艺术图像中的文字
640 | 图像识别：描述的格式和图像性能
641 | 综合：重叠了一个又一个的图像
642 | 蒙太奇：并列图像画布上的图像缩略图
643 | 电影支持：读写图像的共同使用的数字电影工作方式
644 | 图像计算器：应用数学表达式的图像或图像通道
645 | 离散傅立叶变换：实现正向和反向的DFT。
646 | 高动态范围图像：准确地表现了从最明亮的阳光直射到最深最黑暗的阴影找到真正的幕后广泛的强度水平
647 | 加密或解密图片：转换成不懂乱码，然后再返回普通图像
648 | 虚拟像素支持：方便以外区域的图像像素
649 | 大图像支持：读，过程，或写mebi和吉比像素的图像尺寸
650 | 执行：ImageMagick的是线程安全的，利用内部算法OpenMP的功能及快速的双核和四核处理器技术提供窗口优势
651 | 异构分布式处理：某些算法可以在跨越的CPU，GPU，以及其他处理器组成的异构平台音乐会执行速度提高。
652 |
653 |
它可以支持 Linux、Windows、 Mac Os X、 iOS、 Android OS 等等的系统。
654 |
如果说 Pandoc 里文档界的瑞士军刀，那么 ImageMagick 就是图形界的瑞士军刀。
655 |
上周在为 Growth 制作插图的时候，需要：1. 合并不同的图像；2. 对图片进行缩放。考虑到图片的数量差不多有 30 张左右，我决定要找一个工具。。。
656 |
这个时候就找到了 ImageMagick 中的几个命令，它居然可以完成我大部分的功能。
657 |
合并图像
658 |
最开始的时候，我是想合并几张图片，成如下的样子：
659 |
660 | SkillTree
661 |
662 |
按照我的习惯，我会打开 Photoshop，然后计算一次合成的图片的宽度。在我合成了两三张图片之后，我就累了。
663 |
搜索过后，便发现了 IMageMagick 的 convert 命令，只需要简单地执行一下：
664 |
convert skilltree-1.png skilltree-2.png skilltree-3.png +append skilltree.png
665 |
而 convert 这个命令，其所拥有的参数选项居然有 253 个，我是我在执行下面的命令后统计到的：
666 |
convert --help | grep " -"|wc -l
667 |
它可以用来转换图像格式，调整图像大小、模糊、裁剪、去斑、抖动、绘图、翻转、加入、重新采样等等。它的功能相当的丰富，以至于我联想到我只需要有这个命令 + 一个简单的 UI，我就可以做出一个 P 图软件了。
668 |
批量缩放大小
669 |
在合并图像之前，我需要对图片进行缩放。同样的，我找到的工具也是 ImageMagick 中的：
670 |
mogrify -geometry x600 *.png
671 |
这里的 x600 即是图片的高度，上面的命令会将所有的 png 缩放到高度为 600 的图片。除了缩放，它还可以轻松地转换图形的格式：
672 |
mogrify -format jpg *.png
673 |
即可以将所有的 jpg 转为 png。
674 |
680 |
681 |
682 |
--------------------------------------------------------------------------------
/listings-setup.tex:
--------------------------------------------------------------------------------
1 | % Contents of listings-setup.tex
2 | \usepackage{xcolor}
3 |
4 | \lstset{
5 | basicstyle=\ttfamily,
6 | numbers=left,
7 | keywordstyle=\color[rgb]{0.13,0.29,0.53}\bfseries,
8 | stringstyle=\color[rgb]{0.31,0.60,0.02},
9 | commentstyle=\color[rgb]{0.56,0.35,0.01}\itshape,
10 | numberstyle=\footnotesize,
11 | stepnumber=1,
12 | numbersep=5pt,
13 | backgroundcolor=\color[RGB]{248,248,248},
14 | showspaces=false,
15 | showstringspaces=false,
16 | showtabs=false,
17 | tabsize=2,
18 | captionpos=b,
19 | breaklines=true,
20 | breakatwhitespace=true,
21 | breakautoindent=true,
22 | escapeinside={\%*}{*)},
23 | linewidth=\textwidth,
24 | basewidth=0.5em,
25 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | h1,
2 | h2,
3 | h3,
4 | h4,
5 | h5,
6 | h6,
7 | p,
8 | blockquote {
9 | margin: 0;
10 | padding: 0;
11 | }
12 |
13 | body {
14 | font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
15 | font-size: 18px;
16 | line-height: 1.4;
17 | color: #000000;
18 | margin: 10px 13px 10px 13px;
19 | }
20 |
21 | a {
22 | color: #0069d6;
23 | }
24 |
25 | a:hover {
26 | color: #0050a3;
27 | text-decoration: none;
28 | }
29 |
30 | a img {
31 | border: none;
32 | }
33 |
34 | p {
35 | text-indent: 2em;
36 | margin-bottom: 12px;
37 | }
38 |
39 | h1,
40 | h2,
41 | h3,
42 | h4,
43 | h5,
44 | h6 {
45 | color: #404040;
46 | line-height: 36px;
47 | }
48 |
49 | h1 {
50 | margin-bottom: 32px;
51 | margin-top: 32px;
52 | font-size: 30px;
53 | color: #0050a3;
54 | }
55 |
56 | h1 a {
57 | margin-top: 100px;
58 | display: block;
59 | }
60 |
61 | h2 {
62 | font-size: 24px;
63 | margin-bottom: 28px;
64 | }
65 |
66 | h3 {
67 | font-size: 18px;
68 | margin-bottom: 24px;
69 | }
70 |
71 | h4 {
72 | font-size: 16px;
73 | }
74 |
75 | h5 {
76 | font-size: 14px;
77 | }
78 |
79 | h6 {
80 | font-size: 13px;
81 | }
82 |
83 | hr {
84 | margin: 0 0 19px;
85 | border: 0;
86 | border-bottom: 1px solid #ccc;
87 | }
88 |
89 | blockquote {
90 | padding: 2px 13px 21px 2px;
91 | margin-bottom: 12px;
92 | font-family: georgia,serif;
93 | font-style: italic;
94 | }
95 |
96 | blockquote:before {
97 | content: "\201C";
98 | font-size: 40px;
99 | margin-left: -10px;
100 | font-family: georgia,serif;
101 | color: #eee;
102 | }
103 |
104 | blockquote p {
105 | font-size: 14px;
106 | font-weight: 300;
107 | line-height: 18px;
108 | margin-bottom: 0;
109 | font-style: italic;
110 | }
111 |
112 | code, pre {
113 | font-family: Monaco, Andale Mono, Courier New, monospace;
114 | }
115 |
116 | code {
117 | background-color: #fee9cc;
118 | color: rgba(0, 0, 0, 0.75);
119 | padding: 1px 3px;
120 | font-size: 12px;
121 | -webkit-border-radius: 3px;
122 | -moz-border-radius: 3px;
123 | border-radius: 3px;
124 | }
125 |
126 | pre {
127 | display: block;
128 | padding: 14px;
129 | margin: 0 0 18px;
130 | line-height: 16px;
131 | font-size: 11px;
132 | border: 1px solid #d9d9d9;
133 | white-space: pre-line;
134 | word-wrap: break-word;
135 | }
136 |
137 | pre code {
138 | background-color: #fff;
139 | color: #737373;
140 | font-size: 11px;
141 | padding: 0;
142 | white-space: pre-wrap;
143 | }
144 |
145 |
146 | figure img {
147 | display: block;
148 | margin: 0 auto;
149 | max-width: 100%;
150 | }
151 |
152 | figcaption {
153 | text-align: center;
154 | }
155 |
156 | ul li a {
157 | font-weight: bold;
158 | }
159 |
160 | ul li ul a {
161 | font-weight: normal;
162 | }
163 |
164 | @media screen and (min-width: 768px) {
165 | body {
166 | width: 748px;
167 | margin: 40px auto;
168 | }
169 | }
170 |
171 |
172 | table {
173 | margin: 10px auto;
174 | }
175 |
176 | thead {
177 | font-size: 120%;
178 | font-weight: 1000;
179 | cursor: pointer;
180 | background: #c9dff0
181 | }
182 |
183 | thead tr th {
184 | text-align: center;
185 | font-weight: bold;
186 | padding: 12px 30px;
187 | padding-left: 42px
188 | }
189 |
190 | thead tr th span {
191 | padding-right: 20px;
192 | background-repeat: no-repeat;
193 | background-position: 100% 100%
194 | }
195 |
196 | tbody tr td {
197 | padding: 15px 10px
198 | }
199 |
200 | tbody tr td.lalign {
201 | text-align: left
202 | }
203 |
204 | tbody tr:nth-child(even) {
205 | background: #fff
206 | }
207 |
208 | tbody tr:nth-child(odd) {
209 | background: #eee
210 | }
211 |
212 | td,th {
213 | border-left: 1px solid #cbcbcb;
214 | border-width: 0 0 0 1px;
215 | font-size: inherit;
216 | margin: 0;
217 | overflow: visible;
218 | padding: .5em 1em
219 | }
220 |
--------------------------------------------------------------------------------
/stylesheets/github-light.css:
--------------------------------------------------------------------------------
1 | /*
2 | The MIT License (MIT)
3 |
4 | Copyright (c) 2016 GitHub, Inc.
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy
7 | of this software and associated documentation files (the "Software"), to deal
8 | in the Software without restriction, including without limitation the rights
9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 |
24 | */
25 |
26 | .pl-c /* comment */ {
27 | color: #969896;
28 | }
29 |
30 | .pl-c1 /* constant, variable.other.constant, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header */,
31 | .pl-s .pl-v /* string variable */ {
32 | color: #0086b3;
33 | }
34 |
35 | .pl-e /* entity */,
36 | .pl-en /* entity.name */ {
37 | color: #795da3;
38 | }
39 |
40 | .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
41 | .pl-s .pl-s1 /* string source */ {
42 | color: #333;
43 | }
44 |
45 | .pl-ent /* entity.name.tag */ {
46 | color: #63a35c;
47 | }
48 |
49 | .pl-k /* keyword, storage, storage.type */ {
50 | color: #a71d5d;
51 | }
52 |
53 | .pl-s /* string */,
54 | .pl-pds /* punctuation.definition.string, string.regexp.character-class */,
55 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
56 | .pl-sr /* string.regexp */,
57 | .pl-sr .pl-cce /* string.regexp constant.character.escape */,
58 | .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
59 | .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
60 | color: #183691;
61 | }
62 |
63 | .pl-v /* variable */ {
64 | color: #ed6a43;
65 | }
66 |
67 | .pl-id /* invalid.deprecated */ {
68 | color: #b52a1d;
69 | }
70 |
71 | .pl-ii /* invalid.illegal */ {
72 | color: #f8f8f8;
73 | background-color: #b52a1d;
74 | }
75 |
76 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
77 | font-weight: bold;
78 | color: #63a35c;
79 | }
80 |
81 | .pl-ml /* markup.list */ {
82 | color: #693a17;
83 | }
84 |
85 | .pl-mh /* markup.heading */,
86 | .pl-mh .pl-en /* markup.heading entity.name */,
87 | .pl-ms /* meta.separator */ {
88 | font-weight: bold;
89 | color: #1d3e81;
90 | }
91 |
92 | .pl-mq /* markup.quote */ {
93 | color: #008080;
94 | }
95 |
96 | .pl-mi /* markup.italic */ {
97 | font-style: italic;
98 | color: #333;
99 | }
100 |
101 | .pl-mb /* markup.bold */ {
102 | font-weight: bold;
103 | color: #333;
104 | }
105 |
106 | .pl-md /* markup.deleted, meta.diff.header.from-file */ {
107 | color: #bd2c00;
108 | background-color: #ffecec;
109 | }
110 |
111 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
112 | color: #55a532;
113 | background-color: #eaffea;
114 | }
115 |
116 | .pl-mdr /* meta.diff.range */ {
117 | font-weight: bold;
118 | color: #795da3;
119 | }
120 |
121 | .pl-mo /* meta.output */ {
122 | color: #1d3e81;
123 | }
124 |
125 |
--------------------------------------------------------------------------------
/stylesheets/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS text size adjust after orientation change, without disabling
6 | * user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | * and Firefox.
30 | * Correct `block` display not defined for `main` in IE 11.
31 | */
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | /**
50 | * 1. Correct `inline-block` display not defined in IE 8/9.
51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | */
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; /* 1 */
59 | vertical-align: baseline; /* 2 */
60 | }
61 |
62 | /**
63 | * Prevent modern browsers from displaying `audio` without controls.
64 | * Remove excess height in iOS 5 devices.
65 | */
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | /**
73 | * Address `[hidden]` styling not present in IE 8/9/10.
74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75 | */
76 |
77 | [hidden],
78 | template {
79 | display: none;
80 | }
81 |
82 | /* Links
83 | ========================================================================== */
84 |
85 | /**
86 | * Remove the gray background color from active links in IE 10.
87 | */
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | /**
94 | * Improve readability when focused and also mouse hovered in all browsers.
95 | */
96 |
97 | a:active,
98 | a:hover {
99 | outline: 0;
100 | }
101 |
102 | /* Text-level semantics
103 | ========================================================================== */
104 |
105 | /**
106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 | */
108 |
109 | abbr[title] {
110 | border-bottom: 1px dotted;
111 | }
112 |
113 | /**
114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 | */
116 |
117 | b,
118 | strong {
119 | font-weight: bold;
120 | }
121 |
122 | /**
123 | * Address styling not present in Safari and Chrome.
124 | */
125 |
126 | dfn {
127 | font-style: italic;
128 | }
129 |
130 | /**
131 | * Address variable `h1` font-size and margin within `section` and `article`
132 | * contexts in Firefox 4+, Safari, and Chrome.
133 | */
134 |
135 | h1 {
136 | font-size: 2em;
137 | margin: 0.67em 0;
138 | }
139 |
140 | /**
141 | * Address styling not present in IE 8/9.
142 | */
143 |
144 | mark {
145 | background: #ff0;
146 | color: #000;
147 | }
148 |
149 | /**
150 | * Address inconsistent and variable font size in all browsers.
151 | */
152 |
153 | small {
154 | font-size: 80%;
155 | }
156 |
157 | /**
158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 | */
160 |
161 | sub,
162 | sup {
163 | font-size: 75%;
164 | line-height: 0;
165 | position: relative;
166 | vertical-align: baseline;
167 | }
168 |
169 | sup {
170 | top: -0.5em;
171 | }
172 |
173 | sub {
174 | bottom: -0.25em;
175 | }
176 |
177 | /* Embedded content
178 | ========================================================================== */
179 |
180 | /**
181 | * Remove border when inside `a` element in IE 8/9/10.
182 | */
183 |
184 | img {
185 | border: 0;
186 | }
187 |
188 | /**
189 | * Correct overflow not hidden in IE 9/10/11.
190 | */
191 |
192 | svg:not(:root) {
193 | overflow: hidden;
194 | }
195 |
196 | /* Grouping content
197 | ========================================================================== */
198 |
199 | /**
200 | * Address margin not present in IE 8/9 and Safari.
201 | */
202 |
203 | figure {
204 | margin: 1em 40px;
205 | }
206 |
207 | /**
208 | * Address differences between Firefox and other browsers.
209 | */
210 |
211 | hr {
212 | box-sizing: content-box;
213 | height: 0;
214 | }
215 |
216 | /**
217 | * Contain overflow in all browsers.
218 | */
219 |
220 | pre {
221 | overflow: auto;
222 | }
223 |
224 | /**
225 | * Address odd `em`-unit font size rendering in all browsers.
226 | */
227 |
228 | code,
229 | kbd,
230 | pre,
231 | samp {
232 | font-family: monospace, monospace;
233 | font-size: 1em;
234 | }
235 |
236 | /* Forms
237 | ========================================================================== */
238 |
239 | /**
240 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
241 | * styling of `select`, unless a `border` property is set.
242 | */
243 |
244 | /**
245 | * 1. Correct color not being inherited.
246 | * Known issue: affects color of disabled elements.
247 | * 2. Correct font properties not being inherited.
248 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
249 | */
250 |
251 | button,
252 | input,
253 | optgroup,
254 | select,
255 | textarea {
256 | color: inherit; /* 1 */
257 | font: inherit; /* 2 */
258 | margin: 0; /* 3 */
259 | }
260 |
261 | /**
262 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
263 | */
264 |
265 | button {
266 | overflow: visible;
267 | }
268 |
269 | /**
270 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
271 | * All other form control elements do not inherit `text-transform` values.
272 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
273 | * Correct `select` style inheritance in Firefox.
274 | */
275 |
276 | button,
277 | select {
278 | text-transform: none;
279 | }
280 |
281 | /**
282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
283 | * and `video` controls.
284 | * 2. Correct inability to style clickable `input` types in iOS.
285 | * 3. Improve usability and consistency of cursor style between image-type
286 | * `input` and others.
287 | */
288 |
289 | button,
290 | html input[type="button"], /* 1 */
291 | input[type="reset"],
292 | input[type="submit"] {
293 | -webkit-appearance: button; /* 2 */
294 | cursor: pointer; /* 3 */
295 | }
296 |
297 | /**
298 | * Re-set default cursor for disabled elements.
299 | */
300 |
301 | button[disabled],
302 | html input[disabled] {
303 | cursor: default;
304 | }
305 |
306 | /**
307 | * Remove inner padding and border in Firefox 4+.
308 | */
309 |
310 | button::-moz-focus-inner,
311 | input::-moz-focus-inner {
312 | border: 0;
313 | padding: 0;
314 | }
315 |
316 | /**
317 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
318 | * the UA stylesheet.
319 | */
320 |
321 | input {
322 | line-height: normal;
323 | }
324 |
325 | /**
326 | * It's recommended that you don't attempt to style these elements.
327 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
328 | *
329 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
330 | * 2. Remove excess padding in IE 8/9/10.
331 | */
332 |
333 | input[type="checkbox"],
334 | input[type="radio"] {
335 | box-sizing: border-box; /* 1 */
336 | padding: 0; /* 2 */
337 | }
338 |
339 | /**
340 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
341 | * `font-size` values of the `input`, it causes the cursor style of the
342 | * decrement button to change from `default` to `text`.
343 | */
344 |
345 | input[type="number"]::-webkit-inner-spin-button,
346 | input[type="number"]::-webkit-outer-spin-button {
347 | height: auto;
348 | }
349 |
350 | /**
351 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
352 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
353 | * (include `-moz` to future-proof).
354 | */
355 |
356 | input[type="search"] {
357 | -webkit-appearance: textfield; /* 1 */ /* 2 */
358 | box-sizing: content-box;
359 | }
360 |
361 | /**
362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363 | * Safari (but not Chrome) clips the cancel button when the search input has
364 | * padding (and `textfield` appearance).
365 | */
366 |
367 | input[type="search"]::-webkit-search-cancel-button,
368 | input[type="search"]::-webkit-search-decoration {
369 | -webkit-appearance: none;
370 | }
371 |
372 | /**
373 | * Define consistent border, margin, and padding.
374 | */
375 |
376 | fieldset {
377 | border: 1px solid #c0c0c0;
378 | margin: 0 2px;
379 | padding: 0.35em 0.625em 0.75em;
380 | }
381 |
382 | /**
383 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385 | */
386 |
387 | legend {
388 | border: 0; /* 1 */
389 | padding: 0; /* 2 */
390 | }
391 |
392 | /**
393 | * Remove default vertical scrollbar in IE 8/9/10/11.
394 | */
395 |
396 | textarea {
397 | overflow: auto;
398 | }
399 |
400 | /**
401 | * Don't inherit the `font-weight` (applied by a rule above).
402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403 | */
404 |
405 | optgroup {
406 | font-weight: bold;
407 | }
408 |
409 | /* Tables
410 | ========================================================================== */
411 |
412 | /**
413 | * Remove most spacing between table cells.
414 | */
415 |
416 | table {
417 | border-collapse: collapse;
418 | border-spacing: 0;
419 | }
420 |
421 | td,
422 | th {
423 | padding: 0;
424 | }
425 |
--------------------------------------------------------------------------------
/stylesheets/stylesheet.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box; }
3 |
4 | body {
5 | padding: 0;
6 | margin: 0;
7 | font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
8 | font-size: 16px;
9 | line-height: 1.5;
10 | color: #606c71; }
11 |
12 | a {
13 | color: #1e6bb8;
14 | text-decoration: none; }
15 | a:hover {
16 | text-decoration: underline; }
17 |
18 | .btn {
19 | display: inline-block;
20 | margin-bottom: 1rem;
21 | color: rgba(255, 255, 255, 0.7);
22 | background-color: rgba(255, 255, 255, 0.08);
23 | border-color: rgba(255, 255, 255, 0.2);
24 | border-style: solid;
25 | border-width: 1px;
26 | border-radius: 0.3rem;
27 | transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
28 | .btn + .btn {
29 | margin-left: 1rem; }
30 |
31 | .btn:hover {
32 | color: rgba(255, 255, 255, 0.8);
33 | text-decoration: none;
34 | background-color: rgba(255, 255, 255, 0.2);
35 | border-color: rgba(255, 255, 255, 0.3); }
36 |
37 | @media screen and (min-width: 64em) {
38 | .btn {
39 | padding: 0.75rem 1rem; } }
40 |
41 | @media screen and (min-width: 42em) and (max-width: 64em) {
42 | .btn {
43 | padding: 0.6rem 0.9rem;
44 | font-size: 0.9rem; } }
45 |
46 | @media screen and (max-width: 42em) {
47 | .btn {
48 | display: block;
49 | width: 100%;
50 | padding: 0.75rem;
51 | font-size: 0.9rem; }
52 | .btn + .btn {
53 | margin-top: 1rem;
54 | margin-left: 0; } }
55 |
56 | .page-header {
57 | color: #fff;
58 | text-align: center;
59 | background-color: #159957;
60 | background-image: linear-gradient(120deg, #155799, #159957); }
61 |
62 | @media screen and (min-width: 64em) {
63 | .page-header {
64 | padding: 5rem 6rem; } }
65 |
66 | @media screen and (min-width: 42em) and (max-width: 64em) {
67 | .page-header {
68 | padding: 3rem 4rem; } }
69 |
70 | @media screen and (max-width: 42em) {
71 | .page-header {
72 | padding: 2rem 1rem; } }
73 |
74 | .project-name {
75 | margin-top: 0;
76 | margin-bottom: 0.1rem; }
77 |
78 | @media screen and (min-width: 64em) {
79 | .project-name {
80 | font-size: 3.25rem; } }
81 |
82 | @media screen and (min-width: 42em) and (max-width: 64em) {
83 | .project-name {
84 | font-size: 2.25rem; } }
85 |
86 | @media screen and (max-width: 42em) {
87 | .project-name {
88 | font-size: 1.75rem; } }
89 |
90 | .project-tagline {
91 | margin-bottom: 2rem;
92 | font-weight: normal;
93 | opacity: 0.7; }
94 |
95 | @media screen and (min-width: 64em) {
96 | .project-tagline {
97 | font-size: 1.25rem; } }
98 |
99 | @media screen and (min-width: 42em) and (max-width: 64em) {
100 | .project-tagline {
101 | font-size: 1.15rem; } }
102 |
103 | @media screen and (max-width: 42em) {
104 | .project-tagline {
105 | font-size: 1rem; } }
106 |
107 | .main-content :first-child {
108 | margin-top: 0; }
109 | .main-content img {
110 | max-width: 100%; }
111 | .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
112 | margin-top: 2rem;
113 | margin-bottom: 1rem;
114 | font-weight: normal;
115 | color: #159957; }
116 | .main-content p {
117 | margin-bottom: 1em; }
118 | .main-content code {
119 | padding: 2px 4px;
120 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
121 | font-size: 0.9rem;
122 | color: #383e41;
123 | background-color: #f3f6fa;
124 | border-radius: 0.3rem; }
125 | .main-content pre {
126 | padding: 0.8rem;
127 | margin-top: 0;
128 | margin-bottom: 1rem;
129 | font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
130 | color: #567482;
131 | word-wrap: normal;
132 | background-color: #f3f6fa;
133 | border: solid 1px #dce6f0;
134 | border-radius: 0.3rem; }
135 | .main-content pre > code {
136 | padding: 0;
137 | margin: 0;
138 | font-size: 0.9rem;
139 | color: #567482;
140 | word-break: normal;
141 | white-space: pre;
142 | background: transparent;
143 | border: 0; }
144 | .main-content .highlight {
145 | margin-bottom: 1rem; }
146 | .main-content .highlight pre {
147 | margin-bottom: 0;
148 | word-break: normal; }
149 | .main-content .highlight pre, .main-content pre {
150 | padding: 0.8rem;
151 | overflow: auto;
152 | font-size: 0.9rem;
153 | line-height: 1.45;
154 | border-radius: 0.3rem; }
155 | .main-content pre code, .main-content pre tt {
156 | display: inline;
157 | max-width: initial;
158 | padding: 0;
159 | margin: 0;
160 | overflow: initial;
161 | line-height: inherit;
162 | word-wrap: normal;
163 | background-color: transparent;
164 | border: 0; }
165 | .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
166 | content: normal; }
167 | .main-content ul, .main-content ol {
168 | margin-top: 0; }
169 | .main-content blockquote {
170 | padding: 0 1rem;
171 | margin-left: 0;
172 | color: #819198;
173 | border-left: 0.3rem solid #dce6f0; }
174 | .main-content blockquote > :first-child {
175 | margin-top: 0; }
176 | .main-content blockquote > :last-child {
177 | margin-bottom: 0; }
178 | .main-content table {
179 | display: block;
180 | width: 100%;
181 | overflow: auto;
182 | word-break: normal;
183 | word-break: keep-all; }
184 | .main-content table th {
185 | font-weight: bold; }
186 | .main-content table th, .main-content table td {
187 | padding: 0.5rem 1rem;
188 | border: 1px solid #e9ebec; }
189 | .main-content dl {
190 | padding: 0; }
191 | .main-content dl dt {
192 | padding: 0;
193 | margin-top: 1rem;
194 | font-size: 1rem;
195 | font-weight: bold; }
196 | .main-content dl dd {
197 | padding: 0;
198 | margin-bottom: 1rem; }
199 | .main-content hr {
200 | height: 2px;
201 | padding: 0;
202 | margin: 1rem 0;
203 | background-color: #eff0f1;
204 | border: 0; }
205 |
206 | @media screen and (min-width: 64em) {
207 | .main-content {
208 | max-width: 64rem;
209 | padding: 2rem 6rem;
210 | margin: 0 auto;
211 | font-size: 1.1rem; } }
212 |
213 | @media screen and (min-width: 42em) and (max-width: 64em) {
214 | .main-content {
215 | padding: 2rem 4rem;
216 | font-size: 1.1rem; } }
217 |
218 | @media screen and (max-width: 42em) {
219 | .main-content {
220 | padding: 2rem 1rem;
221 | font-size: 1rem; } }
222 |
223 | .site-footer {
224 | padding-top: 2rem;
225 | margin-top: 2rem;
226 | border-top: solid 1px #eff0f1; }
227 |
228 | .site-footer-owner {
229 | display: block;
230 | font-weight: bold; }
231 |
232 | .site-footer-credits {
233 | color: #819198; }
234 |
235 | @media screen and (min-width: 64em) {
236 | .site-footer {
237 | font-size: 1rem; } }
238 |
239 | @media screen and (min-width: 42em) and (max-width: 64em) {
240 | .site-footer {
241 | font-size: 1rem; } }
242 |
243 | @media screen and (max-width: 42em) {
244 | .site-footer {
245 | font-size: 0.9rem; } }
246 |
--------------------------------------------------------------------------------
/template/template.tex:
--------------------------------------------------------------------------------
1 | \documentclass[a4paper, 11pt]{article}
2 | \usepackage{geometry} % 設定邊界
3 | \geometry{
4 | top=1in,
5 | inner=1in,
6 | outer=1in,
7 | bottom=1in,
8 | headheight=3ex,
9 | headsep=2ex
10 | }
11 | \usepackage{tabu}
12 | \usepackage[T1]{fontenc}
13 | \usepackage{lmodern}
14 | \usepackage{booktabs}
15 | \usepackage{amssymb,amsmath}
16 | \usepackage{ifxetex,ifluatex}
17 | \usepackage{fixltx2e} % provides \textsubscript
18 | % use upquote if available, for straight quotes in verbatim environments
19 | \IfFileExists{upquote.sty}{\usepackage{upquote}}{}
20 | \ifnum 0\ifxetex 1\fi\ifluatex 1\fi=0 % if pdftex
21 | \usepackage[utf8]{inputenc}
22 | $if(euro)$
23 | \usepackage{eurosym}
24 | $endif$
25 | \else % if luatex or xelatex
26 | \usepackage{fontspec} % 允許設定字體
27 | \usepackage{xeCJK} % 分開設置中英文字型
28 | \setCJKmainfont{STSong} % 設定中文字型
29 | \setmainfont[Mapping=tex-text]{Times New Roman}%\rmfamily 使用的字体,默认英文和数字的字体。 % 設定英文字型
30 | \setromanfont{Georgia} % 字型
31 | \setmonofont{Courier New}
32 | \linespread{1.2}\selectfont % 行距
33 | \XeTeXlinebreaklocale "zh" % 針對中文自動換行
34 | \XeTeXlinebreakskip = 0pt plus 1pt % 字與字之間加入0pt至1pt的間距，確保左右對整齊
35 | \parindent 0em % 段落縮進
36 | \setlength{\parskip}{20pt} % 段落之間的距離
37 | \ifxetex
38 | \usepackage{xltxtra,xunicode}
39 | \fi
40 | \defaultfontfeatures{Mapping=tex-text,Scale=MatchLowercase}
41 | \newcommand{\euro}{€}
42 | $if(mainfont)$
43 | \setmainfont{$mainfont$}
44 | $endif$
45 | $if(sansfont)$
46 | \setsansfont{$sansfont$}
47 | $endif$
48 | $if(monofont)$
49 | \setmonofont{$monofont$}
50 | $endif$
51 | $if(mathfont)$
52 | \setmathfont{$mathfont$}
53 | $endif$
54 | \fi
55 | % use microtype if available
56 | \IfFileExists{microtype.sty}{\usepackage{microtype}}{}
57 | $if(geometry)$
58 | \usepackage[$for(geometry)$$geometry$$sep$,$endfor$]{geometry}
59 | $endif$
60 | $if(natbib)$
61 | \usepackage{natbib}
62 | \bibliographystyle{plainnat}
63 | $endif$
64 | $if(biblatex)$
65 | \usepackage{biblatex}
66 | $if(biblio-files)$
67 | \bibliography{$biblio-files$}
68 | $endif$
69 | $endif$
70 | $if(listings)$
71 | \usepackage{listings}
72 | $endif$
73 | $if(lhs)$
74 | \lstnewenvironment{code}{\lstset{language=Haskell,basicstyle=\small\ttfamily}}{}
75 | $endif$
76 | $if(highlighting-macros)$
77 | $highlighting-macros$
78 | $endif$
79 | $if(verbatim-in-note)$
80 | \usepackage{fancyvrb}
81 | $endif$
82 | $if(tables)$
83 | \usepackage{longtable}
84 | $endif$
85 |
86 | \usepackage{graphicx}
87 | \usepackage{caption}
88 | % We will generate all images so they have a width \maxwidth. This means
89 | % that they will get their normal width if they fit onto the page, but
90 | % are scaled down if they would overflow the margins.
91 | \makeatletter
92 | \def\maxwidth{\ifdim\Gin@nat@width>\linewidth\linewidth
93 | \else\Gin@nat@width\fi}
94 | \makeatother
95 | \let\Oldincludegraphics\includegraphics
96 | \renewcommand{\includegraphics}[1]{\Oldincludegraphics[width=\maxwidth]{#1}}
97 | \ifxetex
98 | \usepackage[setpagesize=false, % page size defined by xetex
99 | unicode=false, % unicode breaks when used with xetex
100 | xetex]{hyperref}
101 | \else
102 | \usepackage[unicode=true]{hyperref}
103 | \fi
104 | \hypersetup{breaklinks=true,
105 | bookmarks=true,
106 | pdfauthor={$author-meta$},
107 | pdftitle={$title-meta$},
108 | colorlinks=true,
109 | urlcolor=$if(urlcolor)$$urlcolor$$else$blue$endif$,
110 | linkcolor=$if(linkcolor)$$linkcolor$$else$magenta$endif$,
111 | pdfborder={0 0 0}}
112 | \urlstyle{same} % don't use monospace font for urls
113 | $if(links-as-notes)$
114 | % Make links footnotes instead of hotlinks:
115 | \renewcommand{\href}[2]{#2\footnote{\url{#1}}}
116 | $endif$
117 | $if(strikeout)$
118 | \usepackage[normalem]{ulem}
119 | % avoid problems with \sout in headers with hyperref:
120 | \pdfstringdefDisableCommands{\renewcommand{\sout}{}}
121 | $endif$
122 | \setlength{\parindent}{0pt}
123 | %\setlength{\parskip}{6pt plus 2pt minus 1pt}
124 | \setlength{\emergencystretch}{3em} % prevent overfull lines
125 | \usepackage{titling}
126 | \setlength{\droptitle}{-8em} % 將標題移動至頁面的上面
127 |
128 | \usepackage{fancyhdr}
129 | \usepackage{lastpage}
130 | \pagestyle{fancyplain}
131 |
132 | $if(numbersections)$
133 | \setcounter{secnumdepth}{5}
134 | $else$
135 | \setcounter{secnumdepth}{0}
136 | $endif$
137 | $if(verbatim-in-note)$
138 | \VerbatimFootnotes % allows verbatim text in footnotes
139 | $endif$
140 | $if(lang)$
141 | \ifxetex
142 | \usepackage{polyglossia}
143 | \setmainlanguage{$mainlang$}
144 | \else
145 | \usepackage[$lang$]{babel}
146 | \fi
147 | $endif$
148 | $for(header-includes)$
149 | $header-includes$
150 | $endfor$
151 |
152 | $if(title)$
153 | \title{$title$}
154 | $endif$
155 | \author{$for(author)$$author$$sep$ \and $endfor$}
156 | \date{$date$}
157 |
158 | %%%% 段落首行缩进两个字 %%%%
159 | \makeatletter
160 | \let\@afterindentfalse\@afterindenttrue
161 | \@afterindenttrue
162 | \makeatother
163 | \setlength{\parindent}{2em} %中文缩进两个汉字位
164 |
165 |
166 | %%%% 下面的命令重定义页面边距，使其符合中文刊物习惯 %%%%
167 | \addtolength{\topmargin}{-2pt}
168 | \setlength{\oddsidemargin}{0.63cm} % 3.17cm - 1 inch
169 | \setlength{\evensidemargin}{\oddsidemargin}
170 | \setlength{\textwidth}{14.66cm}
171 | \setlength{\textheight}{24.00cm} % 24.62
172 |
173 | %%%% 下面的命令设置行间距与段落间距 %%%%
174 | \linespread{1.4}
175 | % \setlength{\parskip}{1ex}
176 | \setlength{\parskip}{0.5\baselineskip}
177 |
178 |
179 | \begin{document}
180 | %%%% 定理类环境的定义 %%%%
181 | \newtheorem{example}{例} % 整体编号
182 | \newtheorem{algorithm}{算法}
183 | \newtheorem{theorem}{定理}[section] % 按 section 编号
184 | \newtheorem{definition}{定义}
185 | \newtheorem{axiom}{公理}
186 | \newtheorem{property}{性质}
187 | \newtheorem{proposition}{命题}
188 | \newtheorem{lemma}{引理}
189 | \newtheorem{corollary}{推论}
190 | \newtheorem{remark}{注解}
191 | \newtheorem{condition}{条件}
192 | \newtheorem{conclusion}{结论}
193 | \newtheorem{assumption}{假设}
194 |
195 | \newcommand{\tightlist}{%
196 | \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
197 |
198 | %%%% 重定义 %%%%
199 | \renewcommand{\contentsname}{目录} % 将Contents改为目录
200 | \renewcommand{\abstractname}{摘要} % 将Abstract改为摘要
201 | \renewcommand{\refname}{参考文献} % 将References改为参考文献
202 | \renewcommand{\indexname}{索引}
203 | \renewcommand{\figurename}{图}
204 | \renewcommand{\tablename}{表}
205 | \renewcommand{\appendixname}{附录}
206 |
207 | $for(include-before)$
208 | $include-before$
209 |
210 | $endfor$
211 | $if(toc)$
212 | {
213 | \newpage
214 | \hypersetup{linkcolor=black}
215 | \setcounter{tocdepth}{$toc-depth$}
216 | \tableofcontents
217 | }
218 | \newpage
219 | $endif$
220 | $body$
221 |
222 | $if(natbib)$
223 | $if(biblio-files)$
224 | $if(biblio-title)$
225 | $if(book-class)$
226 | \renewcommand\bibname{$biblio-title$}
227 | $else$
228 | \renewcommand\refname{$biblio-title$}
229 | $endif$
230 | $endif$
231 | \bibliography{$biblio-files$}
232 |
233 | $endif$
234 | $endif$
235 | $if(biblatex)$
236 | \printbibliography$if(biblio-title)$[title=$biblio-title$]$endif$
237 |
238 | $endif$
239 | $for(include-after)$
240 | $include-after$
241 |
242 | $endfor$
243 | \end{document}
--------------------------------------------------------------------------------
