moz-proxy issues

I like Firefox. A lot. Even when it was named Phoenix.

I even use it at work (using PortableApps.com).

But some sites (ok, only StackExchange sites) I visit I get multiple popups asking for my user name and password. Because I’m behind a firewall I have to enter my credentials, no big deal. But they don’t work! So I have to hit Cancel. Not just once, but, like, 4 times!

Continue reading

Javascript Optimizations

I was looking at kangax‘s suggestions for Google Closure compression techniques and I wanted to know how UglifyJS handled it.

Input:
var i = 10000,
j = 0.1,
k = /[\w]/,
m = new Array(1, 2, 3);
throw 0.1;

Closure:
var i=1E4,j=0.1,k=/[\w]/,m=[1,2,3];throw 0.1;

UglifyJS:
var i=1e4,j=.1,k=/[\w]/,m=new Array(1,2,3);throw.1

Interesting that UglifyJS doesn’t compress the Array declaration, but does compress 2 other statements that Google Closure doesn’t/won’t.

In UglifyJS’s README it states that Google Closure “runs terribly slow”. Why is this an issue? Won’t you only compress when pushing to prod?

Comparison of 10 CSS Compressors

I decided to evaluate different CSS compressors to see which one was "the best". I really didn’t expect it to take a week to put this together. Along the way I discovered more ways of compression: some from the tools I evaluated and some I thought of along the way.

I began my research by taking the list of 10 compressors from Design Shack’s 18 CSS Compression Tools and Techniques article by Joshua Johnson. I replaced one with the tool I currently use, YUI compressor. YUI compressor is the only tool that can be downloaded and added to the build process. I also consulted the wonderful resource found at Lottery Post. The next step was to create a CSS file, feed it to each of the compressors and compared them. I was going to use the color name “ForestGreen” but because it wouldn’t pass CSS validation I used the CSS-compliant color name “fuchsia”. The original file has a size of 4.01KB. Keeping the CSS file simple was difficult. Compressors were thrown off I placed comments in strange places, but in the end I left those fringe cases out.

Compressors

Here are the compressors, listed alphabetically.

Compression Techniques

The compression techniques that I was looking for spanned from "simple and expected" to "difficult and potentially behavior-changing". Lottery Post does a good job explaining some advanced compression techniques and why they are dangerous. I decided to break up the compression techniques into categories.

  1. Safe
  2. Unconventional
  3. Dangerous

Safe

  1. Removes comments
  2. Removes whitespace
  3. Removes empty blocks
  4. Removes decimals
  5. Removes units from zero values&sup1
  6. Removes quotes from URIs
  7. Reduces margin, padding, border-width
  8. Compresses hex colors
  9. Compresses colors by hex or name, whichever is shorter
  10. Converts RGB to hex

The "safe" techniques I expected to see from most compressors, although some did surprise me. These should have no ill effects, such as removing quotes around URIs².

Unconventional

  1. Removes duplicate rules
  2. Removes overwritten rules
  3. Compresses font weight
  4. Changes color names to lowercase
  5. Changes color hex values to lowercase

These techniques shouldn’t affect the behavior of the page and were either not very common or I hadn’t seen them before — especially compressing the font weight. Only two compressors did this — CSS Compressor and CleanCSS. You might wonder why changing the colors to lowercase would help. Well, using lowercase letters helps when you GZIP your files³. In a simple test, using lowercase RBG hex values saved me two bytes after GZIP compression.

Dangerous

  1. Converts tag names to lowercase
  2. Combines styles for the same element
  3. Combines font styles
  4. Combines margins, paddings, borders
  5. Combines same styles from different elements

Techniques 2-5 match up to the ones Lottery Post won’t perform because of the possibility of changing the behavior. I often don’t use the "Cascading" part of "Cascading Style Sheets" so I don’t think it would affect any of my CSS. Again, changing the case where you can will help GZIP compression. Beware, though. This is safe for HTML, but not safe for XML4. In a simple test, changing "DIV" to "div" did save one byte after GZIP compression. (I know, "1 byte". But we’re talking about micro-optimizations.) Since none of the compressors changed the tags’ case, I didn’t include it in the summary table.

