Git : fast version control

What is Git ?

Git is a distributed version control system originally developed to manage Linux source codes.
Git is designed to help coordinate large, distributed group projects
Git provides a modern toolset
Fast command line utilities
Highly interactive graphical tools web viewers
Dedicated hosting sites (github, gitorious…)

Introduction to Version Control

Version control (or revision control, or source control) is all about managing multiple versions of documents, programs, web sites, etc.

Why You Should be Using Version Control:

The code programmers write changes often. Bugs need to be fixed, features need to be added, and content needs to be changed. Most code is stored as plain old text files, and the code is changed by editing these files. If you make a change to a file, save it, compile it, and find out that something went wrong, it’s often helpful to be able to go back to the old version or to get a report of what was actually changed, in order to focus on what may have gone wrong.
That’s where Version Control Systems come in.

How Git stores data?

Git store its data like a set of snapshots of a miniature file system as opposed to other systems, which store information as a list of file-based changes.

image

image

Git uses a distributed model

image

Basic Workflow of Git

Possible init or clone of repository
Edit files
Stage the changes
Review your changes
Commit the changes

A Local Git project has three areas

Modified

Staged

Committed

image

File Status Lifecycle

image

Remote repositories and local repositories

There are two types of Git repositories namely a Remote repository and a Local repository.

  1. Remote repository:  Repository that resides on a remote server that is shared among multiple team members.
  2. Local repository:  Repository that resides on a local machine of an individual user.You can use all of Git’s version control features on your local repository such as reverting changes, tracking changes, etc. However, when it comes to sharing your changes or pulling changes from your team members, that is where a remote repository comes in handy.

image

Creating a repository

There are two ways to create a local repository on your local machine.
You can either create a brand new repository from scratch or by cloning an existing remote repository onto your local machine.

or

git init

The git init command creates a new Git repository. This creates a new sub directory named .git that contains all of your necessary repository files – a Git repository skeleton. At this point, nothing in your project is tracked yet.

Cloning an Existing Repository

If you want to get a copy of an existing Git repository – for example, a project you’d like to contribute to – the command you need is git clone
Every version of every file for the history of the project is pulled down by default when you run git clone
You clone a repository with git clone [url] [dir](optional). For example, if you want to clone the Git linkable library called libgit2, you can do so like this:

git clone https://github.com/libgit2/libgit2 mylibgit

That creates a directory named “mylibgit”, initializes a .git directory inside it, pulls down all the data for that repository, and checks out a working copy of the latest version

git config

This command can define everything from user info to preferences to the behavior of a repository.
Several common configuration options are listed below:

Set the name and email for Git to use when you commit:

git config --global user.name “array151”
git config --global user.email array151@gmail.com

You can call git config –list to verify these are set.

These will be set globally for all Git projects you work with.
You can also set variables on a project-only basis by not using the
–global flag

Add and Commit

If you want to start version-controlling existing files, you should probably begin tracking those files and do an initial commit. You can accomplish that with a few git add commands that specify the files you want to track, followed by a git commit:

git add *.c
git add LICENSE
git commit -m 'initial project version'

The git add command adds a change in the working directory to the staging area. It tells Git that you want to include updates to a particular file in the next commit. However, git add doesn’t really affect the repository in any significant way—changes are not actually recorded until you run git commit.

 The “commit” operation enables you to record changes that were made to a file or directory in the Git history.

Undoing Changes

git checkout

The git checkout command serves three distinct functions: checking out files, checking out commits, and checking out branches.

git checkout <commit> <file>

Check out a previous version of a file. This turns the <file> that resides in the working directory into an exact copy of the one from <commit> and adds it to the staging area.

git checkout <commit>

Update all files in the working directory to match the specified commit. You can use either a commit hash or a tag as the <commit> argument.

git checkout master

Return to the master branch.

git revert

The git revert command undoes a committed snapshot. But, instead of removing the commit from the project history, it figures out how to undo the changes introduced by the commit and appends a new commit with the resulting content.

git revert <commit>

Generate a new commit that undoes all of the changes introduced in <commit>, then apply it to the current branch.

Reverting vs. Resetting

It’s important to understand that git revert undoes a single commit—it does not “revert” back to the previous state of a project by removing all subsequent commits. In Git, this is actually called a reset, not a revert.

git reset

If git revert is a “safe” way to undo changes, you can think of git reset as the dangerous method. When you undo with git reset, there is no way to retrieve the original copy—it is a permanent undo. Care must be taken, as it’s one of the only Git commands that has the potential to lose your work.

