DEV Community: Rahul Yadav

My Experience

Rahul Yadav — Thu, 13 Apr 2023 17:39:09 +0000

When I began my web development journey 1.5 years ago, I was uncertain if it was the right path for me. Prior to this, I had left my job to prepare for the ESE, but after two unsuccessful attempts, I realized that the investment of my time was too great, especially at my age. I felt lost and unsure about what to do next with my future, until one day during a conversation with my younger brother, we began discussing potential career paths. Despite having no background in computer science, my brother suggested that I explore web development as a potential avenue. He based this suggestion on the fact that I had previously rooted some phones and updated firmware, as well as installed pirated Windows operating systems on my friend's laptop. Not kidding this was his only reasoning behind it.

Now, looking back, I realize that pursuing web development was the best decision I could have made. Growing up in a farming family where higher education was not a priority, it was challenging to determine what would work for me. This post is about my journey and the process of connecting the dots backward to make sense of how I got to where I am today.

Logic building

Looking back on my career, I remember the time when I was working at a service-based company. I had started there as an executive but had quickly risen through the ranks to become a team leader. At first, my job was simple - I was responsible for data cleaning. The company I worked for had been hired by a US-based e-commerce firm to list their products on their website, and my task was to ensure that the data was accurate and up-to-date.

As I progressed in my role, my responsibilities grew. I had to send daily reports to my manager, which was a tedious task. Every morning, I would come into the office and spend 1-1.5 hours preparing these reports. The data I used for the reports came from my team members and other teams in the company.

One day, I realized that this process could be automated. If I created a template and asked my team members to fill in the data before leaving the office, it would save me a lot of time. I called this template the "master file" because it served as a local data source for my team, and I could get reports at the end of each day. One section of the file was dedicated to monitoring my team's performance.

I want to emphasize that I truly hated the process of preparing these reports. However, this hatred ultimately led me to find a solution. At the time, I had no experience using Microsoft Excel or any knowledge of the different formulas that could be used. But because of this repetitive and unnecessary task, I was motivated to find a way to streamline the process.

It took me a whole month to create the master file, and I had to search on Google and ask my seniors for help with Excel formulas. But the time and effort paid off, and I was able to save a lot of time in the long run. Looking back, I realize that creating that file helped me develop my logical and problem-solving skills, even though I had no idea that I was doing so at the time.

Personally, I found that exploring different Excel formulas and experimenting with logical solutions was an excellent way to sharpen my analytical thinking and enhance my ability to solve problems. Even though these exercises may seem small, it benefited me. To succeed in a career in development, I think it is crucial to cultivate robust problem-solving abilities.

Patience

I was once an aspirant for the Union Public Service Commission (UPSC) exam, which taught me an invaluable lesson in patience. Let me share my story in more detail. It's really hard for mechanical engineers to get good jobs in India. It's like finding something very valuable in a place where you don't expect it. That's why I thought getting a government job is the only choice they have. During college, I had previously prepared for the GATE exam, but this time I choose UPSC ESE. The UPSC syllabus is vast and cannot be completed in a day, a month, or even a year. It requires consistent daily effort and patience to cover each chapter thoroughly. As one of my teachers once said, the UPSC exam is not a 200-meter sprint, it's a marathon. This meant that I had to cultivate patience and discipline to prepare consistently every day.

The same traits of patience and discipline are required when you choose a new career path in your life. Often, it can be difficult to acquire the skills that the job market demands and it's easy to feel stuck and seek help. Sometimes you might even regret choosing a difficult career path and think that you should have opted for something easier. However, this is a common feeling for every newcomer in any field. I faced the same problem when I chose to pursue a new career path in web development.

I started learning the basics of JavaScript, starting with how it works, what an event loop is, and other fundamentals. However, it was overwhelming, and even writing a simple function proved to be challenging. Sometimes, I would be stuck on a problem for two days straight. At that time, there was no ChatGPT to help me find solutions quickly. However, I learned that finding solutions on Google is a skill, and if I had not been patient enough while learning web development, I would not have made it this far.

Peer Learning

After my second failed attempt at the UPSC exam, I came to the realization that I needed to acquire a skill that would provide me with a stable livelihood. Having only data entry experience, I turned to my brother for advice on what skill to learn. After a lengthy discussion, we agreed that web development was a good option. With no prior knowledge of coding, I started by watching YouTube videos to learn the basics of JavaScript. While the videos were helpful, I realized I needed more structured learning, so I invested 2000 rupees in Udemy courses on the MERN tech stack.

