Forem: Aditya Sharan

TypeScript Quick Guide 101

Aditya Sharan — Wed, 18 May 2022 06:39:02 +0000

One appropriate next step for the React application would be to integrate TypeScript in order to add a layer of robustness and security.

TypeScript is a JavaScript superset that adds new features to the language, being one of the most important ones that, with TypeScript, you can add type-checking to your projects. TypeScript is the step that JavaScript needed to look like a high-level programming language (like Java).

My intention with this (short) article, is to write a quick guide with some of the most important features TypeScript has, without diving that much. So, let’s begin.

Most Important Types
: string
: number
: boolean
: array
: any
: void
: null
: undefined
How to apply types to your variables

let myVariable: number;

An array filled only with elements of a specific type type

let strArr: string[];

//or

let strArr: Array<string>;

Tuples
You use tuples when your array needs to contain a specific type of values in certain indexes. If the array overpass the size of the tuple, an error would not be throw. The only condition is to fulfill the requirements of the tuple.

let strNumTuple: [string, number];

strNumTuple = [3, ‘Hello’, 1, 2, 3]: // this would be correct.

Adding types to functions
You can add types to the parameters of a function, so, when the function is called, the types of the arguments would need to match. The type after the parameter represents the type of value the function should return.

const mySum = function(num1:number,num2:number):number{

return num1 + num2;

}

Interfaces
Let’s say you need that the argument passed to your function needs to be an object with values of specific types. This is one case when interfaces come in handy.

interface Todo{

title: string;

text: string;

} 
/* the object passed as an argument 
should contain at least values with those types.*/

function showTodo(todo: Todo){

console.log(todo.title+’ ‘+todo.text)

}

let myTodo = {title:’Trash’, text:’take out trash’};

And this is all for now…
Being TypeScript one of the best ways to strengthen applications that need JavaScript, it gains every day more and more importance in nowadays market. So, these days, to only learn JavaScript without Type it’s kind of pointless, and even if JavaScript evolves tomorrow and add features similar to TypeScript, these features are (almost for sure) going to be implemented in a very similar way (well, those are just my predictions).

React Testing Library — My Notes

Aditya Sharan — Mon, 16 May 2022 16:20:03 +0000

Some quick answers to common RTL-related questions.

Run tests

yarn run test

Where to usually place the tests?

Inside a test folder.

What is a common way to name tests?

Component.test.tsx

What is usually needed to import in test files?

import React from “react”; //React
import Counter from “../Counter”; //The component to test
import { render } from “@testing-library/react”;

render is used for rendering the component in the virtual dom so you can then test what has been rendered. Due to this, it usually goes inside a beforeEach.

What would be an example of a basic test?

test(“header renders with correct test”, () => {
     const { getByTestId } = render(<Counter />);
     const headerEl = getByTestId(“header”);
     expect(headerEl.textContent).toBe(“My Counter”);
})

The test's first argument would be the description.
The second argument would be a function with the actions of the tests.
expect is the function that actually does the test.
It is not a good practice to use getByTestId. This is just an example.

What would be a general description of testing with RTL?

You render a component.
Then you look and select elements inside the component.
Then you can:
Execute actions on the element (like clicks) and then verify the expected results.
Or just check the element to have the right values without executing any action before.

What would be an example of checking the right values in an element?

Expects the text content inside the element ‘headerEl’ to be the specific string “My Counter”.

expect(headerEl.textContent).toBe(“My Counter”);

If you can’t find any way to select an element you want to, what is the last resource you can use?

getByTestId and the element need to be marked with the property:

data-testid

What is useful for simulating actions?

The most used way is userEvent (because it is more similar to the user):

import userEvent from ‘@testing-library/user-event’; 
userEvent.dblClick(checkbox);

But, fireEvent can also be used:

fireEvent.change(inputEl, {
     target: {
          value: “5”
     }
});

What can you do if you expect something not to have a certain value?

With not.

expect(headerEl.textContent).not.toBe(“My Counter”);
How to output the code in the terminal?

screen.debug()

That's all folks !!

