docker能够将应用运行在容器中，它有许多优点，例如与主机环境隔离，应用部署方便等等。但是我现在希望能够将应用的数据存放到主机上，这样一来我就可以随意的创建和销毁docker容器，而不必担心应用数据的丢失了。

用过docker的人应当都知道docker可以进行端口映射，也就是将容器中的端口映射到主机的端口上，例如

docker run -d -p 1004:1004 -p 80:1005 duguying/judger

上例中就是将docker容器的1004端口映射到1004端口，将docker容器中的1005端口映射到80端口，其中-d表示以deamon进程的方式运行应用（即服务）。其实docker除了能够映射端口还能够映射目录，如下命令

docker run -d -p 1004:1004 -p 1005:1005 -v /var/goj/judger:/data duguying/judger

其中 -v /var/goj/judger:/data 便是将docker容器中的/data目录映射到主机的/var/goj/judger目录。但是有一点却需要注意，那就是当运行命令后docker初始化完成会将/var/goj/judger目录挂载到docker容器的/data目录，这样一来原docker容器/data目录将会消失，自然其中的内容也会丢失，因此，若是希望将配置文件放在挂载目录必须等到挂载完成后在docker容器中通过程序拷贝到挂载目录。若一切正常，那么/data目录下的内容会在主机的/var/goj/judger中，如此便可以实现将数据保存到主机目录。

Indent是linux上很好的一款代码格式化工具，我在vim中很容易就配置其在文件保存时自动格式化代码，于是我打算开发一个sublime text 2插件（http://git.duguying.net/duguying/SublimeGnuIndent/src/master/Indent.py）调用外部命令indent（http://gnuwin32.sourceforge.net/packages/indent.htm），可是问题是外部修改的文件无法在有焦点的页面上自动更新，失去焦点然后又获取到焦点便可以更新。我希望请教是否有人能够点拨我一下如何解决这种问题。如下图

保存后，Indent确实格式化了代码文件，但是无法刷新，调用run_command('revert')也是无法将active状态下的编辑页面刷新的。但是在inactive状态下调用run_command('revert')却可以刷新。网上查找解决方案良久没发现有什么直接明了的方法。问题待解决。

今天终于解决了xss这个潜在的问题，编辑器使用的是Markdown编辑器EpicEditor，EpicEditor是一款Markdown编辑器，或者说是一款可以自己定制的编辑器。后台Markdown解析器用的是"github.com/russross/blackfriday"，后台代码

func Markdown2HTML(content string) string {
	content = html.EscapeString(content)
	output := blackfriday.MarkdownCommon([]byte(content))
	return string(output)
}

直接将markdown语法的串解析为html语法的串，后台还设置了一个markdown解析api后面待用，api的controller代码如下

// parse markdown
type MarkdownController struct {
	controllers.BaseController
}

func (this *MarkdownController) Get() {
	this.Data["json"] = map[string]interface{}{
		"result": false,
		"msg":    "only post method support",
		"refer":  nil,
	}

	this.ServeJson()
}

func (this *MarkdownController) Post() {
	content := this.GetString("content")

	log.Blueln(content)
	rst := utils.Markdown2HTML(content)

	this.Data["json"] = map[string]interface{}{
		"result":  true,
		"msg":     "success",
		"preview": rst,
		"refer":   nil,
	}

	this.ServeJson()
}

前端将串传给后端，这个串期望是纯markdown的，因此如果其中夹杂着有html语法，html将会被转义，之后返回带有解析后的html串。

前端的EpicEditor默认是能够解析Markdown和兼容HTML的，甚至不过滤js(这个问题我已经向项目作者反馈过，他决定之后会给其添加选项以禁用js)，由于我之前的文章提到css都会给用户机会造成页面混乱，而我所找到的过滤器只支持xss过滤，即只过滤js不过滤css，并且那个过滤器有一个依赖包在墙外，这将会是很蛋疼，所以决定使用markdown，是纯markdown。EpicEditor是兼容html的，因此不满足我的需求，于是我问EpicEditor的作者是否有禁用html的选项（传送），他告诉我EpicEditor不负责解析的，解析器可以自己定制，EpicEditor默认使用的解析器是markd解析器，然后给了我一个页面，其上有定制解析器的demo

var editor = new EpicEditor({
  parser: function (str) {
    var blacklist = ['foo', 'bar', 'baz'];
    return str.split(' ').map(function (word) {
      // If the word exists, replace with asterisks
      if (blacklist.indexOf(word) > -1) {
        return '****'
      }
      return word;
    }).join(' ');
  }
}).load();

