DEV Community: Mayank Kumar

What is 'this' ? 😳

Mayank Kumar — Tue, 31 Aug 2021 07:09:16 +0000

This 😭

The this keyword can lead to some headaches in JavaScript - this blog hopefully acts as a remedy.

this refers to different things, depending on where it's used and how (if used in a function) a function is called !

Generally, this refers to the "thing" which called a function. That can be the global context, an object or some bound data/ object (e.g. when the browser binds this to the button that triggered a click event).

1) this in Global Context (i.e. outside of any function)

function something() { ... }

console.log(this);

// logs global object (window in browser) - ALWAYS (also in strict mode)! 🙌

2) this in a Function (non-Arrow) - Called in the global context

function something() { 
    console.log(this);
}

something();

// logs global object (window in browser) in non-strict mode, undefined in strict mode 🙌

3) this in an Arrow-Function - Called in the global context

const something = () => { 
    console.log(this);
}

something();

// logs global object (window in browser) - ALWAYS (also in strict mode)! 🙌

4) this in a Method (non-Arrow) - Called on an object

const person = { 
    name: 'Mayank',
    greet: function() { // or use method shorthand: greet() { ... }
        console.log(this.name);
    }
};

person.greet();

// logs 'Max', "this" refers to the person object 🙌

5) this in a Method (Arrow Function) - Called on an object

const person = { 
    name: 'Max',
    greet: () => {
        console.log(this.name);
    }
};

person.greet();

// logs nothing (or some global name on window object), "this" refers to global (window) object, even in strict mode 🙌

If in doubt, a console.log(this); can always help you find out what this is referring to at the moment!

HAPPY CODING 👨‍💻

What is Parcel JS ? 📦

Mayank Kumar — Mon, 16 Aug 2021 06:18:36 +0000

First of all we will start by understanding What is a Module Bundler ?

A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser. You may have used tools such as Browserify, Webpack, Rollup or one of many others.

Today we will only be discussing about Parcel JS

What is Parcel JS and why should we use it over Webpack or Rollup ??

Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.



yarn global add parcel-bundler

Many front-end developers have become frustrated with some of the complexities involved with building web apps today. It’s pretty standard practice to include some kind of build or bundling tool in a front-end workflow, thus many developers have looked into using a front-end tool like webpack/Rollup/Parcel.

But the learning curve for a tool like webpack is steep. Getting started with webpack isn’t easy due to its complex configurations.

This is where Parcel JS Kicks in !!! 🚀

Parcel.js is exactly what many newbie developers want, A simple, low-configuration bundler that you can get up and running with quickly without much hustle in learning the tool.

If you want to go in depth about Parcel JS and how to use it in your project check this documentation out form is official website

Parcel JS 📦🚀

Meme:

HAPPY CODING 🚀🥂

JS Array Methods ! 🐱‍🏍

Mayank Kumar — Mon, 09 Aug 2021 07:08:06 +0000

WHAT IS A JS ARRAY ?

The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.

Arrays provide a lot of methods. To make things easier.

We will be talking about 4 Array Methods :

1.map

2.filter

3.sort

4.reduce

1) Array.prototype.map()

So the basic need for using the map() method is to modify a given data, the map() method creates a new array populated with the results of calling a provided function on every element in the calling array. it return the same amount of data passed by the array but in a modified form

const inventors = [
        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }

const fullName = inventors.map(
        inventor => `${inventor.first} ${inventor.last}`
      );
      console.log(fullName); // it returns the full name of the inventors using the map method

2) Array.prototype.filter()

So the basic need for using the filter() method is to filter out a given data, the filter() method creates a new array with all elements that pass the test implemented by the provided function.
Its returns the filtered arrays which might not include every element you have passed init.

const inventors = [
        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }

 const filter = inventors.filter(
        inventor => inventor.year >= 1500 && inventor.year <= 1599
      );
      console.table(filter); // filter helps us here to filter out the list of inventors year dates

3) Array.prototype.sort()

So the basic need for using the sort() method is to sort out a given data, the sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending. It will return the same amount of data that has been passed !

const inventors = [
        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }

const sorted = inventors.sort((a, b) => (a.passed > b.passed ? 1 : -1));
      console.table(sorted); // this method helps with the sorting of the results/arrays

3) Array.prototype.reduce()