React Virtual DOM Explained in Plain English

Aditya Sharan — Mon, 05 Jul 2021 11:35:18 +0000

We still don't catch how Virtual DOM works. Actually, what is DOM? They say Document Object Model. Well, but what is it exactly? The DOM in simple words represents the UI of your application.

Let's dive in.

When a browser downloads the HTML document it creates the tree-like representation of that document, the so-called Object Model where every HTML tag has its corresponding node.

In that way, Javascript gets access to the HTML tags and can change them: add styles, modify or even delete them.

Making these changes is not slow. What makes the process slow and costly is how the browser organizes those changes. In every update, HTML parser reads the HTML document then DOM is being created, at the same time CSS parser parses the stylesheets and applies style rules. As a result of the process, Attachment is being created. Afterward, Layout process gives the exact co-ordinates to each node of the render tree, i.e. each element's exact coordinates on the screen.

So the Render tree is ready, then go Painting and Display.

What makes DOM manipulation slow?

Updating DOM is a slow and expensive process
You have to traverse DOM to find a node and update it.
Updating DOM has cascading effects - things need to be recalculated.

Virtual DOM

the concept of virtual DOM comes in and performs significantly better than the real DOM. The virtual DOM is only a virtual representation of the DOM. Everytime the state of our application changes, the virtual DOM gets updated instead of the real DOM.

Well, you may ask ” Isn’t the virtual DOM doing the same thing as the real DOM, this sounds like double work? How can this be faster than just updating the real DOM?”

How is Virtual DOM faster?

There are always two versions of VDOM. One is before the changes and the other is after the changes. So when changes occur React compares two VDOMs and detects the changes.
This process is called ''diffing''.

The changed objects only get updated on the real Dom. Changes in the real DOM cause the screen to change. This is called ''reconciliation''.

VDOM is like a blueprint and making changes in it is more efficient.
Instead of rendering all changes to the real DOM, we apply them first to the Virtual DOM, which is doesn't get rendered. So the changes to it are very cheap.

Thanks for reading!

10 Daily useful JS code snippets

Aditya Sharan — Sun, 27 Jun 2021 13:08:23 +0000

JavaScript is without question one of the most popular programming languages in web dvelopment.
Take a look at following code snippets that solve similar problems in an elegant way and use this knowledge in daily project situations or to prepare for any upcoming coding interviews.

1. Reverse a String

In this example, we are using the spread operator (...), the reverse method from Array, and the join method from String to reverse a given string.

const reverseString = string => [...string].reverse().join('');
//Examples
reverseString('devto'); //otved
reverseString('AdityaSharan'); //narahSaytidA

2. Calculate a Number's Factorial

To calculate the factorial of a given number, we can make use of arrow function and nested ternary operators.

const factorialOfNumber= number =>
   number < 0  ?
(   () => 
    {
     throw new TypeError('No negative numbers please');
    }
)()
: number <= 1
? 1
:number * factorialOfNumber(number -1);
//Examples
factorialOfNumber(4);  //24
factorialOfNumber(8);  //40320

3. Convert a Number to an Array of Digits

In this example,we use spread operator (...),the map method of Array and the parseInt function to convert a given number to an array of single digits.

const convertToArrays = number => [...`${number}`].map(ele =>
parseInt(ele));

//Examples
convertToArrays(5678); //[5,6,7,8]
convertToArrays(123456789); //[1,2,3,4,5,6,7,8,9]

4. Check If a Number Is a Power of Two

This one is pretty Straight forward.We check that number is not falsy and use the bitwise AND operator (&) to determine if number is power of two.

const isNumberPowerOfTwo = number => !!number && (number & (
number -1)) == 0 ;

//Examples
isNumberPowerOfTwo(100); //false
isNumberPowerOfTwo(128); //true

5. Create an Array of Key-Value pairs From an Object

In this example, we use the keys method from Object and the map method from Array to map over Object's keys and create an array of key-value pairs.

const keyValuePairsToArray = object => Object.keys(object)
.map(ele => [ele,object[el]]);

