栅格系统计算器

栅格系统(Grid System)的辅助工具不少,而那些工具多数让人填栏宽,间距,栏数这些。但是我在实际应用栅格系统的时候,是知道页宽并估计 12 栏会比较适合,虽然有公式去计算,都会觉得麻烦。

为什么就没有这么一个工具:输入页宽和分栏数,自动计算出所有可能的情况呢?因为不会有半个像素的情况,精准到像素的话,还是可能有几种情况的,还夹杂一些不实际的情况。那么根据具体效果去选择,会比埋头计算然后看效果要方便得多。

于是做了这个 webapp:Grid System Calculator
grid-system-calculator

参考了 Bootstrap960 Grid System 两种 CSS 实现方案,感觉更加倾向于 Bootstrap 的方案,于是参照其做法,用于生成显示效果。

为了方便 Bootstrap 的用户,以其参数配置方式输出具体参数。也提供了基于 960 Grid System 的 CSS 下载服务链接(引用 grids.heroku.com 的服务)。

这个 栅格系统计算器 采用 MIT 协议开源使用。

Replace [class*=”span”] in LESS

Bootstrap 里的 grid system 里面 (源代码) 有这么一段,

[class*="span"] {
  float: left;
  margin-left: @gridGutterWidth;
}

RECESS 去跑会看到提示:Universal selectors should be avoided。这个既可以说是 selector 的问题,也可以说是 RECESS 的问题,但可以在运行的时候加个参数忽略掉。

自己去写扩展时也会写到类似的规则,比如需要兼容某浏览器,如果不这样写,就会需要像 Bootstrap-IE6 那样写 Continue reading

Font Awesome – Iconic Font for Bootstrap

从 v1.4 开始使用 Bootstrap,从此(内部)项目的 UI 告别了自制样式的时代,风格清新而且使用简便,是目前见过最好使的 CSS 框架。对于哪个妙句 “Build for and by nerds”,我都不知道说什么好了。如果想自定义样式,对于了解 LESS 的是非常容易的,但门槛并不在 LESS 本身,而是在于有些资源在国内是不能访问的。

而 v2.0 之后引入了 由 Glyphicons 提供的 Icons,应用到项目中去,顿时使整个 UI 的感觉上升了一个档次,真是锦上添花的好东西啊。

但是,需求总有惊喜的部分存在。
比如,想在字号较大的 title 位置也应用 icons;
又比如,在一个希望可以起到警惕作用的位置使用 .icon-ban-circle,无论是黑色还是白色(目前只有这两种颜色可供选择)都不能达到这个要求;
幸好是内部系统,不需要兼容什么老的 IE 版本,使用 png 实现的 icons,欸~~

解决方案总是会有的。 Continue reading

控制浏览器的缓存

做前端开发时常要重复一个动作,改一点,刷新页面看看效果。这里,我们是有个假设,刷新之后是能看到新的内容的。

但事实上,并不一定。

因为浏览器有缓存的机制。当然,它不是任何情况都起效,如果响应头里面没有 Last-Modified, Expires, ETag 这些东西存在,浏览器也是不知道该怎么做缓存的。那就有办法了,开发的时候控制都不输出它们问题不就解决了吗?如果控制这个的开关只有一处的话,那当然可以,但实际这些响应头的处理是有必要做些细分处理的。如果可以让服务器保持正常一致的输出,那么控制权就落在浏览器哪里了。

控制浏览器的缓存,通常想到的都是清除缓存,所有浏览器都有这样的功能,简单点几下就能搞定。但其实还有更省力的办法,就是直接控制是否缓存。开发通常都喜欢使用的 firefox 上是控制缓存方法很简单,地址栏输入 about:config (会让你确认一下),然后在 filter 里输入 cache
从过滤结果可以找到 browser.cache.disk.enablebrowser.cache.memory.enable 这两项,默认都是 true,双击一下变成 false,缓存功能就禁止了。

