在字体排印学中，组合字符（Combining Character）是用来改变其它字符所用的字符，这些字符可以添加到目标字符周围或覆盖目标字符，例如汉语拼音字母「ü」上面的两个小点，或「á」、「à」字母上面的音标。组合字符通常的用法为：将组合字符置于需要修饰的目标字符后边，使目标字符被渲染（或打印）成相应结果。查看全文... ...继续阅读 (17)

Markdown 基础语法（见附录）已经无法满足日益丰富的信息内容，好在 Markdown 支持直接写 HTML，让扩展成为可能。本文罗列一些常见的、实用的扩展案例，尝试设定规约，通过用少量的 HTML 代码作为 Markdown 的补充来辅助排版，并且保持简明直观的语义。如果你是一个完美 Markdown 控，对于混用 HTML 的情况实在无法接受的话，可以不用往后阅读了。查看全文... ...继续阅读 (27)

在以前，实现数据映射，我们利用给对象属性赋值，就像这样：var mapping = Object.create( null ); mapping[ key ] = value;ES6 的 Map/WeakMap 提供了更为便利及语义化的用法，功能更加强大，key 支持所有数据类型：const mapping = new Map; mapping.set( key, value );通过继承 Map/WeakMap，很容易扩展功能，以 Map 为例，本文讲述一个带过期控制和持久化能力的 Map 扩展。查看全文... ...继续阅读 (22)

三门问题1990 年 9 月美国《广场杂志》的「请教玛丽琳」专栏，曾刊登如下逻辑题：假设你在进行一个游戏节目。现给三扇门供你选择：一扇门后面是一辆轿车，另两扇门后面分别都是一头山羊。你的目的当然是要想得到比较值钱的轿车，但你却并不能看到门后面的真实情况。主持人先让你作第一次选择。在你选择了一扇门后，知道其余两扇门后面是什么的主持人，打开了另一扇门给你看，而且，当然，那里有一头山羊。现在主持人告诉你，你还有一次选择的机会。那么，请你考虑一下，你是坚持第一次的选择不变，还是改变第一次的选择，更有可能得到轿车？这个问题即著名的蒙提霍尔问题，也叫三门问题。梳理一下它的流程如下：玩家从三个门中选择一个门，记为门a。主持人选择另一个门，记为门b，门b里面是一头山羊，并且问玩家是否变更选择。玩家如果变更选择，即选了门a、门b以外的第三个门，记为门c；如果不变更选择，玩家仍然选门a。问题是：选门a和门c，哪个更大的概率得到轿车？答案及解释很早看到过这题，一直都觉得没有差别，选哪个门的概率都是1/3，最近同事间又在讨论起这个话题，让我改变了主意。正确的答案是：变更选择后，命中轿车的概率是2/3，命中羊的概率是1/3。原因是，主持人打开门b之后，剩下的两个门（门a和门c），正好是一个后面是羊，另一个后面是轿车。也就是说，变更选择会导致：玩家本来选到羊会变成选到轿车，而本来选到轿车变成选到羊。三扇门其中 ...继续阅读 (28)

1990 年 9 月美国《广场杂志》的「请教玛丽琳」专栏，曾刊登如下逻辑题：假设你在进行一个游戏节目。现给三扇门供你选择：一扇门后面是一辆轿车，另两扇门后面分别都是一头山羊。你的目的当然是要想得到比较值钱的轿车，但你却并不能看到门后面的真实情况。主持人先让你作第一次选择。在你选择了一扇门后，知道其余两扇门后面是什么的主持人，打开了另一扇门给你看，而且，当然，那里有一头山羊。现在主持人告诉你，你还有一次选择的机会。那么，请你考虑一下，你是坚持第一次的选择不变，还是改变第一次的选择，更有可能得到轿车？查看全文... ...继续阅读 (20)

在很久很久以前，我写过一个A 星寻路的算法，那时候初学算法。今晚，突然想通了一些事情，灵感激增，又迅速码了一个最短路径的 demo。可作为各种园区自建导航系统，适合用于各种个性化地图，欢迎洽谈合作 ：）查看全文... ...继续阅读 (17)

在很久很久以前，我写过一个A 星寻路的算法，那时候初学算法。今晚，突然想通了一些事情，灵感激增，又迅速码了一个最短路径的 demo。可作为各种园区自建导航系统，适合用于各种个性化地图，欢迎洽谈合作 ：） ...继续阅读 (11)