//Examples
keyValuePairsToArray({Java :4 ,Script : 2});
// [  ['Java', 4] , ['Script',2] ]
keyValuePairsToArray( {x:1, y:5, z:8} );
// [ ['x',1], ['y',5], ['z',3] ]

6. Return [Number] Maximum Elements from an Array

To return the maximum elements from an array, we use an arrow function that takes our array and the number of elements we want the function to return. We use the spread operator(...) and the sort and slice methods from Array. Note that if we dont provide a second argument,number gets a default value of 1, so only one maximum element is returned.

const maxElementsFromArray = (array,number =1) =>[...array]
.sort((x,y) => y-x).slice(0,number);

//Example
maxElementsFromArray([1,2,3,4,5,6,7]); //[7]

7. Check if All Elements in an Array Are Equal

In this example,we check if all elements in an array by using the every method from Array. We basically chekc if every element is equal to the first element in the array.

const elementsAreEqual = array => array.every( ele => ele=== array[0]);
//Examples
elementsAreEqual([9,8,7,6,5,4]); // false
elementsAreEqual([2,2,2,2,2,2,2]); // true

8. Return the Average of Two Numbers

In this example,we use the spread operator(...) and the reduce method from Array to return the average of two given numbers or an array.

const averageOfTwoNumbers = (...numbers) => numbers.reduce((accumulator, currentValue) => accumulator+currentValue,0) /numbers.length
//Examples
averageOfTwoNumbers (...[6,7,8]); // 7

9. Return the Sum of Two or More Numbers

To return the sum of two or more given numbers or an array, we agauin use the spread operator (...) and the reduce method from an Array.

const sumOfNumbers = (...array) => [...array].reduce((accumulator,currentValue) => accumulator + currentValue, 0);
//Examples
sumOfNumbers(5,6,7,8,9,10);  //45

10. Return the PowerSet of an Array Of Numbers

In the last Example,we want to return the powerset of an array of numbers.Therefore we use the reduce,map and the concat methods from Array.

const powersetOfArray = array => array.reduce((accumulator,currentValue) => accumulator.concat(accumulator.map(ele => [currentValue].concat(el))),[ [] ] );

//ExAMPLES
powersetOfArray([4,2]);
// [[],[4],[2],[2,4]]

As you can see it isn't always difficult to solve these tasks with Javascript and some ES6 Magic.
Thanks for reading!
Don't forget to like this post and
Do let me knw if you knw some good code snippets that can be added in the list so that even I can learn from it.

[Facts Alert]When to use which one ?MySQL Vs MongoDB

Aditya Sharan — Wed, 31 Mar 2021 05:52:06 +0000

Hello everyone!

In this post I will share about SQL vs NoSQL, most of you are already familiar with SQL database, and have a good knowledge on either MySQL, SQL Server, or other SQL databases. In the last several years, NoSQL database is getting widely adopted to solve various problems.

MongoDB

MongoDB is one of the most popular document-oriented databases under the banner of NoSQL database. It employs the format of key-value pairs, here called document store. Document stores in MongoDB are created is stored in BSON files which are, in fact, a little-modified version of JSON files and hence all JS are supported.It offers greater efficiency and reliability which in turn can meet your storage capacity and speed demands. The schema-free implementation of MongoDB eliminates the prerequisites of defining a fixed structure. These models allow hierarchical relationships representation and facilitate the ability to change the structure of the record.

Pros

MongoDB has a lower latency per query & spends less CPU time per query because it is doing a lot less work (e.g. no joins, transactions). As a result, it can handle a higher load in terms of queries per second.
MongoDB has a faster write speed because it does not have to worry about transactions or rollbacks (and thus does not have to worry about locking).
NoSQL databases are cheap and open source.
NoSQL database support caching in system memory so it increases data output performance.

Cons

MongoDb does not support transactions.
In general, MongoDB creates more work (e.g. more CPU cost) for the client server. For example, to join data one has to issue multiple queries and do the join on the client.
No Stored Procedures in mongo dB (NoSQL database).

MySQL

