The changing bond with parents:

Young adults seek respect and expect the same from everyone, especially their parents. They strive to be more independent. Interestingly, if someone they admire, like a respected teacher, says something is true, they’ll often take it as absolute truth, even if their parents disagree. This is because they’ve learned about right and wrong from their parents and have developed a deeper understanding. However, they can become impatient when their parents try to advise or warn them.

Why do “bad manners” pop up?

Children begin using adult vocabulary beyond their years, showing a desire to dress fashionably and choose their own hairstyles. They might shove all their food onto their plate at once, neglecting table manners, eating without first washing their hands, and carelessly discarding their coats and school uniforms on the floor. They often slam doors or leave them ajar.

Such behaviours can cause even the most patient parents to feel dismayed and worried about these changes.

However, these behaviours are typical signs that children are learning to discern right from wrong as they mature. Statistically, girls tend to exhibit less rebellious behaviour than boys, although they may still display subtle shifts in attitude.

So What you can do?

Hold on to what’s important to you. When you ask kids to do things like finish their food or wash their hands, try not to sound naggy or bossy because kids don’t like that.

What’s Next in Part 3:

The magic of first friendships
The need to be liked by everyone
Becoming Strict (Taking rules more seriously)
What is Tics?

Join me as we continue our journey, understanding the wonders of preteen growth.

Note: While this article is rooted in my personal experiences, I’ve also drawn insights from the book “Baby & Child Care” by Dr. Benjamin Spock. A must-read for parents seeking a deeper understanding of child development.The changing bond with parents:

Understanding Preteens: Ages 6 to 11 (Part 2) was originally published in 2k-parenting on Medium, where people are continuing the conversation by highlighting and responding to this story.

Emerging Independence: Remember when they clung to your leg on the first day of school? Now, they’re eager to forge their own paths. Their friends’ thoughts start to matter, and they’re beginning to realize they play a role in the bigger world around them.

Curiosity Blooms: Every day seems to bring a new passion. Maybe it’s counting money, perhaps it’s understanding why cars move, or even starting to pen their own little stories. They’re figuring out where their interests lie.

Recalling Younger Days: When they were tinier, everything was about imitation. Daughters tried to walk in mommy’s shoes, while sons emulated dad’s every move. Back then, a gentle peck could lead to a fit of giggles, and those romantic scenes in movies? Instant facepalms!

Growing Up After Six: Suddenly, those movie scenes are less awkward and more intriguing. Reading, writing, and discovering the world takes precedence. They’re less about following and more about leading their own adventures.

What’s Next in Part 2:

• The changing bond with parents
• Why do “bad manners” pop up?
• The magic of first friendships
• The need to be liked by everyone
• Becoming Strict (Taking rules more seriously)
• What is Tics?

Join me as we continue our journey, understanding the wonders of preteen growth.

Note: While this article is rooted in my personal experiences, I’ve also drawn insights from the book “Baby & Child Care” by Dr. Benjamin Spock. A must-read for parents seeking a deeper understanding of child development.

Edit: Other Part Article Links
Understanding Preteens: Ages 6 to 11 (Part 2)

Understanding Preteens: Ages 6 to 11 (Part 1) was originally published in 2k-parenting on Medium, where people are continuing the conversation by highlighting and responding to this story.

Steps to launch

• Launch VS Code.
• Open the Command Palette (⇧⌘P in Mac) and type ‘shell command’ to find the Shell Command: Install ‘code’ command in PATH command.

• Restart the terminal for the new $PATH value to take effect. You'll be able to type 'code .' in any folder to start editing files in that folder.

In Windows, This command will be available by default.

How to configure my own command to launch VCode ?

In Mac: To manually add VS Code to your path

cat << EOF >> ~/.bash_profile
# Add Visual Studio Code (code)
export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
EOF

In Windows, Open the Bin folder of Visual Code installed directory for example

Location: C:\Program Files\Microsoft VS Code\bin\code.cmd

