A sanitized form of our paper has been published in the Fall 2009 issue of the Dartmouth Undergraduate Journal of Science, and you can read it online here. For ease of reading, I have also posted it in the original PDF format, formatted by LaTeX.

My team of myself and two other students, created this program, of which screenshots are included here. It supports posting text, images, and audio to a server, that the program captures. It allows you to draw with the stylus on the screen on a captured image or the canvas. The program displays these posts which are close to the location you are viewing, which is determined by the internal GPS or by you panning on the map. Map images are provided in 3 styles - map, satellite imagery, and a hybrid.

Graffiti Map View

Graffiti Sat View

Graffiti Posting Screen

I am continuing to work on improved stability and features.

For now, I use a DND search plugin for Firefox (should also work in IE, etc). This has the full functionality and I suggest installing it if you are a Dartmouth user. You can my implementation here.

The first invaluable resource is CanooNet, an online grammar guide and inflection dictionary. I use Canoo every time I am using a verb in a strange setting, or need to double-check my inflection of it. The website is canoo.net, however I have also created a Mozilla Search Plugin (also should work on IE), that allows you to quickly search for a verb without going to the page. This plugin directs you to the inflection of the verb. If you have not entered a verb, or there is confusion, it will take you to a listing page to select what you actually want to look for. To install this plugin, go here.

The second also invaluable resource is LEO, an online dictionary. You can access it at dict.leo.org. To make the most out of this dictionary, it is important to click on the word you think is the correct entry, which automatically searches for that word and you can make sure it is the right thing for the context you are looking for. Also, a useful icon appears next to the search results, which you can mouse over. This displays a pronunciation sound-byte, a link to the CanooNet entry, and a link to the full dictionary entry. To learn more about search features on LEO, click here. To get a Firefox/IE search bar plugin for LEO, go here.

2) Download the MooTools script, and upload it to your server. Then, include it in the HTML document you are working with using:

<script src="mootools-1.2-core-nc.js" type="text/javascript"></script>

3) Put the following JavaScript into your HTML page. This can go in the head, but does not have to. However, it should be above the first collapsing box in your code.

<script type="text/javascript">
  function toggle(id) {
    var el = $(id);
    var icon = $(id+'_icon');
    if (el.getStyle('display') == 'none') {
      el.setStyle('display', 'block');
      icon.set({'src':'images/icon_remove.png', 'alt':'[-]'});
    } else {
      el.setStyle('display', 'none');
      icon.set({'src':'images/icon_add.png', 'alt':'[+]'});
    }
  }
</script>

4) Then, each time you wish to put a collapsing box in, use the following code. I have marked the values you need to change. You must change ‘ID_NAME’ in three places. Within the code for each box, these 3 places should have the exact same value inserted where I have written ‘ID_NAME’. However, if you use more than one box on a page, you cannot use the same value for ID_NAME the next time.

<div onclick="toggle('ID_NAME'); return false;" 
       style="border: 1px ridge gray; padding: 2px; background: silver;" 
       alt="[+]" id="ID_NAME_icon" class="icon_inline" align="texttop"> 
           TITLE OF DROPDOWN BOX
</div>
<div id="ID_NAME" style="display: none">
   Content of the div goes here.
</div>

5) The finished result:

Web Development

Firebug

This extension allows you to view a console, inspect and edit your HTML code, modify your CSS or client-side scripts, view the DOM, or track your network requests. It doesn’t just do these things, but it does them elegantly in a simple window at the bottom of your browser. Browsing for HTML elements is easily done by enabling “inspect” and mousing over the element on the page itself. HTML and CSS changes take effect immediately, so it is invaluable for fine-tuning your graphical page presentation. The console will display errors, and let you run JS code or functions live on your page. This is helpful for debugging any JS controls on the fly. Furthermore, it is invaluable for debugging Ajax. Any Ajax requests are shown in the console, and can be expanded to show many statistics, including the POST or GET data sent and the response.

This extension has more and more features and uses that I keep on discovering every day. Explore it. Because I can’t go into enough detail here to pay tribute to its features.

Web Developer

This toolbar add-on provides a slim toolbar at the top of your browser, but it is packed with menus offering countless helpful features. Some of these can seem random, and some are available through other sources, but most are great features - even if you don’t use them too often. I suggest modifying your main toolbar to add the “Web Developer” button which allows you to quickly show or hide this toolbar as needed.

