YSlow development: setup

As promised, let's setup for YSlow development using the easiest option - the bookmarklet version. The journey of conquering the world with your rules and extensions... starts with the first step.

Checkout

First you need to get teh codez. Go to the Github repository and click that big ol' Fork button. Then checkout the repository somewhere.

Alternatively, if you don't have a github account and don't care to install and deal with git on your computer, this is OK. Just download the repository as a 1.1MB zip file from:

https://github.com/marcelduran/yslow/zipball/master

Make

For this next step you need make. Good luck if you're on Windows. On Mac, seems like the most "blessed" version you can by installing this package called Command Line Tools for Xcode. Which (I'm not sure but probably) also requires Xcode. Xcode in the App Store. It's about 1.5GB. You go, I'll wait.

In the top directory of the code you've downloaded, there's a readme and /src (where it gets interesting) and a Makefile.

Since we're building the bookmarklet we'll go like:

$ make bookmarklet

But. Not yet. First things first.

The bookmarklet consists of one largish JS file and one smallish CSS. The bookmark that you'll click in the browser will load the JS file. Then the JS needs to know where to find the CSS. So you need a big of config.

If you look in /src/bookmarklet you'll see some config-*.js files. You need a new one for you too.

Let's say you'll host the bookmarklet at https://www.phpied.com/files/yslow.

You start by copying config-local.js:

$ cp src/bookmarklet/config-local.js src/bookmarklet/config-phpied.js

Next you edit one line there so it looks like:

 
YUI.add('yslow-config', function (Y) {
    Y.namespace('YSLOW').config = {
        host: 'https://www.phpied.com/files/yslow/',
        js: '{{BOOKMARKLET_JS}}',
        css: '{{BOOKMARKLET_CSS}}'
    };
});

Now, time to build! All you need is to run `make` pointing to your config:

$ make bookmarklet config="config-phpied.js"

building YUI...
done
building BOOKMARKLET files...
done
merging YUI and BOOKMARKLET...
done

Now look what you've done! You've created a directory build/bookmarklet

$ ls build/bookmarklet/
yslow-bookmarklet.js	yslow-style.css

(you can also do `make pkg-bookmarklet` to create a minified version, but let's keep things readable for now)

Host

Now you need to copy the .js and .css to a server of your choosing, be it localhost or now. I'd go:

$ scp build/bookmarklet/* username@perfplanet.com:~/phpied.com/files/yslow

Install bookmarklet

If you've already installed the YSlow bookmarklet in your browser, you can go and edit the location of the JS file. If not, visit http://yslow.org/mobile for the instructions.

This page will update the hash in the url to:

http://yslow.org/mobile/#javascript:.....more stuff...

All you need to do is change yslow.org to your location, e.g. phpied.com/files/yslow.

Then bookmark the page.

Then edit the bookmark and remove everything up to and including the hash # (http://yslow.org/mobile/#)

Run

1. Go to a page of your choosing
2. Click the bookmarklet
3. See YSlow UI appears

It works so well that you even need to look at a network analyzer to believe it's really using your own hosted version.

And your own version is just a big javascript really, so there's nothing new and nothing extension-y to learn like XUL or manifest.json. You can just start tinkering immediately. You can even edit that .js file directly and make it like a real tight web programming loop: save-refresh. Or you can edit source files and rebuild, repush combining the make and scp commands. Let's do that.

Console: the best friend

YSlow takes extra care to run unobtrusively to the page. In an iframe, not leaving any globals behind. Meh, I want to play in the console. So I want to access the two globals: YUI and YSLOW. Let's see how you add your codes to YSlow. That's as good an exercise as any.

Create a new file in a new dir like: mystuff/stuff.js with this in it:

parent.YUI = parent.YUI || YUI;
parent.YSLOW = YSLOW;

You know YSlow bookmarklet runs in an iframe, so we want to expose the iframe's two globals to the parent.

Add your new file in the Makefile in the bookmarklet-files part:

 
bookmarklet-files:
  @echo "building BOOKMARKLET files..."
  @if [ ! -d $(BUILD_BOOKMARKLET) ]; then mkdir -p $(BUILD_BOOKMARKLET); fi
  @cat $(SRC_COMMON)/yslow.js \
            $(SRC_COMMON)/version.js \
            [....]
            $(SRC_COMMON)/peeler.js \
            $(SRC_COMMON)/peeler-bm-ch-ph.js \
            $(SRC_BOOKMARKLET)/$(BM_CONFIG) \
            mystuff/stuff.js \
            $(SRC_BOOKMARKLET)/controller.js | \
            sed s/{{YSLOW_VERSION}}/$(YSLOW_VERSION)/ | \
            sed s/{{BOOKMARKLET_JS}}/$(BOOKMARKLET_JS)/ | \
            sed s/{{BOOKMARKLET_CSS}}/$(BOOKMARKLET_CSS)/ \
            > $(BUILD_BOOKMARKLET)/$(BOOKMARKLET_YSLOW_JS)

Then build and deploy:

$ make bookmarklet config="config-phpied.js"; \
  scp build/bookmarklet/* \
  username@perfplanet.com:~/phpied.com/files/yslow

Now you can run the bookmarklet and start exploring what's available to you in the console:

Tell your friends about this post on Facebook and Twitter