这样,一开始的假设就是正确的了,可以放心的 F5 。

其它浏览器呢?

Chrome 据说也可以设置 –disk-cache-size=N,看上去可以控制缓存,不过我在 ubuntu 的 chrome13 上尝试是无效的,不知道 win 下可不可以。Chrome 可以通过 about:cache 查看缓存内容,也是个很有用的工具。

IE 里面是可以设定每次访问都从服务器请求资源。

不过,启用缓存的情况做测试也是必须的。之前就遇到一个非常特殊的例子,Expries 设置不当,禁用缓存情况下测试一切正常,启用的时候就不正常了,F12 一看是 304,清除多余的响应头即可。

由此,可以得出一个结论,服务器资源是可以从缓存角度做区分,适用缓存的部分,为了测试方便可以禁用缓存,而不适用缓存的部分是需要启用浏览器缓存机制进行测试,确保结果符合预期。

CSS 文字发光效果

CSS 文字的发光效果通过 text-shadow 实现起来很方便的。

text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513, 
    0 -1px 1px #8B4513, -1px 0 1px #8B4513;

在 Firefox, Chrome, Opera, Safari 中的效果:

看上去这几款浏览器都支持。不过就是在 Chrome 里面,可以看见出来的效果并不好,奇怪的一点是为什么它的模糊会往里发展了,开始还以为 webkit 都这样,看了看 Safari,表现挺好的,边缘比 Firefox 还要锐利。 Continue reading

IE 中对 toString 的双重标准

使用 for .. in 遍历对象,似乎没什么好说的,不过还是有例外。在各个浏览器里面跑下面的代码:

var obj = {
    toString: function() {
        return "custom.toString()";
    }
}
for(var i in obj) {
    alert(i);
}

它们都会 alert 一个 toString,除了 IE。一开始还以为是加载慢,后来才认识到,其实 IE 并不把它当成是一个自定义的对象方法。同样的情况也发生在 valueOf() 方法上,可以猜想,IE 可能把它当成是 native 的了。
Quick Fix – Internet Explorer and toString problems 里面,介绍了使用条件注释(conditional comment)的方法来解决。 Continue reading

Chrome,为什么第二张图片看不见呢?

在测试的时候,建立一个最小测试集对于测试调试是很有帮助的。

为了测试与图片装载相关的内容,建立了下面的页面。内容很简单,就是动态添加两个 IMG。

