Mescoda's Blog

《锁锁美同学@提不起劲》中的故事背景设定在一个名为「天沼矛町」的城市，日本神话中天沼矛是众神赐予「伊邪那岐命」和「伊邪那美命」用来创造日本国土的工具，伊邪那岐和伊邪那美是二代神（创世之初，诞生了一代的五位「五别天神」和二代的十二尊天神「神世七代」）中最重要的神祗，大量的故事在他们以及他们的直接后代中展开。

这对兄妹在创造了国土之后，开始生育后代众神，在生育火神「迦具土」的过程中，伊邪那美不幸去世。伊邪那岐愤怒之下用自己的佩剑十拳剑斩杀了迦具土，并去黄泉国寻找妻子，但因为看到极恶的一面，从黄泉国逃回人界，在洗涤污秽的过程中产生了「天照大御神」（天照大神），「月读命」和「须佐之男命」，分别掌管高天原、夜之国和海洋。

其中天照大神是动画中的最高神天照大神，月读是动画中的月读一族，只不过月读在传统神话中的出镜率不高，在动画中被设定为被因为感到疲倦而不再愿意持有最高神力量管理世界的天照大神托付最高神力量的人类一族。为了保证继承最高神的力量，月读一族维持着近亲结婚的传统，族中的女性成为巫女，继承力量，并以管理最高神力量为责任，族中的男性成为侍奉巫女的仆人，同时作为生育的工具，以类似影子的身份活着。

日本神话中也有一段天照大神提不起劲的剧情，不过起因是她那个因为思念母亲想要去往黄泉国而被父亲伊邪那岐命放逐，进而闯入高天原胡作非为的弟弟须佐之男。其中神话中天照大神躲入的「天之岩屋」也是动画 EP8 中锁锁美因为拒绝与外界接触而实体化的天岩石的原型。

为了让天照大神从天岩屋中出来重新照耀世界，「思金神」创造了「八咫镜」和「八尺琼勾玉」，用其作为舞台，在舞神「天宇受卖命」的舞蹈中成功引诱天照大神出来重新掌管世界。

之后在天界胡作非为的须佐之男被驱逐出高天原，在人界的出云国利用父亲的十拳剑斩杀了魔物「八歧大蛇」，在斩断八歧大蛇最后一条蛇尾的时候，十拳剑受损，意外发现蛇尾中的神剑 ——— 「天之丛云剑」（草薙剑），并将其赐予姐姐天照大神以求原谅与宽恕，之后须佐之男的身份由不懂事的母控小弟弟成为了日本神话中「勇武」的象征，同时三大神器 ——— 八咫镜、八尺琼勾玉、草薙剑也收集完成，在之后从须佐之男的子孙手中夺取了人界的统治权后被天照大神以掌管苇原中国的信物赐予「天迩岐志国迩岐志天津日高日子番能迩迩艺命」，也成为了日本皇室的三神器。

动画中的邪神三姐妹的名字：剑、镜、玉也取自这三大神器。~~wikipedia 上有说法说镜的真身是火神迦具土，不知道出处是哪里。实际上~~邪神剑的真身是天照大神，而邪神镜是由剑身上被舍弃的恶意被「惡德秘密結社」在神的基础上改造成的现代兵器机器人，邪神玉是被剑培养出的下一代最高神（作为次世代神所以具有很多奇怪的力量，比如可以使用啃食的技能突破天户岩，攻击被神格化的月读咒咒）。~~所以说镜其实是火神的子辈。~~我觉得镜与火神迦具土的唯一联系点就是在 EP6 中被月读咒咒用天羽羽斩重伤过。这里的天羽羽斩实际上就是打败八歧大蛇的十拳剑，十拳剑的别名很多，还有天之尾羽张、伊都之尾羽张什么的。