git reset <file>

Remove the specified file from the staging area, but leave the working directory unchanged. This unstages a file without overwriting any changes.

git reset <commit>

Move the current branch tip backward to <commit>, reset the staging area to match, but leave the working directory alone. All changes made since <commit> will reside in the working directory, which lets you re-commit the project history using cleaner, more atomic snapshots.

git reset

Reset the staging area to match the most recent commit.

git clean

The git clean command removes untracked files from your working directory. This is really more of a convenience command, since it’s trivial to see which files are untracked with git status and remove them manually. Like an ordinary rm command, git clean is not undoable, so make sure you really want to delete the untracked files before you run it.

git clean -n

Perform a “dry run” of git clean. This will show you which files are going to be removed without actually doing it.

git clean -f

Remove untracked files from the current directory.

git clean -f <path>

Remove untracked files, but limit the operation to the specified path.

git clean -df

Remove untracked files & untracked directories from current directory.

Syncing

git remote

The git remote command lets you create, view, and delete connections to other repositories.

git remote

List the remote connections you have to other repositories.

git remote add <name> <url>

Create a new connection to a remote repository. After adding a remote, you’ll be able to use <name> as a convenient shortcut for <url> in other Git commands.

git remote rm <name>

Remove the connection to the remote repository called <name>

 

HTML5 – Interview Questions and Answers

Preparing for an interview for a web developer or MEAN stack developer? Along with the JavaScript and other client-side and server-side technologies, developers are asked about HTML5 basic topics too. So, here are some important topics and questions that are frequently asked in an interview and the concepts that a developer must know about HTML5.

1) Once an application is offline, it remains cached until the following happens?

  a) The manifest file is modified.

  b) The application cache gets automatically cleared by the browser.

  c) The application cache is pro-grammatically updated.

  d) The user clears their browser’s data storage for the site.

Answer – A C and D

Explanation

HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface.

Using the cache interface gives your application three advantages:

Offline browsing – users can navigate your full site when they’re offline

Speed – resources come straight from disk, no trip to the network.

Resilience – if your site goes down for “maintenance” (as in, someone accidentally breaks everything), your users will get the offline experience
The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they’re offline.

The cache manifest file

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access.

Referencing a manifest file
To enable the application cache for an app, include the manifest attribute on the document’s html tag:

<html manifest=”example.appcache”>

</html>

The manifest attribute should be included on every page of your web application that you want cached. The browser does not cache a page if it does not contain the manifest attribute (unless it is explicitly listed in the manifest file itself. This means that any page the user navigates to that includes a manifest will be implicitly added to the application cache. Thus, there’s no need to list every page in your manifest. If a page points to a manifest, there’s no way to prevent this page being cached.

Note: “/page-url/”, “/page-url/?something”, “/page-url/?something-else” are considered separate pages.

You can see the urls that are controlled by the application cache by visiting chrome://appcache-internals/ in Chrome.

A manifest file must be served with the mime-type text/cache-manifest

This requirement was dropped from the specification some time ago, and no longer required by the latest versions of Chrome, Safari and Firefox, but you’ll need the mime-type to work in older browsers and IE11.

Structure of a manifest file

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

There are a couple of things to note:

The CACHE MANIFEST string is the first line and is required.
Files can be from another domain
Some browsers place restrictions on the amount of storage quota available to your app. In Chrome for example, AppCache uses a shared pool of TEMPORARY storage that other offline APIs can share. If you are writing an app for the Chrome Web Store, using the unlimitedStorage removes that restriction.
If the manifest itself returns a 404 or 410, the cache is deleted.
If the manifest or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.

https://www.html5rocks.com/en/tutorials/appcache/beginner/

2) What is the internal format of input type=”date” in HTML5?

  a) DD-MM-YYYY

  b) YYYY-MM-DD

  c) MM-DD-YYYY

  d) YYYY-DD-MM

Answer – B

3) Which of the following method can be used to estimates the page load times?

  a) Using _gap.push([“_trackPageLoadTime”]) with Google Analytics.

  b) Page load times cannot be estimated.

  c) Using the Navigation Timing JavaScript API.

  d) Using built-in JavaScript methods.

Answer –  A, C and D

https://www.html5rocks.com/en/tutorials/webperformance/basics/

4) Assuming that some text needs to be written on an HTML5 canvas, select a replacement for the commented line below:

<canvas id="e" width="200" height="200"> </canvas>
<script>
  var canvas = document.getElementById("e");
   // insert code here
  context.fillStyle = "blue";
    context.font = "bold 16px Arial";
  context.fillText("Zibri",100,100);
</script>

  a) var context = canvas.getContext();

  b) var context = canvas.getContext(“2D”);

  c) var context = canvas.getElementById(“context”);

  d) var context = canvas.getElementById(“2D”);

Answer – B

5) Which of the following is a possible way to get the fullscreen video played from the browser using HTML5?

  a) <object> <param name=”allowFullScreen” value=”true” />

  b) <video allowFullScreen=”true”>

  c) <video height=”100%” width=”100%”>

  d) None of these.

Answer – C

6) The following are valid use cases of client file/directory access in HTML5, except?

  a) Drag and drop files from the desktop.

  b) Full file system access.

  c) Use of the HTML5 File API.

  d) Use of files as HTML5 input types.

 

7) When does the ondragleave mouse event get fired in HTML5?

  a) It gets fired when an element has been dragged to a valid drop target.

  b) It gets fired when an element leaves a valid drop target.

  c) It gets fired at the end of a drag operation.

  d) It gets fired while an element is being dragged.

Answer – B

8) Given following HTML and CSS, what will be the height of parent element having “wrap” class?

<style>
  .wrap{ box-sizing: border-box; }
  .col{ height:100px; margin:20px;}
</style>

<div class="wrap">
  <div class="col"> </div>
  <div class="col"> </div>
</div>

  a) 260px

  b) 140px

  c) 220px

  d) 280px

Answer – C

9) Which CSS2 selector, selects all Button elements that have a space separated list of values for attr where one of those values is equal to the given value?

  a) button[attr~=value]

  b) button[attr^=value]

  c) button[attr|=value]

  d) button[attr=value]

 

10) Which of the following CSS rule would make all h3 tags that are immediately preceded by a section tag italic?

  a) section~h3 {font-style: italic;}

  b) section>h3 {font-style: italic;}

  c) section+h3 {font-style: italic;}

  d) section h3 {font-style: italic;}

Answer – B

11) What is the use of data list in HTML5?

  a) Enables a tag contain additional data(meta data).

  b) Provides autocomplete feature in a textbox.

  c) Provides SEO friendly markup for page context.

  d) The alternate markup for building accessible lists.

Answer – B

12)  Generally, quirks mode could be turned on when there is:

  a) NO or Incorrect DOCTYPE declaration.

  b) Spaces or illegal chars before DOCTYPE

  c) Invalid HTML – with respect to the chosen DOCTYPE

  d) All of the above

Answer – A and C

Explanation

Quirks mode also known as Compatibility Mode – means your page is running without a document type declared(this is old school, so this is most likely not needed anymore) The whole
point of quirks mode is that it’s a compatibility mode for IE5

Modern browsers generally try to render HTML content according to the W3C recommendations. However, to provide compatibility with older web pages, and to provide additional “intuitive” functionality, all browsers support an alternative “quirks mode”.

Quirks mode is not, however, a standard. The rendering of any page in quirks mode in different browsers may be different. Whenever possible, it is better to adhere to the W3C standards and try and avoid depending on any past or present browser quirks.

Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML – with respect to the chosen DOCTYPE – can also cause the browser to switch to quirks mode.

https://stackoverflow.com/questions/1695787/what-is-quirks-mode

13) Which CSS rule would make the fourth list item underlined if the list had a fourth item?

  a) ul li:nth(4th) { text-decoration:underline; }

  b) ul li:nth-child(4) { text-decoration: underline; }

  c) ul li:4th-child { text-decoration: underline; }

  d) ul li:nth-of-type(4) { text-decoration: underline;}

Answer – B

14) Which property specifies whether the mask should scroll or stay fixed the page is scrolled?

  a) mask-clip

  b) mask-repeat

  c) mask-attachment

  d) mask-image

Explanation

https://www.html5rocks.com/en/tutorials/masking/adobe/

15) The property defines whether or not an ellipsis should be displayed when content overflows a region?

  a) text-overflow

  b) overflow-style

  c) content-overflow

  d) overflow

Answer – D

Explanation

 

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (…), or display a custom string.

Both of the following properties are required for text-overflow:

white-space: nowrap;
overflow: hidden;

