$array = array (
    'alpha'=>4,
    'beta'=>9,
    'gamma'=>3
);
echo json_encode($array)

You should then see something like the following:

{"alpha":4,"beta":9,"gamma":3}

If you were manually processing the array and building a JSON object like I was, assume the face palm position.

So what’s the solution? It’s rather simple, actually. Since the issue only pops it’s head up when you’re working with decimals, all you have to do is multiply it by the correct power of 10 and then do your calculations. Once you have a result, divide it again by the same power of 10 and you have the answer. So for example, in Canada lately there’s been a lot of talk about the Royal Mint wanting to stop making pennies and as a result all transactions will be rounded to the nearest 5 cents. So lets look at a function that could be used to round a value down to a 5 cent increment:

    // Enter a value in dollars and cents, such as 4.97 or 1.91
    var value = prompt("Please enter an amount","Amount");
    var balance_remainder = 0;
    var balance_sign = 1;

    if(isNaN(value)) {
        alert("Not a Number!");
        value = 0;

    } else {
        // NOTE: JS calculates a modulus on floating point numbers differently than some languages
        //       The solution is to multiply currencies by 100 before getting the modulus and then dividing the answer by 100                                                                              

        // Strip the negative off for now so it doesn't screw with the calculations
        if(value < 0) {
            balance_sign = -1;
            value = value * -1;
        } else {
            balance_sign = 1;
        }

        // Calculate the remainder
        balance_remainder = (value * 100) % 5;
        balance_remainder = balance_remainder / 100;

        // Strip off the remainder
        if(balance_remainder > 0) {
            value = value - balance_remainder;
            value = Math.round(value * 100) / 100;
        }

        // Re-sign the value
        value = value * balance_sign;
    }

    alert("Result: " + value);

And there you have it!

10 – JavaScript Links

This one isn’t always noticeable, when you use the website the way the designer expected you to use it.  What they did not expect was for you to ctrl+click or middle click a link to open it in a new tab. Perhaps you just wanted to copy the URL so you can send it to a friend?  Unfortunately far too many developers leave off the href attribute when they use an onClick, or they needlessly make their links use JavaScript in order to do something silly like open it as a popup.

9 – Denying Right Click

I can’t help but laugh every time I see this one.  Almost all browsers these days override the developer’s attempt to stop you from right clicking.  Instead what happens is they get an alert saying its not allowed at the same time as the right click menu.  If you are that worried about me stealing your image, there are better ways to stop it.  Trying to deny right clicks just annoys the user, and provides them no benefit.

8 – Under Construction

7 – Splitting Content

I appreciate the fact that you might be trying to break up the article to make it seem less intimidating to read, but you can solve that issue by just adding some white space.  I can handle more than three paragraphs at a time.  We all know the real reason you broke your single page article into six pages was just so you could get more ad impressions.  But guess what, when I got the “continued on page 2″ link I just closed the page.

6 – All Flash Websites

You’re a graphic designer, not a web designer.  Stop trying to be both.  Not only is the noise and “flashiness” of your website annoying, but it’s extremely hard to navigate your site.  How am I supposed to know that if I hover my mouse over bird another the link to the gallery will appear.  To make matters worse, once I find the section I need I can’t even bookmark it because your whole page exists as one URL.  So each time I come here I have to watch your long and useless intro, then stumble through your horrible menu system.

5 – Splash Pages

Wow, you know Photoshop or Flash.  I’m not impressed.  In fact, I’m annoyed because I just had to perform yet another click to get to the content of your page.  To make matters worse, you tried to be creative with your placement of the enter button and I can’t find it on your splash page at all.

4 – Resizing the Window

I like my window the size it is.  If its maximized, it’s because I wanted it maximized.  If it’s only taking up half my screen, it’s most likely because I needed the other half for something else.  Yes, your crappy flash page was meant to be viewed at 800×600, but I will resize it myself if I need to.

3 – Videos that Auto Play

