A year or so ago, I had the task to build a “zip code finder”; a tool that allows a user to enter a zip code and a radius, and return all zip codes in that radius.  All of the references I found online were pretty much the exact application I was trying to build, so they didn’t help me that much. I did eventually run across the math that allows you to build the application. Unfortunately, I didn’t save the link to the page. If I ever find it, I’ll be sure to post it. While I initially built this application for US zip codes, I’m sure it’ll work for zip codes outside of the US, since we are mostly concerned with the longitude and latitudes of the zip codes. This is how to build a radius-based zip code finder:

First, you need a zip code database. The database should contain the following fields at minimum: zip code, longitude, and latitude. Let me say that this task alone can be difficult, if you are searching for a free database. Most of the databases available will cost money, mainly because the database data changes every-so often (since US zip codes change every so often). Free databases (mostly in the form of a .CSV file) are out there, but if you want a highly accurate database, it might be worth to pay the money for one.

Update – After looking around for a little bit, I found this file that will work as a nice zip code database. The file comes directly from the US Census, so it should be pretty accurate. You can also check this SourceForge project for a nice zip code database.

Now comes the math and the process of determining the longitudes and latitudes in the radius. Since I’m not a math expert, I’ll do my best to explain what each number or formula is. For the formulas, I’ll show the PHP code (I actually created the PHP code by converting the original .NET code I wrote.)

Step 1
Find the longitude and latitude for the zip code using the database. This is your center point for your radius. If you can’t find the zip code in the database, then the zip code is incorrect or you have an outdated database.

Step 2
Convert the longitude, latitude, and radius distance (in miles) to radians using these formulas:

1
2
3
4

// Convert the coordinates and distance to radians
$dLatInRads = $latitude * (M_PI / 180);
$dLongInRads = $longitude * (M_PI / 180);
$dDistInRad = $distanceRadius / EARTH_RADIUS_IN_MILES;

EARTH_RADIUS_IN_MILES is a constant set to 3956. M_PI is a PHP constant.

Step 3
Honestly, I don’t remember what this number is for. In my code, it’s called “lat”. It uses this formula:

1

$lat = asin(sin($dLatInRads) * cos($dDistInRad));

Step 4
Find the top and bottom lines of the bounding box using this formula:

1
2
3
4
5
6
7

// Find the top line
$topLine = $dLatInRads + $dDistInRad;
$topLine *= (180 / M_PI);
 
// Find the bottom line
$bottomLine = $dLatInRads - $dDistInRad;
$bottomLine *= (180 / M_PI);

Step 5
Find the right and left lines of the bounding box. For each line, you need to calculate a number called “dlon”. Once again, I don’t remember what this is. Here is the formula:

1
2
3
4
5
6
7
8
9

// Find the right line
$dlon = atan2(sin(M_PI / 2) * sin($dDistInRad) * cos($dLatInRads), cos($dDistInRad) - sin($dLatInRads) * sin($lat));
$rightLine = (fmod(($dLongInRads + $dlon + M_PI), (2 * M_PI))) - M_PI;
$rightLine *= (180 / M_PI);
 
// Find the left line
$dlon = atan2(sin(3 * M_PI / 2) * sin($dDistInRad) * cos($dLatInRads), cos($dDistInRad) - sin($dLatInRads) * sin($lat));
$leftLine = (fmod(($dLongInRads + $dlon + M_PI), (2 * M_PI))) - M_PI;
$leftLine *= (180 / M_PI);

You now have the full bounding box of the zip code radius.

Step 6
Using the database, find all longitudes and latitudes in the bounding box. I use this SQL statement:

1
2
3
4
5
6

SELECT ZipCode, Latitude, Longitude
FROM ZipCodes
WHERE Latitude <= '$bottomLine'
AND Latitude >= '$topLine'
AND Longitude <= '$leftLine'
AND Longitude >= '$rightLine'";

This will return all the zip codes in the bounding box. Note that the bounding box is exactly that… a box. Some of the zip codes you return will be outside of the initial radius. If you want, you can filter out those zip codes in Step 7.