Copy this File and rename it or follow the below command

$ cp C:\Program Files\Microsoft VS Code\bin\code.cmd C:\Program Files\Microsoft VS Code\bin\vscode.cmd

Happy Coding !

Launch VCode in Command Line was originally published in HTML5 School on Medium, where people are continuing the conversation by highlighting and responding to this story.

react-native run-android // Connect with Android Device or Emulator
react-native run-ios // Connect with IOS Device or Emulator

Lets take simple example with android, the above command run the below shell script which is part of React Native where its actually validate android SDK, Environment and device if exist.

https://github.com/facebook/react-native/blob/0.54-stable/scripts/run-android-local-integration-tests.sh

Error: Emulator throws the error “Could not connect to development server” and below is the screenshot.

Solution

Basically this error tells that your current build got failed due to reasons like Code issue or dependency issue.

In order to fix this issue, solution is dead simple is below.

1. Cancel the current process of“react-native run-android” by CTRL + C or CMD + C
2. Close metro bundler window command line which opened automatically.
3. Run the command again, “react-native run-android”

Cool, Isn’t it !!

Happy Coding, Stay tuned for next error with solution !

React Native: Could not connect to development server was originally published in Error Healer on Medium, where people are continuing the conversation by highlighting and responding to this story.

As a Web Developer, Learning Browser’s internal operations and their architecture helps you to take better decisions during development also to discover the best and worst practices.

Browser Functionality

It’s operate to mainly display the web resources (HTML, XML, CSS, JS, JSON, PDF etc) you chose. In General, browser request it from the server and server response to the browser window. The Resource location is specified by the user using a URI (Uniform Resource Identifier).

W3C maintains the specification on how browser should interpret and display the web page (HTML) and this helped to solve the compatibility issues between browsers.

Browser Components

It has set of components with work flow. Lets have a look at each component in detail one by one.

User Interface

The Address Bar is one of the good example. It interface with user to insert URI and interacts with various component to render the web page.

There are plenty of user interfaces for various needs like Back and Forward Buttons, Bookmark, Reload, Stop and Home Buttons which you see below.

Interface Layer communicates to data layer for retrieving data and UI Backend to draw widgets as per HTTP Response body which is our HTML source code. Browser engine communicates between UI and the Rendering / Layout Engine.

Now in Modern Browsers has interface (Dev Tools) which helps to see the client data like Cookies, Local Storage, Session Storage, IndexDB etc.

Browser Engine

It’s a bridge between User Interface and Rendering Engine. It provides methods to initiate the loading of a URL and other actions like (reload, back and forward).

Layout / Rendering Engine

It’s able to render the content of given URL in browser screen and interprets the HTML, XML and CSS. It is single threaded. By default, It displays data according to your specified content type (MIME). For Example HTML, Images, XML, CSS, JSON, PDF etc.

Key operation of Rendering engine is HTML Parser. Each browser use various engines like Chrome and Opera uses Blink, Firefox uses Gecko, IE Edge uses EdgeHTML, Internet Explorer uses Trident, Apple Safari uses WebKit.

What is the Flow?
1. Parsing HTML document by HTML Parser convert elements to Node and create Content Tree.
2. Parsing Styles code / document by CSS Parser and create Render Tree.
3. Render Tree goes through Layout Process. Element’s Node get position coordinates.
4. Render Tree will be traversed and each node will be painted using the UI Back-end Layer.

What is Dirty bit system?
1. This will be used for small changes which doesn’t require to do full layout change.
2. It uses incremental layout asynchronously.
3. It’s two flags are dirty and children are dirty.

Few Other Stages

1. Width calculation - It’s calculated using the container width attribute / style attribute.
2. Line Breaking -During scroll, layout parent creates the extra renderers and calls layout on them.
3. Painting
   1. render tree is traversed and the renderer’s “paint()” method.
   2. Paint method call to display content on the screen.
   3. It uses UI infrastructure component.
   4. Painting Order (background color, background image, border, children, outline)

