Rolling Balls gif

git: Creating an empty branch

 git checkout --orphan NEWBRANCH

git - how to resolve 'merge' related conflicts

1. Current version's changes are shown on top (alongwith HEAD text)
    Version being merged is shown at the bottom.

2. We need to resolve the code conflicts and then do a
    git   add  
    git   commit

Have to look at these links also -
http://githowto.com/resolving_conflicts
http://stackoverflow.com/questions/161813/how-do-i-fix-merge-conflicts-in-git
https://help.github.com/articles/resolving-a-merge-conflict-from-the-command-line

And I look at the file in our text editor, we see that git stuck the current version (HEAD, branch B) and the version being merged (branch A) together so we can resolve the conflict.

rawr
<<<<<<< HEAD
changed in branch B
=======
changed in branch A
>>>>>>> branch-a

Now I'll edit the file to make it look the way I want. This can be anything, I am not limited to using the version from one of the branches. In this case I put in a whole new version of the line that reflects what happened.

rawr
changed in both branches

I'm happy with this version, so we stage it and commit. I don't use the -m flag this time, so git opens our text editor pre-filled with a commit message describing the merge conflict. I go ahead and commit with that message.

Escaping double quotes within inline javascript

When we need to escape double quotes while specifying javascript for a event handler:

http://stackoverflow.com/questions/1081573/escaping-double-quotes-in-javascript-onclick-event-handler

It needs to be HTML-escaped, not Javascript-escaped. Change \" to ".

Before Upgrading RAM (Intel Processor)

Only for Intel processors:

1. Find out Processor name- e.g. i3 M370

(Windows 7 - Right click on Computer --> Properties)

2. Find out Memory Specifications for that Processor from ark.intel.com

If you are unable to search properly in ark.intel.com , use google with a search string similar to -

ark.intel.com  i3  M370 

3. Note 2 things:

Max Memory Size - e.g. 8GB 

Memory Type - DDR3-800/1066

Important : For i3 M370, 800/1066 are the RAM speeds.

It is important that only these 2 values are used. 

All RAM chips will have the RAM speed specified on them (i.e. by looking at the RAM chip, we can tell the RAM speed).

jQuery - scroll to element

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element

$('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);

jQuery Tutorial - quick & rough

This is a quick, rough tutorial (It can contain mistakes)

I) jQuery selectors & jQuery Cheat Sheet:
-------------------------------------------------------------
Look at the Table here:
http://stevewellens.xtreemhost.com/jQuerySelectorTester.htm

Some points (to be read with the table in above link as reference) -

1. jQuery selectors are placed within single quotes.
E.g.
i.    $('#myid')
ii.   $('[id=myid]')
iii.  $('[id="my id"]')    - Double quotes are needed if there is a whitespace in the value of the attribute

2. Return value of a 'jQuery selector' is usually an array of elements
except when we use shortcuts like # and . shortcuts
E.g. $('#myid')   and  $('.myCSSclass')

3. Most important selector to know:
$('element[attribute="value"]')
E.g.   $('input[id="abc"]')  - select all 'input' tags with "abc" as their ids.
Note - this returns an array of elements; to use only one,
we have to use the 0th index one -
E.g. $('input[id="abc"]')[0].hide()

Since selecting an element based on its 'id' attribute is probably the most commonly used selector,
jQuery has a shortcut for it - using #
E.g.   $('#abc')   or   $('input#abc')
Note - this is not just a shortcut for the syntax; this returns only 1 element
(If there are multiple elements with the same 'id', it returns the 1st one)


II) Most Commonly used jQuery statements:
------------------------------------------------------------
0. Selecting elements using substring-of-their-id/name
$('#abc') - an element with id as 'abc'
$('[id^="abc"]')  - array of elements with id starting with 'abc'
$('[id$="abc"]')  - array of elements with id ending with 'abc'
$('[id*="abc"]')  - array of elements with id containing 'abc'

1. Hide/Show an element
$('#abc').hide()
$('#abc').show()

2. Get html contained within a div
$('#abc').html()

3. Replace html within a div with some other html (contained within a string)
var str_html = " This is going to be the new content";
$('#abc').html(str_html)

