Picking up Node.js

Over the last 6 to 9 months I've started playing around with Node.js. Node.js has often been described as "server-side" but really it's about using a javascript engine in all the places you might want to use Javascript, but don't want the browser.

Node is CommonJS implementation. You can run code server-side, you can make command-line tools, I'm sure there is other stuff you can do with it too.

A good place to start learning Node is The Node Beginner Book at least for me it was a great starting point.

Stop the Android "bounce" on Cordova (PhoneGap) based projects

Jeremy asked how to stop the bounce on android projects that use the WebView.

What you need to do is add a little bit of code to your Java class that extends DroidGap.

First, add an import for adroid.view.View:

import android.view.View;

Then, you need to make a call to 'setOverScrollMode' - however this call is only available on android 2.3 (gingerbread) and later.
Note, you'll want to add this to the end of the onCreate method, after the call to super.onCreate

if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.GINGERBREAD) {
  this.appView.setOverScrollMode(View.OVER_SCROLL_NEVER);
}

And that should stop "OverScroll" or bounce & the associated highlighting you see.

Simple command line tool via Node.js

Here is the gist of a little script I wrote recently:

concat.js

It runs on Node, so you'll need that, and npm of course (which installs with Node), you'll also note that you'll need commander, you can ge that by running:

npm instal commander

Once you've got that installed you can use the following to get the usage information:

node concat.js

Which will return

 Usage: concat.js [options]

  Options:

    -h, --help                output usage information
    -V, --version             output the version number
    -f, --filelist [txtfile]  use an input file with a comma separated list of files to concat
    -s, --files [files]       specify the files to concat in the option
    -d, --dest [dest]         the destination file

So, it's a little script that will take a list of javascript files & concatenate them together. You can provide the list either in a text file or on the command line, and in either case it's a comma separated list of filenames.

References:
Inspiration: blog.millermedeiros.com
Node.js: Node.js
Commander.js: on github

--amend : Another reason I like Git

Once upon a time...

I worked in an office on a large development team that used a centralized source control management (SCM) system. One of the amusing check-ins you would inevitably see from time to time would be the "file I forgot to add" check-ins.

It happened like this: You made a significant change, played with one or two different solutions, did some refactoring, and came up with a significant change, and along the way you added some files. Sometimes you would remember to let the SCM system know they were added, other times you would forget & shortly after you checked in (if you were lucky enough to catch it yourself) or some time the next day (when the poor sap who had "build duty" caught you) you had to check in that last file. It was an additional checkin, and had a comment like:

"Woops, forgot this file with change #####".

Of course if anybody else wanted your change, or later wanted to roll back to a that change, they needed 2 "changelists" to identify what should have been a single point in the repository history; and they needed to know they needed both changes. It was pretty rare that it created any real problems, but I prefer the git way.

Git has a wonderful set of features around the commit keyword for fixing these mistakes. You can actually undo, redo, pick apart and merge changes that have been committed. With git you can have a much cleaner history of changes.

Upon having commited (but not pushed) a change and realizing I need to fix it I can just make and add whatever changes and then perform a:

git commit --amend

It's even possible to change older commits, provided you haven't pushed them to a shared repository, but that's out of scope for today. (You would use rebase to get to the commit you want to change.)

It's important to note that you should not try to amend a change that has been pushed to a shared repository. Git normally won't let you do this and if you force your way around it the change becomes a different change (the hash changes, even if you change just the message) and then you can have two sets of "reality" or "history" in different repositories. You're basically changing things that "can't" or "shouldn't" be changed in the repository history... and then even The Doctor won't be able to save you from your collaborators.

Ok, so --amend only helps when you catch the mistake yourself, still, a nice thing to have in the tool-chest.

New favorite git feature.

While I'm a relatively new user of git, I'm certainly getting used to it and it's way of doing things. While it's not perfect, it is much better than some of the alternatives for SCM.

So, my new favorite feature?

git stash

