近来尝试使用markdown来写技术文档，写完之后将写好的markdown文件转成HTML，用该HTML文件作为最终的文档进行管理。这样做的好处是，可以有效的节省时间，就像markdown语言作为一门标记性语言的好处，用户可以更加纯粹的关注文档的内容，而不必花时间在排版工作上。
其实包括你现在看到的这篇博客，也是用markdown语言写的，用hexo+github page就可以快速搭建类似该博客的网站了。读者可以在网上搜一下教程，这里不做说明。（我没收宣传费…）

引用一句别人的话，这么纯粹的语言太适合我这么纯粹的人了（严肃脸）

seriously I mean.

Markdown的目标是实现「易读易写」。

1. Get start（亦即Markdown基本语法）

一开始当然是先要看markdown的基本语法，虽然比较简单：

1-1. 标题

标题使用#号，#的数目与标题的大小相关。

1
2
3
4
5
6

# This is an <h1> tag
## This is an <h2> tag
### This is an <h3> tag
#### This is an <h4> tag
##### This is an <h5> tag
###### This is an <h6> tag

效果图如下：

This is an <h1> tag

This is an <h2> tag

This is an <h3> tag

This is an <h4> tag

This is an <h5> tag

This is an <h6> tag

1-2. 区块引用

1
2
3
4
5
6

>	This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
>	consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
>	Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
>	Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
>	id sem consectetuer libero luctus adipiscing.

效果图如下：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

1-3. 列表

对于无序列表，在条目前加星号、加号减号都可以

1
2
3
4

*	The first li element
*	The second li element
*	The third li element

• The first li element
• The second li element
• The third li element

而对于有序列表，则可以用以下的形式：

1
2
3
4

1.	The first li element
2.	The second li element
3.	The third li element

1. The first li element
2. The second li element
3. The third li element

1-4. 代码参考

行内代码

行内代码可以用反引号包围起来，如：

1

`inline code`

会显示为inline code

1-5. 代码段

对于一整段的代码，则可以用三个连续的反引号来包围。

1
2
3
4
5

try (code) {
	//do something
} catch (e) {
	//do something
}

1-6. 分割线

一行中用三个以上的星号、减号、底线都可以建立一个分隔线，行内不能有其他内容。
也可以在星号或是减号中间插入空格。
下面的写法都可以建立分隔线：

1
2
3
4
5

* * *
***
*****
- - -
---------------------------------------

1-7. 链接

链接的语法也很简单，链接可以插入到行里小狒sin的博客

1

[小狒sin的博客](http://s1nker.github.io)

1-8. 图片

其实图片的插入方法和图片有点像：
看来你们不懂生命的可贵~

1

![serious](https://tva1.sinaimg.cn/large/6f4890d4gy1gml6rfgvwuj201f01dmwx.jpg)

markdown语法的简单介绍就到这里啦~更详尽的资料请戳这里

2. Markdown编辑器推荐

原则上用任何的文本编辑软件都可以写Markdown，但是专用的编辑器一般是带有预览框的，可以随时看到自己写的Markdown文件编译成HTML后的样子，非常快捷方便。

MarkdownPad2

网上盛传的windows系统下最好的Markdown编辑器，但是对于我来说似乎不怎么好用……
因为不支持GFM等扩展语法，对于程序员来说不能插入代码就失去意义了~

SublimeText

对于钟爱SublimeText的前端程序猿，可以在SublimeText的Package Install中安装markdown编辑的扩展，可以快捷键在预览器上进行HTML预览。这里推荐markdown editing插件。

Haroopad

这款工具是在非常偶然的机会下发现的，也是我现在正在使用的。

个人觉得比较特别的地方是Haroopad支持GFM等markdown语法扩展（点击顶部菜单的‘插入’）：

可以看到有GFM(Github Flavored Markdown)、MultiMarkdown、PHP Extras Markdown和Haroopad Flavored Markdown，对于程序员来说，有了这些功能就可以更好的书写文档了。

Cmd Mrakdown

这是链接：Cmd Markdown编辑阅读器。

这是一款在线的Markdown编辑器，比较特别的地方在于它可以插入流程图、序列图等图表，对于要在文档中插入图表的情况会更加实用。
此外作为一款在线工具有云端保存等功能，也是非常方便。
But, 这个工具如果要到处带样式的HTML文件就要买会员咯，有点坑。

此外还推荐一个在线编辑器：简书，更像于内容分享社区，用得比较少，不做过多说明。

3. Markdown语法扩展

为了满足不同用户群体的需求，产生了不少markdown的语法扩展，比如上面说过了GFM(Github Flavored Markdown)、MultiMarkdown、PHP Extras Markdown等（“不同用户群体”都是程序猿吧？）。
在markdown基本语法的基础上增加了一些扩展性的语法，比如像是注释、带语言类型的代码段、删除线等等。

参考资料：
Markdown 语法说明 (简体中文版)
Mastering Markdown-Gihub Guides

本文如果有说得不正确的地方，欢迎发送邮件指出~

某天在写元素的圆角时突然想起，前阵子看了CSS Screct一部分(Github地址)，在线可以试读一部分。试读的章节说到了可以用CSS3的一些新特性画出一些非常奇特的形状，这提醒了我：

可以画出更加生动的东西吧！
于是尝试一下画一个Q版的初音未来，先上预览图：

或者可以直接戳链接。

接下来我简单就图案的几个值得说明的地方来讲解下…

1. 弯弯的呆毛

其实这个很简单，只用到了border-radius的属性，原理上我们只要设置好div的宽度和高度，再将div的背景色设置为透明，然后根据是要向那个方向弯曲来设置单个方向的border，将border的宽度设置为呆毛的粗度，再控制div单个角的圆角属性就可以了。

1
2
3
4
5
6
7
8

fringe2 {
    top: -10em;
    left: 2.3em;
    width: 2em;
    height: 8em;
    border-right: 2.5em solid #2acccc;
    border-radius: 0 0 5em 0;
}

诶，原来我们看到的那根弯曲的毛其实是div的border呀~

2. 上下宽度不同的圆脸

这个形状的头看起来有点怪呀…
将这个头分解一下，其实可以分成三个部分，上下两个大小不同的半圆和中间的上大下小的梯形。所以这里其实是用伪元素::before和:after来做，把中间的梯形当做div，上下两个半圆就是这个div的::before和:after啦~

这里值得说一下伪元素的妙用，只要用的合适，一个div也可以画出很复杂的图形。还有伪元素是无法应用在窗级元素(如input)上的之前踩过这个坑
简单看过资料，据W3C的说明因为窗级元素是不能有子元素的，伪元素某种意义上是其附着元素的子元素。但是Chrome里的input支持伪元素的使用…应该是坑…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

#head {
    position: relative;
    width: 10em;
    height: 0;
    border-top: 6em solid #fff1cb;
    border-right: 1.5em solid transparent;
    border-bottom: none;
    border-left: 1.5em solid transparent;
    z-index: 21;
    animation: nodding 5s infinite;
}
#head::before {
    content: "";
    position: absolute;
    top: -11em;
    left: -1.5em;
    width: 13em;
    height: 5em;
    background-color: #fff1cb;
    border-radius: 7em 7em 0 0 / 5em 5em 0 0;
}
#head::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 2em;
    background-color: #fff1cb;
    border-radius: 0 0 5em 5em / 0 0 2em 2em;
}

