Sea Change

wwwA little over a year ago a coworker pitched a snunkworks-type project to myself and another team member. Separately the three of us worked on PHP/MySQL and Java/Oracle projects, but he wanted the new project to use the MEAN stack (MongoDB, Express.js, AngularJS and Node.js) since JavaScript was something we all had in common.

My interest was piqued, but I was a bit skeptical. I felt the stack was a little too trendy, and for whatever reason, I singled out AngularJS as something I wasn’t so sure about. I felt it was too new – something that was hot at the moment, but might not be hot in 6 month’s time.

At my insistence, we spent a couple weeks comparing Angular and Backbone.js, a framework which had a more established reputation. By the end of our comparisons though, I had done a 180 and was completely sold on Angular. For the remainder of the development I focused mostly on the Angular side of things and loved it.

At the same time I also enjoyed Node. However, its async nature was kind of a pain in the ass and its biggest benefit was really just keeping a common language across the whole project. For Mongo, I had mixed feelings. The flexibility was kind of cool, but relational databases, with their transactions and joins, are a lot easier to work with. Mongo and Node were neat, but they both had weaknesses you had to be careful about. Angular, however, really felt like something that would be a good fit for any type of web project – large or small, complex or simple, etc etc.

GSe3vyI__The experience left an impression on me, and a few weeks ago I decided to accept a job offer at a new company as an AngularJS developer. It was kind of hard to leave my old job, as I really enjoyed it, but I felt it was time to venture out into new waters.

It’s neat to think that 5 years ago I was programming test equipment in Tcl/Java, and now I’m a front-end Angular guy. I guess that’s just the nature of software development though, you’re always continuing to evolve. Also, like always, work wont get mentioned in this blog again unless its related to a major life change, so in my next post I’ll be back to talking about some random tech topic or updates to this site.

Speaking of which, updates to this site have been kind of sparse lately, and I’m sorry about that (especially if you’ve submitted as keyboard layout because I’m way behind in reviewing those). The job switch ate up a lot of time, and a planned vacation to Chile also ate up a lot of time, but now that those two events are over with, I hope to get back to more regular updates.

Also, in case you’re interested, the images in this post come from RedditGetsDrawn, a very cool place where artists draw pictures of submitted photos.

Nomad ChargeKey Review

DSC_0082I don’t normally do reviews of tech devices, but I was recently offered a review copy of Nomad’s ChargeKey, and since it seemed like a neat little device, I decided to check it out.

ChargeKey is a portable lightning cable that fits on a keychain. It comes in both a lightning (iPhone) and micro-usb format (Android / Windows Phone). The idea behind it is to allow people to always have a cable to plug-in to a USB port if they need to charge or sync their phone. If you use a laptop or have a keyboard with a USB port this is really convenient. The cord is also flexible, so technically you could also plug it into the a USB slot on the back of a desktop tower too.

Priced at $29, it costs $10 more (or 53% more) than a normal lightning cable from Apple. This means you’re basically paying $10 more for the added convenience of a short portable cable. That’s a little high, but not too bad.

One thing I’m not completely certain on is its durability. Their marketing material mentions that its made with “high grade plastics from Bayer”, but I wasn’t able to find any information on if it was water proof (so I assume its not). I also wonder about the long term wear and tear the device can take, though for something this new its probably too early to tell. After 3 weeks I haven’t encountered any problems though.

Other than that, there’s honestly not a whole lot to say. It’s a simple product that lives up to its expectations. If you think its something you’d like, I’d definitely recommend it.

TheDraw’s Lost ANSI Art Fonts


Sample ANSI art by Roy/SAC

Most people know what ASCII Art is – its art created by arranging text into pictures. ANSI art is also text art, but it’s a little more special. It allows you to create text art that includes additional text characters, color, and limited animation. It gained popularity in the tech underground of the mid-80’s, and a community of artists emerged and flourished. It’s hay day was short lived though. In the 90’s unicode became the standard for encoding text, and since ANSI Art was based on IBM’s extended ASCII* character set, its presence became more and more uncommon.

These days the most editors can’t open ANSI Art files. If you try to view them they just wind up looking like gibberish. This doesn’t mean the art form is dead though – fans of the genre have gone out of their way to create special editors and viewers so that the art can still be appreciated, but the community is much smaller than it once was.

The Lost Fonts

About a year ago, someone named Aaron Haun sent me a zip containing over a hundred user created ANSI art font files from an old DOS app called TheDraw. He thought I might be able to provide a place to preserve them since I’d done so for the AOL Macro fonts. The only problem was neither of us knew how to decode the files within the zip.