Chances are that I have no interest in the videos you’ve put on your site.  If I wanted to find a video I would have searched on Youtube or a similar engine.  Your video may be relavent and useful to me, but please give me the option to start it when I’m ready.  I often open many tabs at once and don’t get to them for some time.  Having to click on each one, scroll through pages of posts and try and find the source of the talking I hear, and then stopping it is really annoying.  What’s even more annoying is when you have 10 videos on your main page that all start playing at once — seriously, what made you think that would be a good idea?

2 – Music

Even more annoying than videos is background music.  We all have very different tastes in music, I probably don’t like what you like.  In fact, I probably hate it.  And what I’d probably hate even more is for it to scare the living crap out of me when I open your site at 3 am and have neglected to turn my speakers off.  I have never seen a website that needed background music, never.  I don’t care if it’s a website for your favourite band, it doesn’t need to auto play.  If you feel you need sound on your site, follow this one simple rules  give the user the option of if and when they’d like to hear it.

1 – Click Here…

Some of you will think it’s silly that I put this on the top of my list.  But this one is huge for me because it is a plague that has infested the majority of the Internet.  It’s become so popular and normal to see on a website that I continuously have intelligent, highly educated clients handing me text full of “click here…” links.  There is no need for this, link the title or action as you mention it, you will look far more professional if you do.

So, what are your pet peeves?

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim, quam sed pellentesque eleifend, nisi erat facilisis quam, a viverra lorem arcu ut dolor. Morbi in magna mi, vel malesuada diam. Proin pulvinar ultricies aliquam. Sed tellus neque, facilisis eget sagittis eu, cursus in turpis. Phasellus vestibulum turpis nibh. Nam porta congue tellus bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tellus tortor, aliquet vel mattis vel, sagittis id eros. Ut lacinia lobortis volutpat. Nunc rhoncus sem eu augue mollis dapibus.<br />
<a href="javascript:;" onClick="showLayer('more_content')">Show</a></p>
<p id="more_content">
Fusce sit amet diam odio. Quisque mattis sagittis dui ut malesuada. Curabitur felis velit, varius id scelerisque a, facilisis eu felis. Cras placerat urna ut nulla vulputate quis dignissim arcu tempor. Aliquam laoreet varius sollicitudin. Pellentesque feugiat vehicula risus, ut tristique massa hendrerit ac. Nulla facilisi. Phasellus et nulla erat, sed viverra enim. Curabitur faucibus mi eget quam ultrices non hendrerit tortor consectetur. Etiam iaculis massa et mauris vulputate rhoncus. Proin dapibus mauris in dolor sagittis ut elementum purus mattis.
<br /><a href="javascript:;" onClick="hideLayer('more_content')">Hide</a>
</p>

At this point your page will render both paragraph blocks. In order to hide the second by default we have to add some CSS styling. I could have done this inline for the example however since I consider that to be bad coding practice I will create a style block for that.

p#more_content {
display: none;
}

Now your second paragraph will be hidden by default and the user will have to hit the Show link in order to expand the content. In order to make that functional you will need to add the following JavaScript code.

function hideLayer(whichLayer) {
var menuGroup;
if (document.getElementById) {
// Standard method for modern browsers
menuGroup = document.getElementById(whichLayer).style;

} else if (document.all) {
// For Old IE versions
menuGroup = document.all[whichLayer].style;

} else if (document.layers) {
// For Netscape Navigator 4
menuGroup = document.layers[whichLayer].style;
}
menuGroup.display = "none";
}

function showLayer(whichLayer) {
var menuGroup;
if (document.getElementById) {
// Standard method for modern browsers
menuGroup = document.getElementById(whichLayer).style;
} else if (document.all) {
// For Old IE versions
menuGroup = document.all[whichLayer].style;
} else if (document.layers) {
// For Netscape Navigator 4
menuGroup = document.layers[whichLayer].style;
}
menuGroup.display = "block";
}

This code block could be simplified considerably by using only the getElementById() method, however that will remove it’s backwards compatibility with older browsers. Though the percentage of users visiting with Netscape Navigator 4 or Internet Explorer 4 are extremely low, it could happen, so I have always left those extra lines in just to make sure.

