npm – a quick walk

Aa a part of learning angular, I would suggest everyone to learn and understand basic concept of npm

May be by finding answers for few of questions listed below

  • What is npm?
  • What is the role of npm?
  • How to use it?
  • Why we are going to use it?

So, what is npm?

npm – node package manager

Let’s split the sentence and understand the meaning present in the abbreviation.


Here node.js is mentioned as node. Node.js is a server-side JavaScript environment. It uses an asynchronous event-driven model and is designed for writing scalable internet applications, notably web servers.


Modules of code grouped up into a component which can be used in various project or application.


Managing the dependencies with various operation like install, uninstall, update and so on.

Now, we can frame our own definition for npm from above split up explanation. So using npm, we can manage (install, uninstall, organize) the node.js packages in our project.

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js.

npm has CLI terminal and website to search for packages.

What is the role of npm?

npm does N number of roles in various projects. I’m just mentioning the various which we are going to use in our upcoming posts in the end user developer point of view

  • install packages
  • uninstall packages
  • version maintenance of packages across team
  • maintaining the dependencies

How to use it?

Simple, install Node.js

npm is distributed with Node.js- which means that when we download and install Node.js, we automatically get npm installed on our computer.

Using following command in terminal, we can check whether our tool set get installed successfully,

// to check node.js version
node -v

// to check npm version
npm -v



What is this packages.json? this is the one important thing we should get familiar of we are going for npm.

  • packages.json file is like registry of packages in our project.
  • it lists the packages that our project depends on.
  • allows us to specify the versions of a package that our project can use using semantic versioning rules.

How to create packages.json file?

Open terminal with your target folder location.

Type npm init and Enter, now you’ll be caught up with few questions. After you have answered most of the question, your file will get created.

name and version fields are mandatory fields.


If you are afraid of questions, we have another quick options.

Enter command npm init –yes


Using –yes argument option, the npm will create packages.json file with default values.

Install a package

npm install (in package directory, no arguments) – Install the dependencies in the local node_modules folder.

In global mode (ie, with -g or --global appended to the command), it installs the current package context (ie, the current working directory) as a global package.

You can find detailed details of npm install options in this link

A package can be downloaded with the command:

npm install <package_name>

The --save and --save-dev install flags

The easier (and more awesome) way to add dependencies to your package.json is to do so from the command line, flagging the npm install command with either --save or --save-dev, depending on how you’d like to use that dependency.

To add an entry to your package.json‘s dependencies:

npm install <package_name> --save

To add an entry to your package.json‘s devDependencies:

npm install <package_name> --save-dev


That’s it. Few lines has been copied from official documentation. :p

Lets conclude, using npm we can mange number of packages in our projects easily.

Happy Coding!


Few quick steps to learn core parts of angular 2+

Actually, there is no quick steps to learn any tools or technology unless we are interested or committed to goal of our learning curve.

I just added this title as a temporary one, nothing came up in my mind suddenly. so simply added.

I’m just going list down the various steps/core parts that should be covered in the learning curve of angular 2+

And the steps are,

Step 1
Learn how to install Node.js & npm, whats the purpose of it, and how to use it

Step 2
What is TypeScript? – classes, interfaces, objects

Step 3
Angular CLI – Understanding project structure/architecture, entry point of application

Step 4
Bootstraping, ngmodules, Angular dependency injection

Step 5
Data binding, Observables & Promises, Pipes, and event handling in application

Step 6
Navigation & Routing,

Step 7
Testing – Karma, Jasmine

Step 8
How to deploy your apps in server


I think these are some core parts that needs to learned for building a basic angular application. If you think something could be add up in this, please mention those in comment section.

I’m planning to write each steps in detail in upcoming posts. And the question arrives in my mind or probably some people mind in my network,

  • So this is another how to angular posts?
  • So same story, different post?
  • Before you complete these post, the next version will get release
  • Are people going to read these?

And the answer I tell to myself,

I write to practice my skills, experiment my knowledge, and so on. It makes me happy. So, lets do this.

Happy blogging!


P.S. I shall add posts on each steps mentioned above and link those topics to this posts.

TypeScript – Quick view – Pt. 1

