Wednesday, August 28, 2013

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/


Thursday, August 22, 2013

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/






Wednesday, August 21, 2013

Learning Backbone.js


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)); } });

Tuesday, August 20, 2013

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/#/





Monday, June 24, 2013

Study: Parallax Scroll


  • Simple Parallax

http://blog.fraser-hart.co.uk/jquery-parallax-scrolling/

One solid background image and 2 transparent PNG’s 

For every X pixels you scroll the window, with jQuery, you move the “nearest” layer 0.8 x X pixels, the middle layer at 0.5 x X pixels and the “furthest” layer 0.2 x X pixels.

Pro: Basic parallax scroll, dead simple and easy to understand the parallax principle.
Con: Not fancy animation


  • Skrollr (by Alexander Prinzhorn)

https://github.com/Prinzhorn/skrollr

U se the HTML5 data- attributes to define multiple sets of styles (we call each of them keyframe) and skrollr interpolates between them
<div class="elements pineapple"
    data-start="left: 10%; top: 325px; opacity: 1;transform:rotate(-30deg)"
    data-20-start="left: 20%; top: 400px; opacity: 1; transform:roate(20deg)"

    data-50-start="left: 30%; top: 325px; opacity: 0.5; transform:rotate(40deg)">

skrollr.init({
  forceHeight: false

});

Great Demo http://sammarkiewi.cz/
The body is fixed
clothes coming from different direction.
Pro: fairly easy to use and understand;
Con: only scrolling up and down, doesn't scroll sideways


  • Scroll Path

https://github.com/JoelBesada/scrollpath#readme

rotate or move canvas   


  • Parallax-JS (by Razorfish)

https://github.com/razorfish/Parallax-JS

Any <section> tag, along with any element with the animate class is parsed for parallax effects. <section> tags are assumed to line up one-after-another, all other tags can have any effect desired.


  • Parallax.js (by stolksdorf)
https://github.com/stolksdorf/Parallaxjs/

slide in pages of your site with having a parallaxing background



  • Scrollorama (by John Polacek)

http://johnpolacek.github.io/scrollorama/
http://johnpolacek.github.io/superscrollorama/

transitions, zooms, rotations, etc. using any animatable CSS property that takes a numeric value







  • Stellar.js (by Mark Dalgleish)

https://github.com/markdalgleish/stellar.js

Scrolling sideways












  • jParallax (by stephband)

http://stephband.info/jparallax/







Monday, May 27, 2013

Unobtrusive JavaScript

http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/

<p id="printthis">Thank you for your order. Please print this page for your records.</p> <script type="text/javascript"> (function(){ if(document.getElementById){ var pt = document.getElementById('printthis'); if(pt && typeof window.print === 'function'){ var but = document.createElement('input'); but.setAttribute('type','button'); but.setAttribute('value','Print this now'); but.onclick = function(){ window.print(); }; pt.appendChild(but); } } })(); </script>


  • By wrapping the whole functionality in an anonymous function and immediately executing it — this is what(function(){})() does — we don’t leave any global variables behind.
  • We test for DOM support and try to get the element we want to add the button to.
  • We then test if the element exists and if the browser has a window object and a print method (by testing if the type of this property is function).
  • If both are true, we create a new click button and apply window.print() as the click event handler.
  • The last step is to add the button to the paragraph.

Thursday, May 16, 2013

Develop Website on Mac

1. Set up Development Environment

Download and Install XAMPP on Mac OS X
http://www.apachefriends.org/en/xampp-macosx.html#849

X (to be read as "cross", meaning cross-platform)
Apache HTTP Server
MySQL
PHP
Perl
Local folder location:
/User/YourUserAccount/Sites/

Access Vis
http://localhost/~YourUserAccount

or /Applications/XAMPP/htdocs/
It cannot be modified at first, asks for authentication
Refer to: http://stackoverflow.com/questions/9046977/xampp-permissions-on-mac-os-x
  1. Open applications folder
  2. Locate XAMPP folder
  3. Right click, get info (as described above)
  4. In pop-up window locate the 'sharing & permission' section
  5. Click the 'locked' padlock symbol
  6. Enter admin password
  7. Change 'Everyone' permissions to read & write
  8. In the get info window still, select the 'cog' icon' drop down option at the very bottom and select 'Apply to enclosed items' this will adjust the permission across all sub-folders as well.
  9. Re-lock the padlock symbol
  10. Close the 'Get Info' window.

2. Install Eclipse
 I used Eclipse PDT (PHP Development Tool)

Refresh a view, hold "fn" key + F5

3. Add favicon
Create your favicon
http://tools.dynamicdrive.com/favicon/

Add between <head>
<head>
    <link rel="icon" type="image/ico" href="favicon.ico"/>
</head>

Problem: refresh browser doesn't change to new favicon
Solved: clear cache in browser, force-refresh (Command +R)

but it only works when files are on the server, not locally.

4. Setup MySQL
http://localhost/phpmyadmin/
#2002 The server is not responding (or the local MySQL server's socket is not correctly configured) 

Re-opened in a New Incognito Window, it worked; so clear the browser cache did the trick.

Refer to: Creating a MySQL Database using XAMPP
http://complete-concrete-concise.com/web-tools/creating-a-mysql-database-using-xampp

Refer to: Access MySQL Command Line in XAMPP
http://ja.meswilson.com/blog/2007/04/07/access-mysql-command-line-in-xampp/


5. Setup Wordpress
Refer to: http://www.siteground.com/tutorials/wordpress/wordpress-installation.htm


  1. Download wordpress  http://wordpress.org/download/
  2. Unzip it
  3. Put the folder under your web directory, in my case /Applications/XAMPP/htdocs/
  4. Open a browser  http://localhost/wordpress/
  5. It will say I don't have a wp-config.php file, click the button "Create a Configuration File", enter Database name, User name
  6. Next page "Sorry, but I can’t write the wp-config.php file.You can create the wp-config.php manually and paste the following text into it." so create wp-config.php and change database name, user name and password.
  7. Run and install http://localhost/wordpress/wp-admin/install.php