Skuunk

Stubbing out AJAX methods

2011-08-18T22:12:00.000-07:00

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

2011-07-18T05:52:00.000-07:00

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?

2011-07-06T03:06:00.000-07:00

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

2011-05-15T17:06:00.000-07:00

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

2011-05-10T03:04:00.000-07:00

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.

Rails file uploads: Limiting a user's uploads by space available

2011-04-28T16:50:00.000-07:00

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


  def space_used
    space = 0
    directory = "#{Rails.root}/uploads/#{self.user.uuid}"
    
    if File.directory?(directory)
      Find.find(directory) { |f| 
        space += File.size(f); 
      }
    end
    return space
  end

So space_used first sets the directory based on the user's uuid. It then checks to see if that directory exists, and if it does, it will loop through each file and total up the space variable (unfortunately, the Directory object does not have a size variable) to see how much space has been used.


  def space_available?
    if self.space_used >= self.space_allowed
      return false
    end
    return true
  end

space_available? checks the space used and compares it to the space_allowed to the user. So in the controller you just need to call space_available? on the user and handle it appropriately

i.e.


user = User.find(params[:id])
if user.space_available?
  ... handle upload ...
else
  ... handle error ...
end

Reading AJAX XHR File Uploads in Sinatra

2011-04-28T15:08:00.000-07:00

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][:filename]
      
# create the file path
path = File.join(directory, name)
# write the file
File.open(path, "wb") { |f| f.write(params[:qqfile][:tempfile].read) }

However, if you use a browser that supports XHR uploads, the parameters look a little different


params: {"qqfile"=>"device1.jpg", "upload_type"=>"invoice", "id"=>"24db8cab-285a-abcb-cb47-4daceee977ca"}

So this had me stumped. There was an article I found on the internets (http://onehub.com/blog/posts/designing-an-html5-drag-drop-file-uploader-using-sinatra-and-jquery-part-1/) which talked extensively on how to do the JavaScript side but then at the bottom conveniently left out how to handle the server side (saying it was easy to work out). Well, it wasn't! So that's why I am writing this post

In any case, I won't keep you in suspense any longer...


name = env['HTTP_X_FILENAME']
      
string_io = request.body # will return a StringIO
      
data_bytes = string_io.read # read the stream as bytes
      
# create the file path
path = File.join(directory, name)
      
# Write it to disk...
File.open(path, 'w') {|f| f.write(data_bytes) }

The final part is that qq.FileUploader does not give you the option to specify which action to post to depending on the type of upload (XHR vs normal) so I had to put in a fork in the server code to figure out how to handle the request. I am basically checking to see if qqfile is of type String, in which case I handle it as an XHR upload, otherwise I handle it as a normal file upload.


# if qqfile is a string, we are using XHR upload, else use regular upload
    if params[:qqfile].class == String
      name = params[:qqfile]
      
      string_io = request.body # will return a StringIO
      
      data_bytes = string_io.read # read the stream as bytes
      
      # create the file path
      path = File.join(directory, name)
      
      # Write it to disk...
      File.open(path, 'w') {|f| f.write(data_bytes) }
    else #regular file upload
      name = params[:qqfile][:filename]
      
      # create the file path
      path = File.join(directory, name)
      # write the file
      File.open(path, "wb") { |f| f.write(params[:qqfile][:tempfile].read) }
    end

I haven't tried it in Rails yet, but I am sure it will be similar. I hope this helps...

Ajax File Uploading

2011-04-27T03:14:00.000-07:00

You know that cool Drag and Drop file uploading they have in Gmail? You know, the one where you can drag a file from a folder onto a webpage and upload it?

Have you looked at the code? Looks complicated huh?

Well, thankfully, for any cool bit of JavaScript functionality out there, someone has created a plug in (most likely in jQuery, but not always...).

http://valums.com/ajax-upload/ is (as far as I can tell) a library agnostic JavaScript plug in which factors out all the hard work.

All you have to do is put in a "dummy" element on to which to hook (never end a sentence in a preposition) and then put in a small snippet of code to turn it into a file upload element


<div id="file-uploader">       
    <noscript>          
        <p>Please enable JavaScript to use file uploader.</p>
    </noscript>         
</div>


var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('file-uploader'),
    // path to server-side upload script
    action: '/server/upload'
});