What is TypeScript?

  • TypeScript is a syntactic sugar for JavaScript.
  • TypeScript syntax is a superset of ES5 & ES6 syntax.
  • Every valid JavaScript code is also a TypeScript code.
The TypeScript compiler emits JavaScript. The TypeScript compiler performs only file-local transformations on TypeScript programs and does not re-order variables declared in TypeScript. This leads to JavaScript output that closely matches the TypeScript input.
TypeScript does not transform variable names, making tractable the direct debugging of emitted JavaScript. TypeScript optionally provides source maps, enabling source-level debugging. TypeScript tools typically emit JavaScript upon file save, preserving the test, edit, refresh cycle commonly used in JavaScript development.
It can improve your productivity by enabling rich tooling experience. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. 

Why TypeScript?

JavaScript is standardized through the ECMAScript standards. TypeScript supports most of the latest ECMAScript features (the various posts under ECMAScript can be found here). Some of the interesting features of latest ECMAScript like modules, lambda functions, classes, the spread operator, destructuring, template literals are supported in TypeScript.

TypeScript makes JavaScript more and reliable by having following features

  • Optional static typing
  • Supports the latest JavaScript features
  • Supports classes, interfaces, generics
  • More productive than JavaScript

Optional static typing

JavaScript is dynamic type, it does not know type of variable until we initialize it. Typescript provides types support to code. Using static typing we can define the data type of the variable.

var x : string = "Make a smile";

Here we have declared a variable of type string. The popular data types available in TypeScript are Boolean, Number, String, Array, Tuple, Enum, Any, and etc.

We have mentioned TypeScript is optional static typing.

What does it mean?

It means, we don’t have to mention the exact type of variable always. If we don’t wish to mention the type of variable, we can user any type to declare the variables. Once we are initializing the any type variable, it will decide the type of variable based on the values.


var y: any = “Clear Screen”;

Supports the latest JavaScript features

Most features of ECMAScript has been supported by TypeScript.

The latest features of ECMAScript like

are supported in TypeScript as well. We can discuss about those topics in upcoming blog posts.

More productive than JavaScript

If the developer is already familiar with any of the Object Oriented Programming, it will be easy for them to adopt to TypeScript. The syntax are similar to Object Oriented language like C#.

As C# developer, in my personal experience I felt learning and understanding the syntax of TypeScript is easy.

IDEs can help you throwing error right away when you are coding itself. So you can focus more on coding and less time at debugging. Enhanced IDEs provides greater support to this language which provides significant productivity compared working with JavaScript.


This is just an introductory post, we can discuss more topics under TypeScript in upcoming posts. Please share your thoughts in comments section and follow this site for more updates.


Happy Coding!

2018 Books Reading Wish list

I’m currently preparing the list of books which needs to read in 2018.

This is just an initial draft, the post will be updated based on books availability and interests soon.

  • The Innovators: How a Group of Hackers, Geniuses and Geeks Created the Digital Revolution – Walter Isaacson

  • The Shallows: What the Internet is Doing to Our Brains – Nicholas Carr
  • The Phoenix Project: A Novel About IT, DevOps, and Helping Your Business Win – Gene Kim, Kevin Behr, George Spafford

  • Inside Cyber Warfare: Mapping the Cyber Underworld – Jeffrey Carr
  • Computer Science Distilled: Learn the Art of Solving Computational Problems – Wladston Ferreira Filho
  • The 7 Habits of Highly Effective People – Stephen Covey
  • The End of Jobs: Money, Meaning and Freedom Without the 9-to-5 – Taylor Pearson
  • Grit: The power of passion and perseverance – Angela Duckworth

  • The 4-Hour Workweek – Timothy Ferriss
  • What If?: Serious Scientific Answers to Absurd Hypothetical Questions – Randall Munroe

  • Stay Hungry Stay Foolish – Rashmi Bansal
  • The $100 Startup: Reinvent the Way You Make a Living, Do What You Love, and Create a New Future – Chris Guillebeau

  • Rich Dad, Poor Dad – Robert T. Kiyosaki

This is not a checklist or reading challenge list, it’s just a wishlist. Tamizh books details will be added once discussed with my friends 🙂

Please add your favorite books or suggestion list in the comments section.


Happy Reading!



The Art of Planning

“Don’t think about the start of the race, think about the ending” – Usain Bolt

