Server Side Rendering in React using Next.js

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 Nodejs and yarn installed  you can do that by typing npm install -g

Working Of Yarn and npm

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 package manager. When I found it, I read

Imgcache Plugin to store images offline for Cordova Applications

Introduction 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 is the best solution I have found so far to provide easy caching of images within a Cordova web

Writing binary file in Cordova and uploading it to server using Cordova File Transfer plugin

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: take your base64. write it to a file. then just use file transfer plugin to upload it to server. In this article, I would explain how we can write Base64 image

Javascript Browser Window Operations in Rails

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 the requirement. So before we open the new tab - we wanted

Comments in Ruby and JavaScript

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 =begin This will print the welcome message. You can also add your custom message. =end puts "Welcome to ruby comments learning :)" end The line comment This is the simple comment where you place an octothorpe(#) as the first non-whitespace character of the line, and everything else written is excluded from being interpreted by Ruby. def welcome # This will print the welcome message.

Javascript - Shorthand for Switch statement

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") }[this.state.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 "this.state.clicked" is TRUE then it will show SPAN with text 'You have clicked'". This is just

Use Jquery - document.ready() to load page specific javascript in Rails App

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 gallery loads as soon as page is loaded. Gallery

Numeric input in Ember.js

Easy way to create a numeric input, which accepts only numbers (i.e. 0-9 and no other characters). app/components/numeric-input.js 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 || key === 8 || key === 9 || key === 46 || (key >= 35 && key = 48 && key = 96 && key And in your template, call it as {{numeric-input value=mobilePhone name="mobilePhone" id="mobile" maxlength="8" }} As the number input displays up

Access Rails locale in Javascript

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 did in our project: Added following code in application layout: For HAML - window.I18n = #{I18n.backend.