DEV Community: Rishav Raj

Docz - It's never been easier to document your things! Let's test this statement – 2022

Rishav Raj — Fri, 14 Jan 2022 09:02:28 +0000

Whether you are the founder of a start-up or multinational company, developer and project admin, you know what you all have in common?
Document, yes it is an important part of your product, without documenting the product is like selling a dress without a tag.

Imagine you go shopping and you like a dress but there is no tag on it, so you don't understand whether this dress is in your budget or not.

Similarly if you launch a product or you develop an application for your startup or multinational company without great documentation your product or service will not be well-received and if you’re the only one who understands it if so, it doesn’t do any good. So Having the right documents can help keep your audience and users happy and satisfied.

In the software industry, technical documentation describes the various API routes and various steps a developer can take to get started with a project but creating a perfect document is also difficult and it also takes a long time. But we see how the technology is becoming more advanced day by day and by using the latest technology a developer has created Docz - It's never been easier to document your things! open source software.

Docz

Creating documentation is not just writing about the product or project, it is much more than that. It should be easy to read, be SEO-friendly and precise.

Introduction

Docz is an Open-Source Software powered by Gatsby that helps in creating or maintaining documents and It has all above features to make the document perfect as per their official documentation claim.

It uses GatsbyJS and Gatsby theme shadowing to let you quickly develop live-reloading, SEO-friendly, production-ready documentation sites using MDX and adjust the look, feel, and behaviour as needed.

Principle

After reading the Docz documentation thoroughly we can say that it is a really impressive application and creating documentation is now just a piece of cake. It is built on the most important principles of document creation, making it easy for users to create great quality documentation. Here are some key features mentioned which we’ll be testing in this article:

Zero config and easy to learn: Avoid unnecessary build steps with confusing setups.
Blazing fast: Built with performance in mind from the start.
Easy to customize: Create something that will be easy to use and customize.
MDX-based: Use the best standard for writing documentation.

The biggest example is their own documentation. You see how it was built, simple and easy to understand and its principles meet all the requirements to create a perfect document. But writing these principles into a document is not proof that it works that way. There are a lot of applications in the market which claim to do a bunch of things but fail to meet the requirements of the user.

Thus, before we start using this application, why not test this application and lay out the results so that it may be helpful to users in need of genuine documentation solutions.

Testing

So as per the principles of Docz, it takes no time to learn, has zero configuration, is faster than any other application and makes the theme customizable to the user to design it as per their choice.

Let us understand all these statements one by one.

Zero Configuration

Let's see how we add Docz to our project. So basically, we have to install NodeJS in our system and after installing NodeJS we have to create a folder for the project somewhere in our system and open the project folder in the terminal.

Now execute the command below in the terminal and be sure you are in the project directory.

$ yarn create docz-app my-docz-app --example typescript

💥 BOOM, You're...

For Full Article, visit Aviyel

The ultimate list of Open Source alternatives for paid applications in 2021

Rishav Raj — Fri, 26 Nov 2021 11:33:13 +0000

Open source software has marked its presence in every tech domain today. Moreover, the recent IPO of GitLab and Confluent has tilted the IT- industry towards more developer-centric and open-source software. But what are these open-source software anyway? When a developer creates and releases its source code publicly with a license so that anyone can see, add or modify some functionality, that's when software is termed as open. Most importantly, anyone can download and use them for FREE. It gives extra power to all of us- the developers, users, and especially, the contributors.

When Open Source was introduced in the 90s, the software industry was sceptical about the whole process. However, two decades later, the same companies use Open Source for their products or develop their open-source software (OSS), like Facebook with its React library, Google's Android, and Amazon with AWS. Today, many open-source technology companies such as RedHat, MongoDB, and Cloudera have more than $100 million annual revenue.

Open Source is so popular nowadays. According to some organizations, open-source software contributes up to £43 billion to UK GDP. The latest report claims that top contributors of Open-Source Software (OSS) are from Europe. It ranks fifth as the largest open-source contributor globally.

Open Source works with Quantity to create superior Quality of software.

Why Use Open Source Software Over Paid Alternatives?

Imagine you bought a new mobile phone and Google started charging you for using Android? It sounds scary? But there are many other paid software in the market that charge money for the same functionality that Open Source Software gives us for FREE.

Open-Source Software (OSS) is known for

● Security

● Affordability

● Transparency

● Consistent

● Interoperability

● Flexibility