One common question, I’m receiving from most of my friends is

How you are managing your time to do these many things?

Actually, they meant how I’m being active in learning new tools, reading books, making progress in blogging, posting random pieces of stuff at social media and all.

I took this question seriously and planned to answer them all via this blog post.

Planning is the ultimate key to unlock these activities.


Why planning?

A couple of years back I too had the same set of questions on how to create an action plan and how to efficiently work on it.

I have started reading some books, watching some YouTube videos, and listening to other people stories on how they are managing time on personal life as well towards their passion.

I have written all good ideas I have collected from the various medium in a notepad.

Later, I have clearly picked up the items which suit me.

On most time management & goal settings stories, I have found one common habit or ground rule.



How I have prepared my action plan?

Then, I have come up with an idea to create an action plan. I have started listing all things I wished or dreamed to complete in next few weeks or months or years.

Once I have listed all the items I wish to do. It looks like a large list, kind of watching a horror movie at midnight.

Instead of making progress in all the items at the same time, I have come up with idea of

  • prioritizing
  • categorizing

I have started to prioritize the list based on Career growth and Personal growth from most to least important. (Kind of bubble sort, decided which bubbles I need to burst first)

After prioritizing, Its time for categorizing.

In my case, I have decided to Categorize my action plan based on what time frame I have to achieve it.

So, the categories will look like this

  • Long-term
  • Short term
  • Daily
  • Today

The long-term goal is something I planned to achieve in few years. Short term goal is the items I wish to cover in minimum one year. Daily goals are like checklist I should follow on daily basis. Today board is to plan for the day ahead.

Ultimately, my planning board looks like following


I shall create a separate post on how I plan for the day ahead.

I used to keep this list on my desktop screen always using sticky notes options on my windows laptop.

Basically, I’m a sticky note lover. And below is my monitor screen filled with sticky notes 🙂



Next big step

We have planned everything, whats the next big step?


Yes! A very organized plan will help you to make consistent progress to reach your goal.


Hope you have like this post, please follow this blog to receive more updates.

And also Please comment your thoughts or share your ideas on planning in the comment section.


Happy planning!



A techie newbie?

Wow! Welcome to the tech field where you have lots of computers, servers, rolling chairs, ACs, etc. It may be a very hard task to transition from college to a job -a software developer. In spite the myths about this job, claiming to be the most paid job, most stressful job, most hair-fall job, most whatever job, it has its own pros and cons. Yet many of the myths are true, the hair-thing for example 🙂 Just kidding!

When you first step into this field, everything seems a little off and people keep on speaking, attending meetings, tapping the keyboard, etc and you don’t understand what they speak or why 😦 For two months you will be left alone, I mean you would struggle to make friends and acquaintances. People would stare at you as if you are from Kepler-1229b (an exoplanet) but as days go by, you begin to get along with the people around you. (i.e) You start to code.

When this process begins, you discover new languages, frameworks, and most importantly you will realize that StackOverflow is the greatest treasure you can have. And every time you try to stay cool, some bug would rise up from the code you wrote yesterday and dance before the QA Team. Your bad 😦

Even I’m new to this field. I have consolidated few tips that would make you feel better as a fresher in this job -the most paid job 🙂 Again kidding!!
This post is a bit lengthy, if you want a quick read, just skim through the bold letters.

Mistakes are OK:
Yup! You heard it. No one is perfect. A famous proverb says “Rome was not built in a day”. Perfection comes with practice and experience and they come with mistakes. When you commit a mistake, learn from it and try hard not to repeat it again. One of my favorite quotes -“I never fail, I learn”. Learn from the mistakes of your seniors as well.

Ask questions:
Being new to this field, everything will seem strange and weird. Open your mouth and ask questions if you are not clear about anything. People in the software field are kind. They will surely help you. Do not hesitate to ask a question that has knocked your throat. Just open your mouth and let it out.

Get Help from seniors:
Don’t feel shy to speak with them, they are also fellow human beings with an experience level greater than you. They would always be ready to help you out. Think them as your StackOverflow but do not disturb them often. This might lead them to avoid you, move to another cabin, find another job, etc. Who knows!! Just don’t disturb them with silly questions like “What is 1&&-1 ?”, “Visual Studio is not working, can you help me?”, you could Google it instead 🙂

