Category: JavaScript

WebRTC Opentok in Ruby On Rails for Text chat

This post will take you through adding text chat functionality using Opentok (a WebRTC platform) in Ruby on Rails. OpenTok is a WebRTC platform for embedding live video, voice, and messaging into your websites and mobile apps. Opentok has its own signalling server. We will be using the OpenTok signaling API.
First, we will make the basic setup for using Opentok service. Here we will be using ‘opentok’ ruby gem.

1) Add opentok gem to your Gemfile.

gem ‘opentok’

 

2) Then create a session that will attempt to transmit streams directly between clients.

Store session id and token somewhere in the database, so that you can use it later on.
Here token gets expired in 30 days(default value). You will need to regenerate after 30 days.

3) Now it’s time to connect to session that we have created above, Add this to your HTML page,

A signal is sent using the signal() method of the Session object. One can receive a signal by listening to a signal event dispatched by session object.
So, All clients who are connected to the same session and listening to same signal type(‘text_chat’ here) will receive a message as soon as someone publishes to channel ‘text_chat’.

Setup simple website using Node.js, Express, Nunjucks, Gulp & Nodemon

Hello developers, before we start integration of all our components, let’s have a quick review of the below things.

Node.js

Node.js is a server side javascript-based platform. Like other server side platforms ( eg: Rails, Python, PHP… ), this javascript based platform is built on Google Chrome V8 Javascript Engine.
Node.js uses an event-driven architecture & asynchronous or non-blocking I/O model, which improves efficiency and scalability for real-time applications.

Express

Express is a web application server framework for Node.js. Express provide a robust set of features for building single, multi-page and hybrid web applications.
Express allows us to set up middlewares to respond to client HTTP requests. It also provides URL routing which allows to perform different actions and render dynamic HTML pages using any of the template engines like jade, EJS, nunjucks …

Nunjucks

Nunjucks is a rich & powerful templating engine for javascript. It takes inspiration from jinja2 templating system.
Using nunjucks we can inherit templates and make it possible to use the same or a similar layout for all templates.

Gulp

Gulp automates and enhances your application workflow. It is a task runner which uses node.js. Gulp keeps things simple and makes complex tasks manageable using node modules.

Nodemon

After any changes in your node.js application files, your changes will not reflect immediately. To reflect changes you will have to manually restart node.js server each time in a development environment.
Nodemon helps us to avoid such manual restarts. It monitors all changes in your node.js application and automatically restarts the server for a development environment. Nodemon will watch the files in the directory in which nodemon was started, and if any files change, it will automatically restart your node application.

So we are now clear about all the things. Let’s install the required dependencies using the following commands.

Install Node & npm from nodejs.org. or you can directly install it using brew

$ brew install node.js
$ node -v

Once node js installed upgrade you npm using

$ sudo npm install npm -g
$ npm -v
$ npm install express --save
$ npm install -g gulp
$ npm install nunjucks
$ npm install -g nodemon

Let’s jump on to an integration of all these components into one to make a solid architecture.
1) Create a blank directory in your workspace

$ mkdir myapp && cd myapp

2) Init your app using the following command

$ npm init

so your “package.json” file is created using the above command. Open package.json in your favourite IDE and update or add the following node module dependency code.

Install all the npm dependencies from package.json

$ npm install

Now let’s move on to the node server setup and nunjucks configuration with a view. so create app.js file on root level and copy the following js code into your app.js

In our app.js file, we configured nunjucks as default template rendering engine

var nunjucks  = require('nunjucks');
nunjucks.configure(app.get('views'), {
    autoescape: true,
    noCache: true,
    watch: true,
    express: app
});

so using the above configuration, you can directly use nunjucks syntax in your views. Using this you can also extend or include other views in HTML page.

in the above code “index.html” we are extending default the layout (“default.html”).
Let’s render the above index.html in the browser using the following node.js code

Now let’s move on to our last configuration of gulp and nodemon. Create gulpfile.js at root level and copy following js code into your gulpfile.js

The above gulp file added with different tasks for a different purpose. On server start, it will automatically run all tasks and create compressed, minified dist folder and serve all static assets from dist folder. gulpfile run the following tasks on server start

1) compile scss
2) compress & minimize js and libs
3) minify css
4) minify html
5) minify images and add random version to image

so in above gulpfile, we configured nodemon using below function and called this function into our default gulp task. This will automatically restart your node js server on every file change.

nodemonServerInit = function(){
        livereload.listen();
        nodemon({
            script: 'app.js',
            ext: 'js'
        }).on('restart', function(){
            gulp.src('app.js')
                .pipe(livereload())
                .pipe(notify('Reloading page, please wait...'));
        })
}

Once all node modules are installed and gulpfile.js changes are done, your directory structure should look like the image below
folder structure

So using all these commands your project setup is done. Run the below command to start your server on localhost

$ gulp

this command will start your node.js server and serve uncompressed assets from the build directory.
Run below command to run your server on production

$ npm start

this command will serve compressed assets from the dist directory.

You could also download sample demo from github account.

