Category Archives: General News

General information about or Patrick.

Adventures in Photography

It’s been a little quiet around here, but I haven’t forgotten about this place.

Around the start of October I started getting into photography. I had received a Nikon 5300 DSLR camera for Christmas last year, but it spent most of the year collecting dust. However, when the Autumn leaves started falling, I realized it was the perfect time to finally learn how to use the thing.

The Contest

Near the end of October I came across a newspaper article that detailed an amateur photography contest that Kinder Farm Park was holding. The park is run by the county and is 288 acres of forested areas, playgrounds, fields, and farm buildings. Upon finishing the article two thoughts were left running through my mind: I hadn’t realized large scale county parks were a thing, and there were only 3 days left until the competition was over – I needed to find this place and take some pictures.

I ended up making it to the park the day before the competition ended and ran around taking photos like a crazy person. Since it was a Thursday evening, I only had about an hour before it got too dark. I liked two of my photos enough to submit them, and to my delight, two weeks after the contest ended I got an email saying I had scored 2nd place in the People category for this pic:

Before I toot my own horn too much, there were only 9 entries in this category, so it’s not that big of a victory. The other 3 categories had 3 times as many entries, and last year there were a lot more entries, so I’m not sure what happened this year. I guess I got kind of lucky. However, I was still pretty thrilled. I even got interviewed by a local paper, which was kind of cool.


I’ve spent the past two months basically learning the in’s and out’s of photography (at the time of the contest I was taking all of my photos in auto mode). I resurrected my Flickr page, and was surprised to see that it was still a pretty cool place. Before coming back to Flickr, I briefly tried out Google+, and it was certainly very nice, but Google+ still seems like a ghost town. My belief is that it tried to be too many things (that’s a whole other topic though).

Anyway, I’m certainly not going to change this place into a photography site, but I think changing gears and learning about something new will help me bring more to the table when I finally do come back with some new content. This site is not going to go dormant though. I’ve also spent part of this past year as a technical reviewer for a new Packt Publishing book, so I’ve got an entry coming out about that, and there are a few other small things I’ve been working on, so I’ve got stuff in the pipe line for this site.

Photo Map

And lastly, after the Kinder Farm Park contest ended they released a gallery of all of the submissions. Since each pic listed the location where it was shot, I thought it might be fun to place them into a Google Maps map. If you’re bored you can check them out below.

Site Note: Some of these placements are guesses or approximations.

Creating a d3.js Game of Thrones Visualization

For any Game of Thrones fans out there, I’ve created a neat little interactive visualization. It ranks characters by how many episodes they’ve been in, makes note of who’s alive and who’s dead, and allows you to go backwards in the show’s history to see how things have developed over time.

It also reveals some interesting stats:

  • After 40 episodes, the show has around ~140 notable characters.
  • The show seems to kill an average of 13 notable characters per season, or 1.325 per episode.
  • 37.1% of the notable characters have been killed off so far.

You can see a spoiler-free version of the visualization below (character avatars and death information has been removed):


The chart is written on top of d3.js, which is a web-based visualization library. I learned how to use it earlier this year and have been on the lookout for projects I could use it for. After seeing the bubble chart from Matthew Daniels’s Largest Vocabulary in Hip Hop visualization and noticing it was based on an example by Amelia Bellamy-Royds, I decided to see if I could create my own bubble chart.

D3 Context Menus

I didn’t see any d3.js context menu plugins while doing this project, so I wrote my own. I could have used a jQuery plugin, but I wanted to keep as much of the code within the D3 way as possible (it just made working within their event structure easier).

Other Game of Thrones Visualizations

So there’s are plenty of other Game of Thrones visualizations out there. If you’re looking for more, I’ve compiled a short list below of some of the best ones I’ve found.

  • Events in the Game of Thrones – A visualization of the events from the first 5 Game of Thrones books.
  • Game of Thrones Map – Interactive map of the Game of Thrones universe.
  • Beautiful Death – A piece of artwork drawn for each episode in the show. I’m not sure if this technically counts as a visualization, but they’re pretty cool.