Network

1. Networking handle all aspects of Internet Communication and handles URLs to use HTTP, FTP.
2. Implements a cache of retrieve documents to minimize network traffic.

JavaScript Interpreter — Scripting Engines

1. JavaScript Interpreter executes the JS code and result to rendering engine.
2. Each browser use various scripting engines like Chrome uses V8, Firefox uses Spider Monkey, IE Edge uses Chakra (JavaScript Engine), Internet Explorer uses Chakra (JScript Engine), Safari uses Nitro (JavaScript Core)

UI Back-end

Back-end helps to draw widgets like select box, input box and check box etc.

Data Persistence

This layer is persistence and this helps browser to store data locally like Cookie, Local Storage, Session Storage, IndexedDB, WebSQL and FileSystem.

Is all Modern Browsers uses the same Engine ?

No, Each Browser Development Team developed various Rendering and Scripting Engine. Below are the Layout and Scripting engines which is used by modern browsers.

Yes, You are done and you are in the last lines of this Article but this is not end of this Story and there is few more parts soon, stay tuned !

GitHub is evident for contributors count soared for Open source Projects. Important to note that all Internet Giants like Facebook, Google and Microsoft are created their own organization and published their projects. Lets come to the point, Here we gonna discuss about GitHub Templates.

Why do we need Templates?

1. GitHub introduces templates for their web forms (Issues, Pull Request etc), which can configure inputs to be pre-filled with data which will help maintainers to set up questionnaire and help contributors to do their part bit fast.
2. It’s hard and tough to solve a problem when important details are missing in Pull Request or in Issues by the Contributors. Both are Web forms in GitHub where you can submit without description like below which cause contributions meaning less.

Let’s talk about the above Pull Request where Title and commit Message says Header Changes, It’s hard to fathom this code change by Reviewers. It may be great contribution but reviewers will become dumber and these kinds of code will give rough idea which is at high risk. It may introduce new defects because they are not very clear about the current and new behavior.

How about with description, Lets have a look!

Above one is good and descriptive which can be understand by targeted people but still cannot be understand by our Non Techies like Scrum Masters, Project Managers, Product Owners etc, that’s not our problem but our goal is to value the contributions and issue request which will reviewed and merged super fast than as-usual.

So GitHub Templates Solve this problem?

Yes. GitHub Templates helps to configure your Templates which will help to configure questionnaire. Now maintainers can add templates but make sure your template file names are having right conventions. below is example for ISSUE Template.

Its always good to categorize your request which may be Pull Request or Issue. Please follow the Things you should know section for few more templates in various use cases provided by GitHub.

Things you should know.

1. Add PULL_REQUEST_TEMPLATE.md for Pull Request Template.
2. Add Issue_TEMPLATE.md for Issue Template.
3. Add CONTRIBUTING.md for Contribution Guidelines.
4. Add CODE_OF_CONDUCT.md for Setting Coding Standard Guidelines.
5. Add LICENSE or LICENSE.txt for License.
6. You can keep it in the root directory or move all of them under directory called .github which is recently supported.
7. A file extension is optional, but Markdown files (.md) are supported.

You are done, check how it look like !

Cool, Isn’t it !!

Happy Coding, Stay tuned for next one !

< Previous Article - JS Promise (Part 1 — Basics)

I would like to continue with an examination of JavaScript Promise API. Let’s have a look at Promise evolution by various libraries. below three libraries which we are going to explore on this article.

1. Q.js Library
2. When.js Library
3. RSVP.js Library

Using q.js

The q.js is best one for promise implementation by Kris Kowal. It is more evident of promise evolution.

Lets have a look, What makes it special.

• It provides two ways to define the promise. one is very famous by Q.defer() and another one is Q.Promise().
• The Q.defer() method is custom and flexible way to define promise like defining anywhere in the code likevar deferred = Q.defer(); and any time that can be resolved, rejected and notified (deferred.resolve, deferred.reject, deferred.notify).

