Execute JavaScript from TextMate

TextMate is the most popular text editor for frontend development (of course, people also use emacs, vim/gvim/macvim, Aptana, Eclipse, etc.). I have been using TM for PHP development and really enjoyed the convenience of ctrl+shift+R to execute the PHP CLI scripts and view the output from TM.

I know most of people develop and debug JavaScript from development tools provided by the browser, e.g. firebug, developer tools in Chrome, Safari, etc. But it will be really neat if I can just run JavaScript and view output directly from TM.

So, I searched and searched. There are many existing blog posts on this topic already. It basically consists of two steps:

1. get a JavaScript engine that executes the JavaScript code, here are some options:

- Mac/Safari has a JS engine (SquirrelFish Extreme) built in already, it is located at /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc

- Node.js: Node.js is a event-based JS platform based on the V8 JS engine, see my previous post on how to set it up

- Mozilla JS engines: installation guide to build/install SpiderMonkey, Rhino, TraceMonkey on Mac

- For other JS engines, do a Web search for installation instructions

2. define new TM commands for JavaScript in TM bundle editor and assign ctrl+shift+R key binding to the commands.

For command setup to use Node.js, see this github snippet by beastaugh, it basically creates a script that executes another script given the file path.

For command to set up other engines, you specify the path to the engine executable, execute the JavaScript and output in a popup window. You can also use another command and open up a terminal to show the results, see this post for how to do that.

Then, you are all set. This is a screen shot that allows me to pick one of the three engines to run my JavaScript from TM ;-)

to var or not to var

It's a quite interesting and yet confusing question:

What is the difference between declaration of a variable with and without "var"?


After reading the question and answers on Stack Overflow, I finally start to get it.


First, it affects the scope of the variable.

The variable defined without var means the nearest scope in the case of a hierarchical structure, e.g. embedding one function inside another function. In most cases, a declaration without var in a function means global scope (in many cases this means window object). The variable defined with var is bound to the scope of that function.

Second, it affects the delete behavior.

The variable defined with var cannot be deleted. The variable defined without var (actually, this is a property, not a variable in the true sense) can be deleted. The reason behind this that variable defined with var has a flag of DontDelete. See this nicely explained Stack Overflow post for details.

Lastly, the general guide is to always use var.

var i = 'hello';
j = 'world';
print("i=" + i + ", j=" + j); // i=hello, j=world
(testFunc = function() {
 var i = 'foo';
 print("inside function: i=" + i); // inside function: i=foo
 print("inside function: j=" + j); // inside function: j=world
})();
delete i;
print("i=" + i); // i=hello, ha, i still exists!
delete j;
print("j=" + j); // ReferenceError: j is not defined, j got deleted

Ok, one last exercise before I close this post. Guess what is the output for this code snippet:

func2_var = 'var outside';
func2_var2 = 'var2 outside';
func2 = function() {
 var func2_var = 'var in func2 body';
 this.func2_var2 = 'var2 in func2 this';
}
func2.prototype.func2_var = 'var in func2 prototype';

f2 = new func2();
print("which var it is: " + f2.func2_var);
print("which var2 it is: " + f2.func2_var2);

The END.

Lint for JavaScript

Lint tools are very useful to detect syntax and style errors in your code. It of course has variants for JavaScript. There are many different tool setup based on your editor. On the Mac, maybe the most popular/handy editor is TextMate.

1. jslint.com: a Web tool

This is the tool developed by Douglas Crockford. It has a simple Web interface. You copy and paste your code and click JSLint button, it is that simple. The drawback is every time you make a change, you need to re-copy-n-paste and repeat the validation.

2. TextMate bundles:

johnmuhl's javascript tools tmbudle
It provides a toolkit for working with JavaScript in Textmate: JSLint, various formatters, obfuscators, and compressors.

subtleGradient's javascript tools tmbundle
This is very similar to the previous tmbundle except that it uses JavaScript Lint instead of JSLint. Also, the timestamp seems more up-to-date. The installation is very straightforward, download the src, rename it to be a TextMate bundle file and let TextMate install it. Then, you access it via various key combinations.

3. TextMate integration with JSLint:

Stoyan has a nice post with all the detailed instructions. It is a bit complicated than using method #2.

4. Vim integration with JSLint:

Only saw some discussions on Stack Overflow, did not actually try it out.

Android on iPhone

First, this does not make much sense unless you are someone who just wants to try out crazy stuff. Somehow I was in an unstable mode that day and jumped right in when I saw this article that details all the steps how to run Android 2.2.1 on iPhone.

And it turned out to be a disaster and waste of time.

The installation process all went fine. And I can boot into Android, though the boot process is a bit long (maybe because mine is iPhone 2G?)

After booting into Android, everything looked fine, except that I could not find the Market to download apps -_- !!!

I played around with existing apps. The camera is not really working and crashed several times on me. The phone dial seemed to be working fine and I can make phone calls.

Then I got bored and booted back into iOS. To my surprise, iTunes cannot recognize the iPhone anymore. This means I cannot sync and do backups, which really really sucks. The tutorial should have warned me in advance.

Another strange thing is that many settings are changed in iOS. All the name in my contacts are gone, so basically I only see the phone numbers now. Also settings like screenlock, wifi and others are also changed somehow.

I tried to restore and jailbreak again. It took me quite some time to find the right firmware and tool. Finally, everything is back to normal and data was restored.

So, I highly discourage this experiment to anyone since the software is still not stable.