update0626: 今天看了动画最后一话，邪神镜真身是火神迦具土的说法来自玉藻前。神话中迦具土被父亲用十拳剑砍杀后溅在剑锋上的血化为了石拆神，根拆神等八位神，这也是邪神镜受制于玉藻前的石裂剑、根裂剑的原因。

从在 EP6 中被复活的月读咒咒声称她受到根之国王者的加护，持有打倒八歧大蛇，因诅咒一度折断，在死后世界被磨砺的不幸之刃，被神格化的弑神魔剑天羽羽斩。以及邪神剑提到的「根之国有我讨厌的人」「那个混蛋母控」「我那弟弟」来看，所说的根之国的王者就是须佐之男，但是在传统神话中没有须佐之男掌管根之国的说法，实际上在被姐姐原谅之后，须佐之男就来到人界，定居在出云国，与大国主神等子孙统治苇原中国，直至被天照大神抢夺回苇原中国的统治权。

其他零散的捏他还有名为「八歧大蛇 SNS」的社交游戏以及 EP3 前面的因幡之白兔。

PS: 根据记录文献的不同，日本神话的细节有不小的差别，这里的考据来源只是《古事记》。

Mescoda’s 2012

Mon, 31 Dec 2012 02:08:16 +0000

1 月：
入 iP4s
2 月：
去北京入职 QQ 美食产品组
回学校补考
3 月：
从 QQ 美食离职返校
放弃做 PM 的念头
4 月：
回武汉参加腾讯校招，拿到 ISUX 的重构 offer
5 月：
帮国内某个 NGO 组织做官网赚零花钱
6 月：
结束大三
7 月：
在中科院合肥研究所实习一周
拍下了「我在中科院全超导托卡马克核聚变实验装置控制大厅写代码」的照片
去深圳入职腾讯电商用户体验设计部
8 月：
到北京参加 HTML5 年会，和 nstal paramiao 一起做的 HTML5 游戏「Project Nolava」拿到 codejam 第二名
和 nstal Sirius 姐一起到香港参加「Comic World Hong Kong 34」
顺便跟店长面基
顺便入 iPod classic
9 月：
从腾讯离职回家
开始在 gengo 上做翻译任务玩
10 月：
参加百度校招，拿到前端 offer
收到腾讯的留用 offer
11 月：
考完大学最后一场考试
12 月：
做完大学最后一次课程设计

过去的 2012 年，读了 80 本书，看过 91 部电影，经历 17 次旅途，在 6 个城市间游荡。

先后在腾讯的两个部门做过两个职位的实习生；重新审视了过去的欲望也重新立下新的目标；参加了两次校招，很幸运都拿到 offer；收获了很多东西但亦失去了获得另外一些东西的可能。

此外今年还发生了其他许多事情，或者不值一提，或者还未到提及的时候。

就像以往许多时刻一样，未来依旧不可预料，但无论如何，步伐总是轻快了一些。

CSS3 Animation 操作总结

Tue, 30 Oct 2012 15:36:40 +0000

在腾讯实习的时候除了做产品妹子们提来的需求，还搞了个电商前端实验室的概念版出来，实体在内网运行，这里是 demo。

这是一个用于展示电商用户体验设计部前端自研工具的实验室，不考虑低级浏览器（为了更好的体验做成了 webkit only ，虽然我是 Firefox 控），是个 CSS3 Animation 密集型项目。

在 Animation 的处理上我采用的是添加 className 的方法，方便复用且不污染 html，每个动画效果都可以分为三个基本的步骤，用三种 className 来控制：

动画开始前的状态 className
动画过程中的过程 className
动画结束后的状态 className

区别市面上大多的只用 Animation 做渐进增强（类似呼吸 button 效果）的项目，这里需要状态 class，一来帮助处理动画前后元素的样式变化，二来也为可能存在的连续多个 Animation 提供方便。

一个栗子：list-item 的方形旋转为圆形的步骤为

动画开始前的状态 className：square-list-item
动画过程中的过程 className：squareRotate
动画结束后的状态 className：circle-list-item