'use strict';

// Defined the deferred.
var deferred = Q.defer();

// Resolving with Value.
deferred.resolve(responseText);

// Reject with Error Message.
deferred.reject(new Error("Status code was 400"));

// Notify during progress of promise.
deferred.notify(event.loaded / event.total);

// Return the Promise to be then-able
return deferred.promise;

• The Q.Promise method helps to instantiate the Promise similar to native one.

// Using q.js Library.
  var promise = Q.Promise(function(resolve, reject, notify) {
    // succeed
    resolve('value');

    // or reject
    // reject('error');
 });

// Native Promise.
var myPromise = new Promise(function (resolve, reject) {
  // Call resolve() method at the end of successful execution.

  // Call reject() method for your failure case.

});

• There is third new parameter in Q.Promise() method called notify similarly third new callback in Q.then() called progressed.
• Q.any is implemented like Promise.race It will return if any one of promise is get fulfilled in array of promises.

'use strict';

Q.any(ArrayOfPromises)
.then(function (first) {
    // Any of the promises was fulfilled.
}, function (error) {
    // All of the promises were rejected.
});

• .fail(func …) is implemented like Promise.catch. Its will catch the error which is thrown inside then method.

.then(onFulfillment, onRejection, onProgress)
.fail(function (error) {
    // We get here with either foo's error or bar's error
});

• .done(func …) method will trigger at the end.

That’s end of q.js library. below is the code for Basic, Serial and Parallel Samples.

Using When.js

This library is very similar to q.js and there is not much special things to mention other than Utility methods. It’s a stand-alone components of cujoJS (cujoJS is an architectural toolkit for building modular, maintainable web applications with zero framework lock-in).

Important to make a note, its been used by SystemJS Library (Universal dynamic module loader — loads ES6 modules, AMD, CommonJS).

Now its very easy to explain the similar methods rather having code pen.

// When.js Example.
var promise = when.promise(function(resolve, reject, notify) {
    // Do some work, possibly asynchronously, and then
    // resolve or reject.

    // DEPRECATED: You can notify of progress events
    // along the way if you want/need.

    resolve(awesomeResult);
    // or resolve(anotherPromise);
    // or reject(nastyError);
});

// Then-able Method
promise
.delay(1000) // delay for 1 seconds.
.then(function() {
    throw new CustomError('oops!');
})
.catch(CustomError, function(e) {
    // Only catch CustomError instances
    // all other types of errors will propagate automatically
})
.catch(function(e) {
    // Catch other errors
})

Below is the when.js library source code defined public API. It helps to get fair idea about useful methods in when.js

// Few portion of when.js source code.

// Create a pending promise
when.promise = promise;

// Create a resolved promise
when.resolve = Promise.resolve;

// Create a rejected promise
when.reject = Promise.reject;

// lift a function to return promises
when.lift = lift;

// call a function and return a promise
when['try'] = attempt;

// alias for when.try
when.attempt = attempt;

// Join 2 or more promises
when.join = join;

// Resolve a list of promises
when.all = all;

// Settle a list of promises
when.settle = settle;

// One-winner race
when.any = lift(Promise.any);

// Multi-winner race
when.some = lift(Promise.some);

// First-to-settle race
when.race = lift(Promise.race);

// Array.map() for promises
when.map = map;

// Array.filter() for promises
when.filter = filter;

// Array.reduce() for promises
when.reduce = lift(Promise.reduce);

// Array.reduceRight() for promises
when.reduceRight = lift(Promise.reduceRight);

// Is something promise-like, aka thenable
when.isPromiseLike = isPromiseLike;

// Promise constructor
when.Promise = Promise;

// Create a {promise, resolve, reject} tuple
when.defer = defer;

If you want to go through the when.js source code. click here

Using RSVP.js

