聊聊 Unicode 中的组合字符(Combining Character)

2019-09-03 by Dron

在字体排印学中,组合字符(Combining Character)是用来改变其它字符所用的字符,这些字符可以添加到目标字符周围或覆盖目标字符,例如汉语拼音字母「ü」上面的两个小点,或「á」、「à」字母上面的音标。

组合字符通常的用法为:将组合字符 置于需要修饰的目标字符后边,使目标字符被渲染(或打印)成相应结果。

一组你值得拥有的 Markdown 中混用 HTML 案例

2019-08-23 by Dron

Markdown 基础语法(见附录)已经无法满足日益丰富的信息内容,好在 Markdown 支持直接写 HTML,让扩展成为可能。

本文罗列一些常见的、实用的扩展案例,尝试设定规约,通过用少量的 HTML 代码作为 Markdown 的补充来辅助排版,并且保持简明直观的语义。

如果你是一个完美 Markdown 控,对于混用 HTML 的情况实在无法接受的话,可以不用往后阅读了。

Map 的两个小扩展

2018-09-03 by Dron

在以前,实现数据映射,我们利用给对象属性赋值,就像这样:

var mapping = Object.create( null );
mapping[ key ] = value;

ES6 的 Map/WeakMap 提供了更为便利及语义化的用法,功能更加强大,key 支持所有数据类型:

const mapping = new Map;
mapping.set( key, value );

通过继承 Map/WeakMap,很容易扩展功能,以 Map 为例,本文讲述一个带 过期控制持久化 能力的 Map 扩展。

三门问题和 JavaScript 仿真实验

2017-05-20 by Dron

1990 年 9 月美国《广场杂志》的「请教玛丽琳」专栏,曾刊登如下逻辑题:

假设你在进行一个游戏节目。现给三扇门供你选择:一扇门后面是一辆轿车,另两扇门后面分别都是一头山羊。你的目的当然是要想得到比较值钱的轿车,但你却并不能看到门后面的真实情况。主持人先让你作第一次选择。在你选择了一扇门后,知道其余两扇门后面是什么的主持人,打开了另一扇门给你看,而且,当然,那里有一头山羊。现在主持人告诉你,你还有一次选择的机会。那么,请你考虑一下,你是坚持第一次的选择不变,还是改变第一次的选择,更有可能得到轿车?

博客新增标签云

2016-11-27 by Dron

标签,是对一件事物的标志性描述,通常都会采用相关性很强的关键字,以便于检索和分类,网络上的应用已然十分广泛。

在此前,我对标签并不感冒,所以我的文章一直以来都从不用标签来管理,也不加任何分类,直到前天与同事聊天,当被问到我的博客都写些什么内容时,我竟一时无法很好回答。

现在再问我同样的问题,我会直接让他去看看这个页面 —— 标签云

这是我突然加上去的功能,与传统博客标签最大的区别在于,它并不是我手动打上去的,而是写程序自动算出关键字,再综合所有文章的结果得出。

火拼乒乓球

2016-11-21 by Dron

刚把今年 6 月份写的一个游戏稍加整理发到了网站上 —— 火拼乒乓球

我机器上有大量的半成品的项目,都是脑子一热写的,过了兴奋劲之后,再也不想去搭理了,乒乓球就是其中一个:把最主要的游戏流程写完,直接就是封存了好几个月,差的游戏结束场景至今也并未补上,偷懒做个「再来一发」链接回到首页发布了事,算是给自己一个交代。

其实,现在要在维护这个游戏已经有点困难了,这将近半年的时间,想到代码要重新读一遍就头疼,而且这半年来,我个人喜好的变化不少,早已完全无热情。

放上来让它自生自灭,相信过不了多久,等浏览器升级若干个版本,兼容性问题就会慢慢显露出来。

服务器迁移小记

2016-11-06 by Dron

上个月,2016 杭州云栖大会召开,阿里云宣布云产品全线打折,刚好我的服务器 12 月到期,顺手就购入三年,真的很便宜。

本站一直用的万网虚机,记不清几年了,原来的技术方案是 PHP + MySql,新的服务器上,我准备部署 Node + MongoDB,也就引发了这篇文章所述的事情。

图片 RGBA 拾色器

2016-05-24 by Dron

前端同学在切页面时,很多简单效果可以直接 CSS3 实现掉,这样就不必使用图片了,大大减少图片处理的时间。

市面上的拾色器,包括 PhotoShop 中的吸管,都没有提供图片像素中 Alpha 通道的值,遂用 <canvas>getImageData 方法简单实现了个在线版,有需要的同学请自行收藏。

getImageData 方法返回画布上指定矩形区域的 ImageData,包括该区域中所有像素点的 R、G、B、A 四个通道的颜色信息。上一篇文章 也提到它。

简述年会新春特别奖的前端实现

2016-05-17 by Dron

回乡心切,去年年底我早早的就撤了,年会并没有参加,亲手为年会定制的一个烟花抽奖程序——新春特别奖,年会时的现场秀也因此没能感受到,遗憾之余听说 @文龙 中了头奖,心里平衡了许多:三天时间的开发总算没白忙活!

