Segrigate css js and html in rails

It is always easy to work when every asset is segregated from other. But in normal practice we write js in our html template files. Another mistake we bind our js events on ids, css classes which should not be there, by looking the htmlit will confuse you why you use the css property to give style  or to give js functionality. Best practice is to use data property of the element.

<%= link_to "Update Credit Card", "#", data: { behavior: "update-credit-card" } %>

and bind the js event on data

$(document).on("click", "[data-behavior~=update-credit-card]", function(){

  // code

}) 

our body tag should looks like

class="<%= controller_name %> <%= action_name %>">
  <%= yield %>
</body>

because by doing this we can write css on controller basis and for more specific we can take action help as well.

use of animate.css with callback function

I need to integrate the animate.css in rails 5 project. Well its pretty straight forward to integrate, I used gem animate.css-rails. I also require a callback when animation is done for this I need to write a javascript function.

var animateCss = function (element, animationName, callback) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    element.addClass('animated ' + animationName).one(animationEnd, function () {
        element.removeClass('animated ' + animationName);
        if (typeof(callback) == 'function') {
            callback();
        }
    });
}

Overriding the devise default routes

I need to integrate devise gem in Rails5.0 application. It works flawless but the client requirements were he wants the urls  in very user friendly way like sign-in for users/sessions/new and more.

I override the routes in my routes.rb file to meet client requirements but as a result of it there were a lot of routes also there in the application which comes from the devise which we don't want. i made some changes and my routes.rb looks like

devise_for :users, :controllers => {registrations: 'registrations'}, 

:skip => [:sessions, :passwords, :registrations, :confirmations]

devise_scope :user do

  get 'sign-up' => 'devise/registrations#new', :as => :new_registration

  post "/sign-up" => "registrations#create"
  get '/forgot-password' => "devise/passwords#new", :as => :new_user_password

  post '/forgot-password' => "devise/passwords#create"

  get '/reset-password' => "devise/passwords#edit", as: :edit_user_password

  post '/reset-password' => "devise/passwords#create", as: :user_password

  put '/reset-password' => 'devise/passwords#update', as: :user_password_update

  post '/confirmation' => "devise/confirmations#create", :as => :user_confirmation

  get '/resend-confirmation' => "devise/confirmations#new", :as => :new_user_confirmation

  get '/confirmation' => "devise/confirmations#show", :as => :user_confirmation_show

  get '/my-profile' => "devise/registrations#edit", :as => :my_profile_edit

  get 'sign-in' => 'devise/sessions#new', :as => :new_user_session

  post 'sign-in' => 'devise/sessions#create', :as => :user_session

  delete 'sign-out' => 'devise/sessions#destroy', :as => :destroy_user_session

end

Shallow copy and Deep copy javascript object using native or underscore.js

Unfortunately there is no method in javascript to clone a javascript object. So if you do something like

a = {key: 'value'}
b = a

Internally in javascript the reference of the object is store in variable copied to b so both variable pointing to the same object.

Underscore.js provide clone method which shallow copy the object. so if i do something like

a = {key: 'value'}
b = _.clone(a)

Both a and b variable have different references.

As underscore.js clone method does shallow copy, objects inside the variable a and b remains same. so if i do something like

a = {key: 'value', key2: {key3: 'value2'}}
b = _.clone(a)

Both variables have different references but the key2 still have the same reference. So if i do any activity on key2 it will affect both objects.

Now my requirement is to have a deep copy rather than shallow copy. To achieve this i use the power of JSON. so if i do something like

a = {key: 'value', key2: {key3: 'value2'}}
b = JSON.parse(JSON.stringify(a))

Now both variables having different references and object is deep copied.

firebase user authentication

Most applications need to know the identity of a user. Knowing a user's identity allows an app to provide a customized experience and grant them permissions to access their data. The process of proving a user's identity is called authentication. Firebase provides a full set of authentication options out-of-the-box.

When a user authenticates to a Firebase app, three things happen:

• Information about the user is returned in callbacks on the client device. This allows you to customize your app's user experience for that specific user.
• The user information returned contains a uid (a unique ID), which is guaranteed to be distinct across all providers, and to never change for a specific authenticated user.
• The value of the auth variable in your app's Security and Firebase Rules becomes defined. This variable isnull for unauthenticated users, but for authenticated users it is an object containing the user's unique (auth.uid) and potentially other data about the user. This allows you to securely control data access on a per-user basis.

Make current user available through out the ionic2 application

Like every application which have login system in it you have a lot of features available for the user. like if login user is admin then navigation options will change. Along with these there are many situations where you need the current login user like comment feature. So i have pass or fetch from local storage every time i require current login user. I have a different approach login user should be a static variable which is available through out the application.

export class Singleton {
  private static _instance;
  public static get instance() {
    class current_user{
       public login_user: User; 
       public menu_option: Array<{title: string, component: any, icon: string}>;

       retrive_user_from_local_storage(){
        // code to set the current user from local storage.
      }

      populate_menu(){
      // code to populate the menu depending upon the login_user_type.
      }
   }
   if(!Singleton._instance) {
            Singleton._instance = new current_user();
        }

        return Singleton._instance;
    }
 }
}

Now i just have to import file the above file where i require the current user like

import {Singleton} from '../../lib/singleton';

export class BusinessDetail {
  
private singletonObject = Singleton.instance;
//rest code.
}

Cors issue and its relationship with http options verb (preflight check)

First lets understand cors:

A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which the first resource itself serves. For example, an HTML page served from http://domain-a.com makes an <img> src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.

Http verb OPTION:

The OPTIONS verb is a preflight request sent by some browsers to check the validity of cross origin requests. It pretty much checks with the server that the Origin(requester) is allowed to make the request for a specified resource. Also, depending on which headers are sent back by the server it lets the browser know which headers, methods, and resources the origin is allowed to request form the server.

The browser sends the OPTIONS request then if the server answers back with the correct headers (CORS headers) allowing the origin to make the request, you should see your POST request go through afterwards.

for more info go

There are multiple way we can fix the cors issue, a detail documentation is available here