在很久很久以前，我写过一个A 星寻路的算法，那时候初学算法。今晚，突然想通了一些事情，灵感激增，又迅速码了一个最短路径的 demo。可作为各种园区自建导航系统，适合用于各种个性化地图，欢迎洽谈合作 ：） ...继续阅读 (10)

上个月，2016 杭州云栖大会召开，阿里云宣布云产品全线打折，刚好我的服务器 12 月到期，顺手就购入三年，真的很便宜。本站一直用的万网虚机，记不清几年了，原来的技术方案是PHP + MySql，新的服务器上，我准备部署Node + MongoDB，也就引发了这篇文章所述的事情。站点上的东西不多，大多数都是纯静态内容，迁移起来很方便，资源路径替换替换也就好了，其它若干PHP页面，也都寻找最省事的方案，几个简单原则：为了不影响搜索引擎的收录，所有原来的URL保证全部可访问；所有页面基本功能正常；所有的统计埋点不受影响；Server基本思路是动静分离，借助connect 模块分配路由，使用connect-modrewrite 中间件做重定向：/api/**下的都是JSON或JSONP接口，使用mongodb 模块读写数据库，向全站所有应用提供数据服务；其它部分都是纯静态，使用vhost 中间件分割虚拟主机，使用serve-static 中间件驱动每个站点；博客以前用的WordPress， 因为一年下来也没写两篇，基本接近荒废，纯静态就够用，现在换成Hexo，走线下编译。搜索功能成了问题，本想在/api/**下做个服务，懒得写代码就放弃了，最终方案是借助Hexo的hexo-generator-json-content 插件生成JSON索引，改造NexT主题内置的local-server界 ...继续阅读 (18)

刚把今年 6 月份写的一个游戏稍加整理发到了网站上 ——火拼乒乓球。我机器上有大量的半成品的项目，都是脑子一热写的，过了兴奋劲之后，再也不想去搭理了，乒乓球就是其中一个：把最主要的游戏流程写完，直接就是封存了好几个月，差的游戏结束场景至今也并未补上，偷懒做个「再来一发」链接回到首页发布了事，算是给自己一个交代。其实，现在要在维护这个游戏已经有点困难了，这将近半年的时间，想到代码要重新读一遍就头疼，而且这半年来，我个人喜好的变化不少，早已完全无热情。放上来让它自生自灭，相信过不了多久，等浏览器升级若干个版本，兼容性问题就会慢慢显露出来。 ...继续阅读 (24)

背景标签，是对一件事物的标志性描述，通常都会采用相关性很强的关键字，以便于检索和分类，网络上的应用已然十分广泛。在此前，我对标签并不感冒，所以我的文章一直以来都从不用标签来管理，也不加任何分类，直到前天与同事聊天，当被问到我的博客都写些什么内容时，我竟一时无法很好回答。现在再问我同样的问题，我会直接让他去看看这个页面 ——标签云。这是我突然加上去的功能，与传统博客标签最大的区别在于，它并不是我手动打上去的，而是写程序自动算出关键字，再综合所有文章的结果得出。这里值得一题的是，上图标签云的效果，用的是一台湾同胞写的一个wordcloud2.js，效果相当赞的说。自动提取关键字我的算法也许没有各位想象中的复杂，既没有用到词库，也不需要语料库，只是简单提取 TOP 词频而己：从头到尾扫描文章，首先 10 个字 10 个字扫，再 9 个字，8 个字，…，直到 2 个字截止，经过词频统计，最高的前 10 个词汇作为一篇文章的关键字。这其中会涉及几个细节问题：英文我的博客文章都是中文为主，英文字母和单词直接过滤，不让它们出现在关键字当中。当然，如果说英文单词也要做为关键字，我仍然不采用英文词库，而直接以\b作为单词边界简单分词，这个功能点也许将来会做升级，目前没有详细计划。无意义的虚词「的、地、得、着、了、过」这种，由于扫描之前不做分词，扫描结果可想而知会包含大量的虚词，使得关键字很不理想，我 ...继续阅读 (18)

标签，是对一件事物的标志性描述，通常都会采用相关性很强的关键字，以便于检索和分类，网络上的应用已然十分广泛。在此前，我对标签并不感冒，所以我的文章一直以来都从不用标签来管理，也不加任何分类，直到前天与同事聊天，当被问到我的博客都写些什么内容时，我竟一时无法很好回答。现在再问我同样的问题，我会直接让他去看看这个页面 ——标签云。这是我突然加上去的功能，与传统博客标签最大的区别在于，它并不是我手动打上去的，而是写程序自动算出关键字，再综合所有文章的结果得出。查看全文... ...继续阅读 (18)

背景标签，是对一件事物的标志性描述，通常都会采用相关性很强的关键字，以便于检索和分类，网络上的应用已然十分广泛。在此前，我对标签并不感冒，所以我的文章一直以来都从不用标签来管理，也不加任何分类，直到前天与同事聊天，当被问到我的博客都写些什么内容时，我竟一时无法很好回答。现在再问我同样的问题，我会直接让他去看看这个页面 ——标签云。这是我突然加上去的功能，与传统博客标签最大的区别在于，它并不是我手动打上去的，而是写程序自动算出关键字，再综合所有文章的结果得出。这里值得一题的是，上图标签云的效果，用的是一台湾同胞写的一个JS 库，效果相当赞的说。自动计算关键字我的算法也许没有各位想象中的复杂，其实只是分析文章中出现次数最多的 TOP 词汇而己：从头到尾扫描文章，首先 10 个字 10 个字扫，再 9 个字 9 个字扫，…，直到 2 个字截止，统计出现次数最多的词汇，提取前 10 个关键字作为一篇文章的关键字，这其中会涉及几个细节问题：英文我的博客文章都是中文为主，英文字母和单词直接过滤，不让它们出现在关键字当中。当然，如果说英文单词也要做为关键字，我会直接以\b匹配单词边界为准。无意义的虚词「的、地、得、着、了、过」这种，由于扫描之前不做分词，扫描结果可想而知会包含大量的虚词，使得关键字很不理想，我的处理方法是过滤掉虚词，最终得到的关键字看起来就像是一些有意义的词组。这里有篇文章罗列了 ...继续阅读 (20)

刚把今年 6 月份写的一个游戏稍加整理发到了网站上 ——火拼乒乓球。我机器上有大量的半成品的项目，都是脑子一热写的，过了兴奋劲之后，再也不想去搭理了，乒乓球就是其中一个：把最主要的游戏流程写完，直接就是封存了好几个月，差的游戏结束场景至今也并未补上，偷懒做个「再来一发」链接回到首页发布了事，算是给自己一个交代。其实，现在要在维护这个游戏已经有点困难了，这将近半年的时间，想到代码要重新读一遍就头疼，而且这半年来，我个人喜好的变化不少，早已完全无热情。放上来让它自生自灭，相信过不了多久，等浏览器升级若干个版本，兼容性问题就会慢慢显露出来。查看全文... ...继续阅读 (10)

刚把今年 6 月份写的一个游戏稍加整理发到了网站上 ——火拼乒乓球。我机器上有大量的半成品的项目，都是脑子一热写的，过了兴奋劲之后，再也不想去搭理了，乒乓球就是其中一个：把最主要的游戏流程写完，直接就是封存了好几个月，差的游戏结束场景至今也并未补上，偷懒做个「再来一发」链接回到首页发布了事，算是给自己一个交代。其实，现在要在维护这个游戏已经有点困难了，这将近半年的时间，想到代码要重新读一遍就头疼，而且这半年来，我个人喜好的变化不少，早已完全无热情。放上来让它自生自灭，相信过不了多久，等浏览器升级若干个版本，兼容性问题就会慢慢显露出来。 ...继续阅读 (22)

这篇文章迟发了大概一年半的时间。有朋友已经知道这段时间我在做什么了，是的，我在农村老家新筑起了一个巢，目前施工（毛坯 + 装修）基本完成，剩下极少的收尾，而真正令我兴奋的：房子是我亲手设计的！前年在考虑先买房还是先在老家自建时，犹豫得比较久，不过能自己体验一把设计，想想就激动，内心便十分笃定了。之前用 SketchUp（草图大师）倒腾过不少东西，它是 3D 建模的入门级软件，我喜欢它的简洁，相比其它建模软件更符合常人的思维，因而学习曲线极低，特别适合建筑设计。平面推拉等诸多特性可以快速产出模型，社区力量也很强大，Warehouse 上面有足量的共享模型供快速布景，虽然曲面功能有点鸡肋，不过借助三方的放样插件也能顺利完成。SU 专注于建模，它的渲染器十分简陋，对房子效果图的要求来说无法满足，必须借助三方的渲染器来产出成片，我当时调研了很多不同的渲染器，最终决定采用 Artlantis Studio，它同样也很简洁，速度与质量相对平衡些，可以渲染出照片级的图片，大众对它的评价是：SU 的天然渲染伴侣，当然也是我等业余选手的首选。2014 年 10 月份着手设计，由于在布局及外观上比较多的反复，直到第四个方案才最终定稿（2014-12-14），耗时一个多月，不过相比施工来说就太小巫了，去年三月廿一（2015-05-09）动的土，至今收尾用了接近一年的时间。下面带你参观下我的新房，这些都是 ...继续阅读 (16)

回乡心切，去年年底我早早的就撤了，年会并没有参加，亲手为年会定制的一个烟花抽奖程序——新春特别奖，年会时的现场秀也因此没能感受到，遗憾之余听说 @文龙 中了头奖，心里平衡了许多：三天时间的开发总算没白忙活！写本文前，我将程序简单做了下脱敏和静态分离：进入页面后，片头动画开始播放，「你」划燃火柴，转身面向炮仗，进入等待状态（此时应该跟观众唠唠家常，提高下神秘感）；待唠瞌尽兴，「你」将火柴移向并点燃引信，待引信燃尽，炮仗应声升空，爆炸，焰火奇迹般的组成一个花名（中奖者），拍照留念，背景持续燃放烟花，完毕。本文将介绍该效果的前端实现。内部代码开源流程走起来麻烦，就不给源码了，反正原理很简单。视频与画布实际上，整个过程分为 Video 视频和 Canvas 动画两部分，从进入页面起，到出现淘宝城背景之前，都属于时长 21 秒钟的 animate.mp4，写到这里，我仿佛听到先前以为是 CSS3 实现的同学发出「茄 qié」字的感叹！<divclass="container"><divid="video-container"><videopreloadsrc="animate.mp4"></video><canvas></canvas></div></div>PS：去年学了点视频制作还是能派上用场 ...继续阅读 (17)

这篇文章首发在淘宝前端团队博客，现在转发到作者自己（也就是我本人）的博客上。游戏回顾不知大家是否还有印象，淘宝玩法平台（一个内部系统）前不久发布了一款新的游戏 —— 小球入洞，该游戏伴随着淘宝技术部去年双 11 当天举办的一次抽奖活动，第一次在大家面前亮相。游戏支持预先设定必中奖项：离开发射器的小球在来回弹跳一阵之后，不偏不倚的落入到指定奖项对应的球洞中。体验该功能，可在游戏测试页右侧选项区进行如下的设置：本文试着介绍游戏的这个「掉落至指定球洞」的功能，讲的偏思路，并不涉及公式和代码，我尽可能直白，如果你觉得晦涩，可以在评论处我们接着探讨。在继续之前，为了表达上的方便，我将对游戏在视觉上进行如下图的划分：为什么需要指定球洞？做过抽奖 UI 组件的同学都知道，抽奖结果一定是由后端计算之后返回的，原因主要有两个：1）安全方面考虑，抽奖结果的产生过程不能在前端实现；2）只有中间服务才能更加准确的分配多端的抽奖结果。鉴于此，所有抽奖 UI 组件都必须满足：可事先抽得结果之后再播放动画（显示结果）。抽奖大转盘便是一个很典型的例子，在转盘滚动的时候，根据 AJAX 请求的返回，JS 其实已经知道它最终会停在哪个扇区上了。小球入洞是一个抽奖类 UI 组件，所以当然也必须支持指定结果的抽奖，那么问题来了，小球的整个过程并不是一段简单的动画，怎么才能使之落入到指定球洞呢？小球如何落入指定球洞？如上图 ...继续阅读 (14)

前端同学在切页面时，很多简单效果可以直接 CSS3 实现掉，这样就不必使用图片了，大大减少图片处理的时间。市面上的拾色器，包括PhotoShop中的吸管，都没有提供图片像素中 Alpha 通道的值，遂用<canvas>的getImageData方法简单实现了个在线版，有需要的同学请自行收藏。getImageData方法返回画布上指定矩形区域的ImageData，包括该区域中所有像素点的 R、G、B、A 四个通道的颜色信息。上一篇文章也提到它。 ...继续阅读 (13)

对联、打油诗词一直是我的兴趣，平时代码之余，我也常常鼓捣些打发时间，2011 年，我曾经有篇博文整理了之前写过的句子，现在看来，已经自觉太小儿科了些。押韵是诗歌中很重要的属性，韵脚押得好能使诗歌念起来朗朗上口，寻找押韵字是个很大麻烦，所以我写了一个小工具用来解决这个问题。对联诗词没有特色？不妨来点 Rap 绕舌？你说创作艰辛路途坎坷？肚里没点墨水全都白扯?药！药！切可闹！煎饼果子来一套？现在我来给你支个大招。从今往后写词不用美刀！这个工具你说屌或不屌？如此好玩，胜过大嫂！快速押韵帅到爆表！还不快点收藏以后好找？闲来无事找点乐子，这个工具你来使使，编首浪漫歌词哄哄妹纸，整点打油小诗教教孩子。 ...继续阅读 (17)

周末，闲来无事折腾了一个任意长度的圆周率生成器，代码十分好懂不解释了（百行未压缩，自己读），原理见梅钦类公式。这是我写过的第三版与 PI 相关的代码。第一版的博文在百度空间（百度空间已经倒闭看不到了），根据正方形与内接正圆的比值为 4:PI 抽随机点演算；第二版见《用 JavaScript 演算圆周率 PI（二）》。前两版均受浮点计算精度限制，只有现在这版是可以生成任意长度的，不过长度越长，计算起来越慢，测试需谨慎。（本文完） ...继续阅读 (16)

使用 node-webkit 将以前写的水果忍者打包成本地应用程序，纯闹着玩，为了练手 node-webkit，大家随意感受下。这里下载（含 windows/mac/linux 三个平台的版本）2013-06-64: PS 修改了链接，多谢光宇同学反馈 ...继续阅读 (19)

Tracker 需要移除页面的 HTML 注释节点，鉴于注释的复杂性，为了靠谱点，不使用正则了，顺手写了个获取 HTML 注释的工具函数：vargetHtmlCommentNodes =function(){varcn, push;cn =document.COMMENT_NODE;push = [].push;returnfunctionf(node){varresult, c, l, i;result = [];if( node.nodeType == cn )result.push( node );elseif( c = node.childNodes, l = c.length )for( i =0; i < l; i ++ )push.apply( result, f( c[ i ] ) );returnresult;}}();用法：getHtmlCommentNodes(document.documentElement ); ...继续阅读 (20)

有一些特定应用，在用户离开当前页面时会弹出一个对话框，询问是否真的离开，给用户多一次选择，以确保未完成的草稿得已保存。这种弹窗都是在页面的 onbeforeunload 事件里实现的，这个事件还可以用来发送统计请求。我今天在考虑这个问题时来了灵感，如果在这个事件里强制地址跳回本页会如何呢？于是我造了一段测试代码：window.onbeforeunload =function(){setTimeout(function(){ location.href ="#"; },0);};将上面的代码粘贴到任意网页的 console 中执行，神奇的事情发生了：点击该网页的其它链接，根本跳不走，其实是跳走了立刻又被跳了回来（查看控制台的网络面板可以验证）。如果是在地址栏上输入其它地址，回车后也会强制被替回来，有点意思。在 Chrome/Safari 中测试通过，Firefox 不通过，IE/Opara 未测试，有点暴力，不推荐使用。 ...继续阅读 (21)

上个月，2016 杭州云栖大会召开，阿里云宣布云产品全线打折，刚好我的服务器 12 月到期，顺手就购入三年，真的很便宜。本站一直用的万网虚机，记不清几年了，原来的技术方案是PHP + MySql，新的服务器上，我准备部署Node + MongoDB，也就引发了这篇文章所述的事情。查看全文... ...继续阅读 (29)

上个月，2016 杭州云栖大会召开，阿里云宣布云产品全线打折，刚好我的服务器 12 月到期，顺手就购入三年，真的很便宜。本站一直用的万网虚机，记不清几年了，原来的技术方案是PHP + MySql，新的服务器上，我准备部署Node + MongoDB，也就引发了这篇文章所述的事情。站点上的东西不多，大多数都是纯静态内容，迁移起来很方便，资源路径替换替换也就好了，其它若干PHP页面，也都寻找最省事的方案，几个简单原则：为了确保不被搜索引擎重新索引，所有原来的URL保证全部可访问；所有页面基本功能正常；所有的统计埋点不受影响；Server基本思路是动静分离，借助connect 模块分配路由，使用connect-modrewrite 中间件做重定向：/api/**下的都是JSON或JSONP接口，使用mongodb 模块读写数据库，向全站所有应用提供数据服务；其它部分都是纯静态，使用vhost 中间件分割虚拟主机，使用serve-static 中间件驱动每个站点；博客以前用的WordPress， 因为一年下来也没写两篇，基本接近荒废，纯静态就够用，现在换成Hexo，走线下编译。搜索功能成了问题，本想在/api/**下做个服务，懒得写代码就放弃了，最终方案是借助Hexo的hexo-generator-json-content 插件生成JSON索引，改造NexT主题内置的local-serve ...继续阅读 (23)

回乡心切，去年年底我早早的就撤了，年会并没有参加，亲手为年会定制的一个烟花抽奖程序——新春特别奖，年会时的现场秀也因此没能感受到，遗憾之余听说 @文龙 中了头奖，心里平衡了许多：三天时间的开发总算没白忙活！写本文前，我将程序简单做了下脱敏和静态分离：进入页面后，片头动画开始播放，「你」划燃火柴，转身面向炮仗，进入等待状态（此时应该跟观众唠唠家常，提高下神秘感）；待唠瞌尽兴，「你」将火柴移向并点燃引信，待引信燃尽，炮仗应声升空，爆炸，焰火奇迹般的组成一个花名（中奖者），拍照留念，背景持续燃放烟花，完毕。本文将介绍该效果的前端实现。内部代码开源流程走起来麻烦，就不给源码了，反正原理很简单。视频与画布实际上，整个过程分为 Video 视频和 Canvas 动画两部分，从进入页面起，到出现淘宝城背景之前，都属于时长 21 秒钟的 animate.mp4，写到这里，我仿佛听到先前以为是 CSS3 实现的同学发出「茄 qié」字的感叹！<divclass="container"><divid="video-container"><videopreloadsrc="animate.mp4"></video><canvas></canvas></div></div>PS：去年学了点视频制作还是能派上用场 ...继续阅读 (20)

重构 Tracker 时发现原来可以 break/continue 一个 label 块，就像这样：a: {alert(1);breaka;alert(2);}alert(3);参考：EcmaScript 规范 ...继续阅读 (8)

受浏览器的同源策略限制，开发环境中前端页面无法跨域使用线上数据，解决方法有很多种，典型的如中间夹了一层网络代理。我找了一下 Chrome 的选项，没有关于降低跨域限制的，于是想到了启动参数，果然在这里：open-a/Applications/Google\ Chrome.app --args --disable-web-security加这个参数启动 Chrome，访问任意页面，不再受同源策略限制，页面中的 JS 可以任意发送跨域网络请求。 ...继续阅读 (21)

有一些特定应用，在用户离开当前页面时会弹出一个对话框，询问是否真的离开，给用户多一次选择，以确保未完成的草稿得已保存。这种弹窗都是在页面的 onbeforeunload 事件里实现的，这个事件还可以用来发送统计请求。我今天在考虑这个问题时来了灵感，如果在这个事件里强制地址跳回本页会如何呢？于是我造了一段测试代码：window.onbeforeunload =function(){setTimeout(function(){ location.href ="#"; },0);};将上面的代码粘贴到任意网页的 console 中执行，神奇的事情发生了：点击该网页的其它链接，根本跳不走，其实是跳走了立刻又被跳了回来（查看控制台的网络面板可以验证）。如果是在地址栏上输入其它地址，回车后也会强制被替回来，有点意思。在 Chrome/Safari 中测试通过，Firefox 不通过，IE/Opara 未测试，有点暴力，不推荐使用。 ...继续阅读 (14)