Step 7 (optional)
Filter out the zip codes outside of the radius by simply checking the distance between the center longitude/latitude and the returned zip code longitude/latitude. Use this formula:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Convert all the coordinates to radians
$dStartLatInRad = $startLatitude * (M_PI / 180);
$dStartLongInRad = $startLongitude * (M_PI / 180);
$dEndLatInRad = $endLatitude * (M_PI / 180);
$dEndLongInRad = $endLongitude * (M_PI / 180);
 
// Find the distance between the starting and ending coordinates
$dLatitude = $dEndLatInRad - $dStartLatInRad;
$dLongitude = $dEndLongInRad - $dStartLongInRad;
 
// Intermediate result a
$a = pow(sin($dLatitude / 2) , 2) + cos($dStartLatInRad) * cos($dEndLatInRad) * pow(sin($dLongitude / 2), 2);
 
// Intermediate result c (great circle distance in radians)
$c = 2 * atan2(sqrt($a), sqrt(1 - $a));
 
// Distance
$dDistance = EARTH_RADIUS_IN_MILES * $c;

After you filter out the zip codes, you can return your result set. That’s it!

I originally wrote this article back in October 2006 for my blog. Some of the information is a little old, but it still generally applies to web development.

Earlier this week, the National Federation of the Blind (NFB) filed a lawsuit against Target stating that their website is not accessible to the blind; that Target ‘discriminates against the visually impaired.’ In 2002, a lawsuit was also filed against Southwest Airlines stating that their online reservation system didn’t allow visually impaired customers to easy purchase tickets. Since then, Southwest Airlines has updated their system to make it easier for the blind to navigate their website.

On Wednesday, in my Human-Computer Interaction class, I got to see first hand how the visually impaired interact with websites such as Southwest.com and Target.com. Using a program called JAWS, a popular screen reading program developed by Freedom Scientific, a blind classmate demonstrated how he interacts with these websites. He first demonstrated how easily he navigates through Southwest Airlines’ reservation system, explaining what the JAWS program does and says along the way. Then he demonstrated Target’s online store, and explained why it is hard for him to navigate. You could really tell a difference between the two. But more on that later…

This brings up a good point… that all web developers need to start focusing more on making their websites accessible for the visually impaired. The good thing about this is that it is very easy to make a website accessible. All it takes is some proper planning during the design of the website, adding some attributes within the HTML tags during the development process, and a little more usability testing that focuses on accessibility.

The important thing to remember during development is that most of the time, to create an accessible website, all you need to do is add the ‘alt’ attribute to your ‘img’ tags, which should include a short description about what the image is. The ‘alt’ attribute is also important for people who have images turned off, which decreases page load time; instead of the image, they will see the text that is set in the ‘alt’ attribute.

Now back to the demonstration… If you take a look at the source code for Southwest.com, you can notice some things that allow screen readers to function as they should. First off, there is a very small 1 pixel by 1 pixel link at the top left of the web page. You can actually click on this link (the mouse pointer will change when you hover over it). This link that is an anchor to an area below the top navigation bar called ‘content’. This is called a ’skip navigation’ link, and is very useful if you want to, well, skip the top navigation. Next, all the links in the top navigation bar are images, and all the images have an ‘alt’ attribute. One thing that I noticed is that the ‘alt’ attribute for the ‘Special Offers’ link does not say ‘Special Offers’, but rather ‘Click ‘n Save’.

For the Target website, things change dramatically. Looking at the source code, they’ve done a good job at putting the ‘alt’ attribute in for the image links, but they are all empty! So what does this do to the screen reader? Not a whole lot. If the ‘alt’ attribute is blank/empty, it instead reads where the webpage is linked to. So, for example, instead of saying ‘My Account’, it says:

1

/gp/myaccount/homepage.html/ref=nav2_ma/601-2006065-3512918

And it does this one-after-another for each link. When you listen to it, all you hear is a bunch of letters and numbers in a non-stop stream of useless information.