I heard people in college say, “All this studying stuff, examinations, semesters will get over within the college, Once into a job, we are free, no exams, no learning, nothing”. My friend, this is not true and you know it. You have to keep on learning as the world moves fast, so does the technological advancement. Frameworks, languages they all mutate every day, make sure that you read a lot and keep your technology stack up-to-date.

Improve writing skills:
Don’t write stories in the comment/work-log. Be straight to the point you wanted to say. Did some changes to the code?? Commit message – “updated bug that was not fixed today”. This type of writing doesn’t help you. In this field, you will have to write a lot of comments, reply to emails, skype with people. Poor writing skills do not help.

Be precise/short and firm in words:
Speak right to the point and use the correct words. Once I was asked by my team lead at the beginning of my career -“What is AJAX ?” I had no idea what it was back then. I knew “A” was for asynchronous so I started with Asynchronous… JQuery… He said “Don’t bluff” 🙂 All I wanted to make clear is that, if you don’t know something –Don’t bluff 🙂

Be wise while you code:
Read about OOPS and try to implement them and make the code modular. Use efficient algorithms and do a thorough analysis before you get your hands dirty on the code. Understand why and how the code works and then begin your task.

Keep your passion along with you:
Not everyone has the same passion -coding. Each and everyone may have different hobbies and passion. Do not leave them untamed. Follow your passion. Coding is your profession, passion may be something else. When you feel bored or stressed, ignite your passion and feel the stress relieved.

And finally, Smile always 🙂
“Face is the index of mind”, radiate joy and confidence to the people whom you meet and talk with. A simple smile can brighten your day.

This is a field where you can develop your logical thinking, programming skills, ability to solve problems, communication skills, comprehending skills, etc. Make use of it. It may be hard in the beginning but as you get involved you will be drawn towards it and stress will stay away from you. For more posts on life skills, visit

Happy coding!!

Emmet in VS Code

VS Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

VS Code is one of my favorite code editor. I love the various features like embedded Git Control, Code completion, snippets, code refactoring etc.

I’m a full stack web developer (I used to call myself with that name), I have been using the vs code from its earlier release. I use to follow the release notes of VS Code on every release.

I always used to share the details of VS Code new features with friends, colleagues and all. Some of the features I have excited about was integrated terminal, Side by Side editing, Command palette, Markdown preview and list goes on.

Today, in this post I would like to share one of the interesting feature of VS Code which is involved with Code completion.

It’s Emmet!

So the next big question is,

What is Emmet?

Wiki says,

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.


To be short, it helps to code completion, add snippets, etc.

And next big question is, even some text editor also doing this fair job nowadays. Why Emmet?

Yes, nowadays all the editors comes up with code completion or syntax suggestion intellisense.

However, Emmet got some cool features like syntax abbreviation, improves HTML, CSS workflow. Using Emmet we can quickly write a bunch of code, wrap code wit new tags.

Your favorite may be Atom, Sublime, Brackets or something else. Emmet supports most of your favorite editors.

Check this link on how to integrate Emmet with your editor.

It’s a plugin, you can install or integrate with your code editors.


Emmet in VS Code

The one good news is that we don’t have to download & install the Emmet in VS Code.

Emmet is built in with VS Code, no extension in required. OK, that’s the base story; now let’s start with how to use the features.


How to expand Emmet abbreviations?

Emmet abbreviation and snippets are enabled by default for html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

Mostly, Tab key is used to complete the code abbreviation. We have to type the syntax and click tab key to expand the abbreviations.

We expand the single html tag or even expand the hierarchy of html tag at the same time by clicking tab key.



An important change is that the Tab key is no longer the default way to expand Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

We can quickly view the Emmet abbreviation by clicking the info icon next to list shown. By typing text next to hash (#) will be taken as id and text next to period(.) will be considered as class name. Emmet basically works related to CSS selectors.


And also we can create multiple list of same syntax with unique id as well.



We can generate lorem ipsum text with default number of words or certain number of text by mentioning the word count.



Let’s see some CSS abbreviation example as well



To experience more html & css short code check this out link

The complete cheat sheet for html and css.

Try out and let me know your thoughts on the comment section.

Happy Coding! 🙂