4. Change a CSS attribute - use css(attribute_name, attribute_value)
$('#abc').css("color","red")

5. Add/Remove a CSS class  - especially useful when using Bootstrap
$('#abc').addClass("myClass")
$('#abc').removeClass("myClass")

6. Find 'parent', 'siblings'
$('#abc').parent()
$('#abc').siblings()



III) functions in javascript
-----------------------------------
Functions in Javascript can be passed as values to other functions.
This is typically used w.r.t Event Handlers & Callbacks (to ajax calls)

Supposed we want some code to be executed when an event happens;
we wrap that code with the 'function' keyword and curly {} braces, and
pass that as an argument to the event-handler

E.g. 1: Event handlers example
------
Suppose we have a textbox , and we want to show an alert message when a key is pressed inside the textbox:

Option A:
---------
function showMessage() {
alert('key has been pressed');
}

$('#abc').mousedown(showMessage);

Option B: (more commonly used)
---------
$('#abc').mousedown(function() {
alert('key has been pressed');
});

Note:
1. in B, the entire code of the function has been passed like a value
2. in B, the function does not have a name
3. We would typically use Option A if code reuse is going to there,
otherwise we would go with option B.
Option B is more commonly seen in jQuery code.

E.g 2: Callback to Ajax request example:
------
Suppose we have a ajax call that returns json data:
$.getJSON('/get_users_list', function(response) {

});


IV) $(array).each  &  'this' keyword
------------------------------------------------------

jQuery provides a way to iterate over an array - using 'each'
When using 'each', 'this' will refer to the indiviual item of the array

E.g. 1:
-------
var arr = ["abc", "pqr", "xyz"];
$(arr).each(function() {
var item = this;
alert(item);
});

E.g. 2:
-------
Suppose a Ajax request to /getMoviesList returns
{"items":[
{"movieID":"65086","title":"The Woman in Black","poster":"\/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"},
{"movieID":"76726","title":"Chronicle","poster":"\/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg"}
]}
and we want to iterate over the above result;

Observe that "items" is an array , so essentially we want to iterate over "items" array

$.getJSON('/getMoviesList', function(response) {
var users_array = response.items;
$(users_array).each(function() {
var movie_record = this;
alert(movie_record.movieID);
alert(movie_record.title);
});
});

See http://stackoverflow.com/questions/9450083/using-each-within-getjson for related code


V) $(document).ready event
-------------------------------------
Suppose we want some code to be executed when the page finishes loading,
we could -
1. wrap that code with 'function' keyword & curly {} braces, and
2. specify that code as part of $(document).ready event-handler.

E.g. 1. Suppose we want to show an alert message when page finishes loading
$(document).ready(function() {
alert("page has finished loading");
});

E.g. 2. Suppose we want to attach an event-handler to a button's click event,
we have 2 options -
Option A:
---------
we have to make sure to place the code (that attaches the event-handler to the button) after the button tag itself

<button id="btn1">Button 1</button>
$('#btn1').click(function() {
alert("button 1 has been clicked");
});
Note - the Javascript code that acts on the button, has to appear after the button's html

Option B:
---------
we could place the javascript code within $(document).ready's event-handler;
then, the code will run after the entire page loads, which should mean that the button has been created also
(so that there would be no danger of trying to access the button before it gets created)

$(document).ready(function() {
$('#btn1').click(function() {
alert("button 1 has been clicked");
});
});

IMPORTANT - We can have as many $(document).ready event-handlers we want;
this is probably the main difference between window.onload & $(document).ready event-handlers.



VI) Finding elements within elements
-------------------------------------------------

1. > and space operators in specifying hierarchy

> operator : search only immediate children
E.g
$('#abc > div')  - returns all div elements that are immediate children of #abc

space operator: search children, grand-children, great-grand-children, and so on
E.g.
$('#abc  td') - returns all td elements that can occur anywhere within #abc


2. find() method
Another syntax we can use instead of the space operator above is via find() method
$('#abc td')
$('#abc').find('td')


VII) jQuery chaining
----------------------------
Most function calls do some operation on the selected html-elements, and then return the array of selected html-elements,
so that chaining-of-methods is possible.
E.g.    $('#abc').show().css("border-color","red");
Exceptions - functions like .html() and .text() return strings, so chaining is not possible with these methods


