DEV Community: SraboniAkhter

MongoDB

SraboniAkhter — Thu, 23 Dec 2021 14:58:39 +0000

Introduction:
As a backend developer, you can use MongoDB Realm to quickly develop cloud-based applications. Realm apps can respond to changes to your MongoDB Atlas data, connect that data to other systems, and scale to meet demand. This means that MongoDB is not based on a relational database structure like a table but provides a completely different process for data storage and retrieval. This format of storage is called BSON ‘similar to JSON format’.
Relational database management systems (RDBMS) are not the right choice when it comes to handling big data due to their design quality as they are not horizontally scalable. If the database runs on a single server, it will reach a scaling limit.

Relational Database Management System vs MongoDB:
RDBMS has a simple schema design that shows the relationship between the number of tables and this table where MongoDB is document-based. No idea of schema or relationship.
Complex transactions are not supported on MongoDB because complex join operations are not available.
There are several related terms in both databases. In RDBMS, what is called a table is called a collection in MongoDB. Similarly, a tipple is called a document and a column is called a field. MongoDB provides a default '_id' which is a 12-byte hexadecimal number that ensures the uniqueness of each document. It is like the primary key of RDBMS.

Features of MongoDB:
Document Oriented: MongoDB preserves the core content in a minimal number of documents and does not divide it into multiple relational structures like RDBMS. For example, it stores all of a computer's information in a single document called a computer, and not in separate relative structures such as CPU, RAM, hard disk, etc.
Scalability: Scale horizontally (partitioning data across different servers) using MongDB Sharing. The data is divided into data segments using the shard key, and these data segments are evenly distributed across the shard that resides on many physical servers. Also, new machines can be added to a running database.
Copy and High Availability: MongoDB increases data availability with multiple copies of data across different servers. Provides redundancy, it protects the database from hardware failure. If one server goes down, data can be easily recovered from other active servers on which the data was stored.
Where do we use MongoDB?
If you have a lot of data stored on the table, think of MongoDB before the RDBMS database. MongoDB has built-in solutions for partitioning and sharding your database.
It is difficult to add a new column to RDBMS where MongoDB is schema-less. Adding a new field does not affect the old documents and it will be much easier
Since multiple copies of data are stored on different servers, data recovery is instant and secure even if there is a hardware failure.
Language Support by MongoDB:
MongoDB currently provides official driver support for all popular programming languages such as C, C ++, Rust, C #, Java, Node.js, Perl, PHP, Python, Ruby, Scala, Go, and Erlang.

Installing MongoDB:

Just go to http://www.mongodb.org/downloads and select your operating system from Windows, Linux, Mac OS X and Solaris. A detailed explanation of the installation of MongoDB is provided on their site.For Windows, some options drop down for 64-bit operating systems. When you are running Windows 7, 8 or later, select Windows 64-bit 2008 R2 +. Select Windows 64-bit 2008 R2 + Legacy when you are using Windows XP or Vista.

Conclusion:
MongoDB is an open source NoSQL database management program. NoSQL is used as an alternative to traditional relational databases. Distributing NoSQL databases is quite effective for working with large sets of data. MongoDB is a tool for managing, storing or retrieving document-based information.

State in React

SraboniAkhter — Wed, 22 Dec 2021 15:18:54 +0000

Introduction
In the previous article of React.JS | Components, we have learned that feedback components can be broadly classified into functional and class components. It can also be seen that the functional components are faster and much easier than the class components. The primary difference between the two is the availability of the state.