顺便说下我的 className 命名规则：
连字符表示且仅表示层级关系；同级 className 赋予前缀表示模块；Animation 的过程 className 因为只通过 JS 赋予且只是中间量不长期存在 html 中，所以驼峰化。

具体对 Animation 的控制为触发事件后移除最初的状态 class，添加过程 class，动画执行完毕后移除过程 class，添加结束后的状态 class。

最初遇到的问题是，Animation 是异步的，所以如果有连续多个动画过程（例如 list-item 旋转结束后 list-item-detail-circle 才能呈现）就需要时间上的控制。

最初想到的是用 CSS3 原生的 animation-delay 属性，但一旦改动最初的动画时间就需要到 css 里修改之后所有的 delay，而且不利于独立每个效果帮助复用。

之后用 setTimeout ，相当于把 delay 时间提出到 JS 中控制，简单的搞下还行，写多了就越来越奇怪，除了不优雅外，依旧存在修改时间的问题，但是当时急着完成就先写了个函数简单处理了下然后上线了。

离职之后才发现 animationend 和 transitionend 事件，可以在 animation 和 transition 结束后绑定其他事件，解决了修改时间的问题。

浏览器事件名称差异的解决：


var VENDORS = ["Moz",'webkit','ms','O'];
var TRANSITION_END_NAMES = {
	"Moz" : "transitionend"
	,"webkit" : "webkitTransitionEnd"
	,"ms" : "MSTransitionEnd"
	,"O" : "oTransitionEnd"
}
var ANIMATION_END_NAMES = {
	"Moz" : "animationend"
	,"webkit" : "webkitAnimationEnd"
	,"ms" : "MSAnimationEnd"
	,"O" : "oAnimationEnd"
}
var css3Prefix,TRANSITION_END_NAME,ANIMATION_END_NAME;
var mTestElement = document.createElement("div");

for (var i = 0,l = VENDORS.length; i < l; i++) {
	css3Prefix = VENDORS[i];
	if ((css3Prefix + "Transition") in mTestElement.style) {
		break;
	}
	css3Prefix = false;
}

if(css3Prefix) {
	TRANSITION_END_NAME = TRANSITION_END_NAMES[css3Prefix];
	ANIMATION_END_NAME = ANIMATION_END_NAMES[css3Prefix];
}

animationend 之后，还有回调嵌套的问题。

多个 Animation 的连续很容易把代码写成这种糟糕的样子，


elemA.addEventListener(ANIMATION_END_NAME,function() {
	elemA.doSth();
	elemB.addEventListener(ANIMATION_END_NAME,function() {
		elemB.doSth();
		elemC.addEventListener(ANIMATION_END_NAME,function() {
			elemC.doSth();
		})
	})
})

我写了个 MesAnimateEffect 类，用来设定动画效果。对于连续的动画，可以用 runAnimateList 来保证一个接一个的触发，细节上有 node 的影子。


function EventEmitter() {
	this.events = {};
}
EventEmitter.prototype.on = function(eventName,callback) {
	if(this.events[eventName] instanceof Array) {
		// pass
	} else {
		this.events[eventName] = [];
	}
	this.events[eventName].push(callback);
}
EventEmitter.prototype.emit = function(eventName) {
	if(this.events[eventName] instanceof Array) {
		var callbacks = this.events[eventName];
		for(var i = 0,l = callbacks.length;i < l;i++) {
			callbacks[i]();
		}
	}
}

function MesAnimateEffect(elem,classList,stopP) {
	EventEmitter.call(this);
	this.elem = elem;
	if(classList instanceof Array) {
		this.prev = classList[0];
		this.process = classList[1];
		this.next = classList[2];
	} else {
		this.prev = classList.prev.join(" ");
		this.process = classList.process.join(" ");
		this.next = classList.next.join(" ");
	}
	
	this.stopP = stopP || false;	
}
MesAnimateEffect.prototype = new EventEmitter();
MesAnimateEffect.prototype.start = function() {
	var self = this;
	(this.elem).removeClass(this.prev).addClass(this.process);
	(this.elem).unbind(ANIMATION_END_NAME).bind(ANIMATION_END_NAME,function() {
		(self.elem).removeClass(self.process).addClass(self.next);
		self.emit("end");
	})
	return this;
}