The Years We Spend on YouTube

I read an interesting fact the other day. It stated that if you added up all of the views of Psy’s Gangnam Style, it would equate to over 13,000 years of human viewing time. I thought it was a pretty trippy concept, and since I’d sort of been looking for a reason to play with YouTube’s API, I thought it might be kind of cool to make a quick app around the idea.

You can see it in action here – Years Spent Watching YouTube.

Let me know if you have any suggestions for example videos.

Keyboard Layout Analyzer 3.0 Beta Release

I’m not completely done, there are still a hand full of new features I want to add, but I have a feeling that if I put off the update any longer, it’s never going to get posted up. So today I’m releasing the newest version of my Keyboard Layout Analyzer (KLA), which I’m dubbing version 3.0, since it’s the 3rd overhaul of the layout.


New features:

  • Analysis results can be shared.
  • Charts are interactive / contain hover effects.
  • There are more “Display” options in the various results sections.
  • You can turn on/off certain keyboard data in the individual results sections.
  • The heatmap uses a more realistic heatmap visualization, has a table of key stats, and I’ve re-added in the mouse over effect (the biggest complaint in my previous version was that I took this out).
  • Miscellaneous section has charts for each piece of data.
  • Layouts you create can be submitted.

The biggest change though is the UI. The main reason I created this version was because I thought it would be a fun project to get better familiar with AngularJS. MV* JavaScript libraries like Angular have taken off recently because they make maintaining, updating and reusing front-end code easier. I felt the code I wrote for version 2.0 of KLA got a little spaghetti-ish at points, so this really appealed to me.

To keep things short, I’ll go ahead and just cut to the chase: Angular lived up to its hype. It was great at giving structure to the app. The new KLA code base feels a lot more sane and the HTML is easy to follow. If you do front-end development, I’d highly recommend you try Angular out. If you need a starting point, has some great tutorial videos and Dan Wahlin has a really nice AngularJS Fundamentals video. And as a side note, even though Angular’s official documentation is good, I wouldn’t start there. I found it to be somewhat cryptic when I first started out. It’s a good reference point after you’ve gotten your feet wet though.

The only negative I came across with Angular was that it had a steep learning curve. I ended up having to back track a few times and re-do sections of the app because I didn’t do them the “Angular way”. Angular forces you re-think how to do certain actions and it uses some strange terminology, but once you get past all of that, it’s a pretty powerful tool.

Removing JK.js

My early days in JavaScript reminded me of an old puzzle game called The 7th Guest. In The 7th Guest, if you had trouble solving one of the puzzles, you could ask for a hint from the library. After getting 3 hints, the puzzle would be solved for you, but you’d miss the video that was shown after completing the puzzle, therefore missing a part of the game’s story. If you missed too many videos, you’d have no idea what was going on.

When I first started learning JavaScript, I kind of felt this way about third party libraries. I didn’t mind using ones that provided UI components, but I felt I’d be missing out on something if I used jQuery. So I wrote my own jQuery-like utility library called JK.js, which I used in my personal projects. However, I no longer feel like I’d be missing out on anything by implementing low level utility functions. What I really care about is writing an app, not a library. So as I’ve been refactoring my projects, I’ve been removing JK.js and replacing it with jQuery.


Bootstrap makes it easy to create nice looking web pages. I decided to use an awesome Bootstrap theme someone created called Flatly, though I tweaked the colors a little bit. I also used an image from as the background to make it feel a little livelier. However, while Flat is cool looking, I worry the result may be a little too flat, so at some point I may backtrack.


The charts in my previous KLA versions used a modified version of PlotKit. PlotKit was a good library, but it hasn’t been maintained in years. On top of that, my modifications to it used my own JS library JK.js, which I wanted to weed out, so I knew I needed a new chart library if I was to redesign this app. I decided upon jqPlot since it was jQuery-based and had a lot of great functionality. So far I’m pretty happy with it.