MySQL is a popular open-source relational database management system (RDBMS) that is developed, distributed and supported by Oracle Corporation. MySQL stores data in tables and uses structured query language (SQL) for database access. It uses Structured Query Language SQL to access and transfer the data and commands such as 'SELECT', 'UPDATE', 'INSERT' and 'DELETE' to manage it.Related information is stored in different tables but the concept of JOIN operations simplifies the process of correlating it and performing queries across multiple tables and minimize the chances of data duplication. It follows the ACID (Atomic, Consistent, Isolated and Durable) model. This means that once a transaction is complete, the data remains consistent and stable on the disc which may include distinct multiple memory locations.

Pros

SQL databases are table based databases.
Data store in rows and columns.
Each row contains a unique instance of data for the categories defined by the columns.
Provide facility primary key, to uniquely identify the rows.

Cons

Users have to scale relational database on powerful servers that are expensive and difficult to handle. To scale relational database, it has to be distributed on to multiple servers. Handling tables across different servers is difficult.
In SQL server\'s data has to fit into tables anyhow. If your data doesn't fit into tables, then you need to design your database structure that will be complex and again difficult to handle.

I have used NoSql Only... as i'm a beginner and there is lot to learn ,here are few insights of using NoSQL
Storing large volumes of data without structure: A NoSQL database doesn\'t limit storable data types. Plus, you can add new types as business needs change.
Using cloud computing and storage: Cloud-based storage is a great solution, but it requires data to be easily spread across multiple servers for scaling. Using affordable hardware on-site for testing and then for production in the cloud is what NoSQL databases are designed for.
Rapid development: If you are developing using modern agile methodologies, a relational database will slow you down. A NoSQL database doesn\'t require the level of preparation typically needed for relational databases.

Would be glad to know what are your reasons for using SQLDB or NoSQL DB.
Comment down below 👇

[BASICS] REACT.JS BEST PRACTICES IN PLAIN ENGLISH.

Aditya Sharan — Sat, 20 Mar 2021 22:28:08 +0000

1 . Component name must start with capitals letters.

2 . All the component must be small and function-specific.

3 . All the component must have small description

/**
*
* Author: {...}
* Description: {...}
* Dependencies: {...}
*
**/
const SampleComponent = () => {

  return (
    <div>
      Sample Component !
    </div>
  );
}

export default SampleComponent;

4 . All code must follow es6 coding standards.

5 . For variables that are NOT constants or constructors, multi-word variables and functions SHOULD be lowerCamelCased.

6 . Constants:- Pre-defined constants SHOULD be all-uppercase, and words separated by underscores: UPPER_UNDERSCORED.

7 . Typeof:- In type comparisons, the value tested MUST NOT be wrapped in parenthesis and use triple equals to.

if (typeof myVariable === 'string') {
  // ...
}

8 . In simple condition, Ternary operator should be used instead of if else statement.

// If-else Statement
if(condition) {
    //...
} else {
    //...
}

// Ternary operator
let myVariable = condition ? exprIfTrue : exprIfFalse

9 . fragments should be used instead of container div.



render() {
  return (
    <Fragment>
       Some text.
      <h2>A heading</h2>
        More text.
      <h2>Another heading</h2>
       Even more text.
    </Fragment>
  );
}

10 . All files related to any one component should be in a single folder

11 . Functional components should be favored if we do not need to make use of React state.

12 . Anonymous functions should not be used as handlers.

13 . Inline styles should not be used inside component.

14 . For a component to hide itself return null from render.

15 . Higher Order Components should be used for cross-cutting concerns.

16 . Prefer state initialization in class member variable declaration over constructor

17 . Index should not be used as a key

18 . Short-Circuit evaluation should be used in jsx

// Avoid
const sampleComponent = () => {
  return isTrue ? <p>True!</p> : null
};

// Recommended: short-circuit evaluation
const sampleComponent = () => {
  return isTrue && <p>True!</p>
};

Would love to hear from you guys if you could add up practices in my above list.
Comment down below 👇

Just Enough CSS for Developers to Know!

Aditya Sharan — Tue, 16 Mar 2021 20:30:32 +0000

How CSS works ?