Aaron’s ASCII Tattoo

Armed with copies of TheDraw and ACiDDraw, I decided to do some ASCII archaeology. I ended up going through the same rigmarole I did when I was trying to get Mark Zuckerberg’s Vader Fader to work, and was able to load up the old DOS apps on a Windows 98 virtual machine. This unfortunately didn’t help much, but it was cool to see the old apps in action.

After some more research, I learned most of IBM’s Extended ASCII characters had unicode counter parts. Since unicode is easy to display, I wrote a script to process the font files and return unicode compatible versions. This script also stripped out the color information. Though I felt the colors were neat, I couldn’t figure out how TheDraw was encoding them**.

What was left were some pretty neat ASCII fonts from the late 80’s / early 90’s. Created for use in emails and on old BBS systems, today it appears these fonts have mostly disappeared from the internet. After talking with Aaron, the only two sites that appear to host ANSI art font files are and, and in both cases you’ll need a special ANSI art viewer. Aaron told me he originally grabbed the font zip from ASCII Artist Roy/SAC’s web page (, but that site appears to have been shutdown a year ago. Roy/SAC does still have a deviantart page though, and you can see what his site used to look like at the internet archive (NSFW-ish).

With the fonts in hand, I decided the best thing I could do was convert them into FIGlet fonts so people could once again start using them. I created simple web-based FIGlet Editor to assist in the process, and ported over the fonts I felt looked best going from ANSI to FIGlet. Sadly this means I only ported over a hand full (10 total), since a lot of ANSI’s charm is in its color. Plus, even with the decoded files and my editor, it took a decent amount of time to make the fonts.

You can see what the ported over fonts look like in the screen shot below or you can browse the “ANSI FIGlet Fonts” section of TAAG and use them yourself. Later this week I’ll also add them to the figlet.js repo if you want to download the individual figlet files.

You can see what the originals look like on Roy/SAC’s old font page (internet archive link). At some point it might be interesting make something that would show the ANSI fonts as they once were, but for now I thought it’d be cool to at least provide a way to use some of them in a stripped down form.

More ANSI Art


* This is somewhat confusing because there’s an extended version of ASCII known as ANSI that was done by Microsoft. This leads me to believe that the name ANSI art was a mistake that wasn’t noticed until it was too late (plus “IBM Extended ASCII Art” doesn’t have much of a ring to it). Making this even more convoluted, Microsoft’s ANSI character extension was never standardized by ANSI, so it makes no sense to call it ANSI in the first place.
** TheDraw didn’t encode colors with ANSI escape codes.

2014.01.22 Edit: I updated the font screen shot to include all of the fonts instead of just 4.
2014.05.18 Update: Roy/SAC has recently relaunched his site and created a neat tool for working with fonts from TheDraw.

figlet and grunt-figlet npm packages

Last month I discovered Grunt, which is described as a “JavaScript task runner” by its creators. What’s that mean? Well, it allows you to automate mundane tasks like JS-linting, JavaScript/CSS minifying, compiling LESS into CSS, watching files for updates, and other development tasks. I had personally been using makefiles for these types of tasks, but after coming across a Grunt plugin for inlining AngularJS templates, I ended up going down the Grunt rabbit hole and converting over my makefiles to gruntfiles.

Once I had everything working with Grunt, I thought it might be fun to try and write my own plugin. Since Grunt is node.js based, I decided it might be neat to use the figlet.js library I wrote a while back to auto-generate ASCII banners for source code files. figlet.js was originally written to be browser-side only, so I had to do a little reworking to get it to work with node. However, after I had created an npm package for it, I wrote a simple grunt plugin around it called grunt-figlet. You can the result of a test run of the plugin below.

 * _________            .___      
 * \_   ___ \  ____   __| _/____  
 * /    \  \/ /  _ \ / __ |/ __ \ 
 * \     \___(  <_> ) /_/ \  ___/ 
 *  \______  /\____/\____ |\___  >
 *         \/            \/    \/ 
 * This is a message for the comment body.
 * More random text...
function abc(a,b,c){console.log(a+b+c);}var a=1,b=2,c=3;abc(a,b,c);

My office mate pointed out that it sort of defeats the purpose of minifying, but I still think its cool. The Text to ASCII Art Geneartor has a similar code comment feature, though it supports more languages. I’ll probably add support for other commenting styles into the grunt plugin later on, though right now I’m not sure if Grunt is used for any non-web development type projects.

After posting the project up someone submitted a change to allow the figlet library to work at the command line. However, I decided to break it out into its own package, so someone could use the library without it interfering with an existing installation of figlet. Ultimately I think it would be cool if this command line app mirrored the behavior of the c-based app. I mentioned the idea on the figlet mailing list, and Ian (the I in FIGlet) seemed to like idea. However, unless there’s suddenly a bunch of interest, right now that’s low on my list of things to do (though if you’re up for the task, feel free to submit changes to it).

Book Review: Audio Processing with Web Audio


Audio Processing with Web Audio

HTML5’s web audio API is pretty cool. Last year I had some fun experimenting with it, and since then I have been meaning to loop back and play around with it some more. So when I was offered a review copy of Audio Processing with Web Audio, my interested was piqued and I decided to see what it had to offer.

The book is setup to be a primer for web audio (in Packt terms an “instant” book). It contains a mere 63 pages, and reads like one long chapter. Overall it turned out to be a nice introductory book, but it’s does have a few flaws that take it down a notch.

As the book starts, you’re directed to setup your development environment and to download a zip of the code examples. This zip contains a total of 8 examples, broken out into 6 “recipes”. You can see a list of what they are below.

Recipe 1_1: Initialization exercise
Recipe 2_1: Playing Audio Files from an Audio Buffer
Recipe 3_1: Playing Audio in a Loop
Recipe 4_1a: Setting Volume
Recipe 4_1b: Setting Volume (refactored to use new template code)
Recipe 5_1: Scheduling Audio Playback
Recipe 5_2: Automating Audio Parameters
Recipe 6_1: 5-band Equalizer

For what I assume were space restrictions, the first two recipes in the code example packet were not discussed in the book. This makes the book slightly awkward since the first recipe covered, the one on looping sound (3_1), makes references to text written for these recipes and doesn’t cover concepts that would have been discussed for those examples. Thankfully it’s easy to pick up what you miss from the example code, but it’s an unfortunate editing snafu.

In the looping sound section you’re walked through the creation of the recipe via code samples with explanations, and once it’s done you’re given a deeper discussion of why things worked the way they did. The next two recipes are done in the same vein, and cover volume and automating audio parameters. The example code works smoothly and the author does a great job of explaining all of the little nuances that go with the code.

The final recipe is on building the 5-band equalizer. It’s billed as an advanced example, and it sort of feels like you go from a nice walk through the world of web audio, to a brisk sprint. I really didn’t know what was going on. I don’t know much about sound theory, so the different filters and concepts were all very foreign. I imagine this chapter was included so those more familiar with sound concepts would feel they got something out of the book, but it’s a little confusing for developers not tuned into how sound works.

Looking over the example packet, one other example titled “Scheduling Audio Playback” was cut from the book. However, unlike the first two examples, this exclusion isn’t really noticeable. Still, it leaves me thinking this book could have been a lot more interesting if it had been expanded by 20 or 30 pages. However, I’m glad they included all of the examples in the code packet, since it gives the reader some jumping off points after they’ve finished the text.

Overall it’s a nice introductory book. It has some flaws, but it comes with some good example code and does a good job on the majority of topics it tackles.

Random Updates for October

Over the last month I’ve done a lot of little updates. Now that the government is shutdown and I’m just hanging out at home, I figured I no longer had an excuse not to write them up.

If you let them build it, they will build it

I added the ability for users to submit presets to the Keyboard Layout Analyzer and the feature ended up being reasonably popular, with users creating and submitting lots of neat configurations. However, I was lazy in implementing the feature, and made it only partially automatic. Once a layout is submitted, I’m emailed the code I need to add to the config.htm file. This works out fine, since I only get about one or two submissions a week.

Since that feature worked out great, I decided to add a similar feature to the Text Color Fader, except instead of layouts, it was color presets… and oh did my laziness come back to bite me. It was originally setup to email me the code I needed to add after each submission, but after a week of getting 20-30 emails a day (and discovering that most submissions were just people testing out the submission feature), I realized I’d made a grave mistake. I went back and re-wrote it to include a proper admin panel and submission database. Now I just get a few emails a day and can easily approve/disapprove submissions. This approach definitely doesn’t scale, and with the number of presets growing daily, neither does the combobox I’m using on the front-end. However, I feel like I’ve bought myself time, and at the least there’s a neat color preset database that’s being compiled (users have submitted some very nice presets).

Ergodox Layout

When I originally overhauled the Keyboard Layout Analyzer, I put in support for different keyboard configurations – however, I never really showed this feature off. After getting a request to support the Ergodox layout, I knew I had an opportunity. I created a “key map” for it and uploaded it into the app. Within days users had submitted a number of nice alternative layouts for it, which was really cool to see.

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.