Heroku

Heroku is a cloud platform as a service supporting several programming languages that is used as a web application deployment model.


💥How to use Heroku 

1. Download the Heroku Toolbelt.
2. Login: heroku login.
3. Add your public key: heroku keys:add.
4. Pull down your current application heroku git:clone -a app-name.
5. Make your improvements.
6. Git add and commit your changes.
7. Push back to heroku: git push heroku master.

 💥Advantage in Heroku

• Heroku is easy to get started.
• Heroku is the cheapest option for a low traffic site
• we don't have to add our credit card for payment at early stage.
• They offer no of Dyno for upgrade and downgrade app instance
• Database integration is pretty simple with PostgreSQL

 💥Disadvantage in Heroku

• we have to pay very high, once we decide to handle more traffic.
• we have to manually scale our application on hight traffic.
• we can't login to your server via SSH(Secure Remote Login & File Transfer)

💥What Is SSH Protocol Used for?

The protocol is used in corporate networks for:

• providing secure access for users and automated processes
• interactive and automated file transfers
• issuing remote commands
• managing network infrastructure and other mission-critical system components.

FriendsShip ...

   
 😍😍😍😍I'm the luckiest person in the world because I have lots of friends. That's why I am happy. 😍😍😍😍

 

 

Postman

A powerful GUI platform to make your API development faster & easier, from building API requests through testing, documentation and sharing. We recommend the free Postman App for Mac, Windows, Linux or Chrome. Developer Teams.

💥 How to work postman

1. Launch the Postman app.
2. Go to the Authorization section: Postman Authorization Section.
3. For the Type, select OAuth 2.0: Authorization Type.
4. Click Get New Access Token.
5. Click Request Token.
6. Click on the name of the token to see you now have access to the new token: Access Token.

 💥What are the benefits to use postman

• Easily create test suites

  Postman allows we create collections of integration tests to ensure our API is working as expected. Tests are run in a specific order with each test being executed after the last is finished 

  ☺store information for running tests in different environments 

  
  

    Postman allows we to store specific information about different environments and automatically insert the correct environment configuration into our test. This could be a base URL, query parameters, request headers, and even body data for an HTTP post.

  
  
  
  
  ☺ Store data for use in other tests

          Postman also allows we to store data from previous tests into global variables. These variables can be used exactly like environment variables.we can store the response  and use that as part of a request header, post body, or URL for the subsequent API calls.

     ☺Easily move tests and environments to code repositories

            

UI & UX

      💥 While User Experience is a conglomeration of tasks focused on optimization of a product for effective and enjoyable use; User Interface Design is its compliment, the look and feel, the presentation and interactivity of a product. But like UX, it is easily and often confused by the industries that employ UI Designers.

   💥Unlike UX designers who are concerned with the overall feel of the product, user interface designers are particular about how the product is laid out. They are in charge of designing each screen or page with which a user interacts and ensuring that the UI visually communicates the path that a UX designer has laid out.

Free code Camp and Codecadamy & hackerrank

HackerRank is a technology company that focuses on competitive programming challenges for both consumers and businesses, where developers compete by trying to program according to provided specifications.HackerRank's programming challenges can be solved in a variety of programming languages (including Java, C++, PHP,Python,SQL) and span multiple computer science domains.
On the consumer side, when a programmer submits a solution to a programming challenge, their submission is scored on the accuracy of their output and the execution time of their solution.

    
       Codecademy is an online interactive platform that offers free coding classes in 12 different Progamming languages including Python,Java,PHP (jQuery,AngularsJS,React.js),Ruby,SQl,Sass,as well as Markup languages HTML and CSS.


FREE CODE CAMP

     FreeCodeCamp is a nonprofit organization that consists of an interactive learning web platform, an online community forum, chat rooms,medium publications, and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS, and JavaScript, students progress to project assignments that they must complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.

REACT

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
It's used for handling view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and it has strong foundation and large community behind it.

React Features

• JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
• Components − React is all about components. 
• Unidirectional data flow and Flux − React implements one way data flow which makes it easy to reason about our app. 
• License − React is licensed under the Facebook Inc. 
  
  
  

  React Advantages

• React uses virtual DOM which is JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
  
• React can be used on client and server side.
  
• Component and Data patterns improve readability which helps to maintain larger apps.
  
  React can be used with other frameworks.
  
   React JSX
  
  React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, but there are some pros that comes with it.
  
  
• JSX is faster because it performs optimization while compiling code to JavaScript.
• It is also type-safe and most of the errors can be caught during compilation.
• JSX makes it easier and faster to write templates if you are familiar with HTML.

 

import React from 'react';

class App extends React.Component {
   render() {

      var i = 1;

      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}

export default App;

  React component

This component is owner of Header and Content. We are creating Header and Content separately and just adding it inside JSX tree in our App component. Only App component needs to be exported.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

React State 

State is the place where the data comes from.If we have, for example, ten components that need data from the state, we should create one container component that will keep the state for all of them.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
	
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}

export default App;

AJAx

     AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.

How Ajax is working?

     AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

    AJAX cannot work independently. It is used in combination with other technologies to create interactive web pages.

• JavaScript
• DOM
• CSS
• XML HttpRequest

           JavaScript object that performs asynchronous interaction with the server.

Steps of AJAX Operation

• A client event occurs.
• An XMLHttpRequest object is created.
• The XMLHttpRequest object is configured.
• The XMLHttpRequest object makes an asynchronous request to the Webserver.
• The Webserver returns the result containing XML document.
• The XMLHttpRequest object calls the callback() function and processes the result.
• The HTML DOM is updated.

The XMLHttpRequest Object is Created

         The XMLHttpRequest object is the key to AJAX.

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction(){
   try{
      
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){
   
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
      
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

 jQuery  AJAX

      With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!

   jQuery load() Method

       The load() method loads data from a server and puts the returned data into the selected element.
 
Syntax:

$(selector).load(URL,data,callback); 

The required URL parameter specifies the URL you wish to load.

 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt #p1");
    });
});
</script>

jQuery $.get() Method

    The $.get() method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test.asp", function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>

    jQuery $.post() Method

The $.post() method requests data from the server using an HTTP POST request.

Syntax:

$.post(URL,data,callback);

 <script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>

Sound Cloud API

             Sounds (in the API these are called tracks) are core to SoundCloud. Sound Cloud  API give we the ability to upload, manage and share sounds on the web. our app can take an audio file and upload it to a user's SoundCloud account.
that enables its users to upload, record, promote, and share their originally-created sounds.

Mongoose

 Mongoose acts as a front end to MongoDB, an open source NoSQL database that uses a document-oriented data model. A “collection” of “documents”, in a MongoDB database, is analogous to a “table” of “rows” in a relational database.

       why we wrote Mongoose.

 var mongoose= require ('mongoose');

mongoose.connect('mongodb://localhost/test');

var cat = mongoose.model('cat', {name: string});

var kitty = new Cat({ name: 'Zildjian' });
kitty.save(function (err) {
  if (err) {
    console.log(err);
  } else {
    console.log('meow');
  }
});

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.