I came across a neat visualization library for heatmaps, so I decided to use that over the simple key-color heat maps I was creating before. Interestingly, the author of this library also has his own keyboard heatmap app. When I saw this I felt a little weird about using the library – but since the heatmap library was its own separate component, I figured it wouldn’t be too weird if I used it too.

Future Updates

I still a have more features I want to add, ones that will be more stat based, so hopefully there’ll be another update in the next 2 weeks or so. I also may update my Typing Speed Test to use this same type of layout (it’s in dire need of an update). If you have any feature requests let me know. Special thanks go out to Wayne D. for submitting a bunch of awesome ideas and feed back!

Random updates for June

I feel like I work on this site a lot, but hardly ever post anything. Some of that may be due to me starting projects and then never finishing them though :P. Below is a collection of random thoughts and updates related to the site.

Gradient Image Generator

I’ve updated the Gradient Image Generator app and added support for CSS3. This update is in the style of what I was doing in my last post. I was going to do a “part 2” post, but I changed how I was updating apps when I got to the Keyboard Layout Analyzer.

Keyboard Layout Analyzer Overhaul

I’m currently overhauling the Keyboard Layout Analyzer. This was long overdue since the chart library it uses, Plotkit, is long dead (in terms of active development), as is Mochikit, the JS library Plotkit uses. The new front-end will be powered by AngularJS and use jqPlot for its charts. I tried to find a place for xkcd charts, but couldn’t come up with anything that didn’t seem totally out of place. I’ll go into more detail on the new front-end when its finally up, and I’m open to feature suggestions if anyone has any.


I added support for MySQL comments in TAAG. I also removed its offline web app capability. Offline web apps seem to confuse users, and I’ve noticed downloading errors in Chrome while using it on my iMac. This seems to happen randomly and because there are lots of files that need to be cached, and it doesn’t seem to be repeatable. With the appcache API being in disarray, and after running into bugs in Chrome and FireFox, I’ve lost my enthusiasm for this particular web browser feature.


I’ve forsaken my Microsoft roots and purchased a souped-up, 27 inch iMac. I wasn’t a fan of Windows 8, the wires from my PC were making me nuts, and I thought it might be interesting to switch things up. I’ve only had the computer for a few months, but so far I’m pretty impressed. The big screen is amazing, I love being able to use terminals, updating software with brew is nice, and I’m a big fan of the magic mouse. The only downside so far has been that I can’t run Internet Explorer. I’m not sure how Mac users did web development 5 years ago…

Google Authorship

I feel like I’m the last person to know about this, but figured I’d mention it here anyway. Have you noticed people’s faces showing up next to certain search results? Apparently it’s called Google Authorship, and it’ll let you stick your picture next to webpages that you author. It only seems useful for blogs and news articles, but it’s kind of neat.

Spam Comments

When I get a blog comment that I think is spam, I google it to see if its been posted elsewhere. Usually my gut is right, and I see the comment posted on a dozen or so other blogs. Recently though, I came across a spam bot that had messed up and posted this:

