You can play snake in the box below.

I decided to redo the internals of my JavaScript Snake Game since it was old and in dire need of an update. I thought about using the canvas element, but since it still has its issues with IE and excanvas can be a little slow, I decided to stick with using divs for the drawing blocks. The game is probably not the best it could be, but it’s definitely better than where it was at. If you’re interested in the inner workings I have the source available here.

For this update I also decided to experiment a little with YUI Doc, which is a tool that generates documentation for source code. It caught my eye since it creates beautiful looking documentation and it’s language agnostic, so it could possibly be used for all sorts of projects. The documentation for this Snake game probably isn’t too useful, but on larger projects I could definitely see this kind of thing coming in handy.

The only negative to the tool was that it didn’t seem well documented itself. I found myself somewhat frustrated in debugging some of the issues I had using it, and I ended up having to do a little hand editing of the output files to remove YUI Library labels. Other than that though, it was a pretty cool tool.

Nick Kaye emailed me yesterday suggesting I add a feature to the Text ASCII Art Generator program which would allow for the output to be formatted in the form of a C-style programming comment. He even offered to write the code patch himself.

I thought the idea was really cool, and took him up on his offer. Anyway, the new feature is under the “More Options” link in the TAAG interface. Once it’s turned on, you’ll get output that’s formatted in the form of a programming comment. Here is an example:

/***
 *                      .___
 *      ____   ____   __| _/ ____
 *    _/ ___\ /  _ \ / __ |_/ __ \
 *    \  \___(  <_> ) /_/ |\  ___/
 *     \___  >\____/\____ | \___  >
 *         \/            \/     \/
 */

If anyone has any issues or additional suggestions let me know. And thanks again to Nick!

One easy way a webmaster can speed up their website is by enabling gzip compression on their web server. Most major websites do this and all modern browsers support receiving gzip encoded content. Sending out gzipped components greatly reduces the size of the response a web server sends to the browser and leads to the user having a faster experience with the website.

Despite this being a plus for everyone, according to the book Even Faster Web Sites,around 20% of US users do not experience this enhancement. The number goes down to 15% when a world wide audience is considered, but that’s still a decent number of web surfers. The book states that the culprits behind the slowing down of the net for 15% of its users fall into two main categories:

• Web Proxies
• Computer Security Software

The reasons for this are that the above want to observe the responses from the web server and don’t want to have to decompress the files, so they either remove or mangle the “Accepts-Encoding:gzip” message that your browser sends to the web server. This leads to the web server thinking that the browser doesn’t support gzip compression, and therefore it sends back uncompressed data. The reason for mangling or stripping away the “Accepts-Encoding:gzip” message may have been to try and minimize the number of CPU cycles needed to examine data from the web server, but increasing download time to get around decompressing data is a poor trade off.

Many newer security software suites have since rectified this problem, but there are still some out there that unnecessarily hamper your web surfing. You can check and see if you’re apart of the 15% of people who don’t recieve gzipped data by going to the following link: Gzip Compression Test Page

I’m writing this entry mainly because I’m doing a lot of front-end optimization at work and I ended up discovering that I was in the unfortunate 15% of web users who were missing out on a faster web experience. I also found out that my parents were in the same boat. If you click the link above and discover you are also not benefiting from gzip compression on the web, it’s worth temporarily disabling your security software and seeing if it is the cause of your problems. If you are unable to isolate the problem to software on your computer, it may be a web proxy which is removing/mangling the “Accepts-Encoding:gzip” message, and if that’s the case, you’re pretty much out of luck unless you control the proxy.

If you isolate the problem to your security suite, I would either try upgrading the software or switching to a different service. I dual boot my machine with Windows and Linux (my problem was only on Windows) and for Windows I’ve currently switched to using Microsoft’s Security Essentials for my virus checker (along with SpyBot), which LifeHacker seems to think is good enough, though I’m currently still researching the best tools to use.

If you are a webmaster and are interested in enabling gzip compression, you can find an easy-to-follow tutorial on how to do it here. If you want to go a little further down the rabbit hole, Yahoo! has put together a very nice list of techniques you can use to speed up your website.

One of the characteristics of web browser extensions that excites me is that you can write plug-ins for your favorite websites. For my next extension I wanted to create something that was a plug-in to a specific website or websites. After mulling over possible ideas, I decided to create an extension would augment the definitions from dictionary websites with relevant images. The result is Image Definitions for Dictionaries, which is a Chrome web browser extension that augments the results of Google Dictionary, Google Search, and Urban Dictionary with images from Flickr.

