Skuunk Works

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(); // s...

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!

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...

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 i...

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. paddi...

Let's say that you want to allow people to upload files to your server. Let's also say that we want to make sure any particular user does not hog up all the space available. Let's also say you want to give each user a variable limit as to how much they can upload (i.e. for tiered services). How would you go about doing that? Well, from a pseudo code perspective you would do the following. 1) Create a folder for each user based on the user id 2) Make sure all the user's uploads go to that folder 3) Before you do an upload, check against the user's settings to see how much space s/he is allowed 4) Check their folder to see how much space has been used 5) If they have no space left, message the user So let's see how we do this in practice... I guess we really want to see how much space is used, so let's start there on the User. In this example the user has a UUID as well as a space_allowed attribute which is set to a default value (and which an admin can change...

So in my last post I talked about Drag and Drop file uploading with qq.FileUploader ( http://valums.com/ajax-upload/ ). Anyways, I discovered that qq.FileUploader uses AJAX/XHR to post the file uploads. What I also discovered is that these file uploads need to be handled in a separate manner from a regular file upload form post. A normal form post (when File upload XHR requests are not available on the client like in Internet Explorer) passes in the following parameters params: {"qqfile"=>{:type=>"image/png", :head=>"Content-Disposition: form-data; name=\"qqfile\"; filename=\"bb2.png\"\r\nContent-Type: image/png\r\n", :tempfile=># , :name=>"qqfile", :filename=>"bb2.png"}, "upload_type"=>"rec", "id"=>"24db8cab-285a-abcb-cb47-4daceee977ca"} Sinatra then reads the :tempfile and :filename parameters to write the file to the server name = params[:qqfile][:fil...