In the back of my mind I had been thinking about putting up some programming quizzes, similar to the ones I used to have on Visual Basic and C++. I was also thinking that it might be cool to have a quiz engine where users could create their own quizzes.

I’m not at that point yet, but this past weekend I decided to take the opportunity to try and learn ExtJS better and put together an interface for the app. You can see an image of the interface to the right or click here to see it in action. It’s pretty basic, but has all the functionality I think I’ll need for now.

The layout is broken into 3 sections. The top section is the header, to the left you can select quiz categories and get book recommendations, and on the right you get a list of quizzes. Hopefully the “Related Reading” panel doesn’t seem too commercial, as it was actually kind of fun to put together. I didn’t want to set myself up for having to write dozens of quizzes, so right now the interface only lists 3 quizzes (which I’ll hopefully have available soon).

Right now I’m in limbo about how complex I want this project to be. I’m not sure if I want users to be able to have accounts, and I’m not sure what data I’d want to store in a database. I’m also wondering if quizzes should be static html pages after they’re created. I’ll figure something out though.

Working with ExtJS was actually a lot of fun, and their online API documentation is fantastic. The library also seems to load rather quickly too. When I worked with Dojo, I was alarmed at the time the page took to load and how it looked while it loaded. I’m still a little bummed about the licensing for ExtJS, but I can live with certain things being GPL’d.

Last month I finished reading the short but densely packed JavaScript book JavaScript: The Good Parts.I had been looking for a book that would cover some of the pitfalls of the language more thoroughly than what I’d read about previously and when I saw this in the bookstore it seemed to fit the bill.

The thesis of the book is that JavaScript is a misunderstood language. It recognizes that there are bad parts to the language, but it contends that once you get past them there are some pretty nice good parts – and that by using only the good parts and avoiding the bad parts, you can write some really great code.

The book covers objects, functions, arrays, regular expressions, closure, and how inheritance works in JavaScript. The last one is probably the most important, since most people are only familiar with classical inheritance, and JavaScript’s prototypal inheritance, although wrapped in a syntax that makes it look classical, is very different. The book also discusses JavaScript’s bad parts and why you should avoid them.

Most of the concepts in the book are well explained, though I did find myself needing to re-read certain sections twice to completely understand the topic. This is in part because the book is very short, coming in at 153 pages (including the index). This is a double edged sword in that it allows you to take in a lot of material in a short amount of time, but sometimes you’re left wishing that a little more time was spent on a certain topic.

One other possible fault with the book (depending on how you look at things) is that it does not cover the DOM at all. The DOM isn’t part of the JavaScript language, but almost everyone who uses JavaScript will need to interact with the DOM. Therefore, this book is really more of a companion piece than a definitive reference for JavaScript programming.

Overall I really liked this book. It gives good coverage to some important topics regarding objects and functions, and gives a good explanation of prototypal inheritance. A lot of language quarks are also pointed out and explained. For example, one thing I didn’t realize was that the arguments array that is implicitly passed to functions isn’t a real array. It’s just an object with a length property. The appendix sections covering the “bad parts” and “awful parts” were also pretty interesting, though I disagree with the author that ++ and — are bad.

Anyway, I highly recommend the book if you’re into JavaScript programming. It’s a nice easy read that covers a lot of ground. Also, this is a non-solicited review, though the link above is an amazon referral link.

If you’re interested, the book’s author gave a one hour talk on this book that touches on a lot of its ideas. You can watch it here (actual talk starts at 2 minutes 15 seconds):

I’ve been bad about updating the past couple of months, I should have some interesting stories for next year though.

It’s been a pretty amazing year. I got engaged, bought a house, wrote a couple of new web apps, learned a lot about Tcl and JavaScript, visited Northern California (and then got stranded in Phoenix on my way back – due to the blizzard going on in Maryland), worked over 180 hours of overtime, and gained a lot of weight (the last one’s not a good thing, but it’ll give me a goal of losing weight for the new year).

I looked up my resolutions for this past year and I think I did ok. Here’s the list:

