Chance to win free copies of Getting Started with WebRTC ebook

Getting Started with WebRTC

I’m excited to let all of you know that Packt Publishing wanted to give away free copies of their new book titled Getting Started With WebRTC to the beloved readers of my blog.

Three lucky winners stand a chance to win digital copies of the book. Keep reading to find out how you can be one of the Lucky Winners.

Overview:

  • Set up video calls easily with a low bandwidth audio only option using WebRTC
  • Extend your application using real-time text-based chat, and collaborate easily by adding real-time drag-and-drop file sharing
  • Create your own fully working WebRTC application in minutes

How to Enter?
All you need to do is head on over to the book page http://www.packtpub.com/getting-started-with-webrtc/book and look through the  description of the book and drop a line via the comments below this post to let us know what interests you the most about this book. It’s that simple.

Deadline:
The contest will close in 1 weeks or 2 weeks time depending on the response . Winners will be contacted by email, so be sure to use your real email address (No spam, email addresses of winners will be given to Packt Publishing only)!

Say hello to getUserMedia

It feels like a dream comes true. The HTML5 makes many of our dreams come true. You already know many of it’s dreaming features like localStorage, WebGL, Web Database, Audio/Video, Canvas etc. Fortunately, we can access users’ media devices like Camera, Microphone using browser’s native API. Yes, so, we don’t need any other third party plugins like flash or silverlight.

getUserMedia is a native browser API which allows us access user’s camera and/or microphone (of course upon user’s approval). So, you can capture sounds and videos with a few lines of Javascript and without support of any other plugins.

If you want to learn more and see working examples, you can follow these links:

Lessons learned while working with Backbone.js

I was developing a quite big Backbone.js application with my team of 2 more members. We were working on this project for about 7 months. We’ve learned an awful number of things in this journey as it was our biggest Javascript project for everyone in our team. Among many other things, OOP in Javascript always confuses me though I understand a few things better than earlier. I’ve tried to write a few things I’ve learned while working in this project; however, everything does not directly related to backbone.js

Source Code is the best documentation

I have relied on the backbonejs.org for several months for documentation purpose. However, I’ve found not everything was documented properly in the website. For example, from the website I knew fetch/sync accepts success and error as property of the options hash. What I didn’t know until I read the source code is that it also triggers sync and error events on success and failure respectively. Reading the official doc, I thought it’s possible only for save() method.

Simplified Object Copying

If I need to copy a variable/object attribute, I first need to check it whether it exists or not. Look at this example:

if(this.someAttribute){
  var localAttribute = this.someAttribute;
} else {
  var localAttribute = this.someAttribute = {} //or any default value;
}

However, while reading Backbone.js source code, I’ve learned we could write this in a very simplified one line.

var localAttribute = this.someAttribute || (this.someAttribute = {});

Changing in referenced object does not trigger events

When you change an attribute of a backbone model, change and change:attribute  events are triggered. For example,

object.set(‘name’, ‘The HungryCoder’) will trigger change and change:name events on object.  The following will not work.

var info = model.get('userInfo'); //returns a hash
info['id'] = 101;
model.set('userInfo', info);

The above change won’t trigger a change event. Here info variable is a reference to model’s userInfo and userInfo attribute in the object is already updated when you set info[‘id’] = 101;

In such cases, if you want to trigger the change events, you need to clone the attribute at first place when you are copying them.

var info = _.clone(model.get('userInfo'));
info['id'] = 101;
model.set('userInfo', info);

This will trigger change and change:info events correctly.

Learn fighting Zombies

If you’re working with Backbone.js for a while, chances are high that you’re already facing this kind of problems. Sometimes, you will notice that a particular action is triggering more than once though it is supposed to perform only once.

This happens because, even though, you remove elements from your DOM, they are still alive in your computer’s memory. Consider the example:

 

var Views.MyView = Backbone.View.extend({
  initialize: function() {
    this.model.on('change', this.render, this);
  },
  render: function() {
    //render template
    alert('hello');
  }
});

You’ve taken instance of this view and added to your DOM. When you wanted to remove these elements from DOM, you’ve called remove() method on this instance. Though the elements are removed from DOM, they are still in memory and can’t be cleaned up by Javascript’s garbage collectors as this object is still referenced from your model. It is due to the following line that you’ve written in our earlier view.

this.model.on('change', this.render, this);

The model has still a reference to this view and a referenced object is not cleaned. So your view is still going to alert you even if they are not visible in the DOM. This has been addressed in Backbone.js 0.9.9 where listenTo (and stopListening) is introduced. So you re-write the above line as following:

this.listenTo(this.model, 'change', this.render);

This will internally keep track of the bounded events and will reliably unbind any events when you call remove() on this view object.

to be updated…

jQuery Mobile: Part 3 – Modifying default ‘loading’ and ‘error loading page’ messages

In the second part of this series we have learned how to link pages. If you followed them, probably, you’ve also noticed that a ‘loading’ message while you are visiting pages back and forth. jQuery Mobile shows this while it loads the page behind the scene. Well, you may not see this in fast connection or during testing in your computer as it loaded too fast. Similarly, jQuery Mobile shows ‘error loading page’ when it fails to load any page.

In my application, I wanted to change these texts as I wanted them in Bangla.  We were seeing these because they are set by default in the framework. By modifying the default properties, we can change them to something we want.

To do so we will hook into jQuery Mobile’s ‘mobileinit’ event. This event (on document object) is triggered just on the moment jQuery Mobile is started to load. So, we will have to override these before loading jQuery Mobile library.

So far, we have loaded the library files in the following order:

Continue reading →

jQuery Mobile: Part 2 – Making multiple pages and linking them

Hey fellas, in the first part of our jQuery Mobile journey we have learned how to make the first jQuery Mobile page. That was quite easy and fun. As we ain’t going to give those introductions again, I believe, its a good idea to have a look into the previous part.

In this part we will dig a bit more. We will see how can we make more than one pages and link to each other.

Continue reading →

jQuery Mobile: Part 1 – Making your first mobile page

Happy days are coming soon as jQuery Mobile 1.0 is already in Beta 2 phase which is going to enter Beta 3 in, probably, next month and then to Release Candidates (RC). However, the current state of jQuery Mobile is very well qualified for playing. So, I wish to write some beginner level blog posts as I discover it. If you find any mistake, error and/or you have any suggestion, please feel free to notify me.

Today we will see how to create first page with jQuery Mobile 1.0 Beta 2. We will see other things in near future, may be :P.

Continue reading →