● Localization

Take an example of Windows operating systems that are not Open-Source Software and more prone to software virus attacks than Open-Source Software Linux operating systems. People around the world contribute to Linux every day to make more improvements. Here you see how Open Source Softwares work better in Security and Transparency in comparison to paid software.

Plan Your Next Weekend!

You can plan your NEXT WEEKEND by using Open Source Softwares, maybe it sounds funny, but it is true. If you use Open Source Softwares instead of paying for paid software, you will save money.

Open Source Softwares Alternatives for Paid Softwares

The list of Open Source Softwares that we can use for personal or professional use.

Let me start with my favourite Open Source Softwares, which I am currently using the most, and many Startups and Developers are also using in their projects.

Docz - It's never been easier to document your things.

As a developer, I understand how necessary documentation is and how hard it is to create a proper document. But now, creating documents using Docz is a piece of cake.

Docz is an Open-Source Software powered by Gatsby that helps in creating or maintaining documents.

In just a few steps, and you will be ready with your document.

For More info, read this excellent article Using MDX with Docz Has Never Been This Easy! or visit their official website.

Typesense - Lightning-fast, Open Source Search Engine.

Search is a significant part of any programmer. Typesense is an Open Source search engine that gives you the most accurate results even after spelling mistakes or typos. It is simple to use and an Open Source alternative to Algolia and ElasticSearch. It displays synonyms of results, uses dynamic sorting, groups all your searches into a single search, and gives you the power to filter the search as per your preference.

Read this excellent article, A Beginner's Journey to Typesense Dashboard, or visit their official website for More info.

Mobile Security Framework ( MobSF ) - All In One Mobile Application.

Cyber-attack is when hackers attack your personal or professional device, steal all your data, and use it for any crime. A tool that helps keep all your data secure is called Mobile Security Framework (MobSF), an Open Source tool used for automated analysis of an APK.

It is straightforward to install, ready to analyze security on multiple mobile platforms like Android, iOS, and even Windows, and also has a graphic interface that is more engaging,

For More info, you read this excellent article Mobile Security Assessment for Android, iOS, and Windows, or visit their official website.

Chatwoot - The Better Way To Talk to Your Customers.

Imagine you start your startup, and you get a lot of messages through the mail, telegram, Twitter, and other platforms, and you get tired of replying to all the messages, and sometimes you don't even respond to some messages.

Not replying to the message makes a wrong impression of your company, so to get rid of this problem,Chatwoot will help you to communicate with your customer effectively.

Chatwoot is Open-Source Software that integrates with all your social media platforms in a single dashboard so that you can connect with your customers in one place. Sometimes some users have simple questions and don't need to wait until you see a message to answer. If you enable Chatwoot's Live Chat, Chatwoot contacts him immediately, which will make a good impression on your startup.

For More info, you read this excellent article Why Chatwoot is My Favorite Open Source Project? Integrations, Integrations, and Integrations or visit their official website.

Hoppscotch - API Development System

API is every developer's best friend. Working with API is like eating food every day. A few years ago, working with APIs was much harder than it is today. It took the developer a long time to complete the test of the API.

The Hoppscotch API makes it easy to work with. The Open-Source Software API development ecosystem simplifies creating, using, and testing APIs with a beautiful User Interface.

For More info, you read this excellent article How to Test Your API with Hoppscotch or visit their official website).

For Full Article, visit Aviyel

What is React Prop Drilling and Context API

Rishav Raj — Wed, 15 Sep 2021 09:00:40 +0000

Before starting this blog, I assume that you all should have basic knowledge about React.
In this blog we are going to learn one of the best concept of React - Prop Drilling and Context API.

Introduction

Prop drilling is a method where we pass a props with another component with the help of all the components that come between them.

Let us understand with a real life example.

Imagine you are in school and you are sitting on the last bench and your best friend is sitting on the first bench. Suddenly your best friend needs a pen and you have a spare pen and you want to give that pen to your best friend. For this, ask your friend sitting on your next bench to take the pen and forward it to the next one and said that repeat this until the pen reaches your friend.

Here you can see how he gives a pen to his best friend with the help of another bench.
In React also if we want to pass props to any other component then we have to pass props to all the components which come between them and This whole process is known as React Prop Drilling.

Now come and understand all these things with the help of code.

import React, { useState } from "react";