Say I'm working on a long running, low-priority change for a client, when they call with something more urgent. Stash let's me do just that, stash all my current changes that haven't been commited, and work on the new requirement. Once I'm done and the client has signed off on the high-priority item, I can jump right back into the low-priority task via 'git stash pop'<br/><br/>
Certainly I could do the same thing via a branch, but stash is a lot simpler and quicker.

Stop the UIWebView bounce for Cordova based projects.

For every Cordova (PhoneGap) app that I've created for iOS, I've wanted to prevent the UIWebView from bouncing. There's two potential solutions, one is a setting in the plist, and the second is a change to the objective-c code.

For PhoneGap 1.5.0 and later the best solution is to set "UIWebViewBounce" to "NO" in the PhoneGap.plist/Cordova.plist file (which file you have depends on which version of the SDK you are using.) In the 'Root' of the plist file, look for "UIWebViewBounce", and set it to "NO" or "false" (If it's missing, go ahead and add it to the plist file.)

UIWebViewBounce  NO

For versions previous to 1.5 and native projects that are using the UIWebView, you would need to make a change to the Objective-C in the project.
The solution is to send the setBounces:NO message. You'll need to change the MainViewController.m (or AppDelegate.m file in older versions of Cordova/Callback/PhoneGap).

Look for webViewDidFinishLoad, and within that method add the following line:

[[theWebView.subviews objectAtIndex:0] setBounces:NO];

Note, that I've seen suggestions that the following Javascript would work:

document.onload = function(){
    document.ontouchmove = function(e){ e.preventDefault(); }
};

This doesn't work because the bounce occurs before the document.ontouchmove event is fired.

JavaScript Coding Style

I've been working with jQuery quite a bit lately, and of course doing anything really unique in jQuery can lead to taking a look at a number of jQuery plug-ins. I came across one, that I find both very useful and extremely frustrating all at the same time.

The plug-in is small and seems both efficient and effective. It does what it was meant to do and seems to do it well. My problem with the plug-in is that I wanted to make it do something new, something very much like it's intended feature, but with a new requirement.

Unfortunately, I found the code difficult to work with, here is a sample:

function memento(t, th) {
 var w,
 m = 0,
 i = 0,
 aux = [];
 if (th) {
  t.cg[removeAttr](width);
  if (t.opt.flush) {
   S[t.id] = "";
   return;
  }
  w = S[t.id].split(";");
  for (; i < t.ln; i++) {
   aux[push](100 * w[i] / w[t.ln] + "%");
   th.eq(i).css(width, aux[i]);
  }
  for (i = 0; i < t.ln; i++)
   t.cg.eq(i).css(width, aux[i]);
 } else {
  S[t.id] = "";
  for (i in t.c) {
   w = t.c[i][width]();
   S[t.id] += w + ";";
   m += w;
  }
  S[t.id] += m;
 }
}

In the interest of full disclosure; there were comments, but I've left them off because I wanted to focus on the coding style not the comments. In fact, leaving them off in some cases made the code easier to read (and clearer where the code seemed to differ from the comments.) In general though, without the comments and the context, I don't think you have a chance of knowing what's happening in this method, and that is what I think is wrong with it.

The 'S' in the code is sessionStorage, the 't' is a table, the 'th' I believe to be a <th> element, so that one really is descriptive, but you cannot tell from the context because the other variables are reduced to single character variables.

I suspect that the original author did this to minimize the code, but in doing so I feel they have created code that is unnecessarily difficult to work with, and I don't get why. Why make all the variables single characters if you're going to leave in all the whitespace? Why hand minify when there's several readily available tools to do it for you? It did more to obfuscate the code than it did compact it, and not knowing the original authors intent, I have no idea why they did it this way.

Anyway, this was from an open-source plug-in that I had been considering using. It's almost perfect for my needs, but the style makes it something I wouldn't ask others to maintain and so, I think I'm going to have to rewrite it from scratch.

Bummer.

So, now I'm curious what others think, have I gone off the deep end? Am I being pedantic? Is this code something you would happily use in a project?