In an effort to keep websites accessible to the visually impaired, the W3C has Web Content Accessibility Guidelines, which describe what designers and developers should incorporate into their websites. Also, the government has a set of standards called the Section 508. There are also tools for checking to see if your web pages are accessible. These include WebXACT and the WAVE 3.5 Accessibility Tool.

Update: It looks like the data layout for the source pages have changed, and some data in the applications are missing because of this. Instead of updating the tools listed below, I am instead working on a new website for the Ratings Tools. Please be patient while I work on the new site. Thanks!

The USATT Ratings Tools are now back online. I didn’t bother with rewriting all the tools yet because I am still thinking of a better way to gather/present the data. So here are the version one’s of the Ratings Tools:

ph Analysis
This tool provides a breakdown of matches for a player. The analysis was created by Paul Holliger, who was originally compiling the information by hand in a spreadsheet. Players can use the analysis for multiple reasons: scouting opponents, finding opponent/personal weaknesses, tracking player progression, and so on. The tool allows you to specify the start date, end date, highest rating, or lowest rating of the matches to analyze. The analysis will report matches based on ratings group (100 point increments). At the bottom of the report, a full analysis is presented, along with the overall win/loss percentage.

Matchups
This tool displays all matches between two players. This tool is what start the whole Ratings Tools idea. Simply specify two people, a player and an opponent, and view all the matches that they have played against each other, along with the tournament, score, and match result.

Most Matches
This tool displays the opponents that a player has played the most. This tool takes the same idea as Matchups, but shows a list of opponents a player has played, along with the number of wins and losses against the opponent. The list is ordered by opponents the player has played the most.

All Matches
This tool simply lists all the matches a player has played. There is not much more to it than this. The list is order by the most recent tournament.

Top Players
This tool returns the top player in each state. The tool displays the top player in each state that is a current USATT member and the top player in each state overall. It also displays the top U.S. player and top foreign player.

A lot of people ask me “What are your favorite Firefox extensions?” Ok. Actually, they don’t. But if they did, here is what I would say:

Firebug
Firebug is arguably the best extension out for web developers. I use it mainly for inspecting the HTML of pages, viewing CSS styles that are applied to HTML elements, and editing CSS styles and HTML text in real-time. It’s also really helpful for debugging JavaScript, viewing Ajax calls, and inspecting a web page’s DOM.

Web Developer
If Firebug is the not best extension out for web developers, then the Web Developer extension is the best. It has so many useful tools: disable styles, view cookies and session information, the ruler, and so on.

Colorzilla
I have this extension mainly because it allows me to find out colors on a web page without opening Photoshop. Though, I wish it would work with embedded Flash files.

FireFTP
I love the convenience of having an fully-functional FTP client in your browser.

Live HTTP Headers & Tamper Data
Pretty self explanatory. View and modify the HTTP headers of your web pages. Great tool.

del.icio.us Bookmarks
This is a must-have extension for anyone who uses del.icio.us. View your bookmarks in your sidebar. Bookmark a page directly to del.icio.us. Hide your browser’s bookmarks menu. It’s a great complement to del.icio.us.

Foxmarks Bookmark Synchronizer
I started using Foxmarks before I opened my del.icio.us account. Eventhough I removed all my bookmarks saved in my browser since, I still use it to keep my bookmarks toolbar synced up.

Mouse Gestures
I probably use mouse gestures too much. It’s now a habit for me to use a mouse gesture in any browser I work in, only to find out it doesn’t work. Mouse gestures just make things easier.

Download Statusbar
Another convenience extension. All current downloads in the statusbar. Pretty simple.

PDF Download
Once again, another convenience extension, mainly because for a while, I only had the trial version of Adobe CS3, and it wouldn’t let me open PDFs. Plus, a PDF auto-opening in your browser is just annoying.

I recently decided to start developing some applications based on the CakePHP MVC framework on my local machine using WAMP. The CakePHP default installation allows you to create one application for one set of core Cake library files. I wanted to separate my application files from the core Cake library files, so if there are any library updates, I wouldn’t need to mess with the application files. After some quick research, I found that this was pretty easy.