//FIRST COMPONENT
const LastBench = () => {
  const [penName, setPenName] = useState("Blue Gel Pen");
  return (
    <>
      <h1>Hello I am Last Bench</h1>
    </>
  );
};

//SECOND COMPONENT
const NextBench = () => {
  return (
    <>
      <h1>Hello I am Next Bench.</h1>
    </>
  );
};

//THIRD COMPONENT
const FirstBench = () => {
  return (
    <>
      <h1>Hey I am First Bench</h1>
    </>
  );
};

export default LastBench;

In the above code you see that we create 3 components. In the first component we declare a pen name with the help of useState hook. Now we have to pass the pen name to the last component with the help of second component

import React, { useState } from "react";

//FIRST COMPONENT

const LastBench = () => {
  const [penName, setPenName] = useState("Blue Gel Pen");
  return (
    <>
      <h1>Hello I am Last Bench</h1>
      <br />
      <NextBench penName={penName} />
    </>
  );
};

//SECOND COMPONENT
const NextBench = ({ penName }) => {
  return (
    <>
      <h1>Hello I am Next Bench.</h1>
      <FirstBench penName={penName} />
    </>
  );
};

//THIRD COMPONENT
const FirstBench = () => {
  return (
    <>
      <h1>Hey I am First Bench</h1>
    </>
  );
};

export default LastBench;

We call second component in first component then we pass props with penName And then we repeat all these things in second component. We call the last component, then we pass the props named penName.

import React, { useState } from "react";

//FIRST COMPONENT

const LastBench = () => {
  const [penName, setPenName] = useState("Blue Gel Pen");
  return (
    <>
      <h1>Hello I am Last Bench</h1>
      <br />
      <NextBench penName={penName} />
    </>
  );
};

//SECOND COMPONENT
const NextBench = ({ penName }) => {
  return (
    <>
      <h1>Hello I am Next Bench.</h1>
      <FirstBench penName={penName} />
    </>
  );
};

//THIRD COMPONENT
const FirstBench = ({ penName }) => {
  return (
    <>
      <h1>Hey I am First Bench</h1>
      <h4>{penName} Here i got My Pen</h4>
    </>
  );
};

export default LastBench;

Now You can see Above code we Finally use props in last component which we declared in first component. In second component we have passed props now we can use that props in third component.

This is how React Prop Drilling Work.

But you can see in the code that the props we use in second components are useless. They don't need that props, but we pass that props for use in the third component.

It's just like you bother the next bench to pass the pen to the first bench.

To avoid all this, we use the Context API. It works like you called the teacher and requested him/her to give this pen to his friend who are sitting on the first bench.

Now let's refactor the above code with the Context API and the useContext hook.

We have to create an object with React.createContext() in global. Each context object comes with a provider component that assigns a value to the context object. To add that value we have to pass "value" attribute with them

import React, { useState, useContext } from "react";

//FIRST COMPONENT
const TeacherContext = React.createContext();
const LastBench = () => {
  const [penName, setPenName] = useState("Blue Gel Pen");
  return (
    <>
      <h1>Hello I am Last Bench</h1>
      <br />
      <TeacherContext.Provider value={{ penName }}>
        <NextBench />
      </TeacherContext.Provider>
    </>
  );
};

//SECOND COMPONENT
const NextBench = () => {
  return (
    <>
      <h1>Hello I am Next Bench.</h1>
      <FirstBench />
    </>
  );
};

//THIRD COMPONENT
const FirstBench = () => {

  return (
    <>
      <h1>Hey I am First Bench</h1>
      <h4>Here i got My Pen</h4>
    </>
  );
};

export default LastBench;

In above code you see that we create an object named TeacherContext with the help of React.createContext() and use that object with Provider component with value attribute in first component, where we create a props with name PenName.
Now we need to pass the props to our last component directly. For that we need "useContext" keyword.

import React, { useState, useContext } from "react";

//FIRST COMPONENT
const TeacherContext = React.createContext();
const LastBench = () => {
  const [penName, setPenName] = useState("Blue Gel Pen");
  return (
    <>
      <h1>Hello I am Last Bench</h1>
      <br />
      <TeacherContext.Provider value={{ penName }}>
        <NextBench />
      </TeacherContext.Provider>
    </>
  );
};

//SECOND COMPONENT
const NextBench = () => {
  return (
    <>
      <h1>Hello I am Next Bench.</h1>
      <FirstBench />
    </>
  );
};