• Get good at JavaScript: I feel like I’ve accomplished this one. There’s more for me to know, but I feel like I really know my way around the language.
• Learn jQuery: Didn’t even look at it this year. There are a lot of cool JavaScript frameworks out there though. I’ll probably get around to learning jQuery at some point, but I don’t think knowing it is as important as I used to.
• Develop More Web Apps: The Typing Speed Test, the HTML Canvas game, the Blog Stylometry Tool, and lots of updates to the Keyboard Layout Analyzer. I was sort of quiet near the end of the year, but I expect for things to pick up again here soon.
• Read At Least 4 Programming Books: Learning Dojo, Learning ExtJS, JavaScript: The Good Parts, and Code: The Hidden Language of Computer Hardware and Software. JavaScript: The Good Parts and Learning ExtJS were the best of that group, and after thinking more about it, probably the only two I’d recommend from the list.
• Join A Programming Community: I did not do this, unless you count my subscription to the Programming Sub-Reddit at reddit.com. I’ll give myself half credit here.
• Write A WordPress Plug-In: I had a couple of ideas, but I lost interest.
• Release Some Programming Examples: I still want to do this.

So I achieved 3.5 of my 7. Not too shabby, I feel like I accomplished what was important to me, and that’s probably better than meeting the goals I think up at the beginning of the year.

This probably wont be my last post of the year (I’ve got a book review coming), but I hope everyone out there has a great holiday and a happy new year!

It’s been too long since I last updated. I didn’t intend to take such a long break from posting, but my life suddenly became really, really busy. In the somewhat near future I’m hoping to post some web-app updates, but I don’t want to state anything specific at the moment.

To finish the year off I have a couple of book reviews coming. Two unsolicited, and one at the request of Packt Publishing, who are providing me a copy of their new Ext JS book called Ext JS 3.0 Cookbook. I previously reviewed a book from them titled Learning Ext JS, which was pretty good. However, I didn’t end up doing much with Ext JS. My main concern was that I’d have to release the application under the GPL (using Ext JS in an application without buying a commercial Ext JS license causes the application’s source code to fall under the GPL, which is an open source license). Though I currently have a couple ideas in mind that I wouldn’t mind open sourcing, so this book may provide some interesting examples/ideas which I can polish them up with.

Also, Packt provided me with an affiliate link, so if you buy a Packt book after following the above link, I’ll get a small cut. I’ve noticed a lot of blogs seem to use affiliate links when doing reviews, however, I figured I’d make sure and state it just so you all know up front. This wont effect my review, but I figured it was worth stating for transparency reasons.

After reading up a on HTML5’s canvas element, I decided to re-tool the game I was working on to work inside of a canvas element. This was because the canvas element provides some great drawing functionality. You can resize, rotate, crop, position and alter the pixels of images you use on the canvas.

The game is still not done, however, I’ve uploaded another demo that shows the space ship and its main bad guy. You can use the arrow keys for movement and the “s” key to shoot. I changed the shoot key from the Space Bar to “s” because Opera was giving me issues when the Space Bar was pressed while the canvas had the focus.

Also, unlike last time, the game works best in FireFox, and basically sucks in everything else. Opera and Chrome can run the demo, but the frame rate is painfully slow. Since IE doesn’t support the canvas element yet, I’m using the JavaScript library Explorer Canvas to emulate it. Though you have to be using IE8 and be in “Quirks Mode” for it to work – and even then, the game is unplayably slow. Since the canvas element is part of the new standard, and one of its hyped uses is for creating games, I’m assuming / hoping that its performance is going to improve over the next couple of months in these browsers. However, since the canvas element is so cool, I’m still going to finish this game off even if it only works in FireFox.

For those of you interested in using the canvas element, Mozilla has a really good tutorial on it here, and there are some neat canvas game-themed tutorials here.

Lastly, and on a completely different note, I’ve written an update to the Is Someone Pretending To Be You Online? post I made a year ago. The update is at the bottom of the post and basically says the problem was due to a database error (which was a relief). I didn’t do an update right away since I didn’t want to embarrass the site owner.

