Category Archives: Web Apps

Posts about web apps I’ve created or am working on.

Development Thoughts, General News, Web Apps

Notes on Offline Web Storage for TAAG

1 Comment

After you’ve visited it at least once, the Text to ASCII Art Generator (TAAG) will now work even when you don’t have an internet connection. I had a user request this, so I figured I’d add it in for them and anyone else out there who may want to use the app offline.

Offline web applications are one of the new capabilities being introduced with HTML5. An offline web application has its files downloaded and permanently installed in a web browser’s application cache. This allows users to go to an app’s URL and have it work even when they aren’t online. It’s a smart idea, but it has some interesting pros and cons. In this entry I’ll detail what I did to set TAAG up to work offline, detail some issues I ran into, and provide some notes for anyone looking create an offline app.

The first step in creating an offline web application is to create a manifest file which tells the browser which files it should store in its application cache, which files should try getting from the network, and if offline, which files it should use in place of certain standard files. Any HTML files that reference this manifest will be implicitly added to the CACHE section of the manifest and after a user’s first visit, all cached data will come from the application cache, even if a user F5’s the page. The application cache is only ever updated when the manifest file is updated, and even then, it will take 2 visits for a user to see any updates. This is because when a user visits the app’s URL, the application will be read from the cache, it will then see the manifest has been updated, and it will then update the application cache for the user’s next visit. These idiosyncrasies are a bit to take in, but once you know what’s going on its not that bad. Here’s what a sample manifest file would look like:

CACHE MANIFEST
# This is a comment.
# The cache is only ever refreshed when changed.
# Last updated: 2012.08.18

# The CACHE section indicates what we want cached.
# The HTML file linking to this manifest to auto-added to this list.
CACHE:
one.jpg
two.jpg
jquery.js?12345

# The NETWORK section indicates which non-cached files should be 
# obtained from the network. This will almost always be "*".
NETWORK:
*

# The fallback section allows us to setup "fallback" pages to use 
# when offline.
FALLBACK:
page2.htm page2-is-offline.htm

An HTML file linking to this manifest might look like this:

<html manifest="my.appcache">
<head><title>Test</title><meta charset="utf-8"></head>
<body>
<div>Some text</div>
<img src="one.jpg"/>
<img src="two.jpg"/>
<script src="jquery.js?12345"></script>
</body>
</html>

And one last gotcha – to keep the manifest file from being cached by the browser, and to ensure the manifest is served with the correct mime type (an incorrect mime type will keep the manifest from being recognized), we need to update the web server’s configuration. For Apache, we’d add the following rules to our .htaccess file:

AddType text/cache-manifest .appcache

<Files *.appcache>
    ExpiresActive On
    ExpiresDefault "access"
</Files>

That should do it! With this technique your users will now be able to use your apps even when they don’t have an internet connection. I find this cool because it makes web apps more useful and puts them a step closer to supplanting Desktop apps. However, there are unfortunately a number of issues that have held offline web apps back, and they’re worth mentioning.

Issues with application caching

A lot of people aren’t happy with how application caching currently works. The W3C has set up a working group that’s discussing possible improvements, though hopefully the main components of the current spec will continue to work. However, I also feel like they need to make some changes too. Below I’ll list my biggest concerns.

  • How would users know that certain URLs still work when they’re offline?

    I don’t understand how this isn’t the most important issue for offline applications. Without someone manually telling you that you can use a particular application while offline, I don’t see how someone would think they could browse to example.com/webapp and expect it to work when they didn’t have an internet connection. In their current form, I only see offline applications as useful to techies or people in the know.

    It’d be nice if offline applications could provide an icon, name, and description, and then browsers could show users which offline applications they had installed. It could be argued that this is a browser feature, but bookmarks are a browser feature too, and all browsers allow webpages to provide a favicon for bookmarking purposes. Whatever the case, there should be a way to let users know certain web pages/apps work offline.

    I’ve only seen this discussed once, and the people involved didn’t come to any conclusions, so I’m not too hopeful on this one. However, I think it’s probably the most important point, since no users = no usage.

    2012.09.01 Edit: Someone alerted me that there is a Widgets spec that’s currently in the works that supposed to solve this issue. I haven’t taken a good look through it yet, but it’s good to know there are attempts to solve this problem currently in the works.

  • Fresh updates aren’t served immediately / F5 doesn’t break the cache / the page that links to the manifest has to be cached.

    This seems to be the most popular feature request, though after reading spec author Hixie’s take on the issue, I sort of agree that many of the use-cases for using the application cache in this way are very similar to straight up HTTP caching. Though it would be nice if an app used the HTTP cache while online and this cache synced with the application cache, which would then be used when a user was offline.

    Around two months ago, a new feature was added to spec in an attempt to address this. It takes the form of a new setting that gets added to the manifest:

    SETTINGS:
