Magics of browser console you aren’t aware of


Web developers log messages on the console to ensure their javascript code is working as expected. Apart from just logging the message like console.log("log message"), there are other useful utilities which a web dev can use to level up their debugging.
Let’s start with logging the console object to see what all functions are there in the console object.

Log the console object



There are various functions available(assert, clear, context, etc). I will cover my favorite ones.


You might have done the following in your code

if(!flag) console.error("some error")

There is a handy way to do that.


console.assert(flag, "some error")


I am sure you might have done the following in your javascript code.

counter ++; console.log(counter)

There is a much handy way to do a similar thing.



You can reset the counter using the below command



There are various ways to beautify the output of the console – table, custom css.

Table look


console.table({abc: 1, bcd: 2})

Custom CSS

You can even use custom CSS to style the console output


console.log("%c hello", "background-color:red; color:white; padding:30px; font-size:40px")


You can even visually group the output.

Log the timeduration

Log the trace

Log levels


Telegram’s new Inline Bots

Telegram today announced inline bots in their blog post.

[Why I am writing this blog post ? I was eagerly waiting for this feature]

From Telegram blog post –

With the new inline mode, bots become omnipresent and can be used as a tool in any of your chats, groups or channels – it doesn’t matter, whether the bot is a member or not. Inline bots can help you with dozens of different tasks, like quickly sending relevant GIFs, pictures from the Web, YouTube videos, Wikipedia articles, etc.

So now you can use any bot in the group even without adding it in the groups.

If you are a developer, you can directly head to .

Screen Shot 2016-01-06 at 8.28.09 am

Earlier I created a bot  (@Chuck_Norris_Jokes_Bot ) to get random chuck Norris Joke. Now I will send these jokes to some groups(telegram) to create awkward silences :p

< Happy Coding />


Graph.js – a Graph Algorithms Library in JavaScript

Hello World!
I am writing a blog post after long time. I was quite a busy these days. One day I thought of developing a game in JavaScript. The game design was such that it required graph algorithms implementation in JS. I googled but found nothing suitable for my work. So I though of implementing my own Graph Algorithms Library in JavaScript.This post is in regard to Graph.js ( Github Repo ) – a lite weight JavaScript Graph Algorithms Library. Graph.js is easy to use , change and debug. All the algorithms present in it are efficient in terms of space and time complexity.

Algorithms implemented

  • Depth First Search
  • Breadth First Search
  • Dijkstra – Shortest Distance between two nodes
  • Bellman Ford – Shortest Distance between two nodes.
  • Johnson’s Algorithm for all pair shortest path.
  • Prim’s Algorithm for minimum spanning tree of Undirected complete graph.

How to use

Just include graph.js file in your application .
If you want to build the file from the source code you can just run the make command from the top level directory of the project.

Future Additions to the project

  • Implement more algorithms like clustering , max flow , bipartite matching , random graph generation.
  • Add some test suite ( Preferably QUnit )
  • Add a graph visualizer ( Big Enhancement)
  • Some very good code examples of the usage of library.

Note : You can visit Github Repo for example code and other information. As the library is in nascent stage you can find errors . Feel free to fork , make pull requests and report errors.

KillFlash :HTML5

What a newbie thinks about HTML5 ?

HTML5 rumoured as the flash killer is one of the hot topics among the developers. Saying that it is  just a revision(5th) of  the  HTML standard will not serve the power it provided to the developers. I myself being new to web technologies have always thought of making a game . [Disclaimer: I am newbie.]

So we will be making a car racing game.Demo Sourcecode

Language used:

HTML5, JavaScript.

Step 1:

Create a file named index.html and copy the following code into it.

        	<script src="jquery.js"></script>
			<script src="keys1.js"></script>
			<script src="keys2.js"></script>


In this step we have just created out html file and included the external javascript.

Step 2:
Download and unzip all the files from this folder.

This folder will have three files:

  • jquery.js: Write less do more JavaScript library.
  • keys1.js,keys2.js: These two files are used to handle the key events as handling the key events until now is very dirty.

We are not going into the details of the files keys1.js and keys2.js as it is beyond the scope of this post.If you donot know about jquery you can see the official jquery website or if you want to learn about the jquery you can see the documentation of the jquery or visit w3schools website.

Step 3:

Add the following code into your body tag.

var CANVAS_WIDTH = 480*2;
var CANVAS_HEIGHT = 280*2;

var canvasElement = $("<canvas width='" + CANVAS_WIDTH +"' height='" + CANVAS_HEIGHT + " '' id='canvas'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
var FPS=30;

var threading=setInterval(function() {

}, 1000/FPS)

function update(){


function draw(){



Variables CANVAS_WIDTH CANVAS_HEIGHT are the width and the height of the container where we will be painting everything.
We are creating a canvas with id name =”canvas” and then we are appending it to the body.

The variables FPS represents frames per second.

The setInterval(code,n) is the javascript function used to call the function code after every n milliseconds . So here we are calling the functions draw() and update aftre every 1000/FPS milliseconds. Right now update and draw function are empty.

You can now see your index.html file in the browser. It should look  like this.

Now we will be painting our player on canvas. Just add the following code snippet inside script tag of the body.

var player={

color: "#00A",
  x: 400,
  y: 500,
  width: 40,
  height: 40,
  draw: function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);


Player has the following attributes:

Color: color of the player.

x,y:Coordinates of the current position of the player.

width,height: Height and width of the rectangle.

draw: a function to draw the player on the canvas.

Update the draw function of the step:3.

function draw(){
	 canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

Again open the index.html file in the browser. It should appear like this. pic2 Step:5 As we have to move our player with the arrow keys so now we will add the event listeners. Just update the function update() of step2.

function update() {

  if (keydown.left) {
    player.x -= 10;

  if (keydown.right) {
    player.x += 10;


Whenever the left arrow key is pressed we are decreasing the value of x by 10.And whenever right arrow key is pressed we are increasing the value of x by 10. Now again open your index.html. Your player will now move with your fingers.


Now we will be adding the enemy cars in our game. Just add the following code inside the script tag of the body.

var enemy = {

	color: "#000",
	  canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);

	 update:	function(){

this.y +=this.speed;

Enemy has the following attributes:

Color: color of the enemy.

x,y:Coordinates of the current position of the enemy.

width,height: Height and width of the rectangle.

draw: a function to draw the enemy on the canvas.

update:a function to update the position of the enemy.

and now update the draw and update functions.

add enemy.update(); in update function.
add enemy.draw(); in draw function.

Open your index.html in the browser.
Now we have to check the collision of the enemy car and the player car. 

Just add the following code in the script tag inside the body.
function collision(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;

And then update the draw function.

function draw(){
	 canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
canvas.font='20pt Calibri';
canvas.fillText("Game Over Press F5 ",600,500);

Now play