Magics of browser console you aren’t aware of

Featured

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

Command

console.log(console)

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

Assert

You might have done the following in your code

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

There is a handy way to do that.

Command

console.assert(flag, "some error")

Counters

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.

Command

console.count("counter")

You can reset the counter using the below command

console.countReset("counter")

Beautify

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

Table look

Command

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

Custom CSS

You can even use custom CSS to style the console output

Command

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

Group

You can even visually group the output.

Log the timeduration

Log the trace

Log levels

References

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.


<html>
		<head>
        	<script src="jquery.js"></script>
			<script src="keys1.js"></script>
			<script src="keys2.js"></script>
                        <style>#canvas{border:dashed}</style>
		</head>
		<body>

		</body>
	</html>

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.

<script>
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");
canvasElement.appendTo('body');
var FPS=30;

var threading=setInterval(function() {

  update();
  draw();
}, 1000/FPS)

function update(){

}

function draw(){

}

</script>

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.
pic1
Step:4

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);
	 player.draw();
	 }

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(player.x<=0){
		player.x=0;
	}
  }

  if (keydown.right) {
    player.x += 10;
	if(player.x>=CANVAS_WIDTH-32){player.x=CANVAS_WIDTH-32;
	}
  }

}

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.

Step:6

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",
	x:480,
	y:10,
	width:32,
	height:32,
	speed:10,
	draw:function(){
	  canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);

	},
	 update:	function(){

this.y +=this.speed;
if(this.y>=320*2){
this.x=(Math.random()*960)%960;
		this.y=10;
}
	}
	};

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. 

Step:7
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);
	 if(collision(enemy,player)==true){
clearInterval(threading);
canvas.font='20pt Calibri';
canvas.fillText("Game Over Press F5 ",600,500);
 }
	 player.draw();
	 enemy.draw();
}

Now play