Obviously you need to include their library as well...

It has some common backend code to handle uploads as well (php, perl, cgi, java) but no Ruby. Come on guys! Get with it already! Hopefully they will read this and provide...

Node.js

2011-04-26T03:46:00.000-07:00

I had a quick look at Node.js. Looks very interesting (kind of like a JavaScript version of Sinatra). Now all I need to do is find out if they have any frameworks...

Show Off IO

2011-04-20T21:50:00.000-07:00

Just found a great new service called Show Off IO

https://showoff.io/

This is a godsend for Ruby contractors. Basically you port forward the web server on your laptop to showoff and they give you a URL which you can send to a client which allows him to see your website (for a limited time for the free version).

Previous to this, you would have to wait until you had staged the site to show it to your clients.

Good job guys!

RhoMobile - Ruby Development for Mobile

2011-04-20T19:47:00.000-07:00

RhoMobile (http://rhomobile.com/) offers an open source framework which allows Ruby developers to write mobile apps using web technologies.

I have been using it for about a year now. You can find out the details of it on the website linked above, but I just wanted to go over some of the issues I have found and cover some of the pluses in minuses from a personal perspective to help you decide whether or not this is a technology you will want to exploit on your next project.

So what is it?

At a basic level, a Rhodes (http://rhomobile.com/products/rhodes/) app comprises of a small Ruby web server/framework and an embedded browser. Server is a little bit of a misnomer because it lives on the client, but essentially it's like a small Rails server which is only used by one client (though in theory you can connect to it from another client if you so choose).

Because the display is done in an embedded browser, you can mark it up in HTML and CSS and even (in some cases) use JavaScript to manipulate the display dynamically.

So why use Rhodes instead of creating a mobile web app?

Well, for one, you can package a Rhodes app and sell it in the app store, android market or app world.

It also (if you need it to) can sync with a sophisticated sync server known as RhoSync (http://rhomobile.com/products/rhosync/). As of the time of writing, RhoSync is built upon Sinatra and Redis (it used to be Rails and MySQL). This means that a user can manage and manipulate his/her data on their phone without the need for a constant internet connection and that data can be periodically synced with the back end. RhoSync manages all the potential data conflicts and only syncs the differences. It can connect to practically any kind of data store (databases, REST APIs, etc...).

So what are some of the limitations of Rhodes?

So, unfortunately, nothing in life is perfect. One limitation is that because it relies on embedded browsers, if your app does any fancy JavaScript or CSS3 you will have to write another set of HTML only views for BlackBerry (though apparently the latest BlackBerry versions use a WebKit browser. I have yet to try this personally though).

It also really is targeted at the high end smart phones. It is quite well optimised for iOS, but on slower Android devices (anything with less than a 600Mhz processor) it can be quite slow and sluggish.

Another thing to get one's head around is that even though the framework is Rails-like, it is not exactly the same as Rails (it is quite stripped down). The RhoMobile team have been busy adding features however so its ecosystem is growing. When I started using it, there were no models (only controllers and views). Since then, Model support has been added as well as MSpec for testing.

Once your product is done, adding it to the respective app markets is also quite a hassle. This is by no means the fault of RhoMobile or the Rhodes team, but it is something to consider when trying to decide between doing a web based app vs an installable one.

The other limitation is because Rhodes is designed to work with most of the major smart phones on the market, you haven't got access to all the available features on a specific mobile phone. There is limited camera and calendar support, but currently no audio or video recording (it's in the road map, but not yet available). So you are not going to be able to write an app like Shazam or Google Maps using the framework...

Conclusion
If you like Ruby, web technologies AND mobile apps then it's definitely worth taking a look at RhoMobile. It's especially suited for Enterprise App development where you may not need the latest fancy UI enhancements, but you do want to deploy on all the platforms that your team is using with a single code base.

More References

You can find more information on the app I developed at
http://rhologic.com/

Responsive Web Design

2011-04-20T16:12:00.000-07:00

I wanted to go over Responsive Web Design using CSS.

In the old days of web development, we had to code to common screen sizes (i.e. 800 X 600, 1024 X 768) and we patiently waited for people to upgrade their computers to have a decent amount of screen real estate so we could design things the way we really wanted. We also took on semi stretchy web layouts etc to expand and contract appropriately.

Then about 2 or 3 years ago, Apple released this little device called an iPhone with a 320 X 480 resolution which took the world by storm and suddenly a lot of people were viewing your website on a tiny screen again...

Anyways, as it can be difficult to design a site which looks good on 320 X 480 AND 1680 X 1050, we need to come up with some kind of solution.

One way is to sniff the client and then use an appropriate stylesheet, but then you are mixing CSS with either JavaScript or server side programming and also potentially maintaining a list of appropriate clients and stylesheets. Also, you can miss out new devices/clients as they come along.

The other way is to use the media queries and detect the screen size using CSS.

i.e.

@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
...
appropriate iPhone/Android CSS rules go here
...
}

You can also "detect" for iPad by using 768 instead of 480.

Things to look out for
I found that although it is possible to move elements around using CSS, there are some limitations with regards to content flow. In one design that I was given by my designer, the logo was to move from the middle to the top of the page depending on the device. What I ended up doing was creating 2 logos and hid/showed them appropriately.

It also helps to break the page down to standard elements (main content, header, footer, etc...) and focus on designing/laying out these elements appropriately. Once you are done with that, you are 80% of the way there and you might only need to do some minor tweaking of the main content section thereafter (i.e. moving form labels from the side to the top for example).

It is important to know your audience as well. In my case, this time around, I am working on a site which is an adjunct to a phone app and it is important for our audience to be able to view the site well on a phone as well as a full size computer. This does involve extra work so there may not be any business to justify it in your case.

Further links
http://www.alistapart.com/articles/responsive-web-design/
http://mediaqueri.es/

The importance of transitions...

2010-12-07T17:34:00.000-08:00

I was just having a look at github's new tree slider.

https://github.com/blog/760-the-tree-slider

In any case, it got me interested in the importance of transitions. Back in the old, pre-ajax, pre-broadband days, we would click on a link, go get a cup of coffee and then come back to a new screen. In the meantime the little "loading" icon would spin which would let us know that something was happening.

Nowadays, not only is it possible to change part of a page without reloading the whole page (thanks to AJAX), but with our new browsers and broadband connections, this could change so fast that we don't even notice.

I will be the first to admit that early versions of JavaScript transitions were not only buggy, but they seemed to be a luxury. For a start, the fades and slides were slow and jittery and led to a bad user experience. The extra JS libraries also added to page load. At the end of the day, who cares how we got where we were going as long as we got there.

Now however, they seem a bit more of a necessity. They let the user know what happened on the page and where.

Going forward, it would be nice to see some conventions appear as well. Fade in for dialogs, slide left for new page, slide right for old, etc...

Browser Highlighter Firefox extension / plug in

2009-07-17T12:31:00.000-07:00

On my site we noticed that some of our users had some JavaScript problems which was affecting content editing. After a bit of nosing around we found the problem was a Firefox extension called The Browser Highlighter.

This extension was created by eBay and it injects some JavaScript into the page which can affect the JS in your site. You can view this JavaScript in Firebug (it is in the script tag added just after the head tag)

What follows is a means of detecting this extension so you can protect your code from it.

Unfortunately, Mozilla Firefox does not provide an API into detecting browser extensions, but there is a work around.

If the extension injects a graphic into the page (which this one does), it does so by referencing it from the chrome protocol.

i.e.
chrome://shim/content/compareLang-1/eBayCompareIcon_yellow.gif

as opposed to the normal http protocol

So all you have to do is reference this image and place an onload event on it. If the event fires then the extension is installed.

So you can have the following script

<script>
var browserHighlighterPluginInstalled = false;

function alertUser() {
alert("You have The Browser Highlighter extension installed");
}

</script>

<img src="chrome://shim/content/compareLang-1/eBayCompareIcon_yellow.gif" onload="alertUser();" />

You may also want to include instructions on how to remove the extension (Tools -> Add-ons -> Extensions -> Disable).

PS This extension has not been getting very good reviews, please feel free to add your own...

https://addons.mozilla.org/en-US/firefox/reviews/display/11808

VOO!

2009-05-14T16:17:00.000-07:00

So the site I have been working on is now in public beta.

VOO! can be many different things, but I like to basically think of it as a collaborative blog (where you and your friends can post stories and photos and play games).

As always, this site is in beta so new features will be forever forthcoming.

Probably the best place to start is the gallery.

http://www.veryvoo.com/gallery

jQuery: When does a library become a language?

2009-04-19T22:21:00.000-07:00

jQuery is a great JavaScript library which allows web developers to write cross platform code, but some of its syntax looks like it is based more on Ruby than JavaScript. When does a library become a language?

So first of all, what is the difference betwen a programming library and a programming language?

A programming language is a means by which we (as humans) can give instructions to a computer to get it to do various tasks (algorithms, computations, etc...). They are largely artificial constructs created for human readability which then need to be compiled or interpreted into actual instructions which the computer can then carry out. A compiler turns a program into machine readable instructions ahead of time (compile time) where as an interpreter does so on the fly (runtime). Languages such as C and Java are generally compiled and JavaScript, Perl and Ruby are generally interpreted. While there is no real reason why this has to be the case, these factors normally affect the syntax of the languages in question.

A library is a collection of functions and methods of (normally) common actions which are not expressed in the original language. These are not included in the main language because not everyone will need to use them all the time. They are also written independently of the main language compiler/interpreter and they also encourage code re-use (so not everyone needs to write their own String.trim() function for example).

Because of the fact that there are many JavaScript interpreters out in the internet and JavaScript developers cannot control which one will be used to interpret their code, a few years ago some people released their own framework/libraries which iron out these differences and allow developers to write one set of unified code from which any browser differences could be abstracted out into the library.

The most popular of these are Prototype and jQuery.

jQuery primarily gives developers a generic way to access and manipulate DOM elements (one of the main differences between browsers).

However, the syntax used looks very different from plain old JavaScript.

Here is a typical JavaScript loop.

var elements = getElementsByTagName("div");

for (var i = 0; i < elements.length; i++){

alert(elements[i].id);

}

Here is the same loop in jQuery

var elements = $("div");

elements.each(function(i){

alert($(this).attr("id"));

});

Do these look remotely alike?

How about this?

JavaScript

var element = document.getElementById("myDiv");

alert(element.innerHTML);

jQuery

var element = $("#myDiv");

alert(element.html());

To the untrained eye, one might think these are different languages.

jQuery is not another language though, not only does it use the same JavaScript interpreter, not only is it useless without JavaScript (i.e. it is not independent), but in jQuery you are really creating and manipulating a jQuery object and you are given the option to access the JavaScript object it references using the get() method.

It is possible though to write a language based on another language. The Ruby runtime is essentially built on the C++ framework. JavaScript runs in browsers written in C++ as well. These languages have no direct relation to C++ in their syntax though. In theory you could probably write a C++ compiler in Ruby should you want to (though that would be pointless and slow). You can write programs which translate programs from one language to another (the Google Web Toolkit translates Java into JavaScript).

I would argue that jQuery is a dialect of JavaScript or else even a kind of JavaScript slang. It differs from the main language, but it doesn't veer far enough to be completely independent or incomprehensible.

IE6 Update

2009-04-18T20:52:00.000-07:00

Calling all web developers.

The folks over at this site have done something wonderful.

http://ie6update.com/

Basically, you include this code on your site, and all IE6 users see a drop down bar which looks like an ActiveX update and links to download IE8.

This is such a brilliant idea. If MicroSoft won't force people to upgrade, then we, as a community, should.

CSS Hacks = Lying

2009-04-14T21:42:00.000-07:00

There are many similarities between using CSS hacks and lying.

First of all, what is a CSS hack? A CSS hack is a means by which you can get different browsers and browser versions to see and render your stylesheets differently so you can give them different directions (ironically though it's normally done to achieve pixel perfect cross platform web pages). They are also mostly done for Internet Explorer (which for some reason refused to implement standards based CSS until recently).

CSS hacks mostly exploit bugs in a particular browser such as the Star HTML hack. This hack was used to get code to run in IE6 and lower in a different manner than other browsers.

IE also introduced conditional comments which allow you to add an extra stylesheet to "fix" any CSS issues. This is not technically a hack, but it does require you to write and maintain extra CSS.

There are also more subtle types of hacks to make up for some things that are missing in IE like the IE min-height hack (which adds min-height style functionality to IE).

So why is using a CSS hack like lying?

Well, when you tell a lie not only are you telling an untruth, but you are essentially telling one person a different story than someone else. This is not admirable behaviour, but you can probably get away with it, once or twice. However as you have no control (mostly) which clients can see your site this is akin to lying to someone whilst there are other people in the same room. After telling the lie you then have to sneak over to all the other people and tell them a story and hope the first person doesn't cotton on.

Often with lying (as with CSS hacks) telling one lie requires you to tell another one (and to keep track of all the lies you tell). You then end up with a snowball effect wherein you lose track of what is true and what is not and you end up with more code than you ever needed.

Why use CSS hacks in the first place?

Because not only do these little CSS browser differences open hacks, they often are the cause for rendering differences between the browsers. There is a temptation to therefore use other hacks to fix these differences.

So there is often a judgement call to be made as to how far you can push a hack, and pile hack upon hack. At some stage compromises need to be made in the design.

So basically, I am not saying one should never lie, in web development (like in life) there are times when you need to use hacks and there are times when you need to lie. Just be careful not to do it too often (and document it carefully).

One more thing, if you are going to be using a lot of JavaScript to move your page elements around, you need to be doubly careful about using CSS hacks as there are some browser differences that don't reveal themselves when a page is static (but do so when a page is dynamic).

Getting Search Engines to read Flash Content

2009-04-01T22:39:00.000-07:00

Ok, so I lied. While Google supposedly now does index Flash content, what this article is really about is a quick a dirty way to get search engines to index your pages which contain Flash without having to display that content to the user in the HTML.

Basically this technique relies on swfobject (http://code.google.com/p/swfobject/). One thing swfobject does in dynamic mode is allows you to specify alternative content in a div for non flash users which gets switched out via JavaScript once the page loads:

    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

    <div id="myContent">
      <p>Alternative content</p>
    </div>

So basically you can duplicate the content which goes into the Flash app in the Alternative content section. Search engine spiders index HTML, but don't run JavaScript so are none the wiser that the user is actually going to see a Flash app.

The best case scenario is when the content in the Flash app is dynamic so you can easily duplicate it in the HTML. Static text needs to be manually copied. Most app related text will be instructional in any case and not really suited for search engines.

IE8 readiness

2009-03-21T11:19:00.000-07:00

I know people have done in depth reviews etc..., but here is a quick a low down of what you need to do as a web developer to support IE8.

I am going to assume that you have been a standards based web developer for the last couple of years and that you have not been doing too many hacks to support IE7.

1) Add the new metatag in the top of the to force IE8 to render in standards mode.

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Without this tag a little button appears next to the location bar which allows the user to view the site in IE7 compatibility mode. You probably don't want to do this because you want people to view your nice standards compliant website and also the render mode is slightly different from real IE7 in any case.

2) If you were using conditional comments to catch IE and add some extra CSS, you will probably need to update the condition from

3) You will probably want to put the above tags in a conditional which is controlled by a parameter so you can switch back and forth easily while testing

