Learn programming by doing things

Hello guys,
I have recently joined a programming learning platform which helps in becoming Zero to hero in web development. So today I would like to introduce you about FreeCodeCamp. FreeCodeCamp is beginner's guide to learn web development. They emphasis on learning by doing and building stuff. Presently, they are focused on web development (Front end and Back end) using JavaScript at primary language but they are planning to diverse in other areas soon.

How a beginner should start?
They have developed an awesome curriculum which any beginner can follow along. The awesome thing about FCC is it designed to learn independently with own pace but at the same time, it has an online engaging community to help anyone who is stuck. As we know the harder thing about programming is there are tons of resources available online and it is very easy to get distracted. The good part is anyone who has a strong desire to learn can learn web development. They have also added a bunch of other resources like computer science fundamentals and open source etc.

Who developed FreeCodeCamp and why?
FreeCodeCamp is an open source project and is currently supported by hundreds of developers across the globe. Quincy Larson is the person behind FreeCodeCamp and he created it as he himself find it very difficult to learn to program independently. He wants to create FCC as an exhaustive and arranged learning material for programming. Currently, FCC is not funded by any organization and they want to remain independent. But at the same time, they are structuring some ways like merchandising and job board to get the server cost of websites.

GIT: An Introduction to most popular version control system

Many of us have heard about GIT and as a developer, most of you have even used it. Today I will just recap briefly about GIT as a version control system. We will also look in the popular function and commands available in GIT.

Version Control System:

It is a technology which helps you to maintain your codebase efficiently and provide a mechanism to work in a group or organization in most efficient manner.

Popular Types of version control:

    a)     Centralized Version Control System

    b)    Distributed Version Control System

Benefits of using GIT

    a)     Faster commands

    b)    Stability

    c)     Isolated Environments

    d)    Efficient Merging

Basic Concepts about GIT

Every Git repository has 4 components

    a)     The working directory

    b)    The staging Area

    c)     Committed history

    d)    Development branches

The Working Directory:  

This is the directory where you edit files and compile your code. It is just like a normal folder but you can use all sort of git commands on it.

The Staging Area:

It is an intermediate stage/area where you keep your files which need to be added as a changeset. Git allows you to keep a version of your files in different changesets. When a user is creating a changeset he/she could select files which need to be added in changeset by adding them in staging area.

The Committed History:

Once you have added your files in the staging area, you are ready to commit them in the project history. This history is safe and will not be altered without user’s permissions.

The Development Branches:

Using above 3 concepts of Git, a user will be able to create a linear workflow for his/her codebase. So he/she will be adding different changesets on top of one another. With Git we can also create different branches and maintain changesets parallel to the main development. This provides a lot of freedom to developers and teams to work together on a single project.

GIT installation

GIT is available for all popular platforms (Linux, Mac & Windows). It could be easily downloaded from its website (https://git-scm.com/book/en/v2/Getting-Started-Installing-Git )

GIT Configuration

Once you have installed git you need to configure it. This configuration adds your identification for the changesets which will create in any repository. Follow these commands

git config –global user.name “your name”    git config –global user.email “your email id”      

you can also create your aliases for git commands very easily.

git config –global alias.st status         git config –global alias.ci commit          git config –global alias.co checkout
git config –global alias.br branch

Help Command: 

 git help config

Initializing Repositories:  In the following command path is optional and if not mentioned it will consider the current directory as a path.

git init <path> 

Cloning Repositories:  In the following code you need to mention the repository address. The address could be of type FTP or HTTP/ HTTPS  or File address.

git clone <repository address>

Recording changes

Once you have initialized git repository you are ready to make you first commit. As we have already discussed git stores history is set of changesets and we create these changesets using commit command.

After you have added certain files to your git folder you need to stage them. Files could be individually staged by this command 

git add <file name>

If you need to add all files at once

git add –all

To delete files from the staging area.

git rm –cached <file>

Inspecting the Staging area

git status

Generating Diffs

If you need detailed information about the changes in working directory

git diff

Once files have been added to staging area you can see changes by the following command

git diff –cached

Following displays repository history or snapshots committed so far

git  loggit log –oneline  (for short & concise history)

Committing Changes

Once you have added your files in the staging area, they are ready to be committed.

git commit –m “ your message”

For visualizing repository history we can use the following command

gitk

Tagging Commits

Tags are like pointers to commit and they help in bookmarking useful revisions in the repository.

git tag –a <yourTag> –m “Stable release”

Displaying all tags

git tag

Undoing Changes

As you know the point maintaining software history is to get peace of mind. So accidently the code breaks we should be able to revert the last changes.

Undo changes in Working Directory

If you need to go back to the last commit and revert all the changes you added after last commit use following command.

git reset –hard HEADgit clean –f

Individual Files:

We can undo individual file changes by this command.

git checkout HEAD <file>

Undoing changes in staging area

Following command undo the changes for the individual file from the staging area. Note that it will not change the content of the file instead of that, it will only remove it from staging area.

git reset HEAD <file>

Undoing Commit

You can undo your last commit by the following command. Your content will not be changed instead, they will be left as it is in working directory.

git reset HEAD~1

Reverting

We can undo last commit changes in another method also. We can add a new commit which actually undo the last commit file changes.

git revert <commit-id>

Amending

Instead of completely removing the last commit we can also amend the most recent commit by staging files as usual and then running following command.

git commit --amend

we will be looking branching and other advanced concepts in another post. Stay connected. 

HTML5- what is new in it

It is the latest version of HTML which is used to create rich content based websites. This new version has provided these list of features.

   1.     Semantics: Developers can describe the content more accurately with the help of new tags in HTML5. Example <header></header><section></section>

   2.     Connectivity: Browser can connect to host in new and innovative ways.

a)     Web Sockets- Helps in maintaining a persistent connection.