What is the State?
State is a plain JavaScript object used by the feedback to present information about the current state of the component. It is managed in the component just like any variable declared in a function. Proper use of the state implies that no one applies direct changes to the state variable, since it will not be considered a change by response. Instead we should go through it using setstate() which is the function that determines the updates of the state object.
However, setState() does not always update the material immediately. This may delay the batch or update until later. This turns this.state reading into a possible loss to setState().
Difference of Props and State.
The main difference between a props and a state is that the state is controlled by the internal and the component while the prop is external and the component is controlled by whatever is rendered.React hooks usestates and other methods can be used in states, class components, functional components when props do not have this limitation.Although the props are set by the parent component, the state is usually updated by the event handlers. For example, let us consider toggling the theme on the messenger IDE page. This can be applied using the state where the potential values of the state can be either light or dark and after selection, the color of the IDE changes.

Conventions of Using State in React
The state of an element should exist throughout life, thus we must first have some initial state, to do this we must define the state in the class constructor of the element. We can use the following sample format to determine the status of any class.
Class MyCourse extends React.Component{ constructor(props) {
super(props);
this.state = { attribute : "value" };
}
}
State should never be updated explicitly
The react uses an observable object as a state that observes what has changed in the state and helps the element to behave accordingly. For example, if we update the status of any of the elements as below, the webpage will not render itself because it will not be able to detect response status changes.The react provides its own method setstate(). The setState() method takes a single parameter and expects an object so the set of values should be updated. Once updated, the method implicitly calls the render () method to repaint the page.
State updates are independent
A component's state object can have multiple attributes, and React allows the use of the setstate() function to update only one subset of those attributes, as well as the use of multiple setState () methods to independently update the value of each attribute.React internally merges setstate() methods or updates only those features that are need. For example-
this.state = {
darkTheme: False,
search: ''
};
Conclusion
We should have a clear idea of the state in the react after viewing the article, but we can add user-defined functions in addition to the constructor and render method.We can create user-defined functions within a class.If the response is a canvas that represents the status of your application at any given time, then it is really important that the state is correct.

Understand event loops, callbacks, commitments and asynchronous / await in JavaScript

SraboniAkhter — Mon, 20 Dec 2021 18:43:23 +0000

Introduction
Since JavaScript is a single-threaded programming language with a synchronous execution model that processes one operation after another, it can only process one statement at a time. However, an action like requesting data from an API may take an indefinite amount of time depending on the size of the requested data, network connection speed and other factors. If API calls are performed in a synchronous manner, the browser will not be able to handle any user input until that operation is completed, such as scrolling or clicking a button. This is known as blocking.
To prevent blocking behavior, the browser environment has many web APIs that can access JavaScript that are asynchronous, meaning they can run parallel to other activities instead of sequentially. This is useful because it allows the user to continue using the browser in general while processing asynchronous activities.
As a JavaScript developer, you need to know how to work with the Asynchronous Web API and how to handle responses or errors in those activities. In this article, you will learn about Event Loop, the real way to deal with asynchronous behavior via callback, updated ECMAScript 2015 additions to commitments, and the modern practice of using async / await.

Contents
Callback function
Event loop
Async / await with async function
Nested Callback and Pyramid of Doom
Promise

Event loop
An example of this is the settimeout method. When a setTimeout operation is processed within the stack, it is sent to the corresponding API that waits for a certain amount of time to return this operation for processing.Event Loop simplifies this process, It constantly checks to see if the call stack is empty.
Event Loop has a simple function - monitoring call stacks and callback queues. If the call stack is empty, the event will take the first event from the loop row and push it towards the call stack, which runs it efficiently. This type of repetition is called a tick in the event loop.
function first() {
console.log(1)
}
function second() {
console.log(2)
}
In this code, you define three functions that print numbers with console.log ().

Next, type the call into the function:
first ()
second ()

