样式之美

暂停页面资源占用

aoao — Fri, 13 Jan 2012 00:05:04 +0800

“暂停页面资源占用”其实是个function，javascript也是可以用中文来写滴

function 暂停页面资源占用(){
	幻灯广告2.暂停();
	文字滚动5.暂停();
	啥啥啥动画.暂停();
	定时更新长链接.低迷模式();
}

为什么要这样做呢？装厚道，把资源让给别人，有些情况下还可以省自己服务器的资源。

那什么时候调用他呢？ onblur，那怎样变回正常呢？再写一个对应滴。

但是这样看起来不是特别高级，怎样更高级呢？自定义事件我记得好久好久前写过个task 让那些爱动的元素玩上 onElementShow onElementHide 这样的事件，然后就把上面的 function 分开了，让元素看不到时就可以开始暂停。

其实还不够高级，我们还可以把元素看不到、页面 blur、窗口最小化做进一步细分，不同阶段做不同深度的事。

附窗口最小化检查

function isMinStatus() {
	var isMin = false;
	if(window.outerWidth != undefined){
		isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
	}else{
		isMin = window.screenTop < -30000 && window.screenLeft < -30000;
	}
	return isMin;
}

这代码也不是我发明的。。很久前找到的，忘记出处了。win下基本都能用。mac 研究了发现没啥好办法发现最小化，最后用了个很土的办法，键盘控有效。囧rz

event.metaKey && event.keyCode =='77' //⌘command + m

大家有其他好办法没？

update
小光说的Page Visibility 测试地址 M$测试地址，ie10 Chrome ff10+ 都支持， ff在mac支持得比较好，最小化算，但command+h 也不算，不知道为什么，突然在想显示桌面(F11/fn+F11) 要不要算。

带图案的二维码

aoao — Thu, 11 Aug 2011 22:39:35 +0800

那个黑不溜秋的二维码大家都见过吧。最近随着高档手机才稍微有人知道，大家用这个 QR-Code Generator，生成自己想要的信息，比如生成这样：

^_^

如果你用iPhone 的话。可以用Scan 或 ScanIt 这样的app来解码。其他手机自己想办法。

好了，现在来说明为什么那个二维码有图案，据说二维码的容错非常高，所以，只把图片或者字找个相似的地方放上去就行。。这里有令人拍案叫绝的15个二维码，可以看看，我最喜欢的是这个：

判断一个网页是否适合手机浏览

aoao — Sun, 24 Jul 2011 17:19:29 +0800

最近在做一个项目，需要知道一个网页是否适合手机浏览，想了点方案。

1.域名: 二、三级域名中包含有m 3g wap mobile 的算是。当然像 mobile也有坑爹的比如像mobile.qq.com，mobile.yahoo.com

2.网页的DTD: XHTML MP 或 wap

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.dtd">

但是wap并不一定适合手机浏览，有种破手机叫iPhone。他有个破浏览器叫Safari

3.网页的meta里有viewport 如

<meta name="viewport" content="width=xxx; ..... "/>

但是，可能只适合某些手机。适合手机访问不代表一定是手机版，某搜索就直接用这个判定为网页是手机版

4.网页标题包含有“手机版” “触屏版”

接着另一个问题，怎样让不适合手机浏览的网页变得适合呢？

5.让spider 装手机去逛，看会不会适配。

6.特定网站集的把topN的人肉找出手机版，找出与pc版匹配的规则，配

7.使用中转服务

百度：http://gate.baidu.com
Google：http://www.google.com/gwt/x
爱问：非官方提供http://h2w.iask.cn/html2wml?url=http%3A%2F%2Fwww.aoao.org.cn

iPhone Web App 动态 icon

aoao — Sat, 01 Jan 2011 23:11:11 +0800

不记得什么时候发现 iPhone 收藏到桌面的网页，在每次打开后会更新apple-touch-icon 的图片，也正是因为这个特性，我们可以用来动态更新icon

看下这个例子 http://aoao.ws/app/testicon/ 这个真的是iPhone Web App哦。不是iOS的，不信用iPad试下。。XD

测试时，发现启动图也可以变更。但是，切记 iPhone 的启动图大小只能是320*460 。为什么不是320*480呢，这是为了让web app启动时，如果是横屏，能留20px的白边玩的。iPad 的启动图是768*1004，目前的测试发现只支持竖屏，囧rz

然后又想了半天，发现除了日历、天气外，好像没啥啥应用要动态更新icon的样子。

做了个体验性的天气 http://aoao.ws/app/weather/?w=北京。

写了才发现。。canvas在iOS3.x上真不给力。。fillText可以考虑用canvastext不然你的文字不知道飞到哪。不过这个也只能解决英文的问题，中文就别折腾了，真的要做服务的话，可以考虑服务端生成对应的图片。

如果app太久没开的话，它还会坏掉，就成了这样