b)    Server-sent Events- Server could push events to clients which are opposite to classical paradigm.

c)     WebRTC- Allows real-time communication within the browser without the need of additional plugins.

   3.     Offline and Storage:

a)     Application cache

b)    Online and Offline events- helps in deducting the network events.

c)     IndexedDB- Storing structured data in the browser for fast retrieval.

d)    Using Files from Web Application- Now your application can easily access your local system files.

   4.     Multimedia:

a)     HTML5 Audio & Video: Supports audio and video without any need of plugins.

b)    WebRTC: Support real-time communication.

c)     Camera API: Allow storing, manipulating image from computer’s camera.

   5.     3D Graphics and Effects:

a)     Canvas: Helps in creating complex objects on the web.

b)    WebGL

c)     SVG: XML based format of vectorial images which can be directly embedded in HTML.

   6.     Performance & Integration

a)     Web Workers: Allows delegation of heavy processing or time-consuming work to background threads.

b)    XMLHttpRequest:  Allow fetching asynchronously some parts of the page. This is the technology behind Ajax.

c)     Drag & Drop: Allows dragging and dropping an object on the website.

d)    Focus management

e)     Web-based protocol handlers

f)      RequestAnimationFrame

g)     FullScreen API

h)    Pointer Lock API

i)       Online and Offline events

References

   1.     MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

Productivity TOOLS for Client Side Development

YeoMan

It is an open source client-side development stack, consisting of tool and framework which are intended to scaffold an application quickly and at the same time remain productive. It is like a starter projects (termed as Generator) for client side and are available in different technologies and could be easily downloaded from GITHUB. It is maintained by developers community with BSD licence.

JSHint

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in. JSHint is open source and will always stay this way.

It is being used at large Companies like Mozilla, Facebook etc.

Karma

Karma is a direct product of the AngularJS team from struggling to test their own framework features with existing tools. As a result of this, they made Karma and rightly suggest it as their preferred test runner within the AngularJS documentation.

In addition to playing nicely with Angular, it also provides flexibility for you to tailor Karma to your workflow. This includes the option to test your code on various browsers and devices such as phones, tablets, and even a PS3 like the YouTube team.

Karma also provides you options to replace Jasmine with other testing frameworks such as Mocha and QUnit or integrate with various continuous integration services like Jenkins, TravisCI, or CircleCI.

Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code that plays very well with Karma. Similar to Karma, it’s also the recommended testing framework within the AngularJS documentation. Jasmine is also dependency free and doesn’t require a DOM.

The cool thing about jasmine is their documentation which is quite elaborative.

References

   1.     http://yeoman.io/

   2.     http://jshint.com/

   3.     https://scotch.io/tutorials/testing-angularjs-with-jasmine-and-karma-part-1

   4.     http://yeoman.io/codelab/run-unit-tests.html

   5.     Setting up karma in VS https://taco.visualstudio.com/en-us/docs/unit-test-03-basic-testing/

CSS Preprocessor

Sass (Syntactically Awesome Style Sheets)

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

The main reason for this is the addition of features that CSS painfully lacks (like variables).

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes.

1.     SCSS: The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