So the basic need for using the reduce() method is to sort out a given data, the reduce() method executes a reducer function i.e (that you provide) on each element of the array, resulting in a single output value, It returns a single value.

const inventors = [
        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }

 const total = inventors.reduce((total, inventor) => {
        return total + (inventor.passed - inventor.year);
      }, 0); // this method helps us to calculate the total number of years that were lived by the inventors using the reduce method
      console.log(total);

Some more JS Array Methods are:-

That's IT

This Blog was inspired was Wes Bos JavaScript30 course

BONUS MEME

HAPPY CODING 🚀

What is D3.js ?

Mayank Kumar — Mon, 02 Aug 2021 06:41:26 +0000

As a developers I really love data, and that too in a arranged manner.

Sometimes Data can be such a mess, that it becomes more of a headache that a resource, with data we can solve so many problem in our day to day life.

D3.js can help us here

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 stands for Data-Driven Documents

The full form explains itself, its is a library, which helps us in making graphs, charts, projections form just a set of data.

Installation

 <script src="https://d3js.org/d3.v7.min.js"></script>

Now lets get into some coding examples:

d3.selectAll(); //this is used to select all the elements given inside the parenthesis

d3.select(); // this is used to select just a particular element
//inside the parenthesis 

d3.select('h1')
  .style('color', 'red') // this takes the h1 tag from the html and converts it into red color;
  .text('hi there'); // this changes the text in the html to the given string

d3.select('body').append('p').text('YOLO'); // this appends the text to the p tag in the body
d3.select('body').append('p').text('YOLO');
d3.select('body').append('p').text('YOLO');
d3.select('body').append('p').text('YOLO');

d3.selectAll('p').style('color', 'blue'); // this snippet is used to select all the p tags and change their color to blue

These are the basics way we can manipulate the Data inside the JS using the D3.js library

To get more depth knowledge on this topic go and check this video form FreeCodeCamp.org on their YouTube channel

Meme Section:

Happy Coding 🚀👨‍💻

Inbuilt Functions in C++ for Strings 🐱‍👤

Mayank Kumar — Sun, 25 Jul 2021 20:02:59 +0000

So in this blog post I will be talking about some of the few inbuilt functions in CPP in string (C++)

The function in C++ language is also known as procedure or subroutine in other programming languages.

To perform any task, we can create function. A function can be called many times. It provides modularity and code reusability.

As we all know C++ is a language that has a rich and vast library, some of which are :-

1) Length Function:

Here with the use of this function we can find out the length of a particular array !!

Syntax: strlen(str);

Here in the following image the strlen is the main function that we are using to find out the length of the particular string.

2) Compare Function:

Here with the use of this function we can compare the lengths of two different arrays !!

Syntax: strncmp(str1, str2);

Here in the following image the strcmp is the main function that we are using to compare any two arrays, it takes 2 parameters and compare them if the comparison is equal to 0 then the strings are equal other wise they are not equal.

3) String Copy Function:

Here with the use of this function we can copy one arrays into another array !!

Syntax: strcpy(destination_str, source_str);

Here in the following image the strcpy is the main function that we are using to copy the data of one element into another array, it takes 2 parameters and copy the data of the later parameter in the first array.

4) String n Copy Function:

Here with the use of this function we can copy some elements of one arrays into another array !!

Syntax: strncpy(destination_str, source_str);

Here in the following image the strncpy is the main function that we are using to copy some elements of an array into another array, it takes 2 parameters and copy the data of the later parameter in the first array.

5) String Concatenate Function:

Here with the use of this function we can concatenate both of the arrays !!

Syntax: strcat(str1, str2);

Here in the following image the strcat is the main function that we are using to concatenate both of the arrays.

----------------------------------x-------------------------------

Enough for today, now its time for some meme 😎

Happy Coding 🚀

JSX !

Mayank Kumar — Sun, 18 Jul 2021 20:39:59 +0000

So first of all let me tell you what actually is a JSX !

A JSX(JavaScript XML) is a syntax extension to JavaScript. It is used with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Here is an Example :

const element = <h1>Hello, world!</h1>;

It is pretty similar to HTML syntax. 🐱‍👤

Why do we need JSX ??

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. ~ React 😎

