I recently came across a great tool for benchmarking your APIs. It’s a nodejs tool written by Matteo Figus. Complete documentation on the tool could be found here

In this post I will provide simple tutorial for anyone to use this tool for their API’s


  • Create a folder and run navigate to the folder using your tool of choice for running node commands. I use Git Bash. Run the following command to install the api-benchmark package. This would require node to be installed beforehand.


  •  Now let’s add a new JavaScript file and name it as mybenchmark.js. We will require the benchmark tool


  •  In this example we will use the Giphy API. Giphy is a GIF search engine. So let’s define a few variables that we will use.


  •  Let’s add the routes which we want to test. In this example we will get the trending gifs.


  •  And finally we run the benchmark


  •  Here is the complete code of mybechmark.js for your convinence


  •  To see this in action we will run the benchmark by running the following command in your console.


  •  And you should see something like below.
Api-Benchmark 1

Api-Benchmark 1



  • This does show that our benchmark ran but we cannot interpret the results from here. To see that we will have to use the getHtml method available on api-benchmark.


  •  However this will dump the entire html on the console which is nearly impossible to understand.
API Benchmark 2

API Benchmark 2


  • We will now save this html to a file so that we can view the results like the way it was intended. Let’s require another package to help us do that


  •  Change the apiBenchmark.measure to save the html in a file


  •  To see this in action we will run the benchmark by running the following command in your console.


  • This would create a new html file (benchmarks.html) in your current folder with the results. It would look something like below. You see the details of your requests and your api is performing.
API Benchmark 3

API Benchmark Stats


  • It also has 2 more tabs which show Request Details and Response Details as well. All of this provides great insight into your APIs.
API Benchmark 4

API Benchmark Request Response


  • However I felt that if we could get the distribution of the api calls then it would provide deeper insight into my APIs. So I added a new tab to the report to showcase the distribtion of api calls overtime. The pull request is merged. So you would notice additional tab in the report i.e. distribution tab and you should see something like below


API Benchmark 5

API Benchmark Distribution


  • We could also specify the available options to benchmark the API’s deeply. Let’s try out a few


API Benchmark Stats 100

API Benchmark Stats 100


API Benchmark Distribution 100

API Benchmark Distribution 100


Hope this helps you in getting started with api-benchmark. The entire source code for this post can be downloaded at googledrive or onedrive


Any questions, comments or feedback is always welcome.


Blend for Visual Studio


The first ever book on Blend for Visual Studio is now available for purchase. The book is called Blend for Visual Studio 2012 by Example: Beginner’s Guide and is available for purchase form Packt Website – https://www.packtpub.com/application-development/blend-visual-studio-2012-example-beginners-guide


Blend for Visual Studio

Blend for Visual Studio

Grunt is a JavaScript Task Runner. Any task runner is used for automating the repetitive tasks to increase productivity and efficiency.

Some of the automated tasks include

  • Implement standards
  • Unit Testing
  • End to end testing
  • Compiling
  • Automated task execution
  • File watching

Grunt is a command line tool available on the node platform. Once you have installed node, you would need to run the following command to make grunt command line available in your project.

npm install -g grunt-cli

To run grunt commands we would also require to create a Gruntfile.js because depending on the make of the grunt tool it looks for this file. Once we have this file then we could configure tasks inline, load tasks from external sources (files and modules), etc.

It’s always easy for me when I do some hand on so that’s what we would do. Create a new file named Gruntfile.js and add the following code to it.



Now move the folder where you created the Gruntfile.js and add a new file named as package.json. We will add the package that we care about which is uglify.



Download jQuery.version.js file or any other JavaScript that you would want to minify and add to the same folder

Now run the following command in your command line tool

  1. npm install -g grunt-cli


  1. npm init – fills all details is package.json

  1. npm install grunt (for grunt dependencies.)


  1. npm install



  1. grunt



And boom we have created our first Grunt automated task to minify a JavaScript file.

You can download the source code @googledrive or @onedrive


Inset Text In Pure CSS


The first thing that we will do is define gradient background so that our inset text is clearly visible.


The next thing that we are going to do is define the style to make the text appear inset. To so that we will make use of text-shadow.

Now we will put these styles in use.

Let’s put it all together

Inset Text In CSS

Inset Text In CSS


Doesn’t it looks gorgeous? And we just used the power of CSS to make this.

3D Text In Pure CSS

To make the text look like we will make use of text-shadow. To start lets create a container in which we will place the text. This will give the gray background to the container.

Now let us style the h1 component within this container with some special font and text-shadow. This will make the text look 3D.

And now let us add some html bones to this CSS muscle.

And when we put of this together then we will see the magic.

3D Text In CSS

3D Text In CSS

First Letter Capitalization Using Pure CSS

This is useful at lot of places like articles, news, blogs, etc. to distinctly mark the start of a paragraph. Let’s add the style to do that. In the code below we have defined the font-size of the first-letter in a paragraph as 4 times (4em) the normal size and the font-weight as normal. We have defined this style for the pseudo class first-letter (For more details on pseudo class visit http://www.abhishekshukla.com/css/css3-basics-part-1/). Also we have changed the font weight of the span to be bold so that it’s distinctly visible.

Now let’s put this style in use

Let’s put everything together and then this is how it will look like.

First Letter Caps In CSS

First Letter Caps In CSS

In the above example the first letter takes the space above itself. We could make the first letter slide down by changing the style for pseudoClass first-letter.


Let’s put this style to use.

It would look something like below:


First Letter Caps In CSS

First Letter Caps In CSS


First Line Bold In Pure CSS

To achieve this we will make use of first-line pseudo class (For more details on pseudo class visit http://www.abhishekshukla.com/css/css3-basics-part-1/). We will also make the first letter as bigger and slide below just the way we had it before.


Let’s put these styles to use.

When we see this html page in the browser we would see something like below. An interesting point to note it that when we resize the browser then still the first visible line will be bold.


First Letter Bold In CSS

First Letter Bold In CSS


Rotate Text Using Pure CSS

To rotate we will make use of transform property of the elements. The below style will rotate the elements by 90 degree in the counter clockwise direction.


Let’s put the rotate style to use.

It would look something like below.


First Letter Bold In CSS

First Letter Bold In CSS


The htmls file for this post are available @skydrive and @googledrive.

Any questions, comments and feedback is welcome.