LaoZhuHome Beta

之前介绍过一篇为你的博客打造iphone版本，这种方式几乎适合所有使用wp的博主，这也是大多数博主使用的方式，但是这种方式必须使用safari打开，持有ios设备的童鞋一般很少有人用safari打开网页，也就是自己没事用safari打开测试一下；而且即使在桌面生成一个快捷图标虽然首页会正常全屏显示，但是当点击一个链接的时候还是会启用safari来打开页面，这种体验确实很不爽，但是这也是大多数手持设备版web网页采取的方式，毕竟开发周期相对较少，成本相对较低。 所以出现了sencha和jQmobile这类的框架，再配合上PhoneGap就可以做出一个安装包，甚至你可以不使用任何框架自己使用HTML+CSS+JAVASCRIPT写一个app，这里推荐一本书，Building iPhone Apps with HTML, CSS, and JavaScript，虽然是英文版的，但是看过之后可以让你了解一些客户端的机制，一些疑问也许就会解开。

最近工作的时候被项目中一些比较乱的代码搞的有些头大，前期的规划架构确实很重要，一个好的地基才能更好的建起一座大厦，不然说不定哪天项目可能就变成了“楼歪歪”，补救的代价远远超过了当初的精心规划。所以一起来看看谷歌给出的一些HTML/CSS规范建议吧。 1.常规样式规则 引入的assets资源文件（js、css、图片文件）忽略协议（http:, https:） 不推荐的写法： .example { background: url(http://www.google.com/images/example); } 推荐的写法： .example { background: url(//www.google.com/images/example); }

早上一个好基友问我grayscale.js好用不，我想好基友肯定又遇到一些奇异的设计了，在非ie下grayscale.js挺不错，但是图片多的话会极大的影响效率，我曾经用过一次图片墙，图片大概20+吧，当时测试数据好像是页面载入时间增加了7秒，而且会有概率出现浏览器假死现象，也许是之前的浏览器版本比较低吧，那时候还是火狐3.X，谷歌版本也才是个位数，现在都飙升到十位了，性能应该可以提高不少，但是随着浏览器的升级又为我们带来了HTML5这份大礼，于是我给好基友弄了这个HTML5的图片变灰效果，基于Canvas完成，不支持Canvas的就判断使用grayscale.js或者直接不理，这方面还是ie的滤镜方便啊。 先说一下思路:

去年就听一个基友推荐过Sublime Text这个软件，那个时候确实不是很好，有着很多的bug，打开大文件很慢，而且对GBK支持的很是不好，不能很好的编辑文件，于是就一直notepad++下去，一些用vim的可能会鄙视不用vim的，我觉得没有这个必要，就像别人如获至宝的妞在你眼里却一点也不感冒，或许你是一个基友，又或者你真的不感冒，总有一款适合你的软件，在经过我很长一段时间的时候之后才敢推荐这个软件给大家，因为我已经将Sublime打造成了Notepad++模式，甚至连操作习惯都被我同化，下面来说说我为什么转到Sublime Text的原因吧。

之所以写这篇文章呢正好群里和论坛里都有人问这个问题，多数人的回答都是去谷歌去百度，好吧，要想把他们解释清楚花五分钟是不够的，于是弄了一个扫盲贴再加上一个生动的列子这样就会记忆的更深刻，一个demo胜过千句废话。 原理还是不能少的： 一、call 方法 调用一个对象的一个方法，以另一个对象替换当前对象(其实就是更改对象的内部指针，即改变对象的this指向的内容)。 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 ： thisObj 可选项，将被用作当前对象的对象。 arg1, arg2, , argN 可选项，将被传递方法参数序列。

前段时间页面上加了一个页面载入完毕立即触发的transition动画，加上去了以后在chromium下发现会在动画元素旁边出现一个白色区域块，如下图效果 在chrome下正常，在chromium上可以看到chrome未来的影子，希望这个bug在新版chrome下不要再出现。

这两天在处理一个小需求，目的是当用户页面里引入一段外部js（外部js由内部生成，用户手动添加），然后根据外部js提供参数回调不同的js文件和方法（js文件和方法未知，由参数传递），回调的js文件异步在客户的页面里加载，目前已实现基本功能，之所以这么做就是为了尽可能的减小外部js对客户页面加载效率的影响。 事实上目前接触到公司的产品中也遇到了这种情况，页面里因为有较多的辅助功能而引入了比较多的js文件，本地测试开发的话基本看不出对页面加载的影响，但是在模拟的较差网络环境下页面瞬间空白的出现时间有点超过预期，虽然不仅仅是那些js文件造成的加载白屏现象，但是过多js零碎文件的引入任然拖慢了页面的加载速度，目前建议使用$LABjs管理和Combo脚本文件来优化。 鉴于这个小需求又想到了js对大型网站页面加载的影响条件，下面根据不同的情况做了不同的对比，已经尽可能的模拟同等条件下的载入效果，展示上会略有不同，已经取了平均值，数据还算是比较可靠。

前几天加上了一个小效果，我叫它为时光流逝效果，最初是在苹果官网看到的，是为了介绍全新ipad可以续航10小时的一个小效果，于是我用我自己的方式把相同的效果写了一下，不是canvas，仅仅是css3而已，因为我看着还可以，于是就挂到博客上了，用来提醒自己一天的时光就这样流逝了,刚好又有童鞋问我这效果是如何实现，并希望我写一篇文章来说明一下，于是就有了这篇文章。 效果是webkit only。 素材是使用的苹果官网的svg图片，本来我想找几个好看的指针和表盘，可是很多都是主题的色调不匹配，懒得找了，就用它吧。

这应该还是Twitter没有改版之前的UI，即使是之前的UI现在看来还不失为微博设计的典范，每一个特有的元素都在被模仿，现在的版本已经不支持IE6，如果你使用IE6访问twitter会自动跳转到简单的移动版,其实在去年twitter就已经不怎么鸟IE6了，那时候就使用了一些伪类样式来定义页面，现在是彻底抛弃了IE6，其实一个还在用IE6的人是不会使用twitter的。 这个psd只是让大家看看之前的twitter是什么样子，也许你从来没有使用过twitter，但你需要了解世界上有这么一个网站在诉说着信息的自由。我也只是为了查看twitter所使用的页面技术才使用twitter，就像最近一些人在谈论的less，毕竟很多新的好的技术还需要从国外传过来，多了解一些总没有什么坏处，顺便放出俺的twitter，如果你想follow就来吧，我不是发微博控，但我是个大师级潜水队员。Follow Me吧

估计这个源文件很多童鞋都有有见过，我也是整理文件的时候发现的，不方便访问非死不可的童鞋可以一起来看看它的架构。 下面这张psd是我见过的最专业的psd源文件之一，其细节的反馈非常到位，拿到这种效果图开发者可以在前期更好的构建页面，而不是因为一些效果的不确定而频繁去和设计师确认从而降低了开发效率，如果我拿到这种效果图我第一个反应肯定是对设计者充满了感激和崇拜，这得多么专业的修养才能做出这种让开发者都感觉舒爽的效果图，而且psd里分层十分清晰，你想找不到都难，不需要任何高保真的标注，剩下的事情就交给偶吧，设计师您辛苦鸟，这才是团队的感觉（这个“如果”要实现起来还需要一定的条件啊）。