T_T 自己加上系统的高光，~~初步估计原因可是为 iOS会在没开app的情况，自己去更新apple-touch-icon-precomposed.png ，但因为这图片实际又不存在，然后就自做主张了，~~加入收藏时，桌面图标是好的，但其实已经坏掉了，双击home键时可以看到，只要动态改的就会坏，准确的说用data:image/png;base64,这种方式写入的会坏，但对于桌面的什么时候会变坏还是不清楚，同时发现我的高光画的不好，为什么要自己画高光呢，因为原生带的天气也不是用系统的高光，不过绘下边的文字还是偷懒了，其实可以做得更好。

=。= 目前不支持 Retina Display ，其实写过测试，但发现图片得大点，Native App的优势体现了。

所谓招聘

aoao — Tue, 05 Oct 2010 23:16:39 +0800

最近做了个好玩的招聘视频，大家娱乐一下。

看不到的同学可以到http://v.youku.com/v_show/id_XMjA5ODI2OTE2.html

JavaScript组件打包模式

aoao — Mon, 05 Apr 2010 16:37:34 +0800

js组件通常带着css image ，但这样使用起来可能会有些小麻烦，为了让组件足够的solo，有了把css image也打包在js的想法，然后顺便把请求数变少，这个顺便好像更重要，呵呵。

那怎样打包呢，虽然有resource-packages这样的方案，可是我们的核心用户还在玩ie6这种时尚的浏览器呢！

我的方案：

CSS：CSS可以当成字符串存在js里，并由js动态加到页面上，页面用的可能不适合，但组件通常不会影响。
image：CSS里用的图片用dataURI（RFC 2397）跟MHTML（RFC 2557）的方式编到js里面。（秦歌写的dataURI和MHTML依然推荐给不知道是什么东东的同学看）。CSS里如果要绝对路径同样可以存js，js如果有直接用到的理论上也是可以，但js通常只改className会比较好。
flash：一些比较小的flash，比如存储，复制等也可以选择打包，不过现在米解决非IE的问题，非IE使用外链吧

这个有个打包测试的例子。

一些细节和纠结的地方

所有图片都打包到js里不一定合理，打包进去的应该是必用的图片。
那排除的图片是再打一个包好呢还是直接用图片？
图片可以先压后编，我选用的图片压缩工具是pngout，而且一般是用-s5。
有人做了些测试Uncompressed data in base64? Probably not，大家自行判断。
重复的图片引用直接用dataURI会搞得很大很大，gzip又笨得跟猪一样不会压掉。
我是选用存成js变量，淘宝的同学是用提class的方式
MHTML在ie7+/vista缺少结束分割符无法显示，win03sp2缺少Content-Type会有安全提示，原因都MIME不标准，不是所有的东西都可以省。
是选择把所有的东西都打包在一个文件还是按MHTML跟dataURI分类型打包成两份在server按ua派文件或由类库智能去读取，好像后者比较和谐。
swf用dataURI编入有问题，据说fp8没问题，现在都fp10了。
另一种solo的方案就是把js打包到swf，不过感觉不和谐

multipart/related例子

不算标准但能跑，换行也是很重要的

Content-Type:multipart/related;boundary="_BAIDU_YOUA_BB_YEP"

--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:logo.png
Content-Transfer-Encoding:base64

...base64...

--_BAIDU_YOUA_BB_YEP
Content-Type:image/png
Content-Location:nono.png
Content-Transfer-Encoding:base64

...base64...

--_BAIDU_YOUA_BB_YEP--

btw:上篇文章的评论里发现了这个打包的站，输出界面很帅

人民币的符号的正确表示法？一杠？两杠？￥还是¥呢？

aoao — Sat, 20 Mar 2010 19:30:21 +0800

因为做的项目会跟钱打了交道，所以被研究了。

那是一杠还是两杠呢？最简单的方式就是拿出钱包，掏出张“新”的50或100，翻到背面的银线上，就会发现两杠的符号。这个是以前跟同事在讨论是一杠还是两杠时，发现最有效的方案。

杠杠数的问题解决了，可￥（指的是通常输入法中文全角模式下按shift+4的那个）在宋体（v3.03, v5.0）的情况下是显示一杠囧rz。不过还好的是，常见字体：微软雅黑（Microsoft YaHei），华文细黑（STXihei），細明體（MingLiu）能显示两杠，理论上以下写法可以解决大部分问题。

font-family: 'Microsoft YaHei',STXihei,MingLiu

虽然部分用unicode表示的中文字体名可能会更好（via 中文字体在 CSS 中的写法），例如这样：

font-family: '\5FAE\8F6F\96C5\9ED1','\534E\6587\7EC6\9ED1',MingLiu

由于MingLiu也不是“盖”的，而且在12px上还算挺好看滴，看人个喜好，反正我不喜欢“乱码”。

当然，如果你有更好的方案也可以介绍给我，还有一些想到的方案:

编个字体，里面只有一个￥,用font-face的方式来使用，不过我也就想想，有兴趣的同学可以玩下。
在研究过程中还发现了 ¥ （在HTML中，“¥”的命名实体是“¥”，字符代码是“¥”和“¥”。mac os 按alt+y可输入 via ），虽然从命名可以知道是yen而不是yuan，好像现在变能通用了，又不过很多情况别人会把¥当成JPY 而不是CNY。

