Using pre-compiled assets in Rails Development Environment

 if you want to use the pre-compiled assets in Development Environment then follow these steps:

1. Edit development.rb : Add the following lines inside your config/environments/development.rb


  config.assets.debug = false
  # Disable Rails's static asset server (Apache or nginx will already do this).
  config.serve_static_assets = true

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # Generate digests for assets URLs.
  config.assets.digest = true


if you want to compile your other assets like assets/your_dir/ style.css ,assets/your_dir/ custom.js etc then add the following line in your  config/environments/development.rb

 config.assets.precompile += %w( your_dir/style.css, your_dir/custom.js)




2. Compile your assets in Development Environment: compile your assets by the following command

rake assets:precompile RAILS_ENV=development

3. Restart your Rails server: Now restart your server and your application will serve compile assets in development environment.

Adding title to Rails view

You can add your title for views in two ways.for adding title in views you have to follow these steps:

1-> add <title><%= yield(:title) %></title> inside the header of your layout.
2-> now you can add your title inside your view.there are following ways to do that:

  a-> use this line in your view:
      <%= content_for(:title, "Title for specific page") %>

  b-> use helper method:

•  add a helper method in application_helper

       def title(page_title)
            content_for :title, page_title.to_s
      end

• inside your view:

           <%= title "your custom title" %>
  c-> if you want to write title for view in controller then add this method inside   your application_controller.

  def view_context
    super.tap do |view|
      view.content_for :title, "your title"
    end
  end

if you want to add title according to your controller and action names pair then:

  def view_context
    super.tap do |view|
      view.content_for :title, "#{controller_name}_#{action_name}"
    end
  end
 

Converting Html to Pdf using wkhtmltopdf

wkhtmltopdf is open source (LGPL) command line tools to render HTML into PDF and various image formats using the QT Webkit rendering engine. These run entirely "headless" and do not require a display or display service.

wkhtmltopdf convert a html to pdf with all images and css.

1-Install wkhtmltopdf: download from link.
or
sudo apt-get install wkhtmltopdf  // in ubuntu.

2.Conversion: 
convert your html file to pdf by the following command:

wkhtmltopdf html_file_name.html pdf_name.pdf

this will create the pdf file named pdf_name.pdf inside the current directory.

Example:


 wkhtmltopdf www.yahoo.com yahoo.pdf

this command create a yahoo.pdf inside the current working directory and looks like same as html file.

 

JavaScript functions slice and splice

In JavaScript, mistaking slice for splice (or vice versa) is a common mistake. These two functions, although they have similar names, are doing two completely different things.

slice:Array’s slice is quite similar to String’s slice. According to the specification, slice needs to accept two arguments, start and end. It will return a new array containing the elements from the given start index up the one right before the specified end index. It’s not very difficult to understand what slice does:

Example:
'abcdefg' .slice(1,2)       // 'b'
'abcdefg' .slice(1,3)       // 'bc'
[1,2,3,4,5] .slice(1,2)     //  [2]
[1,2,3,4,5] .slice(1,3)     //  [2,3]


An important aspect of slice is that it does not change the array which invokes it. The following code fragment illustrates the behavior. As you can see, arr1 keeps its elements and arr2 gets the sliced version thereof.

var arr1 = [1,2,3,4,5];
var arr2 = arr1.slice(1, 2);
console.log(arr1);          // [1,2,3,4,5]
console.log(arr1);          // [2]



splice: Although splice also takes two arguments (at minimum), the meaning is very different:


[1,2,3,4,5] .splice(1,2)     //  [2, 3]



splice also mutates the array that calls it. This is not supposed to be a surprise, after all the name splice implies it.


var arr1 = [1,2,3,4,5];
var arr2 = arr1.splice(1, 2);
console.log(arr1);          // [1, 4, 5]
 console.log(arr1);          // [2,3]

Taking Picture from WebCam using Webcam jQuery plugin

WebcamJS is a small standalone JavaScript library for capturing still images from your computer's camera, and delivering them to you as JPEG or PNG. The images can then be displayed in your web page, rendered into a canvas, or submitted to your server.  WebcamJS uses [HTML5 getUserMedia], but provides an automatic and invisible Flash fallback.