After two months of dedicated learning, I had a good grasp of the basics of JavaScript and was able to build a few projects. I continued to practice by learning React JS and building more projects. However, I knew I needed more guidance to really improve, so I joined a boot camp.

This was a life-changing experience for me. The boot camp allowed me to meet people from different career backgrounds who were also learning to code. The six months of the boot camp were intense, with days filled with practice and nights spent reviewing 50+ git PRs.

One of the most valuable aspects of the boot camp was learning from my peers. Seeing another person's coding style and asking them why they wrote the code in a particular way was enlightening. I learned new approaches and ways of thinking about problems that I had never considered before. Although the long nights of coding and the pressure to learn quickly were challenging, I embraced them, knowing that I was on a journey of growth and learning.

As with any new skill, there were moments of frustration and downtime. But being surrounded by classmates who were also learning and growing made it easier to discuss these issues and find solutions together. In many ways, the boot camp felt like going back to school, but with the added benefit of being surrounded by like-minded individuals who were all striving to better themselves.

—-

I discussed the three characteristics that led me to pursue a career in web development. However, at that time if someone asked me why I chose to become a developer, I didn't have a clear answer. Nonetheless, I believe that these traits have been helpful for me, and I can easily empathize with anyone who has just embarked on their web development journey.

Beginner's Guide to OOP in JavaScript

Rahul Yadav — Sun, 22 May 2022 18:12:42 +0000

Object-Oriented Programming (OOP)?

Object-oriented programming is a type of paradigm based on an "object" in a programming language that contains data known as attributes and code known as methods.

Philosophy

Object-oriented programming is based on the 4 principles:

Abstraction

Objects only reveal internal mechanisms that are relevant for the use of other objects, hiding any unnecessary implementation code.

Encapsulation

To prevent some of the properties or methods of an object to access outside of its scope. It resists mutating these encapsulated properties or methods outside its scope.

Inheritance

To inherit methods from a blueprint object. It features the reusability of a method from a blueprint object where it is defined originally.

Polymorphism

Polymorphism is considered one of the important features of Object-Oriented Programming. Polymorphism allows us to perform a single action in different ways. In other words, polymorphism allows you to define one interface and have multiple implementations. The word “poly” means many and “morphs” means forms, So it means many forms.

Implementation of OOP in JavaScript

Javascript is an OOP-based programming language so it follows the same philosophy as a typical OOP language, but the implementation is slightly different.

Inheritance and the Prototype Chain

Prototypes are the mechanism by which JavaScript objects inherit features from one another. When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property that holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype and acts as the final link in this prototype chain.

Nearly all objects in JavaScript are instances of Object, which has null as its prototype.

The heart of an OOP programming language is the object. So let's discuss it.

Object

An Object is a unique entity that contains property and methods. For example “car” is a real-life Object, which has some characteristics like color, type, model, and horsepower and performs certain actions like driving.

In JavaScript, we can implement OOP in JavaScript in following ways:

Construction Function Method
Object.create Method
ES6 Class Method

let's discuss them one by one.

Construnction Function Method

In JavaScript, you can create multiple objects from a constructor function. To create an object from a constructor function, we use the new keyword.

const Person = function (firstName, birthYear) {
  this.firstName = firstName;
  this.birthYear = birthYear;  
}
//here person is a construction function
//for creating construction function, function declaration or function expression is used. Arrow can not be used because it doesn't have "this" keyword

Person.prototype.calcAge = function() {
  return console.log(`Age: ${2020 - this.birthYear}`);
}
//using the prototype object, a new method is created to person function, which can be used for all the instances

const Student = function (firstName, birthYear, course) {
  this.firstName = firstName;
  this.birthYear = birthYear;
  this.course = course;
};
Student.prototype = Object.create(Person.prototype);
//Student extends to Person

Student.prototype.greet = function () {
  return console.log(`Hi, I am ${this.firstName} and I study ${this.course}.`);
};


const ram = new Student('Ram', 2000, 'computer science'); //new instance 'ram' is created

ram.calcAge() // 20
ram.greet() //Hi, I am Ram and I study computer science.
console.log(ram instanceof Student) //true
console.log(ram instanceof Person) //true

Here is a prototype chain created.

ram -> Student -> Person -> Object

we can check it using __proto__ property.


console.log(ram.__proto__ === Student.prototype) //true
console.log(ram.__proto__.__proto__ === Person.prototype) //true
console.log(ram.__proto__.__proto__.__proto__ === Object.prototype) //true

Object.create Method

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.