{I have|I've} been {surfing|browsing} online more than {three|3|2|4} hours today, yet I never found any interesting article like yours. {It's|It is} pretty worth enough for
me. {In my opinion|Personally|In my view}, if
all {webmasters|site owners|website owners|web owners} and bloggers made good content
as you did, the {internet|net|web} will be {much more|a lot more} useful than ever before.
I {couldn't|could not} {resist|refrain from} commenting. {Very well|Perfectly|Well|Exceptionally well} written!|
{I will|I'll} {right away|immediately} {take hold of|grab|clutch|grasp|seize|snatch}
your {rss|rss feed} as I {can not|can't} {in finding|find|to find} your {email|e-mail} subscription {link|hyperlink} or {newsletter|e-newsletter} service. Do {you have|you've} any?
{Please|Kindly} {allow|permit|let} me {realize|recognize|understand|recognise|know} {so that|in order that} I {may just|may|could} subscribe.

As you can see from its setup, it appears to randomly choose synonyms for many of the words. It also has around 2 dozen comment templates (for the sake of brevity, I’ve only included the first two). I was actually kind of impressed, that’s pretty clever! They knew how people were checking for spam, and adapted to try and get around it. Pretty soon spammers will be using AI to analyze a blog’s content, and then use that information to post a relevant comment or follow-up comment, and bloggers will have no idea that they’re conversing with spambots.

Design Overhaul (part 1)

Like a book being judged by its cover, people tend to judge an app by its UI. Since jumping into a web development job 3 years ago, I’ve done a fair amount of client side work. I’ve helped redesign legacy applications with cool new UIs to lots of praise, even though the new apps had less features. And I’ve seen customers balk at feature-rich products that had so-so interfaces. And it makes sense, people like to use stuff that looks good, and if you can’t be bothered to put work into the design, what does that mean for the rest of the app?

I’m not a designer, and most of the stuff on this site was created before I really knew much about design. So as a result, a lot of what’s here looks pretty meh. After writing my last post, I took a look at the text fader that’s on this site and was kind of embarrised. I decided something needed to be done, so I started going through the various sections of this site and giving the layouts a much needed fresh coat of paint.

Mobile Version

The new designs aren’t amazing by any means, but I think they’re a step up, and hopefully they’ll provide a better user experience. I decided to use Twitter Bootstrap for a lot of the basic look and feel, since it looks great and plays well with jQuery. I’ve also been trying to make the new layouts responsive, so that they also look good on mobile devices.

I’m not allowed to bring a cell phone into work, so until last year, I avoided getting a smart phone. However, now that I have an Android, I use it all the time outside of work, and I’ve realized that I’ve made a big mistake by avoiding mobile development.

So now that the background is out of the way, what has actually been updated so far?

There are several more sections of this site I’m going to overhaul, but figured I’d do a write-up of what’s been done so far. I’ll also probably go back an revisit some of the sections I’ve already done if I get some better ideas. If you have any suggestions for anything just let me know.

The Chrome Web Store Effect

It’s been about 5 months since I tried out Chrome’s Web Store for my Snake and Text to ASCII Art apps, and I figured I’d give an update on how putting them in Chrome’s Web Store has effected their usage.

My Snake game has sat around for about 4 years on this site, consistently getting an average of around 30-50 users a day. I originally wrote the game as a nostalgic tribute to my high school days, and it’s only undergone a hand full of updates since its initial inception. Since this site was getting around 6.5k visits a day, 50 visitors means the app was accounting for around 0.077% of the site’s total traffic. After placing the app in Chrome’s Web Store, the daily usage began to steady rise, and the app has recently been getting between 900-1,000 visitors a day on the weekdays:

Snake Stats

Holy crap, the Chrome Web Store is awesome! Even with the bagillion other Snake games listed in the store, traffic has gone through the roof, with daily usage up 2,000%! But what about the TAAG app, has it also seen such a meteoric rise in traffic? Interestingly, even though both the Snake app and TAAG app have a similar number of installs, TAAG hasn’t seen a noticeable rise in traffic:

TAAG Stats

Hrm, this is kind of interesting. My guess is that this discrepancy is caused by the following factors:

  • TAAG is a utility app and isn’t really something that’s used often.
  • There is a high volume of people trying out games in the Web Store (installing them, and then uninstalling them if they don’t like it).

It’s hard to be certain of what’s actually going on, but I found these results to be pretty interesting, so I figured I’d share. I had wondered if the Chrome Web Store would be a positive for web app developers, and so far, from my limited experience, it seems like could potentially be a big plus for web app developers, especially game developers.

2012 Comes to a Close

I’ve had a lot of false starts with writing posts lately. Writers blocks seems to have gotten the best of me, but I figured I’d do a post to reflect on the past 12 months.

The hand of a fellow runner
Photo By fejsez

This year I turned 30, which makes me feel a little strange. I’m no longer the young guy. Up until 2 years ago I was always the youngest guy on the team I worked on at work, now I’m the oldest guy (though in fairness, the team I’m currently on is only 3 people).

I also became a dad this year (2012-12-09), which is pretty cool. I wont bore you with any mushy revelations or talk about how it’s changed me – I honestly still feel like the same person. However, it is amazing to look over at the little guy and know that he’s got half my DNA. It’s also fun to wonder what kind of person he’ll be. Hopefully I can steer him in the right direction and help him become the best person that he can be.


I learned a lot about web development this year. Both on my own, by experimenting with new HTML5 APIs and browser tools, and at work. To speak in general terms, at work I’m a developer on two web applications – one based in Java Spring and one based in PHP. Working with the two side by side, I’ve slowly grown to hate Java web development – it’s slow for iterating changes, lends itself to gigantic class hierarchies, and seems to make trivial tasks harder than they should be. Even though it has its flaws, PHP is actually pretty fun to develop in. It also has great documentation and it seems like there is a blog post or forum question on anything you’d possibly want to do with it.

I still prefer the front-end though, and I’m still not sure I want to rely on PHP every time I do something on the back-end. One of my goals for next year is to take a serious look at Node.js, Python, and Ruby, and to do a for-fun project in each. I’ve actually started this already, but got a little side tracked when the baby showed up.

Internet Archive Fund Raiser

The Internet Archive is doing a donation drive with a 3-to-1 match. The archive was of great help to this site a few years ago when I underwent the one-two punch of my hard drive crashing and then my old web host deleting my site. Thanks to their Way Back Machine, I was able to recover a lot of files (in fact, it’s the reason the VB sections to this site are still up). I threw a couple of bucks their way out of appreciation, and I figured I’d pass on the link to anyone else who was interested in helping them out. They’re almost at their goal of raising 150k.

Notes on Offline Web Storage for TAAG

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:

# 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.

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

# The fallback section allows us to setup "fallback" pages to use 
# when offline.
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>
<div>Some text</div>
<img src="one.jpg"/>
<img src="two.jpg"/>
<script src="jquery.js?12345"></script>

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"

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 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:


    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

WordPress Hacking

A couple weeks ago I took an afternoon to read up on how to create a WordPress theme, and was surprised to learn how much there was to it. Re-doing this site’s theme has been on my TODO list for about 3 years though, and I felt it was important to give the site a fresh coat of paint.

From a user’s perspective, I’ve always loved WordPress. It’s intuitive, has a great interface, and has all of the blogging features I could want. However, under the hood, I’d heard it was a mess. After poking around a bit, I didn’t really find anything that was discouraging, but I did find myself spending way too much time researching how to make minor adjustments. So rather than toil endlessly, I decided to take a different approach and took the popular Twenty Ten theme and made a bunch of modifications to it (most notiably mixing in some elements from the Responsive theme). This was actually pretty painless, and I’ll probably continue to make more modifications. If you’re thinking about creating a theme, it’s worth reading up on how to do it, but using an existing theme as a launching pad will make your life a lot easier. Anyway, I hope the new design is easier on the eyes, please let me know if you have any issues!

Thoughts on PHP

WordPress is powered by PHP, and as of late, I’ve noticed a hand full of articles deriding the language, and another hand full vigorously defending it. I don’t like to consider myself a language specific programmer, but I do a fair amount of PHP development at work, and also find myself reaching for it when I do non-work related projects.

As of late I’ve been wondering if I should dive deeper into PHP, or instead try to look into getting good at Python or Ruby. The inelegance and quirks of PHP are a big turn off, but the fact that it’s used for so much (WordPress, Wikimedia, and lots of other popular software), and is so convenient to write and deploy, makes quitting it hard to do. I’ve sort of been in this weird stalemate about where I want to go. So while it’s not my favorite language, I don’t dislike it enough to throw the baby out with the bath water – for now at least.