It’s a lightweight library that provides tools for organising asynchronous code and tiny implementation of Promises/A+ as ES6 compliant and compatible with Task.js (experimental library for ES6 using Generators).

Lets have a look at the difference comparing with Native Promise API.

• There is no Rejection Callback in then Method and it has only one parameter which is onFulfillment. The .catch() Method can be used to get the exceptions and rejections.

// Instantiation of RSVP Promise.
var rsvpPromise = new RSVP.Promise(function(resolve, reject) {
  // succeed
  resolve(value);
  // or reject
  reject(error);
});

// Then-able for Fulfillment and Catch is for Rejection.
rsvpPromise.then(function(value) {
  // success
}).catch(function(error) {
  // failure
});

• There is no .race method Available (but .all is available for array of promise objects).
• RSVP.hash() is for Objects properties values as Promises.
• There is .finally() Method is available to execute at End.

// Object Properties of Promise.
var promises = {
  "continent": getJSON("http:///...continent.json"),
  "asia": getJSON("http:///...asia.json"),
  "india": getJSON("http:///...india.json")
};

RSVP.hash(promises).then(function(response) {
  // posts contains an array of results for the given promises
  console.log(response.continent);
  console.log(response.asia);
  console.log(response.india);
})
.catch(function(reason) {
  // if any of the promises fails.
})
.finally(function() {
  console.log('The End !')
});

• Custom Error events are available to invoke an Error. example: RSVP.on(‘error’).
• You can listen to various events like created, chained, fulfilled, rejected like RSVP.on(‘created’, listener); that can be called for every Promise events.

// events
RSVP.on('created', listener);
RSVP.on('chained', listener);
RSVP.on('fulfilled', listener);
RSVP.on('rejected', listener);

So Quick, We are in the footer of this article. Last but not least. Have a look at HTML attribute defer for similar treatment.

HTML5 defer attribute

The defer attribute is something similar to promise for running your element after page load completes. It’s supported only for <script> element. soon we can expect for elements like img etc.

<script src="demo_defer.js" defer></script>

W3C Says, When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no “document.write” in javascript) and thus, the user agent can continue parsing and rendering.

Happy Reading, Stay tuned for my next article on jQuery and Angular Promise Implementation.

What is Promises/A and Promises/A+ ?

1. Both are specification for open standard but Javascript currently uses Promise/A+.
2. The main three reason for using Promise/A+ is Three different states, Value for Fulfilment and for Rejection and thenable object. for more detail see Differences from Promises/A
3. These Promise/A+ organisation occasionally revise and address the corner cases in to new Specification.

Difference between Promise/A and /A+?

1. Rejection / Fulfilment method returns thenable object.
2. Rejection triggers catch method, if errors thrown.

In short, running continuation-passing style. Let me shoot few bullets with simple diagram on Promises below.

1. It’s a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.
2. It’s defined as an Object used for future result of an asynchronous computations.
3. It represent a single asynchronous operation and gives a proxy until you get an actual value.
4. Allows you to add handler to asynchronous of success or failure conditional actions.
5. Return a promise instead of final value.
6. It implements observer pattern (maintains a dependents and notifies them automatically of any state changes but can cause memory leaks, known as the lapsed listener problem) and its chain-able.
7. It comes with integrated error handling and handles automatically fulfilled with value or reject with reason.

Why Promises?

1. Promises mainly to solve Callback Hell (heavy nested callback code) and Pyramid of doom Problem.
2. Promises helps to group your asynchronous in a efficient way.
3. Javascript is not a new candidate for adapting Promises/A+ Specification. its been already included by other famous programming languages like Java (sample), Scala (sample), Python (sample) and Clojure (sample).

Promise States

There are three states which are below.

1. pending: Initial Case where promise instantiated.
2. fulfilled: Success Case which means promise resolved.
3. rejected: Failure Case which means promise rejected.

Promise Methods

There are six methods which are below.

