Tools

npm – a quick walk

Featured1 Comment

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.

Node

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.

Package

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

Manager

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

 

packages.json

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.

npm_cmd

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

Enter command npm init –yes

npm_cmd_2

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!

 

The best Visual Studio shortcuts

samuellawrentz1 Comment

It is found that you could be more efficient and appear smarter if you use shortcut keys rather than doing things with the mouse. Sometimes I used to wonder how the system administrators are very fast in setting up things, restarting a crashed network, etc.

They do all with their precious keystrokes combined with Shift, Ctrl, and Alt,  Is’nt it? And who wouldn’t like shortcuts after all?

For those people who use Visual Studio to write code, behold I present you few of my favorite and best shortcuts that can be used while writing and managing code.

  • Collapse/Expand selection Ctrl+M+H/Ctrl+M+U
    Sometimes you would want to hide the annoying code that is blocking your view or distracting you, use this then.
  • Comment/Uncomment block of code Ctrl+K+C/Ctrl+K+U
    //bored of adding ‘// ‘on every line??
    //You can bulk comment and uncomment by using this shortcut.
  • Navigate Forward/Backward Ctrl+–/Ctrl+Shift+–
    Forgot the previous location of your cursor? Don’t worry. This is the hotkey for the back and forward buttons
  • Full Screen without losing the panels Alt+Shift+Enter
    Searching for the menubar and the panels while on Full Screen? This is here to rescue
  • Simple search Ctrl+I
    A simple search box is opened you can start typing after pressing this hotkey and press again to go to next result
  • The TAB key for “snippets”
    Best of the shortcuts. Bored of writing if-conditions and making sure that they are surrounded by braces?
    Type if and then press the tab key twice. Baam! the if-condition is completed for you. VS offers many snippets like try-catch, for, class, foreach etc
  • Surround with snippets CTRL+K+S
    Want a piece of code within an if-condition or a for-loop. Don’t  worry, select the code and press these keys. Select any snippet from the context menu shown and consider it done.
  • Find Matching braces Ctrl+]
    A conversation with the Open brace “{“
    Me: Hey you!! Where is your pair??
    Open Brace: I dunno 😔
    Me: Okay let me find it!
    After a while
    Got you!! You cant hide from me, You dumb closing brace!
    -To find the matching brace of a function/class use this shortcut.
    -To select the code between the braces, add shift key to the combination.
  • Ctrl+C+V to duplicate the current line
    This is a well-known legend yet in the form of a simple shortcut key.
  • Create/Remove a bookmark Ctrl+K+K
    Bookmarks, they are cousins to the breakpoints. They are not hit by the debugger but can still help you remember where a bug that you discovered yesterday is present.
    -Open BookMark window -Ctrl+K+W
    -Go to the next bookmark -Ctrl+K, Ctrl+N
  • Cycle through the list of clipboard contents Ctrl+Shift+V 
    This is also a well-known shortcut. Tired of copy-scroll-paste, copy-scroll-paste? You can replace it with copy-copy-scroll-paste-paste by using this shortcut
  • Collapse all functions Ctrl+M+O
    Too large code base? Minimize the code and find it easy to navigate through the code.
  • Format Selection Ctrl+K+F
    When the code is shabby and does not have proper spacing and indents, use this shortcut and see the Magic.

There are yet many more amazing shortcuts but these are my favorite, hope these are helpful in your programming career. You can take the shortcut keys to a whole new level using Auto Hot Keys, read it here.

Happy Coding 🙂