{"id":1638,"date":"2012-06-19T04:17:57","date_gmt":"2012-06-19T09:17:57","guid":{"rendered":"http:\/\/www.phpied.com\/?p=1638"},"modified":"2012-06-20T03:25:24","modified_gmt":"2012-06-20T08:25:24","slug":"yslow-development-setup","status":"publish","type":"post","link":"https:\/\/www.phpied.com\/yslow-development-setup\/","title":{"rendered":"YSlow development: setup"},"content":{"rendered":"

As promised<\/a>, 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.<\/p>\n

Checkout<\/h2>\n

First you need to get teh codez. Go to the Github repository<\/a> and click that big ol' Fork button. Then checkout the repository somewhere.<\/p>\n

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:<\/p>\n

https:\/\/github.com\/marcelduran\/yslow\/zipball\/master<\/a><\/p>\n

Make<\/h2>\n

For this next step you need make<\/code>. Good luck if you're on Windows. On Mac, seems like the most \"blessed\" version you can by installing this package<\/a> 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.<\/p>\n

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

Since we're building the bookmarklet we'll go like:<\/p>\n

$ make bookmarklet<\/pre>\n
But. Not yet. First things first.<\/p>\n
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.<\/p>\n
If you look in \/src\/bookmarklet<\/a> you'll see some config-*.js files. You need a new one for you too.<\/p>\n
Let's say you'll host the bookmarklet at https:\/\/www.phpied.com\/files\/yslow<\/a><\/code>.<\/p>\n
You start by copying config-local.js:<\/p>\n
$ cp src\/bookmarklet\/config-local.js src\/bookmarklet\/config-phpied.js<\/pre>\n
Next you edit one line there so it looks like:<\/p>\n
\n
 \r\n<\/span>YUI<\/span>.<\/span>add<\/span>(<\/span>'<\/span>yslow-config<\/span>'<\/span>, <\/span>function<\/span> <\/span>(<\/span>Y<\/span>)<\/span> <\/span>{<\/span>\r\n    <\/span>Y<\/span>.<\/span>namespace<\/span>(<\/span>'<\/span>YSLOW<\/span>'<\/span>)<\/span>.<\/span>config<\/span> = <\/span>{<\/span>\r\n        <\/span>host<\/span>: <\/span>'<\/span>https:\/\/www.phpied.com\/files\/yslow\/<\/span>'<\/span>,\r\n        <\/span><\/b>js<\/span>: <\/span>'<\/span>{{BOOKMARKLET_JS}}<\/span>'<\/span>,\r\n        <\/span>css<\/span>: <\/span>'<\/span>{{BOOKMARKLET_CSS}}<\/span>'<\/span>\r\n    <\/span>}<\/span>;\r\n<\/span>}<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
Now, time to build! All you need is to run `make` pointing to your config:<\/p>\n
$ make bookmarklet config=\"config-phpied.js\"\r\n\r\nbuilding YUI...\r\ndone\r\nbuilding BOOKMARKLET files...\r\ndone\r\nmerging YUI and BOOKMARKLET...\r\ndone<\/pre>\n
Now look what you've done! You've created a directory build\/bookmarklet<\/code><\/p>\n
$ ls build\/bookmarklet\/\r\nyslow-bookmarklet.js\tyslow-style.css<\/pre>\n
(you can also do `make pkg-bookmarklet` to create a minified version, but let's keep things readable for now)<\/p>\n
Host<\/h2>\n
Now you need to copy the .js and .css to a server of your choosing, be it localhost or now. I'd go:<\/p>\n
$ scp build\/bookmarklet\/* username@perfplanet.com:~\/phpied.com\/files\/yslow<\/pre>\n
Install bookmarklet<\/h2>\n
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<\/a> for the instructions.<\/p>\n
This page will update the hash in the url to:<\/p>\n
http:\/\/yslow.org\/mobile\/#javascript:.....more stuff...<\/pre>\n
All you need to do is change yslow.org<\/b> to your location, e.g. phpied.com\/files\/yslow<\/b>.<\/p>\n
Then bookmark the page.<\/p>\n
Then edit the bookmark and remove everything up to and including the hash # (http:\/\/yslow.org\/mobile\/#)<\/p>\n
Run<\/h2>\n
    \n
  1. Go to a page of your choosing<\/li>\n
  2. Click the bookmarklet<\/li>\n
  3. See YSlow UI appears<\/li>\n<\/ol>\n
    It works so well that you even need to look at a network analyzer to believe it's really using your own hosted version.<\/p>\n
    \"\"<\/p>\n
    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.<\/p>\n
    Console: the best friend<\/h2>\n
    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<\/code> and YSLOW<\/code>. Let's see how you add your codes to YSlow. That's as good an exercise as any.<\/p>\n
    Create a new file in a new dir like: mystuff\/stuff.js<\/code> with this in it:<\/p>\n
    \n
    parent<\/span>.<\/span>YUI<\/span> = <\/span>parent<\/span>.<\/span>YUI<\/span> || <\/span>YUI<\/span>;\r\n<\/span>parent<\/span>.<\/span>YSLOW<\/span> = <\/span>YSLOW<\/span>;<\/span><\/pre>\n<\/div>\n
    You know YSlow bookmarklet runs in an iframe, so we want to expose the iframe's two globals to the parent.<\/p>\n
    Add your new file in the Makefile<\/code> in the bookmarklet-files<\/code> part:<\/p>\n
    \n
     \r\n<\/span>bookmarklet<\/span>-<\/span>files<\/span>:\r\n  <\/span>@echo<\/span> <\/span>"<\/span>building BOOKMARKLET files...<\/span>"<\/span>\r\n  <\/span>@if<\/span> <\/span>[<\/span> ! -<\/span>d<\/span> $<\/span>(<\/span>BUILD_BOOKMARKLET<\/span>)<\/span> <\/span>]<\/span>; <\/span>then<\/span> <\/span>mkdir<\/span> -<\/span>p<\/span> $<\/span>(<\/span>BUILD_BOOKMARKLET<\/span>)<\/span>; <\/span>fi<\/span>\r\n  <\/span>@cat<\/span> $<\/span>(<\/span>SRC_COMMON<\/span>)<\/span>\/<\/span>yslow<\/span>.<\/span>js<\/span> \\\r\n            $<\/span>(<\/span>SRC_COMMON<\/span>)<\/span>\/<\/span>version<\/span>.<\/span>js<\/span> \\\r\n            <\/span>[<\/span>....<\/span>]<\/span>\r\n            $<\/span>(<\/span>SRC_COMMON<\/span>)<\/span>\/<\/span>peeler<\/span>.<\/span>js<\/span> \\\r\n            $<\/span>(<\/span>SRC_COMMON<\/span>)<\/span>\/<\/span>peeler<\/span>-<\/span>bm<\/span>-<\/span>ch<\/span>-<\/span>ph<\/span>.<\/span>js<\/span> \\\r\n            $<\/span>(<\/span>SRC_BOOKMARKLET<\/span>)<\/span>\/$<\/span>(<\/span>BM_CONFIG<\/span>)<\/span> \\\r\n            <\/span>mystuff<\/span>\/<\/span>stuff<\/span>.<\/span>js<\/span> \\<\/span><\/b>\r\n            $(<\/span>SRC_BOOKMARKLET<\/span>)<\/span>\/<\/span>controller<\/span>.<\/span>js<\/span> | \\\r\n            sed<\/span> <\/span>s<\/span>\/<\/span>{<\/span>{<\/span>YSLOW_VERSION<\/span>}<\/span>}<\/span>\/$<\/span>(<\/span>YSLOW_VERSION<\/span>)<\/span>\/ | \\\r\n            <\/span>sed<\/span> <\/span>s<\/span>\/<\/span>{<\/span>{<\/span>BOOKMARKLET_JS<\/span>}<\/span>}<\/span>\/$<\/span>(<\/span>BOOKMARKLET_JS<\/span>)<\/span>\/ | \\\r\n            <\/span>sed<\/span> <\/span>s<\/span>\/<\/span>{<\/span>{<\/span>BOOKMARKLET_CSS<\/span>}<\/span>}<\/span>\/$<\/span>(<\/span>BOOKMARKLET_CSS<\/span>)<\/span>\/ \\\r\n            > $<\/span>(<\/span>BUILD_BOOKMARKLET<\/span>)<\/span>\/$<\/span>(<\/span>BOOKMARKLET_YSLOW_JS<\/span>)<\/span><\/span><\/pre>\n<\/div>\n
    Then build and deploy:<\/p>\n
    $ make bookmarklet config=\"config-phpied.js\"; \\\r\n  scp build\/bookmarklet\/* \\\r\n  username@perfplanet.com:~\/phpied.com\/files\/yslow<\/pre>\n
    Now you can run the bookmarklet and start exploring what's available to you in the console:<\/p>\n
    \"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[43,47],"tags":[],"_links":{"self":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/1638"}],"collection":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/comments?post=1638"}],"version-history":[{"count":0,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/posts\/1638\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/media?parent=1638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/categories?post=1638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpied.com\/wp-json\/wp\/v2\/tags?post=1638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}