1. Promise.all([promise1, promise2, …]);
2. Promise.race([promise1, promise2, …]);
3. Promise.reject(value);
4. Promise.resolve(value);
5. Promise.catch(onRejection);
6. Promise.then(onFulFillment, onRejection);

Promise Iterable Methods

Below are the two Methods which accepts array of promises objects.

'use strict';

// All method
// Trigger `catch` Method, if any one promise rejected.
// Trigger `then` Method, once every promise fulfilled.

Promise.all([promise1, promise2]);

// Race method
// Trigger `catch` Method, if any one promise rejected.
// Trigger `then` Method, if any one promise fulfilled.

Promise.race([promise1, promise2]);

What is executor function ?

1. Executor Functions are Parameter for Promise Constructor which holds Resolve and Reject Callbacks.
2. It is executed immediately by the Promise implementation which provides the resolve and reject functions.
3. It’s Triggered before the Promise constructor even returns the created object.
4. The Resolve and Reject functions are bound to the promise to fulfill or reject.
5. It’s expected to initiate some asynchronous work and then, once that completes, call either the resolve or reject.

What is the value of Promise.length?

It will be always one (1) due to number of constructor arguments.

Are You Tired with above Theories?

No Worries. Lets see quick and interesting questions with solutions from simple to advanced level !

How to create / instantiate the Promise?

Below is the Code Snippet for Simple Promise Instantiation.

'use strict';

// ES5
var myPromise = new Promise(function (resolve, reject) {
    // Your Code which you are unsure about execution time duration.

    // Call resolve() method at the end of successful execution.

    // Call reject() method for your failure case.

    // Catch method will be called automatically, if any error occurs.
});

// ES6, Example with Arrow Functions

var myPromise = new Promise((resolve, reject) => { ... })

How Promise methods can be overridden ?

Below are the two methods can be prototyped (overridden).
1. Promise.prototype.catch();
2. Promise.prototype.then();

How to do error handling in Promise ?

There are two possible ways to handle errors in Promise. Defining then method with second parameter which is onRejection callback or defining catch method.

'use strict';

// First Approach

yourPromise.catch(function (error) {
 // Your Error Callback
});

// Second Approach

yourPromise.then(undefined, function (error) {
 // Your Error Callback
});

How to detect whether Promise rejected ?

Promise triggers .catch or onRejection callback of .then method depends upon the precedence of definition.

'use strict';

Promise.catch(onRejected);
Promise.then(onFulfilled, onRejected);

How to combine multiple Promises in to one ?

Use `Promise.all` Method which combines multiple promise in to one.

'use strict';

// Usage

Promise.all([Promise1, Promise2, …]).then(onFulfilled, onRejected);

// Example

var promiseCall = function (waitSecond, returnData) {
    return function (resolve, reject) {
        setTimeout(resolve, waitSecond, returnData);
    };
};

var p1 = new Promise(promiseCall(1000, "one"));
var p2 = new Promise(promiseCall(2000, "two"));
var p3 = new Promise(promiseCall(3000, "three"));
var p4 = new Promise(promiseCall(4000, "four"));
var p5 = new Promise(function (resolve, reject) {
    reject('5th Promise Rejected');
});

// Calling Promise 1 - 4 in Promise.all()
Promise.all([p1, p2, p3, p4]).then(function (value) {
    console.log(value);
}, function (reason) {
    // Not Called
    console.log(reason);
});

// Expected Output: ["one", "two", "three", "four"]

// Calling Promise 1 - 5 in Promise.all()
Promise.all([p1, p2, p3, p4, p5]).then(function (value) {
    // Not Called
    console.log(value);
}, function (reason) {
    console.log(reason);
});

// Trigger Rejection (Second) Callback if any one is rejected.
// Expected Output: 5th Promise Rejected

What is Promise Racing ?

As everyone aware, Racing is competition of speed. Same thing applies to Promise API. Use `Promise.race` Method which can help to evaluate which is fast

'use strict';

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  // Both resolve, but p2 is faster
});

