The Beauty and Simplistic Complexity of jQuery: A Love Story.

It was week 7 at WDI and JavaScript was still on my mind. How could I have been so naive? So foolish? To think that just two weeks before I was riding the Rails, my first full app dinr was deployed and going strong, no cares in the world...the Internet, my playground. The CRUDiest MVCs could be found rendering my heart's desires for the world to see. RESTful days, led to RESTful nights. It seemed like I could conquer anything, the Internet was mine. 

Then I met her...

Her close friends called her ECMA, but she told me to call her JS. After that day everything changed. Implicit returns? Gone. My dreams turned to nightmares filled with unexpected token errors, NaN violations, schizophrenic variables changing value with reckless abandon.

The solid world that was Ruby had become a metaphysical canvas of fleeting elements, coming and going, passing with each failed callback. I couldn't understand a single word she was saying. We met on the DOM everyday, hoping we might share a moment of understanding. Global variables, prototypes, Objects, nothing made sense. I was losing confidence, doubting myself. It seemed like an insurmountable feat. I knew our potential, but concepts that were a breeze with Ruby seemed completely foreign to me. The libraries of gems that I once played in had become toxic ground overnight. It was better to write out a for loop than try to use Underscore, for loops were comfortable, something we both understood. I was ready to walk away from JS forever, and retreat to the back-end for the rest of my days. But one day JS met me with a puzzling look on her face. Whenever she went to speak I heard faint rumblings of Jerry Maguire..."SHOW ME THE MONEY! SHOW ME THE MONEY!" We were having a breakthrough. My words started to make sense, we started to understand each other. Our most complicated of thoughts seemed to link together and appear in front of my eyes almost magically.

jQuery, or just $ for short, changed everything. She told me that it was all a test. A test of patience, a test of persistence, a test of grit. I had to suffer, before I could truly understand and appreciate the complex beauty. Would jQuery mean as much to me if we hadn't spent all those hours, struggling with our words, wanting so hard to understand each other, but always falling just a little bit short. Now I feel whole again, stronger than ever. Working on my first group project this weekend, jQuery by my side, Rails beneath us. The future looks bright...and full of gifs. 

My Javascript Recipie

Give a hoot! Don't pollute the global namespace!

Today my partners and I were where working on a snazzy little javascript list maker called List.io.

Basically, you add a task to the form click on the New Task button and it will create to do items in a list. Each item in the list will have a 'completed' button and a 'delete' button.

Everything worked great when we where testing one item. But when we made an actual list of more than three items and began to click them as 'completed', we got an error:

The error says "Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist." It occurs on line 19:  actionDiv.removeChild(completeButton);

var listItems =[];

function makeElem(list){ 

   li = document.createElement("li"); //creating li

  itemDiv = document.createElement("div"); //creating div

  itemDiv.setAttribute("class", "items"); //creating the class name

  itemDiv.innerHTML = list[list.length -1]; //put inside div the last thing in array

  var actionDiv = document.createElement("div");

  actionDiv.setAttribute("class", "actions");

  completeButton = document.createElement("button"); //create button

  completeButton.setAttribute("id", "complete"); //give button the complete attribute

  completeButton.innerHTML = "complete";  //label the button 'complete'

  completeButton.addEventListener("click", function(){

    console.log(actionDiv);

    console.log(completeButton);

    actionDiv.removeChild(completeButton);

    completeTasks.appendChild(li);

  }); etc...

Can you guess what's wrong with this picture?

Exactly, the global namespace is crazy polluted, yo!

And because it was polluted, our "actionDiv" which among other things,  removed the 'completed' button, stopped working. 

Lets add some vars to clean it up like so:

var listItems =[];

function makeElem(list){

-->  var li = document.createElement("li"); //creating li

--> var itemDiv = document.createElement("div"); //creating div

  itemDiv.setAttribute("class", "items"); //creating the class name

  itemDiv.innerHTML = list[list.length -1]; //put inside div the last thing in array

-->  var actionDiv = document.createElement("div");

  actionDiv.setAttribute("class", "actions");

-->  var completeButton = document.createElement("button"); //create button

  completeButton.setAttribute("id", "complete"); //give button the complete attribute

  completeButton.innerHTML = "complete"; //label the button 'complete'

  completeButton.addEventListener("click", function(){

    console.log(actionDiv);

    console.log(completeButton);

    actionDiv.removeChild(completeButton);

    completeTasks.appendChild(li);

  });  etc...

By NOT declaring the variables with "var" INSIDE your function, you are in effect creating a variable outside of the function which makes it a global variable which can be overwritten, disappear, muck things up...in essence, POLLUTE the global namespace, dude. So if you ever get a funky error, like we did, check to see if you need to give hoot and mind your vars.

data and object modeling using the real world

Recently we were working on creating object and data models for a various number of scenarios, including Auction, Magic Eight Ball, and Taxi Meters.  It was an interesting exercise, all using pseudo code, that got us thinking about how to set up models, attributes, actions, and how the models interacted with each other.  I'd like to take a second and review the Taxi Meter example because I found it particularly exciting.

Having walked through the various functions with my partner and come up with a very nice simple model and methods, I was looking at what we had, which looked something like this...

class Taxi Meter

  attributes: fare, extras, dollar_increment, time_increment

  #initialize(base, dollar_increment, time_increment)
  #start()
  #stop()
  #reset() 

... and what what I would describe as a little mini-epiphany. What I was looking at was basically a translation for the actual, real world object!

The attributes were what you could see (mostly) and the methods were the buttons.  Simple.  It was pretty cool seeing the direct connection between the model and the object and I will try to use this as a strategy of mine going forward.