DEV Community: Ruchi Vora

Tips to maintain clean git commit history

Ruchi Vora — Sat, 07 May 2022 15:53:14 +0000

Solution 1 :

Lets say you are working on a feature and created a feature branch F1 by checking out from master. While working on the feature branch F1 , you created multiple intermediate commits. However, when you check the commit history you find some of these commits redundant. In such case you can squash the commits i.e you can combine multiple commits and make it a one commit.

Below is the commit history of the feature branch before and after the squash.

Command to squash the last X commits using interactive rebase is:

git rebase -i HEAD~[X]

The squashing of commits is also useful when you want to merge your feature branch to master branch.As by squashing, all the redundant commits can be removed and after merging the feature branch to master, the git commit history is clean.

Advantage of squashing :

The git history remains clean

Disadvantage of squashing :

The detailed branch history is no longer available.

Before going to the second solution , let's understand the difference between git merge and git rebase.

git merge VS git rebase

Both git merge and git rebase is used to merge the code from feature branch to the main(master) branch.

git merge

When we use git merge command to merge the code from feature branch to master , then git will take all the changes from my feature branch and create a special commit on top of my commit , called as merge commit that contains all the changes from my feature branch and place this merge commit on top of master branch. The git commit graph will look like this

Command to merge the fetaure_branch in master branch is:

git checkout master
git merge feature_branch

Let's understand git rebase with Solution 2

Solution 2 :

In order to maintain a clean commit history , instead of git merge do git rebase. What rebase will do is , it will take all the commits from the feature branch and move them on top of master commits. The graph structure of the commits looks like this

Command to rebase fetaure_branch with master branch is:

git checkout master
git rebase feature_branch

Advantage of git rebase :

It keeps the commit history of the main branch clean and hence it becomes easy to track

Disadvantage of git rebase :

The detailed branch history is no longer available.

So using squashing of commits and then rebaseing with master will keep the commit history clean and trackable.

Why Python?

Ruchi Vora — Fri, 07 Jan 2022 10:48:10 +0000

Have you ever wondered why companies are nowadays preferring Python over Java for backend development?

The answer to the above question lies in the awesome features that Python provides.

Following are the features of python:

Python is a very easy Programming Language. It’s like writing the code in the English Language.
Python is a general-purpose high-level Programming Language.
- general-purpose- As it can be used to build a web app, machine learning, desktop app, robotics, artificial intelligence, IoT, gaming, data Analysis
- high-Level Programming Language- Assembly language is a low-level language and can interact with the hardware but is not human friendly. However Python, Java is a high- level programming language.
Python is a dynamically typed language. i.e You need not declare the type of variable. It is assigned automatically based on the value that you store in the variable. Eg: a = 10 , b =10.0 To debug the code in Python, you can use Type(variable) as the variable can save any type. However, Java and C are statically typed languages. You always declare the variable with type in advance
Python has the following programming features, borrowed from different languages
- Functional Programming from C
- OOP from C++
- Scripting language feature from Perl and Shell Script
- Modular programming language
It has borrowed the syntax from C and ABC Programming Language
Python is platform-independent- You can write the code once in any O.S and can run the code anywhere.
Python is portable- Portability means you write the code in one machine and then if you port the code to any other machine then it won't require any changes.
Interpreted Language- To run the program you need not compile the program. To understand the difference between compiled Language and Interpreted Language refer to this https://www.freecodecamp.org/news/compiled-versus-interpreted-languages/
Extensible- Extensible feature in python refers that you can write some of your Python code in other languages like C or C++. It means that it can be extended to other languages which makes python an extensible language. It’s not extending the language itself (syntax, constructs, etc), but it lets you interface python with libraries written in other languages. which simply means that you can write code in other languages in your python source code. By implementing this feature you can improve performance.
Embedded: Python code can be embedded in any other programming language.
Extensive Library Support

Need For Full Text Search

Ruchi Vora — Tue, 23 Nov 2021 15:07:06 +0000

As the name suggests Full Text Search is a method which is heavily used to get the relevant and faster search result especially when we have high volume of unstructured data.

Some of the use cases in which Full text search is used include :

1. Searching for a product on E-Commerce Website
2. Searching movies based on the description,movie star etc
3. Searching on Google( any search engine ) 
and many more....

Need for Full text search ?
As the volume of data and number of users grow , performing search on a column of a relational database using LIKE operator is inefficient and time consuming. Even if we create an index on the column the search is not efficient because if the LIKE operator has a wild card then that require every key of the index to be examined . Also relational database do not provide fuzzy search.

Lets understand the difference between Full Text Search and LIKE operator of relational database with an example.

