号外号外，iSpriter 更新啦！

什么？你不知道 iSpriter 是什么？那你太 out 啦，必须先看看这个文章了。简单的一句话介绍：基于 NodeJs 的开源 CSS 精灵图合并工具，不用改变原有的 css 编写方式，就能自动帮你解决 css sprite 的合并问题。目前源码托管在 github（https://github.com/iazrael/ispriter），欢迎各位同学来一起完善。

由于最初写的时候不怎么注意代码自量，写得比较搓。在应用在几个项目之后，修复了一些 bug，发现再加新功能比较困难。最近终于下决心重构了下，并在重构的基础上增加了一些新特性。

话说昨天在写在线素描的时候，想着给画布加上些网格，就跟 PS 里面的一样。但是用 canvas 画是不行的（注：不是它不行……），图片又让我不齿，就作罢了。

一、引子

话说前阵子想把一张照片转换成素描，然后发个微博。结果发现 mac 上没找到能直接转换素描的软件（PS 不算，可要好几步呢），坑爹啊～～google 了下，Web 上竟然也是没有直接把照片转换成素描的东西，连让我包含期望的美图秀秀（Web 版）竟然都没有素描功能，T_T。

一、引子

根据雅虎的网站优化准则，合并页面用到的图片，可以减少加载时发起的 http 请求数目，可以加速页面加载。具体能提速多少，本人没测试过，也就不好说了。

话说这排手上的项目里用到的图片都怎么合并，并不是不想合并，而是一个个图片去拼实在是太累了啊。另外桂总做的 autosprite 又还没成型，未能支持旧有项目；自己做的 AutoSprites 也是一个烂摊子——java 写脚本功能的代码真不是一般的痛苦啊；至于炜哥的 GoPng 在线合图工具，说实话，这类需要人工定位图片的工具，我着实不喜欢。还是那句话，我可是个程序员呐，这种机械化无趣的工作就该交给电脑来完成，不然电脑是拿来干嘛的？

以前写过一篇博文，说了成熟用户的四种表现。最近跟朋友聊天又提起了这个话题，希望用户更加成熟已然成为国内互联网产品人员的一个共同愿望了。而在我看来互联网用户的成熟度主要体现在两个方面，一个是对于互联网的信任度，另一个则是对于互联网产品的理解和使用程度。

看看你的朋友在社交媒体中的分享，你能确定这些被分享的内容就是他们想要的吗？不一定。换个方法，直接问他想要的是什么，答案也许会不一样。

下面这张信息图来自 NetBase ，他们花了一年的时间监测社交媒体里的对话数据，把监测数据拿来和实际调查的数据相比较，会发现很多有趣的结果，我们可以这样了解人们 “此时此刻，到底想要什么。”

开篇

现在 Web 富应用越来越多, 越来越多网站朝单页面发展, 所有功能模块都在一个页面中创建. 作为一个合格的前端, 所负责的模块一定是逻辑跟 UI 分离的, 通常的做法就是页面代码编写成模板, 然后往模板填充数据并输出到页面上. 关于前端模板的介绍和使用我就不说了, 不了解的可以先看看这篇文章 (http://www.css88.com/archives/4564), 这里讨论下使用模板引擎引入的另外一个问题 (也不是 Bug 啦~) -- 页面模板代码放哪?

话说, 很久很久以前, 一直到不久前, 浏览器原生的 checkbox(复选框) 的样式大部分都不能改的, 在各个浏览器中的外观和行为都不一致, 这是一件相当让人蛋疼的事.

而在那个远古的蛮荒时代, 还生活着一种叫攻城师的生物, 每天被产品经理们强迫着, 想方设法让 checkbox 外观一统江湖, 苦不堪言.

在那个时代, css2 和 dom level2 风行, 却对 checkbox 束手无策, 苦逼的攻城师们只能用 JS 来模拟 checkbox 的行为, 无辜的 checkbox 只能灰溜溜的束之高阁~.~

文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为 css3 里面已经有实现 text-overflow：ellipsis，但是最新 w3c 文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：

可以看到，只有 firefox 和 opera11 一下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑 firefox 等不支持的浏览器了，唯有使用 js 进行字符截断。

比较简单的截断方式就是按字符个数截断，以一个中文宽度等于两个英文宽度为前提，根据给定字符个数进行截取。但是字符在页面显示的时候，其宽度并不是一定的，会根据不同的字体和字体大小的不同而不同，更何况字母 i 和 A 的宽度是不一样的，存在 bug 且不够精确。