function runAnimateList() {
	var animateList = arguments;
	var length = animateList.length;
	for(var i = 0;i < length;i++) {
		if(animateList[i+1]) {
			animateList[i].on("end",(function(num) {
				return function() {
					if(typeof animateList[num+1] == "function") {
						animateList[num+1]();
					} else {
						animateList[num+1].start();
					}
				}
			})(i))
		}
	}
	animateList[0].start();
}

现在处理这种连续 Animation 只需要先设定具体的效果，然后用按顺序添加为 runAnimateList 的参数，有了把回调嵌套拉平的感觉。

一个栗子，list-item 的完整旋转显示内容过程


var forwardEffect = new MesAnimateEffect($this,["square-list-item",forwardClassName,"circle-list-item"]);

var innerShowEffect = new MesAnimateEffect($this.find(".list-item-detail-circle"),["","detailCircleShow",""],true);

runAnimateList(forwardEffect,innerShowEffect,function() {
	if($this.hasClass("circle-list-item")) {
		$this.find(".list-item-detail").removeClass("hide-list-item-detail").addClass("show-list-item-detail");
	}
});

写完之后发给基友，被指责了临时写 list 还是麻烦。。 orz
等过段时间再监视一遍

Instaread 的中文字体选择

Mon, 08 Oct 2012 13:10:38 +0000

最近在做的 Instaread 是个在线阅读风格的东西。

Instaread 的正文文字 CSS 是这样的：


color: #333;
font: 18px/1.7 "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft YaHei",sans-serif;
letter-spacing: 0.5px;
text-align: justify;
word-wrap: break-word;

此外还提供了宋 / 黑体转换，简 / 繁转换和夜晚阅读模式的键盘快捷键。

以前看过很多理论资料说衬线比非衬线字体在阅读上效果更好，因为衬线本身可以使字体的特征更加突出，有时候即使文字的上 / 下部分模糊，仍然可以被识别。我个人在阅读长篇英文上的经验也告诉自己：“大段文字的阅读还是用衬线保险，Helvetica 这种一眼看上去棒极了，逐字读的时候就不一定好了”。

但是除了字体上的衬线和非衬线以外，阅读体验还与颜色、字号、行距、PPI、排版、屏幕种类、分辨率、系统渲染等其他许多因素有关。而且汉字区别与使用罗马字母的印欧语系，仅仅使用衬线和非衬线作为区分是简单甚至有些不负责任的（Windows 下其实也没有实际上的衬线中文简体，所谓的中易宋体只是点阵字体而已）。根据自己在 Windows 和 Linux 下的实际体验，Instaread 默认采用大字号的黑体系列，同时也为看惯了 Windows 下中易宋体的同学提供了切换工具。

中易宋体（SimSun，就是 font-family 设为宋体或 \5b8b\4f53 或 simsun 时 Windows 对应的字体）是 Windows 下长久以来唯一能作为正文阅读的字体，它的一个特点是在 18px 以下是点阵，18px 及以上是轮廓，只有 18px 及以上的中易宋体才能触发 Windows 的 Cleartype，渲染为亚像素的平滑状态，尽量还原衬线字体的风格，不然大字号的中易宋体根本没法看。（ XP 默认没有开启 Cleartype，对于 Windows 用户来说，想要字体上的更好体验除了装 Mactype 之外其实就是开启 Cleartype 了）

简中黑体系列在各平台都有不同的字体：