WebcamJS is based on my old [JPEGCam] project, but has been redesigned for the modern web.  Instead of relying on Flash and only being able to submit images directly to a server, WebcamJS delivers your images as client-side Data URIs, and it uses HTML5 getUserMedia where available.  Flash is only used if your browser doesn't support getUserMedia, and the fallback is handled automatically.

Implementation:

1. Download webcam.js and put inside your application.download webcam.js click here.

2.include webcam.js in your html  file.

   <script src="webcam.js"></script>

3.configure your cam viewer setting:

   Webcam.set({
        width: 320, // width of cam viewer 

        height: 240, // width of cam viewer

        image_format: 'jpeg', // image format
        jpeg_quality: 90        // image quality

    });

4. Load your cam viewer:

Webcam.attach( '#web_cam' ); // inside script

5. take a picture:

function take_image() {
            // take snapshot and get image data
            var data_uri = Webcam.snap();
           
            // display results in page
            document.getElementById('results').innerHTML =
                '<h2>Here is your image:</h2>' +
                '<img src="'+data_uri+'"/>';
        }

call this take_image function to take picture from your cam.it will take an image and show it into the output's DOM.

 Html for the above example:

--------------------------------------

<div id="results"></div>    

<div id="web_cam" ></div>

<form>
        <input type=button value="Take Photo" onClick="take_image()">

</form>

   

Using FlashLight plugin in Phonegap Applications

Flashlight works with PhoneGap applications,Compatible with PhoneGap 3.0.0 and up. You can implement the plugin with these simple steps.

1. Installation:
  a. Download phonegap flashlight plugin here.
  b. place FlashLight.js inside your application's www/js/plugin folder.
  c. Add the following xml to your config.xml to always use the latest version of  this plugin:

  <gap:plugin name="nl.x-services.plugins.flashlight" />

  or to use this exact version:

  <gap:plugin name="nl.x-services.plugins.slashlight" version="1.0" />

 d. Reference the JavaScript code in your index.html:

 <script src="js/plugins/Flashlight.js"></script>

Note: keep it mind that FlashLight plugin must be referenced after phonegap in your index.html file.

2. Usage:
use these scripts to handle FlashLight events.

 window.plugins.flashlight.switchOn(); // to on flashlight.
 window.plugins.flashlight.switchOff(); // to off flashlight.

As an alternative to switchOn and switchOff, you can use the toggle function

window.plugins.flashlight.toggle();

Signing Phonegap's Android Applications and Deploying on Google Play

The Android system requires that all installed applications be digitally signed with a certificate whose private key is held by the application's developer.

before submit release on google play your application must be build in release mode.


Signing in Release Mode:

When your application is ready for release to other users, you must:

    1-Obtain a suitable private key
    2-Compile the application in release mode
    3-Sign your application with your private key
  
Generating private Key:

 To generate a self-signed key with Keytool.Keytool is java tool for generating private key. use following command to generate private key for signing your android application:

keytool -genkey -v -keystore app_signing.keystore -alias <alias_name> -keyalg <alg> -keysize <size> -validity 10000

where:

-genkey : Generate a key pair (public and private keys).

-v          : Enable verbose output.

app_signing: name of your key_file.

-alias    :  An alias for the key. Only the first 8 characters of the alias are used.

-keyalg <alg>:    The encryption algorithm to use when generating the key. Both DSA and RSA are supported.




 -keysize <size>:    The size of each generated key (bits). If not supplied, Keytool uses a default key size of 1024 bits. In general, we recommend using a key size of 2048 bits or higher.

-validity <valdays> :  The validity period for the key, in days.A value of 10000 or greater is recommended.

==================================================

Note: during creation of private key system ask for storeKey password,give any password and remember that password.it will required when you build the application in release mode.




----------------------------------------------------------------------------------------------------------------------------------
Building application for release:
1- after creating the signing key you have to add the key.keystore  file in your profile on https://build.phonegap.com/.
 
2- upload application.zip folder(compressed file of your application's www folder).

3- unlock your private key by your storekey password.

4- build your application.

--------------------------------------------------------------------------------------------------------------------------------

if you download your build app.apk from https://build.phonegap.com/
you can see that it is a app-release.apk.this build is signed build and you can just upload it on google play.