use ‘strict’ features on JavaScript

List of features (non-exhaustive)

  1. Disallows global variables. (Catches missing var declarations and typos in variable names)
  2. Silent failing assignments will throw error in strict mode (assigning NaN = 5;)
  3. Attempts to delete undeletable properties will throw (delete Object.prototype)
  4. Requires all property names in an object literal to be unique (var x = {x1: "1", x1: "2"})
  5. Function parameter names must be unique (function sum (x, x) {...})
  6. Forbids octal syntax (var x = 023; some devs assume wrongly that a preceding zero does nothing to change the number.)
  7. Forbids the with keyword
  8. eval in strict mode does not introduce new variables
  9. Forbids deleting plain names (delete x;)
  10. Forbids binding or assignment of the names eval and arguments in any form
  11. Strict mode does not alias properties of the arguments object with the formal parameters. (i.e. in function sum (a,b) { return arguments[0] + b;} This works because arguments[0]is bound to a and so on. )
  12. arguments.callee is not supported

AWS S3 – Pre-signed URL uploads

RUBY (create a pre-signed & public url from server side)

s3 = Aws::S3::Resource.new
obj = s3.bucket('bucket-name').object('files/hello.text')

put_url = obj.presigned_url(:put, acl: 'public-read', expires_in: 3600 * 24, content_type: 'multipart/form-data')
#=> "https://bucket-name.s3.amazonaws.com/filesp/hello.text?X-Amz-..."

obj.public_url
#=> "https://bucket-name.s3.amazonaws.com/files/hello.text"

You can fetch pre-signed URL from server side either directly while landing on the page or via AJAX. Preferred method is do a AJAX to server side with the param (filename) and in the server generate a pre-signed url using file name and time-stamp. 

JAVASCRIPT (Trigger a PUT call to AWS S3 using pre-signed url)

$.ajax( {
    url: url, //presinged-url which you get from server side
    type: 'PUT',
    data: file,
    processData: false,
    contentType: false,
    headers: {'Content-Type': 'multipart/form-data'},
    success: function(){
        console.log('Image successfully uploaded. Now the object (image/pdf/text/whatever-it-is now can be downloaded using public url received from server side');
    }
    error: function(){
        console.log('Something went wrong');
    }
});

ADD CORS ON AWS S3 (do this only for a particular bucket, avoid doing it globally)

    
 <CORSConfiguration>
 <CORSRule>
 <AllowedOrigin>*.mydomain.com</AllowedOrigin>
 <AllowedMethod>PUT</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>Content-*</AllowedHeader>
 <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
    

Active admin resolve kaminari and will paginate gem conflict issue

Add config/initializers/kaminari.rb

Kaminari.configure do |config|
config.page_method_name = :per_page_kaminari
end

Add config/initializers/will_paginate.rb

if defined?(WillPaginate)
ActiveSupport.on_load :active_record do
module WillPaginate
module ActiveRecord
module RelationMethods
def per(value = nil) per_page(value) end
def total_count() count end
end
end
module CollectionMethods
alias_method :num_pages, :total_pages
end
end
end
end

Pagination example on active admin

controller do
def index
index! do |format|
@products=Product.all.page(params[:page])
format.html
end
end
end

 

Bootstrap – Images

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container”>
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>
<img src=”cinqueterre.jpg” class=”img-rounded” alt=”Cinque Terre” width=”304″ height=”236″>
</div>

<div class=”container”>
<h2>Circle</h2>
<p>The .img-circle class shapes the image to a circle (not available in IE8):</p>
<img src=”cinqueterre.jpg” class=”img-circle” alt=”Cinque Terre” width=”304″ height=”236″>
</div>

<div class=”container”>
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src=”cinqueterre.jpg” class=”img-thumbnail” alt=”Cinque Terre” width=”304″ height=”236″>
</div>
<div class=”container”>
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src=”cinqueterre.jpg” class=”img-responsive” alt=”Cinque Terre” width=”304″ height=”236″>
</div>
<div class=”container”>
<h2>Responsive Embed</h2>
<div class=”embed-responsive embed-responsive-16by9″>
< iframe class=”embed-responsive-item” src=” http://www.youtube.com/embed/n1IVj0w57hM  “> </iframe>
</div>
</div>

</body>
</html>

Images

Angular JS implementation with Rails 4