What Promise.all() return for invalid parameter ?

Promise.all method accept array of objects which is promises in nature. Let’s see How promise.all behaves for various invalid parameters.

Why not Promise.race() with invalid parameter ?

Promise.race method also similar to all method accept array of objects. Let’s see How promise.race behaves for various invalid parameters.

What’s the main difference between callback-based functions and promise-based functions ?

1. You don’t have to write error conditions `if (err) return callback(err)`.
2. Callback need to be invoked the right callback immediately whereas Promise can be return as promise object and invoke later.
3. In Promise, Anytime, When `.then()` method returned a promise and can be “unpacked” it to get to an actual value.
4. In Callback, We must explicitly handle the error and we can’t deal with that error there.
5. In Callback, We must call the passed callback to pass that error.

In short, Promise is better than callback for future asynchronous operation.

How many ways to resolve the Promise ?

There are two ways, with and without instantiation.

var responseValue = ‘Success’;

// First Approach
var directPromiseValue = Promise.resolve(responseValue);

// Second Approach
var instantiatePromise = new Promise(function (resolve) {
 resolve(value);
});

How to resolve with hard-coded value to Promise?

Sometimes, you will have a value already in place and you want to convert that into a true Promise. Promise.resolve() Call should be right choice.

var directPromiseValue = Promise.resolve('Success');

How to reject with hard-coded value to Promise?

Same here for error. Use Promise.reject() Call.

var directPromiseValue = Promise.reject('Custom Error Object');

Yes, You are done and you are in the last lines of this Article but this is not end of Promise Story and there is few more parts soon, stay tuned !

Wait is over, Have a look at next Article, Part 2 — Q.js, When.js and RSVP.js

Node.js is a wonderful runtime environment of the decade. When come to managing different versions of Node in same machine for different application will make your life horrible.

Don’t worry, That’s not the end of the story. This article helps on how to overcome and solve this problem with right tools. In short `nvm` and `apn` or `n` and `apn` node module is my proposal to solve this issue.

Installing Node Version Manager

Node Version Manager alias NVM is Node Module which helps to maintain multiple node versions in a same machine to manage various versions.

$ npm install -g nvm

or

$ npm install -g n

`nvm` and `n` Node Module does not support windows. use below module.

$ npm install -g nvm-windows

Setting Run Time Configuration

The Run Time Configuration alias .nvmrc file which helps to read the version by `avn` Module and you will see below, what is `avn` module about.

$ vi .nvmrc
v4.4.7

Installing Automatic Node Version Switching

Automatic Node Version alias AVN is Node Module which helps to switch different version.

AVN provide `avn-nvm` and `avn-n` Module for NVM and N Module compatible from reading your NVM Runtime configuration file (.nvmrc).

$ npm install -g avn avn-nvm avn-n

AVN Updates Bash Profile

AVN Module updates below code in `~/.bash_profile` after its got installed, open this file and make sure its updated and copy this line `~/.profile`.

$ vi ~/.profile

[[ -s "$HOME/.avn/bin/avn.sh" ]] && source "$HOME/.avn/bin/avn.sh" # load avn

Setting Automatic Node Version

After move to your project directory and create `.nvmrc` file with node version. Set up AVN by using below command. This will update the `~/.avn` File.

$ cd <project_directory>
$ avn setup

Evaluate Bash Profile

Execute the `~/.profile` only once or do it if there any change. File to make AVN commands to be available globally to invoke the command during `cd <directory>`

$ source ~/.profile

You are done!

Yes, you are completed the steps to switch automatically from one version to another and manage different version node projects in same machine.

When we talk about Storage, Database will strike our mind.

Oops, if its Browser Specific then one and only Cookies will flash our eyes who preserve data in browser. This Article wakes up the one who wanted to learn more about Storage API (Local and Session Storage).

Why we need to Store data in browser ?

The Good User interface is preserve user data without redundancy which means requesting for the same user data repeatedly from the user is not a good practice.