Selectors:
CSS Selectors define the elements to which a set of CSS rules apply.
Specificity:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element.
Cascade:
The cascade is an algorithm that defines how to combine property values originating from different sources.

How to render an element?

How to render where I want ?

Postioning: The position CSS property sets how an element is positioned in a document.

Float: The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

How to render the entire row of elements?

Flex:
The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

How to render the entire page as I wish?

Grid:
The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
Layout:
A CSS Layout mode,sometimes simply called layout, is a algorithm that determines the position and size of the boxes based on the way they interact with their sibling and ancestor boxes.

How to layout on different screen size ?

Media Queires:
Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
Responsive Design:
Responsive Design is a team used to describe an approach to web design or a set of best practices,used to create a layout that can respond to the device being used to view the content.

How to make it Beautiful?

Font
Colours
Gradients
Backgrounds

How to make it more interesting?

Animations
Transitions
Transform

How to make Dev faster and Organised?

Using CSS Pre-processor:
Sass Less,Post CSS or any pre-processor.

How to ease Teamwork and Seperation?

BEM(Block Element Modifier):
The BEM methodoogy is a popular naming convention for classes in HTML and CSS.It's goal is to help developers better understand the relationship between the HTML and CSS in a given project.

That was it for this little article. I got to learn so much from this. And I hope you also find this useful. Thank u so much! 😀

[DON'T STAY BEHIND]Study these topics to see yourself becoming a confident Web devloper

Aditya Sharan — Tue, 16 Mar 2021 18:05:14 +0000

Note:This is not a roadmap.It's just a list of topics which i feel people tend to forget after studying web development.So here are some topics which could read and refresh them on the weekend.

MUST know Browser Concepts:

History
Document
Location
Navigation
pageXOffset
Screen
Alert
Print
resizeBy and resizeTo

MUST know HTML Concepts:

Attributes
Base URI
nth-child
siblings
appending child
insert before and after
remove child

MUST know Javascript Concepts:

mouseover Vs mouseenter
keydown Vs keypress Vs keyup
double click
right click
debounce
throttle
prototypal inheritance
focus vs blur
drag and drop
try-catch-throw-finally
error types

MUST know TypeScript Concepts:

Class Inheritance
Interfaces
Enums
Type Assertions
Generics
Intersection Types

You can google out the topics mentioned above and get the resouces to read and watch.All the best
Happy Learning!!
Would be glad to know about the topics that you think should get added onto any of these list.
Comment down below 👇

SQL tips that will make you productive from day1 at your job.

Aditya Sharan — Tue, 16 Mar 2021 17:43:41 +0000

In this post,I'm going to write the SQL skills which i feel usually required in the day to day responsiblities of a developer.

Topic1: Window Functions

Topic2: CTE and WTH

Topic3: Query Optimization

Topic4: Organized, Clean Syntax

Topic5: User Defined Functions

But for the interview prep specifically you may not need the above 5 but you should have these ready:

1.) COALESCE and CASE WHEN

2.) Subqueries

3.)COUNT DISTINCT

4.)Self Joins

5.)Different join types

Here is a Bonus tip for you:

There are lot of keywords in SQL but do you know they follow up an order of precendence.

From >Join> Where > Group By> Having> Select> Order By> Limit

Happy SQL Learning !

Personalised GIT CheatSheet(For Specific Situations)

Aditya Sharan — Tue, 16 Mar 2021 17:03:42 +0000

In this post,I have considered all the common situations which i have come across while working as developer, curated all the commands and listed down according to the situation.
With more than 160 commands available, becoming a git expert takes time. But everyone has a few commands that they use frequently. In this post I’ll share mine.

SITUATION 1:I want a clean working directory, but I don’t want to lose my current changes.

# save the current state of the working directory 
git stash

# apply the latest stashed change to your current working tree
git stash pop

# list stashed changes
git stash list

SITUATION 2: I messed up my last commit message.

# change the latest commit's message 
git commit --amend -m "Fixed message"

SITUATION 3: I accidentally pushed a file. Now I want to remove it from the remote branch (but not from my local branch).

