“The more that you read, the more things you will know. The more that you learn, the more places you’ll go.”
― Dr. Seuss

Before Learning Anything we need to ask this question to ourselves WHAT ?and WHY ? I hope this step by step guide will help you to understand the concept !!! Let’s Start ….

First Let me introduce what is Angular:

What is Angular Why it is needed !

Angular is nothing but a JavaScript open-source front-end web application framework.Angular helps to build interactive and dynamic single page applications (SPAs) with its compelling features including templating, two-way binding, modularization, RESTful API handling, dependency injection, and AJAX handling.It is primarily sustained by Google.

It is just a basic information to know more about angular check the angular documentation .

Overview

First we need clear understand about this concept listed below

• Angular 8: Components
• Angular 8: Data Binding
• Angular 8: Directives
• Angular 8: Pipes
• Angular 8: View Encapsulation
• Angular 8: Forms
• Angular 8: Service
• Angular 8: Ajax Call
• Angular 8: Core Concept

Lets learn One by one clearly with simple Example stay tuned !

A load Balancer is a piece of hardware thats acts like a reverse proxy to distribute network or application traffic across different servers.It is used to to improve the concurrent user capacity and overall reliability of applications and also used to decrease the overall burden placed on each servers.

Round Robin

It is the most used algorithm it is easy to implement and easy to understand.It is in the cyclic form the request 1 will forword to server 1 and request2 will forword to server2 like vice versa.

But one problem has come by doing this method what we do if server1 have high capacity than server2 . If SERVER1 > SERVER2.. by here is the solution for that issues is WEIGHTED ROUND ROBIN will helps to solves that problem.

In this algorithm we assign a weight for the server based on the capacity of the server for above example. we used to assign wt=3 for server1 and wt=2 for server2 how it will work first 3 req were send to the server1 and next 2 req were send to the server2 vice versa ..

CACHE

Cache is a type of memory that is used to increase the speed of data access. Normally, the data required for any process resides in the main memory. However, it is transferred to the cache memory temporarily if it is used frequently enough. The process of storing and accessing data from a cache is known as caching.

MERITS

Cache memory is faster than the main memory it is stored in the processor chips itself

The memory access time is considerably less for cache memory as it is quite fast. This leads to faster execution of any process.

DEMERITS

Since the cache memory is quite fast, it is extremely useful in any computer system. However, it is also quite expensive

MERMORY CHACHE

Memory caching (often simply referred to as caching) is a technique in which computer applications temporarily store data in a computer’s main memory (i.e., random access memory, or RAM) to enable fast retrievals of that data. The RAM that is used for the temporary storage is known as the cache.

Variable Scope:

Scope in JavaScript refers to the set of functions and variables that are available for use.There are two types of scopes in JavaScript

1. Global Scope
2. Local Scope

Global Scope : A variable declared outside the function is become global variable.A global variable has Global Scope

In this program var x ,y and fn() all are global scope.This is the highest scope.It can be accessed and modified anywhere in the file.

Local scope: is also called function scope because local scope is created by functions in Javascript. Variables in the local scope are only accessible within the function in which they are defined.

In this program var x , y and fn() is global scope whereas inside function fn() is local scope.

The important key note is local scope: fn can access the global scope var x and y ,But the global scope cannot access the local scope of fn().

At this point the local scope is access var x from the global scope and consoled 1,2.Other hand when global scope try to access the y from the global scope it thows an exception.

Modify the Outer scope:

We’ve seen how to access variables outside the local scope and how to declare new ones inside the local scope.

In the above program global scope var x=5 and y=10. And local variable x=10 and y=20 after call the func it consoled the output x=5 and y=20 how?

Notice that inside function test() we declare var keyword only for x not for y this is the key. Functions can access and change variables in their outer scope. When we omit var, the JavaScript engine will not create a new instance of a variable in the local scope. Instead, it will first attempt to find the variable we are changing. If it’s found in the local scope, it’ll change the variable in the local scope. If it’s not, it’ll go up continuously until it finds it.

HOISTING:

In simple and easy words hoisting in JavaScript means Hoisting is the JavaScript interpreter’s action of moving all variable and function declarations to the top of the current scope.

The above snippet is the simple example that returns the obviousle OUTPUT : Meow Meow..

But what happens if we invoke our function before we actually declare it?Let’s see….

The OUTPUT: Meow Meow , Yes you are right hoisting is take place this it is moving all the function and var top of the scope.

Understanding the Call() , Apply() and Bind():

OVERVIEW :

When you want to invoke the function immediately we can use .call() and .apply() with modification of the context.Both methods are almost same but we have to know properly where to use both two. The .bind() method is totally different when you want that function use later we use .bind() method.

Tradionally the objects have Properties and Methods. But in javaScript we have write obj1 have different property and obj 2 have different property and common to both obj write one methods .Using .call() , .apply() and .bind()

.Call()

If you observe the call function takes two arguments:

• Context
• Function arguments

A context is an object that replaces this keyword inside the area function. Later arguments are passed as function arguments.

Call invocation is like this

Apply is exactly same except Function arguments are passed as a list for god’s sake.