Lets say we have a database that stores all the comments of Virat Kholi's Instagram post, and you want to search for all the comments related to the word(concept) running.Then in such case if you perform a search query using LIKE = 'run' then your query would return all the comments that contains the word run.
If the comment contains the word 'RAN' , then also that comment is related to running but that won't be returned by the LIKE operator.However,if the search is performed using some Full Text Search Solution then it returns all the comments that contains the word run,ran,running etc .
Hence , In order to find more relevant search, Full text search solution is being used as the data becomes unstructured and the number of users grow .

How does Full text search solution give appropriate(relevant) search result ?
How Full Text Search returns the results faster than the LIKE operator on indexed Column ?

Full Text Search achieves above things by creating inverted index for the stored data. Inverted index is a hashmap like data structure that directs you from a word to a document or a web page. Lets understand with an example.
Imagine that you have documents like this:

doc1: "Today it's a perfect day to start my workout."
doc2: "I will not come today to meet you."
doc3: "Our meeting will start soon!"
doc4: "My class starts at 6."

Following are the steps used to create an inverted index:

Tokenizing : It just extracts the words from the sentence. And each word extracted from the sentence is called the token.
Remove stop words : The words like 'I' ,'You', 'Your' etc occur frequently and are useless words occurring in a document.Hence we remove these stop words.
Stemming of Root Word : Whenever I want to search for 'start', I want to see a document that has information about it. But the word present in the document is 'starts' . To relate the word 'start' and 'starts' , We chop some part of each word and then we get 'root word'.

After tokenization, removing stop words, stemming the documents will look like this:

doc1: ["today", "perfect", "day", "start", "workout"]
doc2: ["come", "today", "meet"]
doc3: ["meet", "start", "soon"]
doc4: ["class", "start"]

Now we create a hashmap with word as the key and document Id as the values.

today     : [doc1, doc2]
perfect   : [doc1]
day       : [doc1]
start     : [doc1, doc3]
workout   : [doc1]
come      : [doc2]
meet      : [doc2, doc3]
class     : [doc4]
soon      : [doc3]

This process is called indexing and the above mapping is called inverted index.

As the documents are stored in this format,the full text search gives most relevant search result .
And searching a word in full text search solutions takes O(1). However searching in relational database with index on the column takes O(log H) where H = Height of the B Tree , as it uses B Tree to create an index.

Various Full Text Search Solution present are Solr , Elastic Search which uses Lucene.

HTTP Methods And Its Use Case

Ruchi Vora — Wed, 10 Nov 2021 14:34:07 +0000

HTTP is an Application Layer Protocol and the REST API uses HTTP or HTTPS to exchange data between Client and Server using HTTP methods like :

GET
POST
PUT
PATCH
DELETE

These HTTP methods are used to perform CRUD (Create ,Read ,Update ,Delete) operations on the resource.
Here resource can be a row of a relational database or a document in the case of the NoSql database or it can be any other form of a resource.

Let's understand each of the Http methods with an example of a document store. Where each document contains information about an Employee in the company.

GET Method : GET method is used to retrieve the resource. For Eg : If you want to check the details of an Employee whose id is 10. Then the GET request will look like

curl --request GET 'localhost:8080/EmployeeDetail/10'

The response of the GET request will be :

{
   'id' : '10',
   'name' : 'ruchi',
   'dob'  : '02-04-2001',
   'location' : 'new york',
   'department' : 'IT'
}

The GET request can be cached. If multiple requests are made to retrieve the data of an Employee whose id is 10 , then all of them will receive the same data. So instead of hitting the server again and again for the same static data , the response of the request can be cached.
Also the GET request is Idempotent. Which means that even though multiple requests are made for an employee with id as 10 , it returns the same response.
The various HTTP response code returned by GET requests are
- 200 (OK) - If the resource is found on the server. i.e If an Employee with id 10 exists then the HTTP response code 200 along with the resource is returned.
- 404 ( NOT FOUND ) - If the resource does not exists on server. i.e If a document with Employee id 10 does not exists on server then HTTP response code 404 is returned
- 400 ( BAD REQUEST ) - GET request itself is not correctly formed then the server will return the HTTP response code 400

POST Method : POST method is used to create a new resource.For Eg: If you want to insert the data of a new Employee who has just joined the company , then in such case POST method is used . The POST request will look like

   curl -d '{
              'name':'ram',
              'dob' :'06-06-2000', 
              'location':'Mumbai',
              'department':'IT'
            }' -X POST -H 'Content-Type: application/json' 
   localhost:8080/EmployeeDetail

Here , We do not pass the Id , assuming that ID is a unique
key generated by server.

POST request can not be cached.
POST request is not Idempotent . Hence, if multiple request with same data is sent to same url then two documents are created with same data but different Id , as Id being the unique key generated by the server.
The various HTTP response code returned by POST requests
- 201 ( Created ) - If the new resource is created i.e If a document for new Employee is created then it returns HTTP response code 201