写本文前,我将程序简单做了下脱敏和静态分离:

进入页面后,片头动画开始播放,「你」划燃火柴,转身面向炮仗,进入等待状态(此时应该跟观众唠唠家常,提高下神秘感);待唠瞌尽兴,「你」将火柴移向并点燃引信,待引信燃尽,炮仗应声升空,爆炸,焰火奇迹般的组成一个花名(中奖者),拍照留念,背景持续燃放烟花,完毕。

本文将介绍该效果的前端实现。

悄悄发布个押韵字查询工具

2016-05-14 by Dron

对联、打油诗词一直是我的兴趣,平时代码之余,我也常常鼓捣些打发时间,2011 年,我曾经有篇 博文 整理了之前写过的句子,现在看来,已经自觉太小儿科了些。

押韵是诗歌中很重要的属性,韵脚押得好能使诗歌念起来朗朗上口,寻找押韵字是个很大麻烦,所以我写了一个 小工具 用来解决这个问题。

码农自己当老家新厝的设计师

2016-05-06 by Dron

这篇文章迟发了大概一年半的时间。

有朋友已经知道这段时间我在做什么了,是的,我在农村老家新筑起了一个巢,目前施工(毛坯 + 装修)基本完成,剩下极少的收尾,而真正令我兴奋的:房子是我亲手设计的!

前年在考虑先买房还是先在老家自建时,犹豫得比较久,不过能自己体验一把设计,想想就激动,内心便十分笃定了。

生成任意长度的圆周率

2016-04-25 by Dron

周末,闲来无事折腾了一个任意长度的圆周率 生成器,代码十分好懂不解释了(百行未压缩,自己读),原理见 梅钦类公式

这是我写过的第三版与 PI 相关的代码。

第一版的博文在百度空间(百度空间已经倒闭看不到了),根据正方形与内接正圆的比值为 4:PI 抽随机点演算;第二版见《用 JavaScript 演算圆周率 PI(二)》。前两版均受浮点计算精度限制,只有现在这版是可以生成任意长度的,不过长度越长,计算起来越慢,测试需谨慎。

(本文完)

小球是怎么落入指定球洞的?

2016-01-18 by Dron

这篇文章首发在 淘宝前端团队博客,现在转发到作者自己(也就是我本人)的博客上。

不知大家是否还有印象,淘宝玩法平台(一个内部系统)前不久发布了一款新的游戏 —— 小球入洞,该游戏伴随着淘宝技术部去年双 11 当天举办的一次抽奖活动,第一次在大家面前亮相。

游戏支持预先设定必中奖项:离开发射器的小球在来回弹跳一阵之后,不偏不倚的落入到指定奖项对应的球洞中。体验该功能,可在游戏测试页右侧选项区进行如下的设置:

本文试着介绍游戏的这个「掉落至指定球洞」的功能,讲的偏思路,并不涉及公式和代码,我尽可能直白,如果你觉得晦涩,可以在评论处我们接着探讨。在继续之前,为了表达上的方便,我将对游戏在视觉上进行如下图的划分:

Math.random() 二三事

2015-12-07 by Dron

这篇文章首发在 淘宝前端团队博客,现在转发到作者自己(也就是我本人)的博客上。

随机数是统计学领域的一个重要概念,对于游戏来说同样意义非凡,用好随机数,可以使你的游戏更真实、更人性、富有魅力。

千行代码实现 IE8 兼容的仿 angular 指令式模板控制器

2015-05-19 by Dron

Angular 出来的时候火了一阵,现在受到 React 的冲击显得有些冷却,之前我只是听说,也听过 @隐若 老师的一些分享,但一直没有机会用上或深入了解他的特性。

直到上个月初,内部要做个 xx 平台,平台上的表单功能有些繁琐,所有表单域都是根据配置项动态渲染出来的,验证、联动什么的也都是配置。初步判断用 Angular 的指令和双向数据绑定可以很好满足,不过后来并没有直接用上 Angular,具体原因就不在这儿展开了。

web 另类方法实现“另存为”功能

2013-05-31 by Dron

HTML5 的 FileReader 带给我们很强大的文件只读访问能力,可是在 HTML5 新增的 JS 中却没有发现有方便的另存到本地文件的相关 API,以往的办法要么调用浏览器的 save as 命令(兼容程度不详),要么将内容提交到服务器,由服务器附加 content-type: application/octet-stream 头并原文打回来实现。

偶然间,发现 HTML5 的 <a> 标签有了一个新属性,叫 download,取值是一个文件名,当一个带有 download 属性的 <a> 链接被点击时,其形为不再是一个网页跳转,而变成将目标以指定的文件名另存到本地,兼容性还不错的样子。

<a>href 值是可以随便改的,也就是说要另存的文件内容可以通过 JS 的方式轻松生成,对其指定一个 DataURI 就可以决定要保存的文件内容了,配合 Base64,甚至可以产生一个二进制文件!

原理简单,实现无比容易,就不在这儿贴代码了,戳我可以看看 live demo