自己重做一个解析器？看一下markd项目的代码有多少吧，重做工作量太大。仔细分析上面的代码发现parser是一个函数，它的作用是这样的，传入原串，返回解析后的串。这回我之前留的api起作用了，自己实现的parser函数如下

parser: function (str) {
	var rst = $.ajax({
		async: false,
		type: "post",
		url: "/api/markdown/preview",
		data: {"content": str},
		dataType:"json",

	}).responseText;
	var json = eval('('+rst+')')
	console.log(json);
	return json.preview;
},

是的，我将原数据传给服务器去解析，得到结果，这样还有一个好处就是保证了解析器的一致性，即最终结果与编辑器preview结果是一致的。当然这也是有一些缺点的，那就是给服务器增加了负担，不过我觉得这是值得的。最后附上编辑器工作的截图

问题能够得以解决应当感谢各个开源项目以及其作者的无私奉献，还有他们的热心答疑，取之于开源用之于开源，Goj也会是一个开源项目，愿早日完成。

今天遇到了一个比较坑的问题，使用Ace Editor却发现代码显示区与编辑器错位，表现是这样的，编辑器中一行代码结束了，但是移动光标却发现后面还有空白位，一开始我以为是空格之类的东西，于是删除最后一个空白位，然后最后一个字符就消失了，继续删字符继续消失，很明显是编辑区与显示区错位。

于是我怀疑是前面的css代码对此处的样式产生了影响，scss已经写了不少了，想直接查找是什么地方产生的影响是比较麻烦的，代码删减法，最后发现是全局样式文件中的一段代码导致的

*{
	font-family: $main-font-family;
	margin: 0;
	padding: 0;
}

其实之前对编辑器区域的审查元素发现编辑器几乎完全是由div元素构成，*表示匹配所有的元素，自然也包括了div元素，早就记不清是从哪儿学的这种写法，事实上这样写的目的是清除所有元素的默认margin和padding，开始的时候是觉得这么写也是无可厚非的，简洁有力，可是没想到有一些插件居然是基于浏览器默认的元素margin和padding来设计布局的，我在一开始的时候就将所有元素的margin及padding清零自然会影响到这些插件的样式。其实在用Ace Editor之前我用的是CodeMirror编辑器，但是CodeMirror却不受影响，估计是它指定了自己的margin和padding值，不受默认值影响。

现在越来越觉得使用*选择器是一件不靠谱的事情，*（通配符）的通用性太大了，匹配所有，是所有的元素。因此*使用的位置越靠顶层对全局的影响越是大，导致后期的故障或者冲突的可能性越大，尽管使用*选择器可能会节省一些代码，但是与导致的冲突相比是得不偿失的。*不能乱用，用在底层还好

.footer .footer-wraper .right .right-tag, .footer .footer-wraper .right * {
  ...
}

一般不要随意使用*，如果要使用*，建议在*下面不要再存在子元素，后或者下面的子元素不是很深并且样式在自己的控制之内。

XSS(Cross Site Scripting)，跨站脚本攻击，简单来说就是用户获取到了页面脚本执行的权限，够获取到JS脚本执行权限后能干的事情很多，比如盗取session id，从而实现登录帐号从而获取账户相关信息。

XSS攻击一般都是出现在有富文本提交的表单中，用户可以在提交的富文本中按以下各种方法插入JavaScript脚本：

<script>alert("hacked!");</script>

<img src="./" onerror="alert('hacked!');">

<a href="javascript:alert('hacked!')">foo</a>

<style>
div{
  background: url("javascript:alert('hacked!');");
}
</style>

以及其他的各种方法在页面执行Js脚本，当然黑客执行脚本的目的并不是为了弹窗装逼，而是读取当前用户的cookies，从而获取session id，达到非法登录用户账户的目的，简单来说就是不要密码盗号。

嵌入式web页面富文本编辑器很多，例如ueditor等，有人以为防范XSS攻击是这些编辑器的事情，事实上XSS攻击并不是这些编辑器能够阻止得了的，因为黑客是可以绕过编辑器提交表单的，所以防范XSS攻击的重点是后台字符串过滤，将非法的串过滤掉，当然还有另外一种办法，那就是使用第三方替代标签，如UBB标签(discuz中使用的就是这个)、Markdown等，不直接使用HTML系列的标签由其他标签转换为HTML，从而达到防止非法注入脚本的目的。