“What would be something neat to do in JavaScript?” – I kept asking myself that on Saturday. My fiance was away for the weekend and I was just kind of hanging out at home with the dog. Eventually I ended up thinking about possibly trying to do a side scroller game, like Mario Bros or Commander Keen, but since I had never written one before, I wasn’t sure. Finally, I came to the conclusion that it might be wiser to go for something a little easier first, and decided it might be cool to port my old “Intergalactic Odyssey” space ship game to JavaScript.

My goals here were to just see how feasible it would be to create an action game with moving sprites. I didn’t get very far, but I was able to create a space ship that could fly around and shoot lasers. I was able to get the graphics by decompiling my old SWF Flash file (I’ve long lost the source to the game). Also, the space ship artwork was done by fitz. I originally found the space ship via Google Images, though I did ask before I used it.

So far the main issue I’ve run into is that IE and FireFox aren’t reliable for smooth game play. The demo works best in Google’s Chrome and Opera’s Opera web browser. Though at this point I haven’t added any collision detection in, or any bad guys in, so there’s still a ways to go before I know if I’ll have a playable game.

One thing I didn’t realize when I started was that I could rotate images. I googled for a little bit and didn’t come up with anything, so I wound up creating images for each of the different rotations of the space ship. Though now that I’ve read up on it a little more, image rotation can apparently be done with the Canvas object in FF, Opera and Chrome, and with filters in IE. I suppose I’ll find out later which method is faster.

Lastly, the key capturing events are a little frustrating, since JavaScript doesn’t appear to remember when someone is holding the Up-arrow down if another key is pressed while its down. I’m still trying to figure out if there’s a way to get around this.

If you have any tips/suggestions, feel free to let me know.

You can now create custom keyboard layouts and compare them against other layouts in the Keyboard Layout Analyzer. Below is a screen capture of the tab interface for the new feature.

Layouts 1-5 can now be configured any way you want them. So you can create your own layout and see how it stacks up against the more well known layouts, or you can make modifications to the existing ones and see how well your changes do.

Hopefully the interface is pretty straight forward. Clicking keys causes them to change places, and you can remember layouts you created with the use of the “Layout ID”.

I’ll be wrapping up my updates for this app pretty soon. I’m not sure what my next project will be, but I have a couple of ideas I’m considering.

I’ve added a new feature into the Keyboard Layout Analyzer that will let you know the distance your fingers travel while racing across different keyboard layouts. It’s interesting not only because it lets you know how far your fingers are crawling, but because it lets you test out one of Dvorak’s claims on why his layout was better than the QWERTY layout:

Dvorak estimated that the fingers of an average typist in his day traveled between 12 and 20 miles on a qwerty keyboard; the same text on a Dvorak keyboard would require only about one mile of travel.

Sources: [1] [2] [3] [4]

Below I have the results of several pieces of text I analyzed. The QWERTY, Dvorak, and Colemak layouts are compared against each other. The distance shown for each is just an estimate, but it appears as if the idea of typing 20 miles in a day is a little excessive. Also, the Dvorak layout only seems to give you a 40%-45% improvement over the QWERTY layout when it comes to the distance you type.

George Orwell’s 1984 book, Chapter 1:

QWERTY – 0.5629 miles
Dvorak (Simplified) – 0.3107 miles
Colemak – 0.2935 miles

Christopher Nolan’s The Dark Knight Movie Script:

QWERTY – 3.0929 miles
Dvorak (Simplified) – 1.8838 miles
Colemak – 1.8497 miles

Jared Diamond’s The Curse of Qwerty article:

QWERTY – 0.3852 miles
Dvorak (Simplified) – 0.2173 miles
Colemak – 0.1938 miles

Steve Yegge’s Pinocchio Problem blog post:

QWERTY 0.7167 miles
Dvorak (Simplified) 0.4115 miles
Colemak 0.3619 miles

My Previous Post:

QWERTY – 0.0412 miles
Dvorak (Simplified) – 0.0233 miles
Colemak – 0.0211 miles

The algorithm for determining the distances is still being tweaked at the moment, so the distances may change in the future, however, it wont be dramatic. The biggest thing I have left to do is to factor in the pressing of the “shift” keys when an upper case letter is typed.