prefer-online

    It’s explained here, though there’s some debate on if its the right solution, and I was unable to get it to work in Chrome or the nightly FireFox build, so I’m not sure how it works or if it actually solves the problem.

Other Notes

  • Chrome was easier to work with than FireFox

    Chrome will print to the console as its loading the application into the cache, so you know instantly if there’s a problem or not. FireFox didn’t do this and that made it a bit more annoying to work with.

  • Listing installed applications

    • For Chrome, browse to the URL “chrome://appcache-internals/”
    • For FireFox, in the menu, go to: “Tools>Options>Advanced>Network” and see the section on “Offline Web Content and User Data”.

  • In the manifest, URLs need to be URL encoded and query strings needed to be included

    Kind of obvious, but worth mentioning.

  • The popular iframe trick doesn’t work in FireFox

    There is a popular trick that aims to allow an HTML page to use the application cache while not being cached itself. It attempts this by having the page include an iframe with an HTML tag that links to the manifest. From my own tests, this trick works in Chrome but not in FireFox.

    2012.09.10 Update: After updating to FireFox 15, it seems to work now.

  • JavaScript API

    I didn’t go into it here, but there’s also a JavaScript API for the application cache. See the “Additional Resources” section below for more information.

  • What would happen if every website wanted to work offline?

    The space on a user’s computer is finite. I’m not sure how offline storage will work if offline apps end up becoming very popular in the future. Maybe the solution is to focus on installable apps which have the option of working offline – and users can pick and choose what they want installed?

Additional Resources

Web Apps

Showdown Reboot

Comparing only Facebook-related data wasn’t that much fun, so I decided to soup-up the Social Media Showdown!* app to take into account sharing information from Google+, Pinterest, Twitter, StumbleUpon, Delicious, Digg, and LinkedIn. It’s now a lot more entertaining to see which side gets which trophies:

Thankfully all of the services mentioned have public APIs which make getting the share data a piece of cake. This handy Share Counts page details how to do it for all of the major APIs.

The only service I didn’t use the API for was Google+, and that’s because I sadly didn’t find that API page until I was about half done the reboot. Until recently, there was no way to read the number of +1’s a site had gotten, so clever people had found ways to parse that information out of the source code. I took this approach, but will go back and do it the more correct way later on.

Other than pitting sites against each other, this kind of data can be useful for creating your own share buttons or tracking the popularity of a website. It could also probably be used to answer some interesting questions – Are G+ users really more technical, or do they like cat pictures just as much as Facebook users? Are the different services used to share different kinds of information, or are they strict competitors? Does popularity on a particular service correlate with anything? Though for now I don’t see myself doing much else with these APIs.

The only other major change to the app was that I removed my custom built JavaScript library and replaced it with jQuery. For personal projects, I’ve tried to only use JS libraries for GUI components, since I was worried I’d be missing something if I relied too much on a library. However, I now feel pretty comfortable with the guts of JavaScript and the DOM, so writing my own utility functions seems a bit silly.

