DEV Community: Derrick TheCodeholic

Deploying a react app in netlify

Derrick TheCodeholic — Wed, 14 Oct 2020 14:57:39 +0000

Netlify CLI
Netifly also provides a command line interface that lets you deploy your app straight from the command line. That’s what we will do now.

So first, we’ll install the CLI using the following command:

npm install netlify-cli -g

Now, we’re ready to deploy it. To deploy the application we have to make sure that we’re in the project folder and then we will run this command:

netlify deploy

We might get a pop-up window which will ask us to log in with Netlify and grant access to the Netlify CLI, click Authorize. Now that we’re authorized, we can follow the command line prompts to deploy the app.
Command Line Prompts

In the console, it says that** “This folder isn’t linked to a site yet. What would you like to do?”** It wants to know if we want to link this directory to an existing site or create and configure a new site. Since this is a new site, we’ll select Create & configure a new site.
It gives us the option to give our site a name. I’ll type TheCodeholic (You can type any available name which you like).
Now it will ask for the Netlify account which you want to use, so I will select my account (deliicmugambi's teami ), you can select yours.
Now, as deploy path, we need to specify our project's build directory which contains the assets for deployment. So, we will type build there and press enter.

Wo r k i n g and consuming a RESTFUL API in R e a c t.

Derrick TheCodeholic — Wed, 14 Oct 2020 13:59:01 +0000

Consuming REST APIs in a React Application can be done in various ways which include: fetch(), Axios and superagent. In this post, we shall discuss them in details.
fetch
The fetch() API is an inbuilt JavaScript method for getting resources from a server or an API endpoint. It’s similar to XMLHttpRequest, but the fetch API provides a more powerful and flexible feature set.
The fetch() API method always takes in a compulsory argument, which is the path or URL to the resource you want to fetch. It returns a promise that points to the response from the request, whether the request is successful or not. You can also optionally pass in an init options object as the second argument.
BASIC SYNTAX FOR USING THE FETCH() API
A basic fetch request is really simple to write, take a look at the following code:

fetch('https://api.github.com/users/hacktivist123/repos')
  .then(response => response.json())
  .then(data => console.log(data));

In the code above, we are fetching data from a URL that returns data as JSON and then printing it to the console. The simplest form of using fetch() often takes just one argument which is the path to the resource you want to fetch and then return a promise containing the response from the fetch request. This response is an object.

The response is just a regular HTTP response and not the actual JSON. In other to get the JSON body content from the response, we’d have to change the response to actual JSON using the json() method on the response.

Consuming APIs With Axios
Axios is an easy to use promise-based HTTP client for the browser and node.js. Since Axios is promise-based, we can take advantage of async and await for more readable and asynchronous code. With Axios, we get the ability to intercept and cancel request, it also has a built-in feature that provides client-side protection against cross-site request forgery.

FEATURES OF AXIOS
Request and response interception
Streamlined error handling
Protection against XSRF
Support for upload progress
Response timeout
The ability to cancel requests
Support for older browsers
Automatic JSON data transformation
MAKING REQUESTS WITH AXIOS
Making HTTP Requests with Axios is quite easy. The code below is basically how to make an HTTP request.

// Make a GET request
axios({
  method: 'get',
  url: 'https://api.github.com/users/hacktivist123',
});

// Make a Post Request
axios({
  method: 'post',
  url: '/login',
  data: {
    firstName: 'shedrack',
    lastName: 'akintayo'
  }
});

The code above shows the basic ways we can make a GET and POST HTTP request with Axios.

Axios also provides a set of shorthand method for performing different HTTP requests. The Methods are as follows:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
For example, if we want to make a similar request like the example code above but with the shorthand methods we can do it like so:

// Make a GET request with a shorthand method
axios.get('https://api.github.com/users/hacktivist123');

// Make a Post Request with a shorthand method
axios.post('/signup', {
    firstName: 'shedrack',
    lastName: 'akintayo'
});

In the code above, we are making the same request as what we did above but this time with the shorthand method. Axios provides flexibility and makes your HTTP requests even more readable.
superagent
To use superagent, we will import the library:

npm i superagent -S

Then, we import the library in our component:

import request from 'superagent'
class UsersComponent extends React.Component {
    constructor() {
        this.state = {
            users: [],
            done: false
        }
    }
    componentDidMount() {
        request
            .get('api/users')
            .then(res => this.setState({users: res.json(), done: true}))
            .catch(err => log(err))
    }
    render() {
        if(!this.state.done) {
            return (
                <div>
                    Users Loading 
                </div>
            )
        } else {
            return (
                <div>
                    Users: {this.state.users}            
                </div>
            )
        }
    }
}

Map in React

Derrick TheCodeholic — Tue, 13 Oct 2020 15:07:58 +0000

The map() function is used to iterate over an array and manipulate or change data items. In React, the map() function is most commonly used for rendering a list of data to the DOM.

To use the map() function, attach it to an array you want to iterate over. The map() function expects a callback as the argument and executes it once for each element in the array. From the callback parameters, you can access the current element, the current index, and the array itself. The map() function also takes in an optional second argument, which you can pass to use as this inside the callback. Each time the callback executes, the returned value is then added to a new array.For example:

const num = [3, 8, 11, 7, 5];

const num2x = num.map((n) => n * 2);

console.log(num2x); // [6, 16, 22, 14, 10]

Usage in React
Consider an array of objects that contains user id and name. To display it to the DOM, you need to use the map() function and return JSX from the callback function. This is the most common use case of the map() function in React.

const Users = () => {
  const data = [
    { id: 1, name: "Timo Werner },
    { id: 2, name: " Wayne Gakuo" },
    { id: 3, name: "Kai havartz" },
  ];

  return (
    <div className="users">
      {data.map((user) => (
        <div className="user">{user}</div>
      ))}
    </div>
  );
};

Other than rendering, the map() function can also be used in a utility function, which can be imported from another file.

Suppose you have an array of different image sizes.

const imageSizes = [
  { name: "horizontal", width: 600, height: 380 },
  { name: "vertical", width: 400, height: 650 },
  { name: "thumbnail", width: 300, height: 300 },
];

You need to normalize the object to a string with the following format: "Horizontal image - 600 x 380".

imageSizes.map((a) => {
  const capitalizedName = a.name[0].toUpperCase() + a.name.slice(1);
  return `${captalizedName} image - ${a.width} x ${a.height}`;
});

Next, make this into a reusable utility function and name the function stringifyImageSizes.

const stringifyImageSizes = (imageSizes) => {
  return imageSizes.map((a) => {
    const capitalizedName = a.name[0].toUpperCase() + a.name.slice(1);
    return `${captalizedName} image - ${a.width} x ${a.height}`;
  });
};

Add the export keyword before the function declaration so that you can access it in any other .js or .jsx files.

export const stringifyImageSizes = (imageSizes) => {
  // ...
};

Now, import the function using the import keyword in the component file.

import React from "react";

import { stringifyImageSizes } from "./utils";

const Images = () => {
  const imageSizes = [
    { name: "horizontal", width: 600, height: 380 },
    { name: "vertical", width: 400, height: 650 },
    { name: "thumbnail", width: 300, height: 300 },
  ];

  const normalizedImageStrings = stringifyImageSizes(imageSizes);

  return (
    <div className="images">
      {normalizedImageStrings.map((s) => (
        <div className="image-type">{s}</div>
      ))}
    </div>
  );
};

And that's it. Pretty easy, right?

Using the map() function, you can pretty much do all sorts of manipulations without mutating the original array. The non-mutation part is essential, as it does not cause any side effects by default and makes it easy to debug your code. If you want to mutate the original array, you can use the traditional for or any other type of loop, or you can use the forEach() function.

Getting Started With Axios and fetch()

Derrick TheCodeholic — Tue, 13 Oct 2020 14:41:00 +0000

fetch() allows you to make network requests similar to XMLHttpRequest (XHR). The main difference is that the Fetch API uses Promises, which enables a simpler and cleaner API, avoiding callback hell and having to remember the complex API of XMLHttpRequest.
Using Fetch API is really simple. Just pass the URL, the path to the resource you want to fetch, to fetch() method:

fetch('/js/users.json')
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

Lets look at two examples, one using XMLHttpRequest and the other with fetch().

XMLHttpRequest
function reqListener() {
  var data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError(err) {
  console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

Our fetch request looks a little like this:

fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

We start by checking that the response status is 200 before parsing the response as JSON.

The response of a fetch() request is a Stream object, which means that when we call the json() method, a Promise is returned since the reading of the stream will happen asynchronously.
Lets use GET Request, POST Request and DELETE Request.

GET request
By default, the Fetch API uses GET method for asynchronous requests. Let's use the Reqres REST API(A hosted REST-API ready to respond to your AJAX requests.) to retrieve a list of users using GET request:

fetch('https://reqres.in/api/users')
    .then(res => res.json())
    .then(res => {
        res.data.map(user => {
            console.log(`${user.id}: ${user.first_name} ${user.last_name}`);
        });
    });

This will output the following from Reqres REST API:

1: George Bluth
2: Janet Weaver
3: Emma Wong

POST Request

const user = {
    first_name: 'Deliic',
    last_name: 'Mugambi',
    job_title: 'Software Engineer'
};

const options = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users', options)
    .then(res => res.json())
    .then(res => console.log(res));

output
The Reqres API sends us the body data back with an ID and created timestamp attached
DELETE Request

const options = {
    method: 'DELETE',
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users/2', options)
    .then(res => {
        if (res.ok) {
            return Promise.resolve('User deleted.');
        } else {
            return Promise.reject('An error occurred.');
        }
    })
    .then(res => console.log(res));

Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js.
Installing
the most common way to install Axios is via the npm package manager:

npm i Axios

After installing you need to include it in your code like below:

import axios from 'axios';

Making Requests

axios({
  method: 'post',
  url: '/login',
  data: {
    user: 'brunos',
    lastName: 'ilovenodejs'
  }
});

Here, we’re telling Axios which HTTP method we’d like to use (e.g. GET/POST/DELETE etc.) and which URL the request should be made to.

We’re also providing some data to be sent along with the request in the form of a simple JavaScript object of key/value pairs. By default, Axios will serialize this as JSON and send it as the request body.
Receiving a Response

axios.get('/product/9')
  .then(response => console.log(response))
  .catch(error => console.log(error));

Once you make a request, Axios returns a promise that will resolve to either a response object or an error object
The response object
When the request is successful, your then() callback will receive a response object with the following properties:

data: the payload returned from the server. By default, Axios expects JSON and will parse this back into a JavaScript object for you.
status: the HTTP code returned from the server.
statusText: the HTTP status message returned by the server.
headers: all the headers sent back by the server.
config: the original request configuration.
request: the actual XMLHttpRequest object (when running in a browser)
The error object
If there’s a problem with the request, the promise will be rejected with an error object containing at least some of the following properties:

message: the error message text.
response: the response object (if received) as described in the previous section.
request: the actual XMLHttpRequest object (when running in a browser).
config: the original request configuration.

Transforms
Axios allows you to provide functions to transform the outgoing or incoming data, in the form of two configuration options you can set when making a request: transformRequest and transformResponse. Both properties are arrays, allowing you to chain multiple functions that the data will be passed through.

Any functions passed to transformRequest are applied to PUT, POST and PATCH requests. They receive the request data, and the headers object as arguments and must return a modified data object.

const options = {
  transformRequest: [
    (data, headers) => {
      // do something with data
      return data;
    }
  ]
}

Interceptors
While transforms let you modify outgoing and incoming data, Axios also allows you to add functions called interceptors. Like transforms, these functions can be attached to fire when a request is made, or when a response is received.

// Add a request interceptor
axios.interceptors.request.use((config) => {
    // Do something before request is sent
    return config;
  }, (error) => {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use((response) => {
    // Do something with response data
    return response;
  }, (error) => {
    // Do something with response error
    return Promise.reject(error);
  });

Interceptors have some important differences from transforms. Instead of just receiving the data or headers, interceptors receive the full request config or response object.

When creating interceptors, you can also choose to provide an error handler function that allows you to catch any errors and deal with them appropriately

MATERIAL DESIGN FOR REACT

Derrick TheCodeholic — Tue, 13 Oct 2020 13:14:33 +0000

Material Design is a design language developed in 2014 by Google and is very popular for web and mobile applications.
Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.
With the components from the Material-UI library it’s very easy to make use of Material Design elements in your React web or mobile application.
Material UI is one of the famous React UI frameworks with 6 million monthly npm downloads and 43k GitHub stars.

Material UI provides us React components that implement google material design.
In this tutorial, we are going to learn about how to use the Material UI framework in React apps. Happy? Lets get started...

Getting started
First install the Material UI framework by using below commands:
npm install @material-ui/core

We need to set up and install the new react app by using the create-react-app command line tool.
Open your terminal and run following commands:

npx create-react-app react-material

Next, we need to change our working directory by using below commands:
cd react-material
npm start

Let’s design our App header using Material UI components
Now in App.js file we are importing AppBar component from the ‘@material-ui/core/AppBar’.

In AppBar component we passed two props color and position

Now you can see a Header with primary color is rendered on the screen.

Let’s replace our h1 element with Material UI TypoGraphy Component

In the above code first we imported two component which are ToolBar and TypoGraphy from ‘@material-ui’ framework.

In TypoGraphy component we passed two props variant and color.

Have you seen how we got more spacing over our heading?

Adding Nav bar
Let’s add the Navbar to our Header.

create a new file called navbar.js in your src folder.
Add the following line of codes:

Inside the navbar.js we imported ListItem and ListItemText component.

In ListItem component we added component prop value to nav so that we can get html nav element.

Material ui svg icons
Material UI provides us with SVG material icons to use in our react app.

Let’s install the icons package in our app so that we can use icons as React components:
npm install @material-ui/icons
Let’s Import the icons inside our navbar.js file.

Grid
The Material UI supports responsive grid layouts which adapt to the device screen size and orientation.

Let’s use the Grid component.

Create a two new files called dummy-post.js, posts.js and add the following code:
dummy-post.js

post.js

In the above code, we imported Grid and Card related components.

In Grid Component we passed container prop so that it become grid container.

justify prop helps us to make our grid items center
spacing prop helps us to create the spacing between individual grid items (supporting values are 8, 16, 24, 32 or 40).
Inside the Grid container component, we passed item prop to the Grid component so that they become grid items

Contact form
Let’s design a contact form using Material UI FormControl and Input components.

create a new file called contact.js in your src folder.

Here we first imported the FormControl,InputLabel,Input,Button and TextField components from the material UI framework.

FormControlComponent: In FormControl component we passed margin prop value to normal so that it maintains the distance between input fields, we also passed fullWidth it means to occupy the available space.

InputLabel : The InputLabel component helps us to display the label for our input field.

Input: The Input component helps us display the HTML input field.

if we pass multiline prop to the Input component it will render textarea element instead of input field.

rows prop is used to increase the rows in textarea element.

Output

FRONT-END DEVELOPMENT DAY 3

Derrick TheCodeholic — Tue, 06 Oct 2020 15:03:28 +0000

The front end of a website is the part that users interact with. Everything that you see when you’re navigating around the Internet, from fonts and colors to dropdown menus and sliders, is a combo of HTML, CSS, and JavaScript being controlled by your computer’s browser.
Front-end developers are responsible for a website’s user-facing code and the architecture of its immersive user experiences. In order to execute those objectives, front-end devs must be adept at three main languages: HTML, CSS, and Javascript programming.Front-end developers also require to muster some frameworks like vue, angular etc which ensure great-looking content no matter the device, and libraries like jQuery and LESS, which package code into a more useful, time-saving form. A lot of front-end developer job listings also call for experience with Ajax, a widely used technique for using Javascript that lets pages dynamically load by downloading server data in the background(asynchronous).

** Front End Developer Skills**

HTML/CSS You won’t find a single front end developer job listing that doesn’t call for (or assume) proficiency in these two languages.Lets have a look on what they are: HyperText Markup Language (HTML) is the standard markup language used to create web pages. A markup language is your way of making notes in a digital document that can be distinguished from regular text. It’s the most basic building block you’ll need for developing websites.

CSS (Cascading Style Sheets) is the language used to present the
document you create with HTML. Where HTML comes first and creates
the foundation for your page, CSS comes along next and is used to
create the page’s layout, color, fonts, and…well, the style!

Both of these languages are absolutely essential to being a front
end developer. Simply put, no HTML/CSS, no web development.

** JAVASCRIPT/JQUERY** Another MAJOR tool in your front end developer toolbox is going to be JavaScript (JS). Where HTML is a markup language and CSS is a style sheet language, JS is the first language I’ve mentioned that’s a bonafide programming language. What’s the difference? Where HTML and CSS determine the presentation of a page, JS determines the function. jQuery is a collection of plugins and extensions that make it faster and easier to use JS on your website. jQuery takes common tasks that require multiple lines of JS code and compresses them into a format that can be executed with a single line. This will be a big help when you’re coding with JS. Unless, of course, you don’t like saving time. ;)
CSS AND JAVASCRIPT FRAMEWORKS CSS and JavaScript frameworks are collections of CSS or JS files that do a bunch of the work for you by providing common functionality (think logging into a website or searching a blog). Instead of starting with an EMPTY text document you start with a code file that has lots of awesome JS already in it.

Frameworks have their strengths and weaknesses—don’t we all!—and
it’s important to choose the best framework for the type of
website you’re building. For example, some JS frameworks are
great for building complex user interfaces, while others excel at
displaying all of your site’s content.
You should note that it is possible to use frameworks together.
isn't this awesome??

VERSION CONTROL/GIT Version control is the process of tracking and controlling changes to your source code so that If something goes wrong along the way you won't start over from the beginning . Version control software—like open source stalwart Git—is a tool you’ll use to track those changes so you can go back to a previous version of your work and find out what went wrong without tearing the whole thing down.

As you might imagine, this a skill that you (and your prospective
clients and employers) will be very happy to have.

TESTING/DEBUGGING Bugs are a reality of the development process. In order to keep things moving you’ll need to test your code for bugs along the way, so the ability to test and debug makes the list of essential skills for front end developers.

There are a couple of different testing methods for web
development. Functional testing looks at a particular piece of
functionality on your site (like a form or database) and makes
sure it does everything you’ve coded it to do.

Unit testing is another method. It tests the smallest bit of code
that’s responsible for one thing on your site and examines it
individually for correct operation.

Testing is a big part of the front end development process, but
fortunately, it’s another area where there are frameworks to help
you. Programs like Mocha and Jasmine are designed to speed up and
simplify your testing process.

CSS PREPROCESSING CSS on its own, while essential, can sometimes be limiting. One of these limitations is that fact that you can’t define variables, functions, or perform arithmetic operations. This is a problem when a project grows in scale and code base, as you’ll soon find yourself wasting a lot of time writing repetitive code to make changes. Like CSS (and JS) frameworks, CSS preprocessing is another means of making your life as a developer easier and more flexible.

Using a CSS preprocessor like Sass, LESS, or Stylus, you’re able
to write code in the preprocessor's language (allowing you to do
things that might be a huge pain with plain old CSS). The
preprocessor then converts that code to CSS so it will work on
your website.

RESPONSIVE DESIGN These days we use any number of computers, phones, and tablets to look at web pages. Ever notice how these pages adjust themselves to the device you’re using without you doing anything on your end? This is due to responsive design. Understanding responsive design principles and how to implement them on the coding side is key to front end development.

One cool thing to keep in mind regarding responsive design is
that it’s an intrinsic part of CSS frameworks like the
aforementioned Bootstrap. These skills are all interconnected and
so as you learn one you’ll often be making progress in the others
at the same time.

** BROWSER DEVELOPER TOOLS** Users will ultimately be interfacing with your websites through a web browser. The way your site is rendered by these browsers is going to be a big part of whether your work is successful or not.

Similarly to the testing and debugging mentioned above, all
modern web browsers come equipped with developer tools. These
tools allow you to test and fine tune your pages in the browser
itself, in ways specific to how the browser is interpreting your
code.

Specifics will vary from browser to browser, but browser
developer tools generally consist of an inspector and a
JavaScript console. The inspector allows you to see what the
runtime HTML on your page looks like, what CSS is associated with
each element on the page, and also allows you to edit your HTML
and CSS and see the changes live as they happen. The JS console
allows you to view any errors that occur as the browser tries to
execute your JS code.

Other skills are:** BUILDING AND AUTOMATION TOOLS/WEB PERFORMANCE
and COMMAND LINE**

Introduction to docker and containerization day 2

Derrick TheCodeholic — Mon, 05 Oct 2020 15:11:08 +0000

Before we dive into Docker, lets understand What is Virtualization?, What is Containerization and Advantages of Containerization over Virtualization

What is Virtualization? Virtualization is the technique of importing a Guest operating system on top of a Host operating system. This technique was a revelation at the beginning because it allowed developers to run multiple operating systems in different virtual machines all running on the same host. This eliminated the need for extra hardware resource. The advantages of VM or Virtualization are:

Multiple operating systems can run on the same machine
Maintenance and Recovery were easy in case of failure conditions
Total cost of ownership was also less due to the reduced need for infrastructure However, Virtualization has some disadvantages which include:
Running multiple Virtual Machines leads to unstable performance
Hypervisors are not as efficient as the host operating system
Boot up process is long and takes time

What is Containerization? Containerization is the technique of bringing virtualization to the operating system level. While Virtualization brings abstraction to the hardware, Containerization brings abstraction to the operating system. Do note that Containerization is also a type of Virtualization. Containerization is however more efficient because there is no guest OS here and utilizes a host’s operating system, share relevant libraries & resources as and when needed unlike virtual machines.
Finally the following are the Advantages of Containerization over Virtualization
1.Containers on the same OS kernel are lighter and smaller

Better resource utilization compared to VMs
Boot-up process is short and takes few seconds

What is Docker & why is Docker needed? – Docker is a containerization platform that packages your application and all its dependencies together in the form of a docker container to ensure that your application works seamlessly in any environment
Wow! That's a mouthful. In simpler words, Docker is a tool that allows developers, sys-admins etc. to easily deploy their applications in a sandbox (called containers) to run on the host operating system i.e. Linux.
The key benefit of Docker is that it allows users to package an application with all of its dependencies into a standardized unit for software development. Unlike virtual machines, containers do not have high overhead and hence enable more efficient usage of the underlying system and resources.

So what is a docker container? Docker Container is a standardized unit which can be created on the fly to deploy a particular application or environment. Docker Containers are the ready applications created from Docker Images. Or you can say they are running instances of the Images and they hold the entire package needed to run the application. This happens to be the ultimate utility of the technology.

Now what is a docker engine Docker Engine is simply the application that is installed on your host machine. It works like a client-server application which uses a server which is a type of long-running program called a daemon process, a command line interface (CLI) client and REST API which is used for communication between the CLI client and Docker Daemon.

While defining a Docker container, i mentioned the term Docker image. So what is it? A Docker image is a read-only template that contains a set of instructions for creating a container that can run on the Docker platform. It provides a convenient way to package up applications and preconfigured server environments, which you can use for your own private use or share publicly with other Docker users. These Docker Images are created using the build command. These Read only templates are used for creating containers by using the run command. In relation to docker image, we have Docker Hub, which is like GitHub for Docker Images. It is basically a cloud registry where you can find Docker Images uploaded by different communities, also you can develop your own image and upload on Docker Hub, but first, you need to create an account on Docker Hub.
Docker Registry A registry is a storage and content delivery system, holding named Docker images, available in different tagged versions. ... Users interact with a registry by using docker push and pull commands. In simple terms a Docker Registry is where the Docker Images are stored.

Docker Architecture Docker Architecture includes a Docker client – used to trigger Docker commands, a Docker Host – running the Docker Daemon and a Docker Registry – storing Docker Images. The Docker Daemon running within Docker Host is responsible for the images and containers.
To build a Docker Image, we can use the CLI (client) to issue a build command to the Docker Daemon (running on Docker_Host). The Daemon will then build an image based on our inputs and save it in the Registry, which can be either Docker hub or a local repository
If we do not want to create an image, then we can just pull an image from the Docker hub, which would have been built by a different user
Finally, if we have to create a running instance of my Docker image, we can issue a run command from the CLI, which will create a Container.

After understanding the terms above, lets now install docker in windows operating system.

[click here to install 2.Docker(https://download.docker.com/win/beta/InstallDocker.msi)
Double-click InstallDocker.msi to run the installer.
Follow the Install Wizard: accept the license, authorize the installer, and proceed with the install.
Click Finish to launch Docker.
Docker starts automatically.
Docker loads a “Welcome” window giving you tips and access to the Docker documentation.

Introduction to GitHub day1

Derrick TheCodeholic — Sat, 03 Oct 2020 14:45:37 +0000

GitHub is a website and service that we hear geeks rave about all the time, yet a lot of people don’t really understand what it does. Want to know what all the GitHub hubbub is about? Read on to find out.
What is GitHub?

GitHub is a file or code-sharing service to collaborate with different people.

GitHub is a highly used software that is typically used for version control. It is highly used especially when more one person is participating in a project.
Advantages of using GitHub

GitHub provides you a beautiful visual interface which helps you to track or manage your version controlled projects locally.
Once you register on GitHub, you can connect with social network and build a strong profile.
It makes it easy to contribute to your open source projects Now lets get started with GitHub..

How to create a GitHub account
To create a GitHub account visit GitHub Website and fill the sign up form then click on start a new project.
Create a new repository

A repository is a storage space where your project lives. It can be local to a folder on your computer, or it can be a storage space on GitHub or another online host. You can keep code files, text files, images or any kind of a file in a repository. You need a GitHub repository when you have done some changes and are ready to be uploaded. This GitHub repository acts as your remote repository. So let me make your task easy, just follow these simple steps to create a GitHub repository.

Fill the required details and click on create repository button.
This is how it looks once you create it

How to create a branch

Branching: Branches help you to work on different versions of a repository at one time. Let’s say you want to add a new feature (which is in the development phase), and you are afraid at the same time whether to make changes to your main project or not. This is where git branching comes to rescue. Branches allow you to move back and forth between the different states/versions of a project. In the above scenario, you can create a new branch and test the new feature without affecting the main branch. Once you are done with it, you can merge the changes from new branch to the main branch. Here the main branch is the master branch, which is there in your repository by default.
To create a branch in GitHub, click on main and fill the name of your branch. Am creating a branch called New-branch. Follow the screenshot below.

GitHub commands.
1. Commit Command
This operation helps you to save the changes in your file. When you commit a file, you should always provide the message, just to keep in the mind the changes done by you. Though this message is not compulsory but it is always recommended so that it can differentiate the various versions or commits you have done so far to your repository. This is an example screenshot

2. Pull Command
Pull command is the most important command in GitHub. It tell the changes done in the file and request other contributors to view it as well as merge it with the master branch. Once the commit is done, anyone can pull the file and can start a discussion over it. Once its all done, you can merge the file.
Click the ‘Pull requests’ tab, Click ‘New pull request’, Once you click on pull request, select the branch and click ‘readme- changes’ file to view changes between the two files present in our repository, Click “Create pull request”, Enter any title, description to your changes and click on “Create pull request”.
3. Merge Command

command which merge the changes into the main master branch. We saw the changes in pink and green color, now let’s merge the “readme- changes” file with the master branch/ read-me. Click on “Merge pull request” to merge the changes into master branch. Click “Confirm merge”.
4.Cloning and Forking GitHub Repository
Cloning a repository means that you're downloading a copy of the source code from source control. You can clone a repository from GitHub to your local computer to make it easier to fix merge conflicts, add or remove files, and push larger commits. When you clone a repository, you copy the repository from GitHub to your local machine. Above the list of files, click Code, you can clone the repository using HTTPS", SSH or GitHub CLI. You can then Open with GitHub Desktop or download zip. refer to screenshot below

A fork is a copy of a repository. ##Forking## a repository allows you to freely experiment with changes without affecting the original project. Most commonly, forks are used to either propose changes to someone else's project or to use someone else's project as a starting point for your own idea. Go to Explore and search for public repositories. Click “fork”.