Posted on

Yahoo yui host提供combo handler服务

Yahoo之前提供了公开的YUI Hosting，现在又在这个基础上进一步提供了combo handler服务。这项服务的目的是尽可能减少http请求的数目，以提高web前端的展现速度，这也是高性能网页开发的14条军规之首。

此前，如果要使用YUI Rich Text Editor，需要引用若干外部js。共计6个http请求。

如果使用combo handler，那么http请求数可以合并成一个，如下：

可惜这个host在国外，对国内的yui用户来说，没有什么帮助。

Posted on

图片预加载效果的实现

使用picasa的时候，注意到它首先是显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处——picasa的图片翻页是用javascript实现的，如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空虚~~

于是我花了点时间，打探它的实现方式，发觉很简单，不是用的lowsrc之类的标记，而是简单的js。

代码示例



var img = new Image();
img.src = "http://imghost/big_640_480.jpg";
img.onload = function() {
  document.getElementById('myImage').src = this.src;
}

如此这般，待大图载入完成之后，利用js替换原小图的src，就完成了图片预加载效果。关键点是图片的onload事件利用。

Posted on

Google AJAX Feed API的冷门用法

Google AJAX Feed API是google提供的一个很实用的API，我经常用它来跨域获取某些rss feed并展现。但是使用前需要申请一个API KEY，然后才可以在指定网站上使用，如果有多级子域名的话，挨个申请key是一个很烦人的事情，所以也就有了下面说的冷门用法。

Google AJAX Feed API提供了针对Flash或javascript无效这两种环境的额外接口，其中一种可以支持jsonp方式调用，跨域调用feed就全靠它了。

jsonp调用代码示例

这段代码中，指定了callback function为foo，所以我预先定义了一个function foo，运行时就可以在firebug的控制台里清楚的看到返回的json串结构。

Posted on

jQuerify书签

我不知道有多少人在使用浏览器的书签，这东东有时候实在是很有用的，比如现在说到的jQuerify书签。

jQuerify书签的功能很简单，那就是在当前页面中直接载入jquery.js，并以一个粉红色的浮动层提示jquery已经载入。书签的源代码如下：

var s=document.createElement('script');
s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
if(typeof jQuery!='undefined') {
  var msg='This page was already jQuerified'
} else {
  document.getElementsByTagName('head')[0].appendChild(s);
  var msg='This page is now jQuerified'
}
var el=document.createElement('div');
  el.style.position='fixed';
  el.style.height='30';
  el.style.width='200';
  el.style.margin='0 auto 0 auto';
  el.id='jq-kswedberg';
  el.style.top='0';
  el.style.left='40%';
  el.style.padding='5px 10px 5px 10px';
  el.style.backgroundColor='#f99';
  el.innerHTML=msg;
var b=document.getElementsByTagName('body')[0];
b.appendChild(el);
window.setTimeout(function() {
  jQuery('#jq-kswedberg').fadeOut('slow',function() {
	jQuery(this).remove()
  });
}, 2500);
void(s);

书签的链接在下边，如果是firefox的话，可以直接拖拽到firefox的书签栏上。

» jQuerify «

这里用到了最近说到的google cdn，速度可是足够快的。在使用书签之后，就可以尽情享受jquery的便利了，比如在firebug的console输入：

$('body').background('#ffc')

你会看到屏幕的背景色变黄了:)

Posted on

jQuery UI 1.5

jQuery UI 1.5正式版发布，仍然保持了jquery简单易用的特点。

简化的API调用

这个版本最大的改进是重新定义了API规则，之前API提供的95%以上的方法都移除了，取而代之的是更简单的调用规则，每个plugin只保留了一个方法，以draggable为例：

  • $(”div”).draggable() 创建一个拖拽对象
  • $(”div”).draggable(”destroy”) 删掉拖拽对象
  • $(”div”).draggable(”method”) 呼叫这个plugin的其它方法

jQuery UI的另外一个杀手级应用——ThemeRoller

ThemeRoller

利用ThemeRoller，你只要几分钟就可以创建一个自己的主题，可以方便调整色彩并预览效果，在调整满意之后，还能将主题的图片和css以zip包下载，算是相当贴心的一个功能，只可惜从国内访问过去速度有些抱歉。

jQuery UI 1.5的整个包包大小是1.78M，相比yui来说是有过之而无不及。好在包内的各个demo都是真材实料，相当精彩，大一点也无妨。

更详细的信息请看：jQuery UI v1.5 Released, Focus on Consistent API and Effects

Posted on

我也试用YUI Uploader

早就知道YUI里面有Uploader这么一个上传组件，可以按住ctrl多选文件上传(就像flickr那样的上传)，并且可以支持进度条，这样对用户来说是相当方便的。

由于YUI Uploader是利用javascript + flash实现的，所以用户的浏览器上只要有flash player就可以使用，也不需要额外安装别的插件了，这显然也是YUI Uploader的一大优势。