PUT Method : PUT Method is used to perform UPSERT operation.Which means if the resource does not exists then it is created and if the resource exists then the whole resource is updated. For Eg: If we send a request with Employee Id 100 , and if there exists no Employee with Id as 100 then the new resource is created(assume that client can generate an Employee Id and server also accepts the Id generated by client). If the Employee with Id 100 exists then the whole resource(document) is updated(even though there is no change in the data).The PUT request looks like this :

     curl -d '{
               'id'  :'100'
               'name':'ram',
               'dob' :'06-06-2000', 
               'location':'Mumbai',
               'department':'IT'
            }' -X PUT -H 'Content-Type: application/json' 
   localhost:8080/EmployeeDetail

PUT request can not be cached
PUT request is idempotent , as if N PUT requests are made then the very first request will update the resource; the other N-1 requests will just overwrite the same resource state again and again – effectively not changing anything. Hence, PUT is idempotent.
The various HTTP response code returned by PUT requests
- 201 ( Created ) - If the new resource is created i.e If a document for new Employee is created then it returns HTTP response code 201
- 200 ( OK ) - If the existing resource is updated.
- 404 ( Not Found ) - If ID is not found or invalid.
- 405 (Method not allowed) - If you are trying to update the Employee Id which is the unique key.

PATCH Method : PATCH Method is used to make a partial update to a resource. which means if an Employee with id 10 has changed his department then in order to update only the department key PATCH Method can be used. The PATCH method looks like this

   curl -d '{'department':'IT'}' -X PATCH -H 'Content-Type: 
   application/json' localhost:8080/EmployeeDetail/10

PATCH request can not be cached
Most of the PATCH request are Idempotent similar to PUT , but some PATCH requests are not Idempotent.
The various HTTP response code returned by POST requests
- 200 ( OK ) - If the existing resource is partially updated.
- 404 (Not Found) - If ID is not found or invalid
- 405 (Method not allowed) - If you are trying to update the Employee Id which is the unique key.

DELETE Method : DELETE Method is used to delete a resource.For Eg: If we want to delete Employee with Id as 10 then the DELETE method looks like this

   curl -X DELETE -H localhost:8080/EmployeeDetail/10

DELETE request can not be cached.
DELETE operations are idempotent. If you DELETE a resource, it’s removed from the collection of resources. Repeatedly calling DELETE API on that resource will not change the outcome – however, calling DELETE on a resource a second time will return a 404 (NOT FOUND) since it was already removed.

How to add vanilla bootstrap to nextjs

Ruchi Vora — Sat, 03 Jul 2021 19:07:53 +0000

I was recently setting up a project in nextjs , and had the same question How to add vanilla bootstrap to nextjs?. On searching above question on google , i got blogs and documentation on How to add react-bootstrap to nextjs?. Although adding vanilla bootstrap to the nextjs project is very easy , but its easy only when you know it . And being a newbie to nextjs i had to struggle a bit , so i thought of writing a blog and explain you the steps.

Step 1: Add bootstrap package in your project , using

npm install bootstrap@next

Once , you install bootstrap , it would be seen in your package.json file under dependencies. And all the files related to bootstrap would be present in node_modules folder.

Step 2: As bootstrap is used by both components and pages , bootstrap should be added to pages/_app.js file

import 'bootstrap/dist/css/bootstrap.min.css';

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

Once it is added to the pages/_app.js file , the bootstrap classes can be accessed from components and pages folder.

Block Storage Vs Object Storage

Ruchi Vora — Sun, 18 Apr 2021 02:52:28 +0000

Let's understand the difference between block and object storage with the help of an example. Suppose we have an excel file of 100MB in size.

Block Storage

How the 100MB file will be stored in Block Storage?
In the case of block storage, the 100MB file is divided into 10 blocks, each of 10MB and stored in the memory. Here ,by memory, I mean hard disk. Each block of data is given a unique identifier, which allows a storage system to place the smaller pieces of data wherever is most convenient.

How can you access the 100MB file?

Each block storage can be treated as an individual hard disk, and hence can access the data via an operating system. This operating system can be present locally or network-attached in case of cloud storage.

How updates are performed on the 100MB file?

So, if I want to make changes in the few cells of the 100MB excel sheet, then in the memory only those blocks in which we have made changes are updated. Updates are not performed on all the 10 blocks.

Advantages of using block storage :

Read/Write operation is faster
As storage needs grow, organizations can add block storage volumes without sacrificing performance but can hamper durability.
Follows file structure hence is human friendly

Disadvantages of using block storage

Block storage uses very limited metadata. This can affect application performance in metadata critical operations, such as search and retrieval, because the application cannot identify the storage location by meaningful metadata, and may have to scan a large number of blocks to find the required data.
Greater the distance between storage and application, the higher is the latency.
Block storage is expensive. Because it requires expensive hardware and highly trained maintenance personnel.