<% if params[:ie] != '7' %>

<% end %>

And then access the IE7 mode in the following manner

http://yourserver.com/login?ie=7

4) There is currently a known bug with the scrollHeight and scrollTop properties (this broke the Yahoo Rich Text Editor I had embedded in my site http://www.quirksmode.org/blog/archives/2008/03/ie8_beta_1_firs.html). It does not appear to be fixed yet in the release version.

I am sure there is plenty more, but this is what I have discovered so far.

sudo = Stupid Utility, Distinct Overkill

2009-02-09T20:33:00.000-08:00

I think XKCD said it best...

"Make me a sandwich."

"What? Make it yourself."

"sudo make me a sandwich"

"ok"

The UNIX OS was originally designed to run on computers that many people would use and in those situations you don't want every Tom, Dick and Janie installing stuff that could break a shared computer. However, on desktop Linux (which one person normally uses) , sudo is kind of useless. Why not just prompt for the user password without sudo (if root access is needed to install or change modifications)?

I guess sudo IS easier than logging out and then logging in again as root, but it's annoying (especially if you give your normal user permission to administer the system). It almost becomes a point of politeness (in which the word please would make much more sense). Instead of sudo apt-get install ruby you could just ask please install ruby. No wonder people think techies speak their own language. You are probably saying please out loud to your computer anyways when it doesn't work. I know I was when I was having trouble configuring the microphone for use with Skype.

Skype: Hello, welcome to Skype call testing service. After the beep, please record a message.

Me: Please please please work! I don't want to have to go back to Windows!

Ah yes, Windows. As bad as sudo is, it will never be as bad as Vista's User Account Control.

That's still no excuse though...

Life with Linux

2009-02-09T08:32:00.000-08:00

I have been using Ubuntu Linux at home for the last month (courtesy of those folks over at Wubi). Overall I think it is great. So much faster than MS Vista and it helps inject life back into old machines.

However I have spent a fair amount of time configuring and re-configuring things (partly my own fault, and also partly because of the learning curve involved with any new OS). I even had to do one re-install (more on that later). Mostly though it worked out of the box.

So here are a few good ground rules for newbies...

1) Make sure you have more than one Internet enabled computer in the house before you do anything. If for some reason you have a hardware conflict (as I did with the wireless card on my wife's laptop) you will need to look up how to fix it.

2) Most of what you need is available through Synaptic Package Manager or Applications > Add/Remove. If you need a program or driver search there first before the Internet. The only notable exceptions I can think of are Skype and Adobe Flash. Basically Ubuntu has a number of great free programs available which you don't need to install externally.

