DEV Community: Divyansh Chahar

Why To-Do List should be your first web-app

Divyansh Chahar — Sun, 01 Jan 2023 12:36:13 +0000

If you have just started to venture into the world of JavaScript projects, you must have come across a lot of tutorials that explain how to make a To-Do list app. The same can be said even if you are looking for beginner-friendly project ideas for either frontend or backend javascript framework\library projects.

Based on my experiences (and mistakes) so far I would recommend that you start with a To-Do-List. A To-Do-List app is the most uncomplicated, straightforward, no-frills way to learn how CRUD operations are performed in the framework/library you are trying to learn. This is a good project to start with even if you are trying to become a fullstack developer.

What are CRUD operations?

"CRUD" is an acronym for

C - Create

R - Read

U - Update

D - Delete.

CRUD operations form the basis of every web app whether it is the frontend or the backend.

In the next section, crud operations will be explained with real-life examples of a social media website

Examples of CRUD operations in the frontend and backend

Let us suppose you are an avid reader of a social media platform. As soon as you decide to make a new post you are creating new content i.e. uploading either text or media. You are adding to the list of UI elements that render posts. Also, a POST request is sent to the backend to add media or text to the database. This is an example of the create operation.

When you decide to modify any post that you have made in the past you are changing either the text or the media rendered on your screen. As soon as you hit save a PUT request is made to the backend to edit the data in the database, this is an example of the update operation.

When you decide to take down a post, you delete an entry from the list of UI layouts that render the posts accompanied by a DELETE request to the backend which deletes the data from the database Thus we can say it is an example of delete operations.

Symbols in JavaScript

Divyansh Chahar — Sat, 27 Aug 2022 11:44:38 +0000

As mentioned in the previous article symbols in JavaScript are immutable and unique. But the follow up to that statement would be - " What do you mean by immutable ? ". A variables is said to be immutable if its value cannot be changed. But in javascript we change the values of variables all the times so how come they are immutable ?

When we declare a variable and assign it some value, what really happens behind the curtain is that a space in memory is created and in that space the value is stored. The variable simply points to this space in memory. However, when we reassign the value of a variable it does not changes the value stored in the memory space the variable is pointing at, it creates a new memory space and stores the new value in it and now starts pointing to this space.

What are Symbols ?

Since now the concept of immutability is clear to you, lets focus our attention on a real life example. My friends in India are well aware of the AADHAR card they have. My american friends must be aware of social security number. AADHAR card number and social security numbers are unique and immutable i.e. no two of them are same and they cannot be changed. They are our digital fingerprints.

Symbols are somewhat similar to these digital fingerprint, every variable of symbol type is unique and immutable.

Symbols do not store any literal value i.e. they cannot store numbers, string, boolean values etc

Creating variables of type symbols

Variables of type symbol can only be created by using the Symbol() function, Symbol() takes an optional argument which is called the description parameter. This parameter is often used to describe what the symbol was created for. Look at the code example below for better understanding.

var x = Symbol(); // no optional argument passed
var y = Symbol("optionalArgument"); // optional argument i.e. description provided
console.log(typeof x);
console.log(typeof y);

symbol
symbol

Every time Symbol() is called it returns a unique instance of symbol object. If you rum the code below the output will always be false just like it was in my case

console.log(Symbol() === Symbol());

false

Why Symbols exists in the first place ?

If symbols don't hold any literal value then what is the purpose of this data type. The answer lies in the nature of this data type. As it was mentioned earlier that each call of the Symbol() function return a unique instance of symbol type. This property makes it very suitable to be used in any database where unique ids are required for each membr of the data base. Use of instances of symbol type makes it easier to programmatically generate these ids.

Sharing of Symbols

If you have any experience with RDBMS, you must be aware of the concept of foreign keys and primary keys. Foreign keys are primary keys of members of other tables. But how do we share the ids in javascript using symbols.

If you wish to create symbols that need to be shared then they need to be created using the Symbol.for() method. Symbol.for() method accepts key parameter. If there has already been a symbol with the same key then that instance is copied, however if no such key exists then an new symbol instance is created with the given key.

let id1 = Symbol.for("member1");
let id2 = Symbol.for("member1");
console.log(id1 === id2);

true

Data Types in JavaScript

Divyansh Chahar — Sat, 27 Aug 2022 11:44:08 +0000

As the name suggests in this piece we are going to discuss different data types in JavaScript.

JavaScript is a loosely typed language i.e. variables can be declared anywhere for example within a loop or conditional statements. It must also be noted that variables are dynamic in nature i.e. the type of data stored in them can also be changed. Please look at the code below

var a = 1;
console.log(typeof a);

a = "a";
console.log(typeof a);

number
string

Before we take a deep dive into different data types it is important to mention that in this article we are only going to discuss primitive data types i.e. data types which are building blocks of other data types (ex: Objects).

In JavaScript there are seven types of primitive data types:

Boolean
Null
Undefined
Number
BigInt
String
Symbol

Before proceeding further it is important to know about the typeof operator. Data type of a variable can be checked by using the typeof operator as shown in the code below

let name = "javascript";
console.log(typeof name);

The above code will give the following output

string

Boolean

Boolean type variables can only store boolean values i.e. true and false. See the code below for better understanding.

var x = true;
console.log(typeof x);

The above code will result in the following output

boolean

String

String type variables store textual data for example, a single character or a complete sentence.

var w = "word";
var s = "This is a complete sentence";
console.log(typeof w);
console.log(typeof s);

The output of the above code will be as follows

string
string

Undefined

A variable that has not been assigned a value is of type undefined.

