DEV Community: Karan Hejmadi

Understanding lvalues and rvalues in C++

Karan Hejmadi — Wed, 23 Jun 2021 07:36:58 +0000

If you have worked with C++, you might've come across errors like "Expression must be a modifiable lvalue". This post will give you a clear understanding on what those terms mean.

In simple terms, lvalue is something that has a memory address and rvalue doesn't.

An easy example.

int a = 10;

Here, 10 is rvalue and a is lvalue. Simply because 10 does not have any location. It is just a temporary constant which the compiler creates to assign it to a;

Key points to note

An rvalue cannot be assigned any value

int a;
10 = a; // NOT VALID!

An lvalue can be assigned to another lvalue.

int a = 10;
int b = a; // VALID

A function that returns a rvalue is also a rvalue

int getValue() {
  return 10;
}

int main() {
  getValue() = 20; // ERROR
}

A function that returns a lvalue is also a lvalue

int& getValue() {
  static int a = 10;
  return a;
}

int main() {
  getValue() = 20; // NO ERRORS.
}

lvalue and rvalue references

This is mainly important when dealing with functions.

A lvalue can be taken as a parameter using & operator

void setValue(int& a) {
 // Do something
}

A rvalue can be taken as a parameter using && operator

void setValue (int&& a) {
 // Do something
}

A const lvalue reference can be assigned to an rvalue

int& a = 10; // NOT VALID
const int& b = 10; // VALID

This is the reason why int C++ a function that accepts a string reference should always be assigned with const.

// accepts only lvalue
void showFullName_1(string& fullName) {
 cout<<fullName<<endl;
} 

// accepts both lvalue and rvalue
void showFullName_2(const string& fullName) {
 cout << fullName <<endl;
}

// accepts only rvalue
void showFullName_3(string&& fullName) {
 cout << fullName <<endl;
}

int main() {
  string firstName = "john";
  string lastName = "doe";
  string fullName = firstName + lastName; //assigning to an lvalue

  showFullName_1(fullName); //works
  showFullName_1(firstName + lastName); // doesn't work because firstName + lastName is a rvalue

  showFullName_2(fullName); // works
  showFullName_2(firstName + lastName); // works

  showFullName_3(fullName); // doesn't work
  showFullName_3(firstName + lastName); // works

}

Hope this gives you a basic understanding of what lvalues and rvalues are. If you found this helpful please share and comment!

Underrated Web Dev YouTubers you should check out

Karan Hejmadi — Sun, 07 Feb 2021 09:15:25 +0000

Many of us in the web dev community are familiar with teachers like Brad Traversy, Mosh, and Net Ninja. In this post, I will share 3 YouTubers who post quality web dev content with less than 100k subscribers. If you want to learn some advanced concepts in web technologies like react, node, etc. you might want to check them out.

1) Jack Herrington

I first saw Jack's channel in one of Brad's guest videos and the way he explained everything so crisply was really good for a channel of his size. He puts out advanced react content for eg. module federation using react, hooks using typescript, building chat apps, etc.

Channel link: Jack Herrington

2) devmentorlive

devmentorlive is an industry-experienced software developer who does coding streams about react projects. His streams are usually an hour-long where he builds some custom react component or explains some new technology. At around 9k subs, this channel surely deserves more attention.

Channel link: devmentorlive

3) Javascript Mastery

With around 80k subs, this channel isn't that small as the ones above but for the quality of videos that this channel has, one must check it out. He puts on videos mainly on big react projects like building an entire MERN stack app, eCommerce, chat applications, and plenty more. If you're someone who likes learning by building projects you can check his channel out.

Channel link: Javascript Mastery

4) Leigh Halliday

Leigh's channel has awesome content if you want to dive deep into advanced React and Next.js. He has plenty of tutorials on various topics like react-query, Mapbox, react hooks, GraphQL, and many more. I am sure his channel is going to grow big real soon. Do check him out!

Channel link: Leigh Halliday

Build forms using React, the easy way ( with Typescript )

Karan Hejmadi — Mon, 01 Feb 2021 10:04:47 +0000

"forms, ughh.. I don't like it"

