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

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