I went to see Glenn at his shop, where he not only was able to fix my issue right away, he also showed me some of his models and told me a little bit about the business. “It takes me about 25 hours for one guitar”, he told me, which is, given the fact that if you look at the fine quality, does not sound that much. He uses a CNC lathe for cutting the exact form and shape out of the wood and, after assembling the neck etc., he sends the baby off to LA for finishing.

On his website, you can check out his current guitar models as well as his amp models. In addition to that, Glenn also offers various other guitar and amp-related services. You can also check out his videos on YouTube to see that not only can he build these things, but is also quite the master on the fretboard.

Making use of the web, Glenn can also be found on Facebook and he will also have a stand at The 2010 NAMM Show, January 14-17 in Anaheim, California. Should you make your way there, definitely pay him a visit and check out his work. It is really great and made with real passion for guitars and music.

A few major differences

I am not going to go into all the things that are different between YUI2 and YUI3, this is beyond the scope of this post. There is already lots of documentation on YDN and a very good video covering lots of questions like “So whats different?”. Just a few key things to note:

• YUI3 is majorly different to YUI2. It is basically a new library and thus also, in a lot of ways, works completely different than its predecessor.
• To avoid conflicts between the two libraries, the global YAHOO object (used in YUI2) is now YUI. This also allows to have both YUI2 and YUI3 on the same page.
• Every piece of code you write needs to be wrapped in the following statement: YUI().use([YUI3 modules I want to use], function (Y) { ...my code here... } );This, in theory, makes creating namespaces, like we did in YUI2, unnecessary.

A Simple Example: JavaScript Countdown

Just to play around with it and start with a pretty basic example, I wanted to do a countdown in JavaScript. How would I do that using YUI3?

Step by Step

The following steps would need to get executed in order to make this example work:

1. Put basic markup on the page, which marks the start time of the countdown, e.g. 30 minutes and 0 seconds.
2. Have one function, decreaseSeconds that decreases the seconds and call this function every second (or 1000 milliseconds).
3. If the seconds counter reaches 0, decrease the minutes using decreaseMinutes.
4. Stop the timer if minutes and seconds reach 0.

Basic Markup

As said, the markup on the page already serves as the start time for the countdown and is pretty simple:

<div id="countdown">
        <span id="min">30</span>:<span id="sec">00</span>
</div>

Putting YUI3 on the page

In order to put YUI3 on the page, we need to include the YUI Global Object:

<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script> 

And just to verify this is working, we will add some debugging code on the page:

YUI().use("node", function (Y) {
    alert("YUI3 is here!");
});

Just a few words on this. The first argument of the use function, in this case “node”, tells the YUI instance which modules to load. As it will turn out later, the node module, together with the functionality that the YUI global object provides, are enough to make this example work. The last argument here is a callback function, which has the YUI instance as an argument. In this function is where your code lives and has access to the YUI3 instance and modules, if loaded in. More on this in the documentation.

So we got the basics covered, YUI3 is on the page and we can move on to the program logic.

Setting up variables and functions

First I am going to set up some variables that I am going to need throughout the code:

var minutes = Y.get("#min"),
    seconds = Y.get("#sec"),
    timer,
    liftOff = false;