事实上富文本提交攻击防范远不止XSS这些，XSS主要是指Js脚本的攻击，可是有一种不致命却很糟糕的攻击却是被忽略了，那就是css脚本扰乱界面布局，事实上这应该算是纯粹的捣乱，可是却也能够严重的影响到页面的美观以及用户的正常使用，开源中国就曾经被大家用这种方法玩坏过。

<div style="display:block;position:fixed;width:100%;height:100%;background-color:red;"></div>

上面的代码便可以让整个网页变成红色。

因此，我个人认为html富文本的过滤不仅仅是简单的Js过滤，应当连css一起过滤掉。或者干脆使用第三方标签UBB等。

自定义web字体流行已经不是一天两天的事了，仿佛是随着google，ajax，web2.0这些字眼在多年前就已经到来了，不过如今却是越加流行了。用自定义字体代替图片图标确实有着不少好处，比如，字体是矢量的可以无限放大，字体可以随意的改变颜色只需在css中设置color属性即可。最近发现了一个在线字体生成工具很是不错，那就是fontello。

fontello提供众多图标供用户定制选择，并且用户还可以上传自己设计的svg图标文件，fontello会将其转化打包为字体文件fontello.eot、fontello.svg、fontello.ttf以及fontello.woff，供不同的浏览器调用，它在浏览器中的调用方式和众多的图标字体的调用方式是一样的——通过css调用，或者说通过指定class值的html节点调用，相信所有人都会使用，如果不会，自己查看打包目录下的demo.html文件就会了。

字体设计：

首先打开Illustrator，通过性状工具以及钢笔工具勾勒出你所需要的图形，然后转化为复合路径(对象>复合路径>建立)，然后保存为svg配置文件SVG 1.1，即可生成svg文件。

然后，在fontello页面的custom区域拖拽上传svg文件便会生成自定义的字体文字(或者说是图标)，选中它，以及你所需要的图标，点击download便可以打包字体文件。

使用字体图标的好处就不在赘述了。在Illustrator中设计图标时无需在意图标的颜色，因为对于字体来说是没有颜色的，只有形状，这也是在Illustrator中将其转换为复合路径的原因。另外需要注意的是在Illustrator中绘制路径的话要保证路径是闭合的，不然无法形成形状，在导入fontello后便会发现图标是空白的，假如你发现自己的图标是空白的或者是全黑的，那么建议你先学习一下Illustrator的使用以及路径和性状这些概念再来设计图标。

今天为了修复一个bug折腾了将近一天的时间，原本是计划在沙箱子项目里面添加命令行指定配置文件路径功能，结果被我发现之前留下的一个坑，但是整个发现过程花了一整下午的时间。

调试过程中发现明明传入到函数中的路径printf是正确的，可是当执行到fopen时却直接异常退出，于是gdb跟踪调试

调试显示传入的文件名是正常的，但是当执行到#93步时文件名很明显被截断了，这是一件非常奇怪的事情，我甚至怀疑fopen函数是不是对传入文件名长度有限制，可事实上不是这样的。因为我后来专门写了个测试代码，同样的文件名路径，fopen却是正常的。我又怀疑是不是因为文件名字符串是malloc分配的原因，测试后却也是正常的。

非常纠结，之后决定采用大段大段的砍掉无关代码的方法来更清晰的定位错误可能的位置，因为代码带多确实看着眼花缭乱。当我砍到只剩下调用config_read的时候，惊奇的发现上面内存初始化是这样的：

// alloc memory for path string    
executable = (char*)malloc(sizeof(EXE_LEN));    
memset(executable, 0, sizeof(EXE_LEN));

shit! 这儿的EXE_LEN是int型指定文件名长度的啊，也就是说sizeof(EXE_LEN)是4byte，坑爹啊。但是我后面给这个内存strncpy了73个字符组成的字符串，嗯，编译器没给我报错，然后这内存几经传递传到了fopen里面，却被莫名的修改了，呵呵，修改了活该啊，谁让我把剩下的69个字符强行放入了它不该放的地方呢。其实应该是这个字符串越界到了fopen函数所使用的内存去，被修改也是太正常不过了。

C语言编程确实需要小心谨慎，因为编译器给你的提示实在是太少，逻辑错了就会按照错的运行，结果便会是谬之千里。

前段时间接触到了fis，后来发现它正是我所寻找的一类前端工具。之前在byvoid大神的博客上看到前端html源码中引用的js和css都是在文件名后面附加了随机串。如/css/style-882e60051fc11fd2558e888585fc3950.css。我感觉这个做法应该有他的深意。接触fis后才知道，文件md5映射之后可以在服务器端开启静态文件永久缓存，如此一来可以最大化利用浏览器的缓存机制，起到加快页面加载速度节省流量的效果。由于md5映射的文件名是唯一的，所以不用担心缓存导致的前端问题。这一技术在许多其他的网站上也有用到，例如百度、twitter等，其中fis就是出自百度，据fis文档介绍，其中某些创意是受twitter启发的。