To the left you can see a diagram showing how the distance between two keys is calculated. The center coordinate of each key is known, so the Pythagorean theorem (c² = a² + b²) is used to calculate the distance between keys. The horizontal distance between the center of two letter keys that are next to each other is said to be 1.9 cm [reference]. This is 40 pixels in my set up. Therefore, I calculate the distance in pixels, and then convert it to meters by dividing by 40 and then multiplying by 0.019. I’m probably currently doing way more calculations than I should be doing, and that will be optimized later, but for now this is how its currently working.

If you’re skeptical about the distances you get back from the program, you can also try Colemack.com’s Layout Comparison Tool, which also produces estimates on typing distances. They’ll be slightly different from what I display, but they’ll be within the same ballpark. As an aside, somehow I missed seeing that app until recently, but at least our programs have their divergences.

Let me know if you have any issues with the distance calculator. Also, I’ll hopefully have some more updates to the Keyboard Layout Analyzer coming within the next week or two.

I’ve uploaded a new version of my Keyboard Layout Analyzer. You can see a full screen capture of the output page below. The new version has a layout similar to the one I discussed in my last post, and has a different chart set up, as well as a hand full of other small new features.

This new version is essentially a complete re-write of the old version. I had been making mental notes of features I thought would make the program a lot more useful, and after thinking about how I’d implement these new features, I realized I’d be better off just re-writing the application instead of modifying the old one.

This re-write was also a way for me to “pay down” my “technical debt” (I think I like that term), as I was able to more efficiently implement certain things to make them a lot more flexible. When I write stuff for fun, a lot of the time I just go with the first or second implementation I think of and then get to work. This re-write will probably serve as a good lesson learned, since the re-write was a little more painful than I expected. Only one of the new features that I thought up is in the program right now (the new chart set up), I didn’t have time to get to the rest of them, though I hope to implement them in the next couple of weeks.

Here’s an overview of what’s in this version:

• Updated interface.
• Able to view charts of different layouts all at once.
• Able to select what pieces of information you want to factor into the charts.
• Addition of the Capewell and Arensito (Simplified) layouts. However, this set up isn’t final. These layouts will still be in the next version, but the options will be a little different.
• “Personal Layout” factored into the statistics.
• A layout recommendation is made based on what you typed.

This new implementation also consists of 26% fewer lines of code.

This new version was tested out in Firefox 3.0 and 3.5, Chrome, and IE8. Unfortunately, the new IE8 messed up my install of IE6Eolas, so I’m not sure how the app works in IE6 or IE7. Oh, and I hate to rehash the cliché of bashing IE, but IE8 is actually a lot slower than IE6 and IE7 when it comes to executing JavaScript. Enough so that I was actually a little dismayed. I had been hearing mostly positive things about IE8, but I just didn’t see anything that I thought was that impressive.

Anyway, if you have any suggestions for the Keyboard Layout Analyzer or find any bugs in it let me know.

Coming up with a good looking, easy-to-use design is hard. Sometimes I feel like I spend more time trying to design an application’s layout than I do programming its back end, and most of the time the resulting layout isn’t that impressive. I think I’m just better at creating functionality than I am at making something that looks pretty. However, no one’s going to look at something if it looks like crap, and people tend to give applications more of a fair shake if they look nice, so I think the time I spend trying to become a better designer is worth it.

Recently I’ve taken to trying to improve the look of my Typing Speed Test. Below you can see the initial design, a design I put up last month, and the most recent design, which I put up this past weekend.

I made the initial design with the idea of keeping things as simple as possible, however, in retrospect, the page looks kind of unbalanced and the big yellow explanation box at the top kind of comes off as a little bit of an eye sore. The second layout was made with the aim of being a bit more stylish. I got ride of the yellow explanation box, threw in some small gifs, added a keyboard reference, and put in a header bar to make it seem a little less plain.

The third, and current layout, was made with the aim of trying to make something that, in my mind, looked good. I don’t think I quiet accomplished that, but I think I came up with something better than what I had. The interface seems cleaner and more balanced, and I like the additional color at the top of the page. The only thing I’m not sure I like are the header images, they seem a little cheesy. So I’ll probably keep tweaking the layout. My goal is to come up with something I can re-use on future (and existing) applications.

