Response vs Adaptive

http://www.webmonkey.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/

git - see commits in a branch (that are not in another branch .e.g. master)

To see commits that are there in mybranch but not in master:
git  log  master..mybranch  --oneline

To see commits that are there in master, but not in mybranch:
git  log  mybranch..master  --oneline

git - copy a file from another branch

http://stackoverflow.com/questions/2364147/how-to-get-just-one-file-from-another-branch

git checkout master               # first get back to master
git checkout experiment -- app.js # then copy the version of app.js 
                                  # from branch "experiment"

Basically, if we are copying a file, say file1.js from FROM-B branch to TO-B, then:

git  checkout  TO-B
git  checkout  FROM-B  --  file1.js

git - diff files between 2 branches

http://stackoverflow.com/questions/4099742/how-can-i-compare-files-from-two-different-branches

To diff a single file in 2 branches:

git diff mybranch master -- myfile.cs

To diff all files in 2 branches:
    git diff mybranch master 

Learn HTML using a game

http://www.thehelloworldprogram.com/html-markup-game/

HTML, CSS related: Show Div on 'hover' with only CSS

I have seen empty <a> followed by div elements sometimes (like below):

<a>Menu Item</a>
<div>
   some stuff
</div>

The reason for the empty <a> elements is probably the below: 
http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css

Assuming HTML4, with this markup:

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

You can do something like this:

div {
    display: none;
}

a:hover + div {
    display: block;
}

This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.

HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change thedisplay property of another element.

jsfiddle example:

WebRTC - Web Real-Time Communication

http://en.wikipedia.org/wiki/WebRTC
http://www.bounzd.com/why - product that is using WebRTC

 

jquery - .prop() vs .attr()

http://api.jquery.com/prop/
http://stackoverflow.com/questions/5874652/prop-vs-attr/5884994#5884994

A DOM element is an object, a thing in memory. Like most objects in OOP, it has properties. It also, separately, has a map of the attributes defined on the element (usually coming from the markup that the browser read to create the element). Some of the element's properties get their initial values fromattributes with the same or similar names (value gets its initial value from the "value" attribute; hrefgets its initial value from the "href" attribute, but it's not exactly the same value; className from the "class" attribute). Other properties get their initial values in other ways: For instance, the parentNodeproperty gets its value based on what its parent element is; an element always has a style property, whether it has a "style" attribute or not.

Ruby - how to access properties using 'string' version of property-names

(2012 question/answer)
http://stackoverflow.com/questions/12136262/ruby-get-set-an-objects-property-using-a-string-symbol

car.color

car.send("color=", value)

(2009 question/answer)
http://stackoverflow.com/questions/903763/how-to-convert-from-a-string-to-object-attribute-name

irb> example_customer.name
#=> "Evagation Governessy"
irb> field = 'name'
#=> "name"
irb> example_customer.instance_variable_get(field)
NameError: `name` is not allowed as an instance variable name
from (irb):8:in `instance_variable_get`
from (irb):8
irb> example_customer.instance_variable_get('@'+field)
#=> nil
irb> example_customer.send(field)
#=> "Evagation Governessy"
irb> example_customer.send(field+'=', "Evagation Governessy Jr.")
#=> "Evagation Governessy Jr."
irb> example_customer.send(field)
#=> "Evagation Governessy Jr."
irb> example_customer.name
#=> "Evagation Governessy Jr."

So you can see how #send(field) accesses the record information, and trying to access the attributes doesn't. Also, we can use #send(field+'=') to change record information. 

Ruby - strings - difference between using single quotes & double quotes

https://rubymonk.com/learning/books/1-ruby-primer/chapters/5-strings/lessons/31-string-basics

A String literal created with single quotes does not support interpolation.

The essential difference between using single or double quotes is that double quotes allow for escape sequences while single quotes do not. What you saw above is one such example. “\n” is interpreted as a new line and appears as a new line when rendered to the user, whereas '\n' displays the actual escape sequence to the user.

Example of interpolation:
a = 1
b = 4
puts "The number #{a} is less than #{b}" 

Captcha related

Have to read this -
http://15daysofjquery.com/safer-contact-forms-without-captchas

Then this:
http://stackoverflow.com/questions/8472/practical-non-image-based-captcha-approaches

Have to see if we can use Raphael.js to draw captchas (Not sure if we can provide the same kind of functionality as reCaptcha or not i.e. audio etc)