const Person = {
  init(firstName, birthYear) {
    this.firstName = firstName;
    this.birthYear = birthYear
  },
  calcAge() {
    return console.log(`Age: ${2020 - this.birthYear}`);
  }
}

const Student = Object.create(Person)

Student.init = function(firstName, birthYear, course) {
  this.firstName = firstName;
  this.birthYear = birthYear;
  this.course = course
}

Student.greet = function() {
  return console.log(`Hi, I am ${this.firstName} and I study ${this.course}.`);
}

const ram = Object.create(Student)
ram.init('Ram', 2000, 'Computer Science')

ram.calcAge() //Age: 20
ram.greet() //Hi, I am Ram and I study computer science.

ES6 Class Method

Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes.


class Person {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }

  calcAge() {
    return console.log(`Age: ${2020 - this.birthYear}`);
  } 
}

class Student extends Person {
  constructor(fullName, birthYear, course) {
    super(fullName, birthYear);
    this.course = course;
  }

  greet() {
    console.log(`Hi there, I am ${this.fullName} and I study ${this.course}.`);
  }
}

const ram = new Student('Ram', 2000, 'Computer Science')

ram.greet() //Hi there, I am Ram and I study Computer Science.
ram.calcAge() //Age: 20

Static Method and Property

The static keyword defines a static method or property for a class. Neither static methods nor static properties can be called on instances of the class. Instead, they're called on the class itself.


class Person {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }
  static property = 'some value';

  calcAge() {
    console.log(`Age: ${2020 - this.birthYear}`);
  } 

  static method() {
    console.log('this is a static method')
  }
}

const ram = new Person('Ram', 2000)

console.log(ram.property) //throws an error
console.log(ram.calcAge()) //Age: 20
console.log(ram.method()) //throws an error

Private Class Feature

Class fields are public by default, but private class members can be created by using a hash # prefix. The privacy encapsulation of these class features is enforced by JavaScript itself.


class Person {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }
  #property = 'some value';

  calcAge() {
    console.log(`Age: ${2020 - this.birthYear}`);
    console.log(this.#property)
  } 
}

const ram = new Person('Ram', 2000)