<html>
<head>
    <title>Test Loading IMG</title>
    <style>body { background-color: #00F; }</style>
</head>
<body>
<script>
function show() {
    for (var i = 0; i < 2; i++) {
        var img = new Image();
        img.src = "chrome.png";
        img.title = "Image here";
        document.body.appendChild(img);
    }
}
setTimeout(show, 1000);
</script>
</body>
</html>

用各种浏览器(IE6 除外)打开,理论上应该不会出什么乱子。

但是竟然发现在 chrome 里第二个图不见了。实际上图是在那里的,只是看不见,鼠标移上去,title 是能正确显示出来,进行全选操作之后,图就出现了。

当然,实际页面中不会只有两个 IMG,只要在 body 内加一个字符如 a,chrome 就可以正常显示了,-_-!!

当前我的 chrome 版本是 7.0.517.41 beta,估计会有人跟我说 chrome 更新这么快,beta 嘛,难免的。

希望 chrome 越办越好啦~

IE 中 png 黑底(半透明失效)的那点事

早有听闻 IE7+ 是支持 png 的,用下来感觉也还可以。但忽然之间,发现有一张 png 图片莫名其妙地黑底了,最先想到的是 png 的输出设置可能出现问题,于是试了 N 种设置黑底,只是黑底的形状有点不太一样,相当纳闷。没办法了,还原基本步。

<div id="box">I Believe</div>
<style>
#box {
    background: url(http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png) no-repeat;
    color: #FFFFCC;
    text-shadow: 1px 0 2px #897461, 0 1px 2px #897461, 0 -1px 2px #897461, -1px 0 2px #897461;
    filter: Dropshadow(offx = 1, offy = 0, color = #897461) Dropshadow(offx = 0, offy = 1, color = #897461) Dropshadow(offx = 0, offy = -1, color = #897461) Dropshadow(offx = -1, offy = 0, color = #897461);
    
    height: 200px;
    padding: 5px;
    width: 200px;
}
</style>

这个应用场景很简单,有一张 png 作为背景图,上面有些文字,对文字施加了一些发光效果(实际上阴影来实现)。在 firefox 和 IE 下的表现见下图: Continue reading

呼之即来 挥之则去

乱贴图:没呼也来,挥之不去的大雾,笼罩着一切,让我看不清到底通向什么地方

乱贴图:没呼也来,挥之不去的大雾,笼罩着一切,让我看不清到底通向什么地方


如往常一样,一周到了某个时候,就会打开下载站点,寻觅是否有感兴趣的新资源下载,通常是美剧。与之相对,我亲爱的同事们都流行直接在线看,只要网速足够。另外花时间下载,要关心下载进度,还要关心资源下载好之后的存放等一个一个事情,虽小,但是与在线观看相比,还是显得那么的多余。

呼之即来,挥之则去的感觉是挺爽的。

我也一直在思考那么一种构建方式,Web 应用程序由模块组成,页面上运行的脚本可以按需加载所需要的模块,不过暂时只是在某个程度上实现,还未达到所想要的效果。想要呼之则来,还是没那么容易的,更别谈挥之则去了,幸好目前还没有那样的需求。

可以想象,如果可以稳定地实现按需加载(不仅仅是脚本,所有页面上需要用到的资源),很多有趣的功能都变得有可能了。看来要好好地做做研究,看看现在到底在处理这方面问题时有什么样的方案,什么样的技术来支持。

什么时候才能达到想要的效果呢?或许还需要浏览器进一步进化,增强脚本的功能。

想吧,想吧,继续想吧。

绘制贝塞尔曲线

Bezier Curve in Canvas

Bezier Curve in Canvas


只是靠直线和弧线来画图是不够的,面对一些更加复杂但是有规律的图形时,我们需要另外一个更加强而有力的工具——贝塞尔曲线

在 canvas 里,贝塞尔曲线有二次方和三次方两种形式,区别就在于控制点的数目,二次方的只有一个控制点,而三次方的则有两个。

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

这里的贝塞尔曲线的用法同样的很简单的,但是却不像在 Photoshop 或者 Illustrator 里画曲线那么轻巧了,它是非常需要触觉和耐心的。所以上面强调了有规律这个关键词。
实际上是什么感觉,大家亲身体验吧,看看下面的示例。

var colors = ["ec460c", "1e951e", "2692f7", "ea62f6"];
var cp1 = 60;
var cp2 = 160;
var y1 = 150;

for (var i=0; i< colors.length; i++) {
	ctx.beginPath();
	ctx.moveTo(25,75);
	ctx.bezierCurveTo(85,75,cp1,y1,100,y1);
	ctx.bezierCurveTo(cp2,y1,120,35,190,35);

	cp1 -= 10;  // 使控制点 1 横坐标左移 10 像素
	cp2 += 10;  // 使控制点 2 横坐标右移 10 像素
	y1 += 20;    // 是曲线低点下降 20 像素

	ctx.strokeStyle = "#" + colors[i];
	// 设置线条颜色
	ctx.stroke();
}

如图,我比较懒,里面用了循环画了几条曲线,一阵颜色一条,不同在于曲线的底端位置与曲线口径的不同。
你觉得像个什么呢?

这里并没有用到二次方形式的贝塞尔曲线,但是三次方的都会用了,二次方的还不行吗?

PS: 以上代码是主体部分,要运行上面的例子,请参考 进驻Canvas