Saturday, April…

Saturday, April 14th, 2012

Its 2:24am in the morning and I thought to share some experience about my feelings at a job with all you folks. ‘CONTENT’, a word used in a very ‘inspiring’ way, by someone I adore, to boost me up. It means you are happy, and while you may not think things are perfect, you can be happy despite that. Am sitting in my cubicle in my workplace.

I live with room partners. One of them is DBA and other is Software Tester working in the same company, which I work for. One of them is television(Sas Bahu) fan, and the other is afraid of future at age of 21. They are my good friends. Most of the Indian software ‘PROFESSIONALS’ are like this.

I have a manager who thinks, that employees are known by hard-work, not by ‘SMART-WORK’. My IT architect adores smart work, but he’s always busy. I can understand his hectic schedule. My room partner works for the same team, which I work for.

I am kind of person who loves his work. If I have something to do, I don’t care who I work for, my aim aims to love it, and make the best out of it. I love having ‘FUN’. Let me tell you not a person with very high IQ.

Recently, I met few guys from who started up a new company in Bangalore. They had a small workplace, with around 20 people(guess), compared to my medium sized office with around 150 employees and, my office is air-cooled. People, out there were inspiring, full of ideas, living their own lives. There was a feeling of ‘FREEDOM’ in them. India got free on August 15, 1947. My office has its own dress code, timing restrictions, project deadlines, access cards, rules, and regulations.

I don’t know if you noticed the words I have highlighted. ‘CONTENT’,  ‘PROFESSIONALS’, ‘SMART-WORK’, ‘FUN’, ‘FREEDOM’. These are the words, which can describe, any software engineers or any other professional.

Confused? Don’t scratch your brains too much, listen to this.

High-Hopes(Pink Floyd)

Advertisements

JS code snippets- Preloading images using JavaScript

There are cases when you want your JavaScript to save all the images in browser cache so as to avoid loading them required. Let’s say you have a select box where you select something and the corresponding image changes somehow. You can use the following code snippet to store and cache all images returned from an array in your browser cache

function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        }
        list.push(img);
        img.src = array[i];
    }
}

Creating API documentation from source code comments in JavaScript, C#, PHP & JAVA

From past 5 years I have been working with lot of technical teams struggling to version APIs and create API documentation as per spec change. After boom of version control tools like Github & SVN teams are able to track source code but updating API specs for every minor change is still something that developers forget or don’t really care to update on time. It doesn’t matter much if nobody else is consuming their APIs but if APIs are exposed as REST- developer/app should know at same time that something was changed in API.

Teams are still able to track major API version releases but minor spec change in APIs are untracked most of the time, sometimes cause of communication gap and sometimes cause of improper documentation, leading to frustration within teams and products. As developers, how do we version our APIs without giving this responsibility to one more person who has to coordinate with each and every developer of team trying to figure out what was updated and manually updating documentation at end of the day?

Recently, I came across a tool that made my life as a product developer plain sailing. Now the developer who is working on server side API needs to add comments in his code in proper format and anyone from team will be able to generate API document out of it. Whenever server team works on any functionality they update comments in their own code giving it a minor release number if required and team will be able to generate documentation if they have access to latest updated server code without knowing server code language on my local. Take below example for instance


/**
 * @api {POST} /route/api/ Login
 * @apiName Login
 * @apiGroup Authentication
 *

 * @apiParam {Username} Username
 * @apiParam {Password} Password
 *
 * @apiParamExample {json} Request-Example:
*{
* "Username": "test",
* "Password": "Test123",
*}
 * @apiSuccessExample Success-Response:
 *{
 * "Code": 1,
 * "Message": "Signed in Successfully",
 *}
 *
 * @apiError User Id/Password Is Incorrect.
 *
 * @apiErrorExample Error-Response:
 *{
 * "Code": 1,
 * "Message": "User Id password is incorrect",
 *}
 */

/**
 * @api {POST} /route/api/ Signup
 * @apiName Signup
 * @apiGroup Authentication
 *

 * @apiParam {Username} Username
 * @apiParam {Password} Password
 * @apiParam {Email} Email
 * @apiParam {FirstName} FirstName
 * @apiParam {LastName} LastName
 *
 * @apiParamExample {json} Request-Example:
*{
* "Username": "test",
* "Password": "Password",
* "Email": "Email",
* "FirstName": "FirstName",
* "LastName": "test",
*}
 * @apiSuccessExample Success-Response:
 *{
 * "Code": 1,
 * "Message": "Signed up Successfully",
 *}
 *
 * @apiError User Id/Password Is Incorrect.
 *
 * @apiErrorExample Error-Response:
 *{
 * "Code": 1,
 * "Message": "Please check details again",
 *}
 */