Over time I think jQuery has won out as my favorite all purpose library. Initially YUI blew me away, and I still think its an awesome library, but I’ve come to dislike the verboseness of its syntax. Anyway, I hope you find the updates to the app entertaining. Let me know if you have any suggestions/feature requests/etc!

* Formally known as “Website Showdown!”. I figured “Social Media Showdown!” made more sense.

Development Thoughts, Web Apps

TAAG Reboot

2 Comments

The HTML Frameset tag is officially obsolete in HTML5. Since their inception, frames have drawn the ire of many web designers, though I’ve always had a soft spot for them. When I first learned how to use the frameset tag back in ’98, I thought it was the coolest thing ever. I was able to do all sorts of trickery with it, like creating an online midi player and storing data between page loads. When I heard people go on about how they sucked, I ultimately knew they were right, but I felt like they were throwing the baby out with the bathwater.

Times have changed though, and as HTML has evolved, the gap framesets filled has been replaced by better technologies. Knowing their fate was sealed, I decided to overhaul the one app I had here that was still using them – the Text to ASCII Art Generator (TAAG)*. The new version was written from scratch, but with the aim to keep the same look-and-feel. This time around I also wanted to implement the full FIGfont spec, which surprisingly has a lot to it.

The main part of the spec that I didn’t implement last time was the vertical layout rules. These rules allow font authors to “smush” letters together vertically. Below you can see an example done in the “Standard” font.

  _____ _   _ _   _ 
 |  ___| | | | \ | |
 | |_  | | | |  \| |
 |  _| | |_| | |\  |
 |_/ _|_\___/|_|_\_|
  | |_| | | | '_ \  
  |  _| |_| | | | | 
  |_|  \__,_|_| |_|

This can be fun to play around with, but it’s not always what you want. Therefore, I decided to also allow users to control which horizontal and vertical layouts they wanted a font to use. Exploring what layout looks best is actually kind of fun.

The other main part of the spec I left out last time was the loading of non-standard letters. Most fonts don’t implement characters outside the normal ASCII range, but the FIGlet spec allows authors to define whatever unicode character they want, and some fonts implement quite a few extra characters. For fun, I went ahead and added unicode character #3232 to a few of the fonts, so that people could make a FIGlet look of disapproval:

   _____)      _____)
  /_ ___/     /_ ___/
  / _ \       / _ \  
 | (_) |     | (_) | 
  \___/ _____ \___/  
       |_____|

I’m probably too easily amused. Anyway, there are quite a few other updates, but if you’re interested you can read about them here.

I’ve also decided to open source the JavaScript FIGlet driver I wrote for this app. There were no other open source full-spec implementations of FIGlet that I could find, so I figured it could be useful. If you’re interested, it can be found here or here.

If you have any suggestions for the app please let me know. Also, I haven’t forgotten about the Keyboard Layout Analyzer, so don’t think this reboot means I wont be adding any more to that.

Oh, and as a final side note, it was interesting to learn that frames can be a drag on the loading of page. The additional HTTP requests should make this obvious, but that combined with whatever else the browser has to do to accommodate them, makes for a non-optimal load time. And interestingly enough, even though the new app has a heavier page weight (190k vs 114k), it loads much, much quicker – though I should say that frames are definitely not the only factor to influencing this.

* It’s former name was “Text Ascii Art Generator”. I noticed some people calling it “Text to ASCII Art Generator” and thought that was a better name.

Web Apps

Keyboard Layout Analzer 2.0

4 Comments

On Sunday I uploaded the new version of the Keyboard Layout Analyzer. It has a plethora of new features and charts, and a new layout design. My goal was to create something that was more useful and easier on the eye.

