Manage js and css resources and integrate with YUI compressor

The javascript file and css files are hard to be managed. On one side, we want to keep them in different files according to the module and reuse it between pages. On the other side, the scripts and styles should be merged into one or two files to decrease the number of http requests.

This is the reason that I wrote a resource management module in my personal web project. This is what i want,

  1. web app has several themes, and each theme has several sites. the site can overrides/extends the resource file of theme.
  2. easy to config. a simple line in properties file could redirect the request to another one or more files bundle.
  3. manage different resource types, which are located in different directories. and only the javascript (maybe also css later) should be compressed by YUI compressor.
  4. gzip, etag, last-modified in http response header.
  5. cache for live environment and no cache for development env.

There’re some difficult points or maybe just I don’t know it before.

  1. To get the resources, ServletContext should be used, but getResourceAsStream(…):InputStream can only get the bytes, not the file meta information. The getResource(…):URL is the solution. Even the resources can be located in local or remote file system, a war package, or in a jndi url. But the specification also said it will always return a object which implemented the corresponding URLConnection. then the meta info can be retrieved there.
  2. YUI compressor depends and rewrites some class of Mozilla Rhino. Unfortunately, rhino is usually be included in the jre. The solution from Yahoo is to use a custom-built ClassLoader which will load the rewritten class files in the jar package. However, for the web project, it’s not so easy to it because the jar package can be in anywhere, in a war, database and hell. And this is also heavy loaded because the zip file will be processed quite many times. My solution is to use the source files of YUI compressor, not the binary package. And rewrite my own ClassLoader, which will load mozilla classes correctly. It’s damn easy then.

BTW, my next step is write a css compressor. not like the YUI one, i want something can create the short alias for the css class and id. It’s really cool and I will share it when i finished.

on June 30th, 2010 | No Comments »

利用CSS实现多级列表编号

ol ol{
    list-style-type: upper-alpha;
}

以上这段非常简单的CSS代码可以帮你实现一个二级列表。其中第一级编号为默认的阿拉伯数字,第二级的编号被设置成了大写的英文字母。第二级列就是由ol ol所指定的元素,如果你需要实现三级列表,再增加一个ol ol ol项即可。可供选择的有序列表编号类型包括decimal, lower-roman, upper-roman, lower-alpha和upper-alpha。

on July 14th, 2008 | No Comments »