Video Game Pulse

Problem

In a recent project I was tasked with creating a function which would go through a list of phone numbers and identify which ones were duplicates. It seemed like a simple task which could be tackled with a for loop and some arrays; however, upon diagnosing the potential scale of the function’s usage, I determined that I needed to think this thing through quite a bit more to make it scalable.

I won’t bore you with the math, but the jist of it is that my initial instinct to use for loops and arrays would have meant my algorithm was O(n2), which means that if I put in 5 numbers, it would loop through 25 times in order to identify the duplicates. Scaling this up to 50 phone numbers would mean 250 loops!

Solution

The solution was to use objects instead of arrays, which allows me to use hash functions to point directly for what I’m searching for; the algorithm is O(n), meaning that if I put in 5 numbers, it loops 5 times. You may be wondering what exactly do I mean by “hash functions”. Here’s an analogy to help describe the difference between how to look up values in arrays and objects:

Arrays

Looking up a value in an array is like calling a list of unlabeled phone numbers looking for Bob.

Objects

Looking up a value in an object is like having a contact list with Bob’s name in it.

Example Using Arrays


function getListofDuplicatePhoneNumbersIndex(phoneNums)
{
    var dups = [], phoneNums = phoneNums;
    $.each(phoneNums, function (i)
    {
        $.each(phoneNums, function (j) {
            if(j!=i){
                if(phoneNums[i] == phoneNums[j]){
                    dups[j] = j;
                }
            }
        });
    });
    return dups;
}


Example Using Objects


function getListofDuplicatePhoneNumbersIndex(phoneNums)
{
    var seen = {}, dups = {};
    $.each(phoneNums, function(i)
    {
        var phoneNumber = phoneNums[ i ];
        if( seen.hasOwnProperty( phoneNumber ) )
        {
            dups[ i ] = true;
            dups[ seen[ phoneNumber ] ] = true;
        }else
        {
            seen[ phoneNumber ] = i;
        }
    });
    return dups;
}


If you’ve got Firebug installed or any console tool, you can observe how many loops each one takes when you click “Submit” in the Demo linked below

Demo http://wecodesign.com/demos/getDups/

Problem

The result of the following code will be three list-items on a single line with a black border and no padding or spacing. However, in Internet Explorer the list-item with the clear-fix class still takes up visual space on the screen causing a gap between the list-items and the bottom border.

How would you solve this issue?

style.css
.clear-fix {
float: none !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important;
display: block !important;
}

ul li {
float: left;
}


code.htm
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li class="clear-fix"></li>
</ul>


Good Browsers

Bad Browsers

Solution 1

You can use targeting to set the clear-fix style to display: inline for just IE.

<style type="text/css">
<![if IE]>
.clear-fix {
display: inline !important;
}
<![endif]>
</style>

Notes: This solution requires code specific to a browser, and is required to be an embedded style-sheet, which is not ideal.

Solution 2

You can attach a class to the body tag to specify the browser, and then set a specific style.

style.css
.clear-fix {
float: none !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important;
display: block !important;
}
.ie .clear-fix {
display: inline !important;
}

Notes: This solution is more ideal than the last, as it can be stored in the external CSS file; however, it requires some server side logic to determine browser type when appending the class to the body tag and it still requires code that’s specific to a browser.

Solution 3

Diagnose what the root problem is, there’s spacing, which usually means it thinks their is content, so we need to set the correct styles to counteract this. It probably thinks there’s content because of the bullet point, which we’ve disabled.

style.css
.clear-fix {
float: none !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important;
display: block !important;
line-height: 0 !important;
font-size: 0 !important;
}

Notes: This solution is the best as it attacks the problem at its root. The issue is that IE7 and lower don’t auto collapse list-items when they are empty, so we have manually set the styles that the browser should’ve set to begin with.

Conclusion

The best solution to solving discrepancies in Internet Explorer is to find out what IE is supposed to be doing, and then manually specify that. Sometimes you’ll need to reorganize your code around to accommodate a rather tricky bug in IE like its z-index issue; however, in most cases you can solve it simply with CSS which is not specific to any browser. I have yet to encounter an IE bug that I’ve not been able to solve without the use of browser specific style-sheets or classes.

Useful Links

• CSS Box Model (http://www.w3.org/TR/CSS21/box.html)
• CSS2 Spec (http://www.w3.org/TR/CSS21/cover.html)
• HTML Spec (http://www.w3.org/TR/html401/cover.html)
• CSS3 Text Level (http://www.w3.org/TR/css3-text/)
• CSS3 Selectors Level (http://www.w3.org/TR/css3-selectors/)

As you can tell, January was a month full of updates, almost daily from the very first post. This month hasn’t really been the pillar of success when it comes to having something topical everyday. I’m still thinking of taking the weekends off, since there isn’t really any news then, but that doesn’t mean I don’t have something to say on the weekends.

Anyhow let me account for my time away from the Video Game Pulse post. I have been doing some side work programming for a wonderful gaming website called Defunct Games. As you will recall from previous posts and the expanded links section, this is a site I really like, they have fun and informative news about the gaming industry. They aren’t afraid to rip apart and correct a person, company, or magazine.

Defunct Games also has a blog which they have asked for me to make seldom posts on from time to time. I can’t argue, exposure is exposure. So don’t think someone is stealing my posts if you see some of my writing on there from time to time. Their blog is called Defunct Thoughts (also in the links section*). The blog essentially does some of the stuff I do here, but is more focused on Defunct Games main goal, which is to make the gaming industry fair and balanced.

So by now you are wondering, what is this mystery work I have been doing that has taken me away from you. I recently helped piece together a new archive over there, and a new navi which can be found on every page of Defunct Games, Check it out, roll over the buttons, have fun… let loose!

UPDATE:
*Defunct Thoughts has closed its doors and is no longer available