我的YUI Uploader试用之旅

  • 首先下载Uploader批量上传页的html源文件
  • 解压后放置在你的web服务器上，比如我就是在自己的台式机上安装了一个xampp
  • 现在需要一个处理上传操作的后端程序，在这里我是用php简单的写了一个，如果你用别的语言也是不成问题的。在uploader-advanced-source.html的同一目录下放置upload.php，源文件如下： 
    foreach ($_FILES as $fieldName => $file) { 
	$name = md5(microtime());
	move_uploaded_file($file['tmp_name'], "./" . $name . '.jpg'); 
	echo $fieldName . ' uploaded!';
}
  • 下载http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf，然后把uploader.swf放在和upload.php的同一目录下，这是为了避免javascript和flash交互过程中出现跨域问题。
  • 修改uploader-advanced-source.html
    • 把”YOUR UPLOAD URL GOES HERE”替换成你的upload.php所在的url，比如我的就是http://localhost/yui/upload.php
    • 把YAHOO.widget.Uploader.SWFURL修改成你的uploader.swf实际url
  • 现在访问uploader-advanced-source.html，试试批量上传功能吧

试用的一点补充

  • 这个例子里面的php源文件只是考虑上传n张jpg文件的情况，可根据实际情况调整。
  • 上传后的文件名是md5随机加密的，在upload.php同一目录可见
  • 由于flash的bug，运行在windows下的firefox无法正确获得flash传递过来的cookie，如果上传应用对cookie有依赖，可能会需要做额外的处理。
  • 为了能够确切的显示上传进度条，可能需要php 5.2的apc扩展支持
  • 上传进度由flash完成
  • YUI 2.5.2已经附上uploader.swf的actionscript，有一定的学习价值

贴一张Uploader使用效果图

Posted on

利用Google Ajax Library API加速常用js类库的载入

google前不久推出了Google Ajax Library API，说白了就是提供几个知名js库的host，目前有:

google提供的这批js类库都有使用cdn，同时提供压缩和非压缩版本，并gzip输出。比如Prototype在未压缩前是124k，压缩后则只有30k，而jquery经过瘦身以后，也是从97k降到了16k。

这项服务的意义在于，如果各个网站都使用google提供的某个js类库比如jquery，那么由于浏览器缓存的缘故，用户就可以避免下载相同内容的js，这样也就能提高js的载入速度了。

google ajax library api使用方法

传统方式

使用google.load载入

下面是一段小小的视频用来解释它的工作原理:

Update

昨天在某个小页面上尝试引入google提供的jquery.min.js，结果让我大失所望，虽然有时候访问速度很快，但是偶尔能刷出22秒以上的响应时间，如果是这样不稳定的话，那么实在是不敢放心使用。

Posted on

wordpress plugin – search engine related posts

Table of content

Description

English version

When someone is referred from a search engine like Google, the plugin show your blog content matched the terms they search for.

中文说明

当用户从google搜索到你的博客上，这个wordpress 插件会根据用户搜索的关键词显示你的博客上更多的相关内容。目前也只对google生效，下一个版本将对baidu生效。

这个插件完全使用javascript加上google的api完成，不需要占用服务器端的资源，环保且安全。

Usage

English version:

  • unzip it
  • Put <div style=”display:none” id=”search_content”></div> at the place in your template where you want the list of related posts
  • Copy search_related_posts.php to direcotry wp-contents/plugin and activate the plugin.
  • done!

中文说明:

  • 解压
  • 在wordpress模板中添加一个id为search_content的html标签，比如
  • 复制search_related_posts.php到wp-contents/plugin目录，并激活插件.
  • done! 现在你可以试着从google搜索上先搜到自己的博客，然后点击进去看看插件的效果。

Download

latest search engine related posts

History

Posted on

Adobe AIR教程for HTML/JAVASCRIPT开发者

最近不是太有空，加上泡网络时间太长，对新鲜事物的敏感度有所下降。因此当Adobe出了个AIR，我还是兴趣缺缺，没功夫去试用。

但是兴趣这玩意可能也有些生理周期，前几天突然来了神把这个AIR好好端详一番，却发觉网上暂时没有适合我这种初级新手看的AIR教程，鼓捣了几天，仍然是毫无进展，我甚至连个hello world之类的简单air package都打不出来。也许小时候特意去踩过狗屎，因此现在我又走上狗屎运，在即将放弃的前一刻找到了一篇比较细致的AIR教程，记录下来，好记性不如烂键盘。

俺目前的情况是，没有安装Dreamweaver，Flash之类的软件，只用一些免费软件，所以我只打算写html/javascript之类的代码，flash方面的暂时不涉及，另外adobe提供的dreamweaver air sdk也是用不上，可谓一穷二白。

第一步 — 安装Adobe AIR和Adobe AIR SDK

如果你还没装，可以去网站上下载Adobe AIR Runtime和Adobe AIR SDK.

装完Adobe AIR SDK以后，为了方便，你还需要把它的bin目录添加到系统的path变量下，这样你可以直接运行它的打包和debug工具。

Continue reading “Adobe AIR教程for HTML/JAVASCRIPT开发者”