号外号外,iSpriter 更新啦!

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

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

TAT.iAzrael 使用 CSS3 绘制网格线
In CSS3 on 2012年07月19日 by view: 23,459
13

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

一、引子

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

一、引子

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

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

TAT.iAzrael 谈互联网用户的成熟度
In Web 前端资讯 on 2012年05月16日 by view: 2,284
0

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

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

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

开篇

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

TAT.iAzrael CSS3 模拟 Checkbox
In CSS3,Web开发 on 2012年03月27日 by view: 5,498
4

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

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

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

 一、些许前提

最近在制作一个 Web 应用, 其中用到了 HTML5 的离线应用功能 (offline application), 离线应用的概念就不再阐述, 可以查看这两篇文章:

http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

http://www.mhtml5.com/2011/02/583.html

这里主要讨论它的更新问题. 首先浏览器是有两部分 cache 的, browser cache 和 app cache, browser cache 就是常说的浏览器缓存, app cache 是离线应用的缓存.

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

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

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