I can’t remember a time when I was so exhausted. I’ve moved into my new townhouse, though it still feels like there’s a ton of stuff to do for it. I also got engaged recently, and even though the date is a year away it seems like there is a lot to do for it. I’ve also been working 50-55 hour weeks at work the past few weeks, usually leaving work around 10pm. That last one isn’t too bad, since I’m getting overtime and I know people who’ve done much worse (I have a friend who told me he once did a 27 hour a day). However, it’s all left me a little worn out. However, I’ve still kept this site in my thoughts.

One behind the scenes thing I decided to look into was web app versioning. Sometimes I want to make a small update a program like Text Ascii Art Generator (TAAG), where I might need to change 3 or 4 files, yet if the user has certain files cached, the mish-mash of certain new and old files could cause the program not to work. There may be some obvious way of doing versioning that I’m just not aware of, but its something that’s bugged me for a while. I had been getting around this issue by naming the files I wanted to update something different (ex: font-settings-v1.htm became font-settings-v2.htm, etc), however, this seemed a rather messy way of doing it.

Recently I decided to put the whole app except for its index.htm file under a directory representing its version, and having the index.htm point to the sub-directories under the latest version. So the apps contents would be placed in a structure like this:

patorjk.com/software/taag/1.0.0/pages/ – Pages for the app
patorjk.com/software/taag/1.0.0/css/ – CSS files
patorjk.com/software/taag/1.0.0/scripts/ – Scripts
patorjk.com/software/taag/ – Where the index.htm file would go

This is nice because it allows me to go back in time if I screw something up. For example, if I decided I didn’t like version 1.0.1 of the app, I could go back to version 1.0.0 by just changing the index.htm file. This method also prevents any kind of awkward file combination due to cached files. However, it’s down sides are that I have to upload a whole new version of the app every time I update and I need to make sure users aren’t linking to or bookmarking pages underneath the version sub-folder. The app has to be set up so that the version folder is invisible – everything has to happen through the page at the base directory. This is so search engines wont index every single little version of the app.

So far this system seems to work pretty well, however, if anyone has any suggestions let me know.

In the weeks to come…

I imagine my free time to be kind of scarce for a while, but I have some ideas I want to work on, so updates will keep coming, but probably in a more sporadic manner.

I try to make sure this site is updated at least once a week. Often times I let it slip to every other week. When it goes past that, I usually get kind of upset with myself.

With that said, I’m a little embarrassed that I’ve been slacking on the update front, however, a lot is going on in my life right now and I just haven’t had the time I’ve wanted to work on stuff. I currently have some new updates to the Typing Speed Test in the works and I’m about to start work on a new app for this site. However, since I’ve been pressed for time, I haven’t really gotten much done during the last few weeks. So rather than string people along who regularly check in, or make subscribers wonder why there haven’t been any updates, I figured I’d just take an official break. I’ll still be working on stuff over the next month (when I get the time), I just wont update until the start June.

If anyone has any update requests for the Typing Speed Test let me know. I’m leaning towards reworking it to be more oriented towards typing correct characters instead of typing correct words, but I don’t know yet. It seems like there are a lot of different ways to give a typing speed test and no one way really jumps out at me as the best way.

June 2nd Update: I’m still in the process of moving into my new place and I’m currently in “crunch mode” at work, so it’ll be a little while longer.

Last time I said I had two more major features that I wanted to add into my Typing Speed Test. That number has since ballooned quiet bit and now I’m not really sure when I’ll be done with it.

The biggest change you’ll notice today is that the input text is now in a 3-line format that scrolls once you’ve typed to the end of the second line. I like this change a lot sense I think it allows for a more simple user experience.

Another reason I like it is that it allowed me to find my first undocumented (for the most part) bug in IE (well, the first one that I’ve taken the time to examine). It appears IE has issues with returning the correct offsetTop position of span tags in certain situations. I’ve set up a test page here that’ll show you different offsetTop values when you use IE as opposed to other browsers. This guy had similar issues, though he couldn’t reproduce his problem via a test case. Luckily for me, his offsetTop span solution also worked for what I was doing (just set the span’s position property to relative).

