Source: StatCounter Global Stats - Browser Version Market Share

And it will soon be the #4 browser worldwide:

Source: StatCounter Global Stats - Browser Version Market Share

First, I decided that I was going to use MDF (Medium Density Fibreboard) for the heart border. MDF is often used for making furniture, school projects, etc., and it seemed like it would be a good choice for my needs. Strong, yet flexible.

The next step was to draw the heart to scale. I needed to be able to recreate the hearts on a large scale, so just drawing it freehand wasn’t really an option. It was time to dust off my high school geometry knowledge. Using a protractor and 45 degree triangle, I drew a half circle with a 2.5″ radius on a 45 degree angle (my original plans were hand drawn, but I’ve included some images below that I recreated on the computer for this post… the originals seemed more impressive to me… there’s just something about getting highly precise drawings by hand that looks more impressive). This would be the top left side of the heart.

Next, I created a mirror image of this by creating another half circle on a 135 degree angle. This angle was the tangent created at the rightmost edge of the first half circle. This gave me the top right side of the heart.

Next, I extended the tangents on the outer edge of each circle until they intersected to form the bottom of the heart.

I needed to know the lengths of the bottom pieces of the heart, so I took a look at what I knew already.

1. The angles where the tangent lines crossed were all 90 degree angles so when dividing the heart in half down the middle, I get two right triangles, each with 45 degree angles for both of its complementary angles.
2. If the complementary angles of a right triangle have the same measure, then the legs of the triangle opposite those angles have the same length. I knew that the radius of my arc was 2.5″, which meant that the diameter was 5″. Since the two 45 degree angles are equal, the lengths of both legs must therefore be 5″. I now had a scale version of my heart shape.

Looking back at it, I now see a much easier approach that I could have taken. I could have started by drawing a square, then draw the arcs using half the length of one side of the square as the radius, from the midpoint of one of the sides. Then I could have rotated the whole thing 45 degrees and it’s the same heart.

At this point, I had the basic outer edge of my heart shape. There was to be some overlap on the bottom (giving it an almost ribbon-like appearance), and at the top-middle of the heart where the arcs met. For the top overlap, I simply extended each arc along it’s tangent for about 9″ (since the width of the border was 6″, that gave about 3″ of overlap). For the bottom, I started out by creating an arc whose center was on one of the tangent lines (extending the tangents farther down), but in the end I decided that those could be a bit more freehand.

I was quite happy with the end result, and glad I still remembered some of those Geometry lessons from high school.

I’ve been considering moving to a new host. I’ve heard good things about JaguarPC.com, and the pricing looks great ($5 / month if I go with a 3 year plan).

Got any web hosts you’d like to suggest?

We wanted to thank you for letting us know what you think, and we hope you like the improvements we’ve made since then.

Many users have voiced their complaint about certain missing call screening features. In particular, I’m referring to the following:

1. Once a call screening name has been recorded, there is no way to delete it or force it to be re-recorded. So if you friend calls you and hears the prompt to record his name and he says “What the F***?” as his name, that is what you will hear every time that person calls you. This is especially not good if you have little ones that might answer the phone.
2. The proposed solution to that problem is not a solution at all. Add that person to your contacts and their name will be “read” instead. This is much more of a hack than a fix, and from what I’ve read it doesn’t even always work.
3. Suppose the person is calling via a business that has a phone system that gives every outbound call the same caller id? For example, say my boss calls me from work and records his name. Now any time anyone calls me from that company, I will hear my bosses name even though it could be any number of people calling me.

It seems like a terrible oversight that users can not manage the recordings. Also, it should be configurable to force a recording every time for certain numbers (which would solve the 3rd problem listed above).

In my opinion, Google Voice still has a long way to go, and it’s disappointing that it has been live for a year with not even a word of fixing these issues.

As I stuck my left hand in her mouth (to hold it open while I popped the pill in with my right hand), I had my thumb too far back near the molars. As she continued chewing her food, she punctured right through the middle of my thumb’s fingernail with one of her pointy premolars. Blood instantly started flowing out of the hole, and the pain was intense. I washed it with antibacterial soap, and ran it under cold water for several minutes. Eventually the blood stopped flowing and I could see the small, purplish splotch in the center of my nail surrounding the crack. I put some antibiotic ointment on the wound and wrapped a bandaid around it.

A small amount of blood continues to make its way out of the hole in my nail today. I’m not sure yet whether that nail is going to fall off or not. A dull, throbbing pain continues, but it’s bearable. My impatience cost me, but I’ve learned my lesson. It was my fault, but I won’t make that mistake again.

http://www.youtube.com/watch?v=HE4FJL2IDEs

Internet Explorer 5, 5.5, and 6 all support XMLHttpRequest by means of an ActiveXObject. But there are various versions of MSXML, and it was not clear to me which versions should be used, and in which order they should be declared. Microsoft recommended some versions, but their recommendation was 3 years old and I wasn’t sure if it was still applicable (or applicable at all when using MSXML for creating XMLHTTP objects). It turns out that it was.

Initially I wanted to support the widest range of browsers, including IE5 and IE5.5. However, those versions of IE are no longer supported by Microsoft, so why should I try and support them? I have no way to test in those versions. More research suggested that IE5 and IE5.5 account for only about .02% of browser market share (2 people out of 10,000) from August 2009 - October 2009. It doesn’t make sense to try and support IE5.x, which means there is no need to support the legacy Microsoft.XMLHTTP ActiveXObject.

