timmy willison

Devchatt is quickly becoming old news, but I wanted to go ahead and post these two presentations because I need a reliable place for refreshers.  Frank by Travis Dunn and Die Neue Javascript by Noah Burney were two of my favorite presentations.  

Side note: My other favorites were about incremental development by James Long (jlongster.com) and an introduction to Haskell by James Sanders, but I won’t be posting about those for a few reasons.  They were both excellent, but Long’s would be long post I don’t have time for and Sanders only got 1/3 or so of his presentation finished (hoping to hear the rest sometime).

Frank

As Travis eloquently put it, Frank is not a framework.  It is simply a tool for rapid static builds, written in Ruby.  It uses Tilt, so it comes with support for Haml & Sass, LESS, Builder, ERB, Liquid, Mustache, and CoffeeScript.  It has a built-in local webserver and an excellent lorem ipsum interface.  You can generate a certain number of words, paragraphs, images, emails, names, and more on the fly to get your static build out quickly.  

I played with frank a little bit and used it for a big online form I’m building.  Normally, even with Coda’s excellent autocomplete, this would take me at least 2.5-3 hours just to write the html for a form this size.  Frank cut that time in half and made it really easy to get together and compile the form into valid HTML and CSS in no time.  Another bonus: clear and concise error message made it easy to debug any problems on the way.  Also, the ducks are fun.

Cons: I don’t like SASS, but it’s optional.  Besides that, there seems to be a problem with the haml compiler generating completely valid transitional xhtml, but that was easy to fix and not Frank’s fault.  All in all, Frank is no ugly duckling.

Get Frank: http://github.com/blahed/frank

Die Neue Javascript

Ah, Noah.  Noah’s a 19-year-old genius who’s been doing javascript since he was 15 and teaches himself Korean while building letterforms in his spare time.  I loved his presentation on ‘the new javascript’.  

He started off with one of the most important javascript conventions: don’t infect the global namespace!  He stressed the importance of the var keyword and explained that when you don’t use it, you’re make your variable part of the global window object.

He then listed some little tricks to clean up javascript.  For instance:

1. Use commas to var a bunch of things at once.  var one, two, three;
2. Objects are basically associative arrays in javascript and can be referred to as such.  alert(‘Hello’); window.alert(‘Hello’); window[‘alert’](‘Hello’);
3. You can define functions with var = function(){};
4. Use javascript’s ternary operator to make conditionals shorter and when you just want to return a value.

- Next, you can add to and modify native objects.  For instance, 

Number.prototype.times = function( fn ){
  for( var n = 0; n < this; n++ )
    fn( n );
};

( 5 ).times( function( x ){
  say(
    x + 1 + ' Hello' + ( x > 0 ? 's' : '' )
  );
});

- Use call and apply for adding arguments to functions you call.  The first being the context.  Normally, this would just be null to have the window as the context.  However, “you can use Native object methods on other objects by using call, and passing the object in as the context.”  

var list = [ 1, 2, 3 ];
Array.prototype.push.call( list, 4, 5, 6 );

Function.apply is similar to call, but takes an array for the function arguments, which can be very handy.

- Inside of every function, lives the ‘arguments’ variable, meaning any arguments passed to the function that were not named in the function declaration.

function echo2(){
  say( arguments[0] + arguments[1] );
}
echo2( 'POW!', 'BOOM!' );

- Javascript Progress Bar.  As we know, Javascript is single-thread, meaning it chugs through the code one line at a time.  In order to implement a progress bar in Javascript, the magic line is in the setTimeout.  Doing a setTimeout(f, 0) will ensure that f, any function, will get executed last as it just pops f to the bottom of the call stack.  Check it out:

var counter = 0,
    total = 0;

loadup( plug, chug, plug, function(){ alert("WEEEEE!"); }, chug, plug );

function loadup(){
  var fns = Array.prototype.slice.call( arguments );
  if( typeof fns[0] === 'function' )
    total = fns.length;
  else
    fns.shift();

  fns.shift().call();
  fns.unshift( 'Not first' );

  if( fns.length > 1 )
    setTimeout( function(){
      loadup.apply( null, fns );
    }, 0 );

  say( ++counter + '/' + total );
}

function plug(){
  for( var n = 0; n < 3000; n++ )
    $('').appendTo('body').remove();
}

function chug(){
  for( var n = 0; n < 5000; n++ )
    for( var o = 0; o < 8000; o++ )
      n % o;
}

- To conclude, he ended with an example from John Resig’s Secrets of the Javascript Ninja where computationally expensive functions can be optimized by storing computed values instead of recalculating every time.  Like so:

// Ripped from John Resig's Secrets of the JavaScript ninja
Function.prototype.memoized = function( key ){
  this._values = this._values || {};
  return this._values[key] !== undefined ?
    this._values[key] :
    this._values[key] = this.apply(this,arguments);
};

Function.prototype.memoize = function(){
  var fn = this;
  return function(){
    return fn.memoized.apply( fn, arguments );
  };
};

var isPrime = function( num ) {
  var prime = num != 1;
  for ( var i = 2; i < num; i++ ) {
    if ( num % i == 0 ) {
      prime = false;
      break;
    }
  }
  return prime;
};
var isPrimeM = isPrime.memoize();

Check out his presentation and play with his code: http://presentation.royowl.com/#slide-0.
See his homepage.