You can also build on this a bit and make it one function that alternates between showing and hiding the div by changing the last line of code to menuGroup.display = menuGroup.display? “”:”block”;.

See it in action

<script type="text/javascript">
	window.onload = function() {
		document.forms[0].username.focus();
	}
</script>

I would also recommend this on any page that has a form element on it that must be filled out. However be careful not to use it on a page that has a form field that the user may not be interested in. A good example of bad placement for this block of code is AVN Ads which sets focus to the search box instead of the username field. Every time I go there I get half way through typing my username and password before it jumps up to the search box and I in my haste I end up typing my password into the search field for all the world to see.

function lorum(x, y) {

	if(typeof(x) == "undefined") {
		x = 100;
	}
	if(typeof(y) == "undefined") {
		y = 500;
	}

	// ...
}

Of course you could use a ternary operator if you prefer, however I know I’m not alone when I say that I do not like them. In any case, here’s an example using them:

function ipsum(i, j) {

	i = typeof(i) == "undefined" ? 100 : i;
	j = typeof(j) == "undefined" ? 500 : j; 

	// ...
}

Despite its reduced code space, I prefer not to use them as they can be confusing at first glance. But to each his own.

Despite the abundant amount of documentation out there I still find myself getting stuck on the odd little thing. For example, I was working with Dijit’s DateTextTime field and simply could not get it to take a date I passed in. If I did it directly through HTML by setting the value attribute it would work, however when setting it in JavaScript as part of my AJAX call it would fail every time. I dugg around the Dojo community eventually finding someone who had the same issue and had managed to solve it “after several hours of trial and error” but sadly he neglected to post his solution. Thus I wanted to make mine available for anyone who finds themself working on the same problem.

I was working with the Dojo Toolkit as a reference and sadly it only stated that you used the SetValue() method to assign a date, but it did not provide the required syntax. After much trial and error I eventually discovered it wasn’t expecting that I pass it in as a string at all, rather it had to be set as a JavaScript date object first. So here is the required steps to assign a date to a DateTextTime field:

// Now
var dateA = new Date(); 

// January 1, 2009
// Note that the months start from 0 but days start from 1
var dateB = new Date(2009, 0, 1); 

// Parsing a string returne from MYSQL, in the format of YYYY-MM-DD
var dateC = new Date(data["ExpiryDate"].substr(0,4), parseInt(data["ExpiryDate"].substr(5,2))-1, data["ExpiryDate"].substr(8,2)); 

// Pass Date Objects into Dijit
dijit.byId("registered").setValue(dateA);
dijit.byId("bdate").setValue(dateB);
dijit.byId("expiryDate").setValue(dateC);

// Reference
// http://www.w3schools.com/jS/js_obj_date.asp

So what can you do to stop this?  There are many solutions!  But today I want to offer you a simple JavaScript file that will encrypt your all email addresses on your page automatically.  It can be downloaded from Voynex, however they don’t really offer a good explanation on how to use it.  So here is a step by step:

1. Download the Email Guard script from Voynex’s site
2. Extract the files and upload xmailguard.js to your site, I usually have a directory called “scripts” in the root of each site
3. In any page you want to have your emails encrypt link the script by adding this line to the top: <script language=”javascript” type=”text/javascript” src=”/scripts/xmailguard.js”></script>
4. Initialize the script by adding another script block : <script language=”javascript” type=”text/javascript”>xmgInit()</script>
5. Now you have to type your email links a bit differently, instead of <a href=”mailto:email@address.com”>email@address.com</a> you will have to code your links to <a href=”mail_to_email_at_address.com”>email_at_address.com</a> and when the page loads it will rewrite them for you.   If you are using PHP this line will do most of the work for you: $email = str_replace(“@”, “_at_”, $email);
6. Now its possible that some bots will render the javascript first before doing their dirty work, but from my experience I have found they don’t process the javascript.  You can also customize the encrypted syntax you want to use by tweaking the first couple of lines in xmailguard.js

Now your email addresses are safe!