Tuesday, September 11, 2012

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.

Thursday, September 6, 2012

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.

Saturday, February 25, 2012

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?

Saturday, February 11, 2012

Scope and Variable “Hoisting” in JavaScript

Scope, in JavaScript is Function scope, and variable declarations get moved to the top of their scope.
Because the scope is function scope, the body of a function establishes new context, but if, for, switch, and {}, and anything else that is not a function does not create a new context.
So, to demonstrate that with a little code:
//Global scope
var i;
for(i=0;i<3;i++){
  //Still Global scope
  var myTotal = i;
}
alert(myTotal); // 2
Since the for loop has no affect on the variable scop, all references to myTotal above are in the Global space.
Of course functions do have a local scope, as seen with this snippet:
function newFunction() {
  //newFunction local scope
  var myVar = "Original Var";
  if (true) {
    myVar = "New Var";//newFunction local scope
  }
  alert(myVar); // "New Var"; 
}
newFunction();
alert(myVar) // ReferenceError Thrown
The alert within the function gives "New Var", which is a local variable.
The alert outside of the function throws a ReferenceError because there is no myVar in the Global space, and within the Global space we do not have access to local variables that were declared within a function body.
JavaScript also does something that has been called “hoisting”. JavaScript varable declarations will be moved to the top of their scope. Note, it's just the declarations, not the initialization.
Variable hoisting can lead to some unexpected results, for instance this:
var myVar = "Original Var"
function newFunction() {
  if (!myVar) {
    var myVar = "New Var";
  }
  alert(myVar);  
}
newFunction(); // "New Var"
The value of myVar at the if statement is undefined because the local variable has been declared, but not initialized. The variable declaration is moved to the top of the function, and so is really no different than this:
var myVar = "Original Var"
function newFunction() {
  var myVar;
  if (!myVar) {
    myVar = "New Var";
  }
  alert(myVar);  
}
newFunction(); // "New Var"
That version of the function makes it clear that the myVar is declared at the top of the scope, and that it is at that point uninitialized. It also makes clear that the if statement is extraneous by clearing up what is happening with the local variable.

Moving your variable declarations to the top is a JavaScript “Best Practice” because it turns the code into a more accurate expression of what JavaScript is actually going to do.

JavaScript Book Recommendation

I just read JavaScript: The Good Parts by Douglas Crockford.

Excellent introduction to Javascript, I wish I had read it years ago.

The author tries to stick to just the “good parts” of JavaScript, and does a great job of that, so you'd probably also need a JavaScript reference of some sort as a companion. It is, however, an introductory book I would recommend to anyone coming to JavaScript from a more classical OOP background.