Step 1 : Create rails app using rails new employee_details
Step 2 : Remove turbolinks gem from gemfile and add ‘pg’ gem for postgres. Set the rails version to 4.1.2 (Turbolinks may not work with angular js)
Step 3 : Run bundle install
Step 4 : Change database.yml to use postgres
development:
adapter: postgresql
encoding: unicode
database: employee_details
username: postgres
password: root
pool: 100
Step 5 : Create the model
rails g model EmployeeDetail employee_id:integer employee_name:string expertise:string experience:integer education:string mobile:string address:text gender:boolean
Step 6 : Run rake db:create and rake db:migrate
Step 7 : Create a controller
rails g controller employee_details
class EmployeeDetailsController < ApplicationController
def index
end
end
Step 8 : Create a view file for employee_details
<div>
<h1>Ruby on Rails Rocks</h1>
</div>
Step 9 : Add routes for index page
root ’employee_details#index’
Step 10 : Change layout file, remove turbolinks, add ng-app with the app name and point angular javascripts
<!DOCTYPE html>
<html ng-app=”EmployeeDetails”>
<head>
<title>Employee Details</title>
<%= stylesheet_link_tag ‘application’, media: ‘all’ %>
<%= csrf_meta_tags %>
</head>
<body>
<header>
Angular
</header>

<%= yield %>
<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js”></script>
<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js”></script>
<%= javascript_include_tag “application” %>

</body>
</html>
Step 11 : change assets/javascripts/application.js
//
//= require app
//= require_tree ./../angular
Step 12 : Define app which we referred above in app.js.coffee
window.App = angular.module(‘EmployeeDetails’, [‘ngResource’])
Step 13 : Define custom routes
EmployeeDetails::Application.routes.draw do
root ’employee_details#index’
end
Step 14 : Create directories as below
assets/angular
assets/angular/controllers
assets/angular/services
assets/angular/directives
Running the app now should display ‘Ruby on Rails Rocks’
Step 15 : Change the index.html to below
<div ng-controller=”EmployeeDetailsCtrl”>
<h1>Message: {{title}}</h1>
</div>
Step 16 : Now create the angular controller (inside assets/angular/controllers/employeedetailsCtrl.js.coffee) referred above and assign title
App.controller ‘EmployeeDetailsCtrl’, [‘$scope’, ($scope) ->
$scope.title = “Ruby on Rails Always Rocks!”
]
Restart the server. Running the app now should display ‘Ruby on Rails Always Rocks’
Step 17 : Change the index method of controller and render json
class EmployeeDetailsController < ApplicationController
def index
render json: EmployeeDetail.all
end
end
Step 18 : Generate few records using seed
#Emp ID, Emp Name, Expertise, Experience, Education, Mobile, Address, Gender
employees = EmployeeDetail.all.count
if employees == 0
employee_id = [101,102,103,104,105]
employee_name = [“Arun”, “Kumar”, “Raja”, “Karthik”, “Surya”]
expertise = [“RubyOnRails”, “English Literature”, “PhP”, “Admin”, “Java”]
experience = [5,4,3,4,5]
education = [“M.C.A”, “M.A”, “B.E”, “B.E”, “B.E”]
mobile = [“9987656478”, “9878965437”,”9786587987″, “9879547897”, “9876096543”]
address = [“Chennai”, “Madurai”, “US”, “Cuddalore”, “Trivandrum”]
gender = [0,1,1,0,0]
for i in 0..4
EmployeeDetail.create(
employee_id: employee_id[i], employee_name: employee_name[i],
expertise: expertise[i], experience: experience[i],
education: education[i], mobile: mobile[i],
address: address[i], gender: gender[i]
)
end
end
Step 19 : Run rake db:seed
Now go and run the app, you should see the records in JSON format.
Step 20 : Create the home controller (we will be using this controller for angular implementation)
class HomeController < ApplicationController
def index
end
end
Step 21 : Apply root to home controller index method and create api routes for angular
scope :api do
get “/employee_details(.:format)” => “employee_details#index”
get “/employee_details/:id(.:format)” => “employee_details#show”
end
root ‘home#index’
Step 22 : Get the records on angular controller
App.controller ‘EmployeeDetailsCtrl’, [‘$scope’, ‘EmployeeDetail’, ($scope, EmployeeDetail) ->
$scope.showEmployeeDetail = null
$scope.selectedRow = null

$scope.employee_details = EmployeeDetail.query ->
$scope.showEmployeeDetail = $scope.employee_details[0]
$scope.selectedRow = 0

$scope.showEmployeeDetail = (employee, row) ->
$scope.showEmployeeDetail = employee
$scope.selectedRow = row
]
Step 23 : Create the service for api
App.factory ‘EmployeeDetail’, [‘$resource’, ($resource) ->
$resource ‘/api/employee_details/:id’, id: ‘@id’
]

Step 24 : Now change the view file for listing employees (app/views/home/index.html.erb)
<div ng-controller=”EmployeeDetailsCtrl”>
<ul>
<h1>{{title}}</h1>
<li ng-repeat=”employee in employee_details”>
<h3>{{employee.employee_id}} <small>({{employee.employee_name}})</small></h3>
</li>
</ul>
<div ng-show=”showEmployeeDetail”>
<h2>{{showEmployeeDetail.employee_id}}</h2>
<p>{{showEmployeeDetail.employee_name}}</p>
<p>
Expertise : {{showEmployeeDetail.expertise}}
</p>
</div>
</div>

 

Restart the server. Executing the application at http://localhost:3000 will now display the list of employees and the information of first employee.