After downloading Yslow, here was the stats of my home page (http://www.jc-designs.net):

Then, I downloaded something called Minify, which you can get here. It is a php script that combines all your css files into one, and all your js files into one. The directions are pretty easy.

Once you have downloaded it, put it on your server in the root directory, and open this url: http://yoursite.com/min/builder/.

You then add all of your css files, in the order you have them in. Be careful here…if you have any @import in your main css file, it will screw it up. Trust me, I found this out before I actually read the line that tells you that. Once you have all the files listed, click on update. It then gives you the html to use to replace the linked css files. Plus a line to add to one of the minifier config files. I know, sounds scary, but on that build page, it tells you exactly what to do. Then you do the same for the js files.

What does all that crap get you? Read on!

Well after I did this to my home page, here is what Yslow gave me for a performance score:

I went from a D grade, to a C. Dropped the number of http requests by 10, from 34 to 24, and my total weight went from 417.3k to 228.9k. Not freakin’ bad for 10 minutes worth of work. I then went and updated the rest of my site.

Of course…I wanted to do this to my blog here….but i can’t. Well, at least I don’t want to, cause I’m scare. For one, I can do nothing to my js scripts other than the file I wrote, but it is only 1.8k…not over worried. The other though is for a Wordpress plugin, and the other is actually linking to Google’s jQuery 1.4 min file. Not sure what I can do with those. So if anyone with experience in Wordpress and Minify can help me out, let me know. I also only have 2 css files – 1 for a plugin, and my main one. both are fairly small. I could reduce it with Minify, but I’m not into going through all my files again. I’m not even done with the blog yet, so maybe later.

Anyway, for the small amount I did, I hope you see the worth of both of these items.

Its not very intuitive, and I’ve had to get a lot of help, but all-in-all, I’m diggin’ it. So, for those that actually already use it, this is for you.

Zen Coding is a nice little plugin with some real crap documentation. I only know how to do a few things with it so far, which I’ll let you know how to do.

First things first….get the plugin here (they have a ton of versions for different frameworks…including Dreamweaver.

Here is how to install it…follow this closely.

1. Install EclipseMonkey using update site: http://download.eclipse.org/technology/dash/update (you can skip this step if you have Aptana installed)
2. Create top-level project in your current Eclipse workspace, name it, for example, zencoding
3. Create scripts folder inside newly created project
4. Extract contents of downloaded zip plugin into this folder.
5. Restart Eclipse/Aptana if needed

Soooo…..what do you do with it? Let’s say you want divs with ids of: container, header, content, and footer. Click in the file you are working in where you want these to appear, and type this:

div#container>div#header>div#content

Select it, go to Scripts>Zen Coding>Expand Abbreviation….and you get:

<div id="container">
    <div id="header"></div>
</div>

Now lets say you actually wanted an unordered list with 5 list items containing a tags within the content div….you would type this instead:

div#container>div#header>div#content>ul>li*5>a

and you get:

<div id="container">
    <div id="header">
         <div id="content">
<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>
        </div>
    </div>
</div>

Now, if you wanted a bunch of divs that were not children of each other, you would do this:

div#left+div#right

So…..the + is for non-children elements, > is for children elemts, * is for multiple elements within an element.

At the moment, that is all I’ve worked through. I’ll add more as I find them out. Again, the documentation for this is garbage.

One thing to note, the shortcut keys were not what I wanted….they were set to Command + whatever. I wanted Alt….sooo follow these instructions to change them:

“There’s a Key command describing current shortcut, which is M3+E in this case (M3 stands for Alt). Just change this shortcut and save the file.”

Well, mine was set to M4 when i installed it…so I actually changed it to M3. Which as it says, means Alt.

Have fun with it! And if you know more about it, please let me know.