3. 微笑的小嘴

微笑的嘴巴是最容易画的！
这个应该是最简单的，先将div设置成圆形or椭圆形，给背景色设置透明，border-bottom设置为solid，颜色为深灰色，宽度为嘴巴线条的宽度就可以啦~

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

#head .mouth {
    position: absolute;
    top: -.8em;
    left: 4.1em;
    width: 1.2em;
    height: 1em;
    border-top: .2em solid transparent;
    border-left: .2em solid transparent;
    border-right: .2em solid transparent;
    border-bottom: .2em solid #333;
    border-radius: 1em;
    z-index: 22;
}

4. 形状规则的领带

为什么说形状规则呢？且看截图，从上到下其实就是三个我们小学都学过的平面图形优呀！一个是倒立的看起来很胖的梯形，一个是正立的很瘦的梯形，最后一个就是倒立的三角形呀！不要问我为什么最上面的看起来不是梯形…因为被挡了一部分…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

#body .tie {
    position: absolute;
    top: .5em;
    left: 1.3em;
    width: .8em;
    border-top: 1em solid #2aaaaa;
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    z-index: 11;
}
#body .tie::before {
    content: "";
    position: absolute;
    top: 0;
    left: -.6em;
    width: .8em;
    border-bottom: 2.5em solid #2aaaaa;
    border-left: .6em solid transparent;
    border-right: .6em solid transparent;
}
#body .tie::after {
    content: "";
    position: absolute;
    top: 2.5em;
    left: -.6em;
    border-top: .6em solid #2aaaaa;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
}

5. 形状好像很规则的发夹

看到这里读者应该很熟悉作者的尿性了…都是伪元素、圆角，能来点高端点的吗？
为了提升这篇文章的深度，要强行加入点CSS3的特性才行！
一开始也是分解成三个部分，考虑到视角的因素，看得到的只有方形的三个边，所以用一个div加伪元素可以做到。
考虑到三种颜色，可以给div设置背景色，用到linear-gradient属性，给背景分成三段，分别设置不同的颜色。
倾斜的效果可以用transform的skew属性，将弯折的部分对接起来看起来就是有点立体感的发夹了…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

#head .hair .hairpin.left {
    top: -10em;
    left: -1em;
    transform: skew(18deg);
}
#head .hair .hairpin {
    position: absolute;
    width: .6em;
    height: 2.5em;
    background: #333;
    z-index: 29;
}
#head .hair .hairpin.left::before {
    content: "";
    position: absolute;
    top: 0em;
    left: -1em;
    width: .6em;
    height: 2.5em;
    background: -webkit-linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    background: -o-linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    background: linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    transform: skew(-36deg);
}
#head .hair .hairpin.left::after {
    content: "";
    position: absolute;
    top: 2.5em;
    left: -1.7em;
    width: .6em;
    height: 2em;
    background: -webkit-linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    background: -o-linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    background: linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    transform: skew(9deg);
}