2.    SASS: The second, the older syntax is known as the indented syntax (or just “Sass”).  It’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

example.sass

$color: red

=my-border($color)

  border: 1px solid $color

body

  background: $color

  +my-border(green)

example.scss

$color: red;

@mixin my-border($color) {

  border: 1px solid $color;

}

body {

  background: $color;

  @include my-border(green);

}

Less

Less is also a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendible.

Its syntax differs from Sass and it is completely javascript based pre-processor whereas Sass has been developed in Ruby.

Compass

In short, Compass is a Sass extension and, like LESS Element of LESS, it has a bunch of ready-to-use CSS3 Mixins, except it has also added several other stuff that makes it a more powerful companion tool to Sass.

References

   1.      Introduction to SASS:  http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass

   2.      Comparison between SASS & LESS: http://www.hongkiat.com/blog/sass-vs-less/

   3.      Introduction of Compass & Getting started: http://www.hongkiat.com/blog/saas-compass/

   4.      SASS official Website: http://sass-lang.com/guide

   5.      Less official Website: http://lesscss.org/

   6.      Comparison between SASS & LESS:  https://css-tricks.com/sass-vs-less/

HTTP Protocol: Brief summary

Introduction

A protocol is a way of communication adhered to some guidelines which are used by 2 parties to interact with each other. HTTP Protocol is used on web browsers (Chrome, Internet Explorer etc.), Mobile Apps running on Android or IOs and many more devices. For example, when we try to visit Wikipedia articles or purchase books on Amazon.in, it is the HTTP protocol which tells the browser how to retrieve information from servers.

Importance of HTTP Protocol

If you are a developer or programmer then having a solid understanding of HTTP principals could help you develop a better application or web services. Knowing terminology about HTTP could even help you to take full advantage of it. Further, it will also help you to build more robust and secure application.

   1.     Resource Locator

URL

https://www.google.co.in/search?q=amazon&oq=amazon&sourceid=chrome&ie=UTF-8 is a URL (Uniform Resource Locator) and we have seen such kind of syntax in the address bar of the browser. A URL is like an address for different services available on the internet. Whenever we are searching anything on google or visiting any website browser is using HTTP protocol.

 Various component of URL

1.     URL Scheme- the part before :// is termed as URL scheme. We also have other schemes like HTTPS, FTP etc.

2.     Host- google.com is a host as it is serving the content of the page. Actually, all websites are translated to an IP address via the Domain Name System (DNS) so a browser knows from where it should get the content.

3.     URL path - /search?q=amazon&oq=amazon&sourceid=chrome&ie=UTF-8 is termed as URL path. It is the part of URL which is after host name. Example an image URL is this https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg. Typically web pages have CSS, JavaScript, images and videos which all have specific URL paths.

4.     Port- Almost all websites run on 80 port which is also a default port to listen for HTTP requests.  Example https://www.google.co.in:80 will redirect to https://www.google.co.in and both translate to the same address.

5.     Query String- Everything after ? is termed as a query string. A query string is a key value pair and helps a client to send data to the server.  Example /search?q=amazon&oq=amazon&sourceid=chrome&ie=UTF-8

6.     Fragment- It is the part which comes after #. This part is usually not used/processed by the server instead it help the clients to identify specific content on the web page. Example https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam#Early_life_and_education . If you visit the page it will automatically take to the Abdul Kalam’s Early Life and education.

Things to remember

URL is defined as:

<scheme>://<host>:<port>/<path>?<query>#<fragment>

URL Encoding

There are certain guidelines or formatting which we need to follow while constructing a URL. In URLs, there are some characters which are considered as unsafe and need to be encoded in particular format such as space ,^ etc. So space is generally encoded to %20 (where 20 is hexadecimal value for the US-ASCII space character).

Resources and Media Types

As we are aware there are different types of resources available on the web and in order to display them a web browser should be able to identify those resources correctly. An example of different resources Microsoft Word documents, PDFs, Images, Videos etc.

Whenever host sends a response, it also adds the appropriate Content-Type of the resource in order to help browser identify the type of resource. Content-Type in HTTP basically relies on Multipurpose Internet Mail Extensions (MIME) Standards. Example of Content-Type “text/html”, “image/jpeg” etc.

Content Type Negotiation

In most of the cases, our resources could have multiple formats or languages. That is the perfect place where we use Content-Type for asking for particular representations like format/language. It is up to the server which will take Content-Type in consideration while fulfilling the request. Examples application/json, application/xml etc.

      HTTP Messages