That just leaves IE6. IE6 still has considerable market share, so I do want to support it. IE6 shipped with MSXML 3.0, which is the “fallback” version to use recommended by Microsoft. Previous versions of MSXML are no longer supported by Microsoft, so MSXML 3.0 will be my fallback version. The recommended version is MSXML 6.0 (note, it is NOT recommended to use MSXML 5.0 or MSXML 4.0).

So now I’m going to be working with a set of 3 possible objects:

1. a native XMLHttpRequest object
2. an MSXML 6.0 XMLHTTP ActiveXObject (IE6 only)
3. an MSXML 3.0 XMLHTTP ActiveXObject (IE6 only, when MSXML 6.0 not available)

To see how I decided to format that code, visit:
http://www.webmasterworld.com/javascript/4027629.htm

My suggestion was to create a web service that would take a car make and return a list of models. He could interact with this service via an AJAX call, parse the results, and populate the list box with the results. Alternatively, his server side processing could determine if a make had been selected, and if so call the service to get the list and populate the list box that way.

I started by creating a basic HTML form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style type="text/css">
select {
    width: 15em;
}
<title>Untitled</title>
<body>




    <?php
    echo $makeOptionList;
    ?>
    

    


    <?php
    echo $modelsOptionList;
    ?>
    




</body>
</html>

I used placeholders where the list options will be.

Next, I created the web service at . Here’s what that service looks like:

<?php
// This example returns just a simple comma separated list.
// A real world example would probably look up values from a
// database and might return a JSON or XML string with the
// results. This is just a proof of concept.
if (!isset($_GET['make'])) {
    // Exit nicely
    exit(0);
}
$make = $_GET['make'];
switch ($make) {
    case 'Ford':
        echo 'Focus,Explorer';
        break;
    case 'Nissan':
        echo 'Sentra';
        break;
    case 'Toyota':
        echo 'Prius,Tundra';
        break;
    default:
        echo '';
        break;
}
exit(0);
?>

Next I needed to create the PHP behind my form page. This PHP populates the vehicle makes and if the user has selected a make and clicked the “Get Models” button, will also populate the models by making a curl request to the web service.

<?php
// The 'makes' list might be populated from a database
$makes = array('Ford', 'Nissan', 'Toyota');
// 'models'
$models = array();
// 'selectedMake' The make selected by the user (if any)
$selectedMake = '';

// Check whether the make has been submitted
if (array_key_exists('getmodels', $_GET)) {
    if ( isset($_GET['make']) ) {
        $selectedMake = $_GET['make'];
        // Request model values for the selected
        $ch = curl_init("http://www.fotiweb.com/samples/dependent-list-box/getModels/?make=$selectedMake");
        // Return the transfer as a string
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        // $output contains the output string
        $models = curl_exec($ch);
        // Close the curl resource
        curl_close($ch);
        // Convert results to array
        $models = explode(',', $models);
    }
}

// Format variables for HTML output
$makeOptionList = '';
$modelsOptionList = '';

// Generate the options list of makes
foreach ($makes as $make) {
    $makeOptionList .= "<option value='$make'";
    if ($selectedMake == $make) {
        $makeOptionList .= " selected='selected'";
    }
    $makeOptionList .= ">$make</option>";
}

// Generate the options list of models
if (count($models) > 0) {
    foreach ($models as $model) {
        $modelsOptionList .= "<option value='$model'>$model</option>";
    }
}
else {
    $modelsOptionList = '<option value="">Select a Make</option>';
}
?>

So now the page is functioning for all users that don’t have JavaScript. When the page loads, the makes will be populated. If the user clicks on the “Get Models” button, the selected make will be submitted back to the PHP above, which in turn will populate the models and show the form again, but this time with the populated results.

All that’s left is to use Progressive Enhancement to provide an AJAX alternative to the post back to the server. An AJAX solution will be more responsive, as the entire page doesn’t need to be reloaded. Here’s the JavaScript code. Note, I’m using the Yahoo UI Library for it’s DOM manipulation, Event handling utility, Element manipulation, and Connection Manager for it’s simplified AJAX interface.

And then my own script:

var make = new YAHOO.util.Element('make'),
    submitbtn = new YAHOO.util.Element('getmodels'),
    models = new YAHOO.util.Element('models');

// Remove the submit button
submitbtn.setStyle('display','none');

// Attach event listeners to 'make' that will call getModels
// service, parse the results, and populate 'models' options
make.on('click', function (e) {
    YAHOO.util.Connect.setForm('getMakeModel');
    var transaction = YAHOO.util.Connect.asyncRequest('GET',
            'http://www.fotiweb.com/samples/dependent-list-box/getModels/', {
                success: function(o) {
                    var i, op, old,
                        modelList = o.responseText;
                    // Remove the existing option elements
                    old = models.getElementsByTagName('option');
                    while (old.length > 0) {
                        old[old.length - 1].parentNode.removeChild(old[old.length - 1]);
                    }
                    // Convert results to array
                    modelList = modelList.split(",");
                    // Generate the options list of models
                    for (i = 0; i < modelList.length; i++) {
                        op = document.createElement('option');
                        op.text = modelList[i];
                        op.value = modelList[i];
                        models.appendChild(op);
                    }
                }
    }, null);
});

This will hide the submit button and perform the request to the getModels service when the user selects a make. This is just one way you could use Progressive Enhancement to enhance your dependent lists.