Windows：Microsoft YaHei（微软雅黑）。是微软从 Vista 开始以 100刀 / 字的价格做了针对 ClearType 的 hinting 开发出来的字体。算是 Windows 下最好的简体字体了，也是 Instaread 的 Windows 默认字体。但是大段文字的排版下很有压迫感，需要增加字符间距。

Mac：从 OS X 10.6 开始携带了 Hiragino Sans GB（冬青黑体简体中文）。此外还有 STXihei（华文细黑）、STHeiti（华文黑体）和据说质量很差的 Hei。冬青黑体是是大日本 Screen 和北京汉仪合作开发的简体中文字体，衍生于日文字体 Hiragino Kaku Gothic 。比之前 Mac 下默认的华文黑体系列好很多，据说也是目前最好的简体中文字体。10.6 之前一些果粉网页的 font-family 甚至会指定用 Hiragino Kaku Gothic Pro 或者 Hiragino Kaku Gothic 这些日文字体（尽管简体字不全，且汉字是日本标准）来提升体验。

Linux：WenQuanYi Zen Hei（文泉驿正黑）和 WenQuanYi Micro Hei（文泉驿微米黑）。均缘起于文泉驿项目，文泉驿微米黑据说是 Linux 下最好的简体中文字体。

以上是考虑兼容性的廉价解决方案，土豪们可以直接去justfont买信黑体用。

字体之外，颜色上使用了 #333，相对 #000 更加柔和。

字号上继承了我的大号趣味，也保证在中易宋体模式下触发轮廓字体还原衬线风格。

豆瓣新首页。。果断上插件

Wed, 03 Oct 2012 16:28:33 +0000

豆瓣首页迎来了新的样子。

阿北说：“豆瓣没办法百分百准确地猜你喜欢的东西，所以碰到猜不对的，请不要生气。下次可能就对了。”
好吧，那我只好把猜错的隐藏起来了。

tgm老师说：“现在，你可以把感兴趣的内容（可选的有：相册、书、电影、音乐、同城活动、日记、线上活动）添加到首页，然后连续地浏览豆瓣给你的推荐。”
我不太明白这个连续的意思，所以就只好加个日记展开了。

Firefox 用户安装 GreaseMonkey 后，去 http://userscripts.org/scripts/show/149155 安装插件

Chrome 用户安装 Tampermonkey 后，去 http://userscripts.org/scripts/show/149155 安装插件

安完之后刷新首页。

安装 Tampermonkey 出现“此计算机不支持该应用。已停止安装”：试试更新 Chrome （右上角扳手-关于 Chrome ）。

360极速，遨游3，QQ浏览器，搜狗高速浏览器：点击网址输入框右端的“切换至高速（或极速）模式”后试试用 Chrome 的方法安装。

360安全，遨游2，腾讯TT，世界之窗浏览器：升级到最近的双核版，然后参照上一条。

Farewell letter

Wed, 04 Jul 2012 12:28:17 +0000

上次写博客是在去年，写完之后就是期末考试，然后回家过年，之后匆匆开始今年的生活。

这期间：
2月1号去北京加入QQ美食产品组
2月底回学校补考
3月底离职
4月中旬回武汉参加校招，拿到ISUX的重构offer
4月底回学校

我在《Mescoda’s 2011》里留下这样的话，“明年会以PM的身份去大公司实习参与实际的产品流程，然后决定一些更重要的事情”，这便是我做出的决定。

我得承认上面这段话很容易给人一种一切都在规划中的洁癖感，但我没有提到的是在去年那句话的前面我也写道“今年对未来的方向更加清晰”，现在看来这无疑是一句屁话，因为现在的我已经没有做产品策划的念头了。

过去的一年，或者过去更长的时间里，我专心地想做好一个PM，我做了一些事情，每次做完都不暇停留，接着就去往未来。然后，我在这样的不暇停留中忘记了自己的初心。

我没有任何否定的意思，在这段时间里，我读了一些书，认识了一些人，尝试了新的规划，也对自己的生活有了新的理解，我从根本上永远不再是一年前的我了。任何成长的过程都是美好并值得回忆的，只是现在又到了需要“知道”自己的时候。

