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=

Phonegap + Facebook

https://github.com/phonegap/phonegap-facebook-plugin
http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt5p2

Have to try this - AppLaud plugin for Eclipse -
http://devgirl.org/2012/07/25/fast-phonegap-development-for-android-with-applaud/
http://www.mobiledevelopersolutions.com/

Phonegap related

From Pluralsight's course on Phonegap:

Polyfill for scrolling

http://filamentgroup.github.io/Overthrow/

Christophe Coenraets' Directory App using Phonegap + Topcoat + Backbone

Testing on Android - To install, scan the above image using Google Googles

Original blogpost that contains Demo & github link - http://coenraets.org/blog/2013/06/sample-mobile-phonegap-application-with-backbone-js-and-topcoat/

Backbone.js - 1

OOP using Classic Javascript vs Backbone.js:
JS Bin
Backbone Models: JS Bin

Frameworks vs Libraries, Backbone.js

From Pluralsight's course on Backbone.js

"Frameworks call your code , while your code calls Libraries...
Another way to think of it is - Frameworks control how you design you app...they specify things like, 'where' you put 'what' files, what you can do, and how you do it..
It's great for getting started, and it's great for getting things done quickly, but it is terrible for flexibility..
Libraries provide some useful features, and then you are on your own.
Backbone for example, provides help with a number of common user interface features, but does not help at all with how you design your application. It's both its strength and weakness." 
...
Backbone is a library of tools..

Running a .apk file in Android Emulator

From :
http://stackoverflow.com/questions/3480201/how-do-you-install-an-apk-file-in-the-android-emulator
http://stackoverflow.com/questions/4449540/failure-install-failed-already-exists-when-i-tried-to-update-my-application

Pre-requisite - install Java & ADT bundle from http://developer.android.com/sdk/index.html

Download the .apk file (from Phonegap Build)

In console - go to \sdk\platform-tools directory (It will have adb.exe)
C:\dev\adt-bundle-windows-x86_64-20130522\sdk\platform-tools> adb install -r PGApp1.apk
(-r --> required to re-install the same app)

Note: It is taking a really long time (several minutes) for the Emulator to start on Windows 7 64 bit machine (Have seen similar complaints in StackOverflow questions)

Javascript at LinkedIn

http://engineering.linkedin.com/frontend

The below 2 blog posts are from Dec-2011, Jan 2012:
Leaving JSPs in the dust: moving LinkedIn to dust.js client-side templates
The client-side templating throwdown: mustache, handlebars, dust.js, and more

HTML5 Canvas related

http://garage.socialisten.at/2012/12/new-adventures-in-html5-part-1-html5-canvas/

We briefly considered doing everything Canvas-related in this app in plain JavaScript, but since we wanted to use layers, events and transitions (all of which are not available in the Canvas API), we opted to use the Canvas framework KineticJS.

http://www.html5canvastutorials.com/

HTML5 Canvas - put 2 images beside each other

JS Bin
JS Bin
JS Bin
In the above code, toDataURL() is giving an error because of security restrictions. Observe the alert() does not fire.

Javascript - namespace/module example

Method1: (This is what I found in an example)
--------
var SILLY = (function (module) {
      
      module.DoIt = function (resultObject) {
          resultObject.prepend(Date() + '
');
      };
      
      return module;
    } (SILLY || {});     // "{}" means "new Object()". It is a shortcut

NOTE: The last line could be :  (SILLY || {}) => (SILLY || (new Object())));
-----
 
Method2: (This is how we would write the above code in C#/Java style)
---------
        
var SILLY = (function() {
          
   if (SILLY === undefined) {
      var SILLY = new Object();
      SILLY.DoIt = function (resultObject) {
         resultObject.prepend(Date() + '<br >');
      };
   }
   return SILLY;    
}());

jsbin link for full example - http://jsbin.com/ahuqow/1/edit

Phonegap learning - jQuery Mobile, Handlebars.js example

Github link - https://github.com/theAcadian/phonegap-workshop-jqm
jsbin link - http://jsbin.com/ozepac/2/edit

Handlebars.js example

http://jsbin.com/uyoxar/3/edit

Javascript - Different ways of Creating & Using objects in Javascript

Click on "Result" to see the output

Javascript slides

http://www.slideshare.net/theacadian/javascript-22811587

Bootstrap Tutorial

http://devgirl.org/2012/08/06/styling-your-app-with-twitter-bootstrap/

Kendo UI & Phonegap

Example app:
http://www.adobe.com/devnet/phonegap/articles/getting-started-kendo-ui-mobile-phonegap-build.html
 

Mobile Development & Phonegap related

Javascript libraries:

From http://www.adobe.com/devnet/phonegap/articles/phonegap-apps-powered-by-developercom.html

Reuse Existing Tools

Since PhoneGap applications leverage Web technologies, there are countless existing libraries or frameworks that you can leverage to accelerate application development. Whether it is a solution accelerator framework like jQuery or Zepto, a UI toolkit like Twitter Bootstrap, jQuery Mobile, or Sencha, or a data visualization library like Raphael.js, Highcharts, or RGraph.js, there are lots of resources both open source and commercially that you can leverage within your applications.

Solution Accelerator Frameworks - jQuery, Zepto
UI Toolkits - Twitter Bootstrap, jQuery Mobile, Sencha
Data Visualization Libraries - Raphael.js, Highcharts, RGraph.js

3rd party Database options:

1. Parse.com -
http://www.adobe.com/devnet/phonegap/articles/using-parse-with-phonegap-a-marriage-made-in-awesome.html - Dec 2012

2. Database.com -
http://www.adobe.com/devnet/phonegap/articles/phonegap-apps-powered-by-developercom.html - June 2012

Push Notifications:

Below plugin allows the App to receive push notifications on both Android and iOS devices:
https://github.com/phonegap-build/PushPlugin
Tutorial - http://devgirl.org/2013/01/24/push-notifications-plugin-support-added-to-phonegap-build/

Above github link also mentions a Ruby Gem called "pushmeup"  (See section titled "Test Environment")
(Use - to push notifications directly from your desktop during development)

Phonegap:
 https://github.com/phonegap/phonegap/wiki

BEM methodology for UI organization

http://bem.info/method/definitions/
BEM Architecture is mentioned on Adobe's topcoat.io page.

Sublime Text shortcuts

Toggle SideBar - Ctrl K,B
Layout - Alt Shft 1 (or Alt Shft 2) 

Phonegap related

http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/

One other advantage of PhoneGap build is that it lets designers/developers build mobile applications without having to install any developer tools. If you want to compile a PhoneGap app for iOS, but are on Windows – just use PhoneGap build and you won’t need Xcode or a Mac.

Good beginner's tutorial for Phonegap & Phonegap Build - http://www.youtube.com/watch?v=ZgUAT7CIhsY
Need to try this tutorial by Christophe Coenraets - http://coenraets.org/blog/phonegap-tutorial/

Rails: Get currently logged in user details

On Dev machine - rails console - the below gives the details of the logged in user (i.e. myself)

User.find(:all, :conditions => ["current_sign_in_ip != '' "])

(Found it here - https://groups.google.com/forum/?fromgroups#!topic/plataformatec-devise/tOKU_jcWNp0 )

console settings (for PYR project)

To see all the routes displayed by "rake routes" (on Windows console):

1) rake routes | grep #

2) The output of the above command is fairly long, so, to see the whole output, we have to change the console's properties to something similar to the below