This is what was said by react developers when it was first announced, in my opinion this is a very useful syntax extension to JavaScript, it has made things very easy to configure and manage in a very large code base.
It makes it easier for us to create templates.

The main difference between HTML and JSX 🤯

1) HTML is a Hypertext Markup Language, the standard markup language for documents designed to display and view on the web in a web browser.

2) JSX JSX (JavaScript + XML) is an extension of JavaScript that permits you to write down HTML directly within JavaScript

3) HTML elements have attributes where as JSX elements have props.

Attributes in JSX

JSX allows us to use attributes with the HTML elements just like we do with normal HTML. But instead of the normal naming convention of HTML, JSX uses camelCase convention for attributes

THIS WAS A BASIC PREVIEW OF WHAT IS THE MAIN USE OF JSX, IF YOU WANT TO GO IN DEPTH OF THIS TOPIC THEN CHECK OUT THE FOLLOWING BLOG

https://reactjs.org/docs/introducing-jsx.html

Bonus Meme 😂

Happy Coding 🚀

Rest v/s GraphQL !

Mayank Kumar — Sun, 11 Jul 2021 22:52:45 +0000

First of all let me tell you what is a Rest and GraphQL !

REST(Representational State Transfer) and GraphQL are two API design styles that serve the same purpose: transferring data over internet protocols including HTTP. However, REST is an architectural pattern, whereas GraphQL is a query language

1) Rest has Multiple End points, where as GraphQL has one endpoint !

2) Both generally give the Data back in JSON format

3) Both are Stateless:
Statelessness means that every HTTP request happens in complete isolation. When the client makes an HTTP request, it includes all information necessary for the server to fulfill that request. The server never relies on information from previous requests.

4) Rest APIs are more flexible, whereas GraphQL only works with POST !

5) In GraphQL you can be more detailed about the kind of data you want to fetch, but thing is not applicable in REST APIs as it fetches all the data available

6) In REST because of its tendency to pull all the data it brings a huge amount of data which is unnecessary to the client !

In total in my opinion both have their own benefits, if you are new to APIs, then go with REST APIs
If you are running a massive project then go for GraphQL.

All the things you need to know about the GitHub Copilot !

Mayank Kumar — Sun, 04 Jul 2021 17:10:33 +0000

Q. So what is GitHub Copilot ?
Q. Will it replace the developers with AI machines ?
Q. Is it the start of the end?

There can be many kind of things that you can say about it, here I can be a pragmatic man and say that its gonna take developer's jobs and I don't know one day it might even happen !!

But its nothing happening anytime soon that's for sure !!
So don't worry you and your jobs are secure.

But lets know what actually is GitHub Copilot !

So Its is a AI based application that predicts your code by just reading the function name you have declared, it actually works by reading through all the open source code on the GitHub repos worldwide and then collect the data and tries to find the best possible code related to it !

This Application is being developed by a company called Open AI. If you have ever used Kite/Tabnine as a AI extension in your IDE, you might have a slight idea about how the GitHub copilot works.

As far as I know the GitHub copilot works on the algorithm GPT-3

It is currently the one of "The" best algorithm in AI right now in the world if not the best.

At the end, I don't think its really that much threating right now, but you never know moving forward what does the future hold for you, in my opinion this AI based application will take a while to get really good at getting every code to the mark.

So Chill and keep CODING.

HAPPY CODING 🚀

What is BIG O notation ?

Mayank Kumar — Mon, 28 Jun 2021 09:07:50 +0000

What is Big O notation ?

Ans:

No No, I am not talking about this Big O 😂😂

So in the field of programming, One of the most important things that you have to know is that how to make your code efficient, and by efficient I mean readable and scalable!

To measure how good a code is we use the BIG O NOTATION

What is Big O notation ?

Big O notation is a mathematical notation that describes the limiting behavior of a function when the argument tends towards a particular value or infinity. Big O is a member of a family of notations invented by Paul Bachmann, Edmund Landau, and others collectively called Bachmann–Landau notation or asymptotic notation.

As in the given figure, there are a total of 7 types of Big O notations:

1) O(1) Constant- no loops

2) O(log N) Logarithmic- usually searching algorithms have log n
if they are sorted (Binary Search)

3) O(n) Linear- for loops, while loops through n items

4) O(n log(n)) Log-Linear- usually sorting operations