//THIRD COMPONENT
const FirstBench = () => {
  const { penName } = useContext(TeacherContext);
  return (
    <>
      <h1>Hey I am First Bench</h1>
      <h4>{penName} Here i got My Pen</h4>
    </>
  );
};

export default LastBench;

We can see in the above code that the “useContext” keyword will make the first component props available to the last component and in last we use that prop in our component.

Conclusion

We pass the value of the first component to the last component without disturbing the other components with using useContext hook.

Let's Connect With Me

Thank You for reading this blog 😀
I hope all of you have benefited after reading this blog 🎉
Do Share it with your friends and family and get them benefit from it too 🧡👍
Here You Connect with me https://connect.rishavraj.codes/

Make Your First Website Using HTML & CSS - Basic of Web Development .

Rishav Raj — Sun, 27 Jun 2021 17:33:37 +0000

Introduction

Web development is the work involved in developing a Web site for the Internet (World Wide Web). From building a personal website to building a social media web app, everything is a web development work and HTML and CSS are the beginning of everything you need to know to make your first web page.

At the end of this blog, your first personal portfolio website will be ready.

Setup Our Project

First we need to set our project folder in our PC and after creating the folder we open that folder in any IDE (in my case I use VS Code), you can choose whatever you want. After opening the folder in IDE, we need to create files with .html extension for HTML file and .css for CSS file.

VS-Code

or you may choose online IDE like codepen.io.

Codepen.io

Let's Start Our Project

Introduction of HTML

HTML is the hypertext markup language used to create the website structure and its content. Headlines, paragraphs, tables, links, images in a website are all done with HTML.
Let's understand from code, open your project on IDE and in HTML file, write this code and open in your browser( right click and click Open in browser ).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, 
    initial-scale=1.0"
    />
    <title>Rishav Raj || Portfolio</title>
  </head>
  <body>
    <div>
      <h1>Hello 👋, I am Rishav Raj</h1>
      <h3>Front-End Web Developer || Passionate Coder ||
         Volunteer</h3>
      <p>
        I know how to write code and 
        want to become an awesome Programmer
         and Developer. 
         I am currently learning Front-End Web Development.
         l ❤ to  play with CSS and JAVASCRIPT. 
        I ❤ to Write Code in JavaScript, Python,
        and C++ .
      </p>
      <h1>Education</h1>
      <table>
        <tr>
          <th>Degree</th>
          <th>College</th>
          <th>Year</th>
        </tr>
        <tr>
          <td>Bachelor's Degree in Mechanical Engineering</td>
          <td>BIT Mesra</td>
          <td>2019-Present</td>
        </tr>
        <tr>
          <td>Intermediate Degree</td>
          <td>R.L.S.Y. College, Anisabad,Patna</td>
          <td>2016-2019</td>
        </tr>
      </table>
      <h1>My Hobby</h1>
      <ul>
        <li>Photgraphy</li>
        <li>Reading</li>
        <li>Coding</li>
      </ul>
      <div class="contact">
        <h2>Connect With Me</h2>
        <button id="fb">
          <a href="https://www.facebook.com/iamrishavraj1/">
            Follow me on Facebook
          </a>
        </button>
        <button id="link">
          <a href="https://www.linkedin.com/in/iamrishavraj1/">
            Follow me on Linkedin
          </a>
        </button>
        <button id="git">
          <a href="https://github.com/iamrishavraj1/"> 
            Follow me on Github </a>
        </button>
      </div>
    </div>
  </body>
</html>

This is what it looks like when opened in a browser 👇

Start with <!DOCTYPE html> This declaration defines that this document is an HTML5 document. HTML & HTML 5 both are same. HTML 5 are just updated version of HTML.
<html lang="en"> This declaration defines to declare the language of the Web page.
<head> The element contains meta information about the HTML page.
<meta> Meta data may be used by browsers (content or methods of page reloading), search engines (keywords), or other web services, including keywords for page information, the author of the document, last modified, and metadata.
<title> title element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab). Using JavaScript you can change the title dynamically.
<body> body tag is the main part or element of HTML document. It contain text content, paragraphs, headings, images, tables, links, videos, etc.
Now, in body tag we struct all the parts of website.

Now, let's start building our website structure. we start from heading, in HTML heading define with <h1> to <h6> tag.

<h1> define most important heading or largest font size heading and <h6> is for least important heading or smallest font size heading. After creating heading with <h1> to <h6> tag, now we move to paragraph where we use <p> tag to create paragraph in HTML.

