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

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