Several key features are currently missing from the app (saving/loading of layouts, heatmap stats, etc), and I hope to have those finished within the next week or two. I’ll do a second post, when version 2.1 is released, to chronicle those features. I decided to launch the new app before I had finished everything because I was worried my to-do list would get too large, and I’d simply just never finish before moving onto another project (I have quite a few unfinished projects). Work is also about to get a little hectic in two weeks, so I figured it was best to launch while I had some extra time on my hands. Below is a list of what’s new in the app.

  • Resigned layout.
  • Code rewritten from scratch (mostly because I just wanted to start fresh).
  • New configuration keyboard that allows you to set finger placement, finger start positions, and modifier characters for each key. Also supports drag and drop for ease of use.
  • Drop down for loading sample texts (hopefully more to come soon).
  • Bar charts comparing fingers are now available for distance and finger usage. For row usage, a row usage bar chart is presented.
  • Distance traveled is now broken down by finger.
  • Distance, finger usage, and row usage are displayed by a selectable unit type (percent, key strokes, etc).
  • Stats on consecutive finger and hand usage have been added in.
  • An adjustable number of layouts can be compared.
  • New algorithm for determining the best layout.

Many of the new features are user driven. I received around 8 emails, and they were all extremely helpful in guiding the direction the app took – so thank you to everyone who gave feedback (even if I didn’t implement every idea – yet at least). Hopefully in another week or two I’ll do another update chronicling the remaining features.

Lastly, I had a request to keep the original version intact and available, and have decided to make it available here. If you use IE8 or below, you’ll automatically be redirected there anyway.

General News, Web Apps, Web Development

New Keyboard Layout Analyzer (Preview)

1 Comment

You can now try out a preview version of the new Keyboard Layout Analyzer. I completely re-did it from scratch. I know I’ve done that before, but I’ve learned a lot about JavaScript and HTML5 over the past two years and thought the application would be best served with a fresh start. Below you can see a screen capture of the new configuration page.

Configuration Tab

The biggest problem with the previous Analyzer was that it didn’t have the best configuration options. And even then, the top-based tab interface led to a lot of people not even noticing that configuration options existed. My main goal was to make configuration much more intuitive and flexible.

The previous Analyzer also assumed keys to be atomic and wouldn’t let you mix and match characters from different keys. For English keyboards this was mostly fine, but when I started learning about Foreign layouts and specialized layouts like the Programmer Dvorak, I realized I’d made a fatal mistake. The old code centered around atomic keys and even used image icons for the configuration display. For this version, I decided to draw the keyboard on a canvas element and to allow keys to mix and match characters. Theoretically, the new setup could even analyze unusual layouts like the Maltron layout, but I haven’t yet created Keyboard Maps for that layout, nor have done much testing in that area (though it’s a goal).

I also tried to make the app look more visually appealing and to provide a better user experience. The old layout was kind of amateurish looking, a number of people didn’t utilize the top-based tabbed interface, and the amount of scrolling you had to do on the output page made it easy to miss interesting information – not to mention that I was using pie charts, which are notoriously bad at presenting this type of information (I had a decent number of people email me asking me to switch to bar charts). I tried my best at making something that was reasonably ok looking, and I hope the new side-tabs making navigating the information easier.

I’ve recently taken on a lot at work, so that has slowed me down quite a bit, but I hope to finish off the rest of the output sections in the coming month. If you find any bugs or have any suggestions please let me know!

Random Thoughts, Web Apps, Web Development

Is ___ more of a boy’s name, or a girl’s name?

2 Comments
Photo By Zach Klein

So my boss came into my office on Friday and off handily asked me if “Stacy” was more of a boy’s name, or more of a girl’s name. I immediately thought “piece of cake!” and brought up my Baby Naming Trends Tool, only to be really confused that there was no feature for determining this. “Wait, I remember programming this feature last Fall, where is it?” I thought. Then I remembered I had waited to push the update out until I finished a couple of other features (which remain unfinished). D’oh!

Since male vs female feature was kind of fun, I decided cut out the unfinished functionality (for now), and push out the update so users could query the data. Now you can see if names are more popular for girls or for guys. Just place a “m:” or “f:” before a name when you enter it in. Here are some examples of names commonly given to both boys and girls:

  • Casey – Very close, more male leaning though.
  • Jordan – More male leaning.
  • Mackenzie – More female leaning.
  • Pat – A nick name, but popular with female babies in the 30’s and 40’s (though it’s almost no longer used). Patrick and Patti are more popular.
  • Quinn – More female leaning.
  • Riley – More males, but trending towards more females.
  • Stacy – More female leaning.
  • Taylor – More female leaning.

