React Router Frequently Faced Problems

Routing is one of the toughest thing to Implement in Single Page App In React Ecosystem it is pretty much industry standard to use React Router to do routing. React Router have nice API and pleasant to work with but there few Issue that I faced while using React router If you have declared component and it is not rendering It could be below three Issues. First, if you are using any state management solutions like Redux or Mobx if you have assigned different components to render in a different path like below we are using render function instead of

JavaScript Module design pattern

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 } })(); Here we have to instantiate the private variables and functions before returning our object. Code outside of our function is unable to access these private variables since it is

How to style React Component with Styled Component

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 by using create-react-app CL which allows us

JavaScript callBack/Higher-order functions

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 inside that another function, therefore know as callBack function. Example of callBack function in jQuery: $("#btn"

BombBomb Video Emails Integration

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 https://s3.amazonaws.com/static.bombbomb.com/js/BBCore.min.js): <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.

Accessing cross domain iFrame contents

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 queued increasing the request processing time. To improve this, we decided to delegate

Using URL previews in your web apps using JavaScript

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 showing URL previews every time someone shares a

Javascript Method interceptors

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() { MIFactory.beforeExecution(o, p); let r = c.call(o, arguments); MIFactory.afterExecution(o, p); return r; } } } return o; } method interceptor factory: MIFactory = { interceptors: [], register: function(interceptor) { MIFactory.interceptors.push(interceptor); }, unregister: function(

Getting started with PreactJS — A Step By Step Guide

PreactJS is a fast 3kB alternative to React with the same ES6 APIFirst, some background…PreactJS is developed by Jason Miller — one of my programming heroes. The framework was developed with a goal of providing high performance, memory efficiency and close compatibility with React API with an aim to keep the footprint as small as possible i.e 3kb. Preact is increasingly getting adopted in the community with a bunch of high load websites already using it successfully in production. Housing Go is now powered by preact. 🔥 🎉 Thanks to @_developit and @brian_d_vaughn for their help. pic.twitter.com/

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