Since the input text can now be scrolled in a smaller area, I’ve also added in some additional test time options. You can now run the test for up to 5 minutes or up to 1000 words. I will warn you though, typing the 1000 word version of the test more than twice in a row will leave you kind of sore.

A lot of the other changes I made were under the hood changes. To decrease loading time, I’m now using the YUI Get Utility for certain script files. This utility allows developers to grab script and css files at run time and integrate them into their code. Right now I’m using it to grab unloaded script files that contain functions that return input text for the typing test. I figured that most users aren’t going to try every possible test input, so there’s no reason to load them all each time. It doesn’t improve loading time a whole lot right now, but it’ll keep the loading time from growing once I start adding lots of different test inputs.

I’ve made a bunch of other minor changes and fixes, but I wont bore you with all the little details (unless you want me to). If you find any problems in this new version please let me know.

I’ve updated my Typing Speed Test with a new feature that lets you see how fast you typed each key on the keyboard. Once you finish the test, you’re presented with a visualization of the keyboard where the keys that were typed faster are more red and the keys that were typed slower are less red. Keys that are completely white were not typed at all and grey keys aren’t factored into the calculations. To see stats about an individual key, all you have to do is mouse over the key you’re interested in. Below you can see a screen capture of the feature.

Let me know if you see any problems. I still have two major features I want to add into this app before I move onto my next project.

EDIT March 26, 2009: I’ve updated the visualization. Blue now represents key that were typed slowly and red represents keys that were typed quickly.

As of March 21st, it’s officially been two years since I decided to relaunch this website. On the opening day there wasn’t any hype and the site had been down for 2 months – and before that, I think I’d only updated twice in the previous two years. Plus, on this new day, all I had up was a message saying I’d be back. I couldn’t post up anything because my previous host had deleted all of my content and my hard drive had just recently crashed, taking with it everything I had saved. Other than being a lesson in routinely backing up files, this gave me a chance to start fresh.

It’s been two years and I think this site is currently as successful as its ever been. I don’t have a community like I used to, but I do have a decent amount of traffic and links coming in. The site, as a whole, currently gets around 2,700 visitors a day. So I feel good that I’ve been able to come back with something that people (hopefully) find useful and/or entertaining. I suppose it’s just a different site now than it used to be. I’m still steering the ship, and I’m still programming, but I’m using different tools and doing different things.

I think the thing I’ve enjoyed the most over the past two years is seeing the stuff I make or post up actually being used. When working in a big company, sometimes you program something up, hand it in, and then move onto your next assignment. You don’t really get to find out the experiences of the end user or what they thought of the program. You don’t know if they struggled to understand what you did or if they loved it. Well, sometimes you find out, but not always.

The cool thing about the web is that anyone can see the stuff you make. And to get feed back one can just google around or look at their referral logs and see where people are coming from. Sometimes this leads to some interesting info about how people are preciviing and using what you have up. Check out these Stumbleupon reviews I found of my 179 Ways to Annoy People chain letter page:

I think a certain number of visitors were thinking it was a real list. I thought it was obviously a joke, but you never really know what people are thinking when they come across your site, so I added in note at the top of the page letting people know it was just a joke list. Though I suppose some of the reviewers might have realized it was a joke and were just plain offended by it, however, calling a joke list “Asshole Training” seems a bit odd. [As a side note: I'm thinking of getting rid of this page entirely, since it doesn't really go with the rest of the site, though maybe I just wont link to it and let its only source of traffic be 3rd party services like search engines and Stumbleupon]

Another interesting observation I was able to make, this time via my stats, was that a decent number of people were going to my Text Ascii Art Generator program and then just exiting via one of the out going links on the About page. This seemed like a rather strange behavior so I changed the program to automatically display the message “Type Something” once the page was loaded. This ended up causing a big increase in the usage of the program. My guess is that people were visiting the app’s main page and then getting confused as to what they were looking at, so they’d just skim the page and click on one of the out going links. It’s stuff like this, as a developer, that I’d never catch unless I had access to usage stats or user feed back.

Anyway, for those of you who’ve decided to follow this site for whatever reason, I thank you for checking in every so often. It definitely is nice to see stuff I make being used and to get feed back on it.