Above code you see that we put a heading in <div> tag.
The <div> tag is also known as the division tag, it makes it easy to create different divisions for websites like navbar, header, sidebar and footer etc.

I used <h1> tag for main title and <h3> tag for sub-heading, After title you see there is <p> tag which is used for paragraph.
Now after heading and paragraph let us see how we create table in HTML, as you see in the code i have again used <h1> tag for education title and after that i have used <table> tag which is used to create a table in HTML. In <table> tag we use <tr> tag which defines table row where we write our data, In the first <tr> tag we use <th> tag which defines the table title, we add three titles in the first <tr> tag (degree, college, year), after that we put a content according to its title in the next <tr> tag and In the second <tr> tag we use the <td> tag which defines the data cell in the HTML table. There are two types of cells in HTML table, first- header cell (<tr>) and second is data cell (<td>). According to our table header we put our data in the data cell.

Now after completing our table we move on to learn about unordered list and ordered list.
To create a list we have to use <ul> tag or <ol> tag which defines the order of the list. <ul> defines an unordered list (bullet) for a list (collection of items) with no numeric or alphabetical order and <ol> defines an ordered list which means that the collection of data (list) is numerically or alphabetically.

Now we come to our last part of our website where we create our contact section where people can click on buttons to find you in different social media. Yes it is possible using HTML where people click on a button and that button send that user to your social media page.

To create a button we use the <button> tag which defines a clickable button. In button we can put different HTML tags or texts. In this project we put anchor tag <a> tag that defines a hyperlink that links one page to another. In this anchor tag we will put social media link then when people click on button then that tag will take them directly to that page.

Now we are finally done with our HTML code 👇 , as earlier we have learned that HTML only forms the structure of our website but currently our website is not looking good so to beautify our website we need to use CSS What needs to be done is to make our website look good by giving it some color, margin and padding etc.

Introduction of CSS

CSS stands for Cascading Style Sheet , it is a style sheet language used to stylize our website by selecting HTML elements by adding colors, layouts and fonts. It also helps in adapting the presentation to different devices like large screen, small screen.

The rules for declaring CSS

We have to choose which HTML elements we want to style, that element is called selector. we can select that element directly but when we need to select some specific section to style then we create a class or id for the element then we select that class or id and then style them. To create a class or id we need to add class attribute or id attribute to the html element.

For Adding Class

<h1 class="className">Hello HTML Class Attribute</h1>
Here class attribute is appended to the starting tag of <h1> with equal sign (=) and after = we add class name under quotation mark.

For Adding Id

<h1 id="idName">Hello HTML Id Attribute</h1>
Here class attribute is appended to the starting tag of <h1> with equal sign (=) and after = we add id name under quotation mark.

After selecting a selector we open the curly brace, then we add the properties we want to style such as color, font, border, etc. Then we add the colon right after the property and then we add the value for that property, then end with a semicolon and the close curly brace.

CSS can be added to HTML in 3 ways - 1. Inline CSS , 2. Internal CSS, 3. External CSS.

1. Inline Css

<h1 style="color:red;">Hello World !</h1>
To use inline css in html we need to use <style> attribute. HTML attributes are special words used inside the opening tag to control the element's behaviour.

2. Internal CSS

<head>
<style>
body {
background-color: powderblue;
}
h1{
color: blue;
}
p{
color: red;
}
</style>
</head>

Usually we use internal CSS when we make a one page website. It is defined with a style element under the <head> tag.

3. External CSS

For external css we create a new file with extension .css and link that page to html using link attribute. It is generally good practice to use external CSS and generate clean code as well.
After creating the css file we can simply add the style with css.

body {
  background-color: rgb(255, 232, 155);
  text-align: center;
  margin-top: 6%;
}
p {
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
}

Now we have to add the css file to our portfolio website, after adding the css file our website looks like this👇

Previously we finished the HTML part, now we have to add the CSS, To add the css file we create a css external file named style.css then we have to link that page with html. For links we have to use <link> attribute in <head> tag. After creating style.css file we start our styling.

body {
  background-color: rgb(255, 232, 155);
  text-align: center;
  margin-top: 6%;
}
p {
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
}
a {
  text-decoration: none;
  color: #fff;
}

ul {
  list-style-type: none;
}

table,
th,
td {
  background-color: #fff;
  margin-left: 28%;
  border: 1px solid black;
  padding: 10px;
}

