Stubbing out AJAX methods

I have always had trouble with the standard way of testing out AJAX calls with QUnit.

There are a number of problems with it.

1) You have to stop and start the tests while waiting for an AJAX response
2) If you don't give a large enough gap, then your test may fail while waiting for an AJAX response.
3) If you have too large a gap, it slows down your tests

However, today I found this cool method of dealing with it.

http://lostechies.com/johnteague/2009/02/10/another-way-to-test-ajax-methods/

Essentially, you stub out jQuery's $.ajax() method with your own for your tests (as for unit testing, you really just want to test your code around the ajax method, not test jQuery's ajax method).

In my own case, I was using $.ajax and not $.getJSON. It took me a little while to work out I had to create a trigger for the success() function rather then callback() as mentioned in the article.

var stubbedAjax = function(settings){

 settings.beforeSend();

 // so I can check error cases

 if (settings.url == 'error'){

  settings.error();

 } else {

  settings.success({data: "data"});

 }

}

var originalAjax = jQuery.ajax;

module("WESTFIELD Product Index Aggregator",{setup:function(){jQuery.ajax = stubbedAjax}, teardown:function(){jQuery.ajax = originalAjax}});

Patterns

Just a couple of links today (more details to follow).

I found a great reference for JavaScript and jQuery Design Patterns here:

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Also, I learned about the Presenter pattern today. We were having a discussion at work about what to do with presentation logic in Rails. On the one hand you don't want it in the controller because you want to keep your controllers thin, on the other hand you don't want it in the models either because it's presentational. You can't put it in the erb because they shouldn't contain logic. Enter the Presenter Pattern:

http://donttrustthisguy.com/2008/05/29/using-presenters-in-rails-3/

http://blog.jayfields.com/2007/03/rails-presenter-pattern.html

Enjoy your homework!

What is !important?

In CSS, you can override a style on a class simply by declaring a new style further down the page

i.e.

p {
    padding-top:5px;
}

p.custom {
    padding:10px;
}

Basically the above code sets the padding-top on all paragraphs to 5px, but sets the padding to 10px on paragraphs with the "custom" class. So we are overriding padding on our custom class.

However, you can actually prevent an attribute's style from being overridden if for some reason you really really don't want the padding to change in your design. Perhaps you are working with multiple people and you really don't want someone to accidentally override your design. Perhaps you just want to ensure your padding-top is always 5px even if padding is reset somewhere else.

In order to do this we use !important.

p {
    padding-top:5px !important;
}

p.custom {
    padding:10px;
}

In this case, the padding-top on a paragraph will always stay at 5px regardless of whether or not it has a "custom" class. It will also stay at 5px if you do the following...

p {
    padding-top:5px !important;
}

p.custom {
    padding:10px;
    padding-top:10px;
}

However all is not lost. Let's say you have imported someone else's CSS library and you want to tweak it but you find that they have used !important on the one style you want to update? Just use !important yourself...

p {
    padding-top:5px !important;
}

p.custom {
    padding:10px !important;
}

Yay! You can play in God mode too!

Of course in general it's best to avoid !important in every day situations. It's not really best practice, but it's there should you need it...

The REAL reason you need Flash in a mobile device...

People keep going on about how you don't need Flash on a mobile device because most video sites like YouTube provide HTML 5 flash free versions. Therefore the limitation of no Flash on an iPhone isn't really a limitation (if you have been drinking Steve Jobs' Apple juice/kool aid).

Anyways, last Saturday I found out the REAL reason you need Flash on a mobile device and it has nothing to do with video.

It has to do with restaurant sites.

For some reason at least 80% of restaurants out there have Flash only websites. If you need to make a reservation and you can't find the phone number in Yelp or UrbanSpoon then you have a problem.

In any case, I was trying to find the number for a restaurant and Google gave me a link to their website. Unfortunately, their website is in Flash. Fortunately for me though, my phone is an Android phone and I was able to look up their phone number and address in spite of the limitation.

In general though, having Flash on a restaurant website is annoying. All I want is the address, phone number, a copy of the menu and a few pictures of the interior and the food. The ability to make reservations online is also a plus (not to mention online ordering if it's a take out restaurant).

PS In spite of their lousy Flash only website, I do really recommend the food at Anong Thai in Potts Point, Sydney. It is excellent!
http://www.anongthai.com.au/

CSS Back to basics: Here comes TRBL

So I guess CSS is not obvious to everyone. One of my coworkers asked today why you sometimes had 1 value after a "padding" attribute and sometimes you had 2 or 4 values.

Basically,

padding: 5px;

Puts a 5 pixel padding on an element.

padding: 5px 3px;

Means you have 5 pixels of padding on the top and bottom and 3 pixels on the sides

padding: 3px 4px 5px 10px;

Means you have 3 pixels of padding on top, 4 on the right, 5 on the bottom and 10 on the left.

A good way to remember this is the acronym TRBL (like "trouble").

The same applies to "margin".

As well as this, you also have extra attributes which can specify the top, bottom, right and left paddings on their own

i.e.

padding-left: 10px;

Sometimes, if only one side is unique, it's better to refer to it in the following way (for readability).

padding:5px;
padding-left: 10px;

The "padding-left" of 10px will override the "padding" of 5px, but only on the left side of the element.

padding: 5px 5px 5px 10px;

The above does the same, but is less readable in my opinion.