Use case and cloud examples

Block storage is useful for highly structured data.
useful for database and transactional data.
AWS Elastic block storage (EBS), provides raw storage just like hard disk, which you can attach with your EC2 instance.

Object Storage

How the 100GB file will be stored in Object Storage?
In object storage, the data is broken into discrete units called objects and is kept in a single repository, instead of being kept as files in folders or as blocks on servers.
In the case of object storage, the 100MB file is not divided into chunks. Instead, entire clumps of data are stored in, as a single object. Each object consists of three things. The data (100MB file), expandable amount of metadata and a globally unique identifier.

How can you access the 100MB file?

Each object has a globally unique identifier and requires a simple HTTP application programming interface (API), which is used by most clients in all languages.

How updates are performed on the 100MB file?

So, if I want to make changes in the few cells of the 100MB excel sheet, then in object storage, the entire file is updated.This makes the update operation very heavy.

Advantages of using object storage :

object-based storage, is a flat structure in which files are broken into pieces and spread out among hardware. In object storage, the data is broken into discrete units called objects and is kept in a single repository, instead of being kept as files in folders or as blocks on servers.
Read operations are much faster
Object-based storage architectures can be scaled up and managed simply by adding additional nodes

Disadvantages of using object storage

1.You can not use object storage to store transactional and database data.
2.It does not allow you to alter a piece of data, you must read and write the entire object.

Use case and cloud examples

Used for storing unstructured data eg: image,videos
AWS Simple Storage Service (S3), is used extensively for storing files, whose frequent operation is read.

Feel free to ask any doubts.

Client-side rendering Vs Server-side rendering

Ruchi Vora — Sun, 04 Apr 2021 13:12:21 +0000

The concept of Client-side rendering(CSR) and server-side rendering(SSR) revolves around how the response is sent by the server when a client requests it.
Let's understand the difference between CSR and SSR with an example. Suppose you want to buy a headphone and for that, from your browser, you will go to Amazon.com and search for headphone. Let's convert the above example in client-server terminology and what happens behind the scenes.
Here, your browser is the client and amazon is the server. So, you send the request to Amazon(server) and your browser(client) get the response. The response, in this case, is the list of headphones available on amazon. Amazon has two choices to serve the request. It can either serve the request by CSR or SSR.

How the request is served by amazon in the case of SSR?
When you send the request to amazon, then the response to your browser is the HTML page that will be rendered on the browser.The response will be somewhat

<HTML>
 <head></head>
  <body>
    <div>
      <img src="head_phone_img1.jpg" height=100 width=100>
    </div>
   </body>
</HTML>

So, your browser will have to render HTML and will not have to wait for the javascript to be downloaded. So, the time for the first byte to reach the browser will be higher as the server will take some time to create the HTML page. And the number of network calls will also be higher because for each and every request the server will take some time to send the response. So for each request the server responds by generating and returning a completely new page for every interaction

How the request is served by amazon in the case of CSR?
When you send the request to amazon, the response is the plain HTML with the contents to be rendered by javascript.
Hence the browser has to wait till the javascript is downloaded and then it can insert the element in the plain HTML.So, the time required to render the page depends on the Clients internet. So if the speed of the internet is good, the page will be rendered at a faster rate.

Index.html
<HTML>
  <head></head>
   <body>
     <div id ="root" >
      <script src="index.js"></script>
     </div>
   </body>
</HTML>

Javascript to add contents to the page.

Index.js
document.getElementById("root").innerHTML = ' <img src="head_phone_img1.jpg"> '

This is a new approach to render the website and became popular with various frameworks like react,vue, angular etc.
The websites rendered with CSR are more interactive and the number of network calls is also reduced. Client-side rendering avoids making unnecessary requests for a full page when only a portion of the page has changed.

If client-side rendering is so useful then why do most of the company prefer SSR?
One of the drawbacks of CSR is SEO gets tempered, Since the content is not rendered until the page is loaded on the browser, the web crawlers can not crawl the page.

How the companies reduce the number of network calls and speed with SSR?
So, the speed can be increased by introducing caching layer.So when the client requests for the page, it first looks for it in the cache and thus the latency of network call can be reduced.

Pros and Cons of SSR

Search engines can perform SEO
Initial page load is faster
Frequent network calls
reloads the page again and again

Pros and Cons of CSR

Number of network calls is less
SEO gets hit
Initial page load takes longer

So it is very important to decide whether to go for CSR or SSR depending on the use case.
For example,

In the case of e-commerce SEO plays a very important role. So, in such case SSR can be used. But speed is also a very huge factor, to ensure that, it can use caching mechanism.
For a web application like Facebook or WhatsApp web, where SEO does not matter alot but the speed and client interaction plays an important role, in such case CSR can be used