Callback
The key to solving this problem is to use the callback function. The callback function has no special syntax; They are only one function which has been passed as an argument to another function. A function that takes on another function as an argument is called a high-order function. According to this definition, any function can become a callback function if it is passed as an argument. Callbacks are not asynchronous by nature, but can be used for asynchronous purposes.
Nested Callback and Pyramid of Doom
A callback function is an efficient way to ensure that one function is delayed until the other is complete and returns with data. However, due to the nested nature of the callback, the code can become cluttered if you have a lot of asynchronous requests that depend on each other. This was a big disappointment for JavaScript developers at first, and as a result code containing nested callbacks is often called "Pyramid of Doom" or "Callback Hell".
Promise
A promise represents the completion of an asynchronous function. It is an object that can return a value in the future. It achieves the same basic goals as a callback function, but with many additional features and a more readable syntax.As a JavaScript developer, you'll probably spend more time creating commitments, because it's usually an asynchronous web API that promises to feed the developer. This tutorial will show you how to do both.
By making this change we now make sure that the else branch is inserted and is called the reject function instead of the solution function. By calling the denial function we are aware of the fact that the promise cannot be successfully resolved because an error has occurred.

Error handling
So far, you have only managed to make a commitment with a successful determination, which keeps the promise fulfilled. But often with an asynchronous request you have to handle an error if the API is down, or a malformed or unauthorized request is sent. A commitment should be able to handle both cases. In this section, you will create a promise and create a function to test both success and failure of use.
To handle the error, you will use the cache instance method. This will give you a failed callback with errors as parameters.
Async function with async / await
An asynchronous function allows you to manage asynchronous code in a way that shows synchronous. The async functions still use promise under the hood, but have a more traditional JavaScript syntax. In this section, you will try examples of this syntax.
Although this function still does not handle some asynchronous functions, it behaves differently than a conventional function. If you run the function, you will see that it provides a promise instead of a ‘Promise Status’ and ‘Promise Value’.
Conclusion
In this article, you learned how the host manages the execution of code, including stacks and queues, using the environment event loop. You've also tried three ways to manage the success or failure of an asynchronous event, including callbacks, promises, and asynchronous / waiting syntax. Finally, you use the Fetch Web API to manage asynchronous actions.

Some things you should be known as a JavaScript developer

SraboniAkhter — Mon, 20 Dec 2021 11:35:42 +0000

What to look for in a JavaScript developer
JavaScript is the single most important programming language used in the development of contemporary software. Approximately 95% of websites use JavaScript to introduce dynamic content to their visitors. Despite the importance of JavaScript for web and mobile development, many hiring managers do not know what to look for in a JavaScript developer.

If-else
If a certain condition is true then the if / else statement executes a block of code. If the condition is false, another block of code can be executed. The if / else statement is a part of JavaScript's "conditional" statement, which is used to perform different actions based on different conditions.
Example:
var number = 21;
if (number > 17) {
console.log(“condition is true”);
}else{
console.log(“condition is a false”);
}
null VS undefined
Null is a blank or non-existent value in JavaScript and must be assigned. But undefined means a variable has been declared, but a value has not been defined.
Example:
let number = null;
console.log(number);
// null
let sraboni;
console.log(sraboni);
// undefined

What is === in JavaScript?
=== A strict parity is called an operator, which shows the truth if two operands have the same value without conversion. If you compare "21" with 21 using ===, it will give you a false value.

** What is == in JavaScript?**
The parity compares two objects based on the operator or "==" memory reference. So the "==" operator will return true only if it compares the references of two objects and presents the exact same object otherwise "==" will return false.

double equal(==) VS triple equal(===)
“==” only tests for quality parity, where “===” is a strict parity test and returns false if the values or types of the two variables are different. The difference between == and === is that: == converts the variable values to the same type before performing comparison. This is called type coercion. === does not do any type conversion (coercion) and returns true only if both values and types are identical for the two variables being compared.

Introduction to Responsive Web Design:

SraboniAkhter — Sun, 19 Dec 2021 16:07:21 +0000

Introduction to Responsive Web Design