最近一直在用beego做项目，于是打算将fis的md5映射机制迁移到beego上来，fis官网文档上介绍了fis在go web的实现demo，不过它是基于martini框架的，在多番查阅文档后，我觉得若是抛开模版内的资源文件自动打包这一功能单纯实现md5映射，我能够自己将其在beego上实现。

fis中带md5映射的前端资源全部记录于map.json文件中，fis项目编译后会自动生成map.json文件，示例如下

{
    "res": {
        "js/global.js": {
            "uri": "/static/js/global_f39ad61.js",
            "type": "js"
        },
        "js/user.js": {
            "uri": "/static/js/user_42dbc3b.js",
            "type": "js"
        },
        "octicons/octicons.scss": {
            "uri": "/static/octicons/octicons_1b828d3.css",
            "type": "css"
        },
        "sass/index.scss": {
            "uri": "/static/css/index_b855d1c.css",
            "type": "css"
        },
        "sass/login.scss": {
            "uri": "/static/css/login_c8abcc0.css",
            "type": "css"
        },
        "sass/register.scss": {
            "uri": "/static/css/register_b76a400.css",
            "type": "css"
        },
        "sass/style.scss": {
            "uri": "/static/css/style_462f7a1.css",
            "type": "css"
        }
    },
    "pkg": {}
}

这其中"res"项就是资源映射表，"js/global.js"以及"js/global.js"等是编译前的文件，即fis项目源文件，而"/static/js/global_f39ad61.js"以及"/static/octicons/octicons_1b828d3.css"等是编译后的文件，网站应当加载编译后的文件，而编译后的文件名是变动的，每次修改源文件并编译后，编译后的文件名md5值便会变化，不过编译前的文件名是不变的，因此，思路是通过编译前文件名得到对应的编译后的文件名，然后加载到网页。beego实现如下：

在工具包utils里有

package utils

import (
	"fmt"
	"github.com/astaxie/beego"
	"github.com/gogather/com"
	"html/template"
)

// fis map
func Fis(key string) template.HTML {
	var text string
	content := loadMap()
	json, _ := com.JsonDecode(content)
	json = json.(map[string]interface{})["res"]
	if fileMap, ok := json.(map[string]interface{}); !ok {
		fmt.Println("map.json id illeage!")
	} else {
		for tmpKey, views := range fileMap {
			uri, ok := views.(map[string]interface{})["uri"].(string)
			if !ok {
				fmt.Println("error in map.json")
			}

			fileType, ok := views.(map[string]interface{})["type"].(string)
			if !ok {
				fmt.Println("error in map.json")
			}

			if tmpKey == key {
				if fileType == "css" {
					text = `<link rel="stylesheet" href="` + uri + `">`
				} else if fileType == "js" {
					text = `<script src="` + uri + `"></script>`
				}
			}
		}
	}

	return template.HTML(text)
}

// load map.json
func loadMap() string {
	mapPath := beego.AppConfig.String("static_map")
	mapContent := com.ReadFile(mapPath)
	return mapContent
}

其中Fis函数便是由编译前的文件名查找编译后的文件名。接下来是注册模版函数

beego.AddFuncMap("asset", utils.Fis)

然后你就可以在模版中这样引入js或者css文件了

{{template "inc/header.tpl" .}}
{{asset "sass/login.scss"}}
	<div class="info">&nbsp</div>
	<div class="login">
		<form action="/login">
			<ul>
				<li><label for="">用户名</label><input type="text" name="username" id=""></li>
				<li><label for="">密码</label><input type="password" name="password" id=""></li>
				<li class="login-btns">
					<button class="btn">{{i18n "login"}}</button>
					<a class="btn oauth-login" href="https://github.com/login/oauth/authorize?client_id={{.github_client_id}}&scope=user,public_repo" target="_blank"><span class="octicon octicon-logo-github"></span>登录</a>
				</li>
			</ul>
		</form>
	</div>
{{asset "js/user.js"}}
{{template "inc/footer.tpl" .}}

其中

{{asset "sass/login.scss"}}

便是引入"sass/login.scss"对应的编译后的css文件。

如此，便实现了利用fis的md5映射功能，现在可以放心开启js和css的强制缓存了。最后附上我自己的项目地址供大家借鉴https://github.com/duguying/ojsite 。