However, when creating this feature, I noticed some interesting abnormalities. No popular names seemed to be 100% male or female, even names that were obviously male or female. For example, according to the data, 11 females were named John in 2010, and during its peak popularity, when 80,000 males a year were being named John, the data says 200-300 females a year were being named John. Even though that means only ~0.375% of John’s were female, it still seems bizarre that someone would name a baby girl “John”. I wondered if this was a mistake on my part, but the underlying data showed the numbers to be correct.

The idea that someone would give a baby girl or boy a name of the opposite sex isn’t too far fetched, I know a few guys with names more commonly associated with girls, but are there really hundreds of guys named Jennifer walking around in the US? I accept that there may be a hand full, but my guess for the real reason this anomaly appears is because nurses or doctors sometimes make mistakes when recording the data. That makes me a little sad, but I suppose any data that’s hand recorded is going to have some errors. Though if this is the case, since this data comes from the US Social Security website, does this mean that these people may have their sex incorrectly recorded on their birth certificate? Though then again, perhaps people give a name for their baby, but then change it when it’s born and they find out it’s a different sex. Or then again, maybe there are lots of male Jennifers out there. Whatever the case, it makes for an interesting blip in the data.

Keyboard Layout Analyzer Update

I’ve rewritten the Keyboard Layout Analyzer. Back in November I told a guy I was close to being done and would have a new version up in “2 weeks”. I then told two other people in December who asked for additional features that I’d have it up in “2 weeks”. I now feel a little bit like a jack ass, but I honestly have been really busy. My new plan is to simply put up a preview version soon. The new app is mostly done, but rough around the edges in the output department.

JavaScript, Web Apps

Plotting and Analyzing US Baby Naming Data

11 Comments

Photo By mahalie

I’ve created a new tool that allows you to query US baby naming data from the past 130 years and play around with it on an interactive chart. I got the idea after stumbling upon the data at the US Social Security website.

To cut to the chase, below you can see some interesting effects of our culture on naming trends.

  • Star Wars – George Lucas created the names “Anakin” and “Padme”, and he had a big impact on the number of babies given the name “Han”, “Leia” and “Luke”. I didn’t include Luke on the chart because it dwarfed the others so much, but between 1880 and 1977, 18,027 babies were named Luke, between 1977 and now, 176,125 babies were given that name.
  • Hermione – Apparently Hermione is a real name, though the 478 babies given the name since 2000 were probably due to the recent popularity in the Harry Potter series.
  • US Presidents – My friend Ben found this one. Back in the early twentieth century, who got elected president had a big impact on what people named their babies.
  • Reagan and Kennedy – I don’t want to get too political, and I’m just talking out of my ass here, but I wonder if the idealizing of past political heroes (from different sides of the aisle) has led to the recent surge in these names.
  • Ninja Turtles – The Ninja Turtle craze of the late-80’s / early 90’s seems to have caused a small impact on naming trends in that time period.
  • Paris – Paris Hilton’s sex tape leaked onto the internet in 2003 and became a big news story. For some reason this inspired hundreds of people to name their kid after her.
  • Osama – The frequency of people naming their kid “Osama” actually increased after the 1998 embassy bombings, but I’m guessing after 9-11, people realized naming their kid after after the world’s most wanted terrorist was probably not a good idea.
  • Miley – In 2005, 26 babies were born with the name “Miley”. In March of 2006, Hannah Montana debuted with star Miley Cyrus on the Disney Channel. That year the name started to sky rocket in popularity, and peaked in popularity in 2008 when 2,643 babies were given the name.
  • Selena – In 1995, this name shot up in popularity by 400%, with 3,839 babies given the name “Selena”. This was most likely was caused by the 1995 death of latin super star “Selena Quintanilla-Pérez“. Interestingly, Selena Gomez has not had the effect on “Selena” that Miley Cyrus has had with “Miley”.
  • Carson – This name had been slowly increasing in popularity, but it started to skyrocket in 1998, which coincidentally was the year MTV debuted its mega hit TV show TRL, with host Carson Daily. The name has maintained its popularity, so its probably not all due to Daily, but since TRL was a young person’s show, and not many notable people are named Carson, he probably had some effect in getting the ball rolling.
  • Shirley – Shirley Temple shot to super stardom in 1934 with Bright Eyes, and so did the use of her name for new borns.
  • Britney – Britney Spears dropped “…Baby One More Time” in 1999 and had a big impact on the “Britney” (interestingly, the version spelled “Brittany” stayed in steep decline during this time period).

