For what it’s worth, here are some ExtJS specific resources I’ve found helpful:
- ExtJS Official Website, specifically the forum, API, and examples pages
- ExtJS UX repository for plugins
- Saki’s Extensions
- ExtJS GUI Builder
ExtJS resources
Jul 1
Cloud computing 101
Jun 29
I just finished reading a great article1 outlining the difference between Google and Microsoft’s approaches to cloud computing and how, as one company that switched from Virtual Earth to Google Maps put it, it all comes down to speed, speed, speed.
I’m not very big into virtuilization/cloud computing just yet, but with companies like Red Hat posting profits in an otherwise bear market, and with the advent of (mostly) free cloud computing platforms like Google’s App Engine, I’m definatly going to find an excuse to develop at least one test project in the cloud.
- This was from the recent Structure 09 conference event. [↩]
Recently I was asked to develop a simple “punch the monkey” type game for an Augusta-based radio personality Austin Rhodes who apparently garners as many enemies as fans1. Both, it seems, wouldn’t mind taking a swing at him, though, even if its only a virtual one.
Not wanting to spend a whole lot of time on this project and remembering the plethora of “punch the monkey” Flash applets that used to plague us2 in the early days of the internet. I figured it would be pretty easy to simply modify one of them to fit our needs.
So here’s a simple 3 step process you can use to create your own “punch the monkey” game for that special someone in your life.
Step 1, rogue a base game from Sucker Punch Saloon. You’ll need to download the compiled Flash binary, the .swf. I liked the look of the one with President George Bush because it seemed clean and easy enough to modify.
Step 2, decompile the compiled Flash binary (.swf) using something like Sothink’s SWF Decompiler or one of the countless others. Sothink’s decompiler is my favorite, though, since it has managed to consistently handle the latest versions of Flash.
Step 3, take the decompiled .fla and open it in Flash and replace the images you need with the ones you create. For the game I chose to modify, this meant swapping out 3 images in all along with the advertising at the bottom. I also threw in some free sound effects from findsounds.com just to make the game more interesting. Additionally, this tutorial came in handy when it came to adding blood to the image (well, something that remotely resembles blood anyway).
Well there you have it. Quick, simple, and painless. Here’s the finished product, knock yourself (or Austin, rather) out.
JSLint is a very helpful code quality utility for javascript that purports to hurt your feelings but helps you write ECMAScript compliant code. Many development suites like Aptana now include lint checking while you code.
A major advantage of making sure your code is linted is that it ensures your code will not be mangled too badly by minification/obsfucatiors if you decide to use them later on.
Multi-threading in Web 2.0
Jun 10
I’ve been tasked with speeding up a web 2.0 application based on ExtJS 2.2.0 that contains several routines that take up quite a bit of time and, because IE6’s javascript processing engine is less than stellar1, I needed to find a way to “speed things up”.
Enter Ext.TaskMgr, a helpful ExtJS object that is essentially a glorified setTimeout implementation that allows us to run tasks that don’t block execution. This means we can set our more expensive blocks of code to run later but return control back to the user in the meantime. It’s not true multi-threading, but it does allow us to make the user interface a lot more responsive and in an age when users think 5 seconds is an eternity, perception is everything.
- In other words, it sucks pretty bad. [↩]
Recently I ran across an interesting problem involving dates and timezones while working on a rich web 2.0 application whose primary purpose was to allow the user to enter time values that were then saved, as true date objects, onto the server1.
Up until now I have not used time values on both a server and client level, I’d referred instead to use a UNIX timestamp that the server2 did not touch or, if they did, they did so with the client being the authoritative source.
This case was different in that the server was the authoritative source and all clients were required to deal with time values in the server’s timezone context3.
Herein lies the rub.
For this project we were using ExtJS 2.2.0 and made extensive use of ExtJS’s extensions to the regular Javascript Date object. Little did we know, the Date object is implemented per browser and while some browsers4 will honor timezone designations, other browsers5 doggedly convert any and all Date objects into the timezone of the current system they are running on6.
While there are some solutions out there like Freegix that perport to include solutions for switching timezones on the client-side, we have yet to find any solutions that are truly drop-in replacements.
Why couldn’t IE just honor the ‘T’ or ‘O’ designations in the first place? One can only wonder what possessed the IE team when it came to this issue…
So if you are writing a web 2.0 application that passes dates between the client and server, make sure you remember that the browser has the final say in how your time gets parsed.
- Which, in this case is JBoss and Oracle [↩]
- Database or web application tier [↩]
- For us, this happened to be Eastern Standard Time [↩]
- Such as Chrome and Fire Fox [↩]
- Such as, surprise surprise, Internet Explorer 6 and 7 [↩]
- We tested this by simply adjusting the date/time on our Windows desktops [↩]
parseInt gotchas
Jun 3
Debugging an application today before launch I noticed a problem where it seemed to be parsing a specific time value (0900) incorrectly as (12:00 AM or ‘0000′). During my search I ran across this oddity with the parseInt function of Javascript.
Apparently parseInt can also work with different base notations so it’s a good idea to specify base 10 in the manner parseInt(val,10) just to be safe if you are passing it numbers (such as time values) that may start with a zero and you don’t want invalid octal numbers (like 09) parsing to zero.
Web browsers and time
May 29
Today I had an interesting task of figuring out why a piece of code I’d written a few weeks ago for autosaving user changes wasn’t being called as uniformly as we’d thought.
That is, on IE6 and FF, we were seeing a particular piece of code take almost twice as long to execute as it ought because (as we later found out) timings in javascript can’t be trusted.
So, if you need something to run on time, at regular intervals; use a polling pattern instead of relying on the usual javascript methods.
Console.log is your friend
May 28
Although it only works in Chrome and FireBug, I’ve found console.log() to be an extremely handy tool for debugging javascript without having to step through code.
Here’s a bit of code I’ve found handy to make sure browsers without console.log don’t bomb out in case you forget to take your console.log statements out:
if (window.console == undefined) { window.console = {log:function(){},dir:function(){}}; }
Make sure to add this near the top of your scripts and you’ll be able to use console.log without fear of it causing problems in browsers like IE.
I recently ran into a situation where I needed to know how many Monday’s were in a given month via javascript and figured I would make the function (which depends on Date extensions by ExtJS) for it available here in case anyone else runs into the same problem.
/* * This function takes a date and determines how many of each day of the week * are in the month. */ var getMonthlyDayOfWeekCount = function(sourceDate){ var iDate = Date.parseDate(sourceDate.format('m') + '/1/' + sourceDate.format('Y'), 'm/j/Y'); var days = [0, 0, 0, 0, 0, 0, 0]; while (iDate.format('m') == sourceDate.format('m')) { days[iDate.format('w')]++; iDate = iDate.add(Date.DAY, 1); } return days; }; /* * This function takes a date and returns an interger cotnaining the * occurance of this day in the month. * * Useful for when you want to know if this is the 1st or 3rd Saturday in * the month. */ var getDayInMonthCount = function(sourceDate){ var iDate = Date.parseDate(sourceDate.format('m') + '/1/' + sourceDate.format('Y'), 'm/j/Y'); count = 1; while (iDate.format('m') == sourceDate.format('m')) { if (iDate.format('z Y') == sourceDate.format('z Y')) { return count; } if (iDate.format('w') == sourceDate.format('w')) { count++; } iDate = iDate.add(Date.DAY, 1); } return count; };