console.log(ram.#property) //throws an error
//Error: Private field '#property' must be declared in an enclosing class

ram.calcAge()
//Age: 20
//some value

This blog is all about a brief introduction to OOP in JavaScript. For more details about this topic, read on MDN Web Docs.

Beginner's Guide to NextJS

Rahul Yadav — Thu, 19 May 2022 15:43:27 +0000

What is NextJS ?

NextJS is an open-source web development framework built on top of Node.js enabling React-based web application functionalities.
NextJS was first released as an open-source project on GitHub on October 25, 2016. Currently, NextJS is owned by Vercel, formerly ZEIT.

NextJS is Full-stack because it facilitates writing client-side code and server-side code, and Production-ready because it provides features that are missing in react library like routing, etc. NextJS offers a ton of features for ease of a developer which we will discuss later in this blog.

How to start a NextJs project?

You can start a NextJs project with run following CLI commands which sets up everything automatically for you.

npx create-next-app my-app
# or
yarn create next-app
# or
pnpm create next-app

After creating a nextJs project you will get folders public, pages, and styles along with next.config.js file. let's explore them one by one.

Next Config File

next.config.js is a regular Node.js module, not a JSON file. It gets used by the NextJS server and build phases, and it's not included in the browser build.

Take a look at the following next.config.js example:

const nextConfig = {
  /* config options here */
}

module.exports = nextConfig

The commented lines are the place where you can put the configs allowed by next.config.js, which are defined in this file.
However, none of the configs are required, and it's not necessary to understand what each config does.

Read more about next config at official documents here

Static File Serving

NextJS can serve static files, like images, under a folder called public in the root directory. Files inside the public can then be referenced by your code starting from the base URL (/).

For example, if you add an image to public/me.png, the following code will access the image:

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

Routing

In NextJS, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

Example: If you create pages/about.js that exports a React component like below, it will be accessible at /about.

function About() {
  return <div>About</div>
}

export default About

There is another way to use routing in NextJS. You can create a folder with the name about and create a file name index. Then also you can access path /about.

Dynamic Routes

NextJS supports pages with dynamic routes. For example, if you create a file called pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc. square bracket provides a dynamic name.

Nested Routes

let's say there are 3 routes you want to access /account, /account/profile, and /account/setting you can also achieve this in NextJS very easily.

In the pages directory creates a folder name account and then creates 3 files inside it with named viz. index, profile, and setting. The index file will be accessible at /account path, profile file will be accessible at /account/profile, and the setting file will be accessible at /account/setting.

You can achieve this for deeply nested routes too. Isn't it amazing? This routing feature is my favorite in Next Js.

next/router

This is the extension of nextJS routing features. NextJs provides a useRouter hook to navigate conditionally.

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

Router Object

The router object returned by both useRouter and withRouter. You can read more in-depth about this router object in NextJS official documentation. Read here

next/link

Client-side transitions between routes can be enabled via the Link component exported by next/link.

For an example, consider a pages directory with the following files:
pages/index.js
pages/about.js
pages/blog/[slug].js

We can have a link to each of these pages like so:

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

Styling

To add a global stylesheet to your application, import the CSS file within pages/_app.js.
For example, consider the following stylesheet named styles.css:

body {
  font-family: sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Create a pages/_app.js file if not already present. Then, import the styles.css file.

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

If you don't want to use CSS styling globally. You can use CSS Modules which is in-built in nextJS and helps you to keep CSS styling locally.

Client-side and Server-side Rendering

Client-side rendering allows developers to make their websites entirely rendered in the browser with JavaScript. Instead of having a different HTML page per route, a client-side rendered website creates each route dynamically directly in the browser. This approach spread once JS frameworks made it easy to take.

Client-side rendering manages the routing dynamically without refreshing the page every time a user requests a different route. But server-side rendering can display a fully populated page on the first load for any route of the website, whereas client-side rendering displays a blank page first.

Though NextJS is based on react library it facilitates client-side rendering but it offers server-side rendering too.

Benefits of Server Side Rendering:

A server-side rendered application enables pages to load faster, improving the user experience.
When rendering server-side, search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO.
Webpages are correctly indexed because web browsers prioritize web pages with faster load times.
Rendering server-side helps efficiently load webpages for users with a slow internet connection or outdated devices.

Server-Side Rendering in NextJS

There are two ways to use server-side rendering in nextJS. Either page can be served static generated way or generated on the fly. For these features it offers two functions: getServerSideProps and getStaticProps.

getServerSideProps Function

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

It returns props which you can in react component.
You should use getServerSideProps only if you need to render a page whose data must be fetched at the requested time.

getStaticProps Function

If you export a function called getStaticProps (Static Site Generation) from a page, NextJS will pre-render this page at build time using the props returned by getStaticProps.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

You should use getStaticProps if The data required to render the page is available at build time ahead of a user’s request.

getStaticPaths Function

If a page has Dynamic Routes and uses getStaticProps, it needs to define a list of paths to be statically generated during build time.

When you export a function called getStaticPaths (Static Site Generation) from a page that uses dynamic routes, NextJS will statically pre-render all the paths specified by getStaticPaths.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

This is the overview of these special functions which nextJS provides. For in-depth information read at NextJS official documentation.

Next API

We have seen client-side routing and server-side rendering functionality with NextJS. If you want to create RestFul API then you don't need to create it separately. NextJs provides this functionality as an in-built feature. There is an API folder available inside the pages folder where you can create RESTFul API. Every file you create with .js/.jsx/.ts/.tsx extension works as an endpoint to which you can send API calls and connect to the backend. Node environment is available in the API folder so you use the environmental variable with using the process object.

For example, the following API route pages/api/user.js returns a json response with a status code of 200:

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Though so many features left like next/Image, next/head, eslint and typescript support, optimization etc. which NextJS offers for website development but this blog is about NextJS basics. You can explore more about NextJS in their official document.

Beginner's Guide to Regex

Rahul Yadav — Wed, 18 May 2022 19:11:14 +0000

Regex or Regexp ?

It stands for Regular Expression. It is a character matching mechanism. In other words, regular expressions are the pattern to match standalone character or a combination of characters in a string. It was coined in the beginning of 1950s, when the American mathematician Stephen Cole Kleene formalized the concept of a regular language. Most general-purpose programming languages support regex capabilities either natively or via libraries, including example Python, C, C++, Java, and JavaScript.

How does it work ?

There are the following rules a regex engine follows to find the match:

It reads the whole input string and attempts to match the characters against the instructions one at a time.
It reads the string from left to right
If a character matches according to the instruction that we have imposed, it returns true and goes for the next character to match. if a character doesn't match it returns false and goes for matching the next character from start. 4.If all the instructions matched it returns success indicating regex matched successfully.

Basic matching

A regular expression is just a pattern of characters that we use to perform a search in a text.
For example, the regular expression the means letter t, followed by the letter h, followed by the letter e.

"the" => The fat cat sat on the mat.

Meta-characters ?

Meta-characters are reserved characters to set a specific rule for matching.
The meta characters are as follows:

^ : It specifies the starting of the string. This metacharacter helps us to match a string starting with a specific substring.

^The => The car is parked in the garage.

$ : Matches the end of the string. If a string ends with a specific character then we can use the $ to find the match.

Wihtout $:

at\. => The fat cat. sat. on the mat.

With $:

at\.$ => The fat cat. sat. on the mat.

. : It matches a single character without a line break. This is the simplest meta character. It helps us to match the next single character, if we put . after the matching pattern or the previous single character, if we put before the matching pattern.

.at => The fat cat sat on the mat.

ca. => The fat cat sat on the mat.

[] : Character Class. It matches any character written inside a square bracket. If we want to match a specific character then we can use character class and write a matching pattern between the square bracket.

[0-9] => 3 fat cats sat on the mat.

[^] : Neglected Character Class. It does not match any character written inside in a square bracket. it is similar to character class but in this case, we don't want to match specific characters we can use neglected character class. If caret (^) is available before a matching pattern wrapped inside the square bracket then expect the matching pattern it matches all other characters available in the string.

[^a-b] => 3 fat cats sat on the mat.

* : It is used with another rule like [a-z]*. It matches zero or more than zero the occurrence of preceding characters. If * is written after the matching pattern then it matches zero or more than zero repetition of the matching pattern.

[0-9] => 525 fat cats sat on the mat.

[0-9]* => 525 fat cats sat on the mat.

It is generally used with whitespace character (\s) when we want to match a substring followed by zero or more than zero whitespaces available.

The\s*fat => The fat cat sat on the mat.

+ : This works the same as * works but instead of matching zero or more than zero occurrences, it matches one or more than one occurrence of preceding characters. If plus is written after the matching pattern then it matches one or more than one repetition of the matching pattern.

[0-9]+ => 525 fat cats sat on the mat.

The difference ?

hel* => heo.

hel+ => heo. //no match

? : Makes the preceding symbol optional. This symbol matches zero or one instance of the preceding character.

[t]?he=> the fat cat sat on the mat he.

{n, m} : It specifies the range of the preceding string. In this case, the string should not be less than n characters and more than m characters.

[0-9]{2, 3}=> the value of pi is 3.1415.

In this example, if we omit the second parameter (3) then it finds a match with 2 or more digits.

[0-9]{2,}=> the value of pi is 3.14159.

If we omit the comma too then it finds a match with exactly 2 digits.

[0-9]{2}=> the value of pi is 3.141.

(xyz) : Character Group. Matches substring written inside parentheses.
| : Alternation. It is similar to the OR operator.

(T|t)he|car => The car is parked in the garage.

\ : Escape. This allows you to match reserved characters { } . * + ? ^ $ \ |. For example, if we want to find . character then we need to write \. as for the rule.

Assertions

Assertions include boundaries, which indicate the beginnings and endings of lines and words, and other patterns.

Lookahead Assertion:

x(?=y) matches x if it is followed by y.

monica(?=\sgeller) => my name is monica geller.

Negative Lookahead Assertion

x(?!y) matches x if it is not followed by y.

geller(?!\sfamily) => monica geller belongs to the geller family.

Look Behind Assertion

(?<=x)y matches y if it is preceded by x

(?<=monica\s)geller=> monica geller belongs to the geller family.

Negative Look Behind Assertion

(?<!x)y matches y if it is not preceded by x

(? monica geller belongs to the geller family.

Lazy vs Greedy matching

By default, a regex will perform a greedy match, which means the match will be as long as possible. We can use ? to match in a lazy way, which means the match should be as short as possible.

Lazy Matching

he.*l=> say hello to hell.

Greedy matching

he.*?l=> say hello to hell.

Flags

Flags are also called modifiers because they modify the output of a regular expression. These flags can be used in any order or combination, and are an integral part of the RegExp.

i : Case insensitive: Match will be case-insensitive.
g : Global Search: Match all instances, not just the first.
m : Multiline: Anchor meta characters work on each line.

Regex in JavaScript

There are two ways to create a RegExp object: a literal notation and a constructor.

The literal notation's parameters are enclosed between slashes and do not use quotation marks.

\[0-9]\

The constructor function's parameters are not enclosed between slashes but do use quotation marks.

new RegExp('[0-9]')

These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String.

I hope this beginner's guide helps you to understand the basics of regex.

Practice regex with Regex 101