button {
  padding: 10px;
}

#fb {
  background-color: #3b5998;
}

#link {
  background-color: #0077b5;
}

#git {
  background-color: #333;
}

Lets understand the above css code, first we style our body with some background color for that we use CSS background-color property with value rgb(255, 232, 155) or you can write your favorite color code or name.
After styling the background color, we now style our text position, for this we use the CSS text-align property with a value of center or you can choose different values (left, right, etc).
Now we style the margins with CSS margin-top property with a value of 6%, the margin-top property creates margins only from the top, if we only use the margin property they create margins from all sides.

body {
  background-color: rgb(255, 232, 155);
  text-align: center;
  margin-top: 6%;
}

Now we style the paragraph from selecting a <p> tag with CSS font-family property with a value of "Courier New", Courier, monospace, the font-family property changes the font style of paragraph, after styling the font style now we also style the size of font with CSS font-size property with value 20px.

p {
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
}

Now we style anchor tag with CSS text-decoration property by selecting <a> tag with value of none, anchor tag already has some default styling so anchor tag remove all default style from text-decoration with value none property, after removing default style from anchor tag we change CSS color property to '#fff'(white color).

a {
  text-decoration: none;
  color: #fff;
}

Now we style unordered list tag with CSS list-style-type property by selecting <ul> tag with value of none, when we use <ul> tag then it provide bullets style in list so for removing bullets style we use list-style-type property with none value.

ul {
  list-style-type: none;
}

Now we style the table and their cells with CSS border property by selecting <table> , <th>,<td> tag with value of 1px solid black. When we create a table with HTML elements it doesn't look like a table because they have no borders so we use border property to create borders in tables and their cells. We use a 1px solid #0000 value for the Border property. 1px defines the width of the border, solid defines the style of the border, and #000 defines the color of the border. After creating border the table and their cells look good but all elements are so close to border, for giving space we use CSS padding property with value of 10px that gives space of 10px from all sides.

table,
th,
td {
  background-color: #fff;
  margin-left: 28%;
  border: 1px solid black;
  padding: 10px;
}

Finally we style our buttons with background-color and padding. Here we use id to give some unique style to each button.

button {
  padding: 10px;
}

#fb {
  background-color: #3b5998;
}

#link {
  background-color: #0077b5;
}

#git {
  background-color: #333;
}

Our Final Website

This is just a basic introduction to web development. Web development is much more than that. To go into the depth of web development, you have to learn all the basic fundamentals first and then move on.

Let's Connect With Me

Thank You for reading this blog 😀
I hope all of you have benefited after reading this blog 🎉
Do Share it with your friends and family and get them benefit from it too 🧡👍
Here You Connect with me https://connect.rishavraj.codes/

Function in Every Programming Language

Rishav Raj — Thu, 18 Mar 2021 16:01:35 +0000

What is Function?

In Simple Word, The Function is a block of code that we reuse at any time by calling them by their name.

Why we Need Function?

Imagine that you are a robot. And you work according to the code written by your boss.

Your boss need a milk in the morning, so they give you an introduction to buying milk from the shop then come back to home. For this, they write lots of lines of code.

Example

1. Go to Market

move()
moveUp()
moveUp()
moveRight()
moveRight()

2. Come back to Home

move()
move()
move()
moveDown()
moveDown()
moveRight()