Commonalities

All compressors removed some comments and most whitespace. Most compressors tried to compress hex color values. But besides this, there were very little that all compressors shared.

Compressor Results

Arantius CSS Compressor

I wasn’t too impressed with the Arantius compressor. It removed spaces and single line comments, but not multi-line ones. The compressor removed all possible semicolons, minus the extra one in the “removesExtraSemicolons” class. Everything else was unchanged.
Output CSS – 1.95KB

CleanCSS

CleanCSS applied most techniques, but did miss 2 "safe" ones (removing the decimals and removing quotes around URLs) and one "dangerous" technique of combining font styles. Otherwise, it was one of the better compressors. It was one of only two that compressed the font-weight and was smart enough to remove overwritten and duplicate rules. It combined individual margins and paddings when all four sides were present and grouped classes with the same style. It tied for second place in smallest file size.
Output CSS – 1.51KB

CSS Compressor

CSS Compressor had some options and I tried to use the most aggresive ones. Here is the setup I used: "Highest" compression mode, checked "Remove last ;" and unchecked "Only safe optimisations"
This compressor was the best. It removed all possible spaces and semicolons. CSS compressor also compressed the font-weight and did a remarkable job of combining rules, even combining the “removesURLSingleQuotes” and “removesURLDoubleQuotes” which some other compressors missed. CSS Compressor had the smallest compressed file size.

Output CSS – 1.50KB

CSS Drive

CSS drive didn’t do a very good job. It did a mediocre job removing spaces. It didn’t remove any empty blocks or change RGB colors. It had the second to largest file size.
Output CSS – 1.94KB

CSS Optimiser

This compressor did an adequate job compressing styles. Some quirks though: it took my one class of "removesDuplicateRules" and declared it twice.
.removesDuplicateRules,.removesDuplicateRules{width:4%}

It removed zero value pixel units, but not percentages or ems. It did simple hex color compression, but didn’t touch the RGB colors. It was one of two that compressed my font styles into one font declaration. It tried to reduce the size of the margin classes, but because of the length of the class name, actually increased the size of the file. (“.combineIndividualMargins3” is larger than “margin-left:2px”.)

Output CSS – 1.57KB

Lottery Post

Lottery Post is a very good CSS compressor for what it says it will do. Except for removing decimals it used all the other "easy" techniques. It doesn’t try the "unconventional" or "dangerous" techniques and gives good reason not to. Lottery Post also boasts that it is the only compressor to fix a CSS bug in IE6 pertaining to ":first-line" and ":first-letter".
I was disappointed to see my decimal RGB colors incorrectly converted. "rgb(250, 150, 50)" should have changed to "#fa9632" but instead was "#FAFAFA". And both RGB percentages were converted to "#FFF" If those two issues were fixed I would confidentally call this one a very good "safe" compressor.
Output CSS – 1.75KB

PHP Insider

This compressor removed new lines, tabs and comments. And that’s it. It had the largest compressed file size.
Output CSS – 2.00KB

Pingates

The good: Pingates did a good job of removing spaces and combining styles. It removed duplicate and overwritten rules. It was one of only two to compress the font styles and the only one to change color values to lowercase.
The bad: RGB colors were incorrectly changed. URL quotes values were escaped instead of removed.
The ugly: It replaced my class name "removesAllWhiteSpace" to "removesAll#ffffffSpace".
Output CSS – 1.51KB

Seven-forty

A light compressor, it only tried the "easy" compression techniques and then, not real well. Whitespace was removed, but it didn’t remove trailing semicolons, something I’ve come to expect. It incorrectly changed my "background-color: rgb(255, 0, 0)" to "#ff00".
Output CSS – 1.86KB