These were all found by just trying out different names and looking at the time period for when the names peaked or dropped in popularity.

Chart Library and Modifications

For those of you who are curious, I used Martin Kleppmann’s PlotKit repo as a starting place for the chart (that repo is a heavily modified version of Plotkit with lots of new features and fixes). I then modified it to add in some additional features and minor bug fixes, including the mouse interaction stuff. I’ll probably submit my changes back to him at some point, though right now I feel like I kind of hacked stuff into it, so I’ll probably wait until I polish it up and the changes are field tested more. If you have any trouble with the chart please let me know.

The mouse interaction stuff was done by creating a separate canvas element and having it overlay the chart. The dynamic dots you see are then drawn on this canvas. This is done because re-drawing the whole chart is time consuming. The one exception to this is IE7 (and possibly IE8), for which I couldn’t get the overlay to work. So for those browsers, the whole chart re-drawn when it changes. So you’ll notice if you use IE7 that mouse interaction isn’t smooth, while if you use Chrome, FireFox, or IE9, things should be pretty smooth.

JavaScript, Web Apps, Web Development

Extendible BBCode Parser in JavaScript

45 Comments

Photo By Dean Terry

I decided to try my hand at implementing a BBCode parser in JavaScript. You can play around with it online here, and download the source here.

I had looked around a little bit and noticed that the existing JavaScript BBCode parsers had at least a few of the following issues:

  • They didn’t report errors on misaligned tags (e.g., [b][u]test[/b][/u]).
  • They couldn’t handle tags of the same type that were nested within each other (e.g., [color=red]red[color=blue]blue[/color]red again[/color]). This happens because their regex will look for the first closing tag it can find.
  • They couldn’t handle BBCode’s list format (e.g., [list][*]item 1[*]item 2[/list]).
  • They didn’t report errors on incorrect parent-child relationships (e.g., [list][td]item 1?[/td][/list]).
  • They weren’t easily extendible.

I naively thought it’d be easy to quickly whip up a parser, and at first it was. Most BBCode tags can be implemented with a simple find and replace. However, I quickly ran into the issues of dealing with nested tags of the same type, the noparse tag, and the list tag’s annoying [*] tag (which doesn’t have a closing tag). Luckily, I came across a neat blog post on finding nested patterns in JavaScript, which came in handy for isolating tag pairs, from the inner-most on up. Taking the idea from that post, one can do something like this to process the inner tags first and avoid the nested tag problem:

var str = "[list][list]test[/list][/list]",
    re = /\[([^\]]*?)\](.*?)\[\/\1\]/gi;
while (str !== (str = str.replace(re, function(strMatch, subM1, subM2) {
    return "" + subM2 + "";
})));
// str = "test"

That idea works well, though you can’t implement a noparse tag if you process the inner-most tags first. So I decided to pre-process the BBCode with something similar to the idea above and add in nested-depth information to each open and close tag. Once all of the tags had that, I could parse the processed code with a regex that could easily match-up the correct open and close tags.

