JavaScript Array Scrambling

Ever need to randomly re-order an array in JavaScript? I have. And, unfortunately, there is no native support for a function like shuffle() in PHP.

I found a few people suggest this technique, but I have found it to not be very good. The elements weren't all that random especially for the first and last elements in particular (they were usually one of two values).

myArray.sort( function(a, b) {

	return Math.round((Math.random() * 100) - 50);

});

It uses the native sort() function requires a function that will compare two values to determine which one comes first. If the number returned is negative it indicates that the 'a' item goes first and vice-versa if it is positive.

I found the following function to be more random:

function mixArray(arrayIn) {

	var arrayOut = [];

	var origLength = arrayIn.length;

	for (var x = 0; x < origLength; x++) {

		var randIndex = Math.floor(Math.random() * arrayIn.length);

		if (randIndex == arrayIn.length) randIndex--;

		arrayOut.push(arrayIn.splice(randIndex, 1)[0]);

	}

	return arrayOut;

};

myArray = mixArray(myArray);

Base Dependency, JavaScript and how parseInt() returns 0

I learned today that the parseInt() function in JavaScript actually has a second parameter that is optional. This second parameter defines the number's base. Thus, you can parse an integer that is binary, octal and hexadecimal. However, if you do not define the base, the parseInt function takes a guess at the base instead of defaulting to decimal.

So, if you have a parseInt('08') or parseInt('09'), the function will return 0. This is because it is guessing that these are octal numbers (based on the 0 in front) and then returns a 0 because they are invalid octal numbers.

The fix is simple, define the base. Use parseInt('08',10) or parseInt('09',10) instead. This blog post helped me and has more info on the matter.

Hash Changing, detecting the Back button in JavaScript

If you use gmail and you are a web developer, you have probably noticed that they use hash or anchor links (e.g., "example.html#hash") to make your browser's back button very effective. These hash or anchor links were designed to bring your browser to a certain position in a page. Often they are used on help pages or FAQ pages to make the browser window scroll to a certain point. But, interestingly, they can also be used to set certain JavaScript states, when configured properly.

In order to monitor the hash state and determine if the browser's back or forward button were hence used, you must set up a polling loop. It will check the current hash against the last hash. If there is a change it will do something magical (whatever you want to do).

<script type="text/javascript">
/* set defaults */
var curHash = window.location.hash;

/* check for a change in hash (back or forward buttons) */
setInterval(function() {
 if (curHash != window.location.hash) {
  curHash = window.location.hash;
  /* -- do what you need to do when the hash changes! -- */
 }
}, 250);
</script>

The check time is set to 250 ms. But this can be tweaked for your particular needs.

There is rumors that in HTML 5 there will be a hash onchange event. This will really clean up the code, removing the need for polling. Until then, this is the next best thing.

Update 10/28/13 - Side Note: Checkout HTML5's push state for doing cool things like this w/o the hash. You can have the whole URL reflect a change in the DOM without the browser trying to go out and fetch a new web page. Pretty cool stuff. Some JavaScript frameworks like Backbone support both the hash change and the newer push state methods.

Page Loading Speed-Up

I found out today that if you have JavaScript and CSS externally linked in your HTML head, the CSS should come first. This will allow browsers to fetch both external files at the same time. I use JavaScript to do some last minute page styling, depending on some parameters and also found that this helped the page flicker.

On a related note, the Page Speed add-on to Firefox is a handy little tool for determining areas for improvement for a website (that's where I learned of this CSS before JS tip).

javascript compression

Compression of JavaScript is highly recommended. It reduces file sizes and quickens browser response times. There are a few good sites out there that do JavaScript compression. There are even some that will "obfuscate" your code, making it much harder to reverse-engineer.

Well, Google has released its JavaScript compression tool called Closure. There is even an online version.

javascript wonderland

There is a lot you can do with JavaScript and DHTML. You can have custom pop-up messages, you can make things move around the screen, you can have pop-down menus, you can even send data to web servers (AJAX). But, it takes some work to get everything running smoothly. Especially when you want a certain user interface to work great no matter what browser is used.

jQuery is a great solution for JavaScript and user interface problems. They have a wonderful library of visual affects and more. Just take a look at their demos to get a feel for what I am talking about (in terms of UI). Then, if you want to integrate it into your own site, just download the code and plug it in (with a few tweaks and bumps - but that is expected, right?). It is a great way to get good functionality going quickly and reliably in a web site.

CSS: background-position

Today I discovered a new trick I can use for background images in CSS. It is based on the background-position property. This allows the designer to offset a background image used in an object (like a span or div).

I was looking at the images that Google uses in Gmail and noticed that some of their icons come all together in one larger PNG file. They form an array of icons. After some searching the web I landed on this article that explained how to select a single image from an image array: http://www.guistuff.com/css/css_imagetech1.html

Pretty neat. It reduces page load-time (because you load one image instead of multiple ones, and each file comes with overhead transaction data) and removes the need to pre-cache images for DHTML. A little bit of JavaScript and CSS and you're all set. It is going to be a handy thing to have in my design toolbox.