neyric’s Javascript Blog

I just released the v0.2 of
Gears In Motion. The project has also migrated to Google Code so that anyone can checkout the SVN version. We also plan to use the “Issue Tracker” so feel free to add any bug/comment/feature request etc…

You can download gim-standalone-0.2.zip and launch gim-standalone.html in Firefox >= 2.

Here is a quick changeset (without the many bugfixes…):

• Display GIM in a Panel (makes it easy to use in your own project)
• Improved element liaisons visualization
• SQL export is now displayed in a field so you can copy/paste it
• Script that generate the standalone version

I get very excited by the recent release of WebRunner 0.7 : “WebRunner is a simple XULRunner based browser that hosts web applications without the normal web browser user interface.”

It lets you use your favorite web applications in a separate process/window with better OS-integration (alt-tab, desktop icon …). Many applications such as Gmail, Google Reader, Facebook and others are already packed. And it is very simple to create your own.

I get even more excited when I found out that Alex Sirota added Google Gears support on WebRunner.

His method is a bit out-of-date (I think he used WebRunner 0.5), so here is the way to do it in 2 steps under Windows (and with WebRunner 0.7) :

• Tell WebRunner to load the Google Gears extension: open regedit, and add the following key : [HKEY_LOCAL_MACHINE\SOFTWARE\WebRunner\Extensions]
  {000a9d1c-beef-4f90-9363-039d445309b8}=C:\\Program Files\\Google\\Google Gears\\Firefox\\
• Make Gears compatible with WebRunner : Open C:\Program Files\Google\Google Gears\Firefox\install.rdf and add those lines after the “em:version” tag :

  
  <em:targetApplication>
   <Description>
    <em:id>webrunner@developer.mozilla.org</em:id>
    <em:minVersion>0.4</em:minVersion>
    <em:maxVersion>1.0.0.*</em:maxVersion>
   </Description>
  </em:targetApplication>

• The third step Alex describes on his blog is NOT necessary with WebRunner 0.7 (the extension manager is already on)

The Web Applications schould now be able to use Google Gears (Gears doesn’t tell anymore that the browser is not compatible, and the google javascript object is now available).

Unfortunately, WebRunner crashes as soon as the webapp uses Gears: “Error while loading gears.dll”. After some investigation, I found out that XulRunner wasn’t able to find some dlls (which are under the WebRunner\xulrunner directory). I copied them all into windows\system32, tried again, and now WebRunner crashes without error…

I told myself: “Hey, it’s Windows, it’s not the first time an app crashes without reason…”, and hurried to MacOS X. Since we cannot use the registry to tell WebRunner to load Gears, I put the gears extension directory into /Applications/WebRunner.app/Contents/Resources/extensions, and did the second step. However, WebRunner doesn’t seem to load the extension and gears tells us that our browser is not compatible. I also tried to put it in the profile/extensions directory of WebRunner, without success.

Conclusion: After one day of relentlessness work, I wasn’t able to make it work on Windows, neither on MacOS. I even tried with Gears v0.1.54.0 and v0.1.56.0 with the same results. Did it work for you ?

Gears In Motion is a user interface that allows you to manage easily your Google Gears databases for all your Google Gears projects.

It is distributed under BSD license.

Gears in Motion is written in javascript and uses Google Gears and the YAHOO! UI 2.2.0 library.

It is very easy to use and the functionalities implemented permits you to modify your database as you could do it on a spreadsheet :

• inline editing : just click in a cell to modify it
• add dynamically a new row
• add dynamically a new column
• right-click an element to display a context menu which allows you to :
  • delete dynamically an element of a table
  • view element details such as linked elements

You can also display in a table the result of a query you entered or export your database in the sql format to use your data in another database.

• Try out the demo
• Download v0.1

In every web application that intensivly uses javascript: errors may occur !
Since I’m not able to fully-test my web-application each time a modification is made, I decided to report javascript
errors to the server. It proved to be very useful to detect bugs very quickly.

Here’s an example on how to do so with YUI :

window.onerror = function(msg, href, lineNo) {
  var postData = 'msg='+msg+'&file='+href+'&line='+
		lineNo+'&infos='+navigator.userAgent;
 YAHOO.util.Connect.asyncRequest('POST', 'report_error.php',
              { success: function(o){}, failure: function(o){} }, postData);
}

I just added “navigator.userAgent” to the parameters of window.onerror, so you know
which browser generated the error.

The version 1.0 of AFLAX has been released :

“Developed by Paul Colton, the AFLAX technology is available as a library that enables developers to use JavaScript to fully utilize all of the features of Adobe’s Flash runtime — including graphics, networking, video and camera support.”

The demos are quite impressive : http://www.aflax.org/demos.htm

Here are some rules I constrain myself to, and that can be useful for others :

1. Use good code conventions
2. Check your code: JSLint (javascript tools bundle for textmate make it automatic)
3. Minification of your code: JSMin
4. GZIP the code, don’t obfuscate: Minification v. Obfuscation

You will effectively reduce errors and debugging time by following those advices.

Douglas Crockford has written some essential articles about javascript:

Here is a few of them:

• Javascript: The World’s Most Misunderstood Programming Language
• A survey of the Javascript programming Language
• Private Members in Javascript
• Prototypal Inheritance in Javascript
• Classical Inheritance in Javascript

There are others on his javascript homepage and I strongly recommend all of them !

Javascript prototype inheritance allows a lot of code re-use.

RE-USE I said !

So, why are you still coding ?!?

Go to http://www.brainjacked.com/, and find the piece of code you’re missing !

They use Yahoo! Tech groups to publish news, so you can get their rss feed to keep up-to-date !

If you’re used to unit testing ( using JUnit in java, Test::Unit in Rails, etc… ), you might like to have a look at http://www.jsunit.net/

“It is essentially a port of JUnit to JavaScript. Also included is a platform for automating the execution of tests on multiple browsers and mutiple machines running different OSs.”

The new version of Firebug is finally released !!!

This is an awesome tool to debug and profile javascript. It has a lot of new features

compare to the previous releases.
Here is a great video of Joe Hewitt (Firebug’s author) about those new features :
http://yuiblog.com/blog/2007/01/26/video-hewitt-firebug/

I also recommend Firebug Lite that provides the console logger for other Browsers