Simple Example: Typical Search Page have keyword input, after user didn’t get proper result. Search result page should have entered keyword data to continue the search.

Basically centralize the data and make it available for all the pages on particular domain.

What wrong in Cookies to have Storage API?

There is nothing wrong in Cookies. Storage API introduced for different purpose, where cookies can be read by server-side, local storage can only be read by client-side.

Storage API

Storage API is an Interface provide access to localStorage and sessionStorage. API introduced mainly to handle multiple transactions in different windows where cookies does it for single transactions.

Below is the Storage API Interface.

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString? getItem(DOMString key);
  setter void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

What is lifetime of Storage?
There is no option to set expiration time. removeItem and clear Methods are available for removing the attributes.

session storage data gets cleared when the page session ends.

// In Local Storage
localStorage.setItem('name', 'value');
localStorage.clear();

// In Session Storage
sessionStorage.setItem('name', 'value');
sessionStorage.removeItem('name');

Is Local Storage / Session Storage support prototyping?
No, It is not supported. Both are Instance which is implemented from Storage API. so Storage API supports prototyping. Have a look at the below code snippet.

How to do exist check for localStorage / sessionStorage items?
There is no native method to do exist check for localStorage/SessionStorage, where getItem return only null for non-exist items.

What is difference between local and session storage?
localStorage data has no expiration set but sessionStorage gets cleared when the page closed (session ends).

How to check the number of items in local / session storage?
Only way is length property which is available in both objects. Take a look at below snippet.

// In Local Storage
localStorage.setItem('name', 'value');
localStorage.length;

// In Session Storage
sessionStorage.setItem('name', 'value');
sessionStorage.length;

How to listen for changes?
Methods available to listen for changes during storage method calls() like removeItem() and setItem(). There is one limitation is only listen to other tabs item changes.

[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
  readonly attribute DOMString? key;
  readonly attribute DOMString? oldValue;
  readonly attribute DOMString? newValue;
  readonly attribute DOMString url;
  readonly attribute Storage? storageArea;
};

dictionary StorageEventInit : EventInit {
  DOMString? key;
  DOMString? oldValue;
  DOMString? newValue;
  DOMString url;
  Storage? storageArea;
};

What is the disk space limit?
Disk space is browser specific.
Mobile Browser: (Chrome: 10MB, Android: 2MB, Firefox: 10MB, IOS Safari: 5MB)
Desktop Browser: (Chrome: 10MB, Opera: 10MB, Firefox: 10MB, Safari: 5MB, IE: 10MB)

How to see existing Storage items in Run Time ?
There is no native method to see all but combination of existing property length and methods of key and getItem. Take a look at the below code snippet.

How to check Storage Support in browser?
There is many ways to check. Have a look at the below code snippet.

(typeof(Storage) !== "undefined");
(typeof(localStorage) !== "undefined");
(typeof(sessionStorage) !== "undefined");

(typeof(window.Storage) !== "undefined");
(typeof(window.localStorage) !== "undefined");
(typeof(window.sessionStorage) !== "undefined");

Disadvantages of Storage / LocalStorage ?
1. It stores on hard drive.
2. localStorage is synchronous in nature, meaning when it loads it can block the main document from rendering.
3. localStorage is persistent. Not using a service or never visit a web site again, the data is still loaded when its browser started every time.
Source: https://hacks.mozilla.org/2012/03/there-is-no-simple-solution-for-local-storage/

Happy Reading, Have a look at the below Articles where I have taken Reference:

https://www.w3.org/TR/webstorage/#the-storageevent-interface
https://developer.mozilla.org/en-US/docs/Web/API/Storage
https://www.sitepoint.com/html5-local-storage-revisited/
https://html.spec.whatwg.org/multipage/webstorage.html
http://html5demos.com/storage-events

Interesting Question which you wanted to aware and answer:
stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values
stackoverflow.com/questions/3220660/local-storage-vs-cookies