DEV Community: Masudur Rahman

HTML

Masudur Rahman — Mon, 23 May 2022 04:45:54 +0000

HTML Introduction

HTML is a formatting system of our documents over the internet. It is a short form of Hyper Text Markup Language. Mainly it gives the structure of Web Pages.

British scientist Sir Tim Berners-Lee first introduced with it at the CERN nuclear physics laboratory in Switzerland during the 1980s.

HTML markup tags specify document elements such as headings, paragraphs, and tables. They mark up a document for display by a computer program known as a Web browser. The browser interprets the tags, displaying the headings, paragraphs, and tables in a layout that is adapted to the screen size and fonts available to it. Although it also contain anchors which helps to hyperlink another web page.

So, a marked-up document contains two types of text:

text to be displayed and
markup language on how to display it.

CRUD MongoDB

Masudur Rahman — Thu, 23 Dec 2021 16:35:10 +0000

CRUD

In computer programming, create , read , update , and delete are the four basic operations of persistent storage. CRUD is also sometimes used to describe user interface conventions that facilitate viewing , searching , and changing information using computer-based forms and reports.

To create a database in MongoDB, we have to start by creating a MongoClient object , then specify a connection URL with the correct *ip * address and the name of the database we want to create.

MongoDB will create the database if it does not exist, and make a connection to it. For example-

 var MongoClient = require('mongodb').MongoClient;
 var url = "mongodb://localhost:27017/mydb";

 MongoClient.connect(url, function(err, db) {
    if (err) throw err;
    console.log("Database created!");
    db.close();
 });

Second Step Collection

To create a collection in MongoDB, use the createCollection() method:

Create a collection called "customers":
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db("mydb");
  dbo.createCollection("customers", function(err, res) {
    if (err) throw err;
    console.log("Collection created!");
    db.close();
  });
});

Create

The first letter of CRUD , ‘C’ , refers to CREATE aka add , insert . Now insert a document in the "customers" collection.To insert a record, or document as it is called in MongoDB, into a collection, we use the insertOne() method.

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db("mydb");
  var myobj = { name: "Company Inc", address: "Highway 37" };
  dbo.collection("customers").insertOne(myobj, function(err, res) {
    if (err) throw err;
    console.log("1 document inserted");
    db.close();
  });
});

Find One

To select data from a collection in MongoDB, we can use the findOne() method. The findOne() method returns the first occurrence in the selection. The first parameter of the findOne() method is a query object. In this example we use an empty query object, which selects all documents in a collection (but returns only the first document).

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db("mydb");
  dbo.collection("customers").findOne({}, function(err, result) {
    if (err) throw err;
    console.log(result.name);
    db.close();
  });
});

Delete Document

To delete a record, or document as it is called in MongoDB, we use the deleteOne() method. The first parameter of the deleteOne() method is a query object defining which document to delete.

Delete the document with the address "Mountain 21":

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db("mydb");
  var myquery = { address: 'Mountain 21' };
  dbo.collection("customers").deleteOne(myquery, function(err, obj) {
    if (err) throw err;
    console.log("1 document deleted");
    db.close();
  });
});

Update Document

We can update a record, or document as it is called in MongoDB, by using the updateOne() method. The first parameter of the updateOne() method is a query object defining which document to update.

Update the document with the address "Valley 345" to name="Mickey" and address="Canyon 123"

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://127.0.0.1:27017/";

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db("mydb");
  var myquery = { address: "Valley 345" };
  var newvalues = { $set: {name: "Mickey", address: "Canyon 123" } };
  dbo.collection("customers").updateOne(myquery, newvalues, function(err, res) {
    if (err) throw err;
    console.log("1 document updated");
    db.close();
  });
});

Query

Filter the Result
When finding documents in a collection, we can filter the result by using a query object. The first argument of the find() method is a query object, and is used to limit the search.

Find documents with the address "Park Lane 38"

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db("mydb");
  var query = { address: "Park Lane 38" };
  dbo.collection("customers").find(query).toArray(function(err, result) {
    if (err) throw err;
    console.log(result);
    db.close();
  });
});

React Hooks

Masudur Rahman — Wed, 22 Dec 2021 12:13:12 +0000

Hooks are basically functional components of React. It doesn't work inside classes. They let us use React without classes. Now we will know about some basic and additional hooks.

Basic Hooks:

1. useState():

It returns a stateful value and a function to update it. For example-

In the above code, the initial rendering of the returned state (state) returned as the same value passed as the first argument (initialState).

And the setState function is used to update the state where it belongs. It accepts a new state value and enqueues a re-render of the component.

2. useEffect():

Basically useEffect hook allows us to perform side effects in our components. Such as: fetching data, directly updating the DOM and timer. The useEffect hook accepts two arguments. Second argument is optional. For example-

3. useContext():

In React, Context is the way to manage state globally. It accepts an object which returns from React.createContext and returns the current context value for that context. Where current context value is determined by the value prop of the nearest below the calling component in the tree.

It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

Additional Hooks:

useReducer ()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffec()
useDebugValue()

*In my next blog I will discuss Additional Hooks briefly. *