div {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

16) Which rule is used to define the properties that will be animated in an animation rule?

  a) @transition

  b) @key

  c) @keyframes

  d) @animation

Answer – C

 

Explanation

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

17) What is the attribute used in the <video> element, that is set to the URL of an image that the browser will use in place of the video before it is loaded and playing?

  a) placeholder

  b) poster

  c) banner

  d) preload

Answer –  B

 

Explanation

<video width=”320″ height=”240″ poster=”/images/w3html5.gif” controls>
<source src=”movie.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>

 

Further Readings

http://array151.com/blog/javascript-interview-questions/

http://array151.com/blog/nodejs-interview-questions/

http://array151.com/blog/angularjs-interview-questions/

Nodejs Interview Questions

Important Interview Questions for Node.js

1) What is Nodejs ?

2) What is NPM ?

3) Different types of API’s exist in Node (api methods)?

4) What is event looping ?

5) What is event emmiter in node.js ?

6) What is asynchronous calls in Node.js ?

7) Suppose we have 5 apis, we have to hit fifth api when all four have been completed.How can we do it ?

8) What are promises ?

9) What is promise all in node.js ?

10) What is clustering in node js?

11) Core features in node.js ?

12) Can I send body params in GET request ? if yes then how ?

13)  What are middle-wares in node.js ?

14) What is the use of next in node.js ?

15) Different types of exit polls in node.js ?

16) Explain Process in node.js ? 

17) Why node is single threaded ?

18) New features in node.js ?

19) What are create, read streams ?

20) Inheritance in node.js ?

21) How can I secure my cookies in node.js ?

22) What is the passport in node.js ?

23) Best way to manage the session in node.js ?

24) What do you mean by child processes in node.js ?

25) What is the cross-domain problem ?

26) If I want to solve the cross-domain problem for only specific type of APIs , how can I do it ?

27) How can we integrate Third party APIs in node.js ?

28) Explain callback in node.js ?

29) What is callback-hell in node.js? how can I solve this?

30) How can we install local and global dependencies in node.js ?

31) What are streams in node.js ?  

32) Explain package.json file in node.js ?

33) What is the meaning of tilde and caret in package.json

34) How can we control versioning about packages in node.js ?

35) Difference between dependencies and dev dependencies ?

36) What is npm start ?

37) If I want to explain my own command with npm how can I do it ?

38) Explain logging in node.js ?

39) Name node.js framworks ?

40) What is express

41) How can we add the prefix in node.js apis?

42) Use of cookie-parser in node.js?

43) How to make APIs session less ?

Further Reading

Javascript Interview Questions

AngularJS Interview Questions

NPM : Node Package Manager

NPM is a node package manager for the JavaScript programming language.It is the world’s largest software registry. It consistes of a command line client also called NPM and also the default package manager for the javascript runtime environment Node.js. It also have online database of public packages called the NPM registry that hosts thousands of free packages to download and use. Moreover it consists of a command line client that interacts with a remote registry (packages in the registry are in CommonJS format and include a metadata file in JSON format).

Functionalities of NPM (Node Package Manager)

1) Command line utility to install Node.js packages
2) Provide dependency management and version management of Node.js packaged
3) provide online repositories for Node.js packages

Reference:

https://docs.npmjs.com/getting-started/what-is-npm

The NPM program is installed on your computer when you install Node.js. To install node.js refer: 

http://array151.com/blog/nodejs-tutorial-and-set-up/

we can check it is installed or not by

$ which npm
$ npm --version
4.2.0

With Node Package Manager we can install packages in local and global mode. To install packages in local mode we need following command

npm install packagename

In local mode it installs the packages in node_modules folder in parent working directory.This location is owned by the current user.

To install packages in global mode

sudo npm install forever -g

This means you would have to use sudo to install packages globally, which could cause permission errors when resolving third-party dependencies, as well as being a security concern. Global packages are installed in {prefix}/lib/node_modules/ which is owned by root (where {prefix} is usually /usr/ or /usr/local)

To check the npm configuration we need

$ npm config list
; cli configs
user-agent = "npm/3.10.10 node/v6.10.3 linux x64"
; userconfig /home/sitepoint/.npmrc
prefix = "/home/sitepoint/.node_modules_global"
; node bin location = /usr/bin/nodejs
; cwd = /home/sitepoint
; HOME = /home/sitepoint
; "npm config ls -l" to show all defaults

This gives us information about our install. we can also get our current global location by

$ npm config get prefix
/usr/local