我并不讨厌做产品，把自己创造的东西做得尽可能好用是我的追求之一，只是把产品职位独立出来的大公司做法和互联网行业高速发展带来的门槛低下让我觉得做一个专职的产品策划不能够对产品倾注我期望多的东西，到最后这个产品里也很难留下我希望留下的东西。

我的初心是创造出有趣有用的东西，让别人用，让别人喜欢，方便别人的生活，让别人感受到我在产品中融入的一些个人的东西。产品是我的目的，但就算世界热闹起来了，不是用自己的手还是不行的。

我似乎绕了好大的圈子，才重新准备出发，若问何故，便是陌上少年来自迟。我或许算个程序员，可命运自有时间表，恰似夜宴早不了。

接下来我会去深圳，一直以来我都对这个临近香港并且同人活动频繁并且被誉为雌都的城市带有好感，接下来我会做buy.qq.com的重构工作，生命不息，奋斗不止，未来当然依旧不可预料，然而无论如何，步伐总是轻快了一些。

douban_procrastination_helper — 拖延症患者的福音

Wed, 23 May 2012 08:08:05 +0000

一款具有划时代意义的产品隆重面世，douban_procrastination_helper 简直就是拖延症患者的福音。

缘起是一个月以前，我看到的一条广播，当时就想着做出来，结果等意识到的时候已经过去一个月了。

老实说，到几岁才发现自己患有拖延症，这类无聊话题对我而言根本不值一提。不过，要说我是从何时起开始相信豆瓣的想读列表完全是个装饰，我能确定地说，我从一开始就坚信着。

现在好了，你可以在刷广播的时候

在自恋的时候

在找书的时候

在豆瓣猜你的时候

在豆邮的时候

在同城的时候

在看书评的时候

在小站的时候

甚至是在约炮的时候

都能看到你到底积累了多少要读的书啦。

没错，最终目的就是产生一种被逼到墙角四目相对无处可藏的感觉。

Firefox用户安装GreaseMonkey插件后，去http://userscripts.org/scripts/show/133988安装插件
Chrome用户安装Tampermonkey插件后，去http://userscripts.org/scripts/show/133988安装插件

另外如果你刷着刷着突然发现提醒消失了，不要担心，这只是说明你已经无药可救了（其实是豆瓣API的请求限制）。

Update ：

Chrome安装后没有效果：先确认Tampermonkey插件和脚本都已经正确安装并启用了，然后重启Chrome试试，注意多刷新几次豆瓣的页面。
安装Tampermonkey出现“此计算机不支持该应用。已停止安装”：试试更新Chrome（右上角扳手-关于chrome）。
360极速，遨游3，QQ浏览器，搜狗高速浏览器：点击“网址输入框右端”的“切换至高速（或极速）模式”后可以试试用chrome的方法安装。
360安全，遨游2，腾讯TT，世界之窗浏览器：升级到最近的双核版，然后参照上一条。

ver1.1更新：

不用担心豆瓣API的请求限制了，书影音全部支持
优化视觉
自动更新

只有单一需求的可以用

book_only ver：http://userscripts.org/scripts/show/134088
movie_only ver：http://userscripts.org/scripts/show/134054
music_onlu ver：http://userscripts.org/scripts/show/134090

新主题 ohlife

Tue, 31 Jan 2012 09:33:52 +0000

近况是入了觊觎很久的4S，拿回家就同步了400个APP进去，每次提到苹果都必定要装的逼是：韩寒十七岁的时候怎么就不能写出那样的句子，老子当年十四岁的时候就已经是苹果用户了。

然后旧主题实在看不下去了，于是做了个新的出来，如你所见，整个UI是仿照在线日记本 ohlife.com 的，我很喜欢ohlife的风格，也因为自己配色和PS无能，于是直接rip+微创新（html5、responsive web design）了一个出来。