Happy coding!
For any queries or help, please drop me an email on radhe@idyllic-software.com

Modularizing JavaScript with Browserify

What is browserify?

If you have ever written any custom Node.js modules, getting started with Browserify will be a walk in the park. Browserify enables us to write Node.js style modular code and declaring dependencies is even simpler than you think if you have used require.js in the past. Configuring require.js is a world of hell and their documentation doesn’t help in any way. This is when browserify turns out to be such a relief. Take a look at the following code.

module-alerter.js:

module.exports = function alerter(message) {
window.message(message);
}

Now, if we were to import this in main.js, we’d write the following.

main.js:

var alerter = require(‘./modules/module-alerter’);
document.addEventListener(‘DOMContentLoaded’, function(){
  alerter(‘This is awesome’);
}, false);

I am sold already. Aren’t you?

Install browserify

You need Node.js installed and NPM comes with Node.js.

npm install -g browserify

 

Now, let’s set jQuery as our dependency library in our module-alerter.js

var $ = require('jquery');
// Note that we don’t need to specify relative path for our jquery library
// jQuery 2.0+ is AMD compatible and it returns jQuery or $

module.exports = function alerter(message) {
window.message(message);
$(‘body’).css(‘color’, ‘red’);
}

Please, use the appropriate directory structure for your modules, libraries. I usually adhere to the following

Directory Structure
Ideal directory structures for your browserify project
/modules

– This is where you will put all your custom modules

/vendor

– This is where you will put all your libraries such as jQuery, Backbone, underscore

/assets/js/

– This is where browserify will bundle up all your modules along with vendor libraries in 1 neat and tidy file. (Notice we don’t have anything there yet? We will get to that part)

browserify Magic

It is time to let browserify wave it magic wand over our code and get us to work. Just run the following command by reaching your project directory. In my case, I should be in the directory node (Don’t worry. This is a non-node project. I named it node because I am in love with node.js)

$ browserify src/js/main.js -o assets/js/bundle.js

 

// Please do not prefix $ to the command

 

Now, switch to the browser and reload or whatever to see the result. Boom! Now, wasn’t that easy?

Your

assets/js/

directory should now look

like this

assets/js/bundle.js

 

bundle.js

is that neat and tidy file I mentioned earlier. You don’t have to worry about what’s in there.
Include this

bundle.js

in your HTML code right before the body ends. Like this

 script src="assets/js/bundle.js" 

There’s one problem, though. You might wonder, “Do I have to run this command every time I add new module/vendor library or re-arrange my modules in project structure?” NO.

What you need is something that will keep a track of changes happening in your project. Something that will over watch your beautiful modular code. Fortunately, there’s a Node package that can do that for us. Introducing watchify

Install watchify

npm install -g watchify

 

and change your previous command

from

$ browserify src/js/main.js -o assets/js/bundle.js

 

to

$ watchify src/js/main.js -o assets/js/bundle.js

 

I hope that was quick enough and believe me we just took a crack at browserify. There is a ton of things we can do with it. The best place to read up more on Browserify would be the handbook.

Building an OCR using PDF.js and PDFText

A couple of years back I was handpicked (not really 🙂 ) for a project that required me to work and build an application that would extract text from the PDFs uploaded into the system, using a bunch of baseline co-ordinates mapped against a sample pdf at start. The Project was named Invoice Analyser (IA) – since all the PDFs were actually invoices of our client.

I still vividly remember the day when I was made aware of the requirement on call and soon after the call ended, I knew it was going to tough but I kept faith in myself.

If I had to sum up the requirements, it would fit in 3 important points.

1. Display PDF Online.(baseline/sample pdf)
2. Map a set of co-ordinates of mark up area in a sample pdf (which is to be displayed online).
3. Extract the text from all the specified co-ordinates in any pdf uploaded henceforth (this is important because I needed those sets of co-ordinates to create a baseline sample, that once created, would be used against all similar looking PDFs to extract text out of them from relevant co-ordinates).

Now knowing all the above scenarios, I started with something that I believe everybody does (pray, no 🙂 ): googling. Luckily, I managed to knock off task 1, thanks to the amazing library called PDF.js

Those who don’t know about PDF.js well it’s an amazing Open Source library (perhaps maintain my mozilla) that focuses on a general-purpose, web standards-based platform for parsing and rendering PDFs. As far as I remember, it uses HTML5 canvas to display the PDF online (so a non HTML5 browser beware it might not work for you ).

Now, with 1 down, I concentrated my focus on tasks 2 and 3 and this was challenging. Upon my examination, I found that the co-ordinates mapped on PDF.js displayed(online) was way different from the actual pdf. Here is a link in which I asked this question on Stack Overflow (seriously after reading the first answer by @DanielLi, my confidence was deeply dented.) until, one fine day I finally got it. “That’s it. I found it. Eureka Eureka!” (was my initial reaction).

So to map the precise co-ordinates in PDF.js with respect to the actual pdf, one thing that played an important role was ASPECT RATIO [1](even though PDF render by PDF.js had different co-ordinates from the original PDF, it still maintains the same aspect ratio). So, with a little bit of jQuery and a little bit of Mathematics, I finally managed to nail task 2. Look I have also answered my own question here. (describing how I did it)