This is the prefix, we can also change the value of prefix also by using this command 
For this let first create a new folder in our home directory to save it

$ cd ~ && mkdir .global_node_modules
$ npm config set prefix=$HOME/.global_node_modules

To uninstall the packages we can use

npm uninstall packagename

To fetch the list of installed packages we can use

npm list

There are lot of commands for more info refer:

https://docs.npmjs.com/cli/access

 

 

Node.js tutorial with basic Setup and Installation

What is Node.js 

Node.js is an open source cross-platform for developing server-side and networking applications. It provides runtime environment and uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. Moreover applications are written in JavaScript and can be run within the Node.js runtime on OS X, Microsoft Windows, Linux moreover its package ecosystem, npm is the largest ecosystem of open source libraries in the world.

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Historically, JavaScript was used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a web page’s HTML to be run client-side by a JavaScript engine in the user’s web browser. It enables JavaScript to be used for server-side scripting and runs scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser.

 

Previously javascript code is in working on the client side(front end) only. But with the power of node.js, we can now play with it on the server side (backend) also to generate the dynamic content. Node.js is actually based on the event loop programming model. It repeatedly waits for events and then runs any event handlers subscribed to those events and the event loop runs in a single thread.

Events can be:

1) A new HTTP request coming our way
2) Timer wait is complete
3) Next chunk of data is ready to be written to the file

Due to this process, multiple requests are handled concurrently by a single Node.js process. As long as these event handlers are small and wait for yet more events themselves everything works out nicely and no Javascript code is ever executed in parallel, all of this runs in a single thread.

Why node is single threaded?

Node.Js was built with the intention of supporting asynchronous operations and the fact is that the asynchronous operations have better performance and scalability when they are single-threaded over multi-threaded. This is the reason the Node.Js is single threaded.

Features of Node.js

1) Server Side java Script
2) Versatile
3) High Reliability
4) Asynchronous
5) Single Threaded
6) Run Anywhere
7) No Buffering
8) Easy Integration with JS Stacks
9) Speedy Execution

Top websites powered by Node.js

1) https://www.paypal.com
2) https://www.groupon.com
3) https://www.wsj.com
4) https://www.shutterstock.com
5) https://www.opencare.com

For more info visit: https://codebrahma.com/top-10-sites-powered-by-node-js/ 

Installation

For Linux follow the guide.

For Windows download the installer.

To check if nodejs is installed successfully, Open command prompt and type

node -v

What is NPM 

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client also called npm, and an online database of public packages called the npm registry.

Reference:

https://docs.npmjs.com/getting-started/what-is-npm

Set up node.js application

Before create a node.js application we need to install express framework using npm command. ( Express is a lightweight and easy to use Node.js framework that helps to create and manage our apllication into MVC architecture.Express provides a robust set of features to develop mobile and web applications)

Reference:

https://expressjs.com/

To install express run 

npm install express -g

The above command will install express globally on your machine. then type

npm install express-generator -g

It will install the express generator globally on your machine. After that to create the skeleton of node app just type 

express projectName

This will create the node.js skelton with name projectName, where project name is the name of your app skeleton. After that just go in the app structure and install the app dependencies by 

cd projectName
npm install

It will create the node modules folder where it install all the dependencies, after that just type npm start command to start the server and check it works or not. To check its proper working after run the start command just open any browser and type localhost:3000 to check the server is listening or not (3000 is the default port uses by it).

npm start

Now open any browser and hit localhost:3000

Forever : Never let you down

Forever is a node package used to run Node.js applications with monitoring. It keeps the server alive even when the server crash/stops. When the Node server is stopped due to some error or exception it will automatically start the server. It runs like a daemon on ubuntu Linux. So if the application dies forever brings it back. It will automatically start the server (Node.js application) when our linux server starts and ensure it stays running.

 Forever Setup

Forever can be installed using npm command. To install it globally

sudo npm -g install forever

The usage options for Forever expose four simple command line tasks: start, stop, stopall, list.

forever [start | stop | stopall | list] [options] script [script options]

Forever Options:

start    : Start script as a daemon
stop     : Stop the daemon script
stopall : Stop all running forever script
list      : List all running forever script

Now start server using forever command instead of node.

forever start server.js

To check server has started or not?

forever list
 [0] server.js [ 24597, 24596 ]

To kill that process we need simply

forever stop 0

More about its options read documentation available on Github and Npm website.

en_USEnglish
en_USEnglish