We all have been there. You might have tried several libraries like formik or redux forms to ease out your pain. Although decent solutions, you often get plenty of boilerplate code, which makes your code look less pretty and difficult to deal with for beginners. If you don't need the robustness of those libraries you can build your own custom form hook within a few lines of code.

This tutorial would require you to have some knowledge of modern react with hooks.

Step 1 : Initialize an empty create-react-app

Open the terminal and type:

npx create-react-app react-hook-form

Step 2: Open the project in your code editor.

Go to the src directory and create a new directory with the name hooks. Inside the hooks directory create a useForm.ts file (useForm.js if you're using javascript)

Step 3: Importing dependencies

For the custom hook, we will import useState hook from "react".

import { useState } from "react";

Step 4: Defining the functional component.

Create a functional component named useForm and define the initial state for the form. Don't forget to add the export keyword.

import { useState } from "react";

// useForm functional component
export const useForm = (callback: any, initialState = {}) => {
    const [values, setValues] = useState(initialState);

}

Here, initialState will store the various values a form can have i.e. email, password, etc. which will be passed on from the component that uses this hook. callback is the function that will be executed when the user submits the form.

Step 5: onChange function

onChange function is used to handle change events whenever a user types something in the input field.

import { useState } from "react";

// useForm functional componen
export const useForm = (callback: any, initialState = {}) => {
    const [values, setValues] = useState(initialState);

    // onChange
    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValues({ ...values, [event.target.name]: 
    event.target.value });
    };

}

This function sets the target value of the event that is passed to the target name. Suppose you gave an input element a name as "email", the value that is entered in the email field will be set to the email attribute in the initialState. This requires the initialState to have the attributes with the same name as the name specified in the input field.

Step 6: onSubmit function

onSubmit() executes the callback() function that was passed on when the user clicked the submit button.

import { useState } from "react";

// useForm functional componen
export const useForm = (callback: any, initialState = {}) => {
    const [values, setValues] = useState(initialState);

    // onChange
    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValues({ ...values, [event.target.name]: event.target.value });
    };

}

    // onSubmit
    const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        await callback(); // triggering the callback
    };

Your callback() would usually be an asynchronous function like submitting login data to the database, so we use the await keyword and define the onSubmit as an async function.

Step 7: Returning the hook's functions and data.

import { useState } from "react";

// useForm functional componen
export const useForm = (callback: any, initialState = {}) => {
    const [values, setValues] = useState(initialState);

    // onChange
    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValues({ ...values, [event.target.name]: event.target.value });
    };

}

    // onSubmit
    const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        await callback(); // triggering the callback
    };

    // return values
    return {
        onChange,
        onSubmit,
        values,
    };

We return the onChange, onSubmit and values from this hook to the components that use this hook.

Step 8: Usage

Create a login.tsx file (login.jsx for javascript) in the src directory.
Add the following code.

import React, { useState } from "react";

import { useForm } from "./useForm";

function Login() {
    // defining the initial state for the form
    const initialState = {
        email: "",
        password: "",
    };

    // getting the event handlers from our custom hook
    const { onChange, onSubmit, values } = useForm(
        loginUserCallback,
        initialState
    );

    // a submit function that will execute upon form submission
    async function loginUserCallback() {
        // send "values" to database
    }

    return (
        // don't mind this ugly form :P
        <form onSubmit={onSubmit}>
        <div>
            <input
                name='email'
                id='email'
                type='email'
                placeholder='Email'
                onChange={onChange}
                required
                />

            <input
                name='password'
                id='password'
                type='password'
                placeholder='Password'
                onChange={onChange}
                required
                />
            <button type='submit'>Login</button>
        </div>
        </form>
    );
}

export default Login;

DONE! No bulky form components, add more event handlers to your custom hook to make it more robust. Easy and simple.

There is an npm package called react-hook-form which is gaining popularity. This tutorial is a basic insight into that package. Try adding more features like form validation to this custom hook of yours and make form building using react a better place :)

Thank you for reading! Any feedback/questions would be appreciated.

Top 4 languages for new coders

Karan Hejmadi — Tue, 28 Jul 2020 19:12:06 +0000

This post is meant for people who are confused on what programming language to start with.

In at number 4..

4) Java

