ICQ Sounds for Messenger (Adium)

I totally love the old ICQ sound, “uhh oh!”. Kinda missed it after I stoped using ICQ, so when my friend told me about an ICQ plugin for Adium I was stoked!

Check it out (blue box to the right):

Adium -> Settings -> Events -> Select an event, press + and select ICQ from Sounds.

(Sorry screenshot is in swedish :-/)

ICQ Sounds on Adium

The Difference Between <code> and <pre> tag

I was always wondering what the difference between the <code> and <pre> tag was.
Here’s a simple explanation for everyone out there who is still wondering.


The code tag defines computer code text. It is one of the many phrase tags, just like <strong> or <em>.
Like <strong> and <em> it is preformatted. Is uses font-family: “Courier New” by default.


This is text inside the code tag


Unlike other tags, the pre tag preserves spaces and line breaks. It also gives the text a fixed-width font. This is ideal when typing indented code text.



If browsers were women…

Got this one from a colleague at Cloud Nine who found it on a Russian forum. Love it!

Browsers as women

Preloading images with JavaScript

When interacting with a gallery with thumbnails that trigger a bigger picture of the thumbnail, it is really annoying when you have to wait for the big picture to load, right? To make the user experience better, I would either add a loader.gif which shows you that the picture is loading, or, preload the images, so they are already loaded when clicking the thumb.

I put together a very simpele little function that does the preloading job for me:

* Preload images for faster interaction.
* @param {array} array of the image paths, e.g '/images/picture.jpg'
function preLoadImg (ary) {
  var cache = [],
      l = ary.length,
      i = 0,
      img = null;
// -- is faster than ++, and we don't care what order
// the images are being loaded..
  for (i = l; i --;) {
     img = document.createElement('img');
     img.src = ary[i];

the Array I’m sending into the function looks like this:

['/images/summer.jpg', '/images/winter.png', '/images/spring.jpg']

So, basically, what we do is feeding our function with image paths, checking the length of the array, looping through the array and for each loop creating an image tag and adding the path we sent in as the images’ src.

Very simple and neat.