Skuunk Works

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(

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 Docu

What is a gem and why would you want to freeze it? In Ruby, there are times when you want to access pieces of functionality that other people of written (3rd party libraries) and you normally have 2 options. You can install a plug in or install a gem. Normally the method you use is determined by which ever is made available by the author. Gems are installed on the host machine and are pretty handy when you want to run things in the command line or else across lots of projects, but their downside is that if you use a gem in a Rails project there is no automatic publishing mechanism when you deploy your site. You will need to log onto the remote host machine and install the gem manually. Plugins are specific to Rails and are similar to gems in that they are also 3rd party libraries. However they are associated with your Rails project as opposed to your machine so they will get posted to the server on a regular deploy. Freezing a gem is the process of transforming a gem into a plug in. Es

There may eventually be a time when you need to allow people to write some HTML on your site. Maybe you have a bulletin board or something or else possibly you are writing some kind of email app or wiki. The main problem with this is that you potentially open your site to Cross Site Scripting (XSS) attacks (more info at http://en.wikipedia.org/wiki/Cross-site_scripting ). Basically in an XSS attack, someone puts in a little JavaScript in your site via a user input and when someone else looks at the page the first person steals the other's cookies. In fact you can unwittingly open your site to XSS attacks just by forgetting to encode all your user inputted text by using the h() function. This is essentially a backwards approach to the problem however. What you really want to do is close everything down by default and then make a mental effort to allow it to use HTML. Even then, you may run into the problem of people running script tags. Enter XSS Terminate . This is a handy little

When it comes time to run your fancy AJAX site on production, you may find that there will occasionally be minor JavaScript errors (possibly from 3rd party sites, never your own of course) which will not only prevent your scripts from running but may also pop up some warning boxes on the end users' systems (especially if your target audience is made up of web developers who have "Disable JavaScript Debugging" unchecked). Even if the user does not have debugging turned on, they may still see the error symbol in the status bar (and this does not exactly put their fears at ease, especially if they are trying to make a cash transaction). Fortunately, you can suppress these error messages by using the following JavaScript code function noError(){return true;} window.onerror = noError; Essentially what this does is catch any JavaScript errors and passes them to a null function. You should probably wrap this in a conditional which will only run on production and staging because

Continued from yesterday... Firefox 3 and Safari both support rounded corners in CSS (now if only IE would catch up). You can use the following tags. -moz-border-radius: 3px; /** for Firefox **/ -webkit-border-radius: 3px; /** for Safari/webkit **/ If you use these tags on a div it will be rounded in FF or Safari and display square in IE. If you only want to round some of the corners (as opposed to all of them) here is the additional syntax in an example (where I rounded the top corners only). -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px;

Been back in CSS today. Here are some things I learnt today. 1) text-transform will allow you to transform the text to uppercase, lowercase or capitalize i.e. h1 { text-transform: uppercase; } This is a handy alternative to typing everything out in upper case (which is bad because the designer may change his mind to switch away from all caps at some stage). 2) If you are going to use jQuery to show/hide a table, wrap it in a div and toggle that instead. This is because show/hide/toggle in jQuery changes something from display:none to display:block. A table's display is inline-table by default and setting it to block will lead to some unexpected results. 3) If you have to write CSS (or anything) for IE only, you can use conditional comments <!--[if IE]> Special instructions for IE here <![endif]--> It's best not to use special CSS code for IE at all, but in some cases it's unavoidable. 4) You can modify the sliding doors technique by using a single image (instead

