There are a number of ways to speed up a website. An easy one would be to compress asset files and compact the files. This has been widely done for Javascript files with popular tools such as JSMIN and Packer.

The general idea behind compression/combination is to reduce the number of characters that must be sent over the wire as well as reduce the number of HTTP calls that must be made. Each time a browser gets a request to download a JS file, there is a certain amount of overhead incurred in negotiating and completing the HTTP request. Combining all JS files into one file is a great way to speed up a web application.

Everyone Already Knows This, Right?

Probably. However, CSS files can often be as numerous and verbose as Javascript files. How come there no public outcry for CSS compression/combination?

There happens to be a compressor/combinator that handles CSS files, the YUI Compressor. For most web application developers, YUI Compressor is an annoying tool to use because, as a java application, it must be installed and run from the command line. Yuck!, right?

Scriptalizer, developed by ColdFusion luminary Aaron Lynch, is a web front end for the YUI compressor. Scriptalizer has handled Javascript compression/combination for a while now and is a nicely designed, easy to use tool. Aaron recently added support for CSS compression/combination. Now, dealing with CSS files is as simple as dealing with JS files.

How well does it work?

I added all 14 CSS files from The Health Challenge and compressed/combined them with Scriptalizer. Here are the results:

• Number of Files Before: 14
• File Size of All Files: 35.42 KB
• Number of Files After: 1
• File Size of All Files: 19.96 KB

As you can see, the reduction was significant. Not only have I cut the size of my CSS assets by ~50%, I have also removed 13 HTTP connections.

Here is a quick tip for those using animations with the JQuery library.

I just tracked down a weird issue with a JQuery Animation. The functionality of the page was very similar to an Accordion. Click an image, the content collapses using the slideDown() function. Click again, the content expands using slideUp().

The structure of the content was a table wrapped inside a container DIV:

Not rocket science, right? This effect rendered flawlessly in Firefox shrinking and hiding the content incrementally. In I.E. 6, even though the containing div shrank incrementally, the content was visible up until the end of the animation, ruining the effect.

Through Divide and Conquer, I discovered the table had a css rule "position:relative". Removing this rule made the animation behave without bleeding through.

I was recently asked to help with adding a page transition effect. JQuery makes tasks like this blazingly simple. Here is the source code for fading out the body when a link is clicked:

Concise and snappy code! Just the way I like it! But it didn't work 100%. Would you believe the effect didn't work well in one of the browsers?

When using the Firefox browser, the transition worked just fine but clicking the back button after the transition simply showed the greyed out page. Firefox browser cached the effect, rendering the whole page completely useless.

After some research, I found that the Firefox Browser uses a type of caching referred to as bfcache (for "Back-Forward Cache"). BFCache is on for most cases but is not activated under the following conditions:

• the page uses an
  unload
  handler
• the page sets "cache-control: no-store"
• the page sets "cache-control: no-cache" and the site is HTTPS.
• the page is not completely loaded when the user navigates away from it
• the top-level page contains frames that are not cacheable
• the page is in a frame and the user loads a new page within that frame (in this case, when the user navigates away from the page, the content that was last loaded into the frames is what is cached)

The cleanest solution for this case? Add an onUnload handler to the body tag:

Now the transition works flawlessly and the back button behavior is correct.

The first drop of JQuery UI was released September 16th 2007. This release includes:

[More]

This past Saturday evening, the Adobe onAir Bus Tour breezed into Raleigh/Durham for a three hour stop. Mike Chambers and Kevin Hoyt gave presentations on AIR, the technology formerly known as Apollo, and the rest of the onAIR Bus Tour team took questions.

Overall, I was left with the impression that jumping from Web Application Development to AIR Application Development can be very easy and the learning curve is small. By leveraging skills I already possess, HTML, Javascript, Ajax Frameworks, and Flex/ActionScript, I can create relevant cross-platform applications with all the power and reach of Native Desktop applications.

[More]

Dave Ferguson posted recently about HTML CFGRID style column content and focuses on how to style columns in an HTML CFGRID. The true gem of this post is how he used Firebug to walk down the markup and find the class names and properties of the CFGRID output.