VIII) jQuery and dynamically added elements
-------------------------------------------------------------

This is one of the most common hard-to-find problem when using jQuery.
If we have code to attach event-handlers within $(document).ready event, we have to remember that $(document).ready event
only fires once (and all its event-handlers are executed only once) as soon as the page finishes loading.
After that, if we have javascript code that creates new html elements, then , by default , those new elements will not
get event-handlers specified in $(document).ready event;
In order to solve this problem, jQuery has given the .on() method;
.on() method allows us to specify event-handlers for elements that can be created in the future also

This usually comes into the picture when we are using .html() method to create new elements, or when we want
to attach event-handlers to 3rd part widgets that keep manipulating their html a lot

Documentation - http://api.jquery.com/on/


IX) $.ajax(), $.getJSON(), and 'async' attribute
---------------------------------------------------------------
$.ajax() - method to make Ajax calls
$.getJSON() - shortcut form of $.ajax() wherein we get JSON data as result
async - when using $.ajax(), we can specify   async: false  (default value is true)
- this means that we want the ajax call to Not-be asynchronous, i.e we want a synchronous operation
- this is not that commonly used, but if we have more than 1 ajax call within the same function,
we have to keep this in mind
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.getJSON/


X) General Javascript headaches
---------------------------------------------
1. When page is loading, if there is a javascript error on a particular line of code, subsequent lines of code are
not executed.
2. Cross-domain Ajax requests from the browser are not allowed


XI) Tools to use:
----------------------
1. jsFiddle, jsbin.com
2. Chrome Developer Tools
- Inserting Breakpoints is a mess (this is better in Firefox, but interface for Firebug has changed recently, and is sometimes unreliable)

To format JSON data

http://jsonformat.com/#jsondataurllabel

Ruby - if key has a hyphen in it...

http://stackoverflow.com/questions/2134702/ruby-1-9-hash-with-a-dash-in-a-key

you have to use the Ruby 1.8 syntax,:'my-symbol-name'

Tool to create Ajax loader .gif

http://preloaders.net/en/horizontal

http://techland.time.com/

http://techland.time.com

Rails - Specifying Order in which .js files (in "assets" folder) should be loaded

http://stackoverflow.com/questions/11285941/rails-specify-load-order-of-javascript-files

E.g. To use g.raphael :

Suppose our raphael files are as follows in the "assets" folder -
/assets/raphael/g.dot-min.js
/assets/raphael/g.pie-min.js
/assets/raphael/g.raphael-min.js
/assets/raphael/raphael.js

When the files are loaded, they are loaded in the above order (i.e. order seems to be based on name of the file)
If we want to make rails load raphael.js & g.raphael-min.js first then we have to specify that in application.js file

In application.js:
specify
//= require raphael/raphael
//= require raphael/g.raphael-min
//= require_tree .

Note that both the raphael entries have to be above require_tree entry (and raphael has to be before g.raphael-min).
(It almost seems like require_tree entry should be the last entry in application.js file - have to verify this)

Ruby - blocks, callbacks

BLOCKS:

http://stackoverflow.com/questions/814739/whats-this-block-in-ruby-and-how-does-it-get-passes-in-a-method-here

BLOCKS are a fairly basic part of ruby. They're delimited by either:

 do |arg0,arg1| ... end or

 { |arg0,arg1,arg2| ... }.

They allow you to specify a CALLBACK to pass to a METHOD.

This CALLBACK can be invoked in two ways - either by capturing it by specifying a final ARGUMENT prefixed with &, or by using the yield keyword 

CALLBACKS:

Idiomatic & Non-idiomatic ways of having CALLBACKS in RUBY:
http://stackoverflow.com/questions/1677861/how-to-implement-a-callback-in-ruby

The idiomatic approach would be to pass a BLOCK instead of a REFERENCE to a METHOD. One advantage a BLOCK has over a freestanding METHOD is CONTEXT - a BLOCK is a CLOSURE, so it can refer to variables from the SCOPE in which it was declared. This cuts down on the number of PARAMETERS do_stuff needs to pass to the --CALLBACK.