Now with 1 and 2 knocked off, task 3 was actually pretty easy. I came across 2 amazing libraries,
iText
PDFbox

that would return the specified text for the supplied co-ordinate. I went with iText (choosing iText over PDFbox was a personal choice)

End Result:

Disclosure : –
The project is almost 3 years old now. I’m aware that PDF.js has matured quite significantly now. For all those whose end result differs from mine(where I need to create baseline co-ordinates from the sample to use it to extract text from any pdf uploaded in future) you might want to look at the following example.

Also if you have a requirement similar to mine, you might just want to look at this answer as well

I stumbled upon this issue as the OP did and the answer helped me a lot.

So to map the extract co-ordinate in this case, just interchange your length and breadth based on orientation.

All in all, the project was seriously a challenge and being able to knock it off within the specified time frame is something I’m still proud of.

I have open sourced a demo version of the OCR which can give you a head start in building something similar to what I did.

GITHUB SOURCE

Native Data-binding using JavaScript with observe

We have always loved using MV* frameworks for data-binding. Well, we have our reasons. There was never an easy way to set event listeners on RAW objects and perform certain tasks. Thanks to the recent ECMASCRIPT’s (7.0) proposal, data-binding has never been so easy and best of all, without any help from any framework.

Announcing Object/Array.observe

Allow me to introduce you to

a method that asynchronously keeps track of the changes to the data model or
simply an array which allows you to perform certain tasks by providing a callback function every time it detects a change in your data model.

This callback function returns an object that provides the following information.

  1. type of change(add, update, delete) and splice if you are calling observe on an array
  2. name of the property changed
  3. changed object
  4. and the old value of the changed property

Why are we going gaga over data-binding? Well, data-binding is important if you care about keeping the content, presentation and behavior separate. HTML is perfect for declaring static documents and therefore, we need a way to tie our document and data together. With data-binding, we achieve just that. Using Object/Array.observe, we observe the changes in our data model and keep the DOM upto date.

Without further ado, let me show you how easy it is.

Note: Following example uses handlebars (which depends on jQuery) to save me from writing unnecessary DOM manipulation code.

4 important concepts any front end developer should know

Note: I picked these 4 concepts because I feel they would build a strong foundation of understanding for you and it is entirely my opinion and I also understand that every front end developer may not feel the same way. Also, the purpose of this article is to only briefly explain about these concepts so you can dig deeper when you know enough.

  1. Event Propagation
  2. Event Delegation
  3. Document Fragment
  4. CSS Specificity

Let’s begin…

Event Propagation

Event dispatching in DOM tree - (image source - W3C)
Event dispatching in DOM tree – (image source – W3C)
  • Event (event object) must determine the propagation path (refer to the diagram below) before dispatching.
  • Once determined, although target element has either been moved or changed in the DOM tree, propagation path doesn’t change for the event implementation to work properly.
  • Event object must pass through 3 phases. Capture, Target and Bubble.
  • All 3 events can be skipped if Event.stopPropagation() is called before event is dispatched.
  1. Capture phase: When event is dispatched from the top it must handle all listeners that it finds on the way down (Note: Only if EventListener method has userCapture set to true)
  2. Target phase: In this phase, event object finds the event target (event.target) and handles listeners registered on it.
  3. Bubble phase: Event object travels (propagates) in back to the top, handling listeners registered on it. (Note: Only if EventListener method has userCapture set to false)

Example – Bin


Event Delegation

Now, Event Delegation is one of the easiest and most interesting concepts. With Event Delegation, one doesn’t have to register event listeners for the element nodes that don’t exist in the DOM tree. One simply does it by registering one on the the parent.

For example, I have an unordered list that gets refreshed every second and a new list item may get added to it. Now, registering event listeners to each of these list items is simply not practical considering there could be hundreds of them or thousands. What do you do then?

Solution:

  1. We register an event listener to their parent which is UL, an unordered list.
  2. When the event occurs, we perform a check for whether the user has actually clicked on any LI.
  3. Perform a task.

Now, this will save you from creating separate event listeners from each of the LI nodes and just one event listener will do the trick.

DocumentFragment

DocumentFragment is a light, parentless document just like the one you already know except it doesn’t exist until you create it and is not a part of the live DOM. It acts as a third-party container that takes nodes, stores them and allows you to append them effortlessly to your visible, live DOM with tremendous performance improvements. Here’s the proof Performance Test

How to?

Let’s say, you want to append some list items to the unordered list which already exists in your DOM.

Now, to creating a blank DocumentFragment

Let’s add our list items to it. Just a handful.

Our fragment is ready with the nodes we need. Let’s add them to the live DOM now

Using DocumentFragments is really a very efficient method of DOM manipulation with an amazing performance boost. For detailed reference

CSS Specificity

Now this is not only an interesting topic to know about, but also a very enlightening one at that. Specificity has predefined weights for all elements and these weights decide which rule will be applied by the browsers. We have already written an article on it. Read it here

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)