JavaScript Patterns

JavaScript
http://javascriptissexy.com/javascript-objects-in-detail/

1. Constructor Pattern for Creating Objects

function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) {

    this.color = theColor;
    this.sweetness = theSweetness;
    this.fruitName = theFruitName;
    this.nativeToLand = theNativeToLand;

    this.showName = function () {
        console.log("This is a " + this.fruitName);
    }

    this.nativeTo = function () {
    this.nativeToLand.forEach(function (eachCountry)  {
       console.log("Grown in:" + eachCountry);
        });
    }
}

var mangoFruit = new Fruit ("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]);
mangoFruit.showName(); // This is a Mango.
mangoFruit.nativeTo();
//Grown in:South America
// Grown in:Central America
// Grown in:West Africa

2. Prototype Pattern for Creating Objects

function Fruit () {
}

Fruit.prototype.color = "Yellow";
Fruit.prototype.sweetness = 7;
Fruit.prototype.fruitName = "Generic Fruit";
Fruit.prototype.nativeToLand = "USA";

Fruit.prototype.showName = function () {
console.log("This is a " + this.fruitName);
}
Fruit.prototype.nativeTo = function () {
            console.log("Grown in:" + this.nativeToLand);
}

var mangoFruit = new Fruit ();
mangoFruit.showName(); //
mangoFruit.nativeTo();
// This is a Generic Fruit
// Grown in:USA

JavaScript Patterns

http://shichuan.github.io/javascript-patterns/

Install Drupal on Mac

1. Download
https://drupal.org/start

Extract and move to intended location

2. Turn on Apache
Open the url in browser
http://localhost/drupal/install.php

Error page

Added ./sites/default/files  folder and changed permission to "Read and Write"

Copy the ./sites/default/default.settings.php file and rename to./sites/default/settings.php.

and changed settings.php permission to "Read and Write"

3. Create Database

XAMPP - phpMyAdmin
http://localhost/phpmyadmin/

Create a database my_drupal

4. Configure Site

Change the permissions back to Read only

Go visit your website
http://localhost/drupal/

Learning Backbone.js

Code School - Part 1
http://www.codeschool.com/courses/anatomy-of-backbonejs

1. Create a Model Class

var Appointment = Backbone.Model.extend({});

2. Create a Model instance

var appointment = new Appointment();

3. Set an Attribute

appointment.set('title', 'My knee hurts');

4. Create a View Class & Define Render

var AppointmentView = Backbone.View.extend({

render: function(){

$(this.el).html('<li>' + this.model.get('title') + '</li>');

}

});



5. Create a View Instance

var appointmentView = new AppointmentView({model: appointment});

6. Render the View Instance and Insert it's top-level element into element

appointmentView.render();

$('#app').html(appointmentView.el);




Code School - Part 2
http://www.codeschool.com/courses/anatomy-of-backbonejs-part-2

1. Parse non-standard JSON

Instead of returning JSON like { "title": "Ms. Kitty Hairball Treatment", "cancelled": false, "id": 1 } the server is returning JSON like { "appointment": { "title": "Ms. Kitty Hairball Treatment", "cankelled": false, "identifier": 1 }

var Appointment = Backbone.Model.extend({
  parse: function(response){
    return response. appointment;

  }
});

2. Change Attribute Name

var Appointment = Backbone.Model.extend({
  parse: function(response){
    response.appointment. cancelled = response.appointment. cankelled;
    delete response.appointment.cankelled;
    return response.appointment;
  }
});

3. Id Attribute

var Appointment = Backbone.Model.extend({
  idAttribute: "identifier",
  parse: function(response){
    var appointment = response.appointment;
    appointment.cancelled = appointment.cankelled;
    delete appointment.cankelled;
    return appointment;
  }
});


4. Force Parse

var appointment = new Appointment(data, {parse:true});
appointment.attributes;


5. Custom JSON

var Appointment = Backbone.Model.extend({
  toJSON: function(){
    var attributes = _.clone(this.attributes);
    attributes.cankelled = attributes.cancelled;
    delete attributes.cancelled;
    return { appointment: attributes };
  }
});


6. Render Changes

var AppointmentView = Backbone.View.extend({
  template: _.template('<span>' +
                        '<%= title %></span>' +
                        '<a href="#">x</a>'),

  render: function(){
    this.$el.html(this.template(this.model.attributes));
  }
});

Cool Web Stuff

Cool Things
http://stackoverflow.com/questions/811074/what-is-the-coolest-thing-you-can-do-in-10-lines-of-simple-code-help-me-inspir

1. Modify Web Page

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

2.  JQuery Effect

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document.body).click(function () {
  if ($("#pic").is(":hidden")) {
    $("#pic").slideDown("slow");
  } else {
    $("#pic").slideUp();
  }
});
</script>
</head>
<body><img id="pic" src="http://www.smidgy.com/smidgy/images/2007/07/26/lol_cat_icanhascheezburger.jpg"/>
</body>
</html>

HTML Presentation

http://lab.hakim.se/reveal-js/#/