Merge pull request #61 from headwinds/gh-pages

Module Backbone Tutorial: Mining Github for Contributor Gold

37 files changed, 942 insertions, 153 deletions

diff --git a/.gitignore b/.gitignore
index e14e9fe..f8852f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,5 @@
 *config.js
 *node_modules/
 .DS_Store
+*.sublime-project
+*.sublime-workspace
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
index 5b41bb7..7d70d02 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -130,8 +130,8 @@ input:invalid, textarea:invalid {
 /* These selection declarations have to be separate
    No text-shadow: twitter.com/miketaylr/status/12228805301
    Also: hot pink! */
-::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
-::selection { background:#FF5E99; color:#fff; text-shadow: none; }
+::-moz-selection{ background: #666; color:#fff; text-shadow: none; }
+::selection { background:#666; color:#fff; text-shadow: none; }
 
 /* j.mp/webkit-tap-highlight-color */
 a:link { -webkit-tap-highlight-color: #FF5E99; }
diff --git a/examples/modular-backbone/css/style.css b/examples/modular-backbone/css/style.css
index 7631f59..86fe975 100644
--- a/examples/modular-backbone/css/style.css
+++ b/examples/modular-backbone/css/style.css
@@ -41,8 +41,8 @@ body, button, input, select, textarea { font-family: sans-serif; color: #222; }
  * Also: hot pink!
  */
 
-::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
-::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::-moz-selection { background: #666; color: #fff; text-shadow: none; }
+::selection { background: #666; color: #fff; text-shadow: none; }
 
 
 /* =============================================================================
@@ -245,11 +245,333 @@ h1{
   border-bottom: 1px solid #ebebeb;
   min-height: 400px;
   padding: 20px;
+  overflow: hidden;
 }
 
+#page  {
+  
+}
+
+ #page .main {
+    display: block;
+    position:relative;
+    top: 0px;
+    left: 0px;
+    padding: 0px;
+    margin: 0px;
+    width: 500px;
+    float: left;
+    overflow: hidden;
+  }
+
+ #page .sidebar {
+    display: block;
+    position:relative;
+    top: 0px;
+    left: 0px;
+    padding: 10px;
+    margin: 0px;
+    width: 400px;
+    height: 300px;
+    background-color:#FFF;
+    float: left;
+  }
+
+  #page .sidebar .ad {
+    clear:both;
+  }
+
+  #page .sidebar .ad .pic {
+    display: block;
+    position: relative;
+    margin: 0px;
+    padding: 0px;
+    float: left;
+    top: 0px;
+    left: 0px;
+    width: 150px;
+  }  
+
+  #page .sidebar .ad .info {
+    display: block;
+    position: relative;
+    margin: 0px;
+    padding: 0px;
+    float: left;
+    top: 0px;
+    left: 0px;
+    width: 250px;
+  }  
+
+  #page .sidebar .ad .info h4 {
+    font-size: 16px;
+    color:#666;
+  }
+
+  #page .sidebar .ad .info p {
+    font-size: 10px;
+    color:#999;
+  }
+
+#page .contributors-stats ul {
+  list-style: none;
+}
+
+#page .contributors-stats ul li {
+  display:block;
+  position: relative;
+  height: 20px;
+}
+
+#page .contributors-stats ul li p {
+  font-size: 20px;
+  color:#999;
+  font-weight: bold; 
+  margin: 0px;
+  padding: 0px;
+}
+
+#page #contributors-list {
+
+}
+
+#page #contributors-list ul.contributors {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  #page #contributors-list ul.contributors li {
+    display: block;
+    position: relative;
+    margin: 0px;
+    padding: 0px;
+    top: 0px;
+    left: 0px;
+    float: left;
+  }
+
+ #page #contributors-list ul.contributors li div.contributor {
+    display: block;
+    position: relative;
+    margin: 0px;
+    padding: 0px;
+    top: 0px;
+    left: 0px;
+    border: 1px solid #CCC;
+ } 
+
+ #page #contributors-list ul.contributors li div.contributor ul {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+
+ } 
+
+ #page #contributors-list ul.contributors li div.contributor ul li {
+    display: block;
+    position: absolute;
+    margin: 0px;
+    padding: 0px;
+    top: 0px;
+    left: 0px;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.username {
+    z-index: 2;
+    height: 14px;
+    border: none;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.username p {
+    display:block;
+    position: absolute;
+    margin: 0px;
+    padding: 0px;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 14px;
+    background-color: #CCC;
+    text-align: center;
+    font-size: 10px;
+    font-weight: bold;
+    color:#999;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.username p a {
+    color:#999;
+    text-decoration: none;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.username p a:hover {
+    color:#334231;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.pic {
+    z-index: 1;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.pic a {
+    display:block;
+    position: absolute;
+    margin: 0px;
+    padding: 0px;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    border: none;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.pic p {
+    display: block;
+    position: absolute;
+    margin: 0px;
+    padding: 0px;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.contributions {
+    z-index: 3;
+    pointer-events:none;
+ }
+
+ #page #contributors-list ul.contributors li div.contributor ul li.contributions p {
+    display:block;
+    position: absolute;
+    left:0px;
+    width:100%;
+    height: 15%;
+    top: 85%;
+    background-color: #333;
+    text-align: center;
+    font-size: 10px;
+    font-weight: bold;
+    color:#666;
+    margin:0px;
+    padding:0px;
+ }
+
+
 #footer {
-  text-align: center;
+  display: block;
+  position:relative;
+  text-align: left;
+  background-color:#CCC;
+  height: 100px; 
+  margin:0px;
+  padding:0px;
+  -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.35);
+}
+
+#footer ul {
+  list-style-type: none;
+  margin:0px;
+  padding:0px;
+}
+
+#footer ul li {
+  display:block;
+  position:relative;
+  width: 100%;
+  height: 20px;
+  margin: 0px;
+  padding: 0px;
+}
+
+#footer p {
+  font-size: 20px;
+  font-weight: bold;
+  color: rgba(153, 153, 153, 0.35);
+  margin: 0px;
+  padding: 0px;
+}
+
+#footer .pic {
+  display:block;
+  position:absolute;
+  float: left;
+  margin:5px;
+  padding:0px;
+  width: 90px;
+  height: 90px;
+  top: 0px;
+  left: 0px;
+}
+
+#footer .pic a {
+  display:block;
+  position:absolute;
+  margin:0px;
+  padding:0px;
+  width: 90px;
+  height: 90px;
+  top: 0px;
+  left: 0px;
+  border: 1px #999 solid;
+}
+
+#footer .pic a img {
+  display:block;
+  position:absolute;
+  margin:0px;
+  padding:0px;
+  width: 90px;
+  height: 90px;
+  top: 0px;
+  left: 0px;
+  filter: grayscale(100%);
+  /*filter: url(filters.svg#grayscale); 
+  filter: gray;*/
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+}
+
+#footer .info {
+  display:block;
+  position:relative;
+  float: left;
+  margin:0px;
+  padding:0px;
+  width: 100%;
+  height: 100px;
+  top: 10px;
+  left: 120px;
+}
+
+
+
+/* =============================================================================
+   Page styles
+   ========================================================================== */
+
+#home {
+
 }
+
+#home .main {
+
+}
+
+#home #sidebar {
+
+}
+
+#projects {
+
+}
+
+#contributors {
+
+}
+
+
+
 /* =============================================================================
    Non-semantic helper classes
    Please define your styles before this section.
diff --git a/examples/modular-backbone/imgs/backbone_logo.png b/examples/modular-backbone/imgs/backbone_logo.png
new file mode 100644
index 0000000..b98d878
--- /dev/null
+++ b/examples/modular-backbone/imgs/backbone_logo.png
diff --git a/examples/modular-backbone/imgs/require_logo.png b/examples/modular-backbone/imgs/require_logo.png
new file mode 100644
index 0000000..528c86b
--- /dev/null
+++ b/examples/modular-backbone/imgs/require_logo.png
diff --git a/examples/modular-backbone/index.html b/examples/modular-backbone/index.html
index 149f05b..b9a123e 100644
--- a/examples/modular-backbone/index.html
+++ b/examples/modular-backbone/index.html
@@ -26,16 +26,14 @@
   <div id="menu">
     <ul>
       <li><a href="#">Home</a></li>
-      <li><a href="#/projects">Project List</a></li>
-      <li><a href="#/users">User List</a></li>
+      <li><a href="#/projects">Projects</a></li>
+      <li><a href="#/users">Contributors</a></li>
     </ul>
   </div>
   <div id="page">
     Loading....
   </div>
-  <div id="footer">
-    Thomas Davis
-  </div>
+  <div id="footer"></div>
 </div> 
 
 </body>
diff --git a/examples/modular-backbone/js/collections/contributors/ContributorsCollection.js b/examples/modular-backbone/js/collections/contributors/ContributorsCollection.js
new file mode 100644
index 0000000..78a9b4d
--- /dev/null
+++ b/examples/modular-backbone/js/collections/contributors/ContributorsCollection.js
@@ -0,0 +1,51 @@
+define([
+  'underscore',
+  'backbone',
+  'models/contributor/ContributorModel'
+], function(_, Backbone, ContributorModel){
+
+  var ContributorsCollection = Backbone.Collection.extend({
+      
+      model: ContributorModel,
+
+      initialize : function(models, options) {},
+      
+      url : function() {
+        return 'https://api.github.com/repos/thomasdavis/backbonetutorials/contributors';
+      },
+    
+      parse : function(data) {
+          var uniqueArray = this.removeDuplicates(data);
+          return uniqueArray;
+      },
+      
+      removeDuplicates: function(myArray) {
+
+          //credit: http://newcodeandroll.blogspot.ca/2012/01/how-to-find-duplicates-in-array-in.html  
+          // I was hoping underscore's _uniq would work here but it only seems to work for single values not objects               
+          var length = myArray.length;
+          var ArrayWithUniqueValues = [];
+          
+          var objectCounter = {};
+          
+          for (i = 0; i < length; i++) {
+          
+              var currentMemboerOfArrayKey = JSON.stringify(myArray[i]);
+              var currentMemboerOfArrayValue = myArray[i];
+            
+              if (objectCounter[currentMemboerOfArrayKey] === undefined){
+                  ArrayWithUniqueValues.push(currentMemboerOfArrayValue);
+                 objectCounter[currentMemboerOfArrayKey] = 1;
+              }else{
+                 objectCounter[currentMemboerOfArrayKey]++;
+              }
+          }
+      
+          return ArrayWithUniqueValues;
+      }        
+     
+  });
+
+  return ContributorsCollection;
+
+});
\ No newline at end of file
diff --git a/examples/modular-backbone/js/collections/projects.js b/examples/modular-backbone/js/collections/projects.js
deleted file mode 100644
index ae7c7b7..0000000
--- a/examples/modular-backbone/js/collections/projects.js
+++ /dev/null
@@ -1,16 +0,0 @@
-define([
-  'jquery',
-  'underscore',
-  'backbone',
-  'models/projects'
-], function($, _, Backbone, ProjectsModel){
-  var ProjectsCollection = Backbone.Collection.extend({
-    model: ProjectsModel,
-    initialize: function(){
-
-    }
-
-  });
- 
-  return ProjectsCollection;
-});
diff --git a/examples/modular-backbone/js/collections/projects/ProjectsCollection.js b/examples/modular-backbone/js/collections/projects/ProjectsCollection.js
new file mode 100644
index 0000000..a8b0676
--- /dev/null
+++ b/examples/modular-backbone/js/collections/projects/ProjectsCollection.js
@@ -0,0 +1,25 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'models/project/ProjectModel'
+], function($, _, Backbone, ProjectModel){
+  var ProjectsCollection = Backbone.Collection.extend({
+    model: ProjectModel,
+    
+    initialize: function(){
+
+      var project0 = new ProjectModel('Cross Domain', 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/cross-domain'); 
+      var project1 = new ProjectModel('Infinite Scroll', 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/infinite-scroll'); 
+      var project2 = new ProjectModel('Modular Backbone','https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone'); 
+      var project3 = new ProjectModel('Node MongoDB Mongoose Restify','https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify');
+      var project4 = new ProjectModel('Todo App','https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/todo-app');
+
+      //this.add([project0, project1, project2, project3, project4]);
+
+    }
+
+  });
+ 
+  return ProjectsCollection;
+});
diff --git a/examples/modular-backbone/js/collections/template.js b/examples/modular-backbone/js/collections/template.js
deleted file mode 100644
index 0b3ccfc..0000000
--- a/examples/modular-backbone/js/collections/template.js
+++ /dev/null
@@ -1,8 +0,0 @@
-define([
-  'jquery',
-  'underscore',
-  'backbone'
-], function($, _, Backbone){
-
-  return {};
-});
diff --git a/examples/modular-backbone/js/models/contributor/ContributorModel.js b/examples/modular-backbone/js/models/contributor/ContributorModel.js
new file mode 100644
index 0000000..6bd95a4
--- /dev/null
+++ b/examples/modular-backbone/js/models/contributor/ContributorModel.js
@@ -0,0 +1,18 @@
+define([
+  'underscore',
+  'backbone',
+], function(_, Backbone) {
+
+  var ContributorModel = Backbone.Model.extend({
+
+  	defaults : {
+  		medalHex : '#A67D3D',
+  		picWidth : '100px',
+  		githubPath : 'concat github and login'
+  	}
+
+  });
+
+  return ContributorModel;
+
+});
diff --git a/examples/modular-backbone/js/models/owner/OwnerModel.js b/examples/modular-backbone/js/models/owner/OwnerModel.js
new file mode 100644
index 0000000..0867f56
--- /dev/null
+++ b/examples/modular-backbone/js/models/owner/OwnerModel.js
@@ -0,0 +1,28 @@
+define([
+  'underscore',
+  'backbone',
+], function(_, Backbone) {
+
+  var OwnerModel = Backbone.Model.extend({
+
+  		defaults : {
+          query : "unknown"
+      },  
+
+      initialize: function( options ) {
+  			this.query = options.query; 
+  		},
+
+		url : function() {
+	        return 'https://api.github.com/users/' + this.query;
+	    },
+	    
+	    parse : function(data) {  
+	        return data;
+	    }
+
+    });
+
+  	return OwnerModel;
+
+});
diff --git a/examples/modular-backbone/js/models/project/ProjectModel.js b/examples/modular-backbone/js/models/project/ProjectModel.js
new file mode 100644
index 0000000..ffbc25d
--- /dev/null
+++ b/examples/modular-backbone/js/models/project/ProjectModel.js
@@ -0,0 +1,10 @@
+define([
+  'underscore',
+  'backbone'
+], function(_, Backbone) {
+  
+  var ProjectModel = Backbone.Model.extend({});
+
+  return ProjectModel;
+
+});
diff --git a/examples/modular-backbone/js/models/projects.js b/examples/modular-backbone/js/models/projects.js
deleted file mode 100644
index 63ce123..0000000
--- a/examples/modular-backbone/js/models/projects.js
+++ /dev/null
@@ -1,15 +0,0 @@
-define([
-  'underscore',
-  'backbone'
-], function(_, Backbone) {
-  var ProjectsModel = Backbone.Model.extend({
-    defaults: {
-      score: 10
-    },
-    initialize: function(){
-    }
-    
-  });
-  return ProjectsModel;
-
-});
diff --git a/examples/modular-backbone/js/router.js b/examples/modular-backbone/js/router.js
index 4175c59..9239cb2 100644
--- a/examples/modular-backbone/js/router.js
+++ b/examples/modular-backbone/js/router.js
@@ -2,13 +2,17 @@
 define([
   'jquery',
   'underscore',
-  'backbone'
-], function($, _, Backbone ){
+  'backbone',
+  'views/home/HomeView',
+  'views/projects/ProjectsView',
+  'views/contributors/ContributorsView',
+  'views/footer/FooterView'
+], function($, _, Backbone, HomeView, ProjectsView, ContributorsView, FooterView) {
   var AppRouter = Backbone.Router.extend({
     routes: {
       // Define some URL routes
       'projects': 'showProjects',
-      'users': 'showUsers',
+      'users': 'showContributors',
       
       // Default
       '*actions': 'defaultAction'
@@ -16,29 +20,38 @@ define([
   });
   var initialize = function(){
     var app_router = new AppRouter;
+    
     app_router.on('route:showProjects', function(){
-      require(['views/projects/list'], function(ProjectListView) {
+   
         // Call render on the module we loaded in via the dependency array
-        // 'views/projects/list'
-        var projectListView = new ProjectListView();
-        projectListView.render();
-      })
+        var projectsView = new ProjectsView();
+        projectsView.render();
+
     });
-    app_router.on('route:showUsers', function () {
-      require(['views/users/list'], function(UserListView) {
-        // As above, call render on our loaded module
-        // 'views/users/list'
-        var userListView = new UserListView();
-        userListView.render();
-      });
+
+    app_router.on('route:showContributors', function () {
+    
+        // Like above, call render but know that this view has nested sub views which 
+        // handle loading and displaying data from the GitHub API  
+        var contributorsView = new ContributorsView();
+        //contributorsView.initialize();
+        //contributorsView.render();
+
     });
+
     app_router.on('route:defaultAction', function (actions) {
-      require(['views/home/main'], function(MainHomeView) {
-      // We have no matching route, lets display the home page 
-        var mainHomeView = new MainHomeView();
-        mainHomeView.render();
-      });
+     
+       // We have no matching route, lets display the home page 
+        var homeView = new HomeView();
+        homeView.render();
+
+         // unlike the above, we don't call render on this view
+        // as it will handle the render call internally after it
+        // loads data 
+        var footerView = new FooterView();
+
     });
+
     Backbone.history.start();
   };
   return { 
diff --git a/examples/modular-backbone/js/views/contributors/ContributorsListView.js b/examples/modular-backbone/js/views/contributors/ContributorsListView.js
new file mode 100644
index 0000000..629e96f
--- /dev/null
+++ b/examples/modular-backbone/js/views/contributors/ContributorsListView.js
@@ -0,0 +1,64 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'collections/contributors/ContributorsCollection',
+  'text!templates/contributors/contributorsListTemplate.html'
+], function($, _, Backbone, ContributorsCollection, contributorListTemplate){
+  
+  var ContributorsListView = Backbone.View.extend({
+    el : $("#contributors-list"),
+    tagName:"ul",
+    render : function() {
+
+        var that = this;
+        that.awardMedals(this.collection.models); 
+
+        var data = {
+              contributors: this.collection.models,
+              _: _ 
+            };
+
+        var compiledTemplate = _.template( contributorListTemplate, data );
+        $("#contributors-list").html( compiledTemplate ); 
+ 
+        return this;
+      }, 
+
+      awardMedals : function(aModels) {
+        var goldMedalHex = '#CFB52B';
+        var silverMedalHex = '#E6E8FA';
+        var bronzeMedalHex = '#A67D3D';
+        var githubPath;
+
+        _.each(aModels, function(contributor) {
+
+            var contributions = Number ( contributor.get( 'contributions' ) );
+            var medalHex; 
+            var picWidth; 
+
+            if ( contributions >= 50 ) {
+              medalHex = goldMedalHex;
+              picWidth = '160px';
+            } else if ( contributions < 50 && contributions >= 5) {
+              medalHex = silverMedalHex;
+              picWidth = '120px';
+            } else {
+              medalHex = bronzeMedalHex;
+              picWidth = '80px';
+            }
+
+            githubPath = "https://github.com/" + contributor.get('login');
+
+            contributor.set( 'medalHex', medalHex);
+            contributor.set( 'picWidth', picWidth);
+            contributor.set( 'githubPath', githubPath);
+
+        });
+      }
+
+  });
+
+  return ContributorsListView;
+
+});
diff --git a/examples/modular-backbone/js/views/contributors/ContributorsView.js b/examples/modular-backbone/js/views/contributors/ContributorsView.js
new file mode 100644
index 0000000..24644c9
--- /dev/null
+++ b/examples/modular-backbone/js/views/contributors/ContributorsView.js
@@ -0,0 +1,60 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'collections/contributors/ContributorsCollection',
+  'views/contributors/ContributorsListView',
+  'text!templates/contributors/contributorsTemplate.html'
+], function($, _, Backbone, ContributorsCollection, ContributorsListView, contributorsTemplate){
+
+  var ContributorsView = Backbone.View.extend({
+    
+    el: $("#page"),
+
+    initialize:function() {
+
+      var that = this;
+
+      var onDataHandler = function(collection) {
+          that.render();
+      }
+
+      this.collection = new ContributorsCollection([]); 
+      this.collection.fetch({ success : onDataHandler });
+
+    },
+
+    render: function(){
+
+      var total_contributions = this.getTotalContributions(this.collection.models);
+      var total_contributors = this.collection.models.length;  
+    
+      var data = { total_contributions : total_contributions, 
+                  total_contributors : total_contributors}; 
+
+      // main view  
+      var compiledTemplate = _.template( contributorsTemplate, data );
+      this.$el.html( compiledTemplate ); 
+
+      // sub view 
+      var contributorsListView = new ContributorsListView({ collection: this.collection}); 
+      contributorsListView.render();
+
+    },
+
+    getTotalContributions:function( aModels ){
+
+      var total = 0;
+      
+      _.each(aModels, function(contributorModel) { 
+         var contributorContributions = Number ( contributorModel.get("contributions") );
+         total += contributorContributions; 
+      });
+
+      return total; 
+    }
+
+
+  });
+  return ContributorsView;
+});
diff --git a/examples/modular-backbone/js/views/contributors/contributor/ContributorView.js b/examples/modular-backbone/js/views/contributors/contributor/ContributorView.js
new file mode 100644
index 0000000..299153d
--- /dev/null
+++ b/examples/modular-backbone/js/views/contributors/contributor/ContributorView.js
@@ -0,0 +1,50 @@
+define([
+  'underscore',
+  'backbone',
+  'models/contributor/ContributorModel'
+], function(_, Backbone, ContributorModel){    
+    
+    var ContributorView = Backbone.View.extend({
+        tagName : "li",
+        render : function() {
+            
+           var contributor = { avatar_url : this.model.get("avatar_url"), 
+                               login : this.model.get("login"), 
+                               url : this.model.get("url"),
+                               contributions: this.model.get("contributions")};
+            
+          //console.log("view created");
+            
+          /*
+            var contributorTemplate = '<div class="contributor">' +
+                            '<ul>' +
+                                '<li>' +
+                                '<img class="pic" width="100" src="<%= avatar_url %>">' +
+                                '</li>' +
+                                '<li>' +
+                                    '<p class="blog"><a class="blogurl" href="<%= url %>"><%= login %></a></p>' +
+                                '</li>' +
+                                '<li>' +
+                                    '<p class="contributions"><%= contributions %></p>' +
+                                '</li>' +
+                            '</ul>' + 
+                        '</div>';
+           
+            //var contributorTemplate = $('#contributor-underscore-template').html(); hmmmmm???? 
+                  
+            var rendered_template = _.template(contributorTemplate, contributor);
+            //console.log(rendered_template,contributor);
+            
+            $(this.el).append(rendered_template);
+            */
+
+            
+            
+           return this;
+        }
+        
+    });
+
+    return ContributorModel;
+
+}); 
\ No newline at end of file
diff --git a/examples/modular-backbone/js/views/footer/FooterView.js b/examples/modular-backbone/js/views/footer/FooterView.js
new file mode 100644
index 0000000..ed4412d
--- /dev/null
+++ b/examples/modular-backbone/js/views/footer/FooterView.js
@@ -0,0 +1,42 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'models/owner/OwnerModel',
+  'text!templates/footer/footerTemplate.html'
+], function($, _, Backbone, OwnerModel, footerTemplate){
+
+  var FooterView = Backbone.View.extend({
+    el: $("#footer"),
+
+    initialize: function() {
+
+      var that = this;
+      var options = {query: 'thomasdavis'}
+     
+
+      var onDataHandler = function(collection) {
+          that.render();
+      }
+
+      this.model = new OwnerModel(options);
+      this.model.fetch({ success : onDataHandler });
+
+    },
+
+    render: function(){
+
+      var data = {
+        owner: this.model.toJSON(),
+        _: _ 
+      };
+
+      var compiledTemplate = _.template( footerTemplate, data );
+      this.$el.html(compiledTemplate);
+    }
+
+  });
+
+  return FooterView;
+  
+});
diff --git a/examples/modular-backbone/js/views/home/HomeView.js b/examples/modular-backbone/js/views/home/HomeView.js
new file mode 100644
index 0000000..6c884f4
--- /dev/null
+++ b/examples/modular-backbone/js/views/home/HomeView.js
@@ -0,0 +1,25 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'views/sidebar/SidebarView',
+  'text!templates/home/homeTemplate.html'
+], function($, _, Backbone, SidebarView, homeTemplate){
+
+  var HomeView = Backbone.View.extend({
+    el: $("#page"),
+
+    render: function(){
+      
+      this.$el.html(homeTemplate);
+
+      var sidebarView = new SidebarView();
+      sidebarView.render();
+ 
+    }
+
+  });
+
+  return HomeView;
+  
+});
diff --git a/examples/modular-backbone/js/views/home/main.js b/examples/modular-backbone/js/views/home/main.js
deleted file mode 100644
index 9ccffaf..0000000
--- a/examples/modular-backbone/js/views/home/main.js
+++ /dev/null
@@ -1,15 +0,0 @@
-define([
-  'jquery',
-  'underscore',
-  'backbone',
-  'text!templates/home/main.html'
-], function($, _, Backbone, mainHomeTemplate){
-
-  var MainHomeView = Backbone.View.extend({
-    el: $("#page"),
-    render: function(){
-      this.$el.html(mainHomeTemplate);
-    }
-  });
-  return MainHomeView;
-});
diff --git a/examples/modular-backbone/js/views/projects/ProjectsListView.js b/examples/modular-backbone/js/views/projects/ProjectsListView.js
new file mode 100644
index 0000000..9eedea3
--- /dev/null
+++ b/examples/modular-backbone/js/views/projects/ProjectsListView.js
@@ -0,0 +1,27 @@
+// Filename: views/projects/list
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  // Pull in the Collection module from above,
+  'models/project/ProjectModel',
+  'collections/projects/ProjectsCollection',
+  'text!templates/projects/projectsListTemplate.html'
+
+], function($, _, Backbone, ProjectModel, ProjectsCollection, projectsListTemplate){
+  var ProjectListView = Backbone.View.extend({
+    el: $("#projects-list"),
+
+    render: function(){
+      
+      var data = {
+        projects: this.collection.models,
+        _: _ 
+      };
+
+      var compiledTemplate = _.template( projectsListTemplate, data );
+      $("#projects-list").html( compiledTemplate ); 
+    }
+  });
+  return ProjectListView;
+});
diff --git a/examples/modular-backbone/js/views/projects/ProjectsView.js b/examples/modular-backbone/js/views/projects/ProjectsView.js
new file mode 100644
index 0000000..64d268c
--- /dev/null
+++ b/examples/modular-backbone/js/views/projects/ProjectsView.js
@@ -0,0 +1,43 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'views/sidebar/SidebarView',
+  'models/project/ProjectModel',
+  'collections/projects/ProjectsCollection',
+  'views/projects/ProjectsListView',
+  'text!templates/projects/projectsTemplate.html'
+], function($, _, Backbone, SidebarView, ProjectModel, ProjectsCollection, ProjectsListView, projectsTemplate){
+
+  var ProjectsView = Backbone.View.extend({
+    el: $("#page"),
+    render: function(){
+      
+      this.$el.html(projectsTemplate);
+
+      var project0 = new ProjectModel({title: 'Cross Domain', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/cross-domain'}); 
+      var project1 = new ProjectModel({title:'Infinite Scroll', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/infinite-scroll'}); 
+      var project2 = new ProjectModel({title:'Modular Backbone', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone'}); 
+      var project3 = new ProjectModel({title:'Node MongoDB Mongoose Restify', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/nodejs-mongodb-mongoose-restify'});
+      var project4 = new ProjectModel({title:'Todo App', url: 'https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/todo-app'});
+
+      var aProjects = [project0, 
+                      project1,
+                      project2,
+                      project3,
+                      project4];
+
+      var projectsCollection = new ProjectsCollection(aProjects);  
+      var projectsListView = new ProjectsListView({ collection: projectsCollection}); 
+      
+      projectsListView.render(); 
+
+      // add the sidebar 
+      var sidebarView = new SidebarView();
+      sidebarView.render();
+
+    }
+  });
+
+  return ProjectsView;
+});
diff --git a/examples/modular-backbone/js/views/projects/list.js b/examples/modular-backbone/js/views/projects/list.js
deleted file mode 100644
index f0f0179..0000000
--- a/examples/modular-backbone/js/views/projects/list.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Filename: views/projects/list
-define([
-  'jquery',
-  'underscore',
-  'backbone',
-  // Pull in the Collection module from above
-  'collections/projects',
-  'text!templates/projects/list.html'
-
-], function($, _, Backbone, ProjectsCollection, projectListTemplate){
-  var projectListView = Backbone.View.extend({
-    el: $("#page"),
-    initialize: function(){
-      this.collection = new ProjectsCollection();
-      this.collection.bind("add", this.exampleBind);
-      this.collection = this.collection.add({ name: "Twitter"});
-      this.collection = this.collection.add({ name: "Facebook"});
-      this.collection = this.collection.add({ name: "Myspace", score: 20});
-    },
-    exampleBind: function( model ){
-      //console.log(model);
-    },
-    render: function(){
-      var data = {
-        projects: this.collection.models,
-        _: _ 
-      };
-      var compiledTemplate = _.template( projectListTemplate, data );
-      this.$el.html( compiledTemplate ); 
-    }
-  });
-  return projectListView;
-});
diff --git a/examples/modular-backbone/js/views/sidebar/SidebarView.js b/examples/modular-backbone/js/views/sidebar/SidebarView.js
new file mode 100644
index 0000000..ba6babb
--- /dev/null
+++ b/examples/modular-backbone/js/views/sidebar/SidebarView.js
@@ -0,0 +1,38 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'text!templates/sidebar/sidebarTemplate.html'
+], function($, _, Backbone, sidebarTemplate){
+
+  var SidebarView = Backbone.View.extend({
+    el: $(".sidebar"),
+
+    render: function(){
+
+      var that = this;
+
+      var backbone_ad = { site_url : "http://www.backbonejs.org" ,
+                          image_url : "./imgs/backbone_logo.png",
+                          title : "Backbone.js",
+                          description: "Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface." };
+
+      var require_ad = {  site_url : "http://www.requirejs.org" ,
+                          image_url : "./imgs/require_logo.png",
+                          title : "Require.js",
+                          description: "RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node." };
+
+      var data = {
+        ads: [backbone_ad, require_ad]
+      };
+
+      var compiledTemplate = _.template( sidebarTemplate, data );
+    
+      $(".sidebar").append(compiledTemplate);
+    }
+
+  });
+
+  return SidebarView;
+  
+});
diff --git a/examples/modular-backbone/js/views/users/list.js b/examples/modular-backbone/js/views/users/list.js
deleted file mode 100644
index 4348fa1..0000000
--- a/examples/modular-backbone/js/views/users/list.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// Filename: views/projects/list
-define([
-  'jquery',
-  'underscore',
-  'backbone',
-  'text!templates/users/list.html'
-], function($, _, Backbone, userListTemplate){
-  var UserListView = Backbone.View.extend({
-    el: $("#page"),
-    initialize: function(){
-    },
-    render: function(){
-      var data = {};
-      var compiledTemplate = _.template( userListTemplate, data );
-      this.$el.html( compiledTemplate ); 
-    }
-  });
-  return UserListView;
-});
diff --git a/examples/modular-backbone/templates/contributors/contributorsListTemplate.html b/examples/modular-backbone/templates/contributors/contributorsListTemplate.html
new file mode 100644
index 0000000..5b809ec
--- /dev/null
+++ b/examples/modular-backbone/templates/contributors/contributorsListTemplate.html
@@ -0,0 +1,20 @@
+<ul class="contributors">
+   <% _.each(contributors, function(contributor){ %>
+   <li style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
+   <div class="contributor" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
+      <ul>
+        <li class="pic" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
+          <p><a href="<%= contributor.get('githubPath') %>"><img width="<%= contributor.get("picWidth") %>" src="<%= contributor.get('avatar_url') %>"></a></p>
+        </li>
+        <li class="username" style="width:<%= contributor.get('picWidth')%>;">
+            <p><a href="<%= contributor.get('githubPath') %>"><%= contributor.get("login") %></a></p>
+        </li>
+        <li class="contributions" style="width:<%= contributor.get('picWidth')%>; height: <%= contributor.get('picWidth')%>">
+            <p style="background-color:<%= contributor.get("medalHex") %>"><%= contributor.get("contributions") %></p>
+        </li>
+      </ul> 
+    </div>
+  </li>  
+  <% }); %>
+</ul>
+
diff --git a/examples/modular-backbone/templates/contributors/contributorsTemplate.html b/examples/modular-backbone/templates/contributors/contributorsTemplate.html
new file mode 100644
index 0000000..db9a834
--- /dev/null
+++ b/examples/modular-backbone/templates/contributors/contributorsTemplate.html
@@ -0,0 +1,8 @@
+<div class="contributors-stats">
+  <ul>
+    <li><p>total contributions: <%= total_contributions %></p></li>
+    <li><p>total contributors: <%= total_contributors %></p></li>
+  </ul>
+</div>
+<div id="contributors-list"></div>
+
diff --git a/examples/modular-backbone/templates/footer/footerTemplate.html b/examples/modular-backbone/templates/footer/footerTemplate.html
new file mode 100644
index 0000000..61a25ff
--- /dev/null
+++ b/examples/modular-backbone/templates/footer/footerTemplate.html
@@ -0,0 +1,9 @@
+<div class="pic"><a href="<%= owner.blog %>"><img src="<%= owner.avatar_url %>" width="90" height="90" /></a></div>
+<div class="info">
+	<ul>
+		<li><p>OWNER <%= owner.name %></p></li>
+		<li><p>LOCATION <%= owner.location %></p></li>
+		<li><p>PUBLIC REPOS <%= owner.public_repos %></p></li>
+		<li><p>PUBLIC GISTS <%= owner.public_gists %></p></li>
+	</ul>
+</div>
diff --git a/examples/modular-backbone/templates/home/homeTemplate.html b/examples/modular-backbone/templates/home/homeTemplate.html
new file mode 100644
index 0000000..472410f
--- /dev/null
+++ b/examples/modular-backbone/templates/home/homeTemplate.html
@@ -0,0 +1,19 @@
+<div class="main">
+	<h2>Organizing your application using Modules (require.js)</h2>
+	<p>
+	Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments.
+	</p>
+	<p>
+	This was quite a different decision to other JavaScript MVC frameworks who were more in favor of setting a development philosophy. Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code.
+	</p>
+	<p>
+	This tutorial will get you started on combining <a href="http://backbonejs.org/" target="_blank">Backbone.js</a> with AMD (Asynchronous Module Definitions) through <a href="http://requirejs.org/" target="_blank">Require.js</a>. In addition to Require.js,  <a href="https://github.com/requirejs/text">Text.js</a> plays a significant role by loading the html templates and preparing them for the underscore templating process.   
+	<p>
+	<a href="http://backbonetutorials.com/organizing-backbone-using-modules/" target="_blank">read full article</a>
+	</p>
+	<p>
+	Take advantage of Require.js compiler! My dying words would be to tell you to try <a href="https://github.com/jrburke/r.js/">r.js</a>
+	</p>
+</div>
+<div class="sidebar"></div>
+
diff --git a/examples/modular-backbone/templates/home/main.html b/examples/modular-backbone/templates/home/main.html
deleted file mode 100644
index ce01a39..0000000
--- a/examples/modular-backbone/templates/home/main.html
+++ /dev/null
@@ -1,7 +0,0 @@
-Welcome to the Modular Backbone homepage.
-
-There are many benefits of combining Require.js with Backbone.js
-
-<ul>
-  <li>Take advantage of Require.js compiler! My dying words would be to tell you to try r.js</li>
-</ul>
diff --git a/examples/modular-backbone/templates/projects/list.html b/examples/modular-backbone/templates/projects/list.html
deleted file mode 100644
index 03f1609..0000000
--- a/examples/modular-backbone/templates/projects/list.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<ul>
-  <% _.each(projects, function(project){ %>
-   <li><%= project.get("name") %> - <%= project.get("score") %></li> 
-  <% }); %>
-</ul>
diff --git a/examples/modular-backbone/templates/projects/projectsListTemplate.html b/examples/modular-backbone/templates/projects/projectsListTemplate.html
new file mode 100644
index 0000000..2f24858
--- /dev/null
+++ b/examples/modular-backbone/templates/projects/projectsListTemplate.html
@@ -0,0 +1,5 @@
+<ul>
+  <% _.each(projects, function(project){ %>
+   <li><a href='<%= project.get("url") %>'><%= project.get("title") %></a></li> 
+  <% }); %>
+</ul>
diff --git a/examples/modular-backbone/templates/projects/projectsTemplate.html b/examples/modular-backbone/templates/projects/projectsTemplate.html
new file mode 100644
index 0000000..3b0203c
--- /dev/null
+++ b/examples/modular-backbone/templates/projects/projectsTemplate.html
@@ -0,0 +1,15 @@
+<div class="main">	
+	<h2>Projects</h2>
+	<p>
+		This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome. About Backbone Tutorials
+	</p>
+	<p>
+		As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial
+	</p>
+	<p>
+		I started this site to not only consolidate my understanding of backbone.js but to also document what I have learned thus far for myself and others.
+	</p>
+	<div id="projects-list"></div>
+</div>	
+<div class="sidebar"></div>
+
diff --git a/examples/modular-backbone/templates/sidebar/sidebarTemplate.html b/examples/modular-backbone/templates/sidebar/sidebarTemplate.html
new file mode 100644
index 0000000..664b6d2
--- /dev/null
+++ b/examples/modular-backbone/templates/sidebar/sidebarTemplate.html
@@ -0,0 +1,18 @@
+<div class="ad">
+	<div class="pic">
+		<a href="<%= ads[0].site_url %>"><img src="<%= ads[0].image_url %>" width="150" /></a>
+	</div>
+	<div class="info">
+		<h4><%= ads[0].title %></h4>
+		<p><%= ads[0].description %></p>
+	</div>
+</div> 
+<div class="ad">
+	<div class="pic">
+		<a href="<%= ads[1].site_url %>"><img src="<%= ads[1].image_url %>" width="150" /></a>
+	</div>
+	<div class="info">
+		<h4><%= ads[1].title %></h4>
+		<p><%= ads[1].description %></p>
+	</div>
+</div> 
diff --git a/examples/modular-backbone/templates/users/list.html b/examples/modular-backbone/templates/users/list.html
deleted file mode 100644
index 12d06fe..0000000
--- a/examples/modular-backbone/templates/users/list.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<ul>
-  <li>User 1</li>
-</ul>
diff --git a/examples/nodejs-mongodb-mongoose-restify/css/normalize.css b/examples/nodejs-mongodb-mongoose-restify/css/normalize.css
index 8dba8d2..cfb73ab 100644
--- a/examples/nodejs-mongodb-mongoose-restify/css/normalize.css
+++ b/examples/nodejs-mongodb-mongoose-restify/css/normalize.css
@@ -41,8 +41,8 @@ body, button, input, select, textarea { font-family: sans-serif; color: #222; }
  * Also: hot pink!
  */
 
-::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
-::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::-moz-selection { background: #666; color: #fff; text-shadow: none; }
+::selection { background: #666; color: #fff; text-shadow: none; }
 
 
 /* =============================================================================