Yes, Java. Probably the most popular language in the world. It used to build Android applications and has many other uses in the industry. The reason it's at fourth is because, although Java is easy to learn, it has plenty of boiler plate code. Beginners tend to get overwhelmed by those public static void main(), System.out... words everywhere. It is also highly used in competitive coding platforms.

Coming in at number 3
.
.
.
.

3) Python

Data scientists don't hate me for it not being first! Python is a great language and is extensively used in Machine Learning and AI. However, why I wouldn't keep it at the top is because python has no type system(beginners probably won't understand this). Some might argue that it's in fact easier because it reduces boilerplate code. However I disagree. For the new comers, type system is basically you define a variable and give it a type. Like name would be a string(aka text), age has to be a number etc. This helps a lot in identifying pre-compile errors and reduces many bugs. Also if I'm passing some parameters to a function, I'd like to know what type of value I need to pass. Also this might be just me but I don't like the fact that python uses indentations instead of brackets.

2) Javascript/Typescript

No, Javascript is not related to Java in any way. Javascript is one of the easiest languages and one of the widely used languages in the world. You can develop front end, back end, mobile or even desktop applications using Javascript. The syntax is not that difficult to grasp. Although there's a separate group that hate Javascript (i still don't know why), it is beginner friendly and there are plenty of tutorials to guide you through. But again! There's no type system in Javascript. That's the reason why Typescript was created(you might understand the importance of types now!). Its just a super set of JS with added type checking to prevent those petty errors because you passed the age as a string instead of a number :/ I would recommend to start off with Javascript and then move to Typescript.

NUMERO UNO
.
.
.
.
...

1) C++

Good ol' C++. This was my first language and I still love it.
Yes, it is difficult. Probably the most difficult of all the four when you go to advanced C++. But for new comers its the best language to get your feet wet. People give reasons like C++ is a powerful language, fastest language etc. which isn't false, however those things don't matter when you start out. It teaches you about the very fundamentals of programming like memory management, pointers and yes types! After learning C++, other languages would be a cakewalk to learn. C++ is also the preferred language for many top competitive coders and is a popular choice for interviews. C++ STL makes it really easy to solve coding challenges on coding sites. It is also widely used in the industry.

Well that concludes the list! Just remember that no language is superior to another language. Every language has different use cases. So don't worry much about your choice of first language. Rather focus on the programming concepts. Good luck on your programming journey!

All my experienced folks out there please share your thoughts :)

Best YouTube channels for Web Development

Karan Hejmadi — Wed, 22 Jul 2020 06:05:39 +0000

Hello! These are my personal favourite youtube channels to learn full stack web development. Although numbered, this list is not in order of preference and all of them are equally great :)

1. Net Ninja

Shaun's channel has premium quality courses for free! Be it React, Node.js, Vue or Firebase he has covered it all. There are categorised playlists for all topics and he covers everything from absolute basics without skipping anything. Sometimes you'd wonder how am I not paying anything for these courses. Definitely check out this channel!
Net Ninja YouTube Channel

2. Web Dev Simplified

This channel does exactly what it says. Simplifies the web for you! Kyle has a complete full stack course for free on his channel. There are plenty of short videos explaining different topics in a crystal clear manner. I personally watched his channel to learn topics like authentication and react hooks which were easy to grasp.
Web Dev Simplified YouTube Channel

3. Programming With Mosh

Mosh is hands down one of the best teachers I ever had. I learnt React and Node.js from his premium course and not even for once I was lost. He also makes us write code using the best practices which is really beneficial. The way he explains is unique. He could even make a 10 year old understand what React is! He uses animations to make difficult concepts easy. I highly recommend his premium courses.
Programming With Mosh YouTube Channel

4. Brad Traversy

How can this list be complete without Brad! One of my first teachers in web dev, I have learnt all the basics of web development from him. He also has paid courses on Udemy which are worth checking out. Apart from development, he also makes videos on other skills like freelancing and life lessons on dealing with impostor syndrome and mental health. He has been a huge inspiration for all the web developers out there and I hope his channel continues to grow.
Brad Traversy YouTube Channel

There are plenty of other channels who make great content for the community. These are just my favourite ones. Please feel free to share your favourite channels!