var w;
console.log(typeof w);

undefined

Null

A variable is of type null if it has been intentionally left blank.

There is difference between null and undefined. A variable is of type null if its value has been intentionally left blank where as variable is of type undefined if its value has not yet been defined.

Null datatype cannot be identified using typeof operator. If a variable containing a null value is passed to a typeof operator it will return object as output.

const a = null;
console.log(typeof a);

The output of the above code is given below

object

Symbol

To understand symbols you will need better understanding of the concepts of immutability in Javascript. I will explain this concept in more details in a follow up article for the time being you just need to understand that symbol data types are immutable and unique.

Number

Number type variables can store double precision floating point numbers in the range of $2^{1024}$ to $2^{1024}$ . All the floating point number greater then $2^{-1074}$ and less then $2^{-1074}$ are converted to $0$ . All the negative floating point integers less then $2^{1024}$ are converted to $\infty$ and all the numbers greater then $2^{1024}$ are converted to $\infty$ .

Also it must be noted that numbers data type can store integers in the range of $2^{53} -1)$ and $2^{53} -1$ .

If you want to check which if a value can be stored as a number data type, the following refrences could be useful:

Number.MAX_SAFE_INTEGER is the the largest integer value that number can store

Number.MIN_SAFE_INTEGER is the smallest integer that number can store.

Number.MAX_VALUE is the largest positive floating point value that number can store.

Number.MIN_VALUE is the smallest floating point value that number can store.

- Number.MIN_VALUE is the largest negative floating point value that number can store.

- Number.MAX_VALUE is the smallest negative floating point value that number can store.

console.log(Number.MAX_SAFE_INTEGER); // largest integer that can be stored in number => 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // smallest integer that can be stored in number => -9007199254740991
console.log(Number.MAX_VALUE); // largest positive floating point number that be stored in number => 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // smallest positive floating point number that be stored in number => 5e-324
console.log(Number.MIN_VALUE * -1); // largest negative floating point number that be stored in number => -5e-324
console.log(Number.MAX_VALUE * -1); // smallest negative floating point number that be stored in number => -1.7976931348623157e+308

BigInt

BigInt is used to used to store integers which are outside the limit of number data type. Any integer can be converted to a bigInt by using the suffix n. See code below for better understanding.

const a = 1n;
const b = 1;
console.log(typeof a);
console.log(typeof b);

when the above code is run the output will be the following

bigint
number

Lessons from my first serious react project

Divyansh Chahar — Mon, 22 Aug 2022 14:34:41 +0000

Who this article is for ?

If you are writing your first react app, this article is not for you as it is not very beginner friendly. To fully appreciate this article you must have built a few basic react apps like a to-do list.

Whats in this piece of writing ?

I am going to discuss the practical nuances and learning from my hands-on experience of building a decent complexity react app which is still in development as I am ironing out some bugs and tweaking a few features ( I built front end for an e-commerce platform with some backend functionality built into the app, check the project here )

Since I don't know any backend technologies at this point I have to integrate some functionality of the backend into my app ( for example data manipulation actions on api calls )

Lessons learned

1. Use json-server for everything api

I placed the data of the products inside a .js file in the form of an object and imported that object. Wherever I would need to render data I would just import this object and use the data within the object. It makes dealing with data(product data) fairly simple.

However this is not how things are done in real life. In real world we make api calls ( I used the builtin fetch function ). I placed the .js file with all the data inside the public folder and provided the relative path of this file to the fetch function. Welcome first problem, using this approach images were not being rendered. Images( i.e. assets ) were inside the src folder which was considered private by react, and apparently you cannot put paths to anything that is private inside anything that is in the public folder. One solution that I came across but did not implemented was placing my assets inside the public folder. I did not tried this approach because that's not how things are done in real projects.

I solved this by installing json-server and creating an image index. Whenever I would need to render an image I would pass the product id to the required function (based on weather I need just one or multiple images) and it would get the image for me using the the image index file.

Check the code snippets below for my solution

This is an example from image index file

const image_urls = [
  {
    id: "0cb1a1c0-4ba9-4464-91d6-112c2dcfecc9",
    images: [require("../images/headphones (7).jpg")],
  },
  {
    id: "f7d224e4-0ecb-4b24-95a9-e171241b5eb4",
    images: [
      require("../images/jeans (1).jpg"),
      require("../images/jeans (2).jpg"),
      require("../images/jeans (3).jpg"),
    ],
  },
];

export default image_urls;

This function returns a single image

//IMPORTING ASSETS
import image_index from "../../assets/data/image_index";

const SingleImageLoader = (productId) => {
  const selectedItem = image_index.filter(
    (item) => item.id === productId.productId
  );
  return <img src={selectedItem[0].images[0]} alt="not found" />;
};

export default SingleImageLoader;

2. Master `userReducer`/Redux before diving deep into anything complex

If you have made forms in react, then you must be familiar with the frustration associated with it. Forms always turn out to be more complex then you thought they would be. There are multiple state variables and functions associated with it. Keeping track of all these variables and functions becomes a headache specially if your form has multiple input fields. Come to rescue useReducer. useReducre is a hook in react which implements redux type workflow in react. Here is nice tutorial by Harry Wolf to get you started. Go get hooked.

3. Follow a design pattern

Always follow a design pattern. No matter which pattern you follow but do make sure you follow a design pattern. As your project grows in size it will become more difficult to keep track of file no matter how smart your file naming strategy is. After coming mid way through the app I realized that it became too chaotic inside my src folder hence i decided to adapt a design pattern and have to refactor the entire project to make sense out of things.