Firebug is truly a wondrous tool. I use it every single day and I save a TREMENDOUS amount of time when working with HTML and Javascript. Also, I've really reduced the number of times typing:

or

I wrote about Firebug previously and provided a link to a Video by Joe Hewitt explaining the feature set of Firebug 1.0. Joe Hewitt created Firebug and does a great job showcasing the features on this video, courtesy of YUI Theater. I recommend viewing this video, if you have not already.

Thanks go to Dave his original post. I look forward to more great content at Dave Ferguson's blog.

I posted a week ago about how to map a directory to a drive letter. This was a good tip for me because to get to my webroot directory, I needed to click 6 times. These 6 clicks have annoyed me for so long, I built a tool to generate the mapping scripts.

The SUBST generation tool uses JQuery. There is no technical wizardry involved, I promise. Matter of fact, all of the logic is client side, so you can view the source if you like. Building the tool seemed like a fun little morning task and I happen to have a few spare moments. I hope you like it.

Note: I've tested this on WinXP, if there are other steps needed for other Windows based OS's, please leave a comment and I'll add it to the program straight away.

Closures in JavaScript are a very important tool. The ability to control the execution contexts of variables and functions gives a lot of power. In some cases, closures aren't only handy and powerful, they are necessary. For example, in the process of wrapping up a JavaScript AutoSave, I ran into a bit of a scoping problem with setTimeout().

As you know, setTimeout hangs off of the 'window' scope. The fully qualified call is window.setTimeout(). Inside of my javascript object I created a setTimeout command to run the doSave() function. The setTimeout() function takes two arguments:

1. The Code to execute on completion
2. The number of milliseconds before executing Arg1

Since I was several layers inside the AutoSave object, I addressed the function as this.doSave(). The problem arose that the execution context of setTimeout means that 'this' will not resolve into my handy doSave function. I could have addressed the function by the global variable containing my AutoSave object, but that would reduce the reusability of my JavaScript object.

What I needed was a way to maintain the variables from one scope into another scope and that is where the closure came in.

This piece is specifically the closure.

Notice above how I get a reference to the function doSave from the this scope. Inside the AutoSave object, 'this' points to the AutoSave object. Then I set this.doSave to a new variable which I then put inside the first argument of setTimeout.

When this code executes, _OnTimeoutEnd correctly resolves to the AutoSave.doSave function and the save is completed.

JavaScript closures are very powerful and should become a part of your toolbox as well. If you would like to read more about Closures in JavaScript, I suggest Javascript Closures

by Richard Cornford.

I am currently working through a problem and at the point of pulling my hair out. I have an Ajax process that pops up a nice little div on success. In Firefox, predictably, I see the pop-up window and all is well. In IE, the ajax process runs and I do not get the pop-up window.

Maybe I am a little spoiled using Firebug because I can see the details of the request, the DOM and other important runtime bits. In IE I get nothing useful.

After writing the hundredth alert( ' yadda ' ); command, I thought I would ask the community for input. What do YOU use to debug javascript and ajax requests in IE?

P.S. Any one who write 'The Microsoft Script Debugger' will be taken out back and shot.

I was digging through a bunch of javascript code today and trying to trace out some variables. In JSEclipse, an eclipse plugin made by Interakt(newly in the Adobe fold), if you highlight a variable name, or a property name, it not only highlights all instances in the file, it also places little markers for each instance on the right hand gutter of the IDE. A quick mouse click jumps right to the instance. I've used JSEclipse for a little while now, but this was the first I noticed this handy feature.

This particular JS file was well over 700 lines and I needed all the help I can get. Thank you Interakt for JSEclipse.

There are plenty of other nice features in the JSEclipse plugin such as:

1. Contextual code completion
2. Suggest parameters to be filled
3. Reads all classes in current project
4. Scan current file for words
5. Syntax Highlighting
6. Syntax based code folding
7. Error reporting

Get a full feature list here.

You can get JSEclipse here. (Registration Required).