If you are a Force.com developer who has to write Visualforce pages and some bit of JavaScript, you surely would get frustrated with the slow “file-save” timings that you find with Force.com Eclipse IDE. While it is powerful, it also gets slow and irritating - especially when its not even compiling anything on the JavaScript resource. And to fix a missed “comma” and it can take 10 to 30 seconds to save it 

Additionally, like me, you may not like writing javascript in Force.com IDE at all - it may not be the best JS editor - or  for some other reason.

Also if you have quite a few javascript or css files, its better to use compressed resources. But one of the reasons people don’t create a compressed static resource in Force.com is that it’s a bit of a pain in the neck to edit their contents. One way out is to use the ZipEditor plugin but this tends to the save-stuff even slower. And if you have a compressed resource for styles & heavy images - it gets way too slow to save a single CSS file.

Since its a pain to edit the static resources, many developers  start writing code JS and CSS in Visualforce pages… And end up with mixed up JS CSS VF code all in one Visualforce… something like below which is separated at a later point of time and requires extra time and effort.

It is good to keep JS and CSS stuff separated right from the beginning to avoid such cases. 

One of the productive technique that works best for me, even when working with large javascript code bases, is to use a local server to host the JS file.  i.e using “http://localhost:NNNN/…”.

I did not try “file://” since that has too many restrictions and removing those restrictions can particularly make my general browsing unsafe.

This local server may be anything - Tomcat/IIS/etc.. Or it could be Google App Engine SDK that is simpler to install runs a localserver for you  Or a CherryPy server that I use.

So now instead of accessing your JS file from Force.com (shown above), you can access it from the local machine - shown below

And you cannot completely do away with script stuff on the Visualforce tab - but can minimize it to accessing server side resources.

Now you can use any editor like Notepad++ or TextMate, save the JS file instantaneously locally and refresh the page. 

If you use Google Chrome , you will get the “content blocked” error.

To deal with this, you will need to start Chrome with “–allow-running-insecure-content” flag. This is required because your page URL would be secure “https://…” while the local server uses “http://”. This flag is not required if you are using Firefox (tested on v18).  You can simply create a batch file for launching Chrome when developing:

Now Chrome will display a warning in console and continue

If you intend to use CherryPy server, the code for the applicaiton hosting these static files is simple

You can download the python code here

If you want to use Google  App Engine SDK, simply create a new application and add static_dir handlers to app.yaml, shown below. For more information visit Getting Started for App Engine

Hope this post was helpful - If you like it please share/like/comment on this.