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下不要再出现。

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

这两天搞东西不知道为什么每次修改必须清空一下缓存才能看到效果，使用的是Chromium，所以那个清除缓存的页面就一直打开着，偶然发现一个好玩的东西，竟然是内置在Chromium浏览器里的一个使用css3制作的小效果，于是扒皮神功再现，很快就被我给扒下来了，看了源码实现起来并不麻烦，不过想法很有意思，思想还是很重要哇。

持有ios设备的童鞋应该都用过Safari，也许你会觉得他不如UC好用，但是你决不能忽略它的强大，在Wi-Fi下Safari确实十分给力。每一个web app的开发者更无法忽略这个浏览器，在Safari上可以实现好多令人兴奋的功能，那感觉，作为开发者的你一定懂得。 这里向大家介绍一下如何更方便的使用Safari浏览你喜欢的网站，前提是这个网站已经为ios制作了主屏幕图标哟~

这个效果提取自Sencha Touch框架，也是在sencha touch的项目中偶然发现loading效果竟然是用纯css3写的，于是提取了出来供各位童鞋一同研究. 使用了keyframes来使动画反复循环，在webkit内核浏览器下表现的很好，目前是webkit only，火狐也请绕道吧。 下面放主要代码和demo，一demo胜千言啊。