JavaScript modules are the most used design pattern to keep your code separate from your components which provides loose coupling to your code.

Modules are JavaScript classes, which provides protection of states and behaviours from being accessed by other classes. The module pattern allows for public and private access levels.

This is how the code looks like:

(function() {

    // declare private variables and/or functions

    return {
      // declare public variables and/or functions

Read complete blog post

There are many ways you can style react component you can use are Inline CSS and there are many React Libraries like typestyle which is good but there have some other flaws in it like it forces you to write CSS in javascript object means if you want to write CSS as background-color:red you would have to write as backgroundColor:'red' like this which seems very weird but if you use styled component is very simple and also it allows use style react in plain CSS

First, we gonna create new project…

Read complete blog post

Functions are objects in JavaScript, so you can store them in variables, pass it as an argument to another function and also you can return it from the function. Yes, function returning another function.

CallBack functions are derived from functional programming and is also covered in advanced JavaScript topics but here we'll see that it is quite easy to implement.

What is a CallBack or Higher-order function?

It is a function which is passed to another function as parameter and is called…

Read complete blog post

Recently we improved performance of one of our Ruby on Rails application. We used NewRelic tool to identify areas that were slow. One of which was file and image uploads to S3 from a text editor (Redactor).

When a user uploads a big file or image - the app's server response time shoots up degrading the performance and overall throughput because the files and images were being uploaded via rails action. The server process was busy uploading file on S3 while other requests to server were being…

Read complete blog post

URL previews are a way of organizing the URLs in the textarea in such a way that the URL is visible in a more organized way to the user instead of a just plain link. The plain URL makes no sense most of the time because of the advent of URL shorteners. With the increasing usage of social media websites and social media share plugins it becomes very difficult to identify spammy and non-spammy posts on the internet and with URL previews we could help such websites differentiate on our apps by…

Read complete blog post

There are often cross cutting concerns in your app, such as logging, security checkpoints and or maybe business validations.

This is a very simple approach of implementing method interceptors in pure javascript.

The crux: This decorates all the methods for the given object with before and after interceptions.

intercept: function(o) {
    for (let p in o) {
        if (typeof o[p] === 'function') {
            let c = o[p];
            o[p] = function() {

Read complete blog post

Server side rendering need lots of configuration to get up and running if you choose to use boilerplate which is filled with package that you may not need, well next.js is developed to solve this problem and it makes server-side rendering in React a breeze

What you will learn in this article

  • Get up and running with Next.js
  • Add Client-side transitions between routes
  • How to do handle Ajax in Next.JS
  • create reusable component for rendering Layouts

To get started with you need two things…

Read complete blog post

As an Ember developer, discovering Yarn package manager by Facebook was the best that could happen to me Whenever one of my fellow developers encountered “Broccoli Plugin failed…” I used to say ‘rm -rf node_modules’, that’s what my seniors told me and I continued the tradition.

That was very frustrating and as a beginner, I use to blame it all on Ember as I didn’t understand much of what was happening. As time passed I realized npm was the culprit. But a few months back I discovered this Yarn…

Read complete blog post

What is BombBomb

BombBomb is a platform to record, send and track video emails. BombBomb provides lots of value to users - who can send personalized video email instead of regular text emails. You can learn more about BombBomb here.

How to integrate BombBomb

We used the BombBomb Javascript API to connect to various BombBomb Services. To begin, include the BBCore and jQuery libraries in your html (The latest version is available at…

Read complete blog post


  • Image Cache is JS library used to provide a nice interface for locally storing images for offline apps using PhoneGap/Cordova.
  • This library is especially useful for mobile web applications using Phonegap/Cordova where image becomes stale (invalid) after normal offline navigation therefore in this case we can not relied upon Normal Cache.
  • So by using image cache we can store images in the cache and replace the stale version of normal cache with fresh version of image cache.
  • This…

Read complete blog post

Cordova File Transfer plugin allows you to transfer / upload photos from mobile to server. You generally need a file with path for transferring / uploading files via File Transfer plugin.

More information on how to use Cordova File transfer plugin can be found here.

This plugin won't help much when we have a Base64 image (usually a drawing or signature drawn on canvas). To upload such images we can do:

  1. take your base64.
  2. write it to a file.
  3. then just use file transfer plugin to upload it to…

Read complete blog post

Recently we developed one feature where we wanted to present a new tab view for an existing smaller form interface whereby users can use the full screen of the new window to move around and use the feature with ease. While we were developing the feature, we came across few challenges and thereby few learnings which we thought would be good to share -

1. Caching existing values.

We have around 8-9 forms from where we can use this feature but each of them have different implementation based on…

Read complete blog post

Ruby Comments

There are basically two types of comments in Ruby. And they work in the same way as follows:

The block comment

The comment block is created with the =begin and =end delimiters.

def welcome
    This will print the welcome message.
    You can also add your custom message.
  puts "Welcome to ruby comments learning :)"

The line comment

This is the simple comment where you place an octothorpe(#) as the first non-whitespace character of the line, and…

Read complete blog post

If you have used interpreted languages like Ruby, Python or JavaScript, then you know that semicolon ; is an optional delimiter to terminate the code instructions in these languages.

But for now, let us focus on JavaScript.

JavaScript, the language has this feature called Automatic Semicolon Insertion, often referred to as ASI.

Automatic Semicolon Insertion what it sounds like: If you don’t add a semicolon at the end of a line, the interpreter will add one for you while parsing your code.

Read complete blog post

You might have seen similar code in javascript. I wanted to understand how it is working. As it does not look like a ternary expression.

return {
  "false": React.DOM.a({
    href: "javascript:void(0)",
    onClick: this.linkClicked
  }, "Click Me Now"),
  "true": React.DOM.span({}, "You have clicked")

While discussing with team we found that, it is nothing, but a SWITCH CASE

click her to see shorthand for js

So when we execute above mentioned code, if…

Read complete blog post

Yesterday I was working on one of our portal (It's in Ruby on Rails and we have used quite alot jquery as well). Was integrating a nice Photo Gallery plugin on one of the page. Applcation is having many pages. Every page has some different behaviour and we have different jquery calls for that as per need.

For a performant application, we always want to avoid any unwanted calls to different methdods/functions. In my case, as I mentioned earlier I wanted to show Photo Gallery on a page and photo…

Read complete blog post

Easy way to create a numeric input, which accepts only numbers (i.e. 0-9 and no other characters).


import Ember from 'ember';

export default Ember.TextField.extend({
  tagName: "input",
  type: "number",
  attributeBindings: [ "name", "type", "value", "maxlength", "id" ],
  keyDown: function(e) {
    var key = e.charCode || e.keyCode || 0;
    // allow enter, backspace, tab, delete, numbers, keypad numbers, home, end only.
    return (
      key === 13 ||

Read complete blog post

For displaying flash messages and other informative messages, we generally use Internationalization (I18n) in rails.

Sometimes we also need to write similar messages again in javascript/coffeescripts which can be difficult to manage if these message changes. And also it doesnt follow the concept of DRY.

To follow DRY, we need to make rails locales available in javascript.

One way to do it is to declare a global variable and have all locales saved to it as Javascript Object.

This is what we…

Read complete blog post

Why we need YAML parser.

As long as we are working in rails we will hardly face a situation, where we have to parse the YAML files in javascript.However when we are planning to work on node.js OR tideSDK where javascript is the heart of everything, then in that case we need something to parse the configs and then writing to configs if necessary.

There are many parser available to read the YAML. But there are very few which does the reverse good. I found just two plugins like that. One plugin…

Read complete blog post