The idea for this extension came from an episode of the Simpsons where Homer is repeatedly defined in the dictionary, with his picture appearing next to certain words. I thought it would be interesting if that’s how all dictionaries worked. They would have an image next to the word they were defining and that image would be determined by what the web thought was most relevant. I thought this would especially be interesting for the more eccentric dictionaries like Urban Dictionary. Urban Dictionary does already have an image feature, but it’s based on user uploads and isn’t heavily used.

After playing around for a little bit, I had an extension that worked for the previously mentioned sites. Below you can see a slideshow which lets you see how the Flickr thumbnails are integrated into the dictionary webpages (clicking on a thumbnail within a dictionary site will take you to the image’s Flickr page):

• Urban Dictionary

  http://patorjk.com/blog/wp-content/uploads/2010/10/urbandictionary.png

• Google Search

  http://patorjk.com/blog/wp-content/uploads/2010/10/google-search.png

• Google Dictionary

  http://patorjk.com/blog/wp-content/uploads/2010/10/google-dictionary.png

Using the Flickr API turned out to be a breeze, though most of the functionality I needed was already provided in an example created by Google. I did briefly look into using other APIs, or having the option for multiple APIs to be used, however, I wasn’t able to find a service comparable to Flickr’s API. Google’s has Google AJAX Search API, but that appears to be aimed at providing searching services and it doesn’t seem to give you access to individual thumbnails. I looked into some other services too, but nothing jumped out at me.

Anyway, I hope this extension can be of use to some of you or provide you with some entertainment value. If anyone has any requests for sites I should support, or has any suggestions for the extension, please let me know.

I’ve made a small update to my Typing Speed Monitor Chrome web browser extension. You can now exclude statistics that come from certain domains. It was a feature requested in the comments section and I figured it would be useful for people who don’t want certain websites to effect their statistics.

I’m not sure how far I want to go with this app. I have a couple more feature ideas, and I would have added more with this update if I had not been busy working on another extension (see my next update). We’ll see though. If you have any feature requests just let me know.

After being someone frustrated with a web app I was having to repeatedly check, I decided to try my hand at writing a Chrome web browser extension. I basically just wanted to have a little notification pop-up when the web page told me a certain event was occurring, that way I wouldn’t have to keep checking it. After tinkering with one of Chrome’s sample extensions, my page checker/notifier was up and running perfectly. I had expected its development to be kind of painful, but it luckily wasn’t painful at all.

After its creation I decided to explore extensions a little more. I had a few ideas in mind and figured I’d implement one to see what I could do. I decided to first go with creating a “Typing Speed Monitor”, something that would capture what an average user’s typing speed was, tell them how much time they spent typing, give them statistics about what they typed, and give them a visualization to play around with. It was a pretty simple idea, but it involved messing around many of the areas of extension development and I think it came out well, so I think it was a good first project (not counting the project I created out of an example). If you’re interested, you can download it from the Chrome Extension Gallery here.

I’ve also uploaded the source to the extension to patorjk.com and you can check that out here. Since this is a pretty basic extension, nothing too complicated is going on, but I figured I’d post it up in case anyone was curious as to what was going on underneath the covers. I have a few more ideas for additional features, but I’ll first see if anyone actually uses the thing. Also, I’d be interested in making this app more internationalized, but I’m not completely certain on how the JavaScript keycodes work for foreign keyboards. If anyone has any information on this please let me know.

On a related note, later this year Google will unveil the Chrome Web Store, which actually sounds kind of promising. It’ll feature web applications, Chrome themes, and Chrome Extensions (the extensions will be moved from the gallery to the store). The store will feature free applications along with ones users can pay for. I really like the idea of a repository for web apps, and it seems like it’ll give developers a good outlet for their ideas. Anyway, it’s something to keep an eye on.

Last week I handed in my letter of resignation to Northrop Grumman, the company I’ve worked at for the past 4 years. I was both excited and nervous at the same time. Nervous because it was a big step, and excited because I was starting a new job as a subcontractor at a small company in two weeks.

The past three years I’ve spent most of my time creating and maintaining Java and Tcl/Tk applications, with the majority of my time going to Tcl/Tk development. Both of these are fun languages, but I kind of wanted to get away from these as my primary focus and move into doing web development. Northrop is a pretty huge company and allows people to move around, but from the inside it looked like my future involved mostly C/Java/Tcl, so I decided it was time to see what was available outside of the company.