6. 简单的总结

总的来说，要画出这样的形象，可以选择的属性有以下这些：

• border-top / border-right / border-bottom / border-left
• border-radius
• ::before & ::after
• transform: rotate / skew / scale / translate
• background: linear-gradient

参考资料：
CSS秘密花园：复杂背景图案 墙裂推荐此书呀！
one div 有点好玩的一个div实现复杂图形，有很多案例，运用到了很多CSS3特效。

1. HTML中的data属性

HTML中的data-*属性可以说是无处不在，良好的兼容性，并且可以在view层作短暂的存储数据。
可以看到，例如 bootstrap，validator 等库或者插件都有用到这个方便的属性。

1

<div id="user" data-name="james" data-age="32" data-first-name="lebron"></div>

记得之前自己写验证表单的插件时，也是使用了data-*属性，例如

1

<input id="user" name="user_name" data-is-validated="true" data-validate="true">

这里用data-is-validated表示该输入框是否已经验证过，而data-validate表示该输入框是否合法。 每次提交表单都要验证两个属性。 特别是在需要使用异步接口时的验证，通过判断输入框的状态(可以为未验证/验证等待中/已验证)，来避免异步请求验证时等待返回结果时的验证错误。

摘取一段使用了Angular框架的页面代码:

1

<li ng-repeat="day in days" ng-click="changeDay($event, $index, day)" ng-class="{'true':'active', 'false':''}[(index === $index)]" class="ng-scope active"></li>

这里使用了ng-*的属性，其实也是类似于data-*属性的使用，ng关键字的使用正是Angular的缩写。

2. 可以获取data属性的方法

1. HTML5提供的接口

HTML5提供了接口，通过元素的dataset属性来读写data属性的值，该方法返回一个所选元素data-*的DOMStringMap对象。
但是要注意的是，如果是类似于data-first-name的属性，应该用驼峰标记来获取。

1
2
3
4
5
6

var user = document.getElementById('user');
user.dataset.name;			//james
user.dataset.age;			//32
user.dataset.firstName;		//lebron

user.dataset.name = null;	//去除属性

由于是HTML5提供的接口，而且实际上这个接口非常 鸡肋 ，兼容接口的浏览器版本比较苛刻:

** Chrome8+, Firefox(Gecko)6.0+, InternetExplorer11+, Opera11.10+, Safari6+ **

你没看错，就是IE11+…亮瞎眼了吧。

2. 最原始的读取DOM元素属性的方法

这个没什么，用setAttribute和getAttribute方法就可以获取和修改该属性了…
实际上这样看来data-*的属性和一般的属性也没什么区别嘛。 ╮(╯▽╰)╭

3. jQuery提供的方法

jQuery的$().data()方法可以获取到元素的data-*属性，例如:

1
2

$('#user').data('name'); //james
$('#user').data('name', curry); //curry

jQuery还可以使用attr()来获取data属性

但是要注意的是，使用attr()给元素的data属性赋值时，如果使用data()来获取会获取不到，也就是data()方法和attr()方法是不能通用的，如果你使用的是attr()方法，那么你最好所有的data属性读取都使用attr()方法吧。

在现在的小公司做的事情确乎是很多, 最近竟然由我这个还没毕业的大四狗来当面试官, 好几次的面试下来, 结果挺让我失望

简单的来说可以面试的人分为三类:

• 多年工作经验, 却没有积累到什么
• 半路出家, 对于知识的深入程度非常有限
• 有一定的经验, 三剑客都理解得可以, 对于常用的框架有基本的了解

其实看到有的面试者, 知识掌握不怎么样, 一看工作经验, 都是些无关痛痒的项目, 不得不为之感慨, 花去了时间没有积累到什么, 可以叫做浪费吧

这几天在想, 我会不会也变成这样的人呢? 其实很多程序员可能都是这样, 没有太过人的天赋, 为了谋生活敲代码, 久而久之只会止步不前, 被时代淘汰. 跟我以前认为的不太一样: 程序员都是对很多事情不甚关心, 可以用代码创造自己的世界. 然而事实并不是这样. 不由得会有种去努力往上爬的冲动, 就是不想变成这样子.

勉励自己.

1
2
3
4

while (ture) {
	var blood = new Blood();
	sin.push(blood);
}

每个程序员对于Hello World都有特别的感情，我也不例外。
之前的博客更像是自己学习的笔记，更像是知识的总结，没有太多原创的东西。
所以我在这里开一个博客，试着在github上托管，做更多的尝试。
想法其实很简单，希望跟这个世界上的所有人，分享我的生活，我的进步。
如果有某个人看了我的博客受到启发，解决了面临的难题，想想都是一件令人兴奋的事情不是吗？

1

console.log("Hello World!")

这里附上旧博客的地址