5) O(n^2) Quadratic- every element in a collection needs to be compared to every other element. Two
nested loops

6) O(2^n) Exponential- recursive algorithms that solve a problem of size N

7) O(n!) Factorial- you are adding a loop for every element

Mayank

@mayankthakurrr

Kinds of Big O notations:-

A Thread 🧵👇
#Datastructure #ALGO #BigO

12:26 PM - 27 Jun 2021

As given in the graph the best notation to use is the O(1) or O(log n) and on the other hand the worst one to use is O(n!)

As a Developer, you need to be able to find which notation will save you the best amount of time as well as be readable to other developers. If you are able to do this you will be a superstar at your company !!!!

Happy Coding 🚀

Things you should master before you jump on React.js !!

Mayank Kumar — Sat, 26 Jun 2021 08:45:30 +0000

What is React.js ??

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript, this is a must. Even if you have basic understanding about that its enough to get started in React.js

Basic understanding of ES6/ES7 features of Javascript.

To get started you should at least know the following features:
a. Let
b. Const
c. Classes
d. Arrow functions
e. Imports and Exports

Basic understanding of how to use npm/yarn.

These 3 things are the most important things you should know to get stared with React.js

If you have a good understanding about these things you are pretty good to get started in the React.js world,

I would like to give you one more tip that is that never doubt you self by looking at someone's success, believe in you self and learn and try to beat yourself everyday! with time you will get better in it.

Happy Coding 🚀

Best TV shows/Documentaries for tech geeks & Entrepreneurs 🎞

Mayank Kumar — Fri, 04 Dec 2020 19:46:54 +0000

As a tech lover, you’ll find dozens of documentaries that you can stream over your television, computer, tablet, or even phone. These films discuss some of the top names in the industry as well as major innovations over the years

1. Silicon Valley

The show chronicles the journey of a few engineers who are running a startup as they try to navigate Silicon Valley, investors, and the many clichés that are involved with startup culture.

2. Mr. Robot

The show follows the footsteps of Elliot Alderson, a cybersecurity engineer in a cybersecurity firm ‘Allsafe’ by day and vigilante hacker operating from his computer, apprehending no-gooders by night. Elliot struggles with social interactions because of his Chronic Depression and Social Anxiety but he persists with zeal to follow through with his plans.

3. The Social Network

The thing I love about The Social Network is, the flow of the movie resonates with the characters it depicts. The movie proceeds with a breakneck pace, is raw, visceral, and restless, much like its characters. Another reason why the movie works is Impeccable casting. Jesse Eisenberg playing Mark Zuckerberg with an air of arrogance nails it. Andrew Garfield is the most likable character in the movie, as Eduardo Saverin. No one could have played Sean Parker like Justin Timberlake, and Armie Hammer playing the Winklevoss twins is fantastic too.

4. Steve Jobs: The Man in the Machine

The documentary “Steve Jobs: The Man in the Machine” captures, in its succinct subtitle, the contradictions inherent in its subject. Jobs, who founded Apple Computer with his friend Steve Wozniak in 1976, is presented as both brilliant and abrasive: a driven and at times deceitful tyrant whose firm made some of the most beautifully designed consumer electronics of the past couple of decades.

5. The Founder

I Never heard the original McDonalds story before, so the movie kind of left me in shock by the end of it. All the actors and especially Michael Keaton portraying the lead character(Ray) did a fantastic job. I felt a deep connection with the characters that I forgot I was watching just a movie.

These were some of my top picks, Have a great day ahead !! 🎇🎇

What are Dapps?

Mayank Kumar — Mon, 30 Nov 2020 19:25:21 +0000

A Dapp, or decentralized application, is a software application that runs on a distributed network. It's not hosted on a centralized server, but instead on a peer-to-peer decentralized network.

Features of Dapps :

1. Open Source
2. Decentralized
3. Incentivized
4. Protocol

Dapp = frontend + smart contract backend

⭐ Fun Fact: Bitcoin is itself a Dapp.

So, basically, Dapps are the applications that are made on a decentralized platform, they are the backbone of web 3.0.

They run on a decentralized platform that makes the data involved in the process very secure as there is no centralized agency that is having an eye on it.

Platforms like Ethereum, EOS, NEO are some of the best platforms to make Dapps and run it.