I recently read an article which talks about writing MVC for the web using jQuery ( http://welcome.totheinter.net/2008/08/05/mvc-pattern-for-the-web/ ). In any case, the author proposes building a full MVC controller in JavaScript (the example article is still in progress), which is interesting, but I think in some ways it is a little misguided, for I believe that the front end of the web is already MVC. Model = HTML (provided it is written semantically and not structurally) View = CSS (updating the style) Controller = JavaScript As long as you follow the principles of Unobtrusive JavaScript and keep your (X)HTML clean then you have MVC built in. XHTML is a form of XML after all (and XML is used to represent data/model). Just a thought...

One of my current projects is using RubyAMF to communicate with Flash (http://rubyforge.org/projects/rubyamf/). On the whole this is really nice because it allows you to transfer Ruby objects directly to ActionScript ones (as opposed to translating the object into XML, sending the XML and then recreating the object in ActionScript). However, Rails does not provide a built in transport mechanism for AMF, so we cannot run functional testing directly on the data call (as we could for an XML or HTML transport layer). This is a show stopper for a lot of people (Rails w/o Unit testing = a big mess of trouble when something goes wrong). We can though serve both the HTML and the AMF formats depending on the request format. This means that we can test the object instantiation logic and make sure there are no errors in the controllers (though we cannot check the actual format of the data being served). In the controller, instead of rendering AMF alone, do the following respond_to do |format|

One of the problems most people run into when writing web components is the fact that you have to tie together 2-3 disparate elements (HTML partial, JavaScript file and/or CSS) into one contextual component. As JavaScript and CSS files are normally placed in the head and the HTML partial occurs somewhere in the body, it can be hard to track down any missing pieces should they arise. In RJS (built in Ruby JavaScript components) the normal procedure is to place the script tag next to the element in the HTML itself. This not only goes against Unobtrusive JavaScript principles, it is also butt ugly if you ever have to view the source code. Thankfully, there is a more elegant solution. Instead of rendering your JavaScript directly in the page, i.e. <%= javascript_include_tag "my_component" %> you wrap it in a content_for(:head) (this assumes you have placed a <%= yield :head %> in your application.html.erb template). i.e. <% content_for(:head) do %> <%= javasc

Back in the old days of inline JavaScript, people would often attach JavaScript functionality to links either by using: <a href="#" onclick="doSomeJavaScript()">Click Here</a> or by using <a href="javascript:doSomeJavaScript()">Click Here</a> Anyways, there are problems with both. In the first instance, the user will get booted up to the top of the page in some browsers (that's what href="#" basically does). The second instance is better, but it is inline and that is something we want to avoid. In the Unobtrusive JavaScript world we would basically have to use the first instance because the "a" tag will not display as underlined in some browsers without an "href" attribute. Or would we? I am not really sure where the metaphor for using links as actions came from, but as long as it is there and people are used to it we will often get designs from UI designers using them as such. Links are really supp

One issue that has come up in using Unobtrusive JavaScript is how do you assign instance specific data to the element. For example, in the old days (pre UJ) you could iterate over a bunch of objects (each with it's own ID) and hard code the ID into the on{Event} attribute i.e. <% for item in items %> <div onclick="someFunction(<%= item.id %>)">Click here to select item</div> <% end %> But in UJ, on{Event} attributes are no longer considered good practice. If only there was a way we could somehow encode the id with the HTML like we could in Flex (Flex supports dynamic attributes on objects). You can assign a dynamic attribute using JavaScript, but putting a script tag into the loop seems very inelegant and against UJ principles. The other way would be to render all the objects in JavaScript first and then re-render them in HTML. This does seem rather wasteful in terms of processing however and full of index dependencies when you want to merge

Rails has got some nice default form options available in the FormHelper , however the check_box still leaves a little to be desired. It's great if you have one or two disparate elements, but what about when you want people to choose from a list of items like the following? Choose your favorite fruits. Apple Orange Banana Code <form> Choose your favorite fruits. <div><input value="apple" id="apple" name="fruit" type="checkbox"><label for="apple">Apple</label></div> <div><input value="orange" id="orange" name="fruit" type="checkbox"><label for="orange">Orange</label></div> <div><input value="banana" id="banana" name="fruit" type="checkbox"><label for="banana">Banana</label></div> </form> In the example above, they all have the name fru

Most modern browsers have a handy little feature which will check to see if you have filled in a text box before, and if so it will present you with a history of what you selected. For the most part this is a very useful piece of functionality but for one caveat. The browser does not fire any kind of JavaScript event when this happens. Dynamic form validation based on user input thus becomes a (to use Dave Chappelle's word) "biatch". Fortunately after digging around a little I found that there is a handy little attribute called "autocomplete" which you can set to "off" on the form element. <form method="post" action="/registration/create" autocomplete="off"> This will keep those nasty little history drop downs from messing up your input validation.

I just got turned onto a couple of cool FaceBook games today. Bumper Stars http://apps.facebook.com/bumperstars/ Bumper Stars is a cross between pinball, pool and Pacman. Basically you have a little beaver whom you shoot off to eat fruit and you bounce off all sorts of things. Kind of stupid, but fun and addictive. Who Has The Biggest Brain http://apps.facebook.com/biggestbrain/?pf_ref=sb Who Has The Biggest Brain is one of those rare games which makes you think and makes analytical thought into a competitive sport. There are about 7 or 8 varieties of brain tests and teasers from simple math to figuring out which random objects weigh more than the others, finishing puzzles and counting blocks. The first few times you play are the most fun as you are presented with brand new kinds of tests which make you learn new tasks (after that it gets more competitive but stretches your brain less). In any case I am a scholar!

Ok folks. let's get technical here (been a while, hasn't it)? So I decided to start using jQuery instead of Prototype as the JavaScript framework for my next project. Overall I am very happy with it (great plugins, good performance, cleaner overall structure, etc...). It does have a few weird things about it though which people should bear in mind. Nothing that would stop people from using it, but things people should know. In Prototype, the $() function returns an HTML element and the Prototype uses the prototype keyword to add extra functionality to the vanilla elements in the page (hence its name). In jQuery, the $() function actually returns a jQuery object which is bound to the HTML element. This jQuery object then encompasses most of the functionality you will ever need on an element. For the most part, this is a good thing. By using this strategy, jQuery is non invasive and will play nice with any other JS framework (it even has a noConflict mode in case you want to us

jPod is the latest Douglas Coupland novel about programmers since Microserfs . It centers around a group of mildly autistic programmers in a video game company in Vancouver who all sit in the same area of the company because their last names begin with the letter "J" and in particular the lead character's life, Ethan Jarlewski. While there are some interesting and thoughtful moments in the book, it unfortunately comes nowhere near the calibre of Microserfs due to the following reasons. 1) Wildly outrageous plot lines: I won't go into too much detail about these, but suffice to say where Microserfs was at least plausible (if slightly unrealistic), Coupland relies on ridiculous events to keep the story going in this case. Not only that, the characters are able to navigate these plot points virtually unscathed and unscarred (where as in real life these kind of things would require months of therapy). 2) Too many non-story devices: There is one part of the book where th

Hi All, I just got myself a new domain ( http://www.skuunk.com ). The reason is that Blogspot.com is offering cheap domain via GoDaddy.com and I thought after having this nickname for nigh on 10 years it was time to buy the domain before someone else did (also I read somewhere that using blogspot.com in your domain is the equivalent of an aol.com or hotmail.com email address...shudder...). Of course I forgot that I would have to re-register my blog everywhere (which is taking ages) not to mention set up all my stats stuff again. *sigh*. It's a blogger's life... In any case, don't forget to bookmark the new address and to vote me up on Technorati !

http://blogs.msdn.com/ie/archive/2008/03/03/microsoft-s-interoperability-principles-and-ie8.aspx Yay, the "geniuses" (genii?) at Microsoft are finally doing something right! IE8 will now render in standards mode by default (and if you want to make it run on IE7 mode you have to put in some meta tag thingy). If by standards mode they mean it will render pages like Firefox then I am happy. Now all they have to do is put some Windows update code out there which will permanently destroy all copies of IE6 so no one will even think of using it anymore. In all reality and sadness, I know we should be encouraging everyone to use Firefox, but unfortunately most people just use their system's default browser... I am not even really happy about Safari for that matter...

Are you old enough to remember when the Internet when it seemed to have a finite amount of information? Do remember the Darwin Awards? Can you remember the last time you actually saw an original joke online or in your inbox? If so, then maybe you sometimes have a hankering for old days when rather than searching for things on the Net, you would just browse around just click on random things and occasionally come across sites like " The End of the Internet ". These were the days when you had directories, not search engines, and you just had to take what you could get. In any case, recently a couple of new(ish) sites like StumbleUpon , Digg and Reddit have brought the browsing back to the browser. These are sites on which other people post stories of interest and rather than searching for interesting content, the user simply browses through. Stories are ranked by other users and secret sauce algorithms are in place to try and keep out spammers and general exhibitionists so th

http://leakedtech.blogspot.com/2008/03/internet-explorer-8-beta-1-sneak-peak.html So it looks like IE 8 Beta 1 is out. Even using VM with Parallels I am not prepared to try it out for myself. It doesn't look like there are an JS changes but mainly CSS ones. Now if they could just hurry up and kill IE6 then that would make my life much easier...

You watch more TV shows and movies on your computer than you do on TV and the movie theatre. You spend more time blogging about movies than watching them. You are genuinely excited whenever Apple releases a new computer (even though it only makes your current MacBook more obsolete). You IM people who are right next to you instead of talking to them. Your wife IM's you to get your attention. You don't need a blankie because your laptop keeps you warm at night. When you do finally get tired of using your laptop you pick up your phone and surf the web there. If it isn't online it doesn't exist. You open your laptop before you brew your first cup of coffee. When you call your laptop your wife and your wife your mistress.

So one of my upcoming projects may involve Adobe Flex so I am trying to get my brain Flexy again. It's been almost a year since I coded anything in that language so I am trying to get back into all the usual concepts (code behind, cairngorm, etc...). Of course the day I decide I am going to start looking at this, Flex Builder 3 is released (along with Adobe AIR, codenamed Apollo) which leaves me with a conundrum. Do I start this project in Flex 2 or 3? I am not really a fan of "brand new" tech as it normally has a lot of bugs that need working out, but those geniuses (geniui?) at Adobe have finally put in some backwards compatibility. Also it doesn't look like the language has changed much (mainly the IDE) which is a great relief (there was a huge jump between Flex 1 and 2). So with the release of Adobe AIR I can finally call myself a Desktop developer too (as AIR allows you to write desktop apps with web app languages). If only they would switch over to Ruby from Act

http://www.trendhunter.com/trends/adobe-light-field-lens   This thing is cool. Not only does it allow you to make 3D pics, but you can also choose variable focal lengths in the picture (click on the link to see it in action).   I am guessing there is a software component to this too (duh).

Yay! Sign of relief...

http://www.neopoleon.com/home/blogs/neo/archive/2003/09/29/5458.aspx This is just too funny (especially the Kodak funtime camera). Unfortunately they left out Powerpoint (which seems to be the preferred choice of my marketing team).

Most people who use the Net nowadays really fall into one of two categories. 1) Internet Consumers - This is most of us. We may occasionally paste some video into Facebook, but we normally use the Net to swap emails, read the news and occasionally look at pictures of other naked people. 2) Internet Producers - Leaving aside the techies for a moment (the people who "build" the Internet), these are the people who are obsessed with getting their points across, their opinions discussed, their crappy music demo listened to, and posting naked pictures of themselves online for the Consumers to look at (oh yeah, let's not forget those budding young stars trying to get their 3 minutes of YouTube fame). Ok, so most of us probably fall somewhere in the middle. We blog, we may occasionally post something to YouTube, and maybe we daydream about being naked online before we realize what a bad career move that is... For about 10 years now I have been making a living as one of these p

http://gizmodo.com/355350/wowzerscheapest-hdmi-cable-weve-ever-seen-is-2   Of course shipping and handling is probably another $20...

http://www.neatorama.com/2008/02/07/the-evolution-of-tech-companies-logos/ You gotta wonder what your new Nokia cell phone would look if it had the old logo on it...

http://www.macobserver.com/article/2008/02/06.8.shtml Danish Police were apparently confused while trying to confiscate someone's 1G iMac thinking it was only a monitor. 'Where's the computer?' he said. 'On the desk. That's the computer,' I said. 'No, the computer.' 'That's the computer, dude.' I wonder if "dude" is a literal translation from Danish. Personally I remember the 1st generation iMacs and the guy was lucky not to get arrested for taste reasons alone (what with those garish candy coated colours...).

I wished I could re learn every programming language using a guide as poignant as this. http://poignantguide.net/ruby/ I wonder if this guy has any plans to write a JavaScript tutorial too. I wonder how he would handle closures and prototype using elves and talking foxes...