Skip to: Navigation Content Search

Archive for the ‘Development rants’ Category

Starting out on my Flash journey (again) Saturday, May 24th, 2008

Now that the sun has come out and my employer’s training budget is large, I’ve decided to revist Flash and get my Actionscript skills up to scratch.

The last time I used Flash, as a naïve gen Xer looking to embrace the web, it was in version 2. Which sucked. But it was fun to fool around with things which, back then, were thought of as impossible to do with JavaScript and CSS alone such as smooth animation, timelines and pretty colours.

These days you can manipulate sound, images and video to such an extent that it’s made Flash the most ubiquitous piece of web software out there.

Not to mention that Flash skills are becoming more and more sought after from a Frontender.

So my quest starts with a very simple image gallery written nearly entirely in Actionscript (2.0 because we only have Flash 8 available to us at the moment) that reads the contents of an xml file.

The next step will be to write a class that builds thumbnails on the fly to an interactive thumbnail scroller for better browsing. At the moment you can only navigate left and right by hovering over the image itself.

It’s basic, but it’s a start for me back into the cool world of rich media.

Check out the simple image gallery.

Tags: , ,
Posted in Development rants | No Comments »

Declaring functions in JavaScript Thursday, May 8th, 2008

Well, here’s a little tip for you if you didn’t know already. Some people say that there are a couple of ways of declaring functions in JavaScript and you can go to town doing one or the other (depending on your tastes) because they do precisely the same thing.

Well they do and they don’t.

Tell me why this will work:

<html>
<head>
   <script type="text/javascript">
    noodles();
    function noodles() {
      alert("Do you like noodles?");
   }
</script>
</head>
</html>

And not this:

<html>
<head>
   <script type="text/javascript">
    noodles();
   var noodles = function() {
      alert("Do you like noodles?");
   }
</script>
</head>
</html>

The second example will return our favourite word: undefined.

Maybe obvious to you, but not to me when I first got on the bandwagon. You see the browser will look at all function declarations (that is, the function in the first example) first and think, “Hey, these might be useful!” and then proceed to store them in a little hidey hole for use later. Then it will go on and do everything else. So when the browser encounters a call to a function it already knows what to do.

In the second example, we’re just assigning a function to a variable, which is great, but the browser has to know about it before we execute. In other words the execution must come after the variable declaration. It’s like trying to do this:

   alert(noodles);
   var noodles = "I love noodles!";

It’s just something to keep in mind.

Posted in Development rants | 1 Comment »

Party on with the Youtube JavaScript API Wednesday, April 16th, 2008

Spewing out Youtube videos on to your page has just become easier. Now you can load, control and search Youtube videos using nothing but JavaScript and a bit of patience. I know, I know. Your excitement is palpable through my DSL exchange.

So what can you do? You can embed two players onto your page:

  1. The chrome player - with all of Youtube’s standard controls
  2. The chromeless player - you guessed it, with no controls

For some, probably sane reason (although I’m yet to ascertain why), when using the chrome interface you cannot load new videos into the same player using the loadVideoById function, which is available to the chromeless player. Therefore if you would like to employ this highly useful method and be able to control playback, you have to build your own controls. Fortunately, the API methods make it rather easy.

Having nothing to do one rainy day, I decided to give it a go. My motivation was related to the fact that we go to a lot of parties but neither I nor my lazy friends are bothered to bring music and whine incessantly if we have to change a CD. Given the wealth of music videos on Youtube these days I thought that I could make a rudimentary jukebox so that you can play and cue music at will, even when plastered on tins of lager.

Naturally, it will play whatever video you feed it, but I don’t really want to watch some inane mashup of the Star Wars movies dubbed to a Linkin Park sountrack or other shit. One application that I thought might be rather splendid would be to create a playlist to join all the parts of a movie or TV episode. I am grateful to all the folk who take the time to splice and upload these treats but, by no fault of theirs, it’s  a chore to click to the next part every nine minutes and twenty four seconds.

Here’s my first attempt. Of course I will excuse myself with the following:

  • it’s alpha
  • code review to come
  • design change inevitable (maybe in the shape of a jukebox, that would be original)
  • predictably, I couldn’t give a wet sock if it worked in IE6
  • ideas for the future: saveable playlists, editable playlist order using sortable behaviour, auto-download of next video for smoother playback, fullscreen (or bigger at least), save /cache searches, tally favourites, plug into last.fm for recommendations, get artist data from musicbrainz, blah blah

At the very least, it’s great for listening to music at work.

Posted in Development rants | No Comments »

Diplomatic immunity through JavaScript Saturday, April 5th, 2008

Would you love to be able to waltz in to a place, piss all over the floor, without anybody saying or doing anything to you? Even if they wanted to punish you, they would have to follow a process that you yourself defined. Haw haw!

Anonymous, self-executing functions can allow you to do this. They’re kind of like diplomatic immunity for your browser and can be very powerful.

(function(){/*
    Oooh it’s so cozy in here. I have access to all
    global variables but I can do what
    I like and no-one will know!
    Now I’m going to do some private things.
*/

var privateVar = “I’m so lonely in here”;
var privateFunction = function(s){ alert(s) };

/*

Okay, maybe I want to share something with the
    outside world but let’s namespace it just in case:

*/

return namespace = {
           publicFunction : function(q){
               return function(a) {
                privateFunction(q + privateVar + a)
               }
            }
};

})();

We can’t access any of the private variables or functions from outside our anonymous function, thus avoiding collisions and overwriting, but we can return public functions that do! namespace.publicFunction is able to see, use and modify our private variables, but only in the way in which we want it.

It’s even possible to throw a bit of curry in there to spice it up. Calling namespace.publicFunction and passing it an argument (in this case a question) returns another anonymous function that expects an argument (an answer) and will then use our private variables to construct a little dialogue.

We would call it like this:

namespace.publicFunction("How are you?\n")("\nThat's too bad");

The example is basic and doesn’t make much practical sense but it demonstrates the way scope works in JavaScript and it can be a simple but handy tool to have in your arsenal.

Posted in Development rants | No Comments »

Learning curves Wednesday, February 27th, 2008

I recently helped a colleague rebuild his site the CSS way after he’d spent hours at home trying to do it himself. This guy was no computer novice - he’s a fine python/ruby programmer and writes Linux applications in his spare time, but he just couldn’t get the whole logic of CSS and how it related to elements on the page. I understood his frustration.

(more…)

Posted in Development rants, General musings | 1 Comment »

Viva CSS 3! Thursday, February 14th, 2008

I remember back in 2000 when I first used CSS to style a web page. It was a strange and often frustrating experience shifting from the development paradigm of cross-browser markup to cross-browser styling. I didn’t realise how revolutionary it was back then mainly because I was frying my brains trying to write code that looked decent in Netscape 4 and IE5. And now look at us: CSS 3.

(more…)

Posted in Development rants | 2 Comments »

Tips for a standards martyr Monday, February 11th, 2008

Q: How does a spectacularly immense organisation go from tables and HTML 4 to web standards and XHTML strict without breaking a sweat?
A: They don’t.

(more…)

Posted in Development rants, Useless advice | No Comments »

« Older Entries