In above, you see that the same code is being repeated multiple times, and this is not a good way to writing a code. Every good programmer uses the DRY (Don't Repeat Yourself) rule to write code.

And the other problem is that your boss needs milk every day, so they will give you introduction daily to go and a buy milk, for this they have to write the same code every day. But it will take a lot of time and a lot of hard work.

Time to use Superpower

Now is the time to understand how the superpower Function works and how it helps your boss avoid writing the same lines of code again and again.

To use a function, we need to define the function first, after that we have to the call the function name to run the code written in function body.

Defining a Function

Before using a Function we should define the Function first. Here I am using JavaScript to define the function. If you don't know JavaScript, don't worry after knowing the concept you can use the function in any other programming language. The syntax is different in other programming languages but all concepts are the same.

Different programming languages name them differently, for example, functions, methods, sub-routines,etc.

The important thing is that you should know the concept of the Function.

Declaring Function Keyword and Function Name

Here you see that I have used the function keyword to define a Function which is a reserved keyword in JavaScript, in other programming languages the keyword may be different.

After writing the function keyword, I declare the function name. You can declare any name according to your code or project.

Parameter List and Function Body

After declaring the function keyword and function name you saw the bracket after the function name in that bracket we pass the value name as a Parameter.

Example

In your case your boss sometimes needs a different items from the shop, so they saved the parameter name as an item and itemQuantity so that they can change the value of the item and their quantity according to their need when the function is called.

Calling a Function

After defining the function and writing the code of instructions to be given to the robot, we now have to call it to use the function.

Here you see that we call the function by its name and pass the values of the parameters that we have defined earlier.

The value we write after the name of the function is called the argument. You can change the values according to your need.

Final Code

Output

move
moveUp
moveUp
moveRight
moveRight
Stop
Go and Buy 2 litre milk.

Now, you have completed the code using the function. From the above example your boss needs one milk every day, so now they write the code using the function and call the function to work according to the instructions given in the code.
Your boss can change the item according to his requirement by changing the values in arguments like orange juice instead of milk.

Example

Output

move
moveUp
moveUp
moveRight
moveRight
Stop
Go and Buy 2 litre orange juice.

Congratulations 🎉

You have understood the concept of the Function now. So you can use this concept in any programming language and like every good programmer in the world, you can also apply DRY rules in your code.

Keep Coding 👨‍💻

Let us see how a function is defined in another programming language.

In Python

def goToMarket(item,itemQuantity):
    print("move")
    print("moveUp")
    print("moveUp")
    print("moveRight")
    print("moveRight")
    print("Stop")
    print(f"Go and Buy {item} {itemQuantity} litre .")
goToMarket("orange Juice", 2)

In Java

public class Main {
  static void myMethod(String item, int itemQuantity) {
    System.out.println("move");
    System.out.println("moveUp");
    System.out.println("moveUp");
    System.out.println("moveRight");
    System.out.println("moveRight");
    System.out.println("Stop");
    System.out.println("Go and Buy " + item + " " + 
itemQuantity + " " + "Litre");
  }
 public static void main(String[] args) {
    myMethod("orange Juice", 2);
  }
}

Let's Connect With Me

Thank You for reading this blog 😀
I hope all of you have benefited after reading this blog 🎉
Do Share it with your friends and family and get them benefit from it too 🧡👍

Here You Connect with me https://connect.rishavraj.codes/

Remote Control Your Projects Using Git

Rishav Raj — Mon, 08 Mar 2021 16:49:42 +0000

Has this happened to you?

You write a code yesterday that works properly and today you change the code and it doesn't work and you don't remember what code you wrote yesterday.

So to deal with this problem, many developers and programmers use Git version control.

What is git?

Git is a software for tracking changes in any set of files, usually used for coordinating work among programmers, collaboratively developing source code doing software development.

Getting Started

To get started with Git, you need to download it to your machine. Head over to https://git-scm.com/ and download the version most compatible with your system.

After installation, Open Command Terminal or git bash and write command

git --version

for checking that git is install perfectly or not.

Setup Username and Email.

In Command Line, Write

For Saving Username

git config --global user.name "User Name"

For Saving Email id

git config --global user.email "email"

Now it is time to learn how we can remote control our project using git.

In Command Line, Navigate to the Project Directory you want to control for that use standard cd command.

cd directory name

Initialize git.

Now the time has come to initialize git in our working directory.
for initialize git, use command

git init

Now You Can Check Your Project Status.

Using Command

git status

Here you are seeing that after entering

git status

the message shows that all the files in the directory are untracked.
In my case, there is an index.js file in my directory.

Adding

For Start Tracking the file use

git add "file name"

After Adding the file in Track You can check the status using

git status

Here, You can see that the current status message is different from the previous status message and the color of file name is changed from red to green. This means that your file has been added for tracking.

Committing the message.

Imagine that you work in a team where 3 or 4 people are working together in the same project. Now you add some functions to your project and forget to inform your teammates about your changes, Or you also forget which function you added last time. So you can use command for committing the changes.

git commit -m "Message"

Difference B/W Previous and Current Changes.

By using the git command we can see the difference between the previous changes from current changes.

git diff

Using this command You can see the difference

History

We can check all commit history using

git log

Here, We can see all commit history with date and time.

Thank You for reading this blog 😀
I hope all of you have benefited after reading this blog 🎉
Here You Connect with me https://connect.rishavraj.codes/