javascript power tools

The amount of javascript development I do has greatly incrased over the last several months…between simple javascript interface enhancements, to true ajax applications. The amount of code I’ve learned is immense, though, I still find myself googling various javascript references to check up to see what’s kosher and whats not…simply because I’m not a guru of the language quite yet. One thing that I’ve desired for longer than I can describe, and have pined for even harder since doing more javascript development, is a GOOD javascript IDE. To be fair, there are a few IDEs out there…but they all fall short in one way or another. Bottom line…i was stuck in whatever text editor i chose, and left to debug using something like firebug (which is, in its own right, an incredible tool…especially for ajax debugging!).

However, my longing has finally come to an end…enter Aptana!
click for full size
This screenshot, from the Aptana screenshots page, gives a great view of all of the features I’ve been looking for.
In the top left, you have a code assist profile. All htm/html files you load into it automatically pull associated JS files into the profile. Once js files are in the same profile, the IDE associates functions from all of them so when you’re in one JS file, methods from another are available and all code-assist features apply to it. Also, full javascript documentation is built in (as you can see from the yellow window next to the option listing). This also doesnt just support standard javascript functions, but many common functions from librarys like prototype, mochikit, dojo, etc. Pretty incredible if you ask me.

Oh, another thing worth mentioning. It’s cross platform. Built on java, Aptana runs beautifully on my Mac, and while performance is still to be determined, It will run on my PC at work as well.

Oh and ANOTHER another thing. It’s free. Not as in beer…really, totally free. Even support is free. There appears to be thorough documentation, a forum, and a developers blog. Quite a bit of information for a product thats in beta.

Don’t forget, it also supports the same features for (x)HTML, and CSS.

All in all, I’m sure this product will end up helping out ALOT in turning my learning curve into a flat line. While it may fall short at some point, in the mean time, its a hell of a lot better than anything I’ve used so far. I’ll be reporting back with good and bad over the next week, since I have a ton of JS development to do. Please feel free to comment on your experiences as well. Find a power-trick? Please, share!

Edit: 7:49am, 7/27/06
One minor annoyance, and I should have seen this coming:
Application performance is pretty hokey on PC…thanks to the Java platform being…well…the java platform. Oh well…once you’re in a screen, the lag goes away, but moving from dialog box to dialog box definately has some noticable lag. Bah.

the blind leading the blind?

I’ve had a tab open in firefox for the majority of my holiday weekend…for two reasons. 1, the influx of visitors I’ve had has left me staring at my google analytics page a bit more than it should have but more importantly, the contents of that tab were something i needed to take some time to think about. I discovered a small, open source project called Flash Aid. This project aims to use a small, 1px square flash embedded object to detect usability features of a users computer and use them in Ajax applications (such as a screen reader, as many other bloggers have pointed out).
I think my internal questioning started because of some of my own preconceived notions of Flash that flash is anything but accessible to begin with. So i turned to a friend/coworker Arthur Dickerson with the question: what does “flash accessibility mean”. From our brief conversation over IM, and a useful link he sent me, it seems that the big feature of the accessibility class for flash is screen reader interaction. While the methods of this class are static, that is, always available without instantiating the class, they seem to be more tedious than complicated to implement. From Macromedia - best Practices for Accessible Flash Design *warning..this is a “flash paper” document. Kinda like acrobat, but flash. ironically, my scroll wheel did NOT work which made reading it a chore :-)* this class seems to feature things like :a “motion alt text”, provide context, control reading order, enabling key access to various components, captioning, and providing control over audio playback.

Ok, fine. That’s a fair amount of good stuff to be including. But I guess I still don’t get how this is useful in AJAX application? Since Ajax is simply super dynamic content, but the structure of that content is (supposed to be) XHTML and css (which are, if built correctly, inherently accessible), how can access to this flash class be helpful?

I understand the need for usability and accessibility considerations in ajax design/development. I found this description of some accessablity considerations that should be taken when building ajax forms. It suggests notification of a lack of javascript support (and therefore an unusable form for that user), informing the user of dynamic page updates, update alerts, and highlighting of updated areas. These are all great ideas, and I agree fully with them, but once again…I don’t see where that flash class can do what javascript/xhtml/css can’t.

I always applaud people for trying to make things better for ALL users, but can someone explain to me what I’m missing here?

>More about Flash 8 Accessability features here

Litebox- Same great taste, less calories

one more post for the day. litebox does the same thing (and is practically identical as far as i can tell) to Lokesh’s Lightbox v2.0, except it uses the moo.fx effect library from mad4milk.net instead of prototype and scriptaculous. This allows it to have a significantly smaller javascript footprint and accomplish all of the same things. 1/4 the size, in fact. If you’re into javascripty stuff at all, and havent already, check out the mad4milk stuff ASAP. its pretty sweet (and well documented for a change). Schwiggity.