As you can see here, YUI3 gives you the ability to access a DOM element using CSS selectors out of the box. Y.get(“#min”) returns a node (in YUI3 terms) which wraps the underlying DOM object. But be aware that this object here is not the DOM object itself, which is different to what YAHOO.util.Dom.get(“min”) would do.

We will also set up the decreaseSeconds function and the timer:

function decreaseSeconds() {
    // get current seconds value
    var secs = seconds.get("innerHTML");

    if (secs === "00") {
        // move to 59
        secs = 59;
        decreaseMinutes();
    } else {
        secs--;
        if (secs < 10) {
            secs = "0" + secs;
        }
    }

    if (!liftOff) {
        seconds.set("innerHTML", secs);
    }
}

timer = Y.later(1000, null, decreaseSeconds, [], true);

Instead of talking about the program logic, which should be pretty straight forward, I would like to highlight YUI3 specific things here:

• Setting up the timer using Y.later is pretty easy and comparable to YAHOO.later in YUI2.
• As the node returned by Y.get is not the DOM node, doing something like seconds.innerHTML does not work. In fact, it will return ‘undefined’. If you do a console.dir(seconds) you will discover that this does not look like a DOM object at all, but is, as stated above, a YUI node instance wrapping the DOM element with id=”sec”. So instead of doing .innerHTML, we need to use seconds.get(“innerHTML”) to access the content between the opening and closing tag.
• Likewise, to set content using innerHTML, we need to do seconds.set(“innerHTML”, secs).

This is something to get used to at first. Because in YUI2, people (including me) were used to have the actual DOM object at hand and perform native DOM operations on it. This is not possible anymore with YUI3. It is still possible to access the underlying DOM objects, see Luke’s comment.

After setting this up, we can move on to adding the functionality for decreasing the minutes and making the countdown work.

Making it work

Here is the code and logic for decreasing the minutes and canceling the timer if 0 is reached:

function decreaseMinutes() {
    var mins = minutes.get("innerHTML");

    if (mins > 0) {
        mins--;
        if (mins < 10) {
            mins = "0" + mins;
        }
        minutes.set("innerHTML", mins);
    } else {
        timer.cancel();
        liftOff = true;
    }
}

Pretty straight forward and also uses the wrapper methods to access DOM functionality. It works now, but we are not quite finished yet.

Modularizing

As you can see, all the code is currently inline on the page and gets executed as soon as the page loads. This is suboptimal. What I used to do using YUI2 is creating a module specific namespace and then call a public method (made available through the use of the Module Pattern) on the page that needed that functionality. So for this the module would be, e.g.:

YAHOO.Klaus.Countdown = function () {
    ... my code ...
    return {
         init: init
    };
}();

And then, on whatever page I want to use it, do:

YAHOO.Klaus.Countdown.init();

I was curious how to achieve something like this in YUI3.

I came up with a solution but I am not sure if this is the suggested way of doing this. I hope it is, as I couldn’t find a different way of doing it. The secret is to add the “module” you created as a module to YUI3, like:

Y.add("Klaus.Countdown", init);

The second argument is a function name to be executed when the module is being invoked used the use() function.

So what is left to do is saving the countdown code to a separate file and then call the module from within a script block on the page:

<script type="text/javascript">
    YUI().use("Klaus.Countdown");
</script>

So we are done and hopefully happy with our first steps in YUI3.

Conclusion

I have deliberately chosen a simple example to start with to avoid frustrations coming out of having to learn and getting used to too many things at once. Like with every new piece of software, getting started “somehow” in the first place is critical and finding out how to achieve things without running into too many roadblocks at once. How easy or hard it is to use YUI3, I have yet to determine when probably facing more complex examples, but I believe this simple examples gives a sneak peak into what awaits at the end of the line.

Resources

• YUI3 on YDN
• YU3 API Doc
• YUI Blog
• Belorussian translation of this article kindly provided by Patricia Clausnitzer and http://www.fatcow.com/

Stoyan Stefanov, a colleague of mine at Yahoo!, recently published Object-Oriented JavaScript. Personally, the book about JavaScript I was waiting for. A while back, I read and reviewed Jeremy Keith’s DOM Scripting, which is the perfect introduction as to how developers should use JavaScript these days in a browser environment. Progressive Enhancement was one of the key concepts in there. So after getting the basics covered, my expectation was that Stoyan’s book provides me with supporting material for intermediate to advanced JavaScript programming tasks. Does it deliver? We will come to that very shortly.

Contents

Chapters 1 to 4 in his book cover a brief history about JavaScript and the basic elements of the language, like variables, primitive data types, conditions and loops as well as functions and objects. The latter already have their specialties in JavaScript and Stoyan explains those special characteristics.

Chapters 5 and 6 are devoted to prototype and how inheritance works in JavaScript, a very essential thing to cover when we are talking about advanced techniques.

Chapter 7 talks about what readers of DOM Scripting might still remember, namely how JavaScript can be used to access and manipulate specific elements in the DOM. The author also takes a look at Events and the ever popular XMLHttpRequest.

And finally, the highlight comes last, Chapter 8 deals with what hardcore programmers were waiting for: Coding and Design Patterns. Having done a little research about this myself, I found it great that Stoyan documents concepts that have become good practice in the JavaScript world, like namespacing and creating public and private properties and methods. In the design patterns part, he talks about Singletons amongst various other patterns at the programmers disposal.

The book closes with a quite comprehensive appendix, which includes listing reserved words, referencing built-in functions and objects and regular expressions in JavaScript.

Rating and Reasoning

My Rating: 9 out of 10

Even though it states that “no prior JavaScript knowledge is required”, I would say that is a bit of an understatement. If DOM Scripting was your first JavaScript book then I would put the following equation on the board: DOM Scripting + experience with these techniques in The Real World (meaning on actual live projects) = ready for Object-Oriented JavaScript. Don’t get me wrong, Stoyan covers the basics (variables, conditions etc.) in the first few chapters, but after that, the learning curve gets pretty steep and I believe it is safe to say, without any prior knowledge, you will put this book back on the shelf, left frustrated.

I have worked on a couple of minor web projects before Yahoo! Europe hired me in May 2007, so to this date, I believe I was able to acquire some experience when it comes to using JavaScript on high-scale websites. From my perspective, the first couple of chapters was a nice refresh on the topic, but only then, in Chapters 5 to 8, things got interesting with bits and pieces in there that helped me closing some knowledge gaps about certain concepts, which is really great. This, again, supports my feeling that this book is not meant for every JavaScript developer out there, independent of whether it is a newbie or an advanced developer. I feel that people with probably a couple of years experience might get more out of it than someone who just delved into JavaScript a month ago.

It is difficult to come up with concrete examples to explain this, and this observation is highly subjective of course, but I feel that the way the book is done and written, it feels a lot “drier” and less “exciting” to read compared to DOM Scripting. Which, again, if this targets JavaScript beginners, should not be the case. But I believe the more complex the material gets, the harder the job becomes of having to thrill and excite the reader.

What I really like about the book is that basically all the examples Stoyan gives, you can type into the Firebug console right away to try out for yourself. As I am a believer that you learn new skills most effectively by actually doing something and play with it, I am pretty sure this is a good way of imparting knowledge.

Conclusion

If you are a Web Developer with several years of experience on the job and with JavaScript and you want to move your knowledge level up a notch or two, this book is for you. If you want to play with the cool kids, then get this book. If you are more or less new to the JavaScript world, you might want to consider starting with DOM Scripting first and getting experience using those techniques on real world projects, before diving into the advanced concepts discussed in Object-Oriented JavaScript.

I was not prepared enough, so I thought, but came race day, I decided to change my strategy. The weather was just as great as last year, with blue and sunny skies all day. Almost too warm for running. And with almost 30,000 other runners at the starting line, I decided that I will try to stay under 2 hours. If I can keep the pace (which would be 5:41 min/km on average), that’s great, if I can’t do it, I will just slow down and just be there for the experience.

Looking back at the run, I believe I started slightly too quick. To be on the safe side, I was trying to keep my pace between 5:15 and 5:30, because you lose a little bit of time at the refreshment points and I knew that just after 11 km, there is a very long (about 5 km) stretch from Ringstraße to Schönbrunn Palace, which is also slightly uphill, completely in the sun. I knew this from the year before, this is the most tedious part of the half marathon. I had to slow down a bit and push myself through that part of the race. But slowing down there was not a big deal, because by the time I got there, I had established a lead (in relation to my goal to stay under 2 hours) of over 4 minutes. I literally checked my pace about every minute to make sure I am still on track.

Thankfully, after that uphill part, there is a turn that takes the runners back along Mariahilfer Straße (which is then slightly downhill) to the Ringstraße and to the finish line at Heldenplatz. By then, I couldn’t keep my original pace I started off with and the last couple of kilometres were more a matter of willpower than anything else. But finally, I made it to the finish line, hit the stop button on my watch and it showed me what I wanted to see: Under two hours. 01:55:50. Mission accomplished.

No Car? No Way!

When I moved to Sunnyvale end of January 2009, I already knew that I had to get my US drivers license and then a car in the foreseeable future. Living out here in the South Bay, without a car is…doable, yes, don’t get me wrong. It just takes ages to go somewhere on public transport. You will get where you want to eventually, but it just takes looooonger. A rough estimate I came up with was that it takes about three times longer to take public transportation over here than doing the same using a car. But that is not supported by any evidence, just a guess on my end.

I had to go through the written and practice test at the DMV, which was not a problem after studying the DMV handbook (PDF version) and keeping the pitfalls in mind. And after that, I had to think about which car to get and making up my mind about it.

I have a soft spot for German cars, I have to admit. I have had two cars before in Austria, both of them were VW Golfs (a 1996 in black, and a 2003 in silver), very popular and reliable. But this time I decided that I would like to go with something more sporty. In the end I decided to go with a coupe by BMW. After thinking about the financial impact, I went for a certified pre-owned car from a dealer instead of a e.g. leasing a new one. Also because the whole leasing process is, in general, pretty confusing (at least to me) and so I feared that they might put in some additional hidden fees into the leasing rate that might in the end increase the financial burden.

Buying a car from a dealership and not from a private party was also a decision I made, simply because the risk of getting a not-well-maintained car with some hidden defects is higher buying from a private party than from a dealer. Besides, buying a certified pre-owned vehicle means it comes with original manufacturer warranty, which is another big plus in my mind. Of course, you pay more for that warranty but to me it seemed worth it.

Research

So once I had figured out the model I was looking for, I did some research to see which dealers had one in their inventory. I ended up with finding three dealers (two of the cars were black, one was silver). I visited all three and test-drove the vehicles. Actually I only test-drove two, because at the third dealership they either were unable to find the car on their lot or it was already sold. Whatever.

After doing that, Internet research came into play, because I wanted to be prepared for the negotiation phase. Edmunds.com was a very helpful resource for that. Apart from various guides, articles about the car market and tips about buying a car, it also lets you calculate what they call TMV (True Market Value) of a used car, based on color, mileage, extras and condition. This is very helpful as you can take this amount as a basis for the negotiation phase.

Negotiating

In the end I ended up with a choice between two similar vehicles, black and silver with more or less the same sticker price set. I started by calling dealer A and naming essentially the TMV provided by Edmunds.com minus about a thousand dollars. I was not really expecting from them to meet that offer, but rather drop their sticker price. So they did, by about 300 Dollars. With that in mind, I hung up, saying I have to think about it and called dealer B, doing essentially the same. They dropped the price as well, by about the same amount. Then I repeated the procedure, getting back to dealer A, naming an amount slightly higher than my first offer to dealer A, saying that the other dealer offered me this and asking if they could match it. They would then drop the price again.

After going back and forth a couple of times, at some point you feel that it probably does not go down any further. In the end, the offers from both dealers where pretty similar and actually a couple of hundred dollars below the actually TMV I had from Edmunds.com. I finally based my decision on how I was treated by the sales person and so I went for the black car and felt that, based on the numbers, I got a pretty good deal. I am pretty sure that, if I had gone for an American car, I could have lowered the price even more, essentially getting a bargain. But, to be honest, when talking about new cars, I have to say “No, thanks.” to American. Sorry.

Of course when we talk about good old American muscle cars, like Scott’s (a colleague at Yahoo!) 1967 Pontiac Firebird, now that is a different story

Conclusion

I picked up the car over the weekend and again, I was treated very nicely by the sales person. I was in contact with many car salespeople during the last couple of weeks, some of them were very aggressive and would like you to sign a contract right away after the test-drive. And I have to say that most of them live up to the stereotype, wearing silver or gold jewelry (necklace, ring, watch), having kind of a slimy attitude and saying things like “You look good in that car.” No way. Really? That sales person I finally ended up doing the deal with did not do any of that and I felt this should be rewarded by giving her the deal.

Below I have put together a couple of links to resources on Edmunds.com and elsewhere that I found helpful doing this “Buying a Car in the US” project:

• Edmunds.com’s TMV: The Magic Number
• How to Get a Used Car Bargain
• Negotiating 101
• 10 Steps to Buying a Used Car
• Confessions of a Car Salesman: This is a multipage-long article about the experiences of a journalist who worked undercover at two different car dealerships. Very worth the read with some quite amusing parts.
• Vehicle History Report: Your Key to a Good Used Car

Also, for people preparing for the written test at the DMV, I found the following sample tests useful for practicing. Some of them offer up to 20 free questions, some only 5, but it is good to mix and match to be prepared for most questions which eventually might come up:

• Samples of Driver Written Tests at dmv.ca.gov
• DMV Sample Test at esampletest.com
• California DMV Practice tests at dmv.org

So what happened in those last two months without anything happening on my blog or my Flickr stream for that matter?

First, I came back from celebrating Christmas and New Year’s in my home town Vienna (which, so I learned, Mr Drew paid a visit to just recently) together with my family and close friends. Even though it was only for just more than a week, it was totally worth it to get back and spend the holidays with my loved ones.

The time between coming back to California and moving to Sunnyvale Jan 20 is a total blur. I commuted for at least 2 hours a day, that’s for sure, cause I was still taking the Yahoo! shuttle service from SF to Sunnyvale. I worked, so that’s obvious as well. Apart from that, I don’t remember much. Drinking? Drugs? Other forms of intoxication? Who knows…

January 20 was the big day. I moved out of my friend Cindy’s place (and I can’t thank her enough for letting me stay there for so long) and to my own place in Sunnyvale. Let me state that I love San Francisco and would the office be there, I would have loved to find an apartment there. But I am a bit allergic to commutes that take more than 45 minutes a day. I know, I am probably spoiled, but that’s just how I feel. So I moved closer to the office and my commute time is now—even though I have to take a public bus until I have my US drivers license sorted—cut down to about 40 minutes. Door to desk. That’s more my liking.

Because my apartment came unfurnished, like so many places around here, I had to play the “plan-and-get-furniture” game. And I am still playing it, cause I am far from done with getting all the things I need, but I got the bare necessities covered for now. The rest can wait until I don’t have to rely on public transport any longer. Thankfully, my beloved Swedish furniture store is in Palo Alto, so not that far away.

Work is good and pretty busy recently, not least because we have a new CEO and things are being reorganized. But in economic times like this, more work is certainly better than out of work.

What else…let me think. Ah yeah: some of you guys might remember that I did my first half marathon last year in April. It was such an amazing experience that, a few months later, I decided that no matter what, I want to do it again the following year. So I am doing it again this year, which means I am going to Vienna to visit my parents and participating in the race mid April. Exciting. I will most likely not be able to beat my personal record, because I don’t have enough time this year to train as much as I want to, but I don’t care. This time, the experience counts, not the time.
Oh yeah, whilst I was at it…I also signed up for another half marathon, which is probably a little closer to where I live currently. Derek is still gonna laugh at me, but I don’t care

That’s about it, in a nutshell. The next couple of weeks will (apart from working at Yahoo!) consist of some more running, getting my US drivers license sorted, getting a car and some more pieces of furniture. I also have a couple of web development related tasks on my list and some ideas for articles which I hope I can also get to fairly soon-ish.

Until next time.

It is quite similar to a couple of tools that are already out there. JSLint looks for issues in JavaScript code and checks for adherence to a certain set of code standards. PHP_CodeSniffer, a PEAR package, provides similar functionality for PHP files (but is also able to check JavaScript and CSS). Then there is CSSTidy, a parser and optimiser for CSS, which e.g. compresses hex values for color declarations and provides different levels of minification (removing comments, whitespace etc.).

Essentially, what I wanted to achieve with CSS Reviewr is to not only point out issues in the code based on the experiences and the reviews we conducted at work, but also to provide explanatory text for each finding (much like how the W3C Validator does it for HTML). In one or two sentences, I wanted to explain why this is an issue and how it can be resolved. From my perspective, this is ideal for a developer who might not be familiar with a certain best practice or convention. By reading the explanation and maybe following a link to a page that provides more details, it has a certain learning effect to it.

CSS Reviewr, as it is stated on the page, is not a validator. It is encouraged to run your code through the W3C CSS Validator first, before checking it using CSS Reviewr.

Last, but not least, I would like to thank the real brain behind this: Sam Riley. I had the pleasure of working with him on Yahoo! Answers and I was and am still really impressed by his sheer endless knowledge of the ins and outs of CSS. Knowing that I would not be able to just turn to the side and ask him whenever I have a question related to CSS (because I relocated from London to California), I wrote this tool also to store his CSS knowledge somewhere for myself, so I could still use it here in the US So a big thanks to Sam!. Also thanks to Eva-Lotta, who kindly offered to do some visual design work for this in her spare time.

The tool is in beta right now and I have already identified some bugs myself that I need to fix at some point, providing I find time for this. Getting some early feedback from colleagues, I have also received the following feature requests:

• Indentation check (selectable option)
• Check (background) images used in the code are akamized/on a content delivery network (CDN)
• Fonts should not use uppercase characters (e.g “Arial” should be “arial”)
• Limit the amount of errors shown to 50 to prevent browser (FF2) from crashing. Add something like: “More than 50 issues found. Fix the issues above first before checking your code again.”
• Having a ‘Do it!’ button by each issue to make the suggested modification to the code, and then have a textarea at the bottom where you could copy out the fixed version

Suggestions, bug reports and all kinds of feedback welcome. Just leave a comment below. Thanks and happy holidays!

The application on the mobile phone would give you a list of restaurants, bars, cafes etc. in your proximity, as well as details about their type of cuisine, opening hours, price range etc. and how other people have rated that particular place. Based on whatever the occasion was—whether you are planning a relaxed dine-out with your family or having a more intoxicated night with friends—the tool would recommend you the best place in your area.

While I was working on the prototype, writing my thesis and then putting the layout together in InDesign, I wasn’t thinking that a publisher would ever get interested in my work.

But the less you expect something, the happier you are when it actually happens. About 2 months ago I received an email from VDM Verlag in Germany saying that they found my thesis in the library of the university and would be interested in publishing it. “How awesome is that!”, was about the reaction I had. After putting all the required details about the book into their online system and reformatting a few things to fit their requirements, I got the confirmation that everything looks good and it is off to the printers.

And now, just in time for Christmas , I am happy to see my book being available on Amazon.com and Amazon.de. It is in German, so sorry to my non-German-speaking friends. I will most likely never reach the author status of my colleague Christian Heilmann, who wrote about 167 books about web development related topics, but I am very happy to see this and it makes me feel proud to see that all the work I put in at that time is now available to a wider audience. It is a really great feeling and I feel very content how it all turned out.

I would like to take this opportunity to thank Karl-Heinz Weidmann, who was my thesis advisor, and Werner Flatz, who I worked together with during the development of my application.

Until I have figured out where I would want to live here in California, whether in San Francisco or closer to the Yahoo! office in Sunnyvale (although I am currently leaning more towards the latter), I am lucky to have a friend like Cindy who lets me crash at her place for now. Thanksgiving is coming up and I am the one who has to be thankful for that. Also, because of her, I was able to meet up with some nice people like Marianne, Craig and Daniel. I was also able to catch up with my Web Developer mates from London: Marco and Ben. And because of Cindy’s status as a web celebrity, one needs to be prepared to do a lot of partying, like Marianne’s birthday at Foreign Cinema, Ben’s housewarming party…wow, I am already partied out and could use some relax time.

But that’s not happening. I had my first day at Yahoo! last Monday and had to go through New Hire Orientation—although I am technically not a new hire. But anyways. Also got a new MacBook Pro, which is nice.

If you guys are curious, I am gonna be working on the new Universal Profile, which was redone and a beta version launched just recently.

As stated above, I really like it so far. The weather is nice (apart from today, where it is a bit cloudy), the people I have met so far were all nice and welcoming. San Francisco as a city is, by far, not as busy as London, much more spacious and with its location at the Pacific, it makes it a place you just have to like.

The only thing I pretty much hate right now is the commute from San Fran to Sunnyvale, which takes about 1 to 1.5 hours one way. Yahoo! provides a shuttle service from San Francisco and back, equipped with nice leather seats and even WiFi. All nice, but I still consider these 2 to 3 hours every day pretty much wasted. Which is why I am more leaning towards finding a place closer to the office, in Sunnyvale or Palo Alto. I will think about that during the next couple of weeks.

To sum it up: All good here in California. I like it here and, most of all, I am enjoying it.

Description

Shrinkr does two things:

1. It reduces the file-size of your CSS and JavaScript files through minification, i.e. stripping out unnecessary content like white-space and comments
2. It then takes those files and concatenates them into one single CSS and one single JavaScript file
3. Those files are then getting stored as css-min-[timestamp].css and js-min-[timestamp].js on your server. The reason for the timestamp is that whenever Shrinkr creates a new file, it is ensured that a user agent doesn’t still use a cached version of the previous files but, because the name of the file has changed, retrieves the latest version from the server

The first measure reduces the file-size by stripping out things from files that are not needed by the browser in order to interpret them. Whitespace and comments are for developers, not for the browser. They can safely be removed, which reduces the file-size and thus the consumption of bandwidth.

In the Yahoo! Exceptional Performance Rules, it says that one should aim to reduce the number of HTTP requests in order to make a page load as fast as possible. Shrinkr does that by concatenating all the files into one single file (one for CSS and one for JS). So instead of having 10 CSS files, you will end up having only one.

Shrinkr also adds an action to wp_head and wp_footer in order to tell WordPress to include those files upon page load in the appropriate section of the page. CSS files should be included in the head of the page, JS at the very bottom as per the Yahoo! Exceptional Performance Rules.

Because of the fact that you will end up having all your CSS and JavaScript in one file and on one line (because all the carriage returns etc. have been stripped out), it makes debugging kind of difficult. For that reason, you should only activate that plugin on the live version of your site and keep the files separated on your development box.

Further details about the plugin can be found on the Shrinkr plugin page. It would be great if you could try it out and give me feedback, either by leaving a comment here or using the contact form. Thanks!

Resources

• Best Practices for Speeding Up Your Web Site
• Yahoo! UI Library: YUI Compressor
• JSMIN, The JavaScript Minifier
• Minify!