I’ve had a few friends successfully change jobs within the past year and decided to hit up one of them about possible jobs in his company. I ended up interviewing for and landing a job as a PHP developer. Since I’ll be a subcontractor, what I work in will vary from project to project (just like at Northrop, actually), but I’m in a position to take on a more diverse set of projects that I think will be geared more towards my interests. I also think getting to see how smaller companies work will be an interesting experience.

Lastly, I’ve decided to carry on with my rule of not talking about work on this blog, with the exception of big announcements, so this will probably be my last work themed entry for a while. Hopefully it helps me pick up some cool new skills and I’m am able to apply some of what I’ve picked up making the content for this site professionally. Also, I know I’ve sort of been neglecting this site due to perparing for the new job, but I think this site will benefit from it in the long run. If you’re interested in changing jobs and have any questions feel free to shoot me an email me or post in the comment section below.

The Muller Formula is a neat little color formula that aims to predict which sets of colors people will find pleasing. No actual formula is given for it, but it’s concept is described. Given a set of colors with the same hue but a different lightness, the colors with the lighter hues should be shifted to a more naturally bright color and the colors with a darker hues should be shifted to a more naturally dark color. I thought this was a neat idea and figured I could possibly simplify it to work with a single color (what I decided to call a “Muller Color”). If a color had a high lightness, its hue would be shifted to a naturally light color. If it had a low lightness, its hue would be shifted towards a naturally darker color.

The original article used a the traditional artist’s Red-Yellow-Blue color wheel. I wasn’t able to find a good conversion formula to go from the Red-Green-Blue color model (RGB) (which is popular in computing) to the Red-Yellow-Blue color model (RYB), but I did find formulas to go from RGB to the Hue-Saturation-Lightness color model (HSL). I figured this would work well since the HSL model had everything I needed to calculate a “Muller Color”. I could detect the lightness of a color and then adjust its hue accordingly.

Looking at the HSL color wheel, I decided to use the primary colors (Red, Blue and Green) as the more naturally dark colors, and the secondary colors (Yellow, Cyan, Magenta) as the more naturally light colors. This decision was just based on my own judgement. Using the HSL color model and the concept described by the Muller Formula, I was able to generate interesting colors from RGB inputs. And to make a long story short, I ended up using this idea in my Image to Color Palette Generator app. A color palette would be generated of an image, but in addition, the user would also see a palette of the corresponding Muller Colors.

I figured I was done with this idea until I received a recent email from someone suggesting I take the images people input into the Color Palette Generator program and create “Muller Images”. Basically, call the Muller Color formula on every pixel in the image and generate a new image. I thought this was a really cool idea so I whipped up a quick prototype which you can see here. The shift percent indicates how much a color should shift. For example, if the color is between red and yellow and the shift is 100%, it will become yellow if it’s light and red if it’s dark (a dark yellow would even end up becoming red and a light red would end up becoming yellow). If the shift is just 50%, it will just shift 50% of the way closer.

Unfortunately, the results weren’t as stellar as I hoped. Calling the Muller Color formula on every pixel caused them to gravitate towards similar colors, so the resulting image tended to look like poorly compressed gifs. An example of a 10% shift can be seen in the Bernie Madoff pumpkin pic below.

It was still a cool idea, and maybe it could still be used for something, though it’d probably have to be tweaked a little bit. There are other images available to Muller-ize on the experiment page if anyone else is interested. Thanks to David Dailey for the idea on this one.

My head is still spinning a bit from yesterday. I couldn’t really take in everything that was going on since I was having to run around a lot at work, however, I figured I’d post some final thoughts since I don’t feel like I defended myself well enough against Marak and friends’ attacks.

Firstly, the source to TAAG isn’t “weak sauce”, it’s pretty cool. It generates neat ASCII Art text in real time, works with FIGlet and my own font file formats, allows you to generate images, test multiple fonts at once, implements the FIGlet smushing feature, and a whole host of other things. If it wasn’t any good, I (or even you, Marak) wouldn’t have been able to continually build on it. It’s not my best work though, and if I were to do it again today (knowing all that I now know about JavaScript), I would approach its design differently. Also, to quote the very kind reddit user elmuerte, who actually went though and compared Marak’s code and my code:

I checked his changes. And most of the work was actually removing the code that read the configuration from the “control frame” in patorjk TAAG website.
patorjk wrote the code specifically for his website, this other guy just made it more generic. That’s not really what I would call “removing crap to get it working”.

Secondly, I am a hobbyist, but I’m also a professional Software Engineer. I’m not a “weekend hobbyist” or a “plumber with a fireman’s axe”. It boggles my mind that someone would take my code, use it to their advantage, and then blast me like I was Cletus from the Simpsons. I’m good at what I do, in fact, I kick ass. I read books on programming in my spare time, I have hobby projects, I’ve got a BS and an MS in Computer Science (all A’s and one B for my undergrad), and I’m considered one of the best where I work. I know it’s a real pompous thing for me to make this kind of list, and I normally wouldn’t bring this stuff up (hopefully I’m not sounding like an arrogant dick – I don’t mean to), but I feel like I’ve been shamed with misinformation by Marak and his cronies for not letting him have my code.

Thirdly, I’m glad I saw this reddit comment by itsnotlupus:

It’s a little upsetting to read so many boneheaded comments on his blogs, ranging from “you got credited so what’s wrong?” to “your code sucks anyway”, with a dash of “you shoulda made it harder to steal then.”
I kinda hope most of those are just the guy caught in the cookie jar that felt like trolling, or it paints a rather bleak picture of that blog’s readership.

I’m almost completely sure it was Marak. Marak’s comments kept coming from different IPs, though I did catch him and another user posting under the same IP for one post each. Another pair of Marak supporters also had the same IPs for one post. My hypothesis would be that Marak was posting under many different user names in an attempt to make it look like he had lots of support.

Lastly, as far as open sourcing TAAG is concerned, I don’t think I’d enjoy writing a JS library in the wake of this. This whole experience has just left me with a really bad taste in my mouth and I’d like it to be over with. However, I would imagine there will be those interested in using one since yesterday’s post attracted a lot of attention (around 40k visitors). I did a quick search on github and 5ivestar has a JavaScript FIGlet project. Scott Gonzalez has also started a FIGlet project. So there will probably be options for a complete JS FIGlet library in the future. I want people to know I’m not against open source, I’m just against taking someone’s source without their permission.

Anyway, I’m done with this situation. There will be no comment thread in this post. Thanks to anyone who took the time to have my back.

/*
asciimo.js – written by Marak Squires
saved from the internet @ http://patorjk.com/software/taag/

i had to do unholy things to make the original code work, seriously.
check the commit logs on github and you’ll see how much “code” i had to delete and refactor.
what’s left isnt really acceptable, but it does work.

let’s clean this up and get a more comprehensive font database!

— Marak
*/

So that’s the header comment to a new open source project called asciimo. Though I’ve never heard of the project, it’s actually composed of the inner workings of my Text Ascii Art Generator (TAAG) web app. I’ve never heard of Marak Squires either, and I don’t particularly like his snarky comments about his difficultly in stealing of my work.

I’ve had stuff taken from this site. Sometimes it’s makes me smile, other times it makes me shake my head. This makes me shake my head. TAAG was the project I used to return to JavaScript. It was written with JavaScript knowledge I remembered from the late nineties. It was a project I did for fun. Hell, I didn’t even know what AJAX was when I first released it. Underneath it ain’t so pretty, but it’s mine and not some jerk’s ticket to getting a lot of attention for themselves.

I should probably be angrier, but I’m actually mostly just disappointed that someone did this. This is lazy and selfish. I develop all sorts of random stuff, and I do it for fun. If I see a concept I like, I’ll try and make my own version, I don’t take someone else’s. When I see something like this, it’s upsetting. Is it for some quick attention? So they can state that they’ve started X number of open source projects on their resume?

I was initially told of this project through email (thank you Jan), though I later found Marak’s self promotion on reddit (edit: screen capture from saved html file – he deleted some of his comments). His response to my comments was that because I didn’t explicitly put a copyright notice in my code that he could use it however he wanted (which I’m pretty sure isn’t true). He tried to say he did it for altruistic reasons, but FIGlet itself is open source, and there are already PHP modules available for people looking to use it in the browser (here and here).

Maybe in another universe we could have had some kind of cool collaboration, but at least in this one, Marak doesn’t seem like the type of person I’d want to collaborate with. He comes off as abrasive, self-centered and thoughtless. It’s a shame he has to use the ideas and work of others to promote himself.

Follow Up: Aftermath
Follow Up #2: After notifying github, my code was eventually removed from his site and project.