When a web browser sends a set of information in order to Host in order to display the web page on the screen which is termed as an HTTP Request Message.

The Host sends information in context to request received by it which is termed as HTTP Response Message.

Currently, most browsers and servers use HTTP 1.1 version

HTTP Request Methods

Method	Description
GET	Retrieves a resource
PUT	Update a resource
DELETE	Remove a resource
POST	Store a resource

Here GET is termed as safest methods as it doesn’t alter any information on the server and it will retrieve the same information every time even if it is carried out multiple times.

POST is generally used for submitting a form. For example, a college counseling application form which needed to be filled and it takes multiple inputs from a user.

HTTP Request Header

A header contains useful information which helps a server process a request and sends the appropriate response. Example “Accept-Language“ header could help in requesting the page in multiple languages.

Header	Description
Referer	When the user clicks on a link, the client can send the URL of the referring page in this header.
User-Agent	Information about the user agent (the software) making the request.
Accept	Describes the media types the user agent is willing to accept.
Accept-Language	Describes the languages the user agent prefers.
Cookie	Contains cookie information
If-Modified-Since	Will contain a date of when the user agent last retrieved (and cached) the resource.

Below is an example of request headers which were part of a request.

HTTP Response

An HTTP response mainly contains HTTP response headers, status code and the resource if applicable for the request.

Status Codes

These codes help in identifying certain information about our requests. They are divided into 5 categories as under.

Range	Category
100-199	Informational
200-299	Successful
300-399	Redirection
400-499	Client Error
500-599	Server Error

We would also see some specific HTTP Codes which are mostly used.

Code	Type	Description
200	Ok
301	Moved Permanently
302	Moved Permanently
304	Not Modified
400	Bad Request
403	Forbidden
404	Not Found
500	Internal server error
503	Service Unavailable

Response Headers

These are also like request headers but contained detailed information about the requested resource and the host.

 Proxies

A proxy server is a computer that sits between a client and server. An end user will not be able to identify whether he/she is using a proxy. Generally, companies use proxies to monitor or alter or filter the internet traffic going through their server or organizations.

Forward Proxy: A proxy which is closer to the client than the server. So when an organization is using a proxy to filter and block certain websites for their employees, it is termed as a forward proxy.

Reverse Proxy: A proxy server that is closer to the server than the client and again it is transparent to the client. Organizations could deploy a reverse proxy to hide their technology stack from outside world. Other use cases of reverse proxy are Load balancing, SSL encryption, gzip compression etc.

HTTP Security

HTTP is a stateless protocol, which means that each request—response set is independent of any other set. So in HTTP protocol a server doesn’t maintain any information for the subsequent request.

This statelessness of HTTP has both pros and cons. On the cons side, we could not identify users and this actually hampers us in making personalized web applications.
However, most of the web application we make are highly state fully. Example are Banking, Social Networking, and Messaging applications.

In order to maintain state between subsequent request-response set, we generally use sessions, cookies etc.

Cookies

A cookie is a collection of key-value pair stored at client side and which reveals certain information about the client. When a user first time visits a website, the website can give cookie in the HTTP header of the response message. Then the browser sends this cookie in every subsequent request.

Authentication

It is a process through which a user identifies itself by entering username and password or PIN.

Types of authentication

Basic Authentication

When a user visits the website and authenticates itself, the website issues an authorization token in the header. It is highly unsafe as the authorization token is the base64 conversion of username and password.

Digest Authentication

It is improved version of basic authentication as it doesn’t send user passwords in base64 encoding. Instead, the client sends a digest of the password. The client computes the digest using the MD5 hashing algorithm with a nonce the server provides during the authentication challenge. (A nonce is a cryptographic number used to prevent replay attacks.)

Windows Authentication

It is popular among Microsoft products and servers and at the same time it is supported by most popular browsers. It uses the Negotiate protocol which helps clients to select Kerberos or HTML. When a user tries to visit website first time it is challenged by windows authentication with WWW-Authenticate header with a value of Negotiate in it.

Forms-based Authentication

It is most popular authentication method available on the internet. When a user tries to visit website he or she is redirected to a login page. The user submits his/her information and the server set a cookie indication the user is now authenticated. Generally, this cookie is encrypted and hashed to prevent tampering.

OpenID

We have seen forms based authentication give a good amount of control over web application and prevent unauthorized access. OpenID is an open standard for decentralized authentication. With the help of openID user now identify his/her identity through OpendID providers such as Google or yahoo etc. Once user’s get identified he could be redirected to web application.