3) Don't mess around with settings and config files unless you really know what they do. It was this that led me to my re-install, partly because of the next category...

4) When going online for info on configuring your computer, don't automatically use the first solution you read (especially if it asks you to update your settings and config files). Manually updating settings and config files with your text editor should be a LAST resort. More often than not the GUI tools are safer. You wouldn't normally update your Window's registry by hand would you? There are sometimes exceptions, but if an article tells you to go to your terminal and do anything with sudo, vi, pico, rm or gedit think twice. The only exception is sudo apt-get install (which is pretty safe because you are just using the command line version of Synaptic Package Manager). Also be wary of shell scripts (.sh files).

Apart from that I found Ubuntu much faster and easier to install than any Window's distribution (way faster). Provided you have the disk or the files on hand I would say it takes twice as long to install as Vista takes to boot up on an old machine.

On gambling and computer languages

2009-02-03T20:28:00.000-08:00

Today's entry will be a bit more esoteric than most others, it's basically an broad analogy between gambling a choosing a software language to learn/specialize in.

Basically as a programmer you have many choices in your career as to how which languages to learn and what level. The main 2 choices though are whether or not to become a specialist or a generalist.

Take a roulette table, it's possible to make sure you will have a better chance of winning by spreading your money around it (being a generalist) but if you win, your win will be offset by your losses. If you put all your money on one square, if you will you will win big but your chances of winning are lower.

