Adobe Captivate Coming to a Mac Near You

The new Zen Coding project is a must for web developers. The quick story is that the Zen Coding project greatly reduces the amount of HTML code one needs to write for many, many common tasks. The developers have a bundle for TextMate and Eclipse Monkey scripts that work in Aptana and several other Eclipse editors (and, with a very minor edit, CFEClipse, too).

Here's a text-based sample of what it does for us developer.

Type the following in a file:

div#header

Then, press ALT+E and the resulting output is:

And that's just the start.

Next, type this:

p*s

And you get this:

The list goes on and on. It's an incredible time saver, in my opinion.

They have some videos, which are kind of amusing with the 'jammin' tunes :)! Here are the links:
Screencast for Aptana
Screencast for TextMate

Aptana/Eclipse Installation
Installing the scripts to work in Aptana is easy but I never dealt with Eclipse Monkey scripts so I had to ask. If you're like me and unfamiliar with Eclipse Monkey (i.e., scripting Eclipse), here's what you do.

1. Create a new project in Eclipse (I called mine Zen Coding)
2. Add a folder called 'scripts' (must be plural)
3. Copy the Zen Coding files (from the Google Code repo) to the scripts folder
4. Refresh your workspace or restart Eclipse/Aptana

That's it!

Enable for CFEclipse
To make Zen Coding available in all editors (i.e., CFEclipse), you need to make one small edit to the file called Expand Abbreviation.js (in the scripts folder).

Go to line 24 and change it from this:

var editor_type = zen_coding.getEditorType();

To this:

var editor_type = zen_coding.getEditorType() | 'html';

Refresh the workspace or restart Eclipse/Aptana and you're good to go. You can now use Zen Coding techniques/time-savers in all Eclipse editors.

The developer has tested in PDT PHP Editor, Spket IDE, Ant Editor. You can see the Aptana Forum thread on this topic here:
http://forums.aptana.com/viewtopic.php?f=14&t=8713&p=32938#p32938

Earlier today, I heard about a 'new' debugging utility for Flex, AIR, and Flash. It's called De MonsterDebugger and is absolutely worth a look.

De MonsterDebugger is an AIR application and runs alongside your Flash, Flex or AIR application. Installing the application is, of course, easy (it's an AIR app, after all!), however, the application's web site does not have a lot of documentation on it (it does have some). There's a nice video post on gotoandlearn.com for using the De MonsterDebugger.

The video is about 15 minutes long and shows how to setup your application to 'use' the debugger and some of the basic ways you can use the debugger when your application is running. If you don't want to sit through the video, following are the basic instructions to setup your application for De MonsterDebugging and how to use the debugger's trace method (versus ActionScript's).

Setting Up the Flex Application for De Monster
Setting up the Flex application is pretty simple, all in all. In brief, you import a class (more on that in a moment) and instantiate it, passing a reference to your application in the constructor. Before you do that, however, we need to export the MonsterDebugger class from De MonsterDebugger.

1. Download and install the De MonsterDebugger AIR application
2. Launch the AIR application
3. From the File menu, select Export Client Class
4. Save the exported class to the root folder of your application

The exported class action will add the following folders nl->demonsters->debugger (and a MonsterDebugger.as file in the debugger folder) to the the root folder of your Flex application, which you selected in step 4, above. We can now import the debugger class into the main application file.

<![CDATA[
import nl.demonster.debugger.MonsterDebugger;// note how this path matches the aforementioned folders
private var debugger:MonsterDebugger = new MonsterDebugger( this );// this represents the application object
]]>

That's it. Make sure that De MonsterDebugger is running and then build or open the Flex application in your browser.

Using the Debugger's trace() Method
If you want to see some cool trace details, use De MonsterDebugger's trace method. It's sweet. If you're tracing an XML object, it will render the XML object as a tree you can traverse. MUCH nicer than scrolling through the traced code in Flex :)! To use the debugger's trace method, add this snippet of code below where ever you want to run a trace:

MonsterDebugger.trace( this, trace_variable_or_string );

Nothing more to it. Please note that I called the trace method on the class and not on the class instance I created. This is correct; the trace method is a static method of the MonsterDebugger class.

Other Fun Features
One of the coolest feature sets of this debugger is that you can change properties and call methods while the application is running via the inspector and method tabs in the debugger UI. It's pretty cool and fairly intuitive to use once you get it installed and connected to your app(s). Watch the video I linked to (above) for more on these features.

Happy debugging!!