First, the CakePHP documentation provides instructions on an advanced installation of the framework. For my installation within my WAMP stack, I refered to this post over at the CakePHP Google Groups site.

The main file to modify is the ‘[app root]/webroot/index.php’ file. Here is a snippet of how one of my apps is configured:

1
2
3
4
5
6
7
8
9

if (!defined('ROOT')) {
    define('ROOT', 'C:'.DS.'wamp'.DS.'www'.DS.'concepts');
}
if (!defined('APP_DIR')) {
    define('APP_DIR', 'cake_app1');
}
if (!defined('CAKE_CORE_INCLUDE_PATH')) {
    define('CAKE_CORE_INCLUDE_PATH', 'C:'.DS.'wamp'.DS.'www'.DS.'concepts'.DS.'cake_core');
}

A couple of days ago I realized that I have inconsistency between all my social networking website account names (the OCD kicked in). I decided to switch all my ‘cjsharp1′ accounts over to a ‘cjsharp’ account name (pitiful, huh). Funny thing is that between all the social networks sites I am involved in, the only one I wanted to switch was my del.icio.us account, which is also the most complicated to switch.

Here is what you have to do to switch del.icio.us accounts. Unfortunately, this will not transfer your network along with it, so if you have a large network, be prepared to handle that accordingly. This also will not transfer your profile settings or your tag bundles.

1. Create your new account through del.icio.us.
2. Log into your old account. Export your old account’s bookmarks (Settings > Bookmarks > Export/Backup). Be sure to include the tags and notes. It will export it to an HTML file.
3. Log out of your old account, then log into your new account.
4. Import the HTML file into your new account (Settings > Bookmarks > Import/Upload). By default, the ‘imported’ tag will be appended to each bookmark. If you don’t want this tag appended, just remove it. (Or you can leave this as it is and delete the tag later). It may take some time for the bookmarks to import. It took about 5-10 minutes for my bookmarks to import. It all depends on the incoming traffic to del.icio.us and the number of bookmarks you are importing.
5. When the import is complete, view your new account’s bookmarks. You will see that all of the imported bookmarks are not shared by default. To make things more complicated, del.icio.us does not offer a ‘share all’ function, due to a couple reason listed in their FAQ. To work around this, I found this option which involves pasting some JavaScript in the address bar of your browser. The quickest way to do this is to view your del.icio.us page showing as many bookmarks at one time (100), paste the JavaScript in the address bar, confirm how many bookmarks will be shared (via a JavaScript pop-up), sit back and relax. A delay is set between the requests in order to prevent del.icio.us from blocking your requests. I set my delay to 4 seconds (delay=4000) with no problems.
6. Finally, once all of your bookmarks are imported and shared, you’ll want to delete your old account. Log out of your new account and log back into your old account, and delete your account (Settings > Account > Delete Account).

I just uploaded the two previous JavaScript-related projects: JS table_to_array and Scroller Lightbox. Nothing has changed from the previous site.

JS table_to_array
A script that takes a well-formed table and converts the data into a multi-dimensional array. The script will maintain all HTML tags within the table’s <td> tags.

Scroller Lightbox
A quick mashup of Thumbnail Scroller and Lightbox JS v2.03.
Update: It appears this is no longer working in some IE browsers. Since this is a mashup of two scripts, both of which are not created by me, I cannot provide support for any cross-browser issues.

Ya. So… every once in a while, I get tired of my old [micro] blogging tool, and decide to switch to another one. Well… that just happened. Gelato CMS was fun for a little while, but it wore off quickly. So I’m back to WordPress.

Where is the rest of the stuff?
It’s all still around. Ratings Tools is going to get overhauled so it is easier to maintain. I might also look into storing data, but we’ll see what comes of that. The various JS Hacks are also still available, and will be posted sometime in the future.

In the meantime, check out my del.icio.us page.