DEV Community: Mubashshira Amjad

Some Concepts of Backend

Mubashshira Amjad — Sun, 26 Dec 2021 13:01:10 +0000

CRUD Operations:

CRUD is an acronym that stands for Create, Read, Update and Delete. It refers to the operations implemented by databases. The NoSQL database MongoDB has these operations to create, read, update and delete documents.
Create Operations: This operation is used to add a new document to a collection. The document can be newly created or inserted into an existing one. If there is no existing collection, then the insert operation creates a new collection. Insert operation basically targets a single collection. The method of inserting document into a collection in MongoDB is -
db.collection.insertOne()
db.collection.insertMany()

Read Operations: This operation is used to retrieve a document from a collection. We can set query filters to identify a specific document. The method of retrieving documents from a collection in MongoDB is -
db.collection.find()

Update Operations: This operation is used to modify an existing document in a collection. Update operation basically targets a single collection. We can specify criteria or filters to identify the specific document to update. The method of updating documents from a collection in MongoDB is -
db.collection.updateOne()
db.collection.updateMany()
db.collection.replaceOne()

Delete Operations: This operation deletes or removes a document from a collection. Delete operation basically targets a single collection. We can specify criteria or filters to identify the specific document to delete. The method of deleting documents from a collection in MongoDB is -
db.collection.deleteOne()
db.collection.deleteMany()

*Mongoose: *

Mongoose is an object data modeling(ODM) library for MongoDB and Nodejs. It is used to manage relationships between data and translate between objects in code and the representation of the objects in MongoDB. It provides schema validation as MongoDB is a schema-less NoSQL database. Everything starts with a schema in Mongoose and each schema maps to a MongoDB collection and the shape of the document is defined within that collection. Example of defining schema in Mongoose:

Express:
Express is a Node js web application framework that is equally flexible and minimal. It provides robust set of features for web and mobile applications. It provides a thin layer of features that is based on web application, without obscuring Nodejs features.

React Concepts

Mubashshira Amjad — Sat, 25 Dec 2021 16:43:57 +0000

Virtual DOM and diffing- algorithm:

For any web application, DOM manipulation is a necessary part. But it is quite a slow process in Real DOM. Virtual DOM was introduced to solve the problem of inefficient updating. For every object in DOM, there is corresponding virtual DOM. When the state of the object changes, virtual DOM only changes that part of the object in the real DOM but it doesn’t update the whole object. React basically works with two virtual DOMs to render the user interface. One is used to hold the previous state of the object and the other is used to hold the current state of the object. If the virtual DOM updates, react starts comparing the two virtual DOMs to know where the update happens and then renders that particular object in the real DOM.

JSX:

JSX stands for Javascript XML. It describes what the UI should look like. Using JSX, HTML structures can be written in the same file with Javascript codes.

Component Lifecycle:

Each React Component has a life cycle that we can monitor and manipulate in the three phases. Mounting, updating, and unmounting are the three phases of a react component's lifecycle.

Mounting is used to put elements into the DOM.Update happens when there is a change in any state or props. When a component is removed from the DOM, unmounting is called.

Context API:

The process in which props are passed through the tree from one part to another is called prop drilling. But in this process, props go through the parts of the tree that don’t need the data. It makes the application unmanageable and complex. To solve this problem the concept of context API was introduced.
Context API is a way in React to share data to any component by storing the data in a central place and giving access to any component that needs it. To apply context API, React.createContext() is needed that returns two components, a provider and a consumer. The provider provides states to the children components and consumer consumes and uses the states.

Custom hooks:

Custom hooks in React are used to add unique and special functionalities to react applications. Custom hooks start with ‘use’ and can call other hooks.
function clientStatus(props) {
Const isAvailable = useClientStatus(props.clientId){
if(isAvailable === null){
return ‘Checking’;
}
return isAvailable? ‘Available’ : ‘Not Available’;
}

Optimize a react js application:

We can optimize a react js application by:
Using functional component
Dependency optimization
Using react fragments
Avoid using the index as a key for the map
Avoid props in the initial state
Optimizing dependencies

Some CSS concepts

Mubashshira Amjad — Thu, 23 Dec 2021 17:35:13 +0000

                                        Some CSS concepts

CSS position property
The position in CSS is a property of an element that specifies the type of positioning method of that element. These positioning methods can be static, relative, absolute, fixed and sticky.
1) Static Position: It is the default position of an element. Element renders in order as their appearance in the document flow.
2) Relative Position: The element is positioned relative to its original position.An element can be adjusted away from its normal position by setting the top, bottom, right, left properties.
3) Absolute Position: The element is positioned relative to its parent or ancestor element. The values of left, right, top, bottom determine the final position of the element.
4) Fixed Position: The element is positioned relative to the viewport or the browser window. Fixed positioned element stays in the same place even if the page is scrolled by the user. The top, bottom, right, left properties are used to position the element.
5) Sticky Position: The element is positioned based on the user's scrolling. This position is a hybrid between relative and fixed or in other words, it toggles between relative and fixed position and depends on the scroll position. An element that is sticky positioned, is positioned relative until the given position is met in the document flow or viewport and then it sticks at the same position like fixed positioning.

Difference between inline, inline-block, and block
Inline element: An inline element does not start on a new line, rather it sits next to the previous inline element. It only occupies the space it needs rather than occupying the whole space available.

, , , ,
, , etc are some inline elements. An inline element cannot contain a block element. We cannot set the height, width, margin top and bottom of an inline element. But we can set margin right and margin left of an inline element.
Block element: A block element starts on a new line and occupies the whole space available. We can set height, width, margin and padding to a block element. , , ,

,
-
, , etc are some block elements.
Inline-block element: Inline-block elements don’t add line break after an element so the element can sit next to the other element. Inline-block doesn’t start on a new line Again inline-block allows setting height and width of an element. By declaring inline elements as inline-block, we can set height and width of inline elements. , , select and textarea are inline-block elements.