Ethereum is a network protocol that allows users to create and run smart contracts over a decentralized network.

A smart contract contains code that runs specific operations and interacts with other smart contracts, which have to be written by a developer.

Unlike Bitcoin which stores a number, Ethereum stores executable code.

Because Ethereum removes the need for a third party to handle transactions between peers.

Since the middle man is replaced by
code, all kinds of costs are reduced, including time and money.

Dapps are one of the most exciting technologies that will be coming through in the next years or so.

DEV Community: Mayank Kumar

What is 'this' ? 😳

This 😭

1) this in Global Context (i.e. outside of any function)

2) this in a Function (non-Arrow) - Called in the global context

3) this in an Arrow-Function - Called in the global context

4) this in a Method (non-Arrow) - Called on an object

5) this in a Method (Arrow Function) - Called on an object

What is Parcel JS ? 📦

First of all we will start by understanding What is a Module Bundler ?

What is Parcel JS and why should we use it over Webpack or Rollup ??

This is where Parcel JS Kicks in !!! 🚀

If you want to go in depth about Parcel JS and how to use it in your project check this documentation out form is official website

HAPPY CODING 🚀🥂

JS Array Methods ! 🐱‍🏍

WHAT IS A JS ARRAY ?

Arrays provide a lot of methods. To make things easier.

We will be talking about 4 Array Methods :

1.map

2.filter

3.sort

4.reduce

1) Array.prototype.map()

2) Array.prototype.filter()

3) Array.prototype.sort()

3) Array.prototype.reduce()

That's IT

BONUS MEME

HAPPY CODING 🚀

What is D3.js ?

D3.js can help us here

D3 stands for Data-Driven Documents

Installation

Now lets get into some coding examples:

Meme Section:

Happy Coding 🚀👨‍💻

Inbuilt Functions in C++ for Strings 🐱‍👤

So in this blog post I will be talking about some of the few inbuilt functions in CPP in string (C++)

The function in C++ language is also known as procedure or subroutine in other programming languages.

To perform any task, we can create function. A function can be called many times. It provides modularity and code reusability.

1) Length Function:

Here with the use of this function we can find out the length of a particular array !!

Syntax: strlen(str);

2) Compare Function:

Here with the use of this function we can compare the lengths of two different arrays !!

Syntax: strncmp(str1, str2);

3) String Copy Function:

Here with the use of this function we can copy one arrays into another array !!

Syntax: strcpy(destination_str, source_str);

4) String n Copy Function:

Here with the use of this function we can copy some elements of one arrays into another array !!

Syntax: strncpy(destination_str, source_str);

5) String Concatenate Function:

Here with the use of this function we can concatenate both of the arrays !!

Syntax: strcat(str1, str2);

Enough for today, now its time for some meme 😎

Happy Coding 🚀

JSX !

So first of all let me tell you what actually is a JSX !

A JSX(JavaScript XML) is a syntax extension to JavaScript. It is used with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Why do we need JSX ??

The main difference between HTML and JSX 🤯

Attributes in JSX

Rest v/s GraphQL !

First of all let me tell you what is a Rest and GraphQL !

REST(Representational State Transfer) and GraphQL are two API design styles that serve the same purpose: transferring data over internet protocols including HTTP. However, REST is an architectural pattern, whereas GraphQL is a query language

All the things you need to know about the GitHub Copilot !

Q. So what is GitHub Copilot ? Q. Will it replace the developers with AI machines ? Q. Is it the start of the end?

But lets know what actually is GitHub Copilot !

So Its is a AI based application that predicts your code by just reading the function name you have declared, it actually works by reading through all the open source code on the GitHub repos worldwide and then collect the data and tries to find the best possible code related to it !

This Application is being developed by a company called Open AI. If you have ever used Kite/Tabnine as a AI extension in your IDE, you might have a slight idea about how the GitHub copilot works.

As far as I know the GitHub copilot works on the algorithm GPT-3

It is currently the one of "The" best algorithm in AI right now in the world if not the best.

HAPPY CODING 🚀

What is BIG O notation ?

What is Big O notation ?

What is Big O notation ?

Things you should master before you jump on React.js !!

What is React.js ??

Prerequisites

Q. So what is GitHub Copilot ?
Q. Will it replace the developers with AI machines ?
Q. Is it the start of the end?