If you know call, you know apply and vice versa. Now, what is bind?

.bind()

Bind attaches a brand new this to a given function. In bind’s case, the function is not executed instantly like Call or Apply.

What is the use of Bind? It allows us to inject a context into a function which returns a new function with updated context. It means this variable will be user supplied variable. This is very useful while working with JavaScript events.

You should know these three functions to develop JavaScript Functionality.

Write a function called “isEven”.
Given a number, “isEven” returns whether it is even.
Input:
isEven(11);
Output:
false

function isEven(num){
 // your code here
}

Problem:
Write a function called “areBothOdd”.
Given 2 numbers, “areBothOdd” returns whether or not both of the given numbers are odd.
Input:
areBothOdd(1, 3);
Output:
true

function areBothOdd(num1, num2){
 // your code here
}

Problem:
Write a function called “getFullName”.
Given a first and a last name, “getFullName” returns a single string with the given first and last names separated by a single space.
Input:
getFullName(“GUVI”, “GEEK”);
Output:
“GUVI GEEK”

function getFullName(firstName, lastName){
 // your code here
}

Problem:
Write a function called “getLengthOfWord”.
Given a word, “getLengthOfWord” returns the length of the given word.
Input:
getLengthOfWord(“GUVI”);
Output:
4

function getLengthOfWord(word1){
 // your code here
}

Problem:
Write a function called “isSameLength”.
Given two words, “isSameLength” returns whether the given words have the same length.
Input:
isSameLength(“GUVI”, “GEEK”);
Output:
true

function isSameLength(word1, word2){
 // your code here
}

Problem:

Write a function called “getLastElement”.
Given an array, “getLastElement” returns the last element of the given array. If the given array has a length of 0, it should return ‘undefined’.
Input:
getLastElement([1, 2, 3, 4]);
Output:
4

function getLastElement(array){
 // your code here
}

Problem:

Write a function called “getProperty”.
Given an object and a key, “getProperty” returns the value of the property at the given key. If there is no property at the given key, it should return undefined.
Input:
var obj = {
key: “value”
};
Output:
value

function getProperty(obj, key) {
 // your code here
}

Problem:
Write a function called “removeProperty”.
Given an object and a key, “removeProperty” removes the given key from the given object.
Input:
removeProperty(obj, “name”);
Output:
undefined

function removeProperty(obj, key){
 // your code here
}

Full Stack Development Introduction :

Hello my dear friends in this blog i am going to give a short introduction about full stack development.Don’t be lazy to read full blog ,I assure that after reading this blog fully you have basic idea about what is full stack development.

Let’s start with a beautyful qoute-

“Try to Learn Something about everything and everything about something”

Here we gooo..!

First i explain what is full stack development why everyone wants to hire one. A full stack web developer is a person who can develop both client and server software.A person who deals both front end and back end is full stack developer like one man army.

In other way A full-stack developer is someone who is familiar with all layers of an application. These layers are really collections of various technologies needed to complete a project, which is where the term “stack” comes from

Layer 1- Presentation Layer

Layer 2- Logic Layer

Layer 3- Data Layer

The one who is familiar with all the three layer mentioned above are the full stack developer.

Technologies and skills:

1. Markup languages — HTML and CSS

2. Programming Language — JavaScript, Java, PHP, Python and Java

3. Frameworks/Libraries — Angular, React, Vue, Node.js, Laravel and Ruby on Rails

4. Content Management System — WordPress, Joomla, Drupal, Magento and PrestaShop

5. DataBases — MySQL, MongoDB, and PostgreSQL

6. Version Controlling Systems — Github and Gitlab

7. Deployment: AWS, Google Cloud and Azure

HTML&CSS:

HTML - Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

More importantly HTML is not a programming language its a Markup Language .My friend always used to say HTML is a programming language no its not .

CSS- Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

The above picture is the best example for CSS. See how it looks before and after use of CSS.

JAVASCRIPT :

JavaScript was initially created to “make web pages alive”.The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads.Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run.

In this aspect, JavaScript is very different from another language called JAVA.Don’t call yourself as a full stack developer if you know javascript its one of the framework thats all.Javascript will helps us to make our page more interactive with end users and do validation,calculation etc..,

Bootstrap:

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development . It contains CSS- and (optionally) Javascript-based design templates for typography,forms,buttons,navigation and other interface components.

The above meme is funny but its true. Bootstrap is Piece of cake to the one who is master in HTML and CSS , again bootstarp is the CSS framework you just call the class name and active the functions.

Bootstrap is a web framework that focuses on simplifying the development of informative web pages (as opposed to web apps). The primary purpose of adding it to a web project is to apply Bootstrap’s choices of color, size, font and layout to that project.

Reality always f**k:

The above image shows the exact reality of every web developer feels.If you think you can learn everything in a single night remember “Rome is not build in a day” so don’t lose hope take time keep rocking.. :)

Hope you guys have the basic idea about full stack development and some of the technologies like HTML,CSS,JAVASCRIPT and BOOTSTRAP. Remaining technologies intro and their working tutorial will update shortly.

CHEERS!!!