We can't talk about web development without talking about responsive design. It is only given these days and has been for many years. Media queries are a part of responsive design and they are not going anywhere. Since the introduction of media queries (literally decades ago), CSS has evolved to the point that there are many strategies that can help greatly reduce the use of media queries we use. In some cases, I will show you how to replace multiple media queries with just one CSS declaration. This approach can result in less code, be easier to maintain, and more consistent with the content at hand.
For example, some web designers, instead of ensuring a stable user experience across all browsers, make it their life's work, often spending days solving small problems with Internet Explorer.

Responsive web design approach
What is commonly seen about Responsive web design is not just about adjusting the look of your webpages; Instead, the focus should be on logically adapting your site for use across different devices. For example: using a mouse does not provide the same user experience as a touchscreen. Don't you agree Your responsive mobile versus desktop layout should reflect these differences.
At the same time, you don't want to completely rewrite your site for each of the ten different screen sizes where it can be viewed - this type of approach is simply impossible. Instead, the solution is to implement flexible responsive design elements that use the same HTML code to match the size of the user's screen.From a technical standpoint, the solution lies in this responsive design tutorial: using CSS media queries, pseudo-elements, flexible set grid layouts and other tools to dynamically adjust to a given resolution.

Media Queries in Responsive Design
Media types first appeared in HTML4 and CSS2.1, enabling separate CSS placements for screen and print. In this way, it was possible to set a different style with its printout for displaying a one-page computer.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

@media screen { * { background: gray; } }
This definition is possible by setting the basic features: max-width, device-width, adaptation and color. Other definitions are possible; But in this case, the most important things to note are the minimum resolution width and orientation settings landscape vs. portrait.
We can define different styles in the same CSS stylesheet as they are used only when certain limitations are satisfied. For example, this part of our responsive CSS will only be used if the width of the current device is above 480px:
@media screen and (min-width: 480px) { div { float: left; background: green; } }

Pseudo-Elements
Pseudo-elements are used to apply a specific style to a specific part of an HTML element or to select a specific subset of elements. For example,: first-line pseudo-element lets you define only a certain selector in the first line (first-line will apply to the first line of all). Similarly, a: visited pseudo-element lets you define everyone's style, like the links previously visited by the user. Obviously, these can come in handy.
Here is an example of a simple responsive design where we create three different layouts for a login button, one for desktop, tablet and smartphone. On smartphones, we will have a single icon, while on tablets we will have the same icon

So, where do I start?
The first step you should take is to organize all the elements of your webpage into different screens .See the desktop version of the layout presented above. In this case, the content on the left (green rectangle) can serve as some kind of main menu. But when low-resolution devices are used (for example, a tablet or smartphone), this main menu may appear at full width.
When determining the responsive layout for different devices, several key elements are important. Unlike desktop versions where there is ample space for our content, the development of smartphones is even more demanding. More than ever, specific content needs to be grouped and the importance of individual parts needs to be categorized.

Other Responsive Design Elements
When using a media query, keep in mind the behavior of all elements of the page, not just those that are being targeted, especially when using a liquid grid, in which case (against certain dimensions) the page will be completely full at any time. Moment, proportionately increasing and decreasing the size of the content. Since the widths are set in percentages, the graphical elements (i.e., images) can be distorted and distorted under this type of fluid format.

About Fluid Grid Systems
Such discussions should include the most accessible uses, the importance of the material based on visible page area, simplified reading, and intuitive navigation. Among these categories, one of the most important elements is content width adjustment. For example, so-called fluid grid systems set up elements, that is, elements based on relative width as a percentage of the overall page.
Although these fluid grid systems are closely related to what we are discussing here, they are really a completely separate entity that requires an additional tutorial to discuss in detail. Therefore, I will only mention some of the larger frameworks that support this type of behavior: bootstrap, unsemantic, and brackets.

Conclusion
Until recently, website optimization was a term reserved specifically for customizing functionality based on different web browsers. The term is now expected to adapt to responsive web design with device and screen size, as we face the inevitable struggle with the various browser standards we have today. To cut it on the modern web, your site must know not who is looking at it, but how.