在找资料时还发现这个：有关于该符号的另一种诙谐讲法，说女人一旦嫁“到”了丈“夫”了就有钱了，所以“倒夫”字就是货币的符号了（via）

MHTML在ie7/vista bug 解决方案

aoao — Sat, 30 Jan 2010 21:55:45 +0800

在多数情况下，以增加文件大小代价来换连接数是有价值。而MHTML+dataURI = 省连接数，如果你不知道这是什么东东，可以看秦歌写的Data URI 和 MHTML

因为之前发现在vista上的ie7有bug，且没有好解决方案，所以一直不敢项目上使用，之前虽然有看到有个用304的方案(via Data URIs, MHTML and IE7/Win7/Vista blues)，但觉一来做起来折腾，一来效果也不好，特别是hover时。

ie7 vista的bug大约这样，相应文件一旦local cache 后，浏览器就读不到。

今天，我要骄傲的跟大家，有两种可行的解决方案

方案1

Content-Type:multipart/related;boundary="_aoao_org_cn"
--_aoao_org_cn
Content-Location:aoao.gif
Content-Transfer-Encoding:base64
... base64...
--_aoao_org_cn--

注意最后的“--_aoao_org_cn--” ，查了不少资料，原来标准写法就是这样！（via rfc2557 第7页）囧rz

这个故事跟我们说一件事：有问题，查文档。我之前一直以为cache到本地后浏览器木权限用

方案2

------=_NextPart_000_0000_12345678.12345678
Content-Location:aoao.gif
Content-Transfer-Encoding:base64
... base64...

如果你有用ie存mht并研究结构的话，应该会觉得很眼熟，很神奇，但唯一的问题就是只能用一张图片，囧rz 反正有方案1，无视之。

伴随这个不是bug的bug的终结，相应的工具与应用也要浮出水面了。

一次炮轰引发的深思

aoao — Thu, 24 Sep 2009 03:31:09 +0800

话说前文，有人在无忧发了个书的推荐，然后hax与爱民同学讲解其样章N处不解（疑是错误，主要是作者认为不是错误，偶js又水平不行，不敢乱下定论）之处。。然后因为众所周知的原因，出现了炮轰事件，又见讨-论，

那样多人推荐的一本书为什么会炮轰呢？怎没人来炮轰我的书呢? T_T 我经过深思后感觉原因有3点:

我没RP
水平烂到了没人理的地步
没那样多人给我推荐

当然3是最不可能的原因，肯定不是因为很多人推荐本书（因为没看过书，还不敢说是好书，当然也有可能是烂书，想当时，好像我也光荣的被邀请写书评，不过因为时间关系导致没写）就被乱轰，

有人说是书的原因，这书到底好不好。个人很难断定，各有说法，当然像hax同学这种只看看样章就评价的行为并不是非常推荐的，不就在样章里找出一堆问题呢？难道整本书都跟样章一样，样章能代表这本书吗？再看看人家的专题站引用的评价的都是好的，哪来像你这样多问题，连taobao的阿当都说这书好（其实我不认识他，没听过，只是见作者引用，又失败一下），理论这样多人推荐应该算好吧，我们暂时先不讨论这书到底好不好。

又有人说书有没有错误并不是主要原因，说的好像也是。好像我的书也有一堆错别字，还有属性打少字母的。其实很多书第一版都会有些错误（当然错误也有分不同的错法），以前也没见到这样大的事件，有错误应该不是核心问题。

那又是什么原因呢？这让我大思不得其解，最后，不小心看到一篇名为《一些技术图书编写、推荐、出版人员需要自重》

好了。。不兜了大家也勿盲目围观。围观的关键在于能否在围观过程中了解到有价值的东西。

最后希望大家买书时不要买到 “脑白金”。

扩展阅读：从“装B被雷劈”讲起

superLink，让伪链接更有可用性

aoao — Mon, 01 Jun 2009 01:48:02 +0800

前几天，看到有人写了个superLink的东东，主要的做什么用呢？

我们有时会给在大块元素加个window.location='http://www.aoao.org.cn'，还顺便把光标定义成移上去会变成手势还代替链接，为什么不直接用<a>因为有时东西太多，不能放在链接里，比如hx、p、 li之类的。那问题来了，用js处理会让链接的功能没了一堆，作者在他的文章说到：

中键：新tab打开（aoao注：中键功能变更滴同学无视）

CTRL/SHIFT 单点：新窗口新tab打开（aoao注：自己浏览器改过设置以自己的为准）

右键菜单：虾米虾米方式打开

浏览器状态栏

其他，等（aoao注：好像也没其他的）

那看看效果： superLink Demo，试一下左中右键功能。

实现其实不难，就是把你原来加window.location的元素上盖上一个链接，透明为0，这样就可以把上面4条功能还原，-_-!。

总的来说，想法很好，有总比没有好，还封装好让别人用 ^_^，不过如果有机会再遇到类同的应用时，我应该会在原来那块元素里面的a里加个无用的span（语义愤青别BS我），虽然定位可能有点麻烦，但总是能定准的，直接样式搞定。