The toolbar can allow you to easily disable scripts to see how your page will degrade, wipe out your cookies easily, and many things like that to allow you to see how your page may act in other browsers. For those looking for automated compatibility testing, its “Tools” menu allows you to run many automated validation tests by submitting your page to online web services (it even lets you validate local pages).

One of my often used tools is the ruler, which helps me get pixel measurements to design on. It can replace images with their alt tags, or display - overlayed on your page - tons of details such as element Ids and class names. You can also ask it to outline tables, block level elements, and more. These are very helpful when debugging your page layout, or just to understand how another webpage has been layed out.

General Use

Speed Dial

There are so many ways to get where you go on the web. This extension may be great, depending on your personal preferences. I won’t try to recommend it outright to everyone. I will say, however, that it is great  if you have about 9 websites you frequent, and want to be able to access them quickly when you launch your browser. Some other people may prefer opening their browser to a portal like iGoogle if they prefer to see news, weather, etc. on browser launch. You can even get the best of both worlds, and set your homepage to something like iGoogle and have Speed Dial load in new tabs and windows.

Speed Dial is an extension for Firefox that is based off of the Opera feature Speed Dial. It has a grid layout, with buttons that you can fill easily with webpages. It automatically samples the webpage to produce a thumbnail, or lets you specify an image to use. I use it with 9 buttons, and can press [Control] + 0-9 to go to what I want without even clicking.

You may also  want to check out Fast Dial which has much the same functionality, and appears to be a bit sleeker.

del.icio.us Plugin

Although the new Firefox 3 is helping me to not have to save bookmarks, thanks to the Awesome Bar, it is still good to be able to save my bookmarks, tag and categorize them, and be able to find them from any computer, at any time. Plus, I include my recent bookmarks via RSS feed on this site - as you may have noticed. The free social bookmarking service, del.icio.us helps with all of this.

However, it has always been an extra step to add a bookmark, even with the browser buttons that would bring you to the right page. Now, with this extension, I can click the special tag button to get an application dialog to input all my information. I could also use the “star” icon in the URL bar to tag it as well.

Now, all my bookmarks can be accesed from online or any computer I have the extension on. There seems to be imperfect real-time syncing between toolbar on multiple computers, but a quick click of the “Sync Now” button in preferences cleans that up.

Screenshot credit to the developers of the respective add-ons.

Please look around this site, and I hope you enjoy.

After this system was in operation for six months or so, I had seen many improvements I wanted to make to it, and at the same time realized to make this a great professional product in a short period of time, I needed another developer to work with me. One day, I began coding the new version which is called DebateNet with Mark Bao as my co-developer. We built the current version which has had many revisions, and are marketing it under the company DebateWare.com.

The product has been licensed to a few debate organizations, and we have modified it to the specific needs of organizations.

You can visit DebateWare.com, however the installations are closed to the public and available for members of the licensing organizations only. For this reason, I am including screen shots here.

The Tetris game was based on some board libraries given to us as part of the assignment. The major tasks included creating pieces, stopping pieces from continually dropping when they hit the board or would go off the screen, making sure left and right moves and rotations would keep the piece entirely on the screen, and deciding when the game is over. In addition, we added on optional components of a pause button, a game over screen, and scoring.

I am including here some snippits of the code from the assignment as I found creating Tetris in Haskell required some tricky things.

This code sample split down a defined “Region” into defined “Shapes” and then allowed coordinates to be taken from these for use in calculations. The code is limited to dealing with Rectangles and Polygons, and it eliminates duplicate coordinates to speed up later calculations.

Using this code, testing for collisions and piece movements was simplified:

Finally, the Maybe monad - which at first using Haskell seemed like an unneeded alternative for if-then statements - was used many times in this program. Using if-thens may have worked in some places, but the case of and pattern matching allowed by the Maybe type was very helpful. Here is one example, taken from a function which was waiting for a specific keypress to continue:

                       case e of Just (Key 'q' True) -> closeWindow (win uw)
                                 Just (Key 'r' True) -> do closeWindow (win uw)
                                                           main
                                 _                   -> waitForAction uw