Now look at specializing vs generalization in programming. Some of the people I know who earn the most money as programmers (at least per hour) tend to specialize in small areas. I know one who only really knows JavaScript (at an architect's level), another who writes add ons for Outlook, and another who specializes Adobe Flash. On a per hour basis they are all doing quite well, however the number of companies they can work for are quite limited and while COBOL programmers were making great money up until Y2K, a lot of them aren't doing very much now.

The generalists may not make as much per hour, but the number of places they can work are much higher and if demand falls off in one of their languages then they can pick up another language and focus on that. They are also people who have the luxury of choosing which tool they want to use for a task as opposed to trying to make their only tool do the job (i.e. hammering in a nail with a wrench).

Roulette however is totally probability driven and not experience driven. Perhaps in that case a better analogy would be horse racing. Before one chooses a horse (or horses) one has to do a lot of research into how it's been doing as a predictor of how it will do in the future. The same applies to computer languages. Some will obviously be around for a while, some are on their way in, and some on their way out. If you learnt Java or C++ chances are you will be able to work in those languages for the rest of your career.

But as with horses, sometimes one chooses a language because one just instinctively likes it.

As for myself, I am an unabashed generalist. I will continue to back several horses and while I may not make as much, at least one of them will win.

Flash for Programmers Part 2: The Display List

2008-12-11T21:30:00.000-08:00

The Display List in ActionScript 3 is comparable to the DOM on a web page. Through the Display List you can add and remove your View components.

I am not going to go into too much detail here are there are already many excellent articles about it online (http://www.adobe.com/devnet/flash/quickstart/display_list_programming_as3/) (http://developer.yahoo.com/flash/articles/display-list.html).

Suffice to say you will be calling addChild() and removeChild() quite frequently.

I am going to give you a few practical tips though...

Often (if you are doing truly modular MVC, which I will cover later), you will be firing off notes that may tell you to add and/or remove various components from the display list. You may fire a note which will ask to remove a child which doesn't exist though and this will cause your app to throw a nasty error.

Just like in real life, I find it handy to name my children i.e.

var dialog:Dialog = new Dialog();

dialog.name = "dialog";

this.addChild(dialog);

Later on, you may have some code which removes it.

this.removeChild(dialog);

However, if you aren't sure it will be there there is a better method

if(this.getChildByName("dialog") != null) {

this.removeChild(this.getChildByName("dialog"));

}

What you are doing is first checking to see this child exists and if so, you can remove it. This should prevent any potential run time errors.

Programmer's Guide to Flash: Part 1 - The Document Class

2008-12-10T21:24:00.000-08:00

While Adobe came out with Flex specifically to create an IDE for programmers to create ActionScript/SWF applications, it is actually possible for programmers to use Flash CS3 (normally seen as a design tool) to create Rich Internet Apps.

Most Flash programmers tend to regard Flex programmers in the same way that Web Developers regard .NET programmers. Flex (and .NET) programmers tend to be generalists who don't really know that much about interface programming and are afraid to get into the guts of a system. Flex itself is a 300k beast which may speed up your development, but it will slow down your application.

However you are in luck. With Flash CS3 Development, the only really hard part is knowing where to start. Once you are over the initial hurdle, you will find yourself in code most of the time.

Step 1:

First of all, open Flash CS3 and create a new project (File -> New... -> Flash File (ActionScript 3.0).
If you open the Properties Window you will see a box labelled Document Class. This is where you will put the Main ActionScript file which will control the application.

For now what you should do is save your .fla file and create an AS file in the same directory (say Main.as). In the Document Class you enter class name "Main".

Step 2:

Put the following code in Main.as

package
{
import flash.display.MovieClip;

public class Main extends MovieClip {
public function Main(){
trace("I am in the main app");
}
}
}

When you compile this (Control -> Test Movie) this will open up an Output window printing out the trace statement ("I am in the main app").

While this is fine for your own project file, what do you do when you want to import 3rd party libraries or else write large multi file applications?

Step 3:

Understanding packages is important for the next step. A package name is basically a signature which reflects the organization of a file within folders. Therefore a package called com.adobe.webapis.flickr represents a path com/adobe/webapis/flickr and any files to do with this project are put in this folder.

i.e.
package com.yourcompany.project
{
import flash.display.MovieClip;

public class Main extends MovieClip {
public function Main(){
trace("I am in the main app");
}
}
}

This means Main in this case should be placed in the subfolder com/yourcompany/project and referred to in the Document class as com.yourcompany.project.Main.

Step 4:

You may want to move this folder to another location however (or else use a shared package vs copying it into your project, especially for common files). To do this, click on the Publish: Settings... in the Properties window which will bring up the following dialog.

Click on the Settings... button next to the ActionScript version. There you will see the Classpath box. Click on the + symbol and navigate to the folder above the top of your package (i.e. if your package is in C:\lib\src\com\yourcompany\project, set the Classpath to C:\lib\src). You can add multiple class paths as well.

And there you have it. A means of adding ActionScript to the Flash file and a means of splitting up your project into multiple files. When you want to call in your own custom classes, you import them according to their class name (the same as when you imported flash.display.MovieClip) i.e.

import com.companyname.util.StringUtil

Just remember to add it to the class path!