YUI compressor

"Ah. Saving the best for last," I thought. I thought wrong. I was surprised when the YUI compressor didn’t even remove trailing semicolons! Yikes! Because it is open-source, you can download it and change what you want to. And because it is packaged as a jar file, it can be easily integrated into an Ant build process. But as far as removing bits, it lacked, settling only on trying the "safe" techniques.
Output CSS – 1.84KB

Conclusion

The conclusion I came to is no compressor does it all. And as for my development, I should probably look for something other than YUI compressor. I might have to develop my own compressor that I can plug into my build process.

Arantius CSS Compressor CleanCSS CSS Compressor CSS Drive CSS Optimizer/ Optimiser Lottery Post PHP Insider Pingates Seven- forty YUI compressor
Removes trailing semi-colons Yes Yes Yes Yes Yes Yes Some Yes No No
Removes empty blocks No Yes Yes No Yes Yes No Yes Some Yes
Removes decimals No No Yes No No Yes No No Yes Yes
Removes units on zero lengths/widths/size No Yes Yes No Only for "px" Yes No Yes Yes Yes
Removes quotes from url() values No No Yes No No Yes No Escapes them instead No No
Reduces the number of sides specified for margin, padding, and border-width No Yes Yes No No Yes No Not border-width No No
Compresses 6-digit hex colors to 3-digits No Yes Yes Yes Yes Yes No Yes Yes Yes
Reduces colors by color name or hex No Yes Yes No No Yes No No No No
Changes rgb() values No Yes Yes Yes No Yes No Yes Error Not %
Removes duplicate rules No Yes Yes No No No No Yes No No
Removes overwritten styles No Yes Yes No No No No Yes No No
Uses lowercase color names/hex values No Yes Yes No No No No Yes No No
Combines styles for the same element No Yes Yes No Yes No No Yes No No
Combines individual font styles No No No No Yes No No Yes No No
Combines individual margin, padding, or border styles No One case One case No Error No No Once case No No
Combines styles for multiple elements No Yes Yes No Yes No No Yes No No

References:

¹ "After a zero length, the unit identifier is optional." – http://www.w3.org/TR/CSS2/syndata.html#length-units

² "The format of a URI value is ‘url(‘ followed by optional white space followed by an optional single quote (‘) or double quote (") character followed by the URI itself, followed by an optional single quote (‘) or double quote (") character followed by optional white space followed by ‘)’. The two quote characters must be the same." – http://www.w3.org/TR/CSS2/syndata.html#uri

³ http://www.julienlecomte.net/yuicompressor/CHANGELOG

4 "The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive." – http://www.w3.org/TR/CSS2/selector.html

Friday, January 29 at 7:09 PM: Updated table to reflect that Lottery Post’s compressor does remove decimals and therefore uses all “safe” compressions (including two I forgot!). Thanks to Todd for pointing that out.

White-space and character 160

I came across a problem in Internet Explorer (it wasn’t a problem with Firefox) when I was trying to compare two strings. To me, one string looked to have an extra space in the front. No problem, I’ll just call the jQuery trim function. Well, that didn’t work. So I used charCodeAt and found it was ASCII character 160. I looked up char code 160 and saw that it is a “Non-breaking space”. You would think that a “space” character would be trimmed. I looked at the jQuery code that does the trimming and the grep pattern uses \s. So, evidently you can’t use \s to catch the “Non-breaking space” in IE. I wonder why no one else has seen this. I wrote up a test page to illustrate this.

To create the non-breaking space, you can use String.fromCharCode(160) or the Unicode representation “\u00A0”. “ ” doesn’t seem to work when using regular expressions, although it behaves the same when printed.

Browser Evaluates character 160 as white-space
Firefox 3, 3.5 Yes
Chrome 3.0 Yes
Internet Explorer 7, 8 No
Safari 3.2 No
Opera 9 Yes