Rails - newer property syntax

When using the newer property syntax, there should not be a space between the property-name and colon (:)

i.e.
class: 'icon-picture'     --> correct
class : 'icon-picture'    --> incorrect 

Observe the space before the colon (:) in the incorrect line

Rails - passing html5 'data' attributes to link_to

In the example in the previous post, notice the syntax that is used to specify key & value for data-toggle

2 ways:
(from http://stackoverflow.com/questions/2134702/ruby-1-9-hash-with-a-dash-in-a-key )

(I). "data-toggle" => 'modal'
<%= link_to " Change Image", "#modalDiv1", { class: 'icon-picture', "data-toggle" => 'modal' } %>

i.e.
1. use double quotes (i.e. string instead of symbol)
2. use hash-rocket syntax (=>) instead of colon (:) syntax

It seems we cannot use the new colon syntax with keys that contain a hyphen (-) as in data-toggle

(II). data: { toggle: 'modal' } 
<%= link_to " Change Image", "#modalDiv1", { class: 'icon-picture', data: { toggle:'modal'} }%>

i.e.
1. Specify a 'data' hash for 'data' attributes:

Rails - Bootstrap Modal Dialog (pre-loaded & ajax)

http://stackoverflow.com/questions/15152486/how-to-add-bootstrap-modal-with-link-to-so-the-link-content-open-in-modal

Rails - class_name

When trying to establish relationship between 2 models, we have to specify :class_name if 'module' is different

/app/models/abc/address.rb
module ABC
class Address < ActiveRecord::Base
belongs_to :user
                attr_accessible :user_id, :address1, :address2, :city, :country, :state, :zip, :is_primary_address
         end
end

/app/models/user.rb
class User < ActiveRecord::Base
       has_many :addresses, :class_name => ABC::Address
       ...
       ...
end

Sublime Text - Color Schemes (with White background)

Eiffel
Mac Classic
Dawn

Rails - Difference between attr_accessor and attr_accessible

http://stackoverflow.com/questions/3136420/difference-between-attr-accessor-and-attr-accessible

attr_accessor is a ruby method that makes a getter and a setter. attr_accessible is a Rails method that allows you to pass in values to a mass assignment: new(attrs) or up update_attributes(attrs).

Here's a mass assignment:

Order.new({ :type => 'Corn', :quantity => 6 })

You can imagine that the order might also have a discount code, say :price_off. If you don't tag :price_off as attr_accessible you stop malicious code from being able to do like so:

Order.new({ :type => 'Corn', :quantity => 6, :price_off => 30 })

Even if your form doesn't have a field for :price_off, if it's in your model it's available by default. This means a crafted POST could still set it. Using attr_accessible white lists those things that can be mass assigned.

http://stackoverflow.com/questions/4838399/how-i-can-set-attr-accessible-in-order-to-not-allow-access-to-any-of-the-field

By default the attributes are all attr_accessible (which means they can be set my mass-assignment).

• attr_accessible - only this list of attributes can be set by mass-assignment (white-listing).

• attr_protected - these attributes cannot be set by mass-assignment (black-listing).

• attr_readonly - these attributes cannot be set except for when the record is created.

Beginning with Rails 3.1, the following configuration option is available to disable mass-assignment by default for all models until you explicitly call attr_accessible or attr_protected:
config.active_record.whitelist_attributes = true

Rails Routing - path_names

Using "path_names" :

http://localhost:3000/users/sign_up
=>
http://localhost:3000/users/register

Rails - customizing 'scaffold' generator

In 'lib' folder, create the following folders: templates > erb > scaffold

Create index.html.erb and other files here (i.e. in 'scaffold' folder)
(The default versions of the above files that come with 'rails' are here - for v3.2.13 - https://github.com/rails/rails/tree/v3.2.13/railties/lib/rails/generators/erb/scaffold/templates )

Railscast about Generators - http://railscasts.com/episodes/216-generators-in-rails-3?view=comments
(Watch from 8mins onwards for customizing info)

Other useful links related to Generators-
http://stackoverflow.com/questions/4333393/using-rails-generate-scaffold-when-model-already-exists?rq=1
http://stackoverflow.com/questions/4630911/override-default-scaffold-generator-in-rails-3
http://stackoverflow.com/questions/8688220/rails-3-1-changing-default-scaffold-views-and-template
http://guides.rubyonrails.org/generators.html

Rails - Javascript

From http://railsapps.github.io/rails-javascript-include-external.html

Rules of Thumb

In summary, here are rules of thumb to guide your use of JavaScript in Rails:

• Logically organize your site-wide scripts in the app/assets/javascripts/ folder.
• Copy external JavaScript libraries (such as jQuery plugins) to the vendor/assets/javascripts folder.
• Let the Rails asset pipeline combine them all in one minimized application.js file.
• List scripts in the app/assets/javascripts/application.js manifest.

In almost all applications, there is no need to add external JavaScript libraries directly in a view template. Use the Rails asset pipeline, even for JavaScript used on just one page (page-specific JavaScript). Copy external scripts to your application and you’ll gain the performance benefits of the Rails asset pipeline and avoid complexity.

Rails - to see all .js files that are being loaded

add the following to the URL -    ?debug_assets=1 

See Railscast on Assets Pipeline for more info - http://railscasts.com/episodes/279-understanding-the-asset-pipeline

Linux commands

Removing a directory that is not empty:
rm -Rf directory-name

Sublime Text:
http://www.dilipprajapati.com/2012/12/22/sublime-text-2-as-default-editor-in-ubuntu-12-04/

Rails, RVM:
https://rvm.io/integration/gnome-terminal
http://ryanbigg.com/2010/12/ubuntu-ruby-rvm-rails-and-you/
http://stackoverflow.com/questions/9056008/installed-ruby-1-9-3-with-rvm-but-command-line-doesnt-show-ruby-v/9056395#9056395

Is MongoDB running:
http://stackoverflow.com/questions/5091624/is-mongodb-running

check with either:

   ps -edaf | grep mongo   # "ps" flags may differ on your OS

or

   service mongodb status

Useful rvm commands to manage ruby versions using rvm:
http://stackoverflow.com/questions/8868555/how-do-i-uninstall-ruby-and-gems-using-rvm

Basically taken from http://beginrescueend.com/rvm/:

To list the available ruby versions to install type:

rvm list known

To then install from the list of known, type:

rvm install VERSION_NUMBER

To then use the ruby version you have installed:

rvm use VERSION_NUMBER

You can make a certain ruby version your default system version:

rvm use VERSION_NUMBER --default

To remove the ruby version, keeping the gemsets:

rvm uninstall VERSION_NUMBER

To remove ruby et al:

rvm remove VERSION_NUMBER

To learn about your ruby environment and where they are installed/aliased:

rvm info

HTML5 Canvas related

http://jsfiddle.net/k6Xwy/1/
http://stackoverflow.com/questions/8453712/horrible-canvas-getimagedata-putimagedata-performance-on-mobile

Cross Platform Mobile development related

Martin Fowler's slides on mobile development - Native vs Web vs Hybrid -
http://martinfowler.com/articles/multiMobile/

Calatrava (from Thoughtworks - Martin Fowler's company) -
http://overwatering.org/blog/2012/10/announcing-calatrava/

Native CSS - NativeCSS.com - native apps, CSS styling

Phonegap - http://www.asyncdev.net/2012/10/phonegap-a-misunderstood-hybrid-framework/

 I often hear as well that PhoneGap is used to wrap a website into an app. Let's clear things up. PhoneGap does allow you to embed an HTML/JS/CSS "web page" into a native shell, but its real strength lies in its more advanced usage: as a hybrid framework!

Adding a Textbox (or other HTML controls) to a HTML5 Canvas element

http://stackoverflow.com/questions/5073351/adding-textbox-and-other-controls-to-an-html5-game

This could be used to - allow the user to input text inside a Canvas element. (But the Input control itself will probably not become part of the Canvas.. Have to check this...One workaround could be - before posting the Canvas, we could capture the text that user has inputted, draw a box in the Canvas at the exact same location, add the text to it..And ask the user if it looks ok.. (we could limit the number of characters that the user enters)

Android Emulator - Camera Error - "insert SD card before using camera"

http://stackoverflow.com/questions/10912718/insert-sd-card-before-using-the-camera-alert-android-emulator

"When you create an AVD it's possible to say whether to emulate SDCard or not (and of what size). Looks like you simply did not specify the SDCard presence. Edit your AVD settings and make sure you have explicitly requested for SDCard support."

Mobile 'Backend As a Service' providers

Backend As A Service (BAAS) providers -

Parse.com (acquired by Facebook)
Database.com (from Salesforce)
http://www.built.io/

Hosting A (static) Web Site On S3, GitHub Pages

S3:
http://blogging.alastair.is/how-i-served-100k-users-without-crashing-and-only-spent-0-32/

Of course, you can’t run any dynamic scripting on S3, but you’d be surprised the number of times you don’t have to. For example, the promo site for my taxi appdoes use dynamic content- the map tile images are generated by an EC2 instance I have running TileStream- but the vast majority of the page runs quite happily on S3. JSONP or CORS mean that you can quite effectively run an ‘API’ server on an EC2 instance, while leaving the majority of your static HTML on an S3 bucket.

Github Pages:
http://pages.github.com/
https://learn.andrewmunsell.com/learn/jekyll-by-example

Facebook Graph API

https://graph.facebook.com/jessestay

https://graph.facebook.com/jessestay?metadata=1

https://graph.facebook.com/jessestay?fields=name,picture

https://graph.facebook.com/icentrisdevs?fields=name,picture,friends&oauth_token=425581657554925|jssQVK-ENgAFILVt5-XVQRSYbl4
(To get the oauth_token - go to Access Token tool - https://developers.facebook.com/tools/access_token/)

Javascript Test Console & Examples:
https://developers.facebook.com/tools/console/

Posting a photo to a Wall:
http://stackoverflow.com/questions/3361507/facebook-js-sdk-how-to-post-an-image-on-wall
(see HBK's answer)

Posting a Canvas element as a Photo to Facebook's Wall:
https://coderwall.com/p/4qpmfw
    -- https://github.com/lukasz-madon/heroesgenerator
        -- uses code from here - http://stackoverflow.com/questions/5292689/sending-images-from-canvas-elements-using-ajax-and-php-files

Phonegap & Facebook

Options:

1. FacebookConnect plugin for Phonegap Build
https://github.com/phonegap-build/FacebookConnect

2. Phonegap-Facebook-plugin
https://github.com/phonegap/phonegap-facebook-plugin

3. without using native plugin  (added on Jun 12 2013)
https://github.com/studiosoton/faceGap

Jquery PhoneGap Facebook Connect Plugin - without native plugin

This plugin connects to facebook without using native plugin (Android, iOS, etc)
Plugin working mode "Site Login with Facebook"

Phonegap vs Native discussions

Apr 2013
http://phonegap.com/blog/2013/04/23/story-behind-exfm/
Above link lists a bunch of plugins (with links) that were used - Facebook, Twitter etc

Feb 2013
http://blog.guillermowinkler.com/blog/2013/02/10/can-you-make-a-native-app-using-phonegap/

Apr 2012
https://groups.google.com/forum/#!topic/phonegap/BFyBYjQp3a8

Phonegap review

http://chelramsey.com/phonegap-vs-native-month-five-of-a-12-month-review/

App Framework (formerly jqmobi)

http://app-framework-software.intel.com/doc2.php

Phonegap - debugging options

http://www.raymondcamden.com/index.cfm/2013/1/21/Did-you-know--Safari-Remote-Debugging-and-PhoneGap

http://people.apache.org/~pmuellr/weinre/docs/latest/

Creating a new Phonegap app to work with in Eclipse

http://docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html

After Steps 1-3, for each project we have to repeat Step 4.

1. Navigate to where 'create.exe' is: 
C:\Windows\System32> cd C:\dev\phonegap-2.8.1\lib\android\bin

2. C:\dev\phonegap-2.8.1\lib\android\bin> create   C:\dev\PGAndroid2 com.psjplearn.PGAndroid2   PGAndroid2

C:\dev\PGAndroid2 = folder to create for new project
com.psjplearn.PGAndroid2 = package name (com.companyname.appname)
PGAndroid2 = project name

3. Add files to assets\www folder

Javascript - scope, closures

http://www.youtube.com/watch?v=seX7jYI96GE&feature=player_detailpage#t=615s

jQuery Mobile example 2

JS Bin

jQuery Mobile example 1

JS Bin

Have to implement this example - http://sharpimg-viewer.appspot.com/util/mediaList?start=0&count=10&email=MikeGratsas%40techemail.com&authDomain=gmail.com&userId=113906123226224481828&federatedIdentity=