To get around the issue of the [*] tag having no closing tag, I wrote code that inserted [/*] tags where they were supposed to go during the pre-processing period. I wont go into the algorithm here, but you can dig into the code if you’re interested.

Also, I should note that the fact that JavaScript allows you to use a function as the second parameter to the replace method makes processing the tags really easy. Once you match a set of tags, you can recursively call the parse function on that tag’s contents from inside of the function you passed to replace.

Using the parser

To use the use the parser, you’d simply include xbbcode.js and xbbcode.css files somewhere on your page (which are contained in the zip file linked above), and then call the XBBCODE object from somewhere in your JavaScript:

var result = XBBCODE.process({
    text: "Some bbcode to process here",
    removeMisalignedTags: false,
    addInLineBreaks: false
});
console.log("Errors: " + result.error);
console.dir(result.errorQueue);
console.log(result.html);// the HTML form of your BBCode

Adding new tags

To add a new tag to your BBCode, add properties to the “tags” object inside of the XBBCODE object. For example, say you wanted to add a tag called [googleit] which would change its contents into a link of its google search results. You’d implement that by adding this to the tags object:

"googleit": {
    openTag: function(params,content) {
        var website = "\"http://www.google.com/#q=" + content + '"';
        return '<a href=' + website + '>';
    },
    closeTag: function(params,content) {
        return '</a>';
    }
}

Then you could have BBCode like this: “[googleit]ta-da![/googleit]” which would be transformed into this: “<a href=”http://www.google.com/#q=ta-da!”>ta-da!</a>”

If you have any suggestions or find any bugs let me know.

Web Apps

Programming Trivia App

2 Comments

Photo By Mirko Junge
This has been on my computer for months and while it’s not completely finished, I wanted get a version up since I’m starting work on it again, so I present Programming Trivia Questions.

It’s born out of the basic idea I had for my old Programming Quiz App, which I released last year. Shortly after creating that app I realized that creating a list of good quiz questions was actually kind of hard, and expecting someone to write a full, non-goofy quiz was probably too much. However, coming up with a question or two is usually pretty easy. So I figured I’d change the app to be like a question database where questions were tagged with certain keywords, and the user could just select categories and get questions on those categories.

I’m not at that point yet, but I have a working demo with 20 questions. The next step will be to connect it up to a database (right now it’s all client side) and then to allow users to submit questions. Anyway, I figured 20 random programming-themed questions would be mildly entertaining so I figured I’d share it with you all. If you have any suggestions let me know.

Oh, one last note, my favorite JS graphing library, Plotkit, doesn’t seem like its being updated anymore (it’s a fantastic library, but the last update was in 2006). I made some modifications to it for this app (I changed how the colorscheme mechanism worked for bar charts if just one dataset was used) and am debating forking that library or using another one. If anyone has any graphing library suggestions let me know.

Web Apps

AAC Police Brief Analyzer

Photo By dooq

I’ve created a new Facebook app which I call Anne Arundel County Police Brief Analyzer. I noticed my local police department had a Facebook page and that they posted their police briefs to this page. The briefs all followed the same format, so I decided to see if I could parse them to grab out some statistics.

The app is pretty simple, and right now all its doing is counting the number of times the various cities in the county are mentioned in the briefing sub-headings. Basically it answers the question: “Which cities show up in the police briefs the most?” This app would probably be more helpful with population data, however, it was mostly just done as an experiment, so I probably wont go any further with it. However, I figured I’d post it up since I found it kind of interesting.

The only hitch to creating the app was that you can only grab the 25 notes from Facebook per request, at least with their JavaScript SDK. To grab more notes, you have change the “offset” parameter (also see batch requests). Example:

FB.api("/aacopd/notes", {offset: 175, limit:25}, function(response) {
    console.dir(response.data);
});

patrickgillespie.com Update

I’ve updated the cloud code at patrickgillespie.com to now use a canvas element in browsers that support it. This leads to a much smoother appearance in Chrome and a slightly better appearance in FireFox. I tried using excanvas for the IE version, but it was too choppy for what I was doing, so the IE version still uses divs.