The above code in your own JavaScript/C#/PHP will generate an API documentation for you with an awesome left menu and standard parallax style API documentation.

Install apidoc using npm

npm install apidoc -g

Create apidoctemplate directory in root of your project

apidoc -i js/ -o apidoc/ -t mytemplate/

Create apidoc.json

vi apidoc.json

Configure your apidoc.json

{
"name": "My REST API documentation",
"version": "0.1.0",
"description": "My REST API documentation",
"title": "Detailed REST API documentation",
"url" : "https://yourdomain.com"
}

Run apidoc

apidoc

You can find your documentation here.


/doc/index.html

Now each time your server-side developer friend updates any spec ask him to edit the comment in code and your updated REST API documentation is ready.

Advanced Javascript: Introduction To Server Side Javascript Using Meteor

Server Side Javascript has come long way, and after launch of Node.js in July 2011 gained lot of popularity as idea of using same language on client and server bought in code and software architecture uniformity in software applications. Even though Brendan Neich‘s Netscape already had vision to use same programming language on client and server but at that time people were using Pentium I/II processors which were not powerful enough to support Javascript Interpreters. In case you don’t know Brendan Neich he’s creator of Javascript and co-founder of Mozilla. In present generation of more than 2 billion smartphones you can get Phone with 1.2 GHz processor for less than $40. Seeing boom in processing speed of devices software developers started integrating Javascript interpreters like SpiderMonkey & Rhino in their applications. Some started using Jaxter server that embeds entire Mozilla Firefox Browser Engine in web server giving access to Ajax and Javascript within application.

Now when we have brief history of Javascript let me explain how to setup Meteor and create a simple server side Javascript application.

Go to this link and install Meteor.

Once you are done with setup go to command like and create a directory named bluefish if you would like to follow remaining series of tutorial.

Nikhils-MacBook-Pro:bluefish nikhil$ meteor create bluefish
Created a new Meteor app in 'bluefish'.
Nikhils-MacBook-Pro:bluefish nikhil$ cd bluefish/
Nikhils-MacBook-Pro:bluefish nikhil$ meteor
Started proxy.
Started MongoDB.
Started your app.  
App running at: http://localhost:3000/

Screen Shot 2015-10-24 at 4.10.07 pm Screen Shot 2015-10-24 at 4.16.08 pm

Now navigate to http://localhost:3000/ and if everything if fine you will see following webpage-
Screen Shot 2015-10-24 at 5.07.16 pm

Now you can use your favourite code editor to change HTML and CSS and see if changes are getting reflected in your application without refreshing browser. If you can see updated HTML in your browser, congrats you deployed your first Javacsript Server Side Application. It’s called hot code push.

Now lets dig in a little and make our first bluefish list.

Edit your HTML and change it to

<head>
  <title>bluefish!</title>
</head>
 
<body>
  <div class="container">
    <header>
      <h1>bluefish!</h1>
    </header>
 
    <ul>
      {{#each fishes}}
        {{> fish}}
      {{/each}}
    </ul>
  </div>
</body>
 
<template name="fish">
  <li><img src={{imageurl}} height="80" width="100"/>{{text}}</li>

</template>

Change your Javascript to

if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    fishes: [
      { text: "pygmy angelfish",imageurl:"http://www.seascapestudio.net/reference/fishes/centropyge_argi.jpg" },
      { text: "blue dot grouper",imageurl:"http://www.richard-seaman.com/Underwater/Egypt/Highlights/PeacockGrouper.jpg" },
      { text: "blue line grouper",imageurl:"http://www.aquariumdomain.com/images/fish_marine/grouper_blueline2.jpg" },
      {text:  "teira batfish",imageurl:"http://www.aquariumdomain.com/images/fish_marine/tieraBatfish8.jpg"},
      {text:  "convict blenny",imageurl:"http://www.roslyndakin.com/wp-content/uploads/2011/01/convictadult.jpg"}
    ]
  });
}

You can write your custom styling in CSS file.

Screen Shot 2015-10-24 at 5.02.14 pm

For further information, visit https://www.meteor.com/tutorials/ or wait for next chapter of tutorial. Happy coding!

Image credits-

http://www.seascapestudio.net/
http://www.richard-seaman.com/
http://www.aquariumdomain.com/
http://www.aquariumdomain.com/
http://www.roslyndakin.com/

References-
https://developer.mozilla.org/ja/docs/Web/JavaScript/Server-Side_JavaScript
https://www.meteor.com/