git rm --cached <file-path>

SITUATION 4: I made a bunch of changes to a file but I regret it 😱. I want to go back to the main branch version.

git checkout main <file-path>

SITUATION 5: I want to take a commit from one branch and apply it onto mine.

git cherry-pick <commit-hash>

SITUATION 6: I want my branch to be based off the most recent commit of the main branch.

# 1. Get the latest version of the main branch 
git checkout main
git pull origin

# 2. Checkout your branch
git checkout <my-branch>

# 3. Replay your changes on top of the main branch
git rebase main

SITUATION 7:I merged my branch into main but I want to rollback the merge

# 1. Checkout a new branch from the main branch
git checkout -b mybranch-rollback

# 2. Find out the commit hash that merged your branch to develop.
git log 

# 3. Revert the merge commit
git revert -m 1 <commit-hash>

# 4. Push the changes to your new branch
git push origin mybranch-rollback

# 5. Open a pull request to main for your new branch

If you liked it, follow me on github
Would love to hear from you which commands you use daily so that i get to learn all those as well.
Comment down below 👇

A thing to keep in mind when using fetch() [API Call]

Aditya Sharan — Sat, 13 Mar 2021 18:16:35 +0000

Take a look at the below code:

fetch('https://jsonplaceholder.typicode.com/todos/4')
        .then(response => response.json())
            .then(result => console.log('success:',result))
                .catch(error => console.log('error:', error));

Here, we’re making an API call to get a todo with id 4 and it will work
because there is a todo with id 4 But what If the id does not exist or the
server throws an error like 404 or 500 or any other error?

fetch('https://jsonplaceholder.typicode.com/todos/2382822')
        .then(response => response.json())
            .then(result => console.log('success:',result))
                .catch(error => console.log('error:', error));

Here, we have provided a very large id that does not exist. But if you
execute in the browser console, you will see that a success message is
printed even though it’s clearly a 404 error.
Ideally, the .catch handler should be executed but that does not
happen in the case of fetch .
fetch only goes into .catch handler when it fails to make the
request for example when the network is not available or the domain
does not exist.

So If you’re using fetch for performing CRUD (create, read, update,
delete) operation and the id do not exist then you will get an error.
If you’re using fetch then you have to write a lot of extra code for
handling every HTTP status code error which is cumbersome.
So If you’re building a large scale application or you don’t want to
handle all HTTP status code errors, then use axios or superagent or
any other library instead of fetch .
Because in all of those libraries catch will be executed when there is
any type of error that is easy to handle rather than writing code for
every status code.
This is the reason, you will find code for fetch written like this:

fetch('https://jsonplaceholder.typicode.com/todos/4')
                .then((response) => {
                   if (response.ok) {
                     return response.json();
                   }
                    return Promise.reject(response);
                })
                .then((result) => {
                    console.log(result);
                })
                .catch((error) => {
                    console.log('Something went wrong.', error);
                });

where inside the .then handler, we’re checking if the response is ok .
If the response is OK , we’re calling response.json() method which
will send the result to the next .then handler.
If the response is NOT OK, then we’re rejecting the promise so it will
call the .catch() handler to print the actual error.

I hope this article help you to understand something or improve yourself ! If you have any question ask me in comment !
Would be Happy to HELP! 😊

JSX and Rendering elements

Aditya Sharan — Tue, 14 Jul 2020 21:36:32 +0000

This is neither a string nor HTML,it's JSX.

JSX or Javascript XML, is an XML/HTML-like syntax used by react that extends ECMAScript(ES) so that XML/HTML-like-text can co-exist with Javascript/React code.

Since JSX is closer to Javascript than to HTML,ReactDOM uses camelCase property naming convention instead of HTML attribute names.
For eg :
class becomes className
tabindex becomes tabIndex

Let's say there is a somewhere in your HTML file :

# This is the 'root' DOM node because everything inside it will be managed by ReactDOM.

To render